/* ===================================================================
   MarketNebula — instrument-grade design system
   Palette: deep slate ground, cyan signal, amber caution, green/red P&L
   Type:   Space Grotesk (display) · Inter (body) · JetBrains Mono (data)
   =================================================================== */

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

:root {
  /* ground */
  --bg:            #0a0e14;
  --panel:         #111721;
  --panel-2:       #161d29;
  --line:          #232c3b;
  --line-bright:   #2f3a4d;

  /* ink */
  --ink:           #e6edf6;
  --ink-dim:       #9aa8bd;
  --ink-faint:     #5c6b82;

  /* signal */
  --cyan:          #35d0e0;
  --cyan-dim:      #1c8a96;
  --amber:         #f5b544;
  --up:            #35d07a;
  --down:          #f0556b;

  /* type */
  --display: 'Space Grotesk', system-ui, sans-serif;
  --body:    'Inter', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  --r:   10px;
  --r-s: 6px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ---- ambient grid backdrop (the signature texture) ---- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: 0.25;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.wrap { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* Full-bleed variant. The 1180px cap is right for reading pages -- a line of
   prose 2000px wide is unreadable -- and wrong for a chart, where every extra
   pixel is more of the tape on screen. Opt in per page with class="wrap wide";
   nothing that does not ask for it changes. */
.wrap.wide { max-width: none; padding: 0 24px; }
@media (min-width: 2000px) { .wrap.wide { padding: 0 40px; } }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; gap: 24px;
  height: 60px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0;
  background: rgba(10,14,20,0.86);
  backdrop-filter: blur(10px);
  z-index: 20;
}
.brand {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  display: flex; align-items: center; gap: 9px;
  white-space: nowrap;
}
.brand .tick {
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.35} }

.nav { display: flex; gap: 4px; }
.nav a {
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 13px;
  border-radius: var(--r-s);
  transition: color .15s, background .15s;
}
.nav a:hover { color: var(--ink); background: var(--panel-2); }
.nav a.active { color: var(--cyan); background: var(--panel-2); }

.topbar .spacer { flex: 1; }
.status {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  display: flex; align-items: center; gap: 6px;
}
.status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--up); }

/* ---------- page head ---------- */
.page-head { padding: 34px 0 22px; }
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan-dim);
  margin-bottom: 10px;
}
h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.sub { color: var(--ink-dim); margin-top: 8px; max-width: 60ch; }

/* ---------- panels ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.panel-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.panel-head h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
}
.panel-head .count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  border: 1px solid var(--line-bright);
  border-radius: 20px;
  padding: 2px 9px;
}
.panel-head .spacer { flex: 1; }
.panel-body { padding: 18px; }

/* ---------- controls ---------- */
.btn {
  font-family: var(--body);
  font-weight: 500;
  font-size: 13px;
  color: var(--bg);
  background: var(--cyan);
  border: none;
  border-radius: var(--r-s);
  padding: 8px 15px;
  cursor: pointer;
  transition: filter .15s, transform .05s;
  white-space: nowrap;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.ghost {
  background: transparent;
  color: var(--ink-dim);
  border: 1px solid var(--line-bright);
}
.btn.ghost:hover { color: var(--ink); border-color: var(--cyan-dim); }
.btn.sm { padding: 5px 10px; font-size: 12px; }

input, select, textarea {
  font-family: var(--body);
  font-size: 13px;
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--line-bright);
  border-radius: var(--r-s);
  padding: 8px 11px;
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--cyan-dim); }
input::placeholder { color: var(--ink-faint); }

