/* ApexDelta v3 shell: tokens, top bar, ticker, page heading and KPI cards.
   Loaded after the page's own <style> block, so the tokens here win. The
   older component styles keep working because they read the same variable
   names; only the values and the page frame change. */

:root {
  /* Finance palette (2026-10-14): graphite and white. Purple is kept for
     the logo only; the variable names stay so older rules keep working.
     Gold is the one accent; green and red are kept for money moving. */
  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --surface-alt: #EEF0F4;
  --border: #E3E6EB;
  --ink: #0F1720;
  --muted: #5D6876;
  --purple: #3A4757;
  --purple-dark: #1B2532;
  --purple-tint: #EEF0F4;
  --hover-tint: #E9ECF1;
  --green-fg: #15803D;  --green-bg: rgba(21, 128, 61, 0.12);  --gain-soft: rgba(21, 128, 61, 0.16);
  --red-fg: #B91C1C;    --red-bg: rgba(185, 28, 28, 0.10);    --loss-soft: rgba(185, 28, 28, 0.14);
  --brand-ink: #0F1720;
  --brand-deep: #1B2532;
  --gold-ink: #8A5F1A;
  --v3-radius: 16px;
  --v3-mono: 'JetBrains Mono', ui-monospace, monospace;
}
/* [data-tone="dark"] gives one card the dark values while the page stays
   light: the Custom theme. Tokens cascade, so everything inside follows. */
[data-theme="dark"], [data-tone="dark"] {
  --bg: #0A0D12;
  --surface: #11161D;
  --surface-alt: #181E27;
  --border: #242B36;
  --ink: #F3F0FA;
  --muted: #8D97A6;
  --purple: #A9B4C2;
  --purple-dark: #D5DCE5;
  --purple-tint: #1A2029;
  --green-fg: #4ADE80;  --green-bg: rgba(74, 222, 128, 0.14);  --gain-soft: rgba(74, 222, 128, 0.18);
  --red-fg: #F87171;    --red-bg: rgba(248, 113, 113, 0.14);   --loss-soft: rgba(248, 113, 113, 0.18);
  --gold-ink: #E8C27E;
  --hover-tint: #1A2029;
}

body { font-family: 'Outfit', system-ui, sans-serif; max-width: none; padding: 0; margin: 0; }
.v3-wrap { max-width: 1320px; margin: 0 auto; padding: 0 24px; }
#app-content > .v3-wrap { padding-bottom: 64px; }

/* ---- top bar ---- */
.v3-topbar {
  position: sticky; top: 0; z-index: 40; display: block; margin: 0;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.v3-topbar-row { display: flex; align-items: center; gap: 14px; min-height: 64px; }
.v3-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; }
.v3-brand img { width: 34px; height: 34px; border-radius: 0; display: block; }
.v3-spacer { flex: 1; }

.v3-clock {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 1px solid var(--border);
  border-radius: 99px; font-family: var(--v3-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.v3-clock b { color: var(--ink); font-weight: 600; }
.v3-dot { width: 7px; height: 7px; border-radius: 50%; background: #E8877B; flex: none; }
.v3-clock[data-state="open"] .v3-dot { background: #22C55E; animation: v3Pulse 2s infinite; }
.v3-clock[data-state="pre_open"] .v3-dot { background: var(--gold); }
@keyframes v3Pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); } 70% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }

.v3-menu { position: relative; }
.v3-chip-btn, .v3-avatar { font-family: inherit; cursor: pointer; }
.v3-chip-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 10px; font-size: 14px; font-weight: 500;
  background: var(--surface); color: var(--ink); border: 1px solid var(--border);
}
.v3-chip-btn::after { content: "▾"; font-size: 11px; color: var(--muted); }
.v3-chip-btn:hover, .v3-chip-btn[aria-expanded="true"] { border-color: var(--purple); }
.v3-avatar {
  width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--brand-deep); color: #FFFEF5;
  font-weight: 600; font-size: 13px; letter-spacing: 0.04em;
}
.v3-avatar:focus-visible, .v3-chip-btn:focus-visible, .v3-pop button:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.v3-pop {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; padding: 6px; z-index: 50;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .35);
}
.v3-pop[hidden] { display: none; }
.v3-pop button {
  display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent;
  color: var(--ink); font-family: inherit; font-size: 14px; cursor: pointer;
}
.v3-pop button:hover { background: var(--surface-alt); }
.v3-pop button[aria-checked="true"] { background: var(--surface-alt); font-weight: 600; }
.v3-pop-head { padding: 8px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }

/* ---- index ticker ---- */
.v3-ticker { border-top: 1px solid var(--border); background: var(--surface-alt); }
.v3-ticker[hidden] { display: none; }
.v3-ticker-row { display: flex; gap: 28px; align-items: center; min-height: 36px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; font-family: var(--v3-mono); font-size: 12.5px; }
.v3-ticker-row::-webkit-scrollbar { display: none; }
.v3-tick { display: inline-flex; gap: 8px; align-items: baseline; padding: 3px 6px; border-radius: 6px; color: var(--ink); }
.v3-tick b { font-weight: 600; letter-spacing: 0.04em; }
.v3-tick .up { color: var(--green-fg); } .v3-tick .down { color: var(--red-fg); }
.v3-tick.flash-up { animation: v3FlashUp .8s ease-out; } .v3-tick.flash-down { animation: v3FlashDown .8s ease-out; }
@keyframes v3FlashUp { 0% { background: var(--gain-soft); } 100% { background: transparent; } }
@keyframes v3FlashDown { 0% { background: var(--loss-soft); } 100% { background: transparent; } }

