/* ─────────────── Hesper Atlas · core.css ───────────────
   Lean base sheet for the no-session funnel (login / reset / account):
   design tokens, light palette, reset, body, and the celestial backdrop.
   These pages carry all their own layout in an inline <style> and use ZERO
   global app classes, so they don't need the full ~115KB styles.css.
   DERIVED: this is a verbatim copy of styles.css lines 1-175 — keep it in
   sync if the :root tokens / palette / #bg-glow change there. */
/* ───────────────── Hesper Atlas · design system ─────────────────
   A map for the AI age. Cool night-sky ink (dark) and neutral bone
   (light), unified by one luminous gold accent (Hesperus, the evening
   star) with a restrained teal counterpoint (the atlas / star chart).
   Rule: gold is a LIGHT colour. Gold FILLS carry dark ink (--ink-on-gold),
   never white. --brand = legible gold for text/links/icons; --brand-fill
   = bright gold for solid button/pill fills. */
:root{
  --bg:#0e1116;
  --bg-2:#11151b;
  --panel:#161a21;
  --panel-2:#1d222b;
  --line:rgba(176,194,224,.085);
  --line-2:rgba(176,194,224,.16);
  --text:#e8eaef;
  --muted:#9aa3b2;
  --dim:#7d8a9e;  /* AA 4.5:1 on all dark surfaces (fine print / disclaimers) */
  --buy:#3fcb8e;
  --buy-dim:rgba(63,203,142,.13);
  --sell:#f2655f;
  --sell-dim:rgba(242,101,95,.13);
  --hold:#e08a3b;
  --hold-dim:rgba(224,138,59,.13);
  --brand:#eba63a;
  --brand-fill:#eba63a;
  --brand-2:#5ab6ad;
  --ink-on-gold:#0e1116;
  /* shaded gold button: top-lit gradient, white inset highlight, soft light rim.
     Defined once so every gold button reads dimensional, never flat. */
  --gold-grad:linear-gradient(180deg, color-mix(in srgb,var(--brand-fill) 78%,#fff), var(--brand-fill) 52%, color-mix(in srgb,var(--brand-fill) 90%,#000));
  --gold-edge:rgba(255,255,255,.34);
  --gold-hi:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 1px rgba(0,0,0,.14);
  --ring:color-mix(in srgb,var(--brand) 40%,transparent);
  /* text inks for tinted info panels — themed so light mode stays readable */
  --ink-soft:#c8cdd6;   /* body text on brand-tinted panels & docs */
  --warn-ink:#e7d2ad;   /* body text on amber warning panels */
  --font-display:'Newsreader',Georgia,'Times New Roman',serif;
  --radius:11px;
  --shadow:0 24px 64px -30px rgba(0,0,0,.66);
  --elev:none;
  --elev-hover:none;
  font-synthesis:none;
}

body.light{
  --bg:#f7f6f3;
  --bg-2:#f1efe9;
  --panel:#ffffff;
  --panel-2:#f1efe9;
  --line:rgba(28,32,40,.085);
  --line-2:rgba(28,32,40,.15);
  --text:#1f2329;
  --muted:#6b7280;
  --dim:#696d74;  /* AA 4.5:1 on all light surfaces (fine print / disclaimers) */
  --buy:#0a7d52;
  --buy-dim:rgba(10,125,82,.10);
  --sell:#c63a2f;
  --sell-dim:rgba(198,58,47,.10);
  --hold:#a85c12;
  --hold-dim:rgba(168,92,18,.11);
  --brand:#965b0e;
  --brand-fill:#cf9836;
  --brand-2:#1d736a;
  --ink-on-gold:#1f2329;
  --ring:color-mix(in srgb,var(--brand) 30%,transparent);
  --ink-soft:#4f5560;
  --warn-ink:#6e4a0e;
  --shadow:0 18px 46px -22px rgba(20,28,45,.22);
  --elev:0 1px 2px rgba(20,28,45,.05), 0 10px 24px -14px rgba(20,28,45,.16);
  --elev-hover:0 2px 4px rgba(20,28,45,.07), 0 18px 34px -16px rgba(20,28,45,.22);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:15px;line-height:1.55;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
/* tabular, slashed-zero figures — the mark of a serious data UI, not a generic dashboard */
.tcard .px,.stat .v,.stock-px .p,.stock-px .c,.reco-stats .v,.metric .v,.gauge-val b,
.cpill .v,.alloc-d,.cap-input input,.fund-metrics .fm .v,.val-grid .vt .v,.opp-num,
.wtable td.r,.score-cap,.bw .g{font-variant-numeric:tabular-nums slashed-zero}

/* small craft details that separate "designed" from "generated" */
::selection{background:color-mix(in srgb,var(--brand) 26%,transparent)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:10px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--dim);background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}

/* ── celestial backdrop ──────────────────────────────────────────
   Cool night-sky ink with one gold dusk glow (Hesperus, top-right) and
   a cool milky wash (bottom-left) on opposing corners so warm and cool
   balance instead of muddying. Star sheets ride the pseudo-elements;
   all motion is transform/opacity only, so it stays on the compositor. */
#bg-glow{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  --constellation:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1100' height='760'%3E%3Cg stroke='%23aebbe6' stroke-width='.6' fill='none' opacity='.28'%3E%3Cpolyline points='150,130 240,170 280,110 360,150 330,230'/%3E%3Cpolyline points='760,520 820,480 880,530 850,600 920,570'/%3E%3C/g%3E%3Cg fill='%23cdd6f2' opacity='.55'%3E%3Ccircle cx='150' cy='130' r='1.1'/%3E%3Ccircle cx='240' cy='170' r='1.1'/%3E%3Ccircle cx='280' cy='110' r='1.1'/%3E%3Ccircle cx='360' cy='150' r='1.1'/%3E%3Ccircle cx='330' cy='230' r='1.1'/%3E%3Ccircle cx='760' cy='520' r='1.1'/%3E%3Ccircle cx='820' cy='480' r='1.1'/%3E%3Ccircle cx='880' cy='530' r='1.1'/%3E%3Ccircle cx='850' cy='600' r='1.1'/%3E%3Ccircle cx='920' cy='570' r='1.1'/%3E%3C/g%3E%3C/svg%3E");
  background:
    radial-gradient(620px 460px at 78% 6%, color-mix(in srgb,var(--brand) 4%,transparent), transparent 60%),
    radial-gradient(1200px 700px at 12% 108%, color-mix(in srgb,#5b73be 7%,transparent), transparent 64%),
    linear-gradient(180deg,#0c0e14 0%,#0d1018 54%,#0f1320 100%);
}
/* star sheets + a folded-in constellation, drifting as one slow plane */
#bg-glow::after{
  content:'';position:absolute;inset:-8% -8%;background-repeat:repeat;
  background-image:
    var(--constellation),
    radial-gradient(1.4px 1.4px at 40px 60px,  rgba(232,238,255,.95), transparent 60%),
    radial-gradient(1.2px 1.2px at 160px 120px,rgba(214,224,255,.80), transparent 60%),
    radial-gradient(1.3px 1.3px at 300px 40px, color-mix(in srgb,var(--brand) 72%,#fff), transparent 60%),
    radial-gradient(1.1px 1.1px at 230px 200px,rgba(226,232,255,.70), transparent 60%),
    radial-gradient(1px 1px at 80px 30px,  rgba(208,219,255,.62), transparent 55%),
    radial-gradient(1px 1px at 190px 90px, rgba(198,210,250,.52), transparent 55%),
    radial-gradient(1px 1px at 20px 150px, rgba(214,224,255,.58), transparent 55%),
    radial-gradient(1px 1px at 130px 170px,color-mix(in srgb,var(--brand) 55%,#fff), transparent 55%),
    radial-gradient(.8px .8px at 50px 50px,  rgba(190,202,240,.40), transparent 50%),
    radial-gradient(.8px .8px at 110px 20px, rgba(180,194,236,.36), transparent 50%),
    radial-gradient(.8px .8px at 10px 90px,  rgba(196,208,244,.38), transparent 50%),
    radial-gradient(.8px .8px at 90px 130px, rgba(186,200,240,.34), transparent 50%);
  background-size:
    900px 600px,
    360px 260px,360px 260px,360px 260px,360px 260px,
    220px 200px,220px 200px,220px 200px,220px 200px,
    140px 160px,140px 160px,140px 160px,140px 160px;
  opacity:.85;animation:atlas-drift 220s linear infinite;
}
/* a lighter sheet that breathes — the faint twinkle */
#bg-glow::before{
  content:'';position:absolute;inset:-8% -8%;pointer-events:none;background-repeat:repeat;
  background-image:
    radial-gradient(1.3px 1.3px at 70px 40px,  color-mix(in srgb,var(--brand) 60%,#fff), transparent 55%),
    radial-gradient(1.2px 1.2px at 250px 150px,rgba(236,240,255,.9), transparent 55%),
    radial-gradient(1.1px 1.1px at 150px 90px, rgba(220,228,255,.8), transparent 55%);
  background-size:420px 320px,420px 320px,420px 320px;
  opacity:.5;animation:atlas-twinkle 9s ease-in-out infinite;
}
@keyframes atlas-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-260px,0)}}
@keyframes atlas-twinkle{0%,100%{opacity:.32}50%{opacity:.58}}
/* fine film grain — kills the flat, plasticky look that reads as machine-made */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* light = paper: retire the night sky, keep only a whisper of the
   celestial motif so white dots never read as dust on ivory */
body.light #bg-glow{
  background:
    radial-gradient(700px 520px at 80% 4%, color-mix(in srgb,var(--brand) 3%,transparent), transparent 62%),
    radial-gradient(1100px 640px at 8% 106%, color-mix(in srgb,#5b73be 4%,transparent), transparent 66%),
    linear-gradient(180deg,#fcfcfb 0%,#f7f7f4 50%,#f0f1ee 100%);
}
body.light #bg-glow::after{
  opacity:.05;mix-blend-mode:multiply;animation:none;
  background-image:
    radial-gradient(1px 1px at 60px 80px,  rgba(70,82,120,.9), transparent 55%),
    radial-gradient(1px 1px at 240px 160px,rgba(70,82,120,.7), transparent 55%),
    radial-gradient(.9px .9px at 150px 40px,rgba(70,82,120,.7), transparent 55%);
  background-size:380px 300px,380px 300px,380px 300px;
}
body.light #bg-glow::before{display:none}
@media (prefers-reduced-motion:reduce){
  #bg-glow::after{animation:none}
  #bg-glow::before{animation:none;opacity:.42}
}
body.light::before{opacity:.03;mix-blend-mode:multiply}