:root{
  --accent:#7c5cff;
  --bg:#0b0d14;
  --glass:rgba(20,24,38,0.55);
  --glass-2:rgba(30,35,54,0.6);
  --stroke:rgba(255,255,255,0.10);
  --stroke-2:rgba(255,255,255,0.16);
  --text:#eef1f8;
  --muted:#9aa3b8;
  --radius:16px;
  --font:'Space Grotesk';
  --shadow:0 8px 40px rgba(0,0,0,0.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--text);
  font-family:var(--font),'Sora',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg);overflow:hidden;
}
button,input,select,textarea{font-family:inherit;color:inherit}
.hidden{display:none !important}
.muted{color:var(--muted)}
.err{color:#ff7a85;font-size:13px;min-height:16px;margin:2px 0}

/* background layers */
#bg-layer{position:fixed;inset:0;z-index:-2;background-size:cover;background-position:center;
  background-image:radial-gradient(1200px 800px at 70% -10%, #241b4a 0%, #0b0d14 55%);transition:opacity .4s}
/* Solid dim only — no backdrop-filter here. A full-viewport backdrop-filter
   nested under the .glass blurs is extremely expensive to composite and was the
   main cause of navigation lag. The rgba dim alone gives the same look. */
#bg-scrim{position:fixed;inset:0;z-index:-1;background:rgba(6,8,14,var(--scrim,0.55))}

/* glass primitive */
.glass{
  background:var(--glass);border:1px solid var(--stroke);
  backdrop-filter:blur(12px) saturate(1.25);-webkit-backdrop-filter:blur(12px) saturate(1.25);
  box-shadow:var(--shadow);border-radius:var(--radius);
}

/* brand */
.brand{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.brand-mark{font-weight:700;letter-spacing:.5px;font-size:20px;
  background:linear-gradient(120deg,#fff,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand-sub{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:3px}

/* buttons */
.btn{border:1px solid var(--stroke-2);background:var(--glass-2);padding:9px 14px;border-radius:12px;
  cursor:pointer;font-weight:600;font-size:14px;transition:.15s}
.btn:hover{border-color:var(--accent);transform:translateY(-1px)}
.btn.primary{background:linear-gradient(120deg,var(--accent),#4b32c9);border-color:transparent;color:#fff}
.ghost{background:transparent;border:1px solid var(--stroke);color:var(--muted);padding:8px 10px;border-radius:10px;cursor:pointer;font-size:13px}
.ghost:hover{color:var(--text);border-color:var(--stroke-2)}
.mini{width:22px;height:22px;border-radius:7px;border:1px solid var(--stroke-2);background:var(--glass-2);cursor:pointer;color:var(--muted);line-height:1}
.mini:hover{color:#fff;border-color:var(--accent)}

/* ---------------- login ---------------- */
.login{position:fixed;inset:0;display:grid;place-items:center;padding:20px}
.login-card{width:min(400px,92vw);padding:30px}
.login-card h1{margin:6px 0 16px;font-size:22px}
.login-card label{display:block;font-size:13px;color:var(--muted);margin:12px 0}
.login-card input{width:100%;margin-top:6px;padding:11px 12px;border-radius:11px;border:1px solid var(--stroke-2);
  background:rgba(0,0,0,.25);font-size:15px}
.login-card input:focus{outline:none;border-color:var(--accent)}
.login-card .btn{width:100%;margin-top:16px;padding:12px}

/* ---------------- app shell ---------------- */
.app{display:grid;grid-template-columns:248px 1fr;height:100vh;gap:14px;padding:14px}
.sidebar{padding:16px 14px;display:flex;flex-direction:column;gap:6px;overflow:auto}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;
  border:1px solid transparent;color:var(--text);padding:9px 10px;border-radius:11px;cursor:pointer;font-size:14px;font-weight:500}
.nav-item:hover{background:rgba(255,255,255,.05)}
.nav-item.active{background:rgba(124,92,255,.16);border-color:rgba(124,92,255,.4)}
.nav-item .count{margin-left:auto;font-size:12px;color:var(--muted);background:rgba(0,0,0,.3);padding:1px 8px;border-radius:8px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none}
.dot.all{background:linear-gradient(120deg,#fff,var(--accent))}
.nav-label{display:flex;align-items:center;justify-content:space-between;font-size:11px;text-transform:uppercase;
  letter-spacing:2px;color:var(--muted);margin:14px 4px 4px}
.prog-list{display:flex;flex-direction:column;gap:2px}
.sidebar-foot{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding-top:12px}

.main{display:flex;flex-direction:column;gap:14px;min-width:0;min-height:0}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;flex-wrap:wrap}
.tb-left{display:flex;align-items:center;gap:12px;min-width:0}
.tb-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.scope{font-weight:600;font-size:15px;white-space:nowrap}
.search{width:280px;max-width:38vw;padding:9px 12px;border-radius:11px;border:1px solid var(--stroke-2);
  background:rgba(0,0,0,.25);font-size:14px}
.search:focus{outline:none;border-color:var(--accent)}
.sel{padding:8px 10px;border-radius:10px;border:1px solid var(--stroke-2);background:var(--glass-2);font-size:13px;cursor:pointer}
.seg{display:flex;border:1px solid var(--stroke-2);border-radius:10px;overflow:hidden}
.seg button{background:transparent;border:none;padding:8px 12px;cursor:pointer;color:var(--muted);font-size:13px;font-weight:600}
.seg button.on{background:var(--accent);color:#fff}

/* ---------------- board (kanban) ---------------- */
.board{flex:1;min-height:0;display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;padding-bottom:6px}
.column{flex:0 0 320px;display:flex;flex-direction:column;min-height:0;contain:layout paint style}
.col-head{display:flex;align-items:center;gap:8px;padding:4px 6px 10px;position:sticky;top:0}
.col-chip{width:10px;height:10px;border-radius:3px}
.col-title{font-weight:600;font-size:15.5px}
.col-count{font-size:13px;color:var(--muted);background:rgba(0,0,0,.3);padding:1px 9px;border-radius:8px}
/* flex:1 + min-height:0 makes this the bounded scroll container inside the
   column, so each bucket scrolls its own overflow independently. */
.col-cards{flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:12px;overflow-y:auto;padding:2px 4px 30px}
.col-cards.dragover{outline:2px dashed var(--accent);outline-offset:-6px;border-radius:14px}

/* card — block style */
.card{position:relative;padding:14px;border-radius:14px;border:1px solid var(--stroke);
  background:var(--glass-2);cursor:pointer;transition:transform .15s,border-color .15s;
  border-left:4px solid var(--sev,#8b93a7);contain:layout paint style}
.card:hover{transform:translateY(-2px);border-color:var(--stroke-2);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.card .c-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.card .c-title{font-weight:600;font-size:15px;line-height:1.3;margin:2px 0 6px}
.card .c-sum{font-size:13px;color:var(--muted);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .c-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px}
.card .c-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:11px;color:var(--muted)}
.chip{font-size:11px;font-weight:600;padding:2px 9px;border-radius:20px;border:1px solid transparent;white-space:nowrap}
.pill{font-size:11px;color:var(--muted);background:rgba(0,0,0,.28);padding:2px 8px;border-radius:8px}
.reward{color:#7ce7b0;font-weight:700}
.chain-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--accent);font-weight:600}

/* ---------------- row style: full-width cards in vertical status sections ---- */
.board.style-row{flex-direction:column;overflow-x:hidden;overflow-y:auto;gap:0;padding:0 6px 40px 0}
.section{width:100%;margin-bottom:10px}
.section-head{display:flex;align-items:center;gap:8px;padding:9px 4px 6px;position:sticky;top:0;z-index:3;
  cursor:pointer;user-select:none;background:linear-gradient(180deg,rgba(11,13,20,.94) 60%,rgba(11,13,20,0))}
.section-head:hover .col-title{color:#fff}
.caret{display:inline-block;width:13px;font-size:12px;color:var(--muted);transition:transform .15s}
.section.collapsed .caret{transform:rotate(-90deg)}
.section-cards{display:flex;flex-direction:column;gap:5px;padding:2px;min-height:38px;border-radius:12px}
.section-cards.dragover{outline:2px dashed var(--accent);outline-offset:-4px}
.section-empty{color:var(--muted);font-size:12px;padding:6px 4px}
.section{width:100%;margin-bottom:8px}

/* compact single-line row card: ref · priority · title (truncated) · meta */
.rowcard{display:flex;align-items:center;gap:10px;width:100%;padding:8px 14px;border-radius:10px;
  min-width:0;min-height:44px}
.rowcard:hover{transform:none;border-color:var(--accent)}
.c-ref{font-family:'JetBrains Mono',monospace;font-size:12px;color:#b6bece;background:rgba(0,0,0,.32);
  padding:3px 8px;border-radius:6px;flex:none;letter-spacing:.3px}
.r-title{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-weight:600;font-size:16px;line-height:1.3}
.r-right{display:flex;align-items:center;gap:9px;flex:none;font-size:13px;color:#a7b0c2;max-width:48%;overflow:hidden}
.r-asset,.r-date{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-date{min-width:66px;text-align:right}
.rowcard .chip{font-size:12px;padding:2px 10px}
.rowcard .pill{font-size:12px;padding:2px 9px;white-space:nowrap;color:#a7b0c2}

/* git-style chain tree in row view: a trunk down the children, an elbow into
   each one, and the trunk stopping at the last child's elbow. Row height is
   44px and the section gap is 5px, so the elbow sits at 22px and the trunk
   starts 5px above the child to meet the row before it. */
.chain-root{display:flex;flex-direction:column;gap:5px}
.chain-children{display:flex;flex-direction:column;gap:5px;margin-left:18px}
.chain-child{position:relative;padding-left:26px;display:flex;flex-direction:column;gap:5px}
.chain-child::before{content:"";position:absolute;left:0;top:-5px;bottom:0;width:2px;
  background:var(--accent);opacity:.5}
.chain-child:last-child::before{bottom:auto;height:27px}
.chain-child::after{content:"";position:absolute;left:0;top:22px;width:19px;height:2px;
  background:var(--accent);opacity:.5}
.chain-parent-ref{font-size:12px;color:var(--accent);white-space:nowrap;flex:none;font-weight:600}

/* ---------------- chains view ---------------- */
.chains{flex:1;overflow:auto;padding:10px}
.tree{margin-bottom:26px}
.tree-row{display:flex;align-items:flex-start;gap:0}
.node-wrap{display:flex;flex-direction:column;align-items:flex-start}
.tnode{position:relative;padding:10px 12px;border-radius:12px;border:1px solid var(--stroke);
  background:var(--glass-2);cursor:pointer;min-width:200px;max-width:280px;border-left:4px solid var(--sev,#8b93a7)}
.tnode:hover{border-color:var(--accent)}
.tnode .tn-title{font-weight:600;font-size:14px}
.tnode .tn-meta{font-size:11px;color:var(--muted);margin-top:4px;display:flex;gap:6px;flex-wrap:wrap}
.children{margin-left:34px;border-left:2px solid var(--stroke-2);padding-left:20px;margin-top:10px;
  display:flex;flex-direction:column;gap:14px;position:relative}
.child{position:relative}
.child::before{content:"";position:absolute;left:-20px;top:22px;width:18px;height:2px;background:var(--stroke-2)}
.chains-empty{color:var(--muted);text-align:center;margin-top:40px}

/* ---------------- modal ---------------- */
/* No backdrop-filter here — a full-viewport blur under the modal's own glass
   blur was the source of the open/scroll lag. The dim alone is enough. */
.modal-wrap{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;
  background:rgba(4,6,12,.66)}
.modal{width:min(760px,96vw);max-height:90vh;overflow:auto;padding:22px}

/* finding preview: TWO separate solid panels — content + config — side by
   side. Solid (not glass) backgrounds on purpose: a scroll container inside a
   backdrop-filter element repaints the blur every frame, which is what made
   report scrolling crawl. No backdrop-filter anywhere in here. */
.dual{display:flex;gap:16px;align-items:stretch;width:min(1320px,96vw);height:92vh;max-height:92vh}
.panel{background:#11131b;border:1px solid var(--stroke);border-radius:16px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;overflow:hidden;min-height:0}
.panel.content{flex:1 1 auto;min-width:0}
.panel.config{flex:0 0 360px;max-width:42vw}
.phead{display:flex;align-items:center;gap:10px;padding:12px 14px 12px 16px;border-bottom:1px solid var(--stroke);flex:none}
.phead .ptitle{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:2px;font-weight:600}
.ftitle{flex:1;font-size:18px;font-weight:600;background:transparent;border:1px solid transparent;
  border-radius:9px;padding:7px 9px;color:var(--text)}
.ftitle:hover{border-color:var(--stroke)}
.ftitle:focus{border-color:var(--accent);background:rgba(0,0,0,.3);outline:none}
.content .tabs{margin:0;padding:12px 16px 0;flex:none}
.pbody{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:14px 18px}
.pbody.config{padding:12px 16px 20px;display:flex;flex-direction:column;gap:2px}
.content .md-body{max-height:none;background:transparent;border:none;padding:0;font-size:14.5px;overflow:visible}
.content textarea{width:100%;min-height:62vh;border:1px solid var(--stroke-2);background:rgba(0,0,0,.28);
  border-radius:10px;padding:12px 14px;font-family:'JetBrains Mono',monospace;font-size:13px;
  line-height:1.55;color:inherit;resize:vertical}
.content textarea:focus{outline:none;border-color:var(--accent)}
.pbody.config .field{margin:8px 0}
.pbody.config h3{font-size:12px;margin:16px 0 6px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.pbody.config .dates{font-size:11px;color:var(--muted);margin:12px 0 10px}
@media(max-width:900px){
  .dual{flex-direction:column;height:94vh;width:96vw;overflow-y:auto}
  .panel.config{flex:0 0 auto;max-width:none}
  .panel.content{min-height:60vh}
}
.modal h2{margin:0 0 4px;font-size:20px}
.modal .row{display:flex;gap:12px;flex-wrap:wrap}
.field{display:flex;flex-direction:column;gap:5px;margin:10px 0;flex:1;min-width:150px}
.field label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.field input,.field select,.field textarea{padding:9px 11px;border-radius:10px;border:1px solid var(--stroke-2);
  background:rgba(0,0,0,.28);font-size:14px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent)}
.field textarea{min-height:120px;resize:vertical;font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.5}
.modal-actions{display:flex;justify-content:space-between;gap:10px;margin-top:18px;align-items:center}
.modal-actions .right{display:flex;gap:8px}
.md-body{background:rgba(0,0,0,.28);border:1px solid var(--stroke);border-radius:12px;padding:14px 16px;
  font-size:14px;line-height:1.6;max-height:340px;overflow:auto}
.md-body h1,.md-body h2,.md-body h3{margin:.6em 0 .3em;font-size:16px}
.md-body code{font-family:'JetBrains Mono',monospace;background:rgba(0,0,0,.4);padding:1px 5px;border-radius:5px;font-size:12px}
.md-body pre{background:rgba(0,0,0,.45);padding:12px;border-radius:10px;overflow:auto}
.md-body pre code{background:none;padding:0}
.md-body a{color:var(--accent)}
.md-body hr{border:none;border-top:1px solid var(--stroke-2);margin:12px 0}

.link-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--stroke);border-radius:10px;margin:6px 0;font-size:13px}
.link-row .x{margin-left:auto;cursor:pointer;color:var(--muted)}
.link-row .x:hover{color:#ff7a85}

/* settings */
.set-section{border-top:1px solid var(--stroke);padding:16px 0;margin-top:6px}
.set-section h3{margin:0 0 10px;font-size:15px}
.opt-list{display:flex;flex-direction:column;gap:6px}
.opt-row{display:flex;align-items:center;gap:8px;font-size:13px}
.opt-row input[type=text]{flex:1;padding:6px 9px;border-radius:8px;border:1px solid var(--stroke-2);background:rgba(0,0,0,.28)}
.opt-row input[type=color]{width:32px;height:30px;border:none;background:none;padding:0;border-radius:6px;cursor:pointer}
.opt-row .def{font-size:11px;cursor:pointer;color:var(--muted)}
.opt-row .def.on{color:#7ce7b0}
.opt-row .x{cursor:pointer;color:var(--muted)}
.opt-row .x:hover{color:#ff7a85}
.tabs{display:flex;gap:6px;margin:10px 0}
.tabs button{padding:6px 12px;border-radius:9px;border:1px solid var(--stroke-2);background:transparent;color:var(--muted);cursor:pointer;font-size:13px}
.tabs button.on{background:var(--accent);color:#fff;border-color:transparent}
.token-box{font-family:'JetBrains Mono',monospace;font-size:12px;word-break:break-all;background:rgba(0,0,0,.35);
  padding:10px;border-radius:10px;border:1px solid var(--stroke)}

/* ---------------- drag-to-chain skeleton preview ---------------- */
/* Fixed overlay so it never shifts the board or intercepts the drag. */
.chain-skeleton{position:fixed;z-index:70;pointer-events:none;display:flex;align-items:center;
  animation:skelIn .12s ease-out}
@keyframes skelIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.skel-elbow{width:20px;height:2px;background:var(--accent);opacity:.7;flex:none;position:relative}
.skel-elbow::before{content:"";position:absolute;left:0;top:-24px;width:2px;height:26px;
  background:var(--accent);opacity:.7}
/* opaque on purpose: a translucent preview lets the row underneath bleed
   through and the two sets of text collide */
.skel-box{flex:1;min-width:0;display:flex;align-items:center;gap:9px;min-height:40px;padding:8px 14px;
  border:2px dashed var(--accent);border-radius:10px;background:#1b1733;
  box-shadow:0 10px 28px rgba(0,0,0,.55);overflow:hidden}
.skel-title{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--text)}
.skel-hint{margin-left:auto;padding-left:10px;font-size:11.5px;color:var(--accent);white-space:nowrap;font-weight:600}

/* ---------------- right-click context menu ---------------- */
.ctxmenu{position:fixed;z-index:90;min-width:262px;max-width:360px;background:#141824;
  border:1px solid var(--stroke-2);border-radius:12px;box-shadow:0 18px 55px rgba(0,0,0,.65);
  padding:6px;font-size:13.5px;max-height:74vh;overflow-y:auto}
.ctx-head{padding:7px 10px 8px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--stroke);
  margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctx-head.back{cursor:pointer;color:var(--accent);font-weight:600}
.ctx-head.back:hover{color:#fff}
.ctx-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;cursor:pointer;
  white-space:nowrap;overflow:hidden}
.ctx-item:hover{background:rgba(124,92,255,.2)}
.ctx-item.danger{color:#ff7a85}
.ctx-item.danger:hover{background:rgba(255,122,133,.16)}
.ctx-hint{margin-left:auto;padding-left:10px;color:var(--muted);font-size:12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52%}
.ctx-dot{width:9px;height:9px;border-radius:3px;flex:none}
.ctx-ref{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);
  background:rgba(0,0,0,.35);padding:2px 6px;border-radius:5px;flex:none}
.ctx-sep{height:1px;background:var(--stroke);margin:5px 2px}
.ctx-search{width:100%;padding:8px 10px;margin:5px 0;border-radius:8px;border:1px solid var(--stroke-2);
  background:rgba(0,0,0,.3);font-size:13px}
.ctx-search:focus{outline:none;border-color:var(--accent)}
.ctx-list{max-height:290px;overflow-y:auto}
.ctx-empty{padding:10px;color:var(--muted);font-size:12.5px}
.ctx-dir{display:flex;gap:6px;margin:5px 0 2px}
.ctx-dir button{flex:1;padding:7px 6px;border-radius:8px;border:1px solid var(--stroke-2);
  background:transparent;color:var(--muted);cursor:pointer;font-size:12px;font-weight:600}
.ctx-dir button.on{background:var(--accent);color:#fff;border-color:transparent}

/* toast */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:80;
  background:var(--glass-2);border:1px solid var(--stroke-2);padding:11px 18px;border-radius:12px;
  font-size:14px;box-shadow:var(--shadow);backdrop-filter:blur(14px)}
.toast.ok{border-color:rgba(124,231,176,.5)}
.toast.bad{border-color:rgba(255,122,133,.5)}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)}

@media(max-width:820px){
  .app{grid-template-columns:1fr}
  .sidebar{display:none}
}