/* ---------- data table ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 60px;
  background: var(--panel);
}
.tbl th.num, .tbl td.num { text-align: right; font-family: var(--mono); }
.tbl td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.tbl tr:last-child td { border-bottom: none; }
.tbl tbody tr { transition: background .12s; cursor: pointer; }
.tbl tbody tr:hover { background: var(--panel-2); }

.sym { font-family: var(--display); font-weight: 600; letter-spacing: 0.01em; }
.sym a { color: var(--ink); text-decoration: none; }
.sym a:hover { color: var(--cyan); }

.pos { color: var(--up); }
.neg { color: var(--down); }
.muted { color: var(--ink-dim); }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 11px;
  padding: 2px 8px; border-radius: 20px;
  border: 1px solid var(--line-bright);
  color: var(--ink-dim);
}
.chip.hot { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }

/* ---------- AI panel ---------- */
.ai-out {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink);
  white-space: pre-wrap;
}
.ai-out.placeholder { color: var(--ink-faint); font-style: italic; }
.ai-meta {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-faint); margin-top: 12px;
  display: flex; gap: 12px; align-items: center;
}
.ai-meta .badge { color: var(--cyan-dim); }

/* ---------- chat ---------- */
.chat-log { display: flex; flex-direction: column; gap: 14px; min-height: 340px; }
.msg { max-width: 78%; padding: 11px 14px; border-radius: var(--r); font-size: 13.5px; line-height: 1.6; }
.msg.user { align-self: flex-end; background: var(--cyan-dim); color: #eafcff; }
.msg.bot  { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--line); white-space: pre-wrap; }
.msg.bot .who { font-family: var(--mono); font-size: 10px; color: var(--cyan); letter-spacing: 0.1em; margin-bottom: 5px; text-transform: uppercase; }
.chat-input { display: flex; gap: 10px; margin-top: 16px; }
.chat-input input { flex: 1; }

/* ---------- misc ---------- */
.spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--line-bright); border-top-color: var(--cyan);
  animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty { text-align: center; color: var(--ink-faint); padding: 46px 20px; font-size: 13px; }
.empty .big { font-family: var(--display); font-size: 15px; color: var(--ink-dim); margin-bottom: 6px; }

.grid-2 { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; }
.footer { color: var(--ink-faint); font-size: 11px; font-family: var(--mono); padding: 30px 0; text-align: center; }

@media (max-width: 860px) {
  .grid-2 { grid-template-columns: 1fr; }
  .nav a { padding: 7px 9px; }
  h1 { font-size: 24px; }
  .tbl th:nth-child(n+5), .tbl td:nth-child(n+5) { display: none; }
}


/* --- logo ------------------------------------------------------------ */
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-mark { height:26px; width:auto; display:block; filter:saturate(1.05); }
.brand span { font-family:var(--mono); font-size:13px; font-weight:700;
              letter-spacing:.14em; color:var(--ink); }
.auth-logo { display:block; margin:0 auto 26px; max-width:330px; width:100%; height:auto; }
@media (max-width:720px){ .brand span{ display:none } .brand-mark{ height:24px } }


/* =====================================================================
   RESPONSIVE — 2026-08-17
   =====================================================================
   The nav carries up to eight items. On a 390px screen it simply CLIPPED:
   Portfolio / Research / Watchlist / Leaderboa… and Charts, Ticker,
   Assistant and Admin were unreachable. It never registered as page
   overflow because .topbar clips it, which is why an automated
   scrollWidth check missed it and it survived this long. Look at the
   screenshot, not the number.
   ===================================================================== */

.nav-toggle { display: none; }
.tbl-scroll { width: 100%; }

