/* ============================================================
   Outgain Financial HUD
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Share+Tech+Mono&family=Rajdhani:wght@400;500;600;700&display=swap');

:root {
  --cyan:      #29e7ff;
  --cyan-dim:  #1aa6bd;
  --cyan-deep: #0a3d4a;
  --amber:     #ffb648;
  --red:       #ff4d5e;
  --green:     #45ff9e;
  --bg0:       #02060a;
  --bg1:       #04101a;
  --glow:      0 0 8px var(--cyan), 0 0 18px rgba(41,231,255,.55);
  --glow-soft: 0 0 14px rgba(41,231,255,.25);
  --mono: 'Share Tech Mono', monospace;
  --display: 'Orbitron', sans-serif;
  --ui: 'Rajdhani', sans-serif;
}

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

html, body {
  height: 100%;
  background:
    radial-gradient(ellipse at 50% 40%, #05202e 0%, var(--bg1) 45%, var(--bg0) 100%);
  color: var(--cyan);
  font-family: var(--ui);
  overflow: hidden;
  cursor: crosshair;
}

.hidden { display: none !important; }

/* ===================== BOOT ===================== */
.boot {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, #04141d, #000 80%);
}
.boot-inner { width: min(720px, 90vw); }
.boot-logo {
  font-family: var(--mono);
  color: var(--cyan);
  text-shadow: var(--glow);
  font-size: clamp(6px, 1.1vw, 12px);
  line-height: 1.05;
  margin-bottom: 24px;
  white-space: pre;
}
.boot-log {
  font-family: var(--mono);
  font-size: 13px;
  height: 220px; overflow: hidden;
  color: var(--cyan-dim);
  margin-bottom: 18px;
}
.boot-log .ok { color: var(--green); }
.boot-log .warn { color: var(--amber); }
.boot-bar {
  height: 6px; background: rgba(41,231,255,.12);
  border: 1px solid var(--cyan-deep); border-radius: 4px; overflow: hidden;
}
.boot-bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--cyan-dim), var(--cyan));
  box-shadow: var(--glow); transition: width .2s ease;
}
.boot-pct { font-family: var(--mono); margin-top: 8px; text-align: right; font-size: 12px; }
.boot-dots::after { content: ''; animation: bootDots 1.2s steps(1, end) infinite; }
@keyframes bootDots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } 100% { content: ''; } }

/* ===================== HUD layout ===================== */
.hud { position: fixed; inset: 0; display: flex; flex-direction: column; }
.bg-grid { position: fixed; inset: 0; z-index: 0; opacity: .35; pointer-events: none; }
.scanlines {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(41,231,255,.04) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
}
.vignette {
  position: fixed; inset: 0; z-index: 49; pointer-events: none;
  box-shadow: inset 0 0 220px 40px rgba(0,0,0,.85);
}

/* ===================== Top bar ===================== */
.topbar {
  position: relative; z-index: 10;
  /* Single row, everything on one plane: brand (far left), then a contiguous
     tabs · clock · toolbar group pushed toward the right by margin-left:auto on
     .topbar-center — which lands the tabs a little left of centre with the clock
     and buttons flowing off to their right. nowrap keeps it one line; overflow-x
     is the safety valve so a too-narrow window scrolls instead of overlapping. */
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 16px;
  overflow-x: auto;
  padding: 12px 22px;
  border-bottom: 1px solid var(--cyan-deep);
  background: linear-gradient(180deg, rgba(5,30,42,.6), transparent);
}
.brand-j {
  font-family: var(--display); font-weight: 900;
  font-size: 26px; letter-spacing: 6px;
  text-shadow: var(--glow);
  display: block;
}
.brand-sub { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; color: var(--cyan-dim); }
.status-pill {
  font-family: var(--mono); font-size: 12px; letter-spacing: 2px;
  border: 1px solid var(--cyan-deep); border-radius: 20px;
  padding: 6px 16px; display: flex; align-items: center; gap: 8px;
  background: rgba(41,231,255,.05);
}
.status-pill .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 8px var(--green);
  animation: pulse 1.4s infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.25} }
.status-pill .dot.closed { background: var(--amber); box-shadow: 0 0 8px var(--amber); animation: none; }
/* The clock re-renders every second in a proportional font, so its width would
   change with the digits and jitter the toolbar that follows it on the row. The
   fix is a fixed-width box (sized in ch so it scales with the font): the clock's
   width becomes constant, so nothing after it shifts on a tick.
   (`tabular-nums` only helps when the display font ships a tnum table — Orbitron
   does not, so the digits are rendered as eight equal cells; see tickClock.) */
.topbar-left    { flex: 0 0 auto; }
/* Tabs stacked over the market-status pill. margin-left:auto absorbs the free
   space to their left, pushing this block (and the clock + toolbar after it)
   rightward so the tabs sit a little left of centre. */
.topbar-center  { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px;
                  margin-left: auto; }
