/* ── Reset ─────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}

/* ── Design tokens — light mode ─────────────────────────────────────────────
   Same variable names as before — all JSX inline styles stay compatible.    */
:root{
  /* Surfaces */
  --bg:#F4F4F6;
  --sf:#FFFFFF;
  --sf2:#F9F9FB;
  --sf3:#F0F0F4;
  --sf4:#EBEBEF;

  /* Borders */
  --bd:#E5E5EA;
  --bd2:#C8C8D0;

  /* Text */
  --tx:#111118;
  --tx2:#5C5C70;
  --tx3:#9898A8;

  /* Accent — indigo */
  --ac:#5B5BD6;
  --ac2:#4A4AC0;
  --acl:rgba(91,91,214,0.07);
  --acm:rgba(91,91,214,0.15);

  /* Semantic — green */
  --gr:#18794E;
  --gr-bg:rgba(24,121,78,0.09);
  --gr-bd:rgba(24,121,78,0.22);

  /* Semantic — red */
  --re:#CD2B31;
  --re-bg:rgba(205,43,49,0.09);
  --re-bd:rgba(205,43,49,0.22);

  /* Semantic — amber */
  --am:#AD5700;
  --am-bg:rgba(173,87,0,0.09);
  --am-bd:rgba(173,87,0,0.22);

  /* Semantic — purple */
  --pu:#7C3AED;
  --pu-bg:rgba(124,58,237,0.09);
  --pu-bd:rgba(124,58,237,0.22);

  /* Early start */
  --early:#0891b2;
  --early-bg:rgba(8,145,178,0.10);
  --early-bd:rgba(8,145,178,0.25);

  /* Radii */
  --r:8px;
  --rl:10px;
  --rxl:14px;

  /* Shadows */
  --sh:0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.03);
  --shm:0 4px 16px rgba(0,0,0,0.08),0 2px 4px rgba(0,0,0,0.04);
  --shl:0 8px 32px rgba(0,0,0,0.10),0 4px 12px rgba(0,0,0,0.06);

  /* Legacy compat — topbar / navbar bg (used in original CSS; sidebar overrides) */
  --tb:rgba(255,255,255,0.95);
  --nb:#111118;
}

/* ── Design tokens — dark mode ───────────────────────────────────────────────
   Sidebar background always stays #111118 (hardcoded in layout.css).        */
:root.dark{
  --bg:#0F0F14;
  --sf:#16161F;
  --sf2:#1C1C28;
  --sf3:#222230;
  --sf4:#282840;
  --bd:rgba(255,255,255,0.08);
  --bd2:rgba(255,255,255,0.14);
  --tx:#F0F0F4;
  --tx2:#8888A0;
  --tx3:#525268;
  --acl:rgba(91,91,214,0.14);
  --acm:rgba(91,91,214,0.22);
  --gr-bg:rgba(24,121,78,0.14);
  --gr-bd:rgba(24,121,78,0.30);
  --re-bg:rgba(205,43,49,0.14);
  --re-bd:rgba(205,43,49,0.30);
  --am-bg:rgba(173,87,0,0.14);
  --am-bd:rgba(173,87,0,0.30);
  --pu-bg:rgba(124,58,237,0.14);
  --pu-bd:rgba(124,58,237,0.30);
  --early-bg:rgba(8,145,178,0.14);
  --early-bd:rgba(8,145,178,0.30);
  --sh:0 1px 3px rgba(0,0,0,0.30),0 1px 2px rgba(0,0,0,0.20);
  --shm:0 4px 16px rgba(0,0,0,0.40);
  --shl:0 8px 32px rgba(0,0,0,0.50);
  --tb:rgba(22,22,31,0.95);
}
:root.dark .inp option{background:var(--sf2)}

/* ── Base ────────────────────────────────────────────────────────────────── */
html,body{
  background:var(--bg);
  color:var(--tx);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:14px;
  line-height:1.5;
}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--tx3)}