@media (max-width: 980px) {

  .topbar { height: 56px; }
  .wrap   { padding: 0 16px; }

  /* ---- the hamburger ------------------------------------------------ */
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: 0 0 44px;      /* 44px = Apple HIG floor */
    background: transparent; border: 1px solid var(--line-bright);
    border-radius: var(--r-s); color: var(--ink); cursor: pointer; padding: 0;
  }
  .nav-toggle span { display: block; width: 18px; height: 2px; background: currentColor;
                     position: relative; transition: background .15s; }
  .nav-toggle span::before, .nav-toggle span::after {
    content: ''; position: absolute; left: 0; width: 18px; height: 2px;
    background: currentColor; transition: transform .18s; }
  .nav-toggle span::before { top: -6px; }
  .nav-toggle span::after  { top:  6px; }
  .nav-toggle[aria-expanded="true"] span { background: transparent; }
  .nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px)  rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

  /* ---- the drawer ---------------------------------------------------- */
  .nav {
    position: fixed; top: 56px; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--panel); border-bottom: 1px solid var(--line);
    max-height: 0; overflow: hidden;
    transition: max-height .22s ease;
    box-shadow: 0 14px 30px rgba(0,0,0,.5);
    z-index: 30;
  }
  .nav.open { max-height: calc(100vh - 56px); overflow-y: auto; }
  .nav a {
    display: flex; align-items: center; min-height: 50px;
    padding: 0 20px; font-size: 15px; border-radius: 0;
    border-bottom: 1px solid var(--line);
  }
  .nav a:last-child { border-bottom: 0; }
  .nav a.active { background: var(--panel-2); }

  /* the signed-in email eats the bar on a narrow screen */
  .topbar .count, #whoami { display: none !important; }

  /* ---- tap targets --------------------------------------------------- */
  .btn { min-height: 44px; padding: 11px 16px; font-size: 14px; }
  .btn.sm { min-height: 38px; padding: 8px 13px; font-size: 13px; }

  /* 16px is the threshold below which iOS Safari zooms the whole page when
     an input takes focus, then leaves it zoomed. Not cosmetic. */
  input, select, textarea { font-size: 16px; padding: 11px 12px; }

  h1 { font-size: 22px; }

  /* ---- tables: scroll, never hide ------------------------------------
     The previous rule was
        .tbl th:nth-child(n+5), .tbl td:nth-child(n+5) { display: none }
     which silently DELETED columns on a phone. The reader had no way to
     know data was missing. Scrolling is worse-looking and honest. */
  .tbl th:nth-child(n+5), .tbl td:nth-child(n+5) { display: table-cell; }
  .tbl-scroll {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .tbl { min-width: 620px; }
  .tbl th { top: 56px; }
  /* keep the symbol column visible while the rest scrolls under it */
  .tbl th:first-child, .tbl td:first-child {
    position: sticky; left: 0; z-index: 2; background: var(--panel);
  }
  .tbl th:first-child { z-index: 3; }

  .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 13px; }
  .panel-head { flex-wrap: wrap; row-gap: 8px; }
  .panel-body { padding: 14px; }
  h1 { font-size: 20px; }
  /* stack the toolbar rows instead of squeezing them onto one line */
  .trade-row, .addbar { flex-direction: column; align-items: stretch; }
  .trade-row input, .addbar input { width: 100% !important; }
  .hero { gap: 16px !important; }
  .hero .big { font-size: 30px !important; }
}

/* Respect the notch / home indicator on iPhone. */
@supports (padding: max(0px)) {
  @media (max-width: 980px) {
    .wrap { padding-left: max(16px, env(safe-area-inset-left));
            padding-right: max(16px, env(safe-area-inset-right)); }
  }
}

/* --- password reveal -------------------------------------------------
   Hidden by default. Showing a password is a shoulder-surfing trade-off
   the person opts into; it is never the default state. */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 46px; }
.pw-toggle {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 32px; padding: 0;
  background: transparent; border: 0; border-radius: var(--r-s);
  color: var(--ink-faint); cursor: pointer;
  transition: color .15s;
}
.pw-toggle:hover { color: var(--ink); }
.pw-toggle:focus-visible { outline: 2px solid var(--cyan-dim); outline-offset: 1px; color: var(--ink); }
.pw-toggle svg { width: 18px; height: 18px; display: block; }
@media (max-width: 980px) {
  /* the 44px tap floor applies here too */
  .pw-toggle { width: 44px; height: 40px; }
  .pw-wrap input { padding-right: 52px; }
}

/* --- row sparkline ---------------------------------------------------- */
.spark-col { width: 116px; padding-left: 6px !important; padding-right: 6px !important; }
.spark { display: block; min-height: 32px; }
.spark svg { display: block; }
@media (max-width: 760px) { .spark-col { display: none; } }

