:root{
  --bg:#05070f; --panel:#0b1120ee; --line:#1e293b;
  --txt:#e2e8f0; --dim:#64748b;
  --c1:#38bdf8; --c2:#a78bfa;
  --studied:#fbbf24; --mastered:#34d399; --none:#334155;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--txt);
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif}
#particles{position:fixed;inset:0;z-index:0;opacity:.55}

/* ---------- top bar ---------- */
#topbar{position:relative;z-index:5;display:flex;justify-content:space-between;align-items:center;
  gap:16px;padding:12px 20px;background:linear-gradient(180deg,#0b1120f2,#0b112000)}
.brand{display:flex;align-items:center;gap:12px;min-width:280px}
.logo{width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#7dd3fc,#0ea5e9 45%,#0c4a6e);
  box-shadow:0 0 18px #38bdf8aa,0 0 42px #38bdf844;flex:none}
.brand h1{font-size:15px;letter-spacing:2px;font-weight:700}
.brand h1 span{color:var(--c1);font-weight:300}
.brand p{font-size:11px;color:var(--dim);letter-spacing:1px;margin-top:2px}
.controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
#search{width:230px;padding:8px 12px;border-radius:20px;border:1px solid var(--line);
  background:#0f172acc;color:var(--txt);font-size:13px;outline:none}
#search:focus{border-color:var(--c1);box-shadow:0 0 10px #38bdf855}
.stats{display:flex;gap:14px;padding:0 6px}
.stat{text-align:center}
.stat span{display:block;font-size:15px;font-weight:700;color:var(--mastered)}
.stat:first-child span{color:var(--studied)}
.stat label{font-size:9px;color:var(--dim);letter-spacing:1px;text-transform:uppercase}
button{padding:8px 14px;border-radius:18px;border:1px solid var(--line);background:#0f172a;
  color:var(--txt);font-size:12px;cursor:pointer;transition:.2s}
button:hover{border-color:var(--c1);color:#fff;box-shadow:0 0 10px #38bdf833}
button.danger:hover{border-color:#f87171;box-shadow:0 0 10px #f8717133}

/* ---------- stage ---------- */
#stage{position:relative;z-index:2;height:calc(100vh - 64px - 30px)}
#map{width:100%;height:100%;display:block;cursor:grab}
#map:active{cursor:grabbing}

.link{fill:none;stroke-width:1.4;opacity:.5;transition:opacity .3s}
.link.hot{opacity:1;stroke-width:2.4;filter:drop-shadow(0 0 6px currentColor)}
.link.dim{opacity:.06}

.node{cursor:pointer}
.node circle.core-dot{transition:r .25s}
.node:hover circle.core-dot{filter:brightness(1.5)}
.node text{font-family:"Segoe UI",system-ui,sans-serif;fill:var(--txt);pointer-events:none}
.node.dim{opacity:.12}
.node.dim .link{opacity:.05}
.halo{fill:none;opacity:.35;animation:pulse 3s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.12}50%{opacity:.45}}

/* ---------- side panel ---------- */
#panel{position:absolute;top:12px;right:12px;bottom:12px;width:340px;z-index:6;
  background:var(--panel);backdrop-filter:blur(10px);border:1px solid var(--line);
  border-radius:16px;padding:20px;overflow-y:auto;
  transform:translateX(115%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
#panel.open{transform:translateX(0)}
#panel-close{position:absolute;top:12px;right:12px;width:28px;height:28px;padding:0;
  border-radius:50%;font-size:16px;line-height:1}
#panel h2{font-size:17px;margin-bottom:2px;padding-right:26px}
#panel .crumb{font-size:11px;color:var(--dim);letter-spacing:1px;text-transform:uppercase;margin-bottom:14px}
#panel .meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
#panel .chip{font-size:11px;padding:4px 10px;border-radius:12px;border:1px solid var(--line);color:var(--dim)}
#panel .chip b{color:var(--txt)}
.topic{display:flex;align-items:flex-start;gap:10px;padding:9px 8px;border-radius:10px;font-size:13px}
.topic:hover{background:#1e293b55}
.topic .dot-btn{width:18px;height:18px;border-radius:50%;flex:none;margin-top:1px;
  border:2px solid var(--none);background:transparent;cursor:pointer;padding:0}
.topic .dot-btn.s0{border-color:var(--none)}
.topic .dot-btn.s1{border-color:var(--studied);background:#fbbf2455;box-shadow:0 0 8px #fbbf2455}
.topic .dot-btn.s2{border-color:var(--mastered);background:var(--mastered);box-shadow:0 0 10px #34d39988}
.topic.done-2 span{color:var(--mastered)}
.obj-link{display:block;width:100%;text-align:left;margin:4px 0;padding:10px 12px;border-radius:10px;
  border:1px solid transparent;font-size:13px}
.obj-link:hover{background:#1e293b66;border-color:var(--line)}
.obj-link .oc{font-family:ui-monospace,Consolas,monospace;color:var(--dim);margin-right:8px}
.obj-link .st{float:right;font-size:11px}
.panel-note{margin-top:16px;padding:12px;border-radius:10px;background:#0f172a;border:1px dashed var(--line);
  font-size:12px;color:var(--dim);line-height:1.5}

/* ---------- legend / footer ---------- */
#legend{position:absolute;left:16px;bottom:14px;z-index:5;font-size:12px;color:var(--dim)}
#legend .row{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.dot.none{background:var(--none)}.dot.studied{background:var(--studied)}.dot.mastered{background:var(--mastered)}
#legend .hint{margin-top:8px;font-size:10.5px;line-height:1.6;opacity:.7}
#foot{position:relative;z-index:3;height:30px;display:flex;align-items:center;justify-content:center;
  font-size:10.5px;color:#475569;letter-spacing:.4px;padding:0 16px;text-align:center}

/* ---------- scrollbars ---------- */
#panel::-webkit-scrollbar{width:8px}
#panel::-webkit-scrollbar-thumb{background:#1e293b;border-radius:4px}

@media (max-width:900px){
  #topbar{flex-direction:column;align-items:flex-start;padding-bottom:8px}
  #panel{width:min(340px,88vw)}
  #search{width:160px}
}