/* ============================================================= tokens */
:root{
  /* dark theme (default) */
  --bg:#0e1220; --bg2:#141a2e; --panel:#171e34; --panel2:#1e2740;
  --line:#2a3352; --line2:#374169;
  --ink:#eef2ff; --muted:#93a0c4; --faint:#66739a;
  --brand:#7c9cff; --brand2:#5a78e6;
  --start:#3ecf8e; --goal:#ffb454; --frontier:#4aa8ff;
  --closed:#8b7bd8; --path:#ff7a8a; --danger:#ff6b6b;
  --good:#3ecf8e; --bad:#ff8080; --warn:#ffb454;
  --on-good:#8ff0c4; --on-bad:#ffb3b3; --on-warn:#ffd699;   /* readable text on the tinted chips */
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:14px;
  --topbar:linear-gradient(180deg,rgba(30,39,64,.9),rgba(23,30,52,.9));
  --panel-wash:rgba(20,26,46,.5);
  --overlay:rgba(14,18,32,.82); --overlay-dim:rgba(10,14,26,.55);
  --page:radial-gradient(1200px 700px at 15% -10%,#17203a 0,transparent 60%),
         radial-gradient(1000px 600px at 100% 0,#1a2340 0,transparent 55%), #0e1220;
  /* graph canvas (read by Cytoscape via getComputedStyle) */
  --cy-bg:#141a2e; --cy-grid:rgba(255,255,255,.045);
  --node-fill:#243056; --node-border:#3a4a7a; --node-text:#ffffff; --node-halo:#080b14;
  --edge:#3a4a7a; --edge-lbl-bg:#0e1220; --edge-lbl-text:#93a0c4;
}
[data-theme="light"]{
  --bg:#ffffff; --bg2:#ffffff; --panel:#ffffff; --panel2:#f4f6fc;
  --line:#e4e8f1; --line2:#d2d9e7;
  --ink:#1b2338; --muted:#5c6a86; --faint:#8a95ad;
  --brand:#4a63c8; --brand2:#3a52b8;
  --start:#1f9d63; --goal:#d8880f; --frontier:#2a80d8;
  --closed:#6b5bc0; --path:#d9455a; --danger:#e0524f;
  --good:#1f9d63; --bad:#d9455a; --warn:#c07d0a;
  --on-good:#137a49; --on-bad:#c0303f; --on-warn:#8a5906;    /* dark saturated text for the light chips */
  --shadow:0 8px 24px rgba(60,80,140,.10);
  --topbar:linear-gradient(180deg,#ffffff,#ffffff);
  --panel-wash:#ffffff;
  --overlay:rgba(255,255,255,.92); --overlay-dim:rgba(244,247,252,.6);
  --page:#ffffff;
  --cy-bg:#ffffff; --cy-grid:rgba(30,45,90,.05);
  --node-fill:#2a3556; --node-border:#5566a0; --node-text:#ffffff; --node-halo:#131a2e;
  --edge:#aeb8d0; --edge-lbl-bg:#ffffff; --edge-lbl-text:#56617e;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,sans-serif; color:var(--ink);
  background:var(--page);
  display:flex; flex-direction:column; overflow:hidden;
}
.topbar,.card,.panel,.btn,.tool,.stage,#cy{transition:background-color .25s,color .25s,border-color .25s}
.mono{font-family:"JetBrains Mono",monospace}
.hidden{display:none !important}
.muted{color:var(--muted); font-size:13px; line-height:1.6}
button{font-family:inherit; cursor:pointer}

/* ============================================================= top bar */
.topbar{
  display:flex; align-items:center; gap:22px; padding:12px 20px;
  background:var(--topbar);
  border-bottom:1px solid var(--line); backdrop-filter:blur(8px); z-index:5;
}
.brand{display:flex; align-items:center; gap:12px}
.logo{
  width:38px; height:38px; display:grid; place-items:center; border-radius:11px;
  background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff;
  font-size:18px; box-shadow:0 6px 18px rgba(124,156,255,.4);
}
.brand h1{margin:0; font-size:17px; font-weight:800; letter-spacing:.2px}
.tag{margin:1px 0 0; font-size:11.5px; color:var(--muted); font-weight:500}
.problem-name{margin-left:8px; display:flex; flex-direction:column; gap:2px}
.problem-name label{font-size:10px; text-transform:uppercase; letter-spacing:1px; color:var(--faint)}
.problem-name input{
  background:var(--panel2); border:1px solid var(--line); color:var(--ink);
  padding:7px 11px; border-radius:9px; width:320px; font-size:13px; font-weight:600;
}
.top-actions{margin-left:auto; display:flex; gap:8px}

/* ============================================================= buttons */
.btn{
  background:var(--panel2); color:var(--ink); border:1px solid var(--line2);
  padding:8px 14px; border-radius:10px; font-size:13px; font-weight:600;
  transition:.15s; white-space:nowrap;
}
.btn:hover{border-color:var(--brand); transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand2)); border-color:transparent; color:#fff}
.btn.primary:hover{box-shadow:0 8px 22px rgba(124,156,255,.4)}
.btn.ghost{background:transparent}
.btn.danger{background:rgba(255,107,107,.12); border-color:rgba(255,107,107,.4); color:var(--on-bad)}
.btn.block{width:100%; margin-top:12px; justify-content:center}
.save-row{display:grid; grid-template-columns:1fr auto auto; gap:6px; margin-top:14px}
.save-row .btn{justify-content:center}
.btn.tiny{padding:5px 10px; font-size:12px}
.btn.icon{padding:8px 11px; font-size:15px; line-height:1}

/* ============================================================= layout */
.workspace{flex:1; display:grid; grid-template-columns:280px 1fr 380px; min-height:0;
  transition:grid-template-columns .26s cubic-bezier(.4,0,.2,1)}
/* collapsing a side panel hands its width to the OTHER panel, so the centre
   graph column (1fr) keeps exactly the same size (46 + 614 = 280 + 380). */
.workspace.left-collapsed{grid-template-columns:46px 1fr 614px}
.workspace.right-collapsed{grid-template-columns:614px 1fr 46px}
.workspace.left-collapsed.right-collapsed{grid-template-columns:46px 1fr 46px}

.panel{position:relative; display:flex; flex-direction:column; min-height:0; overflow:hidden}
.panel.left{border-right:1px solid var(--line); background:var(--panel-wash)}
.panel.right{border-left:1px solid var(--line); background:var(--panel-wash)}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 12px; border-bottom:1px solid var(--line); min-height:42px}
.panel-title{font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:1.2px; color:var(--muted)}
.panel-body{flex:1; min-height:0; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:14px}
.panel-collapse{width:28px; height:28px; border-radius:8px; border:1px solid var(--line2);
  background:var(--panel2); color:var(--muted); font-size:13px; display:grid; place-items:center; transition:.15s}
.panel-collapse:hover{border-color:var(--brand); color:var(--brand)}

/* rail shown when a panel is collapsed */
.panel-expand{display:none}
.left-collapsed .panel.left .panel-head, .left-collapsed .panel.left .panel-body{display:none}
.right-collapsed .panel.right .panel-head, .right-collapsed .panel.right .panel-body{display:none}
.left-collapsed .panel.left .panel-expand,
.right-collapsed .panel.right .panel-expand{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  width:100%; height:100%; padding:14px 0; background:transparent; border:none; cursor:pointer; color:var(--muted);
}
.left-collapsed .panel.left .panel-expand:hover,
.right-collapsed .panel.right .panel-expand:hover{color:var(--brand)}
.panel-expand .chev{width:28px; height:28px; border-radius:8px; border:1px solid var(--line2);
  background:var(--panel2); display:grid; place-items:center; font-size:14px}
.panel-expand .vlabel{writing-mode:vertical-rl; text-orientation:mixed; font-size:11.5px;
  font-weight:700; letter-spacing:2px; text-transform:uppercase}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px; box-shadow:var(--shadow);
}
.card.grow{flex:1; display:flex; flex-direction:column; min-height:0}
.card h2{margin:0 0 12px; font-size:12px; text-transform:uppercase; letter-spacing:1.4px; color:var(--muted)}