/* --- chart + trade modal ---------------------------------------------- */
.mn-modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(6, 9, 14, .72); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.mn-modal.open { display: flex; }
.mn-modal-card {
  background: var(--panel); border: 1px solid var(--line-bright);
  border-radius: var(--r); width: min(1120px, 100%); max-height: min(780px, 94vh);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.mn-modal-head { display: flex; align-items: center; gap: 16px; padding: 14px 18px;
                 border-bottom: 1px solid var(--line); }
.mn-modal-spacer { flex: 1; }
.mn-modal-sym  { font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.mn-modal-name { font-size: 12px; color: var(--ink-dim); margin-top: 2px; max-width: 260px;
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-modal-last { font-family: var(--mono); font-size: 19px; font-weight: 600; }
.mn-modal-chg  { font-family: var(--mono); font-size: 12px; color: var(--ink-dim); margin-top: 2px; }
.mn-modal-chg.up   { color: var(--up); }
.mn-modal-chg.down { color: var(--down); }
.mn-modal-ranges { display: flex; gap: 5px; padding: 10px 18px; border-bottom: 1px solid var(--line);
                   flex-wrap: wrap; align-items: center; }
.mn-range { font-family: var(--mono); font-size: 11px; padding: 6px 11px; cursor: pointer;
            background: transparent; color: var(--ink-faint);
            border: 1px solid var(--line); border-radius: var(--r-s); }
.mn-range:hover { color: var(--ink); }
.mn-range.on { background: var(--cyan); border-color: var(--cyan); color: var(--bg); font-weight: 600; }

.mn-modal-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 288px;
                 gap: 0; overflow: hidden; }
.mn-modal-chartcol { display: flex; flex-direction: column; min-width: 0;
                     padding: 12px 14px 14px; overflow: auto; }
.mn-chart-wrap { position: relative; flex: 1; min-height: 300px; }
#mnc-chart { width: 100%; height: 100%; min-height: 300px; }
.mn-modal-msg { position: absolute; inset: 0; display: flex; align-items: center;
                justify-content: center; color: var(--ink-dim); font-size: 13px; text-align: center;
                padding: 20px; }
.mn-tip { position: absolute; display: none; pointer-events: none; z-index: 5;
          background: rgba(13,18,26,.96); border: 1px solid var(--line-bright);
          border-radius: var(--r-s); padding: 7px 9px; font-family: var(--mono);
          font-size: 10.5px; line-height: 1.5; color: var(--ink); white-space: nowrap; }
.mn-legend { font-size: 11.5px; color: var(--ink-dim); margin-top: 9px; line-height: 1.55; }
.mn-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
            gap: 1px; margin-top: 11px; background: var(--line); border: 1px solid var(--line);
            border-radius: var(--r-s); overflow: hidden; }
.mn-stat { background: var(--panel); padding: 7px 9px; }
.mn-stat .k { font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); }
.mn-stat .v { font-family: var(--mono); font-size: 12px; margin-top: 3px; }

.mn-trade { border-left: 1px solid var(--line); padding: 14px; overflow: auto;
            display: flex; flex-direction: column; gap: 13px; background: rgba(255,255,255,.012); }
.mn-trade.locked { opacity: .55; pointer-events: none; }
.mn-th { font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
         color: var(--ink-faint); margin-bottom: 7px; }
.mn-kv { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px;
         padding: 3px 0; }
.mn-kv span { color: var(--ink-dim); }
.mn-kv b { font-family: var(--mono); font-weight: 500; }
.mn-lots { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11.5px; }
.mn-lots td { padding: 3px 4px; border-bottom: 1px solid var(--line); }
.mn-lots td.num { text-align: right; }
.mn-trade-ticket { border-top: 1px solid var(--line); padding-top: 12px; margin-top: auto; }
.mn-side { display: flex; gap: 6px; margin-bottom: 11px; }
.mn-side-btn { flex: 1; padding: 8px; font-size: 12px; cursor: pointer; border-radius: var(--r-s);
               background: transparent; color: var(--ink-dim); border: 1px solid var(--line); }
.mn-side-btn.on[data-side="buy"]  { background: var(--up); border-color: var(--up);
                                    color: var(--bg); font-weight: 600; }
.mn-side-btn.on[data-side="sell"] { background: var(--down); border-color: var(--down);
                                    color: var(--bg); font-weight: 600; }
