[data-theme="dark"] {
    --c-void: 7 11 21;      --c-panel: 14 21 38;    --c-raised: 21 30 53;
    --c-line: 36 48 80;     --c-text: 233 238 249;  --c-dim: 142 156 187;
    --c-accent: 109 91 255; --c-cyan: 34 211 238;   --c-good: 52 211 153;
    --c-warn: 251 191 36;   --c-bad: 251 113 133;
    --glow-a: rgba(109,91,255,.20); --glow-b: rgba(34,211,238,.13);
    --glass: rgba(14,21,38,.82);
    --shadow: 0 18px 40px -24px rgba(0,0,0,.9);
  }
  [data-theme="light"] {
    --c-void: 243 246 252;  --c-panel: 255 255 255; --c-raised: 237 242 250;
    --c-line: 212 221 238;  --c-text: 15 23 42;     --c-dim: 88 101 128;
    --c-accent: 88 71 230;  --c-cyan: 11 124 148;   --c-good: 12 131 90;
    --c-warn: 161 102 0;    --c-bad: 190 45 45;
    --glow-a: rgba(88,71,230,.12); --glow-b: rgba(11,124,148,.08);
    --glass: rgba(255,255,255,.88);
    --shadow: 0 14px 34px -26px rgba(15,23,42,.45);
  }

  body {
    background: rgb(var(--c-void));
    background-image:
      radial-gradient(900px 500px at 12% -8%,  var(--glow-a), transparent 60%),
      radial-gradient(800px 480px at 88% -12%, var(--glow-b), transparent 62%);
    background-attachment: fixed;
    transition: background-color .25s ease;
  }
  .glass { background: var(--glass); backdrop-filter: blur(10px); box-shadow: var(--shadow); }

  @keyframes drift { to { background-position: 28px 0 } }
  .flow-live {
    background-image: linear-gradient(90deg, currentColor 0 10px, transparent 10px 28px);
    background-size: 28px 2px; background-repeat: repeat-x;
    animation: drift 1.1s linear infinite;
  }

  @keyframes rise { from { opacity:0; transform: translateY(10px) } to { opacity:1; transform:none } }
  .rise { animation: rise .55s cubic-bezier(.2,.7,.3,1) both }
  @keyframes pop { from { transform: scale(.7); opacity:.4 } to { transform: scale(1); opacity:1 } }
  .pop { animation: pop .45s cubic-bezier(.2,1.4,.4,1) both }

  tr.queued { opacity:.4 }
  @keyframes sweep { from { background-position:-150% 0 } to { background-position:250% 0 } }
  tr.working {
    background-image: linear-gradient(90deg, transparent 0%, rgb(var(--c-cyan) / .16) 45%, transparent 90%);
    background-size: 200% 100%; animation: sweep 1.3s linear infinite;
  }
  @keyframes flash { from { background-color: rgb(var(--c-good) / .2) } to { background-color: transparent } }
  tr.done { animation: flash 1.2s ease-out both }

  @keyframes nodepulse { 0%{transform:scale(1)} 42%{transform:scale(1.14)} 100%{transform:scale(1)} }
  .node-pulse { animation: nodepulse .55s cubic-bezier(.2,1.3,.4,1) both }

  .ring-glow { box-shadow: 0 0 0 1px rgb(var(--c-text) / .05), 0 0 22px -6px var(--glow) }
  .btn-glow:not(:disabled):hover { box-shadow: 0 0 24px -6px rgb(var(--c-accent)) }
  tbody tr { transition: background .18s ease }

  :focus-visible { outline: 2px solid rgb(var(--c-accent)); outline-offset: 3px; border-radius: 4px }
  @media (prefers-reduced-motion: reduce) {
    .rise, .pop, .flow-live, tr.working, tr.done, .node-pulse { animation: none }
  }
  .ds-ms summary::-webkit-details-marker { display: none }   /* Safari's default ▸ */
  .spin { animation: rot .8s linear infinite }
  @keyframes rot { to { transform: rotate(360deg) } }
  .tab-btn { color: rgb(var(--c-dim)); }
  .tab-btn:hover { color: rgb(var(--c-text)); }
  .tab-btn.tab-active { background: rgb(var(--c-raised)); color: rgb(var(--c-text)); box-shadow: 0 1px 0 rgb(var(--c-text)/.04) inset, var(--shadow); }
  ::-webkit-scrollbar { width: 10px; height: 10px }
  ::-webkit-scrollbar-thumb { background: rgb(var(--c-line)); border-radius: 10px }
  ::-webkit-scrollbar-track { background: transparent }