/* Clock over date, sitting just to the right of the tabs. Stacked (not side by
   side) to keep the single row narrow enough to hold the full toolbar too. */
.topbar-meta    { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
/* The action toolbar follows the clock, all on the same line. */
.topbar-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.topbar-actions .ctrl-btn { padding: 7px 10px; }
.clock {
  font-family: var(--display); font-size: 24px; text-shadow: var(--glow);
  white-space: nowrap;
  /* Fixed box for the always-8-char HH:MM:SS (hour12:false pads the hour).
     A width alone is NOT enough: this flex row runs over-constrained, and a
     shrunk flex item bottoms out at min-content — for plain nowrap text that
     is the width of the current digits, which fluctuates every second
     (Orbitron ships no tnum table for tabular-nums to use). So the clock is
     rendered as eight equal cells (see tickClock): each digit sits centred in
     a 1ch cell, the min-content width becomes a constant, and nothing after
     the clock can move on a tick. The 3px per cell replaces the letter-spacing
     this element used to carry; ch keeps it holding at the 18px mobile size. */
  width: calc(8ch + 24px);
}
.clock .cc { display: inline-block; width: calc(1ch + 3px); text-align: center; }
.date  { font-family: var(--mono); font-size: 11px; color: var(--cyan-dim); }
/* Below ~1100px the full single row can't fit; drop margin-left:auto so the
   group sits right after the brand and the whole bar scrolls horizontally as one
   plane (rather than the tabs jumping far left against the brand).
   NB: must come AFTER the base .topbar-* rules — equal specificity, so file
   order decides who wins. */
@media (max-width: 1100px) {
  .topbar { gap: 14px; padding-bottom: 6px; }
  .topbar-center { margin-left: 16px; }
}
.ctrl-btn {
  font-family: var(--mono); font-size: 11px; letter-spacing: 1px;
  color: var(--cyan); background: rgba(41,231,255,.06);
  border: 1px solid var(--cyan-deep); border-radius: 4px;
  padding: 8px 12px; cursor: pointer; transition: all .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
/* Stroke-only, currentColor: the icon matches whatever state the button is in
   (cyan, active green, danger red) with zero extra rules. */
.btn-ic {
  width: 14px; height: 14px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.ctrl-btn:hover { background: rgba(41,231,255,.18); box-shadow: var(--glow-soft); }
.ctrl-btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.ctrl-btn:disabled:hover { background: rgba(41,231,255,.08); }
.ctrl-btn.primary { border-color: var(--cyan); color: #021016; background: var(--cyan); font-weight: 700; }
.ctrl-btn.active { border-color: var(--green); color: var(--green); box-shadow: 0 0 10px rgba(69,255,158,.35); }
.ctrl-btn.spinning { display: inline-block; animation: spin360 .8s linear infinite; pointer-events: none; opacity: .8; }
@keyframes spin360 { to { transform: rotate(360deg); } }
.ctrl-btn.danger { border-color: var(--red); color: var(--red); }
.ctrl-btn.danger:hover { background: rgba(255,77,94,.15); }

/* ===================== Main grid ===================== */
.grid {
  position: relative; z-index: 5; flex: 1;
  display: grid; grid-template-columns: 1fr 1.4fr 1fr;
  gap: 18px; padding: 18px 22px; min-height: 0;
}
.panel {
  border: 1px solid var(--cyan-deep);
  background: linear-gradient(180deg, rgba(6,28,40,.45), rgba(2,10,16,.25));
  border-radius: 10px; padding: 16px;
  position: relative; min-height: 0; overflow: hidden;
  backdrop-filter: blur(2px);
}
.panel::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: .6;
}
.panel-title {
  font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: 4px;
  color: var(--cyan); text-shadow: var(--glow-soft); margin-bottom: 14px;
  border-bottom: 1px solid var(--cyan-deep); padding-bottom: 8px;
}
/* header row when a control sits beside the title (e.g. refresh on Asset Allocation) */
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--cyan-deep); margin-bottom: 14px; padding-bottom: 8px;
}
.panel-head .panel-title { margin: 0; padding: 0; border: 0; }
.icon-btn { padding: 4px 9px; font-size: 13px; line-height: 1; }
.panel-head-right { display: flex; align-items: center; gap: 8px; }
.last-sync { font-family: var(--mono); font-size: 9px; letter-spacing: 1px; color: var(--cyan-dim); white-space: nowrap; }
.panel-center { display: flex; flex-direction: column; align-items: center; border: none; background: none; }
.panel-center::before { display: none; }

/* ===================== Gauges ===================== */
.gauges { display: flex; flex-direction: column; gap: 14px; overflow-y: auto; max-height: 100%; padding-right: 4px; }
.gauges::-webkit-scrollbar { width: 6px; }
.gauges::-webkit-scrollbar-thumb { background: var(--cyan-deep); border-radius: 3px; }
.gauge {
  display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center;
  border-radius: 8px; padding: 4px; margin: -4px -4px;
}
.gauge.flash-up   { animation: flashUp   .9s ease-out; }
.gauge.flash-down { animation: flashDown .9s ease-out; }
@keyframes flashUp {
  0%   { background: rgba(69,255,158,.28); box-shadow: inset 0 0 18px rgba(69,255,158,.4); }
  100% { background: transparent; box-shadow: none; }
}
@keyframes flashDown {
  0%   { background: rgba(255,77,94,.28); box-shadow: inset 0 0 18px rgba(255,77,94,.4); }
  100% { background: transparent; box-shadow: none; }
}
.tick-arrow { font-size: 11px; margin-left: 6px; opacity: 0; }
.gauge.flash-up   .tick-arrow.up   { opacity: 1; color: var(--green); animation: fadeArrow .9s ease-out; }
.gauge.flash-down .tick-arrow.down { opacity: 1; color: var(--red);   animation: fadeArrow .9s ease-out; }
@keyframes fadeArrow { 0% { opacity: 1; } 100% { opacity: 0; } }

.nw-value.nw-up   { animation: nwUp   .9s ease-out; }
.nw-value.nw-down { animation: nwDown .9s ease-out; }
@keyframes nwUp   { 0% { color: var(--green); text-shadow: 0 0 14px var(--green); } 100% { color: var(--cyan); } }
@keyframes nwDown { 0% { color: var(--red);   text-shadow: 0 0 14px var(--red);   } 100% { color: var(--cyan); } }
.gauge svg { width: 76px; height: 76px; }
.gauge-info { min-width: 0; }
.gauge-name { font-family: var(--ui); font-weight: 600; font-size: 14px; letter-spacing: 1px; color: #cfeefb; text-transform: uppercase; }
.gauge-amt { font-family: var(--mono); font-size: 16px; text-shadow: var(--glow-soft); }
.gauge-bar { height: 4px; background: rgba(41,231,255,.12); border-radius: 2px; margin-top: 6px; overflow: hidden; }
.gauge-bar i { display: block; height: 100%; background: var(--cyan); box-shadow: var(--glow); transition: width .6s ease; }
.gauge-pct { font-family: var(--mono); font-size: 11px; color: var(--cyan-dim); }

/* ===================== Reactor ===================== */
.reactor-wrap { position: relative; width: min(46vh, 100%); aspect-ratio: 1; margin-top: 8px; }
.reactor { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 12px rgba(41,231,255,.5)); }
.reactor-core {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.nw-label { font-family: var(--display); letter-spacing: 6px; font-size: 13px; color: var(--cyan-dim); }
.nw-value {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(28px, 4.4vh, 56px); letter-spacing: 2px;
  text-shadow: var(--glow); margin: 4px 0;
}
.nw-delta { font-family: var(--mono); font-size: 14px; }
.nw-delta.up { color: var(--green); }
.nw-delta.down { color: var(--red); }
.nw-sub { font-family: var(--mono); font-size: 11px; color: var(--cyan-dim); margin-top: 6px; }

.spin-cw  { transform-origin: 300px 300px; animation: spin 24s linear infinite; }
.spin-ccw { transform-origin: 300px 300px; animation: spin 32s linear infinite reverse; }
.spin-fast{ transform-origin: 300px 300px; animation: spin 9s  linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===================== Ticker ===================== */
.ticker {
  margin-top: 18px; width: 100%; overflow: hidden; white-space: nowrap;
  border-top: 1px solid var(--cyan-deep); border-bottom: 1px solid var(--cyan-deep);
  padding: 8px 0; font-family: var(--mono); font-size: 13px;
}
.ticker .row { display: inline-block; animation: marquee 28s linear infinite; }
.ticker .tk { margin: 0 18px; }
.ticker .tk b { color: #cfeefb; }
.ticker .up { color: var(--green); }
.ticker .down { color: var(--red); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===================== Vitals ===================== */
.vitals { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vital {
  border: 1px solid var(--cyan-deep); border-radius: 6px; padding: 10px;
  background: rgba(41,231,255,.04);
}
.vital .k { font-family: var(--mono); font-size: 10px; color: var(--cyan-dim); letter-spacing: 1px; }
.vital .v { font-family: var(--display); font-size: 20px; text-shadow: var(--glow-soft); }
.vital .v.good { color: var(--green); }
.vital .v.bad { color: var(--red); }
.vital .v.warn { color: var(--amber); }

/* ===================== Bottom bar ===================== */
.bottombar {
  position: relative; z-index: 5;
  display: grid; grid-template-columns: 1.8fr 1fr; gap: 18px;
  padding: 0 22px 18px;
}
.chart-card, .log-card {
  border: 1px solid var(--cyan-deep); border-radius: 10px; padding: 12px 14px;
  background: linear-gradient(180deg, rgba(6,28,40,.45), rgba(2,10,16,.25));
  height: 168px; overflow: hidden;
}
.chart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.chart-title { font-family: var(--display); font-size: 12px; letter-spacing: 3px; }
.chart-range { font-family: var(--mono); font-size: 10px; color: var(--cyan-dim); }
.history-chart { width: 100%; height: 120px; }
.chart-ctrls { display: flex; align-items: center; gap: 6px; }
.chip {
  font-family: var(--mono); font-size: 10px; letter-spacing: 1px;
  color: var(--cyan-dim); background: rgba(41,231,255,.05);
  border: 1px solid var(--cyan-deep); border-radius: 4px;
  padding: 3px 8px; cursor: pointer; transition: all .12s;
}
.chip:hover { color: var(--cyan); border-color: var(--cyan); }
.chip.active { color: #021016; background: var(--cyan); border-color: var(--cyan); font-weight: 700; }
.chart-toolbar { display: flex; justify-content: space-between; gap: 12px; margin: 6px 0 14px; flex-wrap: wrap; }
.seg { display: flex; gap: 5px; }
.big-chart { width: 100%; height: 60vh; display: block; }
.syslog { font-family: var(--mono); font-size: 11px; line-height: 1.5; height: 124px; overflow: hidden; color: var(--cyan-dim); }
.syslog .t { color: var(--cyan); }
.syslog .ok { color: var(--green); }
.syslog .warn { color: var(--amber); }

/* ===================== Modal ===================== */
.modal {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: rgba(0,8,14,.82); backdrop-filter: blur(4px);
}
.modal-box {
  width: min(760px, 94vw); max-height: 86vh; overflow: auto;
  border: 1px solid var(--cyan); border-radius: 12px; padding: 22px;
  background: linear-gradient(180deg, #06212e, #03121a);
  box-shadow: 0 0 40px rgba(41,231,255,.3);
}
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.modal-head h3 { font-family: var(--display); letter-spacing: 3px; font-size: 18px; }
.modal-close { background: none; border: none; color: var(--cyan); font-size: 20px; cursor: pointer; }
.modal-hint { font-size: 13px; color: var(--cyan-dim); margin-bottom: 16px; line-height: 1.4; }
.acct-table { display: flex; flex-direction: column; gap: 8px; }
.acct-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 36px; gap: 8px; align-items: center; }
.acct-row.crypto-row { grid-template-columns: 1fr .8fr .9fr .9fr 36px; }
.acct-row input, .acct-row select {
  font-family: var(--mono); font-size: 13px; color: var(--cyan);
  background: rgba(41,231,255,.06); border: 1px solid var(--cyan-deep);
  border-radius: 4px; padding: 8px;
}
.acct-row input:focus, .acct-row select:focus { outline: none; border-color: var(--cyan); box-shadow: var(--glow-soft); }
.acct-row .del { background: none; border: 1px solid var(--red); color: var(--red); border-radius: 4px; cursor: pointer; padding: 6px; }
.acct-head { font-family: var(--mono); font-size: 10px; color: var(--cyan-dim); letter-spacing: 1px; }
.acct-group { font-family: var(--mono); font-size: 11px; color: var(--cyan); letter-spacing: 1px; margin: 14px 0 4px; padding-bottom: 4px; border-bottom: 1px dashed var(--cyan-deep); }
.acct-row.plaid-row input:disabled { opacity: .65; cursor: not-allowed; color: var(--green); border-color: rgba(69,255,158,.3); }
.acct-row .synced { display: flex; align-items: center; justify-content: center; font-size: 14px; }
.acct-row.hidden-row { grid-template-columns: 1.4fr 1fr 1fr auto; opacity: .8; }
.acct-row.hidden-row input { color: var(--cyan-dim); }
.restore-acct { padding: 6px 10px; font-size: 10px; white-space: nowrap; }
.modal-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.modal-box.wide { width: min(960px, 96vw); }

/* ---- positions table ---- */
.pos-summary { display: flex; gap: 22px; flex-wrap: wrap; margin: 6px 0 14px; font-family: var(--mono); font-size: 12px; color: var(--cyan-dim); }
.pos-summary b { font-family: var(--display); color: var(--cyan); font-size: 16px; text-shadow: var(--glow-soft); margin-left: 6px; }
.pos-table-wrap { max-height: 56vh; overflow-y: auto; border: 1px solid var(--cyan-deep); border-radius: 8px; }
.pos-table-wrap::-webkit-scrollbar { width: 6px; }
.pos-table-wrap::-webkit-scrollbar-thumb { background: var(--cyan-deep); border-radius: 3px; }
.pos-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 13px; }
.pos-table thead th {
  position: sticky; top: 0; background: #06222e; color: var(--cyan-dim);
  font-size: 10px; letter-spacing: 1px; text-align: left; padding: 10px 12px;
  border-bottom: 1px solid var(--cyan-deep); z-index: 1;
}
.pos-table th.num, .pos-table td.num { text-align: right; }
.pos-table tbody td { padding: 9px 12px; border-bottom: 1px solid rgba(41,231,255,.08); }
.pos-table tbody tr:hover { background: rgba(41,231,255,.06); }
.pos-table .sym { color: #cfeefb; font-weight: 600; }
.pos-table .desc { color: var(--cyan-dim); font-size: 11px; }
.pos-table .val { color: var(--cyan); text-shadow: var(--glow-soft); }
.pos-table .pl-up { color: var(--green); }
.pos-table .pl-down { color: var(--red); }
.pos-table small { opacity: .7; font-size: 10px; }
.pos-bar { display: inline-block; height: 4px; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); border-radius: 2px; vertical-align: middle; margin-left: 6px; }
.pos-empty { font-family: var(--mono); font-size: 13px; color: var(--cyan-dim); padding: 24px 4px; text-align: center; }

/* ---- subscriptions modal (shares the pos-table skeleton) ---- */
.badge {
  display: inline-block; padding: 2px 7px; border-radius: 3px;
  font-size: 10px; letter-spacing: 1px; white-space: nowrap;
}
.badge-hike { color: var(--red);   background: rgba(255,77,94,.12);  border: 1px solid rgba(255,77,94,.4); }
.badge-drop { color: var(--green); background: rgba(69,255,158,.10); border: 1px solid rgba(69,255,158,.35); }
.badge-new  { color: var(--amber); background: rgba(255,182,72,.10); border: 1px solid rgba(255,182,72,.4); }
.badge-local { color: var(--cyan); background: rgba(41,231,255,.08); border: 1px solid rgba(41,231,255,.35); }
.renew-soon { color: var(--amber); }
.pos-summary .subs-hikes b { color: var(--red); }
.subs-muted-row td { opacity: .4; }
.subs-mute {
  background: none; border: none; cursor: pointer; font-size: 13px;
  color: rgba(226,247,255,.5); padding: 2px 4px;
}
.subs-mute:hover { color: var(--amber); }

@media (max-width: 1100px) {
  .grid { grid-template-columns: 1fr; grid-auto-rows: min-content; overflow-y: auto; }
  .bottombar { grid-template-columns: 1fr; }
  .reactor-wrap { width: min(60vw, 360px); }
}

/* ===================== Mobile (phones / small tablets) ===================== */
@media (max-width: 768px) {
  html, body { cursor: default; }

  /* Top bar: keep the single-plane row, but let the whole bar scroll
     horizontally with touch so every control stays reachable on a phone. */
  .topbar {
    gap: 12px;
    padding: 10px 14px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
    padding-bottom: 6px;
  }
  .topbar-center { margin-left: 12px; }
  .brand-j { font-size: 20px; letter-spacing: 3px; }
  .topbar::-webkit-scrollbar { height: 5px; }
  .topbar::-webkit-scrollbar-thumb { background: var(--cyan-deep); border-radius: 3px; }
  /* Keep each control at its natural size so they don't squash into each other. */
  .topbar > *, .topbar-actions > * { flex: 0 0 auto; scroll-snap-align: start; }
  .clock { font-size: 18px; }

  /* System log eats too much vertical space on a phone — hide it and let the
     net-worth trajectory chart use the full width. */
  .log-card { display: none; }
}

/* ===== AUTH GATE (multi-user mode) ===== */
.auth-screen {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at 50% 40%, #05202e 0%, var(--bg1) 45%, var(--bg0) 100%);
}
.auth-screen.hidden { display: none; }
.auth-box {
  width: 360px; max-width: 92vw; padding: 30px 28px;
  background: rgba(4, 16, 26, .85);
  border: 1px solid var(--cyan-deep); border-radius: 8px;
  box-shadow: var(--glow-soft);
}
.auth-brand { text-align: center; margin-bottom: 22px; display: flex; flex-direction: column; gap: 4px; }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.auth-tab {
  flex: 1; padding: 9px 0; cursor: pointer;
  font-family: var(--ui); font-size: 12px; letter-spacing: 2px;
  color: var(--cyan-dim); background: rgba(41,231,255,.04);
  border: 1px solid var(--cyan-deep); border-radius: 4px;
}
.auth-tab.active { color: #021016; background: var(--cyan); border-color: var(--cyan); font-weight: 700; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field.hidden { display: none; }
.auth-field span { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; color: var(--cyan-dim); }
.auth-field input {
  padding: 10px 12px;
  color: var(--cyan); background: rgba(41,231,255,.06);
  border: 1px solid var(--cyan-deep); border-radius: 4px;
  font-family: var(--mono); font-size: 14px; outline: none;
}
.auth-field input:focus { border-color: var(--cyan); box-shadow: var(--glow-soft); }
.auth-error { min-height: 16px; color: var(--red); font-family: var(--mono); font-size: 11px; }
.auth-submit { width: 100%; padding: 11px 0; cursor: pointer; }
.auth-submit:disabled { opacity: .5; cursor: not-allowed; }

/* ===== Auth: notice + links (verification / reset) ===== */
.auth-notice { min-height: 16px; color: var(--green); font-family: var(--mono); font-size: 11px; }
.auth-links { display: flex; justify-content: space-between; margin-top: 12px; }
.auth-links a {
  color: var(--cyan-dim); font-family: var(--mono); font-size: 11px;
  text-decoration: none; letter-spacing: 1px;
}
.auth-links a:hover { color: var(--cyan); }
.auth-links a.hidden { display: none; }

/* ===== Email verification banner ===== */
.verify-banner {
  position: relative; z-index: 5;
  display: flex; align-items: center; gap: 14px;
  padding: 8px 16px;
  background: rgba(255,182,72,.10);
  border-bottom: 1px solid var(--amber);
  color: var(--amber);
  font-family: var(--ui); font-size: 13px; letter-spacing: 1px;
}
/* Paywall variant — cyan (a prompt/opportunity), not amber (a warning). */
.billing-banner {
  background: rgba(41,231,255,.08);
  border-bottom-color: var(--cyan);
  color: var(--cyan);
}
.billing-banner .ctrl-btn { margin-left: auto; }
.billing-banner .ctrl-btn + .ctrl-btn { margin-left: 8px; }
.verify-banner.hidden { display: none; }
.verify-banner .ctrl-btn { padding: 5px 12px; font-size: 11px; color: var(--amber); border-color: var(--amber); }
.verify-banner .ctrl-btn:hover { background: rgba(255,182,72,.18); }
.verify-banner-close {
  margin-left: auto; cursor: pointer;
  background: none; border: none; color: var(--amber); font-size: 14px;
}

/* ===== Auth consent line ===== */
.auth-consent {
  margin-top: 16px; font-family: var(--mono); font-size: 10px; line-height: 1.6;
  color: var(--cyan-dim); text-align: center;
}
.auth-consent a { color: var(--cyan); text-decoration: none; }
.auth-consent a:hover { text-decoration: underline; }

/* ============================================================
   CUSTOM ANALYTICS — AI-generated widgets
   Widget bodies render inside sandboxed iframes (see widget-host.js);
   these styles only cover the surrounding chrome.
   ============================================================ */
.widget-compose { display: flex; gap: 8px; margin-bottom: 10px; }
.widget-input {
  flex: 1; background: rgba(2,10,16,.9); border: 1px solid rgba(41,231,255,.28);
  color: rgba(226,247,255,.9); font-family: var(--ui); font-size: 14px;
  padding: 10px 12px; letter-spacing: .4px; outline: none;
}
.widget-input:focus { border-color: var(--cyan); box-shadow: var(--glow-soft); }
.widget-input::placeholder { color: rgba(226,247,255,.32); }

.widget-status {
  font-family: var(--mono); font-size: 11px; letter-spacing: 1px;
  color: var(--cyan); min-height: 16px; margin-bottom: 12px; text-transform: uppercase;
}
.widget-status.err { color: var(--red); }
.widget-status .spin { display: inline-block; animation: wspin 1s linear infinite; }
@keyframes wspin { to { transform: rotate(360deg); } }

.widget-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px; max-height: 62vh; overflow-y: auto; padding-right: 4px;
}
.widget-card {
  border: 1px solid rgba(41,231,255,.2);
  background: linear-gradient(180deg, rgba(4,16,26,.85), rgba(2,6,10,.85));
  box-shadow: 0 0 16px rgba(41,231,255,.07);
  display: flex; flex-direction: column;
}
.widget-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-bottom: 1px solid rgba(41,231,255,.14);
}
.widget-card-head h4 {
  font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: 1.6px;
  color: var(--cyan); text-transform: uppercase; margin: 0;
}
.widget-del {
  background: none; border: none; color: rgba(255,77,94,.55); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 2px 4px;
}
.widget-del:hover { color: var(--red); text-shadow: 0 0 8px rgba(255,77,94,.7); }
.widget-body { height: 220px; }
.widget-frame { width: 100%; height: 100%; border: 0; background: transparent; display: block; }
.widget-error {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--red); text-align: center;
}
.widget-error span { color: rgba(226,247,255,.4); font-size: 10px; margin-top: 6px; }

.widget-empty {
  text-align: center; padding: 46px 20px; font-family: var(--mono);
  font-size: 12px; letter-spacing: 2px; color: rgba(41,231,255,.45);
}
.widget-empty span {
  display: block; margin-top: 8px; font-family: var(--ui);
  font-size: 12px; letter-spacing: .4px; color: rgba(226,247,255,.35);
}

/* Voice input — mic listening state */
#widgetMic.listening {
  color: var(--red); border-color: rgba(255,77,94,.6);
  box-shadow: 0 0 12px rgba(255,77,94,.5); animation: micpulse 1.1s ease-in-out infinite;
}
@keyframes micpulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

/* Refine + reorder controls on widget cards */
.widget-handle {
  cursor: grab; color: rgba(41,231,255,.4); font-size: 13px; line-height: 1;
  padding: 2px 4px; user-select: none;
}
.widget-handle:active { cursor: grabbing; }
.widget-card-head h4 { flex: 1; }
.widget-regen {
  background: none; border: none; color: rgba(41,231,255,.55); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 2px 4px;
}
.widget-regen:hover { color: var(--cyan); text-shadow: 0 0 8px rgba(41,231,255,.7); }

.widget-expand,
.widget-export {
  background: none; border: none; color: rgba(41,231,255,.55); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 2px 4px;
}
.widget-expand:hover,
.widget-export:hover { color: var(--cyan); text-shadow: 0 0 8px rgba(41,231,255,.7); }

/* ---- transaction ledger view ---- */
.txn-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.txn-nav { display: flex; align-items: center; gap: 10px; }
.txn-period {
  font-family: var(--display); font-size: 15px; letter-spacing: 2px;
  color: var(--cyan); text-shadow: var(--glow-soft);
  min-width: 200px; text-align: center;
}
.txn-layout {
  display: grid; grid-template-columns: minmax(340px, 5fr) minmax(420px, 7fr);
  gap: 16px; margin-top: 14px; flex: 1; min-height: 0;
}
.txn-chart-card {
  border: 1px solid rgba(41,231,255,.2); border-radius: 8px;
  background: linear-gradient(180deg, rgba(4,16,26,.85), rgba(2,6,10,.85));
  padding: 12px; display: flex; flex-direction: column; min-height: 0;
  position: relative;   /* anchors the hover tooltip */
}
.txn-tip {
  position: absolute; z-index: 20; transform: translateX(-50%);
  pointer-events: none;   /* never steal the hover from the canvas */
  font-family: var(--mono); font-size: 11px; letter-spacing: 1px; white-space: nowrap;
  color: var(--cyan); background: rgba(2,10,16,.95);
  border: 1px solid var(--cyan); border-radius: 4px; padding: 4px 8px;
  box-shadow: var(--glow-soft);
}
.txn-chart { width: 100%; height: 280px; flex: 1; min-height: 200px; }
.txn-totals {
  display: flex; gap: 20px; flex-wrap: wrap; margin-top: 10px;
  font-family: var(--mono); font-size: 11px; color: var(--cyan-dim); letter-spacing: 1px;
}
.txn-totals b { font-family: var(--display); color: var(--cyan); font-size: 14px; margin-left: 6px; }
.txn-totals b.pos, td.pos { color: var(--green); }
.txn-totals b.neg { color: var(--red); }
.txn-table-card { display: flex; flex-direction: column; min-height: 0; }
.txn-table-wrap { max-height: none; flex: 1; min-height: 0; }
.txn-pending td { opacity: .45; }
.txn-cat {
  background: rgba(41,231,255,.07); border: 1px solid rgba(41,231,255,.25);
  color: rgba(226,247,255,.85); font-family: var(--mono); font-size: 11px;
  letter-spacing: .5px; border-radius: 3px; padding: 3px 8px; cursor: pointer;
  white-space: nowrap;
}
.txn-cat:hover:not(:disabled) { border-color: var(--cyan); box-shadow: var(--glow-soft); }
.txn-cat:disabled { cursor: default; opacity: .6; }
/* A user-corrected label is marked so "my fix" and "bank's guess" are distinguishable. */
.txn-cat.edited { border-color: var(--amber); color: var(--amber); }
.txn-cat-select {
  font-family: var(--mono); font-size: 12px; color: var(--cyan);
  background: #04101a; border: 1px solid var(--cyan); border-radius: 3px; padding: 3px 6px;
}
.txn-rules { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.txn-rules-label { font-family: var(--mono); font-size: 9px; letter-spacing: 2px; color: rgba(41,231,255,.5); }
.txn-rule {
  font-family: var(--mono); font-size: 10px; letter-spacing: .5px;
  color: var(--amber); background: rgba(255,182,72,.08);
  border: 1px solid rgba(255,182,72,.35); border-radius: 3px; padding: 2px 6px;
  display: inline-flex; align-items: center; gap: 6px;
}
.txn-rule-del { background: none; border: none; color: rgba(255,182,72,.6); cursor: pointer; font-size: 10px; padding: 0; }
.txn-rule-del:hover { color: var(--red); }

@media (max-width: 1100px) {
  .txn-layout { grid-template-columns: 1fr; }
  .txn-chart { height: 220px; }
}

/* ---- budgets editor (ledger, BUDGETS chart mode) ---- */
.txn-budget-edit { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.txn-budget-edit.hidden { display: none; }
.budget-input {
  width: 110px; font-family: var(--mono); font-size: 12px; color: var(--cyan);
  background: rgba(2,10,16,.9); border: 1px solid rgba(41,231,255,.28);
  border-radius: 3px; padding: 5px 8px; outline: none;
}
.budget-input:focus { border-color: var(--cyan); box-shadow: var(--glow-soft); }

/* ---- performance share card ---- */
.perf-ranges { margin-bottom: 6px; }
.perf-canvas {
  display: block; width: min(420px, 100%); height: auto; margin: 10px auto;
  border: 1px solid rgba(41,231,255,.2); border-radius: 8px;
}
.perf-actions { display: flex; gap: 8px; }

/* ---- briefing modal ---- */
.brief-meta { font-family: var(--mono); font-size: 10px; letter-spacing: 2px; color: rgba(41,231,255,.5); margin-bottom: 12px; }
.brief-body { min-height: 120px; }
.brief-summary {
  font-family: var(--ui); font-size: 15px; line-height: 1.5; color: #e8f8ff;
  border-left: 2px solid var(--cyan); padding-left: 12px; margin-bottom: 16px;
}
.brief-obs { margin-bottom: 14px; }
.brief-obs h4 {
  font-family: var(--display); font-size: 12px; letter-spacing: 2px;
  color: var(--cyan); margin-bottom: 4px;
}
.brief-obs p { font-family: var(--ui); font-size: 14px; line-height: 1.5; color: rgba(226,247,255,.85); }
.brief-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(41,231,255,.14);
}
.brief-disclaimer { font-family: var(--mono); font-size: 10px; letter-spacing: 1px; color: rgba(226,247,255,.35); }

/* ---- refine modal ---- */
.refine-history {
  border: 1px solid rgba(41,231,255,.18); border-radius: 6px;
  background: rgba(2,10,16,.6);
  padding: 10px 12px; margin-bottom: 12px;
}
.refine-label {
  display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 2px;
  color: rgba(41,231,255,.5); margin-bottom: 5px;
}
/* The trail can grow long as refinements accumulate — cap it and scroll. */
.refine-prompt {
  font-family: var(--ui); font-size: 13px; line-height: 1.45;
  color: rgba(226,247,255,.82);
  max-height: 96px; overflow-y: auto; overflow-wrap: anywhere;
}
.refine-prompt.is-missing { color: rgba(226,247,255,.35); font-style: italic; }
/* Match the BUILT FROM box above. `.widget-input` sizes itself with `flex: 1`
   for the composer bar, but there is no flex parent here, so it needs an
   explicit full width. Safe with the global border-box reset — the padding and
   border stay inside the 100%, keeping both boxes exactly the same width. */
#refineInput, #refineName { width: 100%; display: block; }
#refineName { margin-bottom: 12px; }
/* `.refine-label` is a block already; as a <label> it needs the same spacing. */
label.refine-label { margin-bottom: 5px; }
.refine-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
#refineStatus:empty { display: none; }

/* The enlarged copy inside the modal. Taller than the 220px grid tile but still
   bounded by the viewport, matching how the net-worth chart enlarges. */
.widget-body-lg { height: min(62vh, 620px); margin-top: 10px; }

.widget-card.drag-src { opacity: .4; }
/* While dragging, stop the iframes from swallowing dragover/drop events. */
.widget-grid.dragging .widget-frame { pointer-events: none; }
.widget-grid.dragging .widget-card { outline: 1px dashed rgba(41,231,255,.25); }

/* ============================================================
   VIEW TABS + full-page ANALYTICS view
   ============================================================ */
.view-tabs { display: inline-flex; gap: 2px; }
.view-tab {
  background: rgba(2,10,16,.6); border: 1px solid rgba(41,231,255,.22);
  color: rgba(226,247,255,.55); font-family: var(--display); font-weight: 700;
  font-size: 11px; letter-spacing: 2px; padding: 6px 16px; cursor: pointer;
  transition: color .15s, border-color .15s, box-shadow .15s;
}
.view-tab:first-child { border-radius: 2px 0 0 2px; }
.view-tab:last-child  { border-radius: 0 2px 2px 0; border-left: 0; }
.view-tab:hover { color: var(--cyan); }
.view-tab.active {
  color: var(--bg0); background: var(--cyan); border-color: var(--cyan);
  box-shadow: var(--glow-soft);
}

.analytics-view {
  position: relative; z-index: 5; flex: 1; min-height: 0;
  display: flex; flex-direction: column; padding: 18px 22px 22px;
}
.analytics-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 6px;
}
.analytics-sub {
  font-family: var(--ui); font-size: 12px; letter-spacing: .3px;
  color: rgba(226,247,255,.4); margin-top: 4px;
}
.analytics-head .widget-compose { margin-bottom: 0; min-width: 340px; flex: 1; max-width: 620px; }

/* The grid fills the remaining view height and scrolls internally. */
.analytics-view .widget-grid {
  flex: 1; min-height: 0; max-height: none; margin-top: 14px;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); align-content: start;
}
.analytics-view .widget-body { height: 240px; }