.mn-lbl { display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
          color: var(--ink-faint); margin-bottom: 5px; }
.mn-qty-row { display: flex; gap: 6px; }
.mn-qty-row input { flex: 1; min-width: 0; }
.mn-est { margin: 10px 0; font-size: 12px; }
.mn-note { margin-top: 9px; font-size: 12px; min-height: 16px; }
.btn.danger { background: var(--down); border-color: var(--down); color: var(--bg); }

@media (max-width: 900px) {
  .mn-modal { padding: 0; align-items: flex-end; }
  .mn-modal-card { width: 100%; max-height: 92vh; border-radius: var(--r) var(--r) 0 0; }
  /* Stacked: the BODY scrolls, the chart column must not clip its own legend
     and stats strip the way it does in the two-column layout. */
  .mn-modal-body { grid-template-columns: 1fr; overflow: auto; }
  .mn-modal-chartcol { overflow: visible; }
  .mn-trade { overflow: visible; }
  .mn-chart-wrap { min-height: 240px; height: 240px; flex: none; }
  #mnc-chart { min-height: 240px; }
  .mn-trade { border-left: 0; border-top: 1px solid var(--line); }
  .mn-trade-ticket { margin-top: 0; }
  .mn-range { min-height: 38px; padding: 8px 13px; }
  .mn-modal-name { max-width: 150px; }
}

/* --- Astro: dock, panel, and the shared report renderer ---------------- */
/* The launcher is anchored bottom-right and never moves; the panel grows
   upwards from it, which is why this is column-reverse. */
.astro-dock { position: fixed; right: 18px; bottom: 18px; z-index: 70;
              display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 10px; }

/* Nebula palette, sampled from the logo mark: violet -> electric blue -> cyan. */
:root { --neb-1: #6018f0; --neb-2: #0b3cf5; --neb-3: #00d8d8; }

.astro-launch { display: flex; align-items: center; gap: 9px; cursor: pointer;
                padding: 8px 15px 8px 9px; border-radius: 999px;
                border: 1px solid var(--line-bright); background: var(--panel);
                box-shadow: 0 8px 26px rgba(0,0,0,.45); }
.astro-launch:hover { border-color: var(--neb-3); }
.astro-launch-label { font-family: var(--display); font-size: 13px; letter-spacing: .04em;
                      background: linear-gradient(96deg, var(--neb-1), var(--neb-2) 46%, var(--neb-3));
                      -webkit-background-clip: text; background-clip: text; color: transparent; }
.astro-orb { position: relative; width: 30px; height: 30px; border-radius: 50%;
             display: grid; place-items: center; flex: none; }
.astro-orb-core { width: 18px; height: 18px; border-radius: 50%;
                  background: radial-gradient(circle at 32% 30%, var(--neb-3), var(--neb-2) 55%, var(--neb-1));
                  box-shadow: 0 0 14px rgba(11,60,245,.55); }
.astro-orb-ring { position: absolute; inset: 1px; border-radius: 50%;
                  border: 1px solid rgba(96,24,240,.45); animation: astro-pulse 3.4s ease-in-out infinite; }
@keyframes astro-pulse { 0%,100% { transform: scale(1); opacity: .55 }
                         50% { transform: scale(1.16); opacity: .12 } }
@media (prefers-reduced-motion: reduce) { .astro-orb-ring { animation: none } }

.astro-panel { display: none; width: min(400px, calc(100vw - 32px)); max-height: min(620px, 74vh);
               background: var(--panel); border: 1px solid var(--line-bright); border-radius: var(--r);
               box-shadow: 0 22px 60px rgba(0,0,0,.55); overflow: hidden;
               flex-direction: column; }
.astro-dock.open .astro-panel { display: flex; }
.astro-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
              border-bottom: 1px solid var(--line); }
.astro-spacer { flex: 1; }
.astro-name { font-family: var(--display); font-size: 13px; letter-spacing: .14em;
              background: linear-gradient(96deg, var(--neb-1), var(--neb-2) 40%, var(--neb-3));
              -webkit-background-clip: text; background-clip: text; color: transparent; }
