@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Inter','Segoe UI',system-ui,sans-serif;
  background:#0b1520;
  color:#c9d8e8;
  overflow-x:hidden;
  background-image:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(56,189,248,.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 110%, rgba(168,85,247,.05) 0%, transparent 60%),
    radial-gradient(circle, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:auto, auto, 28px 28px;
}

/* ── Header ── */
#hdr{
  background:linear-gradient(135deg,#060d18 0%,#0d1b2a 60%,#111827 100%);
  color:#fff;
  padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:100;
  box-shadow:0 2px 24px rgba(0,0,0,.7), 0 1px 0 rgba(56,189,248,.12);
  border-bottom:1px solid rgba(56,189,248,.15);
}
#hdr h1{font-size:16px;font-weight:700;line-height:1.3;color:#e2f0fa;letter-spacing:.01em}
#hdr .sub{font-size:11px;opacity:.5;margin-top:2px;color:#7baec8;letter-spacing:.02em}
#prog-wrap{display:flex;align-items:center;gap:10px;flex-shrink:0}
#prog-bar{
  width:180px;height:10px;
  background:rgba(255,255,255,.06);
  border-radius:6px;overflow:hidden;
  border:1px solid rgba(56,189,248,.18);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.5);
}
#prog-fill{
  height:100%;
  background:linear-gradient(90deg,#0ea5e9,#38d9a9,#4ade80);
  border-radius:6px;
  transition:width .5s cubic-bezier(.4,0,.2,1);
  width:0%;
  box-shadow:0 0 10px rgba(74,222,128,.45);
}
#prog-lbl{font-size:13px;font-weight:700;min-width:40px;text-align:right;color:#67e8f9}
#btn-reset{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  color:#64748b;
  padding:5px 11px;border-radius:6px;cursor:pointer;font-size:11px;margin-left:8px;
  transition:all .2s;letter-spacing:.02em;
}
#btn-reset:hover{background:rgba(255,255,255,.09);color:#cbd5e1;border-color:rgba(255,255,255,.25)}
.back-link{font-size:12px;color:#38bdf8;text-decoration:none;display:flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid rgba(56,189,248,.22);border-radius:8px;background:rgba(56,189,248,.06);transition:background .2s,border-color .2s;flex-shrink:0;white-space:nowrap}
.back-link:hover{background:rgba(56,189,248,.13);border-color:rgba(56,189,248,.42)}

/* ── Tree scroll area ── */
#tree-scroll{overflow:auto;padding:28px 28px 40px}
#tree-canvas{position:relative}
#tree-canvas svg{position:absolute;top:0;left:0;pointer-events:none}

/* ── Nodes ── */
.node{
  position:absolute;
  border-radius:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;user-select:none;
  border:1.5px solid transparent;
  transition:transform .16s cubic-bezier(.4,0,.2,1),box-shadow .16s;
  padding:4px 5px;
}
.node.clickable{cursor:pointer}
.node.clickable:hover{transform:scale(1.09);z-index:10}
.node.locked{
  background:rgba(15,25,38,.75);
  border-color:rgba(255,255,255,.06);
  color:#334155;
}
.node.active{
  background:linear-gradient(145deg,rgba(14,28,52,.95),rgba(20,38,70,.9));
  border-color:#3b82f6;
  color:#93c5fd;
  box-shadow:0 0 12px rgba(59,130,246,.22),inset 0 0 14px rgba(59,130,246,.04);
}
.node.clickable.active:hover{box-shadow:0 0 22px rgba(59,130,246,.5),inset 0 0 14px rgba(59,130,246,.08)}
.node.partial{
  background:linear-gradient(145deg,rgba(8,28,52,.95),rgba(12,40,70,.9));
  border-color:#38bdf8;
  color:#7dd3fc;
  box-shadow:0 0 14px rgba(56,189,248,.28),inset 0 0 12px rgba(56,189,248,.06);
}
.node.clickable.partial:hover{box-shadow:0 0 24px rgba(56,189,248,.55)}
.node.complete{
  background:linear-gradient(145deg,rgba(5,28,18,.95),rgba(8,42,24,.9));
  border-color:#4ade80;
  color:#86efac;
  box-shadow:0 0 14px rgba(74,222,128,.28),inset 0 0 12px rgba(74,222,128,.06);
}
.node.clickable.complete:hover{box-shadow:0 0 24px rgba(74,222,128,.55)}
.node.special{
  background:linear-gradient(145deg,rgba(30,20,5,.97),rgba(45,30,5,.95));
  border-color:#f59e0b;
  color:#fcd34d;
  box-shadow:0 0 22px rgba(245,158,11,.38),inset 0 0 18px rgba(245,158,11,.09);
  animation:goldPulse 3s ease-in-out infinite;
}
.node.special.locked{
  background:rgba(15,25,38,.75);
  border-color:rgba(255,255,255,.06);
  color:#334155;
  box-shadow:none;
  animation:none;
}
@keyframes goldPulse{
  0%,100%{box-shadow:0 0 22px rgba(245,158,11,.38),inset 0 0 18px rgba(245,158,11,.09)}
  50%{box-shadow:0 0 32px rgba(245,158,11,.6),inset 0 0 24px rgba(245,158,11,.14)}
}

.node-supra{font-size:9px;opacity:.55;font-weight:700;margin-bottom:1px;letter-spacing:.06em;text-transform:uppercase}
.node-label{font-size:9.5px;font-weight:600;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;max-width:100%}
.node-icon{font-size:16px;line-height:1;margin-bottom:2px}

/* Pips (Erklärt / Geübt / Selbständig) */
.pips{display:flex;gap:3px;margin-top:4px}
.pip{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.1);flex-shrink:0}
.pip.s1{background:#60a5fa;border-color:#3b82f6;box-shadow:0 0 5px rgba(96,165,250,.7)}
.pip.s2{background:#22d3ee;border-color:#06b6d4;box-shadow:0 0 5px rgba(34,211,238,.7)}
.pip.s3{background:#4ade80;border-color:#22c55e;box-shadow:0 0 6px rgba(74,222,128,.8)}

/* Branch colour accents */
.ba{border-color:#3b82f6!important;background:linear-gradient(145deg,rgba(14,28,52,.95),rgba(20,38,70,.9))!important;color:#93c5fd!important}
.bb{border-color:#06b6d4!important;background:linear-gradient(145deg,rgba(4,26,34,.95),rgba(6,38,50,.9))!important;color:#67e8f9!important}
.bc{border-color:#ef4444!important;background:linear-gradient(145deg,rgba(38,10,10,.95),rgba(52,14,14,.9))!important;color:#fca5a5!important}
.bg{border-color:#a78bfa!important;background:linear-gradient(145deg,rgba(22,10,44,.95),rgba(32,14,60,.9))!important;color:#c4b5fd!important}
.bh{border-color:#fb923c!important;background:linear-gradient(145deg,rgba(38,18,5,.95),rgba(52,26,8,.9))!important;color:#fdba74!important}

/* HK branch tint when partial/active */
.hk-A.active,.hk-A.partial{border-color:#60a5fa!important;background:linear-gradient(145deg,rgba(14,28,52,.95),rgba(20,38,70,.9))!important;color:#93c5fd!important;box-shadow:0 0 12px rgba(96,165,250,.25)!important}
.hk-B.active,.hk-B.partial{border-color:#06b6d4!important;background:linear-gradient(145deg,rgba(4,26,34,.95),rgba(6,38,50,.9))!important;color:#67e8f9!important;box-shadow:0 0 12px rgba(6,182,212,.25)!important}
.hk-C.active,.hk-C.partial{border-color:#f87171!important;background:linear-gradient(145deg,rgba(38,10,10,.95),rgba(52,14,14,.9))!important;color:#fca5a5!important;box-shadow:0 0 12px rgba(248,113,113,.25)!important}
.hk-G.active,.hk-G.partial{border-color:#c084fc!important;background:linear-gradient(145deg,rgba(22,10,44,.95),rgba(32,14,60,.9))!important;color:#c4b5fd!important;box-shadow:0 0 12px rgba(192,132,252,.25)!important}
.hk-H.active,.hk-H.partial{border-color:#fb923c!important;background:linear-gradient(145deg,rgba(38,18,5,.95),rgba(52,26,8,.9))!important;color:#fdba74!important;box-shadow:0 0 12px rgba(251,146,60,.25)!important}

/* ── Detail panel ── */
#detail{
  position:fixed;right:0;top:0;bottom:0;width:340px;
  background:#090f1a;
  box-shadow:-6px 0 40px rgba(0,0,0,.7);
  z-index:200;display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
  border-left:1px solid rgba(56,189,248,.12);
}
#detail.open{transform:translateX(0)}
#detail-head{
  background:linear-gradient(135deg,#0a1420,#0f1f35);
  color:#fff;padding:18px 18px 16px;flex-shrink:0;
  border-bottom:1px solid rgba(56,189,248,.12);
}
#detail-head .did{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;margin-bottom:5px;color:#38bdf8}
#detail-head .dtitle{font-size:14.5px;font-weight:700;line-height:1.35;color:#e2f0fa}
#detail-body{flex:1;overflow-y:auto;padding:18px;scrollbar-width:thin;scrollbar-color:#1e3a5f transparent}
#detail-desc{font-size:12.5px;color:#6b8499;line-height:1.7;margin-bottom:20px}
.sec-lbl{font-size:10px;font-weight:700;text-transform:uppercase;color:#2a4a62;letter-spacing:.1em;margin-bottom:8px}
.stages{display:flex;gap:8px;margin-bottom:18px}
.stage-box{
  flex:1;border:1.5px solid rgba(255,255,255,.07);border-radius:10px;
  padding:10px 6px;text-align:center;font-size:11px;font-weight:600;
  color:#2a4a62;background:rgba(255,255,255,.03);transition:all .22s;
}
.stage-box .si{font-size:18px;margin-bottom:4px}
.stage-box.done{
  border-color:#4ade80;color:#86efac;
  background:rgba(74,222,128,.07);
  box-shadow:0 0 10px rgba(74,222,128,.18);
}
.stage-box.current{
  border-color:#38bdf8;color:#7dd3fc;
  background:rgba(56,189,248,.07);
  box-shadow:0 0 10px rgba(56,189,248,.2),0 0 0 3px rgba(56,189,248,.08);
}
#act-btn{
  width:100%;padding:13px;
  background:linear-gradient(135deg,#1d4ed8,#2563eb);
  color:#fff;border:none;border-radius:9px;font-size:13.5px;font-weight:700;
  cursor:pointer;transition:all .22s;
  box-shadow:0 4px 16px rgba(37,99,235,.35),0 1px 0 rgba(255,255,255,.08) inset;
  letter-spacing:.02em;
}
#act-btn:hover:not(:disabled){
  background:linear-gradient(135deg,#1e40af,#1d4ed8);
  box-shadow:0 6px 24px rgba(37,99,235,.55);
  transform:translateY(-1px);
}
#act-btn:disabled{
  background:rgba(255,255,255,.04);color:#2a4a62;cursor:default;
  box-shadow:none;border:1px solid rgba(255,255,255,.06);transform:none;
}
#det-close{
  position:absolute;top:13px;right:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:#4a6580;border-radius:5px;padding:3px 8px;cursor:pointer;font-size:12px;
  transition:all .2s;
}
#det-close:hover{background:rgba(255,255,255,.12);color:#94a3b8}

/* ── Toast ── */
#toast{
  position:fixed;bottom:22px;left:50%;
  transform:translateX(-50%) translateY(72px);
  background:linear-gradient(135deg,#0a1e35,#0f2a4a);
  color:#7dd3fc;
  padding:11px 24px;border-radius:10px;
  font-size:12.5px;font-weight:700;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  z-index:300;pointer-events:none;white-space:nowrap;
  border:1px solid rgba(56,189,248,.25);
  box-shadow:0 6px 28px rgba(0,0,0,.6),0 0 18px rgba(56,189,248,.12);
  letter-spacing:.02em;
}
#toast.show{transform:translateX(-50%) translateY(0)}
#toast.milestone{
  background:linear-gradient(135deg,#14052a,#220a48);
  color:#d8b4fe;
  border-color:rgba(168,85,247,.35);
  box-shadow:0 6px 28px rgba(0,0,0,.6),0 0 24px rgba(168,85,247,.25);
}

/* ── Legend ── */
#legend{
  position:fixed;bottom:16px;right:16px;
  background:rgba(9,15,26,.9);
  border:1px solid rgba(56,189,248,.12);
  border-radius:10px;padding:12px 15px;
  box-shadow:0 6px 24px rgba(0,0,0,.5);
  font-size:10.5px;z-index:50;
  backdrop-filter:blur(8px);
}
#legend h3{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#1e3a56;margin-bottom:8px}
.li{display:flex;align-items:center;gap:7px;margin-bottom:4px;color:#334f68}
.ld{width:13px;height:13px;border-radius:3px;border:2px solid;flex-shrink:0}
.pip-row{display:flex;gap:2px;align-items:center}
.pip-row .pip{width:7px;height:7px}