/* ============================================================= editor tools */
.tool-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.tool{
  background:var(--panel2); border:1px solid var(--line); color:var(--ink);
  padding:11px 8px; border-radius:10px; font-size:13px; font-weight:600; transition:.15s;
}
.tool:hover{border-color:var(--brand2)}
.tool.active{background:linear-gradient(135deg,var(--brand),var(--brand2)); border-color:transparent; color:#fff; box-shadow:0 6px 16px rgba(124,156,255,.35)}
.tool.danger.active{background:linear-gradient(135deg,#ff6b6b,#e04f4f)}
.hint{margin:10px 0 0; font-size:11.5px; color:var(--faint); line-height:1.5}

.editor label{display:block; font-size:11px; color:var(--muted); margin:10px 0 4px; font-weight:600}
.editor input[type=text],.editor input[type=number],#nodeLabel,#nodeH,#edgeWeight{
  width:100%; background:var(--panel2); border:1px solid var(--line); color:var(--ink);
  padding:8px 10px; border-radius:8px; font-size:13px;
}
.flags{display:flex; gap:16px; margin-top:10px}
.chk{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink); cursor:pointer; margin:6px 0}
.chk input{width:16px; height:16px; accent-color:var(--brand)}
.edge-head{font-family:"JetBrains Mono",monospace; font-size:14px; font-weight:600; margin-bottom:4px}
.editor .tiny{margin-top:12px}

/* ============================================================= stage */
.stage{position:relative; display:flex; flex-direction:column; min-width:0}
#cy{flex:1; background:
  radial-gradient(circle at 1px 1px,var(--cy-grid) 1px,transparent 0) 0 0/26px 26px,
  var(--cy-bg);}