.astro-name-chat { opacity: .82; }
.astro-sub { font-size: 11px; color: var(--ink-faint); margin-top: 2px; }
.astro-icon { background: transparent; border: 1px solid var(--line); border-radius: var(--r-s);
              color: var(--ink-dim); cursor: pointer; padding: 5px 8px; font-size: 12px; }
.astro-icon.on { border-color: var(--cyan); color: var(--cyan);
                animation: astro-mic 1.6s ease-in-out infinite; }
.astro-icon.warm { border-color: var(--amber); color: var(--amber); }
@keyframes astro-mic { 0%,100% { box-shadow: 0 0 0 0 rgba(53,208,224,.45) }
                       70% { box-shadow: 0 0 0 6px rgba(53,208,224,0) } }
@media (prefers-reduced-motion: reduce) { .astro-icon.on { animation: none } }
.astro-log { flex: 1; overflow: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; }
.astro-msg { font-size: 13px; line-height: 1.55; padding: 9px 11px; border-radius: var(--r-s);
             max-width: 92%; }
.astro-msg.it { background: var(--panel-2); border: 1px solid var(--line); align-self: flex-start; }
.astro-msg.me { background: rgba(53,208,224,.12); border: 1px solid rgba(53,208,224,.3);
                align-self: flex-end; }
.astro-input { display: flex; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--line); }
.astro-input input { flex: 1; min-width: 0; }

/* Report renderer — used by the dock and the portfolio page alike */
.astro-report { font-size: 13px; line-height: 1.6; }
.astro-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
              font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint);
              margin-bottom: 10px; }
.astro-fresh, .astro-stale { padding: 2px 7px; border-radius: 999px; letter-spacing: .06em; }
.astro-fresh { background: rgba(53,208,122,.16); color: var(--up); }
.astro-stale { background: rgba(245,181,68,.16); color: var(--amber); }
.astro-drift { color: var(--amber); }
.astro-summary { margin: 0 0 12px; font-size: 13.5px; }
.astro-h { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.astro-h-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.astro-h-name { font-family: var(--mono); font-size: 10px; letter-spacing: .09em;
                text-transform: uppercase; color: var(--cyan); }
.astro-h-span { font-size: 10.5px; color: var(--ink-faint); }
.astro-h p { margin: 0; }
.astro-drivers { margin: 7px 0 0; padding-left: 16px; color: var(--ink-dim); font-size: 12.5px; }
.astro-drivers li { margin-bottom: 3px; }
.astro-lbl { font-family: var(--mono); font-size: 9.5px; letter-spacing: .09em;
             text-transform: uppercase; color: var(--ink-faint); margin: 12px 0 5px; }
.astro-flag-list, .astro-watch-list, .astro-gap-list { margin: 0; padding-left: 16px; font-size: 12.5px; }
.astro-flag-list li { color: var(--amber); }
.astro-gap-list li { color: var(--ink-faint); }
.astro-warn { color: var(--amber); margin-bottom: 8px; }
.astro-raw { white-space: pre-wrap; font-size: 11.5px; color: var(--ink-dim); }
.astro-evidence { margin-top: 12px; }
.astro-evidence summary { cursor: pointer; font-size: 11.5px; color: var(--ink-dim); }
.astro-evidence pre { max-height: 260px; overflow: auto; font-size: 10.5px; line-height: 1.45;
                      background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-s);
                      padding: 10px; margin-top: 8px; color: var(--ink-dim); }
.astro-foot { margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--line);
              font-size: 11px; color: var(--ink-faint); }

/* Portfolio page: the analysis cell in each row */
.astro-cell { white-space: nowrap; }
.astro-chip { font-family: var(--mono); font-size: 10.5px; padding: 3px 8px; cursor: pointer;
              border: 1px solid var(--line); border-radius: 999px; background: transparent;
              color: var(--ink-dim); }
.astro-chip:hover { color: var(--ink); border-color: var(--line-bright); }
.astro-chip.has { border-color: rgba(53,208,224,.45); color: var(--cyan); }
.astro-chip.stale { border-color: rgba(245,181,68,.45); color: var(--amber); }
.astro-row-report td { background: var(--bg); padding: 14px 16px !important; }