/* ---- page heading and period control ---- */
.v3-headrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; padding: 28px 0 22px; }
.v3-eyebrow { font-family: var(--v3-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple); margin-bottom: 6px; }
.v3-title { font-size: clamp(26px, 3vw, 34px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; margin: 0; color: var(--ink); }
.v3-sub { font-family: var(--v3-mono); font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.v3-headrow .period-selector-row { margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.v3-headrow .period-pills { background: var(--surface-alt); border-radius: 12px; padding: 4px; gap: 2px; flex-wrap: wrap; }
.v3-headrow .period-pills button { border-radius: 9px; padding: 8px 14px; font-size: 14px; }
.v3-headrow .period-pills button.active { box-shadow: 0 1px 3px rgba(18, 12, 31, .12); }

/* ---- KPI cards ---- */
.v3-kpis { display: grid; grid-template-columns: 2.1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.v3-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--v3-radius); padding: 22px 24px; min-width: 0; overflow: hidden; }
.v3-kpi-hero { grid-row: span 2; display: flex; flex-direction: column; }
.v3-kpi-label { display: flex; justify-content: space-between; gap: 10px; font-family: var(--v3-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.v3-live { color: var(--green-fg); letter-spacing: 0.04em; text-transform: none; }
.v3-live::before { content: "● "; font-size: 8px; vertical-align: middle; }
.v3-kpi .overview-stat-value { font-family: var(--v3-mono); font-weight: 600; font-size: clamp(19px, 2.2vw, 28px); white-space: nowrap; color: var(--ink); }
.v3-kpi-hero .overview-stat-value { font-size: clamp(30px, 4.2vw, 46px); letter-spacing: -0.02em; }
.v3-kpi .overview-stat-value.positive { color: var(--green-fg); } .v3-kpi .overview-stat-value.negative { color: var(--red-fg); }
.v3-kpi-foot { margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.v3-kpi-foot b { color: var(--ink); font-family: var(--v3-mono); font-weight: 500; }
.v3-hero-spark { display: block; width: 100%; height: 84px; margin-top: auto; padding-top: 14px; overflow: visible; }
.v3-hero-spark polyline { vector-effect: non-scaling-stroke; stroke: var(--gold); stroke-width: 2.5; }

@media (max-width: 900px) {
  .v3-wrap { padding: 0 16px; }
  .v3-kpis { grid-template-columns: 1fr 1fr; }
  .v3-kpi-hero { grid-column: 1 / -1; grid-row: auto; }
  .v3-headrow { padding: 20px 0 16px; }
  .v3-headrow .period-selector-row { align-items: stretch; width: 100%; }
}
@media (max-width: 520px) {
  .v3-brand span { display: none; }
  .v3-clock .v3-clock-extra { display: none; }
  .v3-kpi { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .v3-clock[data-state="open"] .v3-dot, .v3-tick.flash-up, .v3-tick.flash-down { animation: none; }
}

/* Room between the KPI cards and the first section below them. */
.v3-wrap > .section-heading { margin-top: 36px; }

/* ---- Custom theme: per-card tone ---- */
[data-tone="dark"] { color: var(--ink); --shadow-sm: 0 1px 3px rgba(0, 0, 0, .2); --shadow-md: 0 6px 16px rgba(0, 0, 0, .3); }
.v3-tone-help { margin: -6px 0 14px; font-size: 14px; color: var(--muted); }
.v3-tone-presets { display: flex; gap: 8px; margin-bottom: 12px; }
.v3-tone-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.v3-tone-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14.5px; }
.v3-tone-row:last-child { border-bottom: 0; }
.v3-tone-seg { display: inline-flex; background: var(--surface-alt); border-radius: 9px; padding: 3px; flex: none; }
.v3-tone-seg button { border: 0; background: transparent; color: var(--muted); font-family: inherit; font-size: 13.5px; padding: 6px 12px; border-radius: 7px; cursor: pointer; }
.v3-tone-seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(18, 12, 31, .12); }
.v3-tone-seg button:focus-visible { outline: 2px solid var(--purple); outline-offset: 1px; }

/* ---- login, sign-up and forgot-password screen ----
   app.js shows this screen with an inline display:flex, so the two halves
   are flex children rather than grid columns. */
#login-screen { align-items: stretch; justify-content: flex-start; padding: 0; min-height: 100vh; background: var(--bg); }
.v3-auth-hero {
  flex: 1.15 1 0; min-width: 0; display: flex; flex-direction: column; gap: 28px; padding: 44px clamp(28px, 5vw, 72px);
  background: var(--brand-ink, #120C1F); color: #FFFEF5;
  background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 22px 22px;
}
.v3-auth-brand img { display: block; height: 56px; width: auto; }
.v3-auth-copy { margin-top: clamp(12px, 6vh, 64px); max-width: 560px; }
.v3-auth-eyebrow { font-family: var(--v3-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #D9A657; margin-bottom: 16px; }
.v3-auth-headline { font-size: clamp(28px, 3.4vw, 42px); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; margin: 0 0 18px; }
.v3-auth-lead { font-size: 17px; line-height: 1.6; color: #B7AFCB; margin: 0; }
.v3-auth-chart { width: 100%; max-width: 620px; height: clamp(110px, 22vh, 190px); margin-top: auto; overflow: visible; }

.v3-auth-pane { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 32px 24px; }
.v3-auth-pane .login-box { margin: 0; max-width: 400px; align-items: stretch; gap: 14px; border-radius: var(--v3-radius); padding: 36px 32px; }
.v3-auth-pane .login-box img.login-logo { display: none; width: 44px; height: 44px; margin: 0 0 4px; }
.v3-auth-pane .login-box h1 { font-size: 24px; font-weight: 600; letter-spacing: -.02em; margin: 0 0 8px; text-align: left; }
.v3-auth-pane .login-box form { width: 100%; gap: 8px; }
.v3-auth-pane .login-box label { font-size: 13px; font-weight: 500; color: var(--muted); margin-top: 6px; }
.v3-auth-pane .login-box input { border-radius: 10px; }
.v3-auth-pane .login-box button:not(.toggle-password) { border-radius: 10px; margin-top: 10px; font-weight: 600; }
.v3-auth-pane .auth-toggle { text-align: left; }

@media (max-width: 900px) {
  .v3-auth-hero { display: none; }
  .v3-auth-pane { padding: 24px 16px; }
  .v3-auth-pane .login-box img.login-logo { display: block; }
  .v3-auth-pane .login-box { padding: 28px 22px; }
}

/* ---- first-run panel ---- */
.v3-firstrun {
  display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap;
  background: var(--surface); border: 1px dashed var(--purple); border-radius: var(--v3-radius); padding: 24px 28px; margin: 12px 0 0;
}
.v3-firstrun[hidden] { display: none; }
.v3-firstrun h2 { margin: 0 0 6px; font-size: 20px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.v3-firstrun p { margin: 0; max-width: 620px; color: var(--muted); font-size: 15px; line-height: 1.55; }
.v3-firstrun-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.v3-gold-btn { background: var(--gold); color: var(--on-gold, #231A38); border: 0; border-radius: 10px; padding: 12px 20px; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.v3-gold-btn:hover { filter: brightness(1.06); }
.v3-gold-btn:focus-visible, .v3-link-btn:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.v3-link-btn { color: var(--purple-dark); font-size: 14.5px; }

/* ---- scope: broker chips and segment control ---- */
.v3-scope { display: flex; align-items: center; gap: 14px 28px; flex-wrap: wrap; margin: 0 0 18px; }
.v3-scope[hidden] { display: none; }
.v3-scope-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.v3-scope-label { font-family: var(--v3-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.v3-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.v3-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border-radius: 99px; cursor: pointer;
  background: var(--surface); color: var(--ink); border: 1px solid var(--border); font-family: inherit; font-size: 14px; font-weight: 500;
}
.v3-chip[data-id="all"] { padding-left: 14px; }
.v3-chip-mono { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; color: #fff; font-family: var(--v3-mono); font-size: 10px; font-weight: 600; background: var(--brand-deep); }
.v3-chip[aria-pressed="true"] { background: var(--brand-ink); color: #FFFEF5; border-color: var(--brand-ink); }
[data-theme="dark"] .v3-chip[aria-pressed="true"] { background: var(--purple); border-color: var(--purple); }
.v3-chip:hover { border-color: var(--purple); }
.v3-seg { display: inline-flex; background: var(--surface-alt); border-radius: 10px; padding: 3px; }
.v3-seg button { border: 0; background: transparent; color: var(--muted); font-family: inherit; font-size: 14px; padding: 7px 14px; border-radius: 8px; cursor: pointer; }
.v3-seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(18, 12, 31, .12); }
.v3-chip:focus-visible, .v3-seg button:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

/* ---- positions grouped by broker, then segment ---- */
.v3-pos-tools { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.v3-pos-summary { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.v3-pos-chip { display: flex; flex-direction: column; gap: 3px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-alt); min-width: 0; }
.v3-pos-chip span { font-family: var(--v3-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.v3-pos-chip b { font-family: var(--v3-mono); font-size: 13.5px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.v3-pos-chip b.pnl-positive, .v3-pos-list .pnl-positive { color: var(--green-fg); }
.v3-pos-chip b.pnl-negative, .v3-pos-list .pnl-negative { color: var(--red-fg); }
.v3-pos-allbtns { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.v3-ghost-btn { background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 9px; padding: 8px 12px; font-family: inherit; font-size: 13.5px; cursor: pointer; }
.v3-ghost-btn:hover { border-color: var(--purple); }
.v3-pos-list { border-top: 1px solid var(--border); }
.v3-pos-broker { border-bottom: 1px solid var(--border); }
.v3-pos-broker > summary { display: flex; align-items: center; gap: 14px; padding: 14px 4px; cursor: pointer; list-style: none; }
.v3-pos-broker > summary::-webkit-details-marker, .v3-pos-seg > summary::-webkit-details-marker { display: none; }
.v3-pos-broker > summary::before, .v3-pos-seg > summary::before { content: "▸"; color: var(--muted); font-size: 12px; width: 12px; flex: none; }
.v3-pos-broker[open] > summary::before, .v3-pos-seg[open] > summary::before { content: "▾"; }
.v3-pos-tile { width: 32px; height: 32px; border-radius: 9px; font-size: 11px; flex: none; }
.v3-pos-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v3-pos-name b { font-size: 16px; font-weight: 600; color: var(--ink); }
.v3-pos-name small, .v3-pos-mtm small { font-family: var(--v3-mono); font-size: 11px; color: var(--muted); letter-spacing: .04em; }
.v3-pos-mtm { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.v3-pos-mtm b { font-family: var(--v3-mono); font-size: 14.5px; font-weight: 600; white-space: nowrap; }
.v3-pos-seg { margin: 0 0 10px 26px; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.v3-pos-seg > summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; list-style: none; background: var(--surface-alt); font-size: 14px; font-weight: 500; }
.v3-pos-seg > summary b { margin-left: auto; font-family: var(--v3-mono); font-size: 13.5px; }
.v3-pos-count { font-family: var(--v3-mono); font-size: 12px; color: var(--muted); }
.v3-pos-table th.num, .v3-pos-table td.num { text-align: right; font-family: var(--v3-mono); white-space: nowrap; }
.v3-pos-broker > summary:focus-visible, .v3-pos-seg > summary:focus-visible, .v3-ghost-btn:focus-visible { outline: 2px solid var(--purple); outline-offset: -2px; }
@media (max-width: 520px) { .v3-pos-seg { margin-left: 0; } .v3-pos-allbtns { margin-left: 0; width: 100%; } }


/* ------------------------------------------------------------ screens
   The top-bar menu and the shared pieces every screen after the dashboard
   is built from: cards, buttons, inputs, stat tiles, tables. */
[data-view-panel][hidden] { display: none; }
.v3-nav { display: flex; gap: 2px; margin-left: 6px; }
.v3-nav a { padding: 7px 12px; border-radius: 8px; font-size: 14.5px; font-weight: 500; color: var(--muted); text-decoration: none; white-space: nowrap; }
.v3-nav a:hover { color: var(--ink); }
.v3-nav a[aria-current="page"] { color: var(--ink); background: var(--surface-alt); }
.v3-nav a:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
@media (max-width: 760px) {
  .v3-topbar-row { flex-wrap: wrap; row-gap: 0; }
  .v3-nav { order: 10; width: 100%; margin: 0 0 8px; overflow-x: auto; scrollbar-width: none; }
  /* The clock gives way first, so the theme and account buttons stay on the top line. */
  .v3-topbar-row .v3-clock { flex: 1 1 0; min-width: 0; max-width: max-content; overflow: hidden; }
  .v3-topbar-row .v3-spacer { display: none; }
  .v3-topbar-row .v3-clock + .v3-nav + .v3-spacer + .v3-menu { margin-left: auto; }
}

.v3-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v3-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--v3-radius); color: var(--ink); }
.v3-card-pad { padding: 20px 22px; }
.v3-card h2, .v3-card h3 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.v3-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.v3-ghost-btn { height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--ink); font-family: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; }
.v3-ghost-btn:hover:not(:disabled) { border-color: var(--purple); }
.v3-ghost-btn:disabled, .v3-gold-btn:disabled { opacity: .45; cursor: default; }
.v3-ghost-btn:focus-visible, .v3-input:focus-visible, .v3-table th button:focus-visible, .v3-pick:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.v3-btn-sm { height: 40px; padding: 0 16px; font-size: 14.5px; }
.v3-pager .v3-btn-sm { height: 34px; padding: 0 12px; font-size: 13.5px; }
.v3-danger-btn { border-color: var(--red-fg); color: var(--red-fg); }
.v3-input { height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-family: inherit; font-size: 14.5px; min-width: 0; }
textarea.v3-input { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; width: 100%; }
select.v3-input { padding-right: 8px; }
.v3-grow { flex: 1 1 240px; }
.v3-filters { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.v3-filter-row { display: flex; gap: 10px 20px; flex-wrap: wrap; align-items: center; }
.v3-dates { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); flex-wrap: wrap; }
.v3-seg-sm button { font-size: 13px; padding: 5px 11px; }
.v3-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.v3-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.v3-stat span { font-family: var(--v3-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.v3-stat b { font-family: var(--v3-mono); font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v3-stat small { font-size: 12px; color: var(--muted); }
.v3-gain { color: var(--green-fg) !important; }
.v3-loss { color: var(--red-fg) !important; }
.v3-goldink { color: var(--gold-ink) !important; }
.v3-table-card { overflow: hidden; }
.v3-table-scroll { overflow-x: auto; }
.v3-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.v3-table th { background: var(--bg); text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); font-family: var(--v3-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.v3-table th button { border: 0; background: transparent; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
.v3-table th[aria-sort] button { color: var(--ink); }
.v3-table th[aria-sort="ascending"] button::after { content: " ↑"; }
.v3-table th[aria-sort="descending"] button::after { content: " ↓"; }
.v3-table td { padding: 11px 14px; border-top: 1px solid var(--border); vertical-align: middle; color: var(--ink); }
.v3-table tbody tr:first-child td { border-top: 0; }
.v3-table tbody tr:hover { background: var(--bg); }
.v3-table .num { text-align: right; font-family: var(--v3-mono); white-space: nowrap; }
.v3-table td.dim { color: var(--muted); }
.v3-table td small { display: block; font-family: var(--v3-mono); font-size: 11px; color: var(--muted); margin-top: 1px; white-space: nowrap; }
.v3-table td a { color: var(--ink); font-weight: 500; text-decoration: none; }
.v3-table td a:hover { color: var(--purple); text-decoration: underline; }
.v3-cell-broker { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.v3-side { font-family: var(--v3-mono); font-size: 12px; font-weight: 500; }
.v3-pill { display: inline-block; font-family: var(--v3-mono); font-size: 10.5px; padding: 2px 8px; border-radius: 99px; background: var(--surface-alt); color: var(--muted); white-space: nowrap; }
.v3-pill-purple { background: var(--surface-alt); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border); }
.v3-pill-gold { background: rgba(217, 166, 87, .2); color: var(--gold-ink); }
.v3-pill-red { background: var(--red-bg); color: var(--red-fg); }
.v3-pill-green { background: var(--green-bg); color: var(--green-fg); }
.v3-empty { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 15px; }
.v3-empty[hidden] { display: none; }
.v3-pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--border); flex-wrap: wrap; font-family: var(--v3-mono); font-size: 12.5px; color: var(--muted); }
.v3-pager div { display: flex; gap: 6px; }
.v3-footnote { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }
.v3-note { padding: 12px 16px; border-radius: 12px; font-size: 14px; margin-bottom: 14px; background: var(--surface-alt); color: var(--ink); }
.v3-note[hidden] { display: none; }
.v3-note-error { background: var(--red-bg); color: var(--red-fg); }
.v3-note-ok { background: var(--green-bg); color: var(--green-fg); }

/* Trade detail */
.v3-crumbs { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 24px 0 16px; font-size: 14.5px; }
.v3-crumbs a { color: var(--purple-dark); text-decoration: none; }
.v3-crumbs a:hover { text-decoration: underline; }
.v3-crumbs div { display: flex; gap: 18px; }
.v3-trade-hero { background: var(--brand-ink); color: #FFFEF5; border-radius: var(--v3-radius); padding: 26px 28px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 40px; flex-wrap: wrap; margin-bottom: 14px; }
.v3-trade-hero h1 { margin: 10px 0 6px; font-size: clamp(22px, 3vw, 30px); font-weight: 600; letter-spacing: -.02em; color: #FFFEF5; overflow-wrap: anywhere; }
.v3-trade-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--v3-mono); font-size: 12px; letter-spacing: .04em; color: #B7AFCB; }
.v3-trade-when { font-family: var(--v3-mono); font-size: 13px; color: #B7AFCB; }
.v3-trade-net { text-align: right; display: flex; flex-direction: column; gap: 4px; }
.v3-trade-net span { font-family: var(--v3-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #B7AFCB; }
.v3-trade-net b { font-family: var(--v3-mono); font-size: clamp(26px, 3.4vw, 38px); font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.v3-trade-net b.v3-gain { color: #7BE8B8 !important; }
.v3-trade-net b.v3-loss { color: #F29B90 !important; }
.v3-two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; align-items: start; }
.v3-stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.v3-bars { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.v3-bar-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 96px; align-items: center; gap: 12px; font-size: 14px; }
.v3-bar-row b { text-align: right; font-family: var(--v3-mono); font-weight: 500; }
.v3-bar { height: 6px; border-radius: 99px; background: var(--surface-alt); overflow: hidden; }
.v3-bar i { display: block; height: 100%; border-radius: 99px; background: var(--gold, #D9A657); }
.v3-hint { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; }
.v3-list { display: flex; flex-direction: column; margin-top: 10px; }
.v3-list a, .v3-list > div { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 9px; text-decoration: none; color: var(--ink); font-size: 14px; }
.v3-list a:hover { background: var(--bg); }
.v3-list a[aria-current="true"] { background: rgba(217, 166, 87, .14); }
.v3-list span:first-child { font-family: var(--v3-mono); font-size: 12px; color: var(--muted); }
.v3-list b { font-family: var(--v3-mono); font-weight: 600; white-space: nowrap; }
.v3-list { max-height: 420px; overflow-y: auto; }
.v3-field { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.v3-field > span, .v3-field > label { font-family: var(--v3-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.v3-picks { display: flex; gap: 6px; flex-wrap: wrap; }
.v3-pick { height: 32px; padding: 0 13px; border-radius: 99px; border: 1px solid var(--border); background: transparent; color: var(--ink); font-family: inherit; font-size: 13.5px; cursor: pointer; }
.v3-pick[aria-pressed="true"] { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; }
.v3-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.v3-card-head span { font-size: 12.5px; color: var(--muted); }
.v3-form-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
@media (max-width: 900px) { .v3-two { grid-template-columns: minmax(0, 1fr); } .v3-trade-net { text-align: left; } }
@media (max-width: 520px) {
  .v3-bar-row { grid-template-columns: 92px minmax(0, 1fr) 84px; }
  .v3-trade-hero { padding: 20px; }
  .v3-list a, .v3-list > div { grid-template-columns: 44px minmax(0, 1fr) auto; }
}

/* ------------------------------------------------------ dashboard cards */
.v3-cards-bar { display: flex; justify-content: flex-end; align-items: center; gap: 14px; margin: 26px 0 10px; }
.v3-cards { display: flex; flex-direction: column; gap: 34px; }
.v3-cards > section { min-width: 0; }
.v3-cards > section[hidden] { display: none; }
.v3-cards > section > .section-heading { margin-top: 0; }
.v3-arrange-bar { display: none; align-items: center; gap: 10px; padding: 10px 14px; border: 1px dashed var(--purple); border-radius: 12px; background: var(--surface); color: var(--ink); cursor: grab; }
.v3-arrange-bar b { flex: 1; font-weight: 500; font-size: 15px; }
.v3-grip { color: var(--muted); letter-spacing: -2px; }
.v3-btn-icon { width: 36px; height: 36px; padding: 0; font-size: 17px; line-height: 1; }
.v3-arranging { gap: 8px; }
.v3-arranging > section > * { display: none; }
.v3-arranging > section > .v3-arrange-bar { display: flex; }
.v3-dragging { opacity: .4; }
.v3-two-even { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; align-items: stretch; }
.v3-two-tight { gap: 8px 24px; }
.v3-lead { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink); }
.v3-line { margin: 12px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.v3-big { font-family: var(--v3-mono); font-size: clamp(24px, 3vw, 32px); font-weight: 600; letter-spacing: -.02em; margin: 10px 0 12px; color: var(--ink); }
.v3-stats-flat { margin: 14px 0 0; }
.v3-stats-flat .v3-stat { background: var(--bg); border: 0; }
.v3-inline-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.v3-inline-form label { font-size: 14px; color: var(--muted); }
.v3-inline-form .v3-input { width: 170px; }
.v3-hint-inline { font-size: 13px; color: var(--muted); }
.v3-bar-tall { height: 10px; margin-top: 12px; }
.v3-bar i.v3-bar-red { background: var(--red-fg); }
.v3-bar i.v3-bar-green { background: var(--green-fg); }
.v3-subhead { margin: 22px 0 4px !important; padding-top: 18px; border-top: 1px solid var(--border); font-family: var(--v3-mono); font-size: 11.5px !important; font-weight: 500 !important; letter-spacing: .1em; text-transform: uppercase; color: var(--purple) !important; }
.v3-minihead { margin: 0 0 6px; font-family: var(--v3-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
#playbook-body { margin-top: 6px; }
.v3-table-tight th { background: transparent; padding: 8px 10px; }
.v3-table-tight td { padding: 9px 10px; }
.v3-stack > .v3-table-scroll, .v3-card-pad > .v3-table-scroll { margin-top: 12px; }
.v3-folds { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 380px; overflow-y: auto; padding-right: 4px; }
/* Without this the rows shrink to fit the 380px box and their text is cut off. */
.v3-folds > * { flex-shrink: 0; }
.v3-card-pad > .v3-two { margin-top: 14px; }
.v3-fold { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.v3-fold > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 11px 14px; cursor: pointer; font-size: 14.5px; color: var(--ink); }
.v3-fold > summary small { font-family: var(--v3-mono); font-size: 11.5px; color: var(--muted); }
.v3-fold > summary > b { font-family: var(--v3-mono); white-space: nowrap; }
.v3-fold[open] > summary { border-bottom: 1px solid var(--border); background: var(--bg); }

/* Calendar */
.v3-cal-nav { display: flex; align-items: center; gap: 10px; }
.v3-cal-nav h3 { min-width: 150px; text-align: center; }
.v3-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 16px; }
.v3-cal-head { font-family: var(--v3-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: center; padding-bottom: 2px; }
.v3-cal-cell { min-height: 74px; border-radius: 10px; background: var(--bg); padding: 8px 9px; display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--muted); font-size: 12px; min-width: 0; overflow: hidden; }
.v3-cal-blank { background: transparent; }
.v3-cal-cell b { font-family: var(--v3-mono); font-size: 13px; font-weight: 600; white-space: nowrap; }
.v3-cal-cell small { font-size: 11px; color: var(--muted); white-space: nowrap; }
.v3-cal-gain { background: var(--gain-soft); color: var(--ink); }
.v3-cal-gain b { color: var(--green-fg); }
.v3-cal-loss { background: var(--loss-soft); color: var(--ink); }
.v3-cal-loss b { color: var(--red-fg); }
.v3-cal-flat { background: var(--surface-alt); color: var(--ink); }
a.v3-cal-cell:hover, a.v3-cal-cell:focus-visible { outline: 2px solid var(--purple); outline-offset: 1px; }

/* Pattern lab */
.v3-lab { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.v3-lab-wide { grid-column: 1 / -1; }
.v3-versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.v3-versus-side { background: var(--bg); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.v3-versus-side span { font-family: var(--v3-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.v3-versus-side b { font-family: var(--v3-mono); font-size: 19px; font-weight: 600; color: var(--ink); }
.v3-versus-side small { font-size: 12.5px; color: var(--muted); }
.v3-heat-scroll { overflow-x: auto; margin-top: 14px; }
.v3-heat { display: flex; flex-direction: column; gap: 4px; min-width: 620px; }
.v3-heat-row { display: grid; grid-template-columns: 38px repeat(25, minmax(0, 1fr)); gap: 4px; align-items: center; }
.v3-heat-row > span { font-family: var(--v3-mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.v3-heat-axis > span { overflow: visible; }
.v3-heat-cell { display: block; height: 26px; border-radius: 5px; background: var(--bg); }
.v3-heat-gain { background: var(--green-fg); }
.v3-heat-loss { background: var(--red-fg); }
.v3-heat-flat { background: var(--muted); opacity: .3; }
.v3-heat-cell[data-level="1"] { opacity: .28; }
.v3-heat-cell[data-level="2"] { opacity: .5; }
.v3-heat-cell[data-level="3"] { opacity: .75; }
.v3-heat-cell[data-level="4"] { opacity: 1; }
.v3-board-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--border); font-size: 14.5px; color: var(--ink); }
.v3-board-row span { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v3-board-row b { font-family: var(--v3-mono); grid-row: 1 / span 2; grid-column: 2; align-self: center; white-space: nowrap; }
.v3-board-row small { font-size: 12px; color: var(--muted); }
.v3-flow { display: inline-flex; align-items: center; gap: 10px; justify-content: flex-end; }
.v3-flow .v3-bar { width: 70px; display: inline-block; }
.v3-flow b { font-weight: 500; min-width: 86px; text-align: right; }
.v3-pills { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.v3-list-notes > div { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.v3-list-notes > div > span:last-child { font-family: inherit; font-size: 14px; color: var(--ink); }
@media (max-width: 900px) {
  .v3-lab, .v3-two-even { grid-template-columns: minmax(0, 1fr); }
  .v3-two-even.v3-two-tight { gap: 18px; }
}
@media (max-width: 620px) {
  .v3-cal { gap: 3px; }
  .v3-cal-cell { min-height: 54px; padding: 5px 4px; border-radius: 7px; }
  .v3-cal-cell b { font-size: 10px; letter-spacing: -.03em; }
  .v3-cal-cell small { display: none; }
  .v3-versus { grid-template-columns: minmax(0, 1fr); }
  .v3-fold > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .v3-fold > summary small { grid-column: 1; grid-row: 2; }
  .v3-flow .v3-bar { width: 34px; }
  .v3-flow b { min-width: 0; }
  .v3-inline-form .v3-input { width: 100%; }
}
/* The three connection buttons no longer run off a phone screen. */
.connections-heading-row { flex-wrap: wrap; row-gap: 10px; }
.connections-heading-actions { flex-wrap: wrap; min-width: 0; }
@media (max-width: 520px) { .v3-stats { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); } .v3-card-pad { padding: 16px; } }

/* ------------------------------------------------- bell, banner, settings */
.v3-icon-btn { position: relative; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; padding: 0; }
.v3-icon-btn:hover, .v3-icon-btn[aria-expanded="true"] { border-color: var(--purple); }
.v3-icon-btn:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.v3-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--red-fg); color: #fff; font-family: var(--v3-mono); font-size: 10.5px; font-weight: 600; line-height: 18px; text-align: center; }
.v3-badge[hidden] { display: none; }
.v3-pop a[role="menuitem"], .v3-pop-foot { display: block; padding: 9px 12px; border-radius: 8px; color: var(--ink); font-size: 14px; text-decoration: none; }
.v3-pop a[role="menuitem"]:hover { background: var(--surface-alt); }
.v3-pop-foot { margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; color: var(--purple-dark); font-size: 13px; }
.v3-pop-wide { width: min(360px, calc(100vw - 32px)); }
.v3-bell-list { max-height: 380px; overflow-y: auto; display: flex; flex-direction: column; }
.v3-bell-item { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--ink); font-size: 13.5px; line-height: 1.45; border-left: 3px solid transparent; }
a.v3-bell-item:hover { background: var(--surface-alt); }
.v3-bell-item b { font-weight: 600; font-size: 14px; }
.v3-bell-item span { color: var(--muted); }
.v3-bell-item small { font-family: var(--v3-mono); font-size: 11px; color: var(--muted); }
.v3-bell-unread { border-left-color: var(--gold, #D9A657); background: var(--surface-alt); }
.v3-bell-empty { padding: 18px 12px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
@media (max-width: 520px) { .v3-pop-wide { position: fixed; left: 16px; right: 16px; top: 64px; width: auto; } }
.v3-reauth { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; background: rgba(217, 166, 87, .18); color: var(--ink); border: 1px solid var(--gold, #D9A657); margin: 0 0 18px; }
.v3-reauth[hidden] { display: none; }
.v3-kpi-foot .v3-link-btn { font-size: inherit; }

.v3-settings { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; }
.v3-tabs { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 120px; }
.v3-tabs a { padding: 10px 14px; border-radius: 10px; color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 500; white-space: nowrap; }
.v3-tabs a:hover { color: var(--ink); }
.v3-tabs a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border); }
.v3-tabs a:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.v3-settings-body { min-width: 0; }
.v3-settings-body > div { display: flex; flex-direction: column; gap: 16px; }
.v3-settings-body > div[hidden] { display: none; }
.v3-settings-body .section-heading { margin-top: 18px; }
.v3-lead-top { margin: 0; }
.v3-settings-card .v3-card-head { margin-bottom: 4px; }
.v3-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.v3-form-grid .v3-input, .v3-field > .v3-input { width: 100%; }
.v3-field > .v3-input[type="number"] { max-width: 260px; }
.v3-input:disabled { background: var(--bg); color: var(--muted); }
.v3-theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.v3-theme-opt { text-align: left; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); font-family: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.v3-theme-opt b { font-weight: 600; font-size: 15px; }
.v3-theme-opt small { font-size: 12.5px; color: var(--muted); }
.v3-theme-opt[aria-pressed="true"] { border-color: var(--purple); box-shadow: inset 0 0 0 1px var(--purple); }
.v3-theme-opt:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.v3-toggles { display: flex; flex-direction: column; margin-top: 8px; }
.v3-toggle { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); cursor: pointer; }
.v3-toggle:first-child { border-top: 0; }
.v3-toggle input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--purple); flex: none; }
.v3-toggle span { display: flex; flex-direction: column; gap: 2px; }
.v3-toggle b { font-weight: 500; font-size: 15px; color: var(--ink); }
.v3-toggle small { font-size: 13px; color: var(--muted); }
@media (max-width: 900px) {
  .v3-settings { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .v3-tabs { flex-direction: row; position: static; overflow-x: auto; scrollbar-width: none; background: var(--surface-alt); border-radius: 12px; padding: 4px; }
  .v3-tabs a { padding: 8px 14px; font-size: 14.5px; }
  .v3-form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Help: tickets and feedback */
.v3-folds-open { max-height: none; }
.v3-fold-body { padding: 14px; }
.v3-fold > summary > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.v3-thread { display: flex; flex-direction: column; gap: 10px; }
.v3-msg { background: var(--bg); border-radius: 12px; padding: 10px 14px; max-width: 86%; align-self: flex-end; }
.v3-msg-staff { background: var(--surface-alt); box-shadow: inset 0 0 0 1px var(--border); align-self: flex-start; }
.v3-msg small { font-family: var(--v3-mono); font-size: 11px; color: var(--muted); }
.v3-msg p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.v3-reply { margin-top: 14px; }
.v3-reply .v3-form-foot { margin-top: 8px; }
.v3-scores { display: flex; gap: 6px; flex-wrap: wrap; }
.v3-scores .v3-pick { width: 38px; padding: 0; height: 38px; }
.v3-scale { display: flex; justify-content: space-between; max-width: 480px; }
.v3-scale small { font-size: 12px; color: var(--muted); }
.v3-field > .v3-seg { align-self: flex-start; }

/* ------------------------------------------------------- finance look
   Quieter labels in normal case, headings without the coloured bar,
   lighter figures. Added 2026-10-14; overrides the rules above. */
.v3-eyebrow, .v3-kpi-label, .v3-stat span, .v3-scope-label, .v3-minihead, .v3-cal-head,
.v3-versus-side span, .v3-field > span, .v3-field > label, .v3-trade-net span, .v3-table th,
.v3-pos-chip span, .v3-subhead {
  font-family: inherit !important; text-transform: none !important; letter-spacing: 0 !important;
  font-size: 12.5px !important; font-weight: 500 !important; color: var(--muted) !important;
}
.v3-eyebrow { font-size: 13px !important; margin-bottom: 4px; }
.v3-subhead { font-size: 13.5px !important; color: var(--ink) !important; }
.v3-kpi-label .v3-live { font-family: inherit; text-transform: none; letter-spacing: 0; }
.v3-sub { font-family: inherit; color: var(--muted); }
.v3-title { letter-spacing: -0.03em; }
#app-content .section-heading { text-transform: none; letter-spacing: -0.01em; font-size: 17px; font-weight: 600; color: var(--ink); padding-left: 0; }
#app-content .section-heading::before { display: none; }
.v3-kpi .overview-stat-value, .v3-stat b, .v3-big, .v3-versus-side b, .v3-trade-net b { font-weight: 500; font-variant-numeric: tabular-nums; }
/* Headline figures in the text face: a monospaced face spreads "43,565"
   too wide at this size. Tables keep the monospaced figures. */
.v3-kpi .overview-stat-value, .v3-big, .v3-trade-net b { font-family: inherit; letter-spacing: -0.03em; }
.v3-kpi-hero .overview-stat-value { font-size: clamp(30px, 3.6vw, 46px); }
.v3-stat b, .v3-cal-cell b, .v3-versus-side b, .v3-list b, .v3-board-row b, .v3-table .num, .v3-fold > summary > b {
  font-family: inherit; font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.v3-stat b { font-size: 20px; }
.v3-table .num, .v3-cal-cell b, .v3-list b, .v3-board-row b { font-variant-numeric: tabular-nums; }
.v3-card, .v3-kpi, .v3-stat { box-shadow: none; }
.v3-kpi, .v3-card { border-radius: 14px; }
.v3-chip[aria-pressed="true"], [data-theme="dark"] .v3-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.v3-pick[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.v3-avatar { background: var(--ink) !important; color: var(--surface) !important; }
.v3-nav a[aria-current="page"] { background: var(--surface-alt); }
.v3-ticker { background: var(--surface); }

/* ------------------------------------------------------------ live feel */
.v3-live[data-live="off"] { color: var(--muted); }
.v3-live[data-live="off"]::before { content: ""; }
.v3-stamp { color: var(--muted); }
.v3-skel { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
.v3-skel i { display: block; height: 13px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-alt) 0%, var(--hover-tint) 45%, var(--surface-alt) 90%); background-size: 300% 100%; animation: v3Shimmer 1.4s linear infinite; }
.v3-skel i:nth-child(1) { width: 38%; } .v3-skel i:nth-child(2) { width: 86%; } .v3-skel i:nth-child(3) { width: 64%; }
@keyframes v3Shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.v3-topbar.v3-open-pulse { animation: v3OpenPulse 2.4s ease-out; }
@keyframes v3OpenPulse { 0% { box-shadow: inset 0 -3px 0 #22C55E; } 100% { box-shadow: inset 0 -3px 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .v3-skel i, .v3-topbar.v3-open-pulse { animation: none; } }

/* -------------------------------------------------------- calmer screens
   The account menu holds the theme; the older analysis card and tables
   are brought in line with the newer cards. Added 2026-10-14. */
.v3-pop-group { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 4px 0; padding: 4px 0; }
.v3-pop-label { display: block; padding: 6px 12px 2px; font-size: 12px; color: var(--muted); }
.v3-pop { min-width: 220px; }
#view-insights { padding-top: 6px; }
#app-content .analytics-card { border-radius: 14px; box-shadow: none; padding: 22px 24px; }
#app-content .analytics-card:hover { transform: none; box-shadow: none; }
#app-content .insights-category-row { background: var(--surface-alt); border-radius: 10px; padding: 3px; }
#app-content .insights-category-row button { font-size: 14px; padding: 7px 14px; border-radius: 8px; }
#app-content .insights-category-row button.active { box-shadow: 0 1px 3px rgba(15, 23, 32, .12); }
#app-content #insights-select { background: var(--surface); border-radius: 10px; height: 40px; font-size: 14.5px; }
#app-content .data-table { font-size: 14px; }
#app-content .data-table th { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; color: var(--muted); background: transparent; }
#app-content .data-table tbody tr:nth-child(even) { background: transparent; }
#app-content .data-table tbody tr:hover { background: var(--surface-alt); }
#app-content .data-table td { border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
#app-content .empty { font-style: normal; color: var(--muted); }
#app-content .analytics-insight { border-radius: 12px; }
.v3-cards-bar .v3-ghost-btn { height: 34px; font-size: 13.5px; color: var(--muted); border-color: transparent; }
.v3-cards-bar .v3-ghost-btn:hover { color: var(--ink); border-color: var(--border); }
@media (max-width: 520px) {
  .v3-clock-extra { display: none; }
  .v3-topbar-row { gap: 10px; }
}

/* The hidden attribute always wins. Without this, any rule that sets
   display (a flex field, a confirm box) would show an element the script
   had hidden. */
/* Phones. Form fields need 16px text or an iPhone zooms the whole page in
   when one is tapped, and stays zoomed. Small buttons, links and the
   disclosure lines ("Add a staff member") get at least 24px to tap, the
   WCAG 2.2 minimum. */
@media (max-width: 760px) {
  input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea { font-size: 16px !important; }
  .v3-table th button { min-height: 32px; min-width: 32px; }
  .v3-link-btn { display: inline-flex; align-items: center; min-height: 32px; }
  details > summary { padding: 8px 0; }
}

[hidden] { display: none !important; }