.stage-legend{
  position:absolute; top:12px; left:12px; display:flex; gap:14px; flex-wrap:wrap;
  background:var(--overlay); border:1px solid var(--line); border-radius:10px;
  padding:8px 12px; font-size:11.5px; color:var(--ink); backdrop-filter:blur(6px);
  box-shadow:var(--shadow);
}
.stage-legend span{color:var(--muted)}
.stage-legend span{display:flex; align-items:center; gap:6px}
.dot{width:10px; height:10px; border-radius:50%; display:inline-block}
.dot.start{background:var(--start)} .dot.goal{background:var(--goal)}
.dot.frontier{background:var(--frontier)} .dot.closed{background:var(--closed)}
.dot.path{background:var(--path)}

/* algorithm-name badge on top of the graph */
.graph-badge{
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:9px; z-index:9;
  background:var(--overlay); border:1px solid var(--line2); border-radius:22px;
  padding:7px 16px; box-shadow:var(--shadow); backdrop-filter:blur(6px);
}
.graph-badge .gb-name{font-weight:800; font-size:15px; color:var(--ink); letter-spacing:.2px}
.graph-badge .gb-status{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--muted)}
.graph-badge .gb-dot{width:9px; height:9px; border-radius:50%; background:var(--frontier)}
.graph-badge[data-st="running"] .gb-dot{background:var(--frontier); animation:pulse 1s ease-in-out infinite}
.graph-badge[data-st="running"] .gb-status{color:var(--frontier)}
.graph-badge[data-st="done"] .gb-dot{background:var(--good); animation:none}
.graph-badge[data-st="done"] .gb-status{color:var(--good)}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1)}50%{opacity:.35; transform:scale(.7)}}

/* graph toolbar (clear / save image / full page) + full-page overlay */
.stage-tools{position:absolute; top:12px; right:12px; z-index:10; display:flex; gap:6px}
.expand-btn{
  width:32px; height:32px; border-radius:9px; border:1px solid var(--line2);
  background:var(--overlay); color:var(--muted); font-size:14px; display:grid; place-items:center;
  cursor:pointer; transition:.15s; backdrop-filter:blur(6px); box-shadow:var(--shadow);
}
.expand-btn:hover{border-color:var(--brand); color:var(--brand); transform:translateY(-1px)}
.tabs .expand-btn{margin-left:auto; width:27px; height:27px; font-size:12px; background:var(--panel2); box-shadow:none; backdrop-filter:none}
.maximized{
  position:fixed !important; inset:0 !important; z-index:200 !important;
  margin:0 !important; border-radius:0 !important; box-shadow:none !important; border:none !important;
}
.card.grow.maximized{padding:16px 30px 24px}
.maximized .tabs{padding-top:2px}

