:root {
  --sp-bg:        #0d1117;
  --sp-bg2:       #161b22;
  --sp-bg3:       #21262d;
  --sp-bg4:       #1c2128;
  --sp-border:    #30363d;
  --sp-border2:   #21262d;
  --sp-text:      #e6edf3;
  --sp-text2:     #c9d1d9;
  --sp-muted:     #8b949e;
  --sp-accent:    #58a6ff;
  --sp-accent-bg: #1f3a5c;
  --sp-green:     #56d364;
  --sp-green-bg:  #1a3a1a;
  --sp-yellow:    #f9a825;
  --sp-yellow-bg: #3d2e00;
  --sp-red:       #ff7b72;
  --sp-red-bg:    #3d0606;
  --sp-purple:    #bc8cff;
  --sp-purple-bg: #2d1a4e;
  --sp-node-fill: #21262d;
  --sp-node-text: #e6edf3;
}

:root[data-theme="light"] {
  --sp-bg:        #ffffff;
  --sp-bg2:       #f6f8fa;
  --sp-bg3:       #e9ecef;
  --sp-bg4:       #f0f3f6;
  --sp-border:    #d0d7de;
  --sp-border2:   #e9ecef;
  --sp-text:      #1f2328;
  --sp-text2:     #31363b;
  --sp-muted:     #656d76;
  --sp-accent:    #0969da;
  --sp-accent-bg: #ddf4ff;
  --sp-green:     #1a7f37;
  --sp-green-bg:  #dafbe1;
  --sp-yellow:    #9a6700;
  --sp-yellow-bg: #fff8c5;
  --sp-red:       #cf222e;
  --sp-red-bg:    #ffebe9;
  --sp-purple:    #8250df;
  --sp-purple-bg: #fbefff;
  --sp-node-fill: #f6f8fa;
  --sp-node-text: #1f2328;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
  body { background: var(--sp-bg); color: var(--sp-text); font-family: 'Segoe UI', system-ui, sans-serif; min-height: 100vh; }

  header { background: var(--sp-bg2); border-bottom: 1px solid var(--sp-border); padding: 16px 24px; display: flex; align-items: center; gap: 16px; }
  header h1 { font-size: 1.2rem; font-weight: 700; color: var(--sp-accent); }
  header span { color: var(--sp-muted); font-size: 0.85rem; }

  .tabs { display: flex; gap: 0; border-bottom: 1px solid var(--sp-border); background: var(--sp-bg2); padding: 0 24px; }
  .tab { padding: 12px 20px; cursor: pointer; font-size: 0.9rem; border-bottom: 2px solid transparent; color: var(--sp-muted); transition: all 0.2s; }
  .tab:hover { color: var(--sp-text2); }
  .tab.active { color: var(--sp-accent); border-bottom-color: var(--sp-accent); }

  .panel { display: none; padding: 20px 24px; gap: 20px; }
  .panel.active { display: flex; flex-direction: column; }

  .main-layout { display: grid; grid-template-columns: 1fr 340px; gap: 20px; }
  @media (max-width: 900px) { .main-layout { grid-template-columns: 1fr; } }

  /* Graph Canvas */
  .canvas-wrap { background: var(--sp-bg2); border: 1px solid var(--sp-border); border-radius: 8px; position: relative; overflow: hidden; }
  svg.graph { width: 100%; display: block; }
  .canvas-wrap .graph-label { position: absolute; top: 10px; left: 14px; font-size: 0.75rem; color: var(--sp-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

  /* Controls */
  .controls { background: var(--sp-bg2); border: 1px solid var(--sp-border); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
  .controls h3 { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sp-muted); margin-bottom: 4px; }

  .ctrl-row { display: flex; gap: 8px; flex-wrap: wrap; }
  .btn { padding: 7px 14px; border-radius: 6px; border: 1px solid var(--sp-border); background: var(--sp-bg3); color: var(--sp-text2); font-size: 0.82rem; cursor: pointer; transition: all 0.15s; font-weight: 500; }
  .btn:hover { background: var(--sp-border); border-color: var(--sp-accent); color: var(--sp-accent); }
  .btn.primary { background: #1f6feb; border-color: #1f6feb; color: #fff; }
  .btn.primary:hover { background: #388bfd; }
  .btn.danger { background: #da3633; border-color: #da3633; color: #fff; }
  .btn.danger:hover { background: #f85149; }
  .btn:disabled { opacity: 0.4; cursor: not-allowed; }

  .speed-row { display: flex; align-items: center; gap: 10px; }
  .speed-row label { font-size: 0.8rem; color: var(--sp-muted); white-space: nowrap; }
  input[type=range] { flex: 1; accent-color: var(--sp-accent); }

  /* Distance Table */
  .dist-table { background: var(--sp-bg2); border: 1px solid var(--sp-border); border-radius: 8px; overflow: hidden; }
  .dist-table h3 { padding: 10px 14px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sp-muted); border-bottom: 1px solid var(--sp-border); }
  table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
  th { background: var(--sp-bg4); padding: 7px 12px; text-align: left; color: var(--sp-muted); font-weight: 600; }
  td { padding: 6px 12px; border-bottom: 1px solid var(--sp-border2); }
  tr.active-row td { background: var(--sp-accent-bg); }
  tr.settled-row td { background: var(--sp-green-bg); }
  tr.updated-row td { background: var(--sp-yellow-bg); }
  .inf { color: var(--sp-muted); }
  .dist-val { font-family: 'Consolas', monospace; font-weight: 600; }
  .dist-val.updated { color: var(--sp-yellow); }
  .dist-val.settled { color: var(--sp-green); }
  .dist-val.active { color: var(--sp-accent); }

  /* Log */
  .log { background: var(--sp-bg); border: 1px solid var(--sp-border); border-radius: 8px; padding: 10px 12px; height: 120px; overflow-y: auto; font-family: 'Consolas', monospace; font-size: 0.78rem; display: flex; flex-direction: column; gap: 3px; }
  .log-entry { padding: 2px 0; border-bottom: 1px solid var(--sp-border2); }
  .log-entry.step { color: var(--sp-accent); }
  .log-entry.relax { color: var(--sp-green); }
  .log-entry.settle { color: var(--sp-yellow); }
  .log-entry.neg { color: var(--sp-red); }
  .log-entry.done { color: var(--sp-purple); font-weight: 600; }

  /* Status badge */
  .status { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--sp-muted); }
  .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sp-border); }
  .status-dot.running { background: var(--sp-accent); animation: pulse 1s infinite; }
  .status-dot.done { background: var(--sp-green); }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

  /* SVG Styles */
  .node circle { transition: fill 0.3s, stroke 0.3s; cursor: pointer; }
  .node text { font-size: 13px; font-weight: 700; fill: var(--sp-node-text); pointer-events: none; dominant-baseline: middle; text-anchor: middle; }
  .node .dist-label { font-size: 10px; font-weight: 600; fill: var(--sp-muted); }
  .edge line { transition: stroke 0.3s, stroke-width 0.3s; }
  .edge-weight { font-size: 11px; fill: var(--sp-muted); font-family: 'Consolas', monospace; dominant-baseline: middle; text-anchor: middle; }

  /* Source selector */
  .src-select { background: var(--sp-bg3); border: 1px solid var(--sp-border); color: var(--sp-text2); padding: 6px 10px; border-radius: 6px; font-size: 0.82rem; cursor: pointer; }
  .src-select:focus { outline: none; border-color: var(--sp-accent); }

  /* Legend */
  .legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.76rem; }
  .legend-item { display: flex; align-items: center; gap: 6px; color: var(--sp-muted); }
  .legend-dot { width: 12px; height: 12px; border-radius: 50%; }

  .section-title { font-size: 0.95rem; font-weight: 700; color: var(--sp-text2); margin-bottom: 2px; }
  .section-sub { font-size: 0.8rem; color: var(--sp-muted); margin-bottom: 10px; }

  /* Iteration badge for BF */
  .iter-badge { background: var(--sp-bg3); border: 1px solid var(--sp-border); border-radius: 20px; padding: 4px 12px; font-size: 0.78rem; color: var(--sp-muted); }
  .iter-badge span { color: var(--sp-yellow); font-weight: 700; }

  .neg-cycle-alert { background: var(--sp-red-bg); border: 1px solid #da3633; border-radius: 6px; padding: 10px 14px; font-size: 0.82rem; color: var(--sp-red); display: none; }
  .neg-cycle-alert.show { display: block; }

  /* Floyd-Warshall Matrix */
  .matrix-wrap { overflow-x: auto; }
  .fw-matrix { font-size: 0.78rem; }
  .fw-matrix th, .fw-matrix td { text-align: center; padding: 5px 8px; min-width: 40px; }
  .matrix-row-header { font-weight: 700; color: var(--sp-accent); background: var(--sp-bg4); }
  .matrix-updated { background: var(--sp-yellow-bg) !important; }
  .matrix-k-row { background: var(--sp-purple-bg) !important; }

  /* BFS Queue Display */
  .queue-wrap { background: var(--sp-bg2); border: 1px solid var(--sp-border); border-radius: 8px; overflow: hidden; }
  .queue-wrap h3 { padding: 10px 14px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sp-muted); border-bottom: 1px solid var(--sp-border); margin: 0; }
  .queue-display { padding: 10px 14px; display: flex; gap: 6px; flex-wrap: wrap; min-height: 36px; align-items: center; }
  .queue-item { background: var(--sp-bg3); border: 1px solid var(--sp-border); border-radius: 4px; padding: 3px 10px; font-size: 0.78rem; font-family: 'Consolas', monospace; color: var(--sp-text2); }
  .queue-item.queue-front { background: var(--sp-accent-bg); border-color: var(--sp-accent); color: var(--sp-accent); font-weight: 600; }

  /* A* Grid */
  .astar-cell { cursor: pointer; transition: fill 0.15s, stroke 0.15s; }
  .astar-cell:hover { opacity: 0.8; }

  /* Theme toggle for sub-pages */
  .theme-toggle {
    background: none;
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--sp-muted);
    transition: border-color 0.2s, color 0.2s;
  }
  .theme-toggle:hover { border-color: var(--sp-accent); color: var(--sp-accent); }