@media (max-width: 760px) {
  .astro-dock { right: 12px; bottom: 12px; }
  .astro-panel { width: calc(100vw - 24px); max-height: 72vh; }
  .astro-launch { padding: 7px 13px 7px 8px; }
  .astro-launch-label { font-size: 12px; }
}

/* --- Astro: the call ---------------------------------------------------- */
.astro-calls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.astro-call { border: 1px solid var(--line); border-radius: var(--r-s); padding: 10px 11px;
              background: var(--panel-2); border-left-width: 3px; }
.astro-call.up   { border-left-color: var(--up); }
.astro-call.down { border-left-color: var(--down); }
.astro-call.flat { border-left-color: var(--ink-faint); }
.astro-call.none { border-left-color: var(--amber); opacity: .82; }
.astro-call-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.astro-call-h { font-family: var(--mono); font-size: 9.5px; letter-spacing: .09em;
                text-transform: uppercase; color: var(--ink-faint); }
.astro-call-word { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.astro-call.up   .astro-call-word { color: var(--up); }
.astro-call.down .astro-call-word { color: var(--down); }
.astro-call.none .astro-call-word { color: var(--amber); font-size: 15px; }
.astro-call-str { font-family: var(--mono); font-size: 10px; color: var(--ink-dim);
                  border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; }
.astro-call-span { font-size: 10.5px; color: var(--ink-faint); margin-top: 2px; }
.astro-call-why { font-size: 11.5px; color: var(--ink-dim); margin-top: 6px; line-height: 1.45; }
.astro-rules { margin-top: 8px; }
.astro-rules summary { cursor: pointer; font-size: 11px; color: var(--ink-dim); }
.astro-rule-tbl { width: 100%; border-collapse: collapse; margin-top: 6px;
                  font-family: var(--mono); font-size: 10.5px; }
.astro-rule-tbl td { padding: 3px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.astro-rule-tbl td.v { color: var(--ink); white-space: nowrap; }
.astro-rule-tbl td.p { text-align: right; white-space: nowrap; }
.astro-rule-tbl td.n { color: var(--ink-faint); font-family: var(--body); font-size: 11px; }
.astro-rule-tbl tr.pro td.p { color: var(--up); }
.astro-rule-tbl tr.con td.p { color: var(--down); }
.astro-call-note { font-size: 11px; color: var(--ink-faint); margin-bottom: 12px; }
.astro-why { font-size: 13px; line-height: 1.6; color: var(--ink-dim);
             border-left: 2px solid var(--line-bright); padding-left: 11px; margin: 0 0 12px; }
@media (max-width: 760px) { .astro-calls { grid-template-columns: 1fr; } }

/* --- portfolio: curve ranges + refresh stamp ---------------------------- */
.eyebrow-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 2px; }
.eyebrow-row .spacer { flex: 1; }
.refresh-stamp { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint);
                 letter-spacing: .02em; }
.refresh-stamp.cold { color: var(--amber); }
.cv-ranges { display: flex; gap: 4px; flex-wrap: wrap; }
.cv-r { font-family: var(--mono); font-size: 10.5px; padding: 4px 9px; cursor: pointer;
        background: transparent; color: var(--ink-faint);
        border: 1px solid var(--line); border-radius: var(--r-s); }
.cv-r:hover { color: var(--ink); }
.cv-r.on { background: var(--cyan); border-color: var(--cyan); color: var(--bg); font-weight: 600; }
@media (max-width: 760px) {
  .cv-r { min-height: 34px; padding: 6px 10px; }
  .eyebrow-row { gap: 8px; }
}

/* --- Astro: where the price structure came from ------------------------- */
.astro-src { display: flex; align-items: center; gap: 7px; margin-bottom: 9px;
             font-family: var(--mono); font-size: 10px; letter-spacing: .06em; }
.astro-live { text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
              background: rgba(53,208,122,.16); color: var(--up); }
.astro-src-fallback { text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
                      background: rgba(245,181,68,.16); color: var(--amber); }
.astro-src-when { color: var(--ink-faint); }