/* larger, more readable typography when the results are full-page */
.card.grow.maximized .tabs .tab{font-size:15.5px; padding:11px 18px}
.card.grow.maximized .tab-body{max-width:1400px; margin:0 auto; width:100%}
.card.grow.maximized #rAlgo{font-size:26px; margin-bottom:16px}
.card.grow.maximized .chip{font-size:14.5px; padding:8px 16px}
.card.grow.maximized .kv{font-size:17px; padding:14px 0}
.card.grow.maximized table.steps{font-size:15.5px}
.card.grow.maximized table.steps th{font-size:12.5px; padding:12px 14px}
.card.grow.maximized table.steps td{padding:11px 14px}
.card.grow.maximized table.compare{font-size:15px}
.card.grow.maximized table.compare th{font-size:12px}
.card.grow.maximized table.compare th,
.card.grow.maximized table.compare td{padding:13px 15px}
.card.grow.maximized table.compare li{margin:4px 0}
.card.grow.maximized #learnBox{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.card.grow.maximized .learn-card{padding:18px}
.card.grow.maximized .learn-card h3{font-size:18px}
.card.grow.maximized .learn-card .idea{font-size:15px}
.card.grow.maximized .learn-card .lmeta{font-size:13.5px}
.card.grow.maximized .learn-card .pc ul{font-size:13.5px}

