/* Reset & base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:        #0d1117;
  --bg2:       #161b22;
  --bg3:       #21262d;
  --border:    #30363d;
  --text:      #c9d1d9;
  --text-dim:  #6e7681;
  --accent:    #58a6ff;
  --gold:      #e3b341;
  --green:     #3fb950;
  --red:       #f85149;
  --purple:    #bc8cff;
  --orange:    #d29922;
  --c0: #1f6feb;
  --c1: #388bfd;
  --c2: #3fb950;
  --c3: #d29922;
  --c4: #bc8cff;
  --c5: #f85149;
  --cX: #6e7681;
  --radius: 6px;
  --panel-w: 340px;
}
html, body { height: 100%; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 14px; overflow: hidden; }
#app { display: flex; flex-direction: column; height: 100vh; }
#topbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 16px; background: var(--bg2); border-bottom: 1px solid var(--border); flex-shrink: 0; z-index: 10; }
#topbar h1 { font-size: 16px; font-weight: 600; color: var(--accent); white-space: nowrap; }
#topbar h1 a { color: inherit; text-decoration: none; }
#topbar h1 a:hover { text-decoration: underline; }
#search { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); padding: 4px 8px; font-size: 13px; width: 200px; }
#search:focus { outline: none; border-color: var(--accent); }
#tabs { display: flex; gap: 4px; margin-left: auto; }
.tab-btn { background: none; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-dim); padding: 4px 12px; cursor: pointer; font-size: 13px; }
.tab-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
#filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 16px; background: var(--bg2); border-bottom: 1px solid var(--border); flex-shrink: 0; font-size: 12px; }
.chip { padding: 2px 10px; border-radius: 12px; cursor: pointer; border: 1px solid var(--border); background: var(--bg3); color: var(--text-dim); font-size: 12px; }
.chip.active { color: #fff; border-color: transparent; }
#chapter-select { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); padding: 3px 6px; font-size: 12px; }
#chapter-select:focus { outline: none; border-color: var(--accent); }
#hud { display: flex; align-items: center; gap: 16px; padding: 4px 16px; background: var(--bg); border-bottom: 1px solid var(--border); flex-shrink: 0; font-size: 12px; color: var(--text-dim); flex-wrap: wrap; }
.hud-bar-wrap { display: flex; align-items: center; gap: 4px; }
.hud-bar { height: 6px; width: 60px; background: var(--bg3); border-radius: 3px; overflow: hidden; }
.hud-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
#views { flex: 1; position: relative; overflow: hidden; }
.view { position: absolute; inset: 0; display: none; }
.view.active { display: block; }
.svg-wrapper { width: 100%; height: 100%; overflow: hidden; }
.svg-wrapper svg { display: block; }
/* Node cards */
.node-card text { font-size: 11px; fill: var(--text); pointer-events: none; }
.node-card.locked rect.card-bg    { fill: #0d1117; stroke-width: 1; opacity: 0.7; }
.node-card.unlockable rect.card-bg { fill: #0d1117; stroke: var(--accent); stroke-width: 1.5; }
.node-card.learned rect.card-bg   { fill: #0f2d1a; stroke: var(--green); stroke-width: 1.5; }
.node-card.dimmed { opacity: 0.12; }
.node-card.highlighted rect.card-bg { stroke-width: 2.5; }
.pulse-ring { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0; }
.node-card.unlockable .pulse-ring { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:0} 50%{opacity:0.5} }
/* Graph nodes */
.graph-node circle { stroke-width: 1.5; cursor: pointer; }
.graph-node.locked   circle { opacity: 0.5; }
.graph-node.unlockable circle { stroke: var(--accent); }
.graph-node.learned  circle { stroke: var(--green); }
/* Edges */
.edge { fill: none; }
.edge.strong   { stroke: #58a6ff; stroke-width: 1.5; opacity: 0.8; }
.edge.moderate { stroke: #58a6ff; stroke-width: 1; opacity: 0.8; }
.edge.helpful  { stroke: #6e7681; stroke-width: 1; stroke-dasharray: 5 3; opacity: 0.6; }
.edge.weak     { stroke: #6e7681; stroke-width: 0.8; stroke-dasharray: 2 4; opacity: 0.4; }
.edge.unlock   { stroke: #6e7681; stroke-width: 0.8; stroke-dasharray: 2 4; opacity: 0.4; }
.edge.soft     { stroke: #bc8cff; stroke-width: 1; stroke-dasharray: 4 3; opacity: 0.5; }
.edge.dimmed   { opacity: 0.05 !important; }
.edge.ancestor   { stroke: var(--gold); stroke-width: 2; opacity: 0.9; }
.edge.descendant { stroke: var(--green); stroke-width: 2; opacity: 0.9; }
/* Panel */
#panel { position: fixed; right: 0; top: 0; bottom: 0; width: var(--panel-w); background: var(--bg2); border-left: 1px solid var(--border); transform: translateX(100%); transition: transform 0.2s; z-index: 20; overflow-y: auto; padding: 16px; }
#panel.open { transform: none; }
#panel-close { float: right; background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 18px; line-height: 1; padding: 0; }
#panel-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; padding-right: 24px; display: block; }
.panel-meta { font-size: 12px; color: var(--text-dim); margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.badge { padding: 2px 7px; border-radius: 10px; font-size: 11px; font-weight: 500; background: var(--bg3); }
.badge-course { background: var(--bg3); }
.badge-diff-foundational { background: #1f2d1a; color: var(--green); }
.badge-diff-beginner     { background: #1a2640; color: var(--accent); }
.badge-diff-intermediate { background: #2d2210; color: var(--orange); }
.badge-diff-advanced     { background: #2d1010; color: var(--red); }
.badge-type-strong   { background: #1a2640; color: var(--accent); }
.badge-type-moderate { background: #1a2640; color: #7ab8ff; }
.badge-type-helpful  { background: var(--bg3); color: var(--text-dim); }
.badge-type-weak     { background: var(--bg3); color: var(--text-dim); }
.badge-type-unlock   { background: var(--bg3); color: var(--text-dim); }
.panel-section-hd { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin: 14px 0 6px; }
.prereq-item { margin-bottom: 8px; }
.prereq-link { cursor: pointer; color: var(--accent); font-weight: 500; background: none; border: none; padding: 0; font-size: 14px; }
.prereq-link:hover { text-decoration: underline; }
.stars { color: var(--gold); font-size: 12px; margin-left: 4px; }
.prereq-reason { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.unlock-link { cursor: pointer; color: var(--green); background: none; border: none; padding: 0; font-size: 14px; }
.unlock-link:hover { text-decoration: underline; }
.lesson-links { margin-top: 12px; }
.lesson-link { display: inline-block; margin: 3px 4px 3px 0; padding: 4px 10px; background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); color: var(--accent); font-size: 12px; text-decoration: none; }
.lesson-link:hover { background: var(--accent); color: #fff; }
#mark-btn { margin-top: 14px; width: 100%; padding: 7px; border: none; border-radius: var(--radius); cursor: pointer; font-size: 13px; font-weight: 600; }
.mark-unlearn { background: var(--bg3); color: var(--red); border: 1px solid var(--border) !important; }
.mark-learn   { background: var(--green); color: #fff; }
#skip-warning { display: none; margin-top: 6px; padding: 6px 8px; background: #2d1a00; border-radius: var(--radius); font-size: 11px; color: var(--orange); }
/* Legend */
#legend { position: absolute; bottom: 12px; left: 12px; background: rgba(22,27,34,0.92); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; font-size: 11px; z-index: 5; max-width: 220px; }
#legend h4 { font-size: 11px; color: var(--text-dim); margin-bottom: 6px; }
.legend-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.legend-node { width: 18px; height: 12px; border-radius: 2px; border: 1.5px solid; }
.legend-node.locked     { border-color: #30363d; background: #0d1117; opacity: 0.7; }
.legend-node.unlockable { border-color: var(--accent); background: #0d1117; }
.legend-node.learned    { border-color: var(--green); background: #0f2d1a; }
.legend-line { width: 24px; height: 2px; }
.legend-strong  { background: var(--accent); }
.legend-helpful { background: repeating-linear-gradient(90deg,#6e7681 0,#6e7681 4px,transparent 4px,transparent 7px); }
.era-label { fill: var(--text-dim); font-size: 13px; font-weight: 600; }
.era-sub   { fill: #58637a; font-size: 9px; }
.era-sep   { stroke: #1c2330; stroke-width: 1; }
#tt-controls { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; z-index: 5; }
#tt-controls button { background: rgba(22,27,34,0.92); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 4px 10px; font-size: 12px; cursor: pointer; }
#tt-controls button:hover { border-color: var(--accent); }
.legend-soft    { background: repeating-linear-gradient(90deg,var(--purple) 0,var(--purple) 3px,transparent 3px,transparent 6px); }
/* Atlas */
.pack-leaf { cursor: pointer; }
/* Search highlight */
.search-match rect.card-bg { stroke: var(--gold) !important; stroke-width: 2 !important; }
.search-match circle { stroke: var(--gold) !important; stroke-width: 2 !important; }
/* Tooltip */
#tooltip { position: fixed; pointer-events: none; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 10px; font-size: 12px; z-index: 100; display: none; max-width: 220px; }