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

/* ============================================================================
   LAKSHYA DESIGN SYSTEM
   Palette is taken from the product mark (static/lakshya-icon.svg): a cyan→teal
   ring on deep navy. One accent family, one type scale, one spacing scale —
   used by every screen so the app reads as a single product.
   ============================================================================ */
*{box-sizing:border-box;margin:0;padding:0}

:root,[data-theme="dark"]{
  /* Surfaces — deep navy, straight from the mark's tile gradient */
  --bg:#070b13; --bg-alt:#0a1120; --card:#0e1626; --card-h:#141f33;
  --bdr:#1c2942; --bdr-str:#283a5c; --ibg:#080e1a;
  /* Text */
  --tx:#e8eef8; --txm:#9aabc4; --txd:#63758f;
  /* Brand + semantic */
  --brand:#22d3ee; --brand-2:#0f9a8c; --accent:#22d3ee; --accent-h:#34e3ef;
  --green:#10b981; --amber:#f59e0b; --red:#f43f5e; --purple:#a78bfa;
  --blue:#60a5fa; --teal:#2dd4bf; --coral:#fb923c; --pink:#f472b6;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.3);
  --shadow-lg:0 8px 32px rgba(0,0,0,.5);
  --ring:0 0 0 3px rgba(34,211,238,.18);
}
[data-theme="light"]{
  --bg:#f6f8fb; --bg-alt:#eef2f7; --card:#fff; --card-h:#f5f8fc;
  --bdr:#e2e8f0; --bdr-str:#cbd5e1; --ibg:#fff;
  --tx:#0f1b2d; --txm:#516179; --txd:#8496ae;
  --brand:#0891b2; --brand-2:#0f766e; --accent:#0891b2; --accent-h:#06b6d4;
  --green:#059669; --amber:#d97706; --red:#e11d48; --purple:#7c3aed;
  --blue:#2563eb; --teal:#0d9488; --coral:#ea580c; --pink:#db2777;
  --shadow:0 1px 2px rgba(16,32,64,.04),0 2px 8px rgba(16,32,64,.06);
  --shadow-lg:0 8px 32px rgba(16,32,64,.12);
  --ring:0 0 0 3px rgba(8,145,178,.15);
}
:root{
  --sp1:4px;--sp2:8px;--sp3:12px;--sp4:16px;--sp5:24px;--sp6:32px;--sp7:48px;
  --r-sm:6px;--r-md:10px;--r-lg:14px;--r-xl:20px;
  --hd-h:60px;
}

html{-webkit-text-size-adjust:100%}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--tx);min-height:100vh;font-size:13px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background .25s,color .25s}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums;text-align:right}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-h)}
button,input,select,textarea{font-family:inherit}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bdr-str);border-radius:9px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--txd)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
.fade-in{animation:fadeIn .22s cubic-bezier(.2,.8,.2,1)}
/* Used by the Activity stage buttons, the Apollo loader and the AI screen to
   mark work in progress. The class was on all three and defined by none, so
   nothing has ever blinked. */
.blink{animation:pulse 1.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.blink,.apw .pill.s-running{animation:none}}