/* run overlay / spinner */
.run-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; background:var(--overlay-dim); backdrop-filter:blur(2px); z-index:8;
  opacity:0; pointer-events:none; transition:opacity .18s;
}
.run-overlay.show{opacity:1; pointer-events:auto}
.spinner{
  width:52px; height:52px; border-radius:50%;
  border:4px solid rgba(124,156,255,.22); border-top-color:var(--brand);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.run-text{
  font-size:14px; font-weight:700; color:var(--ink); letter-spacing:.3px;
  padding:6px 16px; border-radius:20px; background:var(--overlay); border:1px solid var(--line2);
  box-shadow:var(--shadow);
}
.btn.loading{position:relative; color:transparent !important; pointer-events:none}
.btn.loading::after{
  content:""; position:absolute; inset:0; margin:auto; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff; animation:spin .7s linear infinite;
}

/* playbar */
.playbar{
  display:flex; align-items:center; gap:10px; padding:10px 16px;
  background:linear-gradient(180deg,rgba(23,30,52,.6),var(--panel));
  border-top:1px solid var(--line);
}
.pb{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--line2);
  background:var(--panel2); color:var(--ink); font-size:13px; display:grid; place-items:center; transition:.15s;
}
.pb:hover{border-color:var(--brand)}
.pb.play{background:linear-gradient(135deg,var(--brand),var(--brand2)); border-color:transparent; color:#fff; width:46px}
.scrub{flex:1; display:flex; align-items:center; gap:10px}
.scrub input[type=range]{flex:1; accent-color:var(--brand)}
#pbLabel{font-size:12px; color:var(--muted); white-space:nowrap}
.speed{font-size:11.5px; color:var(--muted); display:flex; align-items:center; gap:6px}
.speed select{background:var(--panel2); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:5px 8px; font-size:12px}

/* ============================================================= right / algorithms */
.card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.card-head h2{margin:0}
.card-collapse{width:26px; height:26px; border-radius:7px; border:1px solid var(--line2);
  background:var(--panel2); color:var(--muted); font-size:13px; display:grid; place-items:center; transition:.15s}
.card-collapse:hover{border-color:var(--brand); color:var(--brand)}
.algo-summary{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px}
.algo-summary .asum{font-size:12px; font-weight:600; padding:4px 10px; border-radius:20px;
  background:rgba(124,156,255,.14); border:1px solid var(--brand); color:var(--brand)}
.algo-summary .asum.none{background:var(--panel2); border-color:var(--line2); color:var(--muted)}
.algo-list{display:flex; flex-direction:column; gap:6px}
.algo-row{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px;
  border:1px solid var(--line); background:var(--panel2); cursor:pointer; transition:.15s;
}
.algo-row:hover{border-color:var(--brand2)}
.algo-row.on{border-color:var(--brand); background:rgba(124,156,255,.12)}
.algo-row input{width:16px; height:16px; accent-color:var(--brand)}
.algo-row .nm{font-weight:600; font-size:13px}
.algo-row .cat{font-size:10px; padding:2px 7px; border-radius:20px; background:var(--panel); color:var(--muted); border:1px solid var(--line)}
.algo-row .cat.Informed{color:var(--goal); border-color:rgba(255,180,84,.4)}
.algo-row .algo-status{margin-left:auto; font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  padding:2px 8px; border-radius:20px; display:none; align-items:center; gap:5px}
.algo-row .algo-status[data-st]{display:inline-flex}
.algo-row .algo-status[data-st=""]{display:none}
.algo-row .algo-status[data-st="pending"]{background:var(--panel2); color:var(--muted); border:1px solid var(--line2)}
.algo-row .algo-status[data-st="running"]{background:rgba(74,168,255,.16); color:var(--frontier); border:1px solid rgba(74,168,255,.5)}
.algo-row .algo-status[data-st="running"]::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--frontier); animation:pulse 1s infinite}
.algo-row .algo-status[data-st="completed"]{background:rgba(62,207,142,.16); color:var(--good); border:1px solid rgba(62,207,142,.5)}
.algo-row.st-running{border-color:var(--frontier); background:rgba(74,168,255,.10)}
.algo-row.st-completed{border-color:rgba(62,207,142,.5)}
/* status colouring for the collapsed summary chips */
.algo-summary .asum.st-completed{background:rgba(62,207,142,.16); border-color:var(--good); color:var(--good)}
.algo-summary .asum.st-completed .asum-ic{color:var(--good)}
/* actively-searching chip: a moving sheen sweeps across the name + a breathing glow */
.algo-summary .asum.st-running{
  color:var(--frontier); border-color:var(--frontier);
  background:linear-gradient(100deg,
    rgba(74,168,255,.12) 25%, rgba(74,168,255,.34) 50%, rgba(74,168,255,.12) 75%);
  background-size:220% 100%;
  animation:searchSheen 1.25s linear infinite, searchGlow 1.6s ease-in-out infinite;
}
@keyframes searchSheen{0%{background-position:220% 0} 100%{background-position:-220% 0}}
@keyframes searchGlow{0%,100%{box-shadow:0 0 0 0 rgba(74,168,255,0)} 50%{box-shadow:0 0 9px 1px rgba(74,168,255,.4)}}
.asum-searching{margin-left:7px; font-size:10px; font-weight:700; letter-spacing:.4px; opacity:.9}
.asum-searching .dots::after{content:""; animation:searchDots 1.2s steps(1,end) infinite}
@keyframes searchDots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}100%{content:""}}
.dls-limit{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:12px 0 0}
.dls-limit label{font-size:12px; color:var(--muted)}
.dls-limit input{width:70px; background:var(--panel2); border:1px solid var(--line); color:var(--ink); padding:6px 8px; border-radius:8px}
.run-actions{display:flex; gap:8px; margin-top:12px}
.run-actions .btn{flex:1; justify-content:center}

/* tabs */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:12px}
.tab{background:none; border:none; color:var(--muted); padding:8px 12px; font-size:12.5px; font-weight:600; border-bottom:2px solid transparent; transition:.15s}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--brand); border-bottom-color:var(--brand)}
.tab-body{flex:1; overflow-y:auto; min-height:0}
.tab-pane{display:none} .tab-pane.active{display:block}

/* result */
#rAlgo{margin:0 0 12px; font-size:18px; font-weight:800}
.chips{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px}
.chip{font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:20px; border:1px solid var(--line2); background:var(--panel2)}
.chip.good{background:rgba(62,207,142,.15); border-color:rgba(62,207,142,.5); color:var(--on-good)}
.chip.bad{background:rgba(255,128,128,.13); border-color:rgba(255,128,128,.45); color:var(--on-bad)}
.chip.warn{background:rgba(255,180,84,.14); border-color:rgba(255,180,84,.5); color:var(--on-warn)}
.kv{display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px dashed var(--line); font-size:13px}
.kv span{color:var(--muted)} .kv b{text-align:right; word-break:break-word}

/* steps table */
table.steps{width:100%; border-collapse:collapse; font-size:12px}
table.steps th{position:sticky; top:0; background:var(--panel2); text-align:left; padding:8px; color:var(--muted); font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; border-bottom:1px solid var(--line)}
table.steps td{padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:top}
table.steps td.exp{font-weight:700; color:var(--goal); font-family:"JetBrains Mono",monospace}
table.steps td.open,table.steps td.closed{font-family:"JetBrains Mono",monospace; color:var(--muted); line-height:1.5}
table.steps tr.cur{background:rgba(124,156,255,.1)}
table.steps td.closed{color:var(--closed)}

/* compare */
.compare-wrap{overflow:auto}
table.compare{width:100%; border-collapse:collapse; font-size:12px; min-width:640px}
table.compare th,table.compare td{padding:9px 10px; border:1px solid var(--line); text-align:left; vertical-align:top}
table.compare th{background:var(--panel2); color:var(--muted); font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; position:sticky; top:0}
table.compare td.algo{font-weight:700; white-space:nowrap}
table.compare .yes{color:var(--good); font-weight:600}
table.compare .no{color:var(--bad); font-weight:600}
table.compare .best{background:rgba(62,207,142,.1)}
table.compare ul{margin:0; padding-left:15px} table.compare li{margin:2px 0; color:var(--muted)}

/* learn */
#learnBox{display:flex; flex-direction:column; gap:10px}
.learn-card{border:1px solid var(--line); border-radius:12px; padding:13px; background:var(--panel2)}
.learn-card h3{margin:0 0 4px; font-size:14px} .learn-card .lcat{font-size:10px; padding:2px 8px; border-radius:20px; background:var(--panel); color:var(--muted); border:1px solid var(--line)}
.learn-card .idea{font-size:12.5px; color:var(--ink); margin:8px 0; line-height:1.55}
.learn-card .lmeta{font-size:11.5px; color:var(--muted); margin:4px 0}
.learn-card .pc{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px}
.learn-card .pc ul{margin:4px 0 0; padding-left:16px; font-size:11.5px}
.learn-card .pc .pros li{color:var(--on-good)} .learn-card .pc .cons li{color:var(--on-bad)}
.learn-card .pc h4{margin:0; font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted)}

/* ============================================================= drawer */
.drawer{
  position:fixed; top:0; right:-460px; width:440px; height:100%; background:var(--panel);
  border-left:1px solid var(--line); box-shadow:-20px 0 50px rgba(0,0,0,.5); z-index:40;
  transition:right .28s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column;
}
.drawer.open{right:0}
.drawer-head{display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid var(--line)}
.drawer-head h2{margin:0; font-size:16px}
.drawer-tabs{display:flex; gap:4px; padding:10px 16px 0}
.dtab{background:none; border:none; color:var(--muted); padding:7px 12px; font-weight:600; font-size:13px; border-bottom:2px solid transparent}
.dtab.active{color:var(--brand); border-bottom-color:var(--brand)}
.drawer-body{flex:1; overflow-y:auto; padding:14px}
.dpane{display:none; flex-direction:column; gap:10px} .dpane.active{display:flex}
.lib-item{border:1px solid var(--line); border-radius:11px; padding:12px; background:var(--panel2)}
.lib-item .li-top{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.lib-item h4{margin:0 0 3px; font-size:14px}
.lib-item .li-meta{font-size:11px; color:var(--faint)}
.lib-item .li-actions{display:flex; gap:6px; margin-top:10px}
.lib-item img{width:100%; border-radius:8px; margin-top:8px; border:1px solid var(--line)}
.badge{font-size:10px; padding:2px 8px; border-radius:20px; background:var(--panel); border:1px solid var(--line2); color:var(--muted)}

.scrim{position:fixed; inset:0; background:rgba(4,7,15,.55); z-index:30; opacity:0; pointer-events:none; transition:.28s}
.scrim.show{opacity:1; pointer-events:auto}

/* ============================================================= auth */
.auth-area{display:flex; align-items:center; margin-left:4px}
.user-chip{display:flex; align-items:center; gap:9px; padding:4px 6px 4px 4px; border:1px solid var(--line2); border-radius:24px; background:var(--panel2)}
.user-chip .avatar{width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff; font-weight:800; font-size:13px; text-transform:uppercase}
.user-chip .uname{font-size:13px; font-weight:600; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.modal-scrim{position:fixed; inset:0; background:rgba(4,7,15,.6); backdrop-filter:blur(3px);
  z-index:80; opacity:0; pointer-events:none; transition:.22s}
.modal-scrim.show{opacity:1; pointer-events:auto}
.modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-46%) scale(.98);
  width:400px; max-width:calc(100vw - 32px); background:var(--panel); border:1px solid var(--line);
  border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,.5); z-index:90; padding:26px;
  opacity:0; pointer-events:none; transition:.24s cubic-bezier(.4,0,.2,1);
}
.modal.show{opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1)}
.modal-close{position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:8px;
  border:1px solid var(--line2); background:var(--panel2); color:var(--muted); cursor:pointer; font-size:13px}
.modal-close:hover{border-color:var(--brand); color:var(--brand)}
.auth-head{text-align:center; margin-bottom:18px}
.auth-head .logo{width:44px; height:44px; font-size:20px; margin:0 auto 12px; border-radius:13px}
.auth-head h2{margin:0 0 5px; font-size:20px; font-weight:800}
.auth-head p{margin:0; font-size:13px}
.auth-tabs{display:flex; background:var(--panel2); border:1px solid var(--line); border-radius:11px; padding:4px; margin-bottom:18px}
.atab{flex:1; background:none; border:none; color:var(--muted); padding:8px; font-size:13px; font-weight:700; border-radius:8px; cursor:pointer; transition:.15s}
.atab.active{background:var(--panel); color:var(--ink); box-shadow:var(--shadow)}
#authForm .field{margin-bottom:13px}
#authForm label{display:block; font-size:11.5px; font-weight:600; color:var(--muted); margin-bottom:5px}
#authForm input{width:100%; background:var(--panel2); border:1px solid var(--line2); color:var(--ink);
  padding:11px 13px; border-radius:10px; font-size:14px; transition:.15s}
#authForm input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(124,156,255,.18)}
.auth-error{background:rgba(255,128,128,.12); border:1px solid rgba(255,128,128,.4); color:var(--on-bad);
  font-size:12.5px; font-weight:600; padding:9px 12px; border-radius:9px; margin-bottom:13px}
.auth-row{display:flex; justify-content:space-between; align-items:center; margin:-4px 0 12px; min-height:18px}
.link-btn{background:none; border:none; color:var(--brand); font-size:12.5px; font-weight:600; cursor:pointer; padding:0}
.link-btn:hover{text-decoration:underline}
.auth-note{background:rgba(62,207,142,.12); border:1px solid rgba(62,207,142,.4); color:var(--on-good);
  font-size:12.5px; font-weight:600; padding:10px 12px; border-radius:9px; margin-bottom:13px; line-height:1.5}
#authSubmit{margin-top:4px}
.btn.primary:disabled{opacity:.6; pointer-events:none}

/* toast */
.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--panel2); border:1px solid var(--brand); color:var(--ink);
  padding:12px 20px; border-radius:12px; font-size:13px; font-weight:600;
  box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:.25s; z-index:60;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* scrollbars */
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-thumb{background:var(--line2); border-radius:8px}
::-webkit-scrollbar-track{background:transparent}