/* ── MNY Logic App Styles ── Institutional dark theme inspired by
   Introspect & Heal — navy palette, glass morphism, gradient accents.
   Gold preserved as secondary brand accent. */

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

/* Clickable ticker symbol — applied via [data-ticker] global handler. */
[data-ticker] {
  cursor: pointer;
  color: var(--blue);
  text-decoration: none;
  transition: color .15s, text-decoration-color .15s;
  text-decoration-color: transparent;
  font-weight: 600;
}
[data-ticker]:hover {
  color: var(--blue-bright);
  text-decoration: underline;
  text-decoration-color: var(--blue-bright);
  text-underline-offset: 2px;
}
[data-ticker]:active { color: var(--blue-d); }

/* ══════════════════════════════════════════════════════════════════════
   DUAL-THEME SYSTEM — Daylight (default, light) + Twilight (data-theme="dark")
   ══════════════════════════════════════════════════════════════════════
   Daylight is the new default per Direction-3 redesign. Twilight is the
   prior dark theme, available via header sun/moon toggle (persisted to
   localStorage as "mny-theme").

   Architecture:
     • Tokens that DON'T change between themes (radii, type, layout) live
       in :root once.
     • Tokens that DO change have separate values in :root (light) and
       [data-theme="dark"] (dark).
     • All legacy variable names (--bg, --bg2, --text, --line, etc.) are
       preserved with theme-appropriate values so existing CSS works
       unchanged. New abstraction tokens (--surface-*, --shadow-*, etc.)
       layer on top for the polished components.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── INVARIANTS (theme-independent) ── */
  --sidebar-w: 232px;
  --header-h: 60px;

  /* Radius scale (Polish #2) */
  --radius-sm: 6px;     /* chips, badges, dots */
  --radius:    10px;    /* legacy alias / inputs / buttons */
  --radius-md: 10px;
  --radius-lg: 14px;    /* cards */
  --radius-xl: 20px;    /* hero panels / modals */

  /* Type ramp (Polish #1) — paired weights/tracking */
  --fz-xxs:  10px;      /* uppercase chips, timestamps */
  --fz-xs:   11px;      /* small labels */
  --fz-sm:   12px;      /* table cells, secondary */
  --fz-md:   13px;      /* body default */
  --fz-lg:   14px;      /* card titles */
  --fz-xl:   18px;      /* large numbers in cards */
  --fz-2xl:  22px;      /* KPI values */
  --fz-3xl:  28px;      /* page titles */
  --fz-hero: 36px;      /* billing prices, KPI hero */

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:   0.06em;

  --font-mono: 'JetBrains Mono','SF Mono',Menlo,monospace;
  --font-sans: 'Inter','SF Pro Display',-apple-system,BlinkMacSystemFont,sans-serif;

  /* ── DAYLIGHT PALETTE (light theme — default) ── */

  /* Brand gold — slightly deeper for legibility on white */
  --gold: #c08800;
  --gold-bright: #e09e08;
  --gold-dim: #8a6200;
  --gold-deep: #6c4d00;
  --gold-bg: rgba(192,136,0,0.10);
  --gold-bg-strong: rgba(192,136,0,0.20);

  /* Surfaces — paper white base, gentle warm wash, subtle elevation */
  --bg:  #fafbfc;       /* page background */
  --bg2: #ffffff;       /* cards float over page */
  --bg3: #f1f4f9;       /* recessed / hover */
  --bg4: #e6ebf3;       /* deeper recess */
  --bg-0: #fafbfc;  --bg-1: #ffffff;  --bg-2: #f1f4f9;  --bg-3: #e6ebf3;
  --line:   #e3e8f0;    /* hairline borders */
  --line-2: #c8d2e1;    /* prominent borders */
  --border: #e3e8f0;  --border2: #c8d2e1;

  /* Text — deep navy ink on cream */
  --text:       #0d1729;   /* primary */
  --text-soft:  #2a3550;
  --text-muted: #5b6b8c;
  --text-dim:   #8390ad;
  --txt-0: #0d1729;  --txt-1: #2a3550;  --txt-2: #5b6b8c;

  /* Semantic accents — DARKER on light bg for legibility (WCAG AA) */
  --green: #0a8f5e;  --green-d: #0a8f5e;  --green-bright: #15b07e;  --green-bg: rgba(10,143,94,.10);
  --red:   #d12849;  --red-d:   #b81f3d;  --red-bright:   #e64461;  --red-bg:   rgba(209,40,73,.10);
  --blue:  #1a6fd5;  --blue-d:  #1357ab;  --blue-bright:  #3389ea;  --blue-bg:  rgba(26,111,213,.10);
  --purple:#7c46d8;  --purple-d:#5e30b0;  --purple-bright:#8b56e6;  --purple-bg:rgba(124,70,216,.10);
  --warn:  #d97706;  --warn-bright: #ea8a1f;  --warn-bg: rgba(217,119,6,.10);

  /* New: surface abstraction tokens (use these in new components) */
  --surface-page:     #fafbfc;
  --surface-card:     #ffffff;
  --surface-elevated: #ffffff;
  --surface-recessed: #f1f4f9;
  --surface-hover:    #f5f7fb;

  /* Real shadow system (Polish #3) — light theme */
  --shadow-1: 0 1px 2px rgba(13,23,41,.05);
  --shadow-2: 0 1px 3px rgba(13,23,41,.06), 0 1px 2px rgba(13,23,41,.04);
  --shadow-3: 0 4px 12px rgba(13,23,41,.08), 0 2px 4px rgba(13,23,41,.04);
  --shadow-4: 0 12px 32px rgba(13,23,41,.16);

  /* Gradients — keep brand identity, slightly toned for light bg */
  --grad-brand:  linear-gradient(135deg,#1a6fd5 0%,#7c46d8 55%,#c08800 100%);
  --grad-blue:   linear-gradient(135deg,#1357ab,#1a6fd5);
  --grad-purple: linear-gradient(135deg,#5e30b0,#7c46d8);
  --grad-gold:   linear-gradient(135deg,#a87600,#e09e08);
  --grad-success:linear-gradient(135deg,#0a8f5e,#15b07e);
  --grad-danger: linear-gradient(135deg,#b81f3d,#d12849);
  --grad-warn:   linear-gradient(135deg,#b86106,#d97706);
  --grad-cool:   linear-gradient(135deg,#f1f4f9 0%,#fafbfc 100%);

  /* Glows — much subtler in light mode (rings instead of bloom) */
  --glow-blue:   0 0 0 3px rgba(26,111,213,.12);
  --glow-purple: 0 0 0 3px rgba(124,70,216,.12);
  --glow-green:  0 0 0 3px rgba(10,143,94,.12);
  --glow-red:    0 0 0 3px rgba(209,40,73,.12);
  --glow-gold:   0 0 0 3px rgba(192,136,0,.14);

  /* Sun/moon toggle button surface */
  --theme-tg-bg: #ffffff;
  --theme-tg-border: #c8d2e1;

  color-scheme: light;
}

/* ── TWILIGHT PALETTE (dark theme — opt-in via toggle) ── */
[data-theme="dark"] {
  --gold: #f5b81f;
  --gold-bright: #ffcf3c;
  --gold-dim: #c08800;
  --gold-deep: #8C6B0E;
  --gold-bg: rgba(245,184,31,.13);
  --gold-bg-strong: rgba(245,184,31,.22);

  --bg:  #080d18;
  --bg2: #0e1426;
  --bg3: #131a30;
  --bg4: #1a2340;
  --bg-0: #080d18;  --bg-1: #0e1426;  --bg-2: #131a30;  --bg-3: #1a2340;
  --line:   #233055;
  --line-2: #344680;
  --border: #233055;  --border2: #344680;

  --text:       #f0f5ff;
  --text-soft:  #cfd7ec;
  --text-muted: #97a3c4;
  --text-dim:   #6f7c9d;
  --txt-0: #f0f5ff;  --txt-1: #b7c2e0;  --txt-2: #7c89ad;

  --green: #2ee8a8;  --green-d: #15b07e;  --green-bright: #62ffc4;  --green-bg: rgba(46,232,168,.15);
  --red:   #ff6b8a;  --red-d:   #d83a5e;  --red-bright:   #ff8aa2;  --red-bg:   rgba(255,107,138,.14);
  --blue:  #5cb6ff;  --blue-d:  #2a78d4;  --blue-bright:  #8ed1ff;  --blue-bg:  rgba(92,182,255,.14);
  --purple:#c08aff;  --purple-d:#8049dc;  --purple-bright:#d6abff;  --purple-bg:rgba(192,138,255,.14);
  --warn:  #ffb547;  --warn-bright: #ffcb73;  --warn-bg: rgba(255,181,71,.14);

  --surface-page:     #080d18;
  --surface-card:     rgba(20,28,48,0.62);
  --surface-elevated: rgba(20,28,48,0.92);
  --surface-recessed: rgba(10,15,28,0.55);
  --surface-hover:    rgba(74,168,255,0.04);

  --shadow-1: 0 1px 2px rgba(0,0,0,.18);
  --shadow-2: 0 1px 3px rgba(0,0,0,.22), 0 1px 2px rgba(0,0,0,.14);
  --shadow-3: 0 4px 14px rgba(0,0,0,.32), 0 2px 4px rgba(0,0,0,.18);
  --shadow-4: 0 12px 36px rgba(0,0,0,.50);

  --grad-brand:  linear-gradient(135deg,#5cb6ff 0%,#c08aff 55%,#ffcf3c 100%);
  --grad-blue:   linear-gradient(135deg,#2a78d4,#5cb6ff);
  --grad-purple: linear-gradient(135deg,#8049dc,#c08aff);
  --grad-gold:   linear-gradient(135deg,#c08800,#ffcf3c);
  --grad-success:linear-gradient(135deg,#15b07e,#2ee8a8);
  --grad-danger: linear-gradient(135deg,#d83a5e,#ff6b8a);
  --grad-warn:   linear-gradient(135deg,#e89930,#ffcb73);
  --grad-cool:   linear-gradient(135deg,#1a2340 0%,#0e1426 100%);

  --glow-blue:   0 0 24px rgba(92,182,255,0.20);
  --glow-purple: 0 0 24px rgba(192,138,255,0.20);
  --glow-green:  0 0 24px rgba(46,232,168,0.20);
  --glow-red:    0 0 24px rgba(255,107,138,0.20);
  --glow-gold:   0 0 24px rgba(245,184,31,0.22);

  --theme-tg-bg: rgba(20,28,48,0.7);
  --theme-tg-border: #344680;

  color-scheme: dark;
}

* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; }
body {
  font-family: var(--font-sans);
  color:var(--text);
  font-size: var(--fz-md);
  font-feature-settings: "tnum"; /* Polish #4 — tabular numbers globally */
  /* Daylight: warm cream wash so the page feels sun-lit, not sterile.
     Gold + soft coral + light sky blue at low opacity. */
  background:
    radial-gradient(1100px 600px at 85% -8%,  rgba(255,217,140,0.18), transparent 55%),
    radial-gradient( 950px 520px at -8% 105%, rgba(255,180,180,0.10), transparent 55%),
    radial-gradient( 700px 400px at 50% 50%,  rgba(180,210,250,0.08), transparent 65%),
    var(--bg);
  background-attachment: fixed;
}
/* Twilight (dark): keep prior vivid radials with brand colors. */
[data-theme="dark"] body {
  background:
    radial-gradient(1100px 600px at 85% -8%,  rgba(92,182,255,0.11), transparent 55%),
    radial-gradient( 950px 520px at -8% 105%, rgba(192,138,255,0.10), transparent 55%),
    radial-gradient( 700px 400px at 50% 50%,  rgba(46,232,168,0.04), transparent 65%),
    var(--bg);
  background-attachment: fixed;
}
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
input,select,textarea { font-family:inherit; font-size:13px; color:var(--text); }
.gold { color:var(--gold); } .green { color:var(--green); } .red { color:var(--red); }
.blue { color:var(--blue); } .purple { color:var(--purple); }
.mono { font-family:'JetBrains Mono','SF Mono',Menlo,monospace; font-feature-settings:"tnum"; }
.mt { margin-top:16px; }

/* ══════════════════════════════════════════════════════════
   Introspect-inspired utilities — glass, ring-glow, gradient,
   pulse-dot, scrollbars, badges, tags, semantic buttons.
   Available everywhere via existing markup or new components.
   ══════════════════════════════════════════════════════════ */

.glass {
  background: var(--surface-card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
}
[data-theme="dark"] .glass {
  background: linear-gradient(180deg, rgba(20,28,48,0.7), rgba(15,21,37,0.7));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: none;
}
.glass-hover { transition:border-color .15s, transform .15s, box-shadow .2s; }
.glass-hover:hover { border-color: var(--line-2); box-shadow: var(--shadow-3); }
[data-theme="dark"] .glass-hover:hover { box-shadow: none; }

.gradient-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.gradient-blue {
  background: var(--grad-blue);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.pulse-dot { position:relative; }
.pulse-dot::after {
  content:""; position:absolute; inset:0; border-radius:9999px;
  animation: pulse-ring 2s infinite;
}
@keyframes pulse-ring {
  0%   { box-shadow:0 0 0 0 rgba(34,211,154,0.55); }
  70%  { box-shadow:0 0 0 10px rgba(34,211,154,0); }
  100% { box-shadow:0 0 0 0 rgba(34,211,154,0); }
}

.ring-glow-green  { box-shadow:0 0 20px rgba(34,211,154,0.20),  inset 0 0 20px rgba(34,211,154,0.06); }
.ring-glow-red    { box-shadow:0 0 20px rgba(255,85,119,0.20),  inset 0 0 20px rgba(255,85,119,0.06); }
.ring-glow-blue   { box-shadow:0 0 20px rgba(74,168,255,0.20),  inset 0 0 20px rgba(74,168,255,0.06); }
.ring-glow-gold   { box-shadow:0 0 20px rgba(255,200,87,0.22),  inset 0 0 20px rgba(255,200,87,0.06); }
.ring-glow-purple { box-shadow:0 0 20px rgba(176,123,255,0.20), inset 0 0 20px rgba(176,123,255,0.06); }

.scroll-thin::-webkit-scrollbar { width:6px; height:6px; }
.scroll-thin::-webkit-scrollbar-thumb { background: var(--line-2); border-radius:6px; }
.scroll-thin::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius:8px; opacity:.6; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }
::-webkit-scrollbar-track { background:transparent; }

.fadein { animation: fadein .4s ease both; }
@keyframes fadein { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

.tag {
  display:inline-flex; align-items:center;
  font-size:10px; font-weight:600; letter-spacing:.06em;
  padding:3px 8px; border-radius:6px; text-transform:uppercase;
  background: rgba(74,168,255,0.12); color: var(--blue);
}
.tag.tag-green  { background: rgba(34,211,154,0.12);  color: var(--green); }
.tag.tag-red    { background: rgba(255,85,119,0.12);  color: var(--red); }
.tag.tag-gold   { background: rgba(255,200,87,0.12);  color: var(--gold); }
.tag.tag-purple { background: rgba(176,123,255,0.12); color: var(--purple); }

/* Semantic buttons — pair with existing .btn-gold for legacy use. */
.btn-primary {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background: var(--grad-blue); color:#fff;
  padding:9px 18px; border-radius:var(--radius); border:none;
  font-weight:600; font-size:13px; transition:filter .15s, transform .1s;
}
.btn-primary:hover { filter:brightness(1.12); }
.btn-primary:active { transform:translateY(1px); }

.btn-ghost {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background: rgba(74,168,255,0.05); border:1px solid var(--line-2);
  color: var(--text); padding:8px 16px; border-radius:var(--radius);
  font-weight:600; font-size:13px; transition:background .15s, border-color .15s;
}
.btn-ghost:hover { background: rgba(74,168,255,0.10); border-color: var(--blue); }

.btn-success {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background: rgba(34,211,154,0.08); border:1px solid rgba(34,211,154,0.40);
  color:#5ce8b6; padding:8px 16px; border-radius:var(--radius);
  font-weight:600; font-size:13px;
}
.btn-success:hover { background: rgba(34,211,154,0.16); }

.btn-danger {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background: rgba(255,85,119,0.08); border:1px solid rgba(255,85,119,0.40);
  color:#ff8aa3; padding:8px 16px; border-radius:var(--radius);
  font-weight:600; font-size:13px;
}
.btn-danger:hover { background: rgba(255,85,119,0.16); }

.btn-warning {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background: rgba(255,200,87,0.08); border:1px solid rgba(255,200,87,0.40);
  color:#ffd87a; padding:8px 16px; border-radius:var(--radius);
  font-weight:600; font-size:13px;
}
.btn-warning:hover { background: rgba(255,200,87,0.16); }

/* Light grid backdrop, optional */
.grid-bg {
  background-image:
    linear-gradient(rgba(74,168,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,168,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ══ DOTS ══ */
.dot { width:7px;height:7px;border-radius:50%;display:inline-block; }
.dot.green { background:var(--green); box-shadow:0 0 6px var(--green); }
.dot.red   { background:var(--red); box-shadow:0 0 6px var(--red); }
.dot.gold  { background:var(--gold); box-shadow:0 0 6px var(--gold); }
.dot.blue  { background:var(--blue); box-shadow:0 0 6px var(--blue); }

/* ══ OVERLAY / LOGIN ══ */
.overlay { position:fixed;inset:0;background:rgba(13,23,41,.42);z-index:1000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(8px); }
[data-theme="dark"] .overlay { background:rgba(5,7,13,.78); }
.overlay.active { display:flex; }
.login-card {
  background: var(--surface-card);
  border:1px solid var(--line-2);
  border-radius: var(--radius-xl);
  padding:40px 36px;width:100%;max-width:420px;
  box-shadow: var(--shadow-4), 0 0 0 1px rgba(26,111,213,0.06);
}
[data-theme="dark"] .login-card {
  background: linear-gradient(180deg, rgba(20,28,48,0.92), rgba(15,21,37,0.92));
  box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(74,168,255,0.05);
  backdrop-filter:blur(12px);
}
.login-logo { display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;margin-bottom:24px;letter-spacing:3px; }
.login-logo span { font-family: 'Michroma', sans-serif; }
.login-logo strong { font-family: 'Michroma', sans-serif; font-weight:400;
                     background: linear-gradient(135deg, #4aa8ff, #b07bff 60%, #ffc857);
                     -webkit-background-clip:text; background-clip:text; color:transparent; }
.login-card h2 { font-size:24px;font-weight:800;margin-bottom:4px; }
.login-sub { color:var(--text-muted);margin-bottom:24px;font-size:14px; }
.login-foot { margin-top:16px;text-align:center;color:var(--text-muted);font-size:13px; }
.login-foot a { color:var(--gold); }
.form-err { background:var(--red-bg);border:1px solid var(--red);border-radius:6px;padding:10px 14px;color:var(--red);font-size:13px;margin-bottom:16px; }

/* OAuth signup/login buttons */
.oauth-row { display:flex;flex-direction:column;gap:8px;margin-bottom:16px; }
.oauth-btn { display:flex;align-items:center;justify-content:center;gap:10px;padding:11px 16px;border-radius:var(--radius);border:1px solid var(--border2);background:#fff;color:#000;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;width:100%; }
.oauth-btn:hover { transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.3); }
.oauth-btn.apple { background:#000;color:#fff;border-color:#333; }
.oauth-btn.apple:hover { background:#1a1a1a; }
.oauth-divider { position:relative;text-align:center;margin:14px 0;color:var(--text-muted);font-size:11px;text-transform:uppercase;letter-spacing:1px; }
.oauth-divider::before { content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:var(--border2);z-index:0; }
.oauth-divider span { background:var(--bg2);padding:0 12px;position:relative;z-index:1; }

/* Password show/hide toggle */
.pass-wrap { position:relative; }
.pass-wrap input { padding-right:42px !important; }
.pass-toggle { position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted);cursor:pointer;padding:6px 8px;font-size:14px; }
.pass-toggle:hover { color:var(--gold); }

/* ══ FORM ELEMENTS ══ */
.form-group { margin-bottom:16px; }
.form-group label { display:block;font-size:11px;font-weight:600;color:var(--text-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.6px; }
.form-group input, .form-group select { width:100%;background:var(--surface-recessed);border:1px solid var(--line-2);border-radius:var(--radius);padding:11px 14px;color:var(--text);outline:none;transition:border-color .2s, box-shadow .2s; }
.form-group input::placeholder { color:var(--text-dim); }
.form-group input:focus, .form-group select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(74,168,255,0.12); }

/* ══ BUTTONS ══ */
.btn-gold {
  display:inline-flex;align-items:center;gap:6px;justify-content:center;
  background:var(--grad-gold);color:#15192b;padding:9px 18px;border-radius:var(--radius);
  font-weight:700;font-size:13px;border:none;
  transition:filter .15s, transform .1s, box-shadow .2s;
  letter-spacing:.2px;
  box-shadow:0 2px 10px rgba(245,184,31,0.20);
}
.btn-gold:hover { filter:brightness(1.10); box-shadow:0 4px 16px rgba(245,184,31,0.32); transform:translateY(-1px); }
.btn-gold:active { transform:translateY(1px); }
.btn-sm { padding:7px 14px;font-size:12px; }
.w-full { width:100%; }
.btn-ghost-sm { background:none;border:none;color:var(--text-muted);font-size:12px;font-weight:600;padding:6px 10px;border-radius:6px; transition:color .15s, background .15s; }
.btn-ghost-sm:hover { color:var(--text);background:rgba(92,182,255,0.12); }
.btn-outline-sm2 { background:rgba(92,182,255,0.06);border:1px solid var(--line-2);color:var(--text);padding:7px 14px;border-radius:var(--radius);font-size:12px;font-weight:600;transition:all .15s; }
.btn-outline-sm2:hover { border-color:var(--blue);color:var(--blue-bright);background:rgba(92,182,255,0.14); box-shadow:0 0 12px rgba(92,182,255,0.18); }

/* ══ TOGGLE SWITCH ══ */
/* `flex:none` is critical — when a .toggle-switch lives inside a flex row
   that styles its child labels with `flex:1` (e.g. .sf-row), the toggle
   would otherwise stretch the full row width and read as a giant gradient
   bar instead of a pill. flex:none locks the explicit width. */
.toggle-switch { position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0;flex:none; }
.toggle-switch.sm { width:36px;height:20px;flex:none; }
.toggle-switch input { opacity:0;width:0;height:0; }
.toggle-slider {
  position:absolute;cursor:pointer;inset:0;
  background: var(--bg3);
  border:1px solid var(--line-2);
  border-radius:34px;
  transition:.2s;
  box-shadow: inset 0 1px 2px rgba(13,23,41,.06);
}
[data-theme="dark"] .toggle-slider { box-shadow: none; }
.toggle-slider::before {
  content:'';position:absolute;height:16px;width:16px;left:3px;bottom:3px;
  background:#fff;
  border-radius:50%;transition:.2s;
  box-shadow: 0 1px 2px rgba(13,23,41,.20);
}
[data-theme="dark"] .toggle-slider::before { background:#cbd2e3; box-shadow:none; }
.toggle-switch.sm .toggle-slider::before { height:12px;width:12px; }
input:checked + .toggle-slider { background:var(--grad-blue); border-color:var(--blue); }
input:checked + .toggle-slider::before { transform:translateX(18px); background:#fff; }
.toggle-switch.sm input:checked + .toggle-slider::before { transform:translateX(16px); }

/* ══ APP LAYOUT ══ */
.app-body { overflow:hidden; }
.app-shell { display:flex;height:100vh; }

/* ── SIDEBAR ── Daylight: deep navy anchor like Linear/Notion. Twilight: dark glass. ── */
.sidebar {
  width:var(--sidebar-w);flex-shrink:0;
  background: #0f1729;   /* Daylight: deep navy anchor — visual contrast vs cream page */
  border-right:1px solid #1f2a44;
  display:flex;flex-direction:column;height:100vh;overflow-y:auto;position:relative;z-index:50;
}
[data-theme="dark"] .sidebar {
  background:linear-gradient(180deg, rgba(10,15,28,0.95), rgba(5,7,13,0.95));
  border-right:1px solid var(--line);
  backdrop-filter:blur(8px);
}
.sidebar::-webkit-scrollbar { width:4px; }
.sidebar::-webkit-scrollbar-thumb { background:#2a3550; border-radius:4px; }
[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb { background:var(--line-2); }
.sidebar-logo {
  display:flex;align-items:center;gap:10px;
  padding:18px 18px;font-size:11px;font-weight:400;
  border-bottom:1px solid #1f2a44;
  background:linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
  letter-spacing:2.5px;
}
[data-theme="dark"] .sidebar-logo {
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(20,28,48,0.6), transparent);
}
/* Sidebar text color — anchor's deep navy means the inner text stays
   bright in BOTH themes, so we override sidebar-only text inside .sidebar */
.sidebar .nav-item { color: #97a3c4; }
.sidebar .nav-item:hover { background: rgba(92,182,255,0.10); color: #f0f5ff; }
.sidebar .nav-item.active { color: #f0f5ff; }
.sidebar .nav-icon { color: #6f7c9d; }
.sidebar .nav-item:hover .nav-icon { color: #cfd7ec; }
.sidebar .nav-item.active .nav-icon { color: #8ed1ff; }
.sidebar-brand { font-family:'Michroma', sans-serif; color:#e8edf7; }
.sidebar-brand strong {
  font-family:'Michroma', sans-serif; font-weight:400;
  /* Sidebar always has dark anchor — keep bright gradient regardless of theme */
  background: linear-gradient(135deg, #5cb6ff, #c08aff 60%, #ffcf3c);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-left:6px;
}
.sidebar-nav { flex:1;padding:14px 10px;display:flex;flex-direction:column;gap:1px; }
.nav-item {
  display:flex;align-items:center;gap:11px;padding:10px 14px;border-radius:8px;
  color:var(--text-muted);font-size:13px;font-weight:500;border:none;background:none;width:100%;text-align:left;
  transition:background .15s,color .15s;position:relative;
}
.nav-item:hover { background:rgba(92,182,255,0.10); color:var(--text); }
.nav-item.active {
  background:linear-gradient(90deg, rgba(92,182,255,0.22), rgba(192,138,255,0.06) 60%, transparent);
  color:var(--text); font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(92,182,255,0.10);
}
.nav-item.active::before {
  content:'';position:absolute;left:0;top:4px;bottom:4px;width:3px;
  background:var(--grad-blue);border-radius:0 3px 3px 0;
  box-shadow:0 0 12px var(--blue-bright);
}
.nav-item.active .nav-icon { color:var(--blue-bright); }
.nav-icon { width:16px;height:16px;flex-shrink:0;color:var(--text-dim); transition:color .15s; }
.nav-item:hover .nav-icon { color:var(--text-soft); }
.logout-btn { margin:6px 10px 10px;color:var(--text-muted); }
.logout-btn:hover { color:var(--red);background:rgba(255,85,119,0.08); }
.logout-btn:hover .nav-icon { color:var(--red); }

.sidebar-upgrade {
  margin:12px 12px;
  background:linear-gradient(135deg, rgba(176,123,255,0.16), rgba(74,168,255,0.05));
  border:1px solid rgba(176,123,255,.3);
  border-radius:var(--radius-lg);
  padding:16px;text-align:center;
  position:relative; overflow:hidden;
}
.sidebar-upgrade::before {
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  background:linear-gradient(135deg, rgba(176,123,255,0.35), transparent 60%);
  opacity:.4; pointer-events:none;
}
.upgrade-icon { font-size:22px;margin-bottom:6px;filter:drop-shadow(0 0 6px rgba(255,200,87,0.4)); }
.sidebar-upgrade p { font-size:11px;color:var(--text-muted);margin-bottom:10px;line-height:1.4;position:relative; }
.sidebar-upgrade strong {
  background: var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
  display:block; margin-bottom:4px; font-size:13px; font-weight:700;
}

/* ── MAIN WRAPPER ── */
.main-wrapper { flex:1;display:flex;flex-direction:column;overflow:hidden; }

/* ── APP HEADER ── Daylight: clean white with hairline. Twilight: dark glass. ── */
.app-header {
  min-height:var(--header-h);
  background: rgba(255,255,255,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:16px;padding:0 24px;flex-shrink:0;flex-wrap:wrap;
  position:relative; z-index:30;
  box-shadow: var(--shadow-1);
}
[data-theme="dark"] .app-header {
  background:linear-gradient(180deg, rgba(10,15,28,0.85), rgba(10,15,28,0.7));
  box-shadow: none;
}
@media (max-width:900px) {
  .app-header { padding:8px 16px; }
  .header-status .broker-dropdown,
  .header-status .broker-badge { display:none; }
  .hdr-at-toggle .hdr-at-info { display:none; }
}
.sidebar-toggle { display:none;background:none;border:none;color:var(--text-muted); }
.header-status { display:flex;align-items:center;gap:14px;flex:1; }
.market-badge { font-size:11px;font-weight:600;color:var(--green);display:flex;align-items:center;gap:6px;letter-spacing:.3px; }
.market-badge.closed { color:var(--text-muted); }
.broker-badge { display:flex;align-items:center;gap:6px;background:rgba(34,211,154,0.10);border:1px solid rgba(34,211,154,0.30);border-radius:20px;padding:4px 10px;font-size:11px;font-weight:600;color:var(--green); }

/* Broker dropdown in header */
.broker-dropdown { position:relative; }
.broker-dropdown-btn {
  display:flex;align-items:center;gap:8px;
  background:rgba(74,168,255,0.05);border:1px solid var(--line-2);
  color:var(--text);padding:6px 12px;border-radius:var(--radius);font-size:12px;font-weight:600;
  transition:border-color .15s, background .15s;
}
.broker-dropdown-btn:hover { border-color:var(--blue); background:rgba(74,168,255,0.10); }
.broker-dropdown-menu {
  position:absolute;top:calc(100% + 8px);left:0;min-width:240px;
  background: var(--surface-elevated);
  border:1px solid var(--line-2);border-radius:var(--radius);padding:8px;z-index:80;
  box-shadow: var(--shadow-4);
}
[data-theme="dark"] .broker-dropdown-menu {
  background:linear-gradient(180deg, rgba(20,28,48,0.96), rgba(15,21,37,0.96));
  backdrop-filter:blur(10px);
}
.broker-dd-header { font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.6px;padding:6px 10px; font-weight:700; }
.broker-dropdown-menu a { display:block;padding:10px 12px;border-radius:6px;font-size:13px;color:var(--blue); }
.broker-dropdown-menu a:hover { background:rgba(74,168,255,0.08); }
.broker-dd-divider { height:1px;background:var(--line);margin:6px 0; }
.broker-dd-item { display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:6px;cursor:pointer;font-size:12px; }
.broker-dd-item:hover { background:rgba(74,168,255,0.06); }
.broker-dd-item.active { background:rgba(74,168,255,0.12); color:var(--blue); }

.header-right { display:flex;align-items:center;gap:14px; }

/* ── Theme toggle (Direction-3 redesign) ── */
.theme-tg {
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background: var(--theme-tg-bg);
  border:1px solid var(--theme-tg-border);
  color: var(--text-soft);
  cursor:pointer;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
  position:relative; overflow:hidden;
}
.theme-tg:hover { color: var(--gold); border-color: var(--gold); transform: rotate(15deg); }
.theme-tg svg { width:16px;height:16px; }
.theme-tg .sun  { display:inline-block; }
.theme-tg .moon { display:none; }
[data-theme="dark"] .theme-tg .sun  { display:none; }
[data-theme="dark"] .theme-tg .moon { display:inline-block; }
@media (max-width:600px) { .theme-tg { display:none; } }

/* ── Capital Exposure & Wipeout Risk Dashboard panel ── */
.risk-exposure-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:18px; }
.risk-exp-card { background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:16px;display:flex;flex-direction:column;gap:8px;position:relative; }
.risk-exp-card.warn { border-left:3px solid var(--red); }
.risk-exp-card.good { border-left:3px solid var(--green); }
.rec-label { font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700; }
.rec-value { font-size:26px;font-weight:900;letter-spacing:-.3px; }
.rec-bar { height:6px;background:var(--bg);border-radius:3px;overflow:hidden;margin-top:4px; }
.rec-bar-fill { height:100%;border-radius:3px;transition:width .3s; }
.rec-sub { display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted);margin-top:6px; }
.rec-sub strong { color:var(--text);margin-left:4px; }
.rec-pct { font-size:11px;color:var(--text-muted);font-weight:700; }
.rec-explainer { font-size:10px;color:var(--text-muted);font-style:italic;line-height:1.4;margin-top:4px;border-top:1px solid var(--border);padding-top:6px; }

/* AutoTrader status split */
.autotrader-split { display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 18px 12px; }

/* Active Guardrails card */
.guardrails-card { margin:0 18px 18px;background:linear-gradient(180deg,rgba(34,197,94,.04),rgba(212,160,21,.04));border:1px solid rgba(34,197,94,.2);border-radius:8px;padding:16px 18px; }
.gc-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:8px; }
.gc-title { font-size:13px;font-weight:700; }
.gc-intro { font-size:11px;color:var(--text-muted);margin-bottom:14px;line-height:1.5; }
.guardrails-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:10px; }
.gr-item { background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:10px 12px; }
.gr-label { font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px;font-weight:700;margin-bottom:4px; }
.gr-value { font-size:18px;font-weight:800;letter-spacing:-.3px;margin-bottom:4px; }
.gr-desc { font-size:10px;color:var(--text-muted);line-height:1.45; }
.gr-desc span { color:var(--text);font-weight:700; }
@media (max-width:1100px) {
  .guardrails-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:768px) {
  .guardrails-grid { grid-template-columns:1fr; }
}
.ats-row { display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--bg3);border:1px solid var(--border);border-radius:6px; }
.ats-icon { font-size:20px;flex-shrink:0; }
.ats-info { flex:1;display:flex;flex-direction:column;line-height:1.3; }
.ats-info strong { font-size:12px; }
.ats-info span { font-size:10px;color:var(--text-muted); }

@media (max-width:1100px) {
  .risk-exposure-grid, .autotrader-split { grid-template-columns:1fr; }
}

/* ── Strategy Realignment alert banner (above header) ── */
.realign-banner {
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(90deg, rgba(239,68,68,.18), rgba(212,160,21,.18));
  border-bottom:1px solid var(--red);
  padding:12px 24px;
  animation:pulse-bg 2.4s ease-in-out infinite;
}
@keyframes pulse-bg {
  0%,100% { background:linear-gradient(90deg, rgba(239,68,68,.18), rgba(212,160,21,.18)); }
  50%     { background:linear-gradient(90deg, rgba(239,68,68,.30), rgba(212,160,21,.30)); }
}
.rb-icon { font-size:24px; }
.rb-text { flex:1;display:flex;flex-direction:column;line-height:1.3; }
.rb-text strong { font-size:13px;color:#fff; }
.rb-text span { font-size:11px;color:rgba(255,255,255,.75); }

/* Realignment review modal */
.realign-section { margin-bottom:18px; }
.realign-section h4 { font-size:13px;font-weight:700;margin-bottom:8px;color:var(--gold); }
#rm-losses-table table { width:100%;border-collapse:collapse;font-size:12px;background:var(--bg3);border-radius:6px;overflow:hidden; }
#rm-losses-table th { padding:8px 12px;text-align:left;font-size:10px;color:var(--text-muted);text-transform:uppercase;background:var(--bg);border-bottom:1px solid var(--border); }
#rm-losses-table td { padding:9px 12px;border-bottom:1px solid var(--border); }
#rm-losses-table tr:last-child td { border-bottom:none; }
#rm-recs-list { display:flex;flex-direction:column;gap:6px;max-height:240px;overflow-y:auto; }
.rm-rec-item { display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:9px 12px;background:var(--bg3);border-radius:6px;border-left:3px solid var(--gold);font-size:12px; }
.rm-rec-info strong { font-weight:800; }
.rm-rec-info span { color:var(--text-muted);font-size:11px;margin-left:6px; }
.rm-rec-mtcs { color:var(--gold);font-weight:800; }
.rm-rec-actions { display:flex;gap:4px; }
.rm-rec-actions button { padding:4px 10px;font-size:10px;border-radius:4px;border:1px solid var(--border2);background:none;color:var(--text-muted);cursor:pointer; }
.rm-rec-actions button.accept { color:var(--green);border-color:rgba(34,197,94,.3); }
.rm-rec-actions button.accept:hover { background:rgba(34,197,94,.12); }
.rm-rec-actions button.ignore:hover { background:var(--bg2); }
.rm-rec-actions button.acted { background:var(--bg);color:var(--text-muted);cursor:default; }
.rm-settings-grid { display:flex;flex-direction:column;gap:10px; }
.rm-set-row { display:grid;grid-template-columns:200px 100px 1fr;gap:10px;align-items:center;font-size:12px; }
.rm-set-row input { background:var(--bg3);border:1px solid var(--border2);border-radius:4px;padding:6px 8px;color:var(--text);outline:none;text-align:right;font-size:12px; }
.rm-set-row input:focus { border-color:var(--gold); }
.rm-hint { color:var(--text-muted);font-size:10px; }

/* ── Header live-tape strip (SPY / QQQ / VIX / 10Y) ── */
.hdr-tape {
  display:flex; align-items:center; gap:8px; flex-wrap:nowrap;
  padding:0 6px; min-height:32px;
}
.hdr-tape-pill {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(74,168,255,0.04);
  border:1px solid var(--line);
  border-radius:18px;
  padding:4px 10px; font-size:11px; line-height:1; white-space:nowrap;
}
.hdr-tape-sym  { color:var(--text-dim); font-weight:700; letter-spacing:.4px; }
.hdr-tape-val  { font-weight:600; color:var(--text-soft); }
.hdr-tape-pill.up   .hdr-tape-val { color:var(--green); }
.hdr-tape-pill.down .hdr-tape-val { color:var(--red); }
@media (max-width:1100px) {
  .hdr-tape-pill[data-symbol="10Y"], .hdr-tape-pill[data-symbol="VIX"] { display:none; }
}
@media (max-width:900px) { .hdr-tape { display:none; } }

/* ── Header AutoTrader toggle ── */
.hdr-at-toggle {
  display:flex;align-items:center;gap:10px;padding:6px 14px;
  background:var(--bg3);border:1px solid var(--border2);border-radius:30px;
  transition:border-color .15s, background .15s;
}
.hdr-at-toggle.on { border-color:rgba(34,197,94,.4); background:rgba(34,197,94,.08); }
.hdr-at-dot { width:8px;height:8px;border-radius:50%;background:var(--text-muted);transition:background .15s,box-shadow .15s; }
.hdr-at-dot.on { background:var(--green);box-shadow:0 0 8px var(--green); }
.hdr-at-info { display:flex;flex-direction:column;gap:0;line-height:1.2; }
.hdr-at-label { font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700; }
.hdr-at-status { font-size:11px;font-weight:700;color:var(--text-muted); }
.hdr-at-toggle.on .hdr-at-status { color:var(--green); }
.hdr-at-locked {
  display:flex;align-items:center;gap:8px;padding:6px 14px;
  background:var(--gold-bg);border:1px solid rgba(212,160,21,.3);border-radius:30px;
  font-size:12px;font-weight:600;color:var(--gold);cursor:pointer;
}
.hdr-at-locked:hover { background:var(--gold-bg-strong); }
.hdr-at-locked strong { font-weight:800; }
.account-value { display:flex;flex-direction:column;align-items:flex-end; }
.av-label { font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px; }
.av-num { font-size:17px;font-weight:800;color:var(--gold); }

.header-avatar-dd { position:relative; }
.header-avatar { width:34px;height:34px;background:var(--gold-bg);border:1.5px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--gold);cursor:pointer; }
.avatar-menu { position:absolute;top:calc(100% + 8px);right:0;min-width:220px;background:var(--surface-elevated);border:1px solid var(--border2);border-radius:var(--radius);padding:8px;z-index:80;box-shadow: var(--shadow-4); }
.avatar-menu a { display:block;padding:10px 12px;border-radius:6px;font-size:13px; }
.avatar-menu a:hover { background:var(--bg3); }
.avatar-menu .am-red { color:var(--red); }
.am-header { padding:10px 12px;border-bottom:1px solid var(--border);margin-bottom:6px; }
.am-name { font-weight:700;font-size:13px; }
.am-email { font-size:11px;color:var(--text-muted); }
.am-divider { height:1px;background:var(--border);margin:6px 0; }

/* ── PAGE CONTENT ── */
.page-content { flex:1;overflow-y:auto;padding:26px 28px; }
.page { display:none; }
.page.active { display:block; animation:fadein .35s ease both; }

/* ── PAGE HEADER ── */
.page-header { display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px;gap:16px; }
.page-title {
  font-size: var(--fz-3xl);
  font-weight:800;
  letter-spacing: var(--tracking-tight);
  /* Daylight: deep navy + brand-color gradient sweep on the right.
     Reads as solid navy at a glance, gradient adds personality on closer look. */
  background: linear-gradient(125deg, var(--text) 0%, var(--text) 35%, var(--blue) 65%, var(--purple) 88%, var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
[data-theme="dark"] .page-title {
  background: linear-gradient(125deg, #f0f5ff 0%, #f0f5ff 25%, var(--blue-bright) 60%, var(--purple-bright) 90%, var(--gold-bright) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 12px rgba(92,182,255,0.15));
}
.page-sub { font-size:13px;color:var(--text-muted);margin-top:6px; }
.page-header-right { display:flex;align-items:center;gap:14px; }
.at-mini-toggle { display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--radius); }

/* Scan status meta widget — sits next to Run Scan button */
.scan-status-meta { display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:0 12px;font-size:11px; }
.ssm-row { display:flex;align-items:center;gap:6px;font-weight:700; }
.ssm-dot { width:8px;height:8px;border-radius:50%;background:var(--text-muted); }
.ssm-dot.idle { background:var(--text-muted); }
.ssm-dot.running { background:var(--gold);box-shadow:0 0 8px var(--gold);animation:pulse 1.4s infinite; }
.ssm-dot.complete { background:var(--green);box-shadow:0 0 6px var(--green); }
.ssm-dot.error { background:var(--red);box-shadow:0 0 6px var(--red); }
.ssm-sub { color:var(--text-muted);font-size:10px; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }

/* Options selection criteria cards */
.opts-criteria-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:18px; }
.oc-card { background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px; }
.oc-head { display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:13px; }
.oc-rank { background:var(--gold);color:#000;font-weight:800;font-size:11px;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0; }
.oc-head strong { flex:1; }
.oc-weight { font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-weight:700; }
.oc-body { font-size:12px;color:var(--text-soft);line-height:1.6; }
.oc-body p { margin-bottom:8px; }
.oc-body p:last-child { margin-bottom:0; }
.oc-body ul { margin:6px 0;padding-left:18px; }
.oc-body li { margin-bottom:5px;color:var(--text-soft); }
.oc-body em { color:var(--text-muted);font-size:11px;font-style:normal; }
.oc-body strong { color:var(--text); }
.oc-body code { background:var(--bg);padding:2px 5px;border-radius:3px;font-size:11px;color:var(--gold); }
.oc-criteria { display:flex;flex-direction:column;gap:8px;margin-top:6px; }
.oc-criteria > div { display:grid;grid-template-columns:auto auto 1fr;gap:6px 12px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--border); }
.oc-criteria > div:last-child { border-bottom:none; }
.oc-criteria > div > strong { font-size:12px; }
.oc-criteria > div > span { color:var(--gold);font-weight:800;font-size:12px; }
.oc-criteria > div > em { font-size:11px;color:var(--text-muted);font-style:normal;text-align:right; }
@media (max-width:1100px) { .opts-criteria-grid { grid-template-columns:1fr; } }

/* Funnel chart */
.funnel-stage { display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;padding:8px 0;border-bottom:1px solid var(--border); }
.funnel-stage:last-child { border-bottom:none; }
.funnel-stage-meta { display:flex;flex-direction:column;gap:2px;min-width:0; }
.funnel-stage-label { font-size:12px;font-weight:600;display:flex;align-items:center;gap:8px; }
.funnel-stage-bar { height:18px;background:var(--bg3);border-radius:4px;overflow:hidden;width:100%;margin-top:4px;position:relative; }
.funnel-stage-fill { height:100%;border-radius:4px;display:flex;align-items:center;padding:0 8px;color:#000;font-weight:700;font-size:10px;min-width:36px; }
.funnel-stage-numbers { display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex-shrink:0; }
.funnel-count { font-size:18px;font-weight:800;letter-spacing:-.3px; }
.funnel-drop { font-size:10px;color:var(--text-muted); }
.funnel-drop.warn { color:var(--gold); }
.funnel-drop.crit { color:var(--red); }
.at-mini-toggle .lbl { font-size:12px;color:var(--text-muted);font-weight:600; }
.annual-toggle { display:flex;align-items:center;gap:10px;font-size:12px; }
.annual-toggle .gold { font-size:11px;font-weight:700; }

/* ══ CARDS ══ Daylight: clean white with real shadows. Twilight: dark glass. ══ */
.card {
  background: var(--surface-card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-2);
  transition:border-color .15s, box-shadow .2s, transform .15s;
}
.card:hover {
  border-color:var(--line-2);
  box-shadow: var(--shadow-3);
}
[data-theme="dark"] .card {
  background:linear-gradient(180deg, rgba(26,35,64,0.62), rgba(19,26,48,0.62));
  backdrop-filter:blur(10px);
  box-shadow:0 4px 20px rgba(0,0,0,0.18);
}
[data-theme="dark"] .card:hover {
  box-shadow:0 6px 28px rgba(0,0,0,0.22), 0 0 0 1px rgba(92,182,255,0.06) inset;
}
.card-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--line);
  font-size: var(--fz-lg);
  font-weight:600;
  letter-spacing: var(--tracking-snug);
  color:var(--text);
  background: var(--surface-recessed);
}
[data-theme="dark"] .card-header {
  background:linear-gradient(180deg, rgba(26,35,64,0.55), transparent);
}
.card-link { font-size:11px;color:var(--blue);font-weight:600;letter-spacing:.3px; }
.card-link:hover { color:var(--blue-bright); }
.card-footer { padding:12px 18px;border-top:1px solid var(--line);text-align:center; }

/* ══ KPI GRID ══ Polished card design (Polish #5) ══ */
.kpi-grid { display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:22px; }
.kpi-grid.kpi-7 { grid-template-columns:repeat(7,1fr); }
.kpi-card {
  background: var(--surface-card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:16px 18px;
  display:flex;flex-direction:column;gap:4px;
  position:relative; overflow:hidden;
  box-shadow: var(--shadow-2);
  transition:border-color .15s, transform .15s, box-shadow .2s;
}
[data-theme="dark"] .kpi-card {
  background:linear-gradient(180deg, rgba(26,35,64,0.62), rgba(19,26,48,0.62));
  backdrop-filter:blur(10px);
  box-shadow:0 4px 16px rgba(0,0,0,0.15);
}
.kpi-card::before {
  /* Subtle top-edge accent stripe — gives every KPI card a hint of color */
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--grad-brand); opacity:0.55;
}
.kpi-card:hover {
  border-color:var(--line-2);
  transform:translateY(-1px);
  box-shadow: var(--shadow-3);
}
[data-theme="dark"] .kpi-card:hover {
  box-shadow:0 8px 24px rgba(0,0,0,0.22);
}
.kpi-card.green-border { border-color:rgba(46,232,168,.40); box-shadow:var(--glow-green); }
.kpi-card.green-border::before { background:var(--grad-success); opacity:1; }
.kpi-card.red-border   { border-color:rgba(255,107,138,.40); box-shadow:var(--glow-red); }
.kpi-card.red-border::before   { background:var(--grad-danger); opacity:1; }
.kpi-card.blue-border  { border-color:rgba(92,182,255,.40);  box-shadow:var(--glow-blue); }
.kpi-card.blue-border::before  { background:var(--grad-blue); opacity:1; }
.kpi-card.gold-border  { border-color:rgba(245,184,31,.45);  box-shadow:var(--glow-gold); }
.kpi-card.gold-border::before  { background:var(--grad-gold); opacity:1; }
.kpi-label { font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.7px;font-weight:600; }
.kpi-value {
  font-size:22px;font-weight:700;letter-spacing:-.4px;color:var(--text);
  font-family:'JetBrains Mono','SF Mono',Menlo,monospace;
  font-feature-settings:"tnum";
}
.kpi-sub { font-size:11px;color:var(--text-dim); }

/* ══ TWO-COLUMN LAYOUT ══ */
.two-col { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
.three-col { display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px; }
.col-left { display:flex;flex-direction:column;gap:16px; }
.col-right { display:flex;flex-direction:column;gap:16px; }
.col-left-wide { display:flex;flex-direction:column;gap:16px; }
.col-right-narrow { display:flex;flex-direction:column;gap:16px;max-width:340px; }

/* ══ STOCKS / OPTIONS LAYOUT ══ */
.two-col-stocks { display:grid;grid-template-columns:1fr 320px;gap:16px;margin-top:16px; }
.col-stocks-main { display:flex;flex-direction:column;gap:0; }
.col-stocks-side { display:flex;flex-direction:column;gap:14px; }

/* ══ POSITIONS LAYOUT ══ */
.two-col-positions { display:grid;grid-template-columns:1fr 360px;gap:16px;margin-top:16px; }
.col-pos-main { display:flex;flex-direction:column;gap:0; }
.col-pos-side { display:flex;flex-direction:column;gap:14px; }

/* ══ ALERTS LAYOUT ══ */
.two-col-alerts { display:grid;grid-template-columns:1fr 340px;gap:16px;margin-top:16px; }
.col-alerts-main { display:flex;flex-direction:column;gap:0; }
.col-alerts-side { display:flex;flex-direction:column;gap:14px; }

/* ══ TABLES ══ */
.table-scroll { overflow-x:auto; }
.data-table {
  width:100%;border-collapse:collapse;
  font-size: var(--fz-sm);
  font-variant-numeric: tabular-nums; /* Polish #4 — number alignment */
}
.data-table th {
  padding:12px 14px;text-align:left;
  font-size: var(--fz-xxs);
  font-weight:700;text-transform:uppercase;
  letter-spacing: var(--tracking-wide);
  color:var(--text-muted);
  border-bottom:1px solid var(--line);white-space:nowrap;
  background: var(--surface-recessed);
}
.data-table td {
  padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle;
  color:var(--text-soft);
}
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background: var(--surface-hover); }
[data-theme="dark"] .data-table tr:hover td { background: rgba(74,168,255,.04); }
.empty-row { text-align:center;color:var(--text-muted);padding:40px!important; }
.tab-count { background:rgba(74,168,255,0.12);color:var(--blue);font-size:10px;padding:2px 7px;border-radius:10px;margin-left:6px;font-weight:700; }

/* ══ FILTER ROW (Stocks/Options) ══ */
.filter-row {
  display:flex;align-items:flex-end;gap:12px;padding:14px 16px;
  background: var(--surface-card);
  border:1px solid var(--line);border-radius:var(--radius-lg);margin-bottom:16px;flex-wrap:wrap;
  backdrop-filter:blur(6px);
}
.filter-cell { display:flex;flex-direction:column;gap:6px; }
.fc-label { font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.6px;font-weight:600; }
.input-md, .select-md { background:var(--surface-recessed);border:1px solid var(--line-2);border-radius:var(--radius);padding:7px 10px;color:var(--text);font-size:12px;min-width:130px;outline:none;transition:border-color .15s, box-shadow .15s; }
.input-md:focus, .select-md:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(74,168,255,0.10); }

/* ══ SCAN KPIs ══ */
.scan-kpis { display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px; }
.scan-kpi {
  background: var(--surface-card);
  border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:18px 20px;display:flex;flex-direction:column;gap:4px;backdrop-filter:blur(8px);
  transition:border-color .15s, transform .12s, box-shadow .15s;
}
.sk-val {
  font-size:26px;font-weight:700;letter-spacing:-.4px;
  font-family:'JetBrains Mono','SF Mono',Menlo,monospace; font-feature-settings:"tnum";
}
.sk-label { font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.7px;font-weight:600; }
.sk-sub { font-size:10px;color:var(--blue);text-transform:uppercase;letter-spacing:.6px;font-weight:700;margin-top:2px; }
.sk-sub:not(.gold) { color:var(--text-muted); }
.scan-kpi.clickable { cursor:pointer; }
.scan-kpi.clickable:hover { transform:translateY(-2px);border-color:var(--blue); box-shadow:0 0 24px rgba(74,168,255,0.10); }
.scan-kpi.clickable:active { transform:translateY(0); }

/* ══ SCAN PROGRESS ══ */
.scan-progress {
  display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:12px 16px;
  background: var(--surface-card);
  border:1px solid var(--line);border-radius:var(--radius-lg);backdrop-filter:blur(6px);
}
.progress-track {
  position:relative;
  flex:1;height:10px;
  background:var(--surface-recessed);
  border:1px solid var(--line);border-radius:6px;
  overflow:hidden;
}
.progress-fill {
  position:relative;
  height:100%;
  /* Gradient stripe — gold/teal flowing left → right */
  background: linear-gradient(90deg,
    rgba(74,168,255,0.85)   0%,
    rgba(99,102,241,0.95)  35%,
    rgba(212,160,21,1.00)  70%,
    rgba(34,211,154,0.95) 100%);
  background-size: 200% 100%;
  border-radius:6px;
  width:0%;
  transition: width 0.4s cubic-bezier(.4,0,.2,1);
  box-shadow:
    0 0 12px rgba(212,160,21,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.15);
  animation: progress-gradient-flow 3s linear infinite;
}
@keyframes progress-gradient-flow {
  0%   { background-position:   0% 50%; }
  100% { background-position: 200% 50%; }
}
/* Shimmering overlay — slides across the filled portion to indicate
   the scan is alive even when % isn't changing. */
.progress-fill::after {
  content:"";
  position:absolute; top:0; left:0; right:0; bottom:0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.30) 50%,
    transparent 100%);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  animation: progress-shimmer 1.8s ease-in-out infinite;
}
@keyframes progress-shimmer {
  0%   { background-position:  -60% 0; }
  100% { background-position:  160% 0; }
}
/* Indeterminate state — when we don't know % yet, fill bounces back
   and forth (CSS-only indeterminate progress, no JS poll needed). */
.progress-fill.indeterminate {
  width: 30% !important;
  animation:
    progress-gradient-flow 3s linear infinite,
    progress-indeterminate-slide 1.6s ease-in-out infinite;
}
@keyframes progress-indeterminate-slide {
  0%   { transform: translateX(-110%); }
  50%  { transform: translateX(180%); }
  100% { transform: translateX(-110%); }
}
.progress-pct {
  font-variant-numeric: tabular-nums;
  font-weight:600;
  color: var(--gold);
  min-width: 44px;
  text-align: right;
  font-size: 12px;
}

/* ══ STRATEGY TABS ══ */
.strat-tabs {
  display:flex;gap:4px;margin-bottom:16px;
  background:var(--surface-recessed);border:1px solid var(--line);border-radius:var(--radius-lg);padding:4px;
}
.strat-tab { flex:1;padding:8px 12px;border-radius:8px;border:none;background:none;color:var(--text-muted);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s; }
.strat-tab.active { background:var(--grad-blue);color:#fff; box-shadow:0 4px 12px rgba(74,168,255,0.3); }
.strat-tab:hover:not(.active) { color:var(--text);background:rgba(74,168,255,0.06); }

/* ══ HISTORY TABS ══ */
.hist-tabs { display:flex;gap:0;margin-bottom:16px;border-bottom:1px solid var(--line);overflow-x:auto; }
.hist-tab { padding:10px 18px;border:none;background:none;color:var(--text-muted);font-size:13px;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap; transition:color .15s, border-color .15s; }
.hist-tab.active { color:var(--blue);border-bottom-color:var(--blue); }
.hist-tab:hover:not(.active) { color:var(--text); }

/* ══ FILTER BAR ══ */
.filter-bar { display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap; }
.input-sm { background:var(--surface-recessed);border:1px solid var(--line-2);border-radius:var(--radius);padding:7px 12px;color:var(--text);font-size:12px;outline:none;transition:border-color .15s, box-shadow .15s; }
.input-sm:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(74,168,255,0.10); }
.select-sm { background:var(--surface-recessed);border:1px solid var(--line-2);border-radius:var(--radius);padding:7px 12px;color:var(--text);font-size:12px;outline:none; }
.select-sm:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(74,168,255,0.10); }

/* ══ ADMIN SCANNER TOGGLES ══ Per-source on/off rows in the Admin Console
   Scanners tab. Mirrors the header sub-toggle popover but more readable. */
.adm-tg-row {
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 14px;border-radius:8px;
  background:rgba(74,168,255,0.04);
  border:1px solid var(--line);
  margin-bottom:10px;
  transition:border-color .15s, background .15s;
}
.adm-tg-row:last-child { margin-bottom:0; }
.adm-tg-row:hover { border-color:var(--line-2); }
.adm-tg-row#adm-tg-master {
  background:linear-gradient(90deg, rgba(74,168,255,0.10), rgba(176,123,255,0.06));
  border-color:rgba(74,168,255,0.25);
}

/* ══ TRADE SOURCE PILL ══ Color-coded chip showing which scanner produced
   the trade (Stock Picker / Option Picker / Greeks / Manual). Rendered by
   renderSourceTag() in app.js — used on History, Positions, and Dashboard
   rows so per-scanner attribution is visible at a glance. */
.source-pill {
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:6px;
  font-size:10px;font-weight:700;letter-spacing:.4px;
  white-space:nowrap;
  border:1px solid var(--line-2);
  background:rgba(74,168,255,0.04);
  color:var(--text-soft);
}
.source-pill.src-stocks  { background:rgba(74,168,255,0.10); border-color:rgba(74,168,255,0.30); color:var(--blue); }
.source-pill.src-options { background:rgba(176,123,255,0.10);border-color:rgba(176,123,255,0.30);color:var(--purple); }
.source-pill.src-greeks  { background:rgba(212,160,21,0.10); border-color:rgba(212,160,21,0.30); color:var(--gold); }
.source-pill.src-user    { background:rgba(34,211,154,0.10); border-color:rgba(34,211,154,0.30); color:var(--green); }
.source-pill.src-manual  { background:var(--surface-recessed);    border-color:var(--line-2);        color:var(--text-muted); }
.source-pill.src-unknown { background:var(--surface-recessed);    border-color:var(--line-2);        color:var(--text-muted); }

/* ══ BADGES ══ */
.badge {
  display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;
  font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  background:rgba(92,182,255,0.16);color:var(--blue-bright);
  border:1px solid rgba(92,182,255,0.30);
  box-shadow:inset 0 0 0 1px rgba(92,182,255,0.04);
}
.badge.green {
  background:rgba(46,232,168,0.16);color:var(--green-bright);
  border-color:rgba(46,232,168,0.40);
  box-shadow:inset 0 0 0 1px rgba(46,232,168,0.06);
}
.badge.red {
  background:rgba(255,107,138,0.16);color:var(--red-bright);
  border-color:rgba(255,107,138,0.40);
  box-shadow:inset 0 0 0 1px rgba(255,107,138,0.06);
}
.badge.gold {
  background:rgba(245,184,31,0.16);color:var(--gold-bright);
  border-color:rgba(245,184,31,0.42);
  box-shadow:inset 0 0 0 1px rgba(245,184,31,0.08);
}
.badge.off {
  background:rgba(14,20,38,0.7);color:var(--text-muted);border-color:var(--line-2);
}

/* ══ ACTION BUTTONS ══ */
.action-btn {
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:calc(100% - 24px);padding:12px 16px;
  margin:8px 12px 0;border-radius:var(--radius);border:none;
  font-size:13px;font-weight:600;cursor:pointer;transition:background .15s, border-color .15s;text-align:left;
}
.action-btn small { font-size:10px;color:var(--text-muted);font-weight:500; }
.action-btn.warning { background:rgba(212,160,21,.10);color:#ffd87a;border:1px solid rgba(212,160,21,.30); }
.action-btn.warning:hover { background:rgba(212,160,21,.18); }
.action-btn.warning small { color:rgba(255,216,122,.7); }
.action-btn.danger { background:rgba(255,85,119,.10);color:#ff8aa3;border:1px solid rgba(255,85,119,.30); }
.action-btn.danger:hover { background:rgba(255,85,119,.18); }
.action-btn.danger small { color:rgba(255,138,163,.7); }

/* AT controls card */
.at-controls-card { padding-bottom:18px; }
.at-controls-card .btn-gold { margin:0 18px 0; width:calc(100% - 36px); }
.at-controls-sub { padding:14px 18px;font-size:12px;color:var(--text-muted);line-height:1.5; }
.at-status-pill { background:var(--green-bg);color:var(--green);font-size:10px;padding:2px 8px;border-radius:10px;font-weight:700;text-transform:uppercase; }

.danger-card { padding-bottom:12px; }

/* ══ STATUS LIST ══ */
.status-list { padding:6px 0; }
.status-row { display:flex;align-items:center;justify-content:space-between;padding:10px 18px;font-size:12px; }
.status-row + .status-row { border-top:1px solid var(--border); }

/* ══ INSIGHTS GRID (Stocks/Options) ══ */
.insights-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:12px; }
.ins-body { padding:14px 16px;display:flex;flex-direction:column;gap:10px; }
.ins-row { display:flex;align-items:center;justify-content:space-between;font-size:12px; }
.ins-row span:first-child { color:var(--text-muted); }
.big-stat { display:flex;flex-direction:column;gap:6px;padding:6px 0;align-items:flex-start; }
.big-num { font-size:18px;font-weight:800; }
.big-sub { font-size:11px;color:var(--text-muted); }

/* ══ EXPOSURE BREAKDOWN ══ */
.exposure-list { padding:14px 18px;display:flex;flex-direction:column;gap:14px; }
.exp-bar-wrap { display:flex;justify-content:space-between;font-size:12px;margin-bottom:6px; }
.exp-pct { color:var(--blue);font-weight:700; font-family:'JetBrains Mono','SF Mono',Menlo,monospace; }
.exp-bar { height:6px;background:var(--surface-recessed);border:1px solid var(--line);border-radius:3px;overflow:hidden; }
.exp-fill { height:100%;background:var(--grad-blue);border-radius:3px;box-shadow:0 0 8px rgba(74,168,255,0.3); }

/* ══ RISK GAUGE ══ */
.risk-gauge-wrap { position:relative;display:flex;flex-direction:column;align-items:center;padding:20px; }
.risk-label { font-size:18px;font-weight:800;margin-top:-30px; }
.risk-meta { padding:0 18px 16px;display:flex;flex-direction:column;gap:8px; }
.rm-row { display:flex;justify-content:space-between;font-size:12px; }
.rm-row span:first-child { color:var(--text-muted); }

/* ══ SETTINGS FORM ══ */
.settings-form { padding:8px 0; }
.settings-form-2col { display:grid;grid-template-columns:1fr 1fr;gap:0;padding:6px 0; }
.settings-form-2col .sf-row { border-right:1px solid var(--border); }
.settings-form-2col .sf-row:nth-child(even) { border-right:none; }
.sf-row { display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--border);gap:12px; }
.sf-row:last-child { border-bottom:none; }
.sf-row label { font-size:13px;font-weight:500;flex:1; }
.sf-row input[type="number"], .sf-row input[type="text"], .sf-row input[type="email"], .sf-row select {
  width:140px;background:var(--surface-recessed);border:1px solid var(--line-2);border-radius:6px;
  padding:7px 10px;color:var(--text);outline:none;text-align:right;transition:border-color .15s, box-shadow .15s;
}
.sf-row input:focus,.sf-row select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(74,168,255,0.10); }
.sf-suffix { color:var(--text-muted);font-size:12px;margin-left:6px; }

/* ══ AT TOGGLE ROW ══ */
.at-toggle-row { display:flex;align-items:center;justify-content:space-between;padding:20px 18px; }
.at-toggle-title { font-size:16px;font-weight:700;margin-bottom:4px; }
.at-toggle-sub { font-size:12px;color:var(--text-muted); }

/* ══ AT BANNER ══ */
.at-banner { display:flex;align-items:center;justify-content:space-between;background:rgba(212,160,21,.07);border:1px solid rgba(212,160,21,.2);border-radius:var(--radius-lg);padding:14px 20px;margin-top:16px; }
.at-banner-left { display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px; }
.at-dot { width:10px;height:10px;border-radius:50%;background:var(--text-muted); }
.at-dot.on { background:var(--green);box-shadow:0 0 8px var(--green); }
.at-dot.off { background:var(--text-muted); }

/* ══ INSIGHTS LIST ══ */
.insights-list { padding:12px; }
.insight-item { padding:10px 12px;border-radius:var(--radius);background:var(--bg3);margin-bottom:8px;font-size:12px; }
.insight-item:last-child { margin-bottom:0; }
.insight-item.warn { border-left:3px solid var(--gold); }
.insight-item.crit { border-left:3px solid var(--red); }
.insight-item.info { border-left:3px solid var(--green); }

/* ══ BILLING ══ */
.billing-h3 { font-size:16px;font-weight:700;margin:16px 0 12px; }
.billing-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:0; }
.billing-card { background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 24px;position:relative;display:flex;flex-direction:column; }
.billing-card.popular { border-color:var(--gold);background:linear-gradient(160deg,rgba(212,160,21,.08),var(--bg2)); }
.billing-popular-badge { position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--gold);color:#000;font-size:10px;font-weight:800;letter-spacing:1.5px;padding:5px 14px;border-radius:20px;white-space:nowrap; }
.billing-plan-name { font-size:16px;font-weight:700;margin-bottom:8px; }
.billing-price { font-size:36px;font-weight:900;margin-bottom:4px; }
.billing-price span { font-size:14px;font-weight:400;color:var(--text-muted); }
.billing-features { list-style:none;margin:16px 0;display:flex;flex-direction:column;gap:8px;flex:1; }
.billing-features li { font-size:13px;color:var(--text-soft);display:flex;align-items:flex-start;gap:8px; }
.billing-features li::before { content:'✓';color:var(--gold);font-weight:700;flex-shrink:0; }
.billing-btn { display:flex;justify-content:center;align-items:center;padding:11px;border-radius:var(--radius);font-size:13px;font-weight:700;width:100%;border:1px solid var(--border2);background:none;color:var(--text);cursor:pointer;transition:all .15s; }
.billing-btn:hover { border-color:var(--gold);color:var(--gold); }
.billing-btn.gold { background:var(--gold);color:#000;border-color:var(--gold); }
.billing-billing-period { font-size:11px;color:var(--text-muted);margin-bottom:14px; }

.billing-current { padding:16px 18px; }
.bc-row { display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px; }
.bc-row:last-child { border-bottom:none; }
.bc-row.total { font-weight:800;font-size:14px; }
.bc-val { font-weight:600; }

.perf-pricing-explain { display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:24px 18px; }
.perf-pricing-explain.four-step { grid-template-columns:repeat(4,1fr); }
.pp-step { text-align:center;padding:0 8px; }
.pp-num { font-size:34px;font-weight:900;color:var(--gold);margin-bottom:8px; }
.pp-step strong { display:block;font-size:13px;font-weight:700;margin-bottom:6px; }
.pp-step p { font-size:12px;color:var(--text-muted);line-height:1.5; }

.usage-summary { padding:16px 18px;display:flex;flex-direction:column;gap:14px; }
.us-row { font-size:12px; }
.us-row > span:first-child { color:var(--text-muted); display:inline-block; }
.us-val { float:right;font-weight:600; }
.us-bar { height:5px;background:var(--bg3);border-radius:3px;overflow:hidden;margin-top:6px;clear:both; }
.us-fill { height:100%;background:var(--gold);border-radius:3px; }

/* Add-ons */
.addons-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:14px; }
.addons-grid.three-grid { grid-template-columns:repeat(3,1fr); }
.addon-card { padding:18px;display:flex;flex-direction:column;gap:6px; }
.ad-icon { font-size:22px;margin-bottom:6px; }
.addon-card strong { font-size:13px; }
.addon-card p { font-size:11px;color:var(--text-muted);line-height:1.5;flex:1; }
.ad-price { font-size:18px;font-weight:800;color:var(--gold); }
.ad-price span { font-size:11px;font-weight:500;color:var(--text-muted); }
.disc-card { padding:18px;display:flex;flex-direction:column;gap:6px;cursor:pointer;transition:border-color .15s; }
.disc-card:hover { border-color:var(--gold); }
.disc-card strong { font-size:13px; }
.disc-card p { font-size:11px;color:var(--text-muted);line-height:1.5; }
.learn-card { padding:18px;display:flex;flex-direction:column;gap:6px;cursor:pointer;transition:border-color .15s; }
.learn-card:hover { border-color:var(--gold); }
.learn-card strong { font-size:14px; }
.learn-card p { font-size:11px;color:var(--text-muted);line-height:1.5;margin-bottom:8px; }
.learn-link { font-size:12px;font-weight:700; }

/* ══ VIZ CARDS (Stocks/Options bottom row) ══ */
.viz-card { display:flex;flex-direction:column;min-height:230px;max-height:300px;overflow:hidden; }
.viz-body { padding:14px 18px;display:flex;flex-direction:column;gap:10px;flex:1;min-height:0; }
/* Cap canvases to a fixed height so Chart.js can't run away during scroll. */
.viz-body canvas { max-height:160px !important;width:100% !important; }
.sentiment-body canvas { max-height:120px !important;width:120px !important;flex-shrink:0; }
.viz-stat { display:flex;flex-direction:column;gap:2px; }
.viz-num { font-size:22px;font-weight:800;letter-spacing:-.3px; }
.viz-num.gold { color:var(--gold); }
.viz-lbl { font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600; }
.viz-meta { display:flex;justify-content:space-between;font-size:11px;color:var(--text-muted);padding-top:6px;border-top:1px solid var(--border); }
.viz-meta strong { color:var(--text);font-weight:700; }

/* Sentiment doughnut layout */
.sentiment-body { flex-direction:row !important; align-items:center;gap:14px; }
.sentiment-body canvas { flex-shrink:0; }
.sentiment-legend { flex:1;display:flex;flex-direction:column;gap:8px;font-size:12px; }
.sl-row { display:grid;grid-template-columns:14px 1fr auto;gap:8px;align-items:center; }
.sl-row strong { font-weight:700; }
.sl-dot { width:10px;height:10px;border-radius:50%;display:inline-block; }

/* Volatility outlook layout */
.vol-meta { flex:1;display:flex;flex-direction:column;gap:6px;font-size:11px; }
.vm-row { display:flex;justify-content:space-between; }
.vm-row span:first-child { color:var(--text-muted); }
.vm-row strong { font-weight:700; }

/* Performance page chart sizing — keep them compact */
.perf-charts .perf-chart-card { display:flex;flex-direction:column; }
.perf-chart-wrap { height:160px;padding:8px 14px 12px;position:relative; }
.perf-chart-wrap canvas { max-height:160px !important;width:100% !important; }

/* ══ PERFORMANCE SEGMENTS ══ */
.seg-card {
  padding:18px;display:flex;flex-direction:column;gap:10px;
  position:relative; overflow:hidden;
  transition:border-color .15s, transform .15s, box-shadow .2s;
}
.seg-card::before {
  /* Top edge accent stripe — picks up the per-card semantic color via
     the badge in the header (badge.gold/green/purple/etc.) */
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--grad-brand); opacity:0.7;
}
.seg-card:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(0,0,0,0.28), 0 0 0 1px rgba(92,182,255,0.10) inset;
  border-color:var(--line-2);
}
.seg-head { display:flex;justify-content:space-between;align-items:center; }
.seg-head strong { font-size:13.5px; letter-spacing:-.1px; }
.seg-pnl {
  font-size:26px;font-weight:800;color:var(--gold-bright);letter-spacing:-.4px;
  /* tabular-nums so adjacent cards visually line up */
  font-feature-settings:"tnum";
}
.seg-meta { display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:11px;padding-top:8px;border-top:1px solid var(--border); }
.seg-meta > div { display:flex;justify-content:space-between; }
.seg-meta > div > span:first-child { color:var(--text-muted); }
.seg-meta > div > span:last-child { font-weight:700; }

/* ══ PROFILE ══ */
.profile-avatar-row { display:flex;align-items:center;gap:16px;padding:20px 18px;border-bottom:1px solid var(--border); }
.profile-avatar { width:56px;height:56px;background:var(--gold-bg);border:2px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:var(--gold); }
.profile-name { font-size:16px;font-weight:700; }
.profile-email { font-size:13px;color:var(--text-muted); }

/* ══ QUICK ACTIONS ══ */
.quick-actions { padding:14px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px; }
.quick-btn { background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;text-align:left;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;transition:border-color .15s; }
.quick-btn:hover { border-color:var(--gold);color:var(--gold); }
.quick-btn.red-btn { color:var(--red); }
.quick-btn.red-btn:hover { border-color:var(--red); }

/* ══ THEME SECTION ══ */
.theme-section { padding:8px 0; }
.theme-row { display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border); }
.theme-row:last-child { border-bottom:none; }
.theme-label { font-size:13px;font-weight:500; }
.theme-opts { display:flex;gap:8px; }
.theme-btn { padding:7px 16px;border-radius:var(--radius);border:1px solid var(--border2);background:none;color:var(--text-muted);font-size:12px;font-weight:600;cursor:pointer; }
.theme-btn.active { background:rgba(74,168,255,0.10);border-color:var(--blue);color:var(--blue); }
.color-swatches { display:flex;gap:8px; }
.cs { width:28px;height:28px;border-radius:50%;border:2px solid var(--border2);cursor:pointer;transition:transform .1s; }
.cs:hover { transform:scale(1.1); }
.cs.active { border-color:#fff; box-shadow:0 0 0 2px var(--gold); }
.cs.gold { background:#D4A015; }
.cs.green { background:#10b981; }
.cs.blue { background:#3b82f6; }
.cs.purple { background:#a855f7; }
.cs.red { background:#ef4444; }

/* ══ HELP ══ */
.help-search { display:flex;align-items:center;gap:12px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px 20px;margin-bottom:20px; }
.help-search input { flex:1;background:none;border:none;color:var(--text);font-size:14px;outline:none; }
.help-search input::placeholder { color:var(--text-muted); }

.help-quick-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px; }
.qa-card { background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;display:flex;flex-direction:column;gap:6px;transition:border-color .15s; }
.qa-card:hover { border-color:var(--gold); }
.qa-icon { font-size:24px;margin-bottom:4px; }
.qa-card strong { font-size:14px; }
.qa-card p { font-size:11px;color:var(--text-muted); }

.faq-cat-pills { display:flex;flex-wrap:wrap;gap:8px;padding:14px 18px;border-bottom:1px solid var(--border); }
.alerts-pill-row { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;align-items:center; }
.pill { padding:6px 14px;border-radius:20px;border:1px solid var(--line-2);background:var(--surface-recessed);color:var(--text-muted);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s; }
.pill.active { background:rgba(74,168,255,0.10);border-color:var(--blue);color:var(--blue); }
.pill:hover:not(.active) { color:var(--text); border-color:var(--blue); }

.support-list { padding:6px;display:flex;flex-direction:column;gap:6px; }
.support-item { display:flex;align-items:center;gap:14px;padding:12px;border-radius:var(--radius);transition:background .15s; }
.support-item:hover { background:var(--bg3); }
.support-icon { font-size:24px;width:40px;text-align:center; }
.support-info { flex:1; }
.support-info strong { font-size:13px;display:block;margin-bottom:2px; }
.support-status { font-size:11px;color:var(--text-muted); }
.support-status.green { color:var(--green); }
.support-sub { font-size:10px;color:var(--text-dim);margin-top:1px; }

.disc-list { padding:12px;display:flex;flex-direction:column;gap:4px; }
.disc-link { display:block;padding:10px 12px;border-radius:var(--radius);font-size:13px;font-weight:500;color:var(--text-muted);transition:color .15s; }
.disc-link:hover { color:var(--gold); }

/* ══ FAQ ══ */
.faq-list { padding:8px 0; }
.faq-item { border-bottom:1px solid var(--line); }
.faq-item:last-child { border-bottom:none; }
.faq-q { width:100%;background:none;border:none;color:var(--text);padding:16px 18px;font-size:13px;font-weight:600;display:flex;justify-content:space-between;align-items:center;cursor:pointer;text-align:left; }
.faq-q:hover { background:rgba(74,168,255,.04); }
.faq-q span { color:var(--blue);font-size:18px;flex-shrink:0;font-weight:300;transition:transform .25s; }
.faq-a { max-height:0;overflow:hidden;padding:0 18px;font-size:13px;color:var(--text-muted);line-height:1.7;transition:max-height .3s ease,padding .3s ease; }
.faq-item.open .faq-a { max-height:240px;padding:0 18px 16px; }
.faq-item.open .faq-q span { transform:rotate(45deg); }

/* ══ ALERTS ══ */
.alert-events { padding:8px; }
.ae { display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:var(--radius);margin-bottom:4px;font-size:12px; }
.ae:hover { background:var(--bg3); }
.ae-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px; }
.ae-dot.green { background:var(--green);box-shadow:0 0 6px var(--green); }
.ae-dot.gold { background:var(--gold);box-shadow:0 0 6px var(--gold); }
.ae-dot.red { background:var(--red);box-shadow:0 0 6px var(--red); }
.ae strong { display:block; }
.ae-sub { font-size:10px;color:var(--text-muted);margin-top:2px; }

.channels-list { padding:6px; }
.channel-row { display:flex;align-items:center;gap:14px;padding:14px 12px;border-bottom:1px solid var(--border); }
.channel-row:last-child { border-bottom:none; }
.ch-icon { font-size:22px;width:32px;text-align:center; }
.ch-info { flex:1; }
.ch-info strong { font-size:13px;display:block; }
.ch-email { font-size:11px;color:var(--text-muted);margin-top:2px; }

.alert-tip-card p { padding:14px 18px;font-size:12px;color:var(--text-muted);line-height:1.6; }
.quiet-hours-row { display:flex;align-items:center;gap:10px;padding:14px 18px; }
.quiet-hours-row .input-sm { width:auto; }

.ch-mini { padding:8px 12px; }
.cm-row { display:flex;justify-content:space-between;align-items:center;padding:8px 6px;font-size:12px; }
.cm-row + .cm-row { border-top:1px solid var(--border); }

/* ══ HISTORY MINI LIST ══ */
.hist-mini-list { padding:8px; }
.hmi { display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:var(--radius);font-size:12px; }
.hmi:hover { background:var(--bg3); }
.hmi-time { color:var(--text-muted);font-size:10px;width:50px;flex-shrink:0;font-weight:600; }
.hmi-text { flex:1;line-height:1.5; }

/* ══ PAGINATION ══ */
.pagination { display:flex;justify-content:center;gap:4px;padding:12px;border-top:1px solid var(--line); }
.page-btn { background:var(--surface-recessed);border:1px solid var(--line-2);color:var(--text);padding:6px 11px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;min-width:28px;transition:border-color .15s, background .15s; }
.page-btn:hover { border-color:var(--blue); background:rgba(74,168,255,0.08); }
.page-btn.active { background:var(--grad-blue);color:#fff;border-color:var(--blue); box-shadow:0 4px 12px rgba(74,168,255,0.3); }

/* ══ SESSIONS ══ */
.sessions-list { padding:8px; }
.sess-row { display:flex;align-items:center;justify-content:space-between;padding:12px;border-radius:var(--radius);font-size:12px; }
.sess-row + .sess-row { border-top:1px solid var(--border); }
.sess-sub { font-size:10px;color:var(--text-muted);margin-top:2px; }

/* ══ MODAL ══ */
.modal-overlay { position:fixed;inset:0;background:rgba(13,23,41,.42);z-index:200;display:none;align-items:center;justify-content:center;backdrop-filter:blur(8px); }
[data-theme="dark"] .modal-overlay { background:rgba(5,7,13,.78); }
.modal-overlay.active { display:flex; }
.modal-card {
  background: var(--surface-elevated);
  border:1px solid var(--line-2);
  border-radius: var(--radius-xl);
  padding:28px;width:100%;max-width:460px;
  box-shadow: var(--shadow-4);
}
[data-theme="dark"] .modal-card {
  background:linear-gradient(180deg, rgba(20,28,48,0.95), rgba(15,21,37,0.95));
  box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(74,168,255,0.05);
  backdrop-filter:blur(12px);
}
.modal-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:20px; }
.modal-header h3 { font-size:16px;font-weight:700; }
.modal-close { background:none;border:none;color:var(--text-muted);font-size:18px;cursor:pointer; transition:color .15s; }
.modal-close:hover { color:var(--text); }

/* ══ BROKER LIST ══ */
.broker-list { padding:12px; }
.broker-item { display:flex;align-items:center;justify-content:space-between;padding:12px;border-radius:var(--radius);background:var(--surface-recessed);border:1px solid var(--line);margin-bottom:8px; }

/* ══ TOAST ══ */
.toast {
  position:fixed;bottom:24px;right:24px;z-index:500;
  background:linear-gradient(180deg, rgba(20,28,48,0.95), rgba(15,21,37,0.95));
  border:1px solid var(--line-2);border-radius:10px;
  padding:14px 20px;font-size:13px;font-weight:600;
  transform:translateY(80px);opacity:0;transition:all .25s;max-width:320px;
  box-shadow:0 12px 30px rgba(0,0,0,.55);
  backdrop-filter:blur(10px);
}
.toast.show { transform:translateY(0);opacity:1; }
.toast.success { border-left:3px solid var(--green); }
.toast.error   { border-left:3px solid var(--red); }
.toast.info    { border-left:3px solid var(--blue); }

canvas { display:block; }

/* ══ RESPONSIVE ══ */
@media (max-width: 1400px) {
  .scan-kpis { grid-template-columns:repeat(2,1fr); }
  .insights-grid { grid-template-columns:repeat(2,1fr); }
  .addons-grid { grid-template-columns:repeat(2,1fr); }
  .perf-pricing-explain.four-step { grid-template-columns:repeat(2,1fr); }
  .help-quick-grid { grid-template-columns:repeat(2,1fr); }
  .three-col { grid-template-columns:1fr 1fr; }
  .quick-actions { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 1500px) {
  .kpi-grid { grid-template-columns:repeat(4,1fr); }
}
@media (max-width: 1280px) {
  .kpi-grid, .kpi-grid.kpi-7 { grid-template-columns:repeat(3,1fr); }
  .two-col-stocks, .two-col-positions, .two-col-alerts { grid-template-columns:1fr; }
}
@media (max-width: 1024px) {
  .two-col, .three-col { grid-template-columns:1fr; }
  .col-right-narrow { max-width:100%; }
  .billing-grid { grid-template-columns:1fr; max-width:400px; margin:0 auto; }
  .perf-pricing-explain { grid-template-columns:1fr; }
  .settings-form-2col { grid-template-columns:1fr; }
  .settings-form-2col .sf-row { border-right:none; }
  .addons-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 768px) {
  .sidebar { position:fixed;left:-100%;transition:left .25s;z-index:200; height:100vh;height:100dvh; }
  .sidebar.open { left:0; }
  .sidebar-toggle { display:block; }
  .kpi-grid, .kpi-grid.kpi-7 { grid-template-columns:repeat(2,1fr); }
  .scan-kpis { grid-template-columns:repeat(2,1fr); }
  .strat-tabs { flex-wrap:wrap; }
  .help-quick-grid, .insights-grid, .addons-grid { grid-template-columns:1fr; }
  .quick-actions { grid-template-columns:1fr 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE — comprehensive responsive pass
   ════════════════════════════════════════════════════════════════════
   The original mobile rules above hide the sidebar and stack KPI grids
   but leave several issues unsolved on phones (no backdrop, header
   crowds, wide tables overflow viewport, font-size too small, no iOS
   safe-area, no body-scroll lock when drawer open). Everything below
   addresses those gaps. Breakpoints used:

     ≤ 1024 — tablets / small laptops    (col reflow)
     ≤  768 — phones landscape           (drawer nav, header compact)
     ≤  480 — phones portrait            (table column hides, padding)
*/

/* ── Sidebar backdrop (covers main content while drawer is open) ── */
.sidebar-backdrop {
  display:none; position:fixed; inset:0; z-index:190;
  background:rgba(5,7,13,0.65); backdrop-filter:blur(2px);
}
@media (max-width: 768px) {
  .sidebar-backdrop.open { display:block; }
  /* Lock the body scroll while the drawer is open so the page behind
     doesn't scroll under the user's finger. */
  body.sidebar-open { overflow:hidden; }
}

/* ── iOS safe-area handling (notch / home indicator) ── */
.app-header { padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); }
.app-shell  { padding-bottom:env(safe-area-inset-bottom); }

/* ── Touch-target floor: any clickable should be ≥ 40px tall on mobile
   so it's reachable with a thumb. We can't blanket every <button>
   without breaking densely-packed tools, but we can enforce this on
   the major interaction surfaces. */
@media (max-width: 768px) {
  .nav-item     { min-height:44px; padding:12px 14px; }
  .btn-gold,
  .btn-primary,
  .btn-ghost,
  .oauth-btn    { min-height:44px; }
  .sidebar-toggle { width:40px; height:40px; display:flex; align-items:center; justify-content:center; }
}

/* ── Inputs: 16px font prevents iOS Safari from auto-zooming on focus.
   We only apply this at small widths so desktop forms stay compact. */
@media (max-width: 768px) {
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="search"], input[type="tel"],
  select, textarea { font-size:16px; }
}

/* ════════════════════════════════════════════════════════════════════
   HEADER — phone-portrait compaction
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .app-header { padding:8px 12px; gap:8px; flex-wrap:wrap; }
  .header-status { gap:6px; flex-wrap:wrap; min-width:0; }
  /* "Market Open" / "Connected" — keep the dot, drop the words */
  .market-badge,
  .broker-badge { font-size:0; padding:4px; gap:0; }
  .market-badge .dot,
  .broker-badge .dot { font-size:11px; }   /* re-show dot indicator */
  /* Realignment banner — tighter padding so it doesn't dominate the screen */
  .realign-banner { padding:8px 12px; gap:8px; font-size:11px; }
  .realign-banner .btn-gold { padding:6px 12px; font-size:11px; }
  /* Account value pill — smaller font + truncate prefix label */
  .account-value-pill .av-label { display:none; }
}
@media (max-width: 480px) {
  /* On tiny screens drop the header regime badge entirely; the dashboard
     surfaces the same info inline via the SPY/QQQ/VIX header tape (which
     is already display:none < 900px, so this branch reveals it again
     in a stripped form is too much — keep it hidden.) */
  #header-regime-badge { display:none; }
}

/* ════════════════════════════════════════════════════════════════════
   GENERIC TABLE OVERFLOW — wrap any table-bearing card in a horizontal
   scroller so wide tables don't overflow the viewport. Most pages
   already wrap tables in a `.card` + parent .page-card, so we target
   those parents.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Default behavior — let parent overflow horizontally. min-width on
     the table itself preserves legibility (no column squashing below
     touch-target width). */
  .card table,
  .glass-card table,
  #history-table { min-width:640px; }
  .card,
  .glass-card,
  .card-body { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  /* Standard-width cells get a tiny pad reduction on phones */
  .card td, .card th,
  .glass-card td, .glass-card th,
  #history-table td, #history-table th { padding:8px 10px; font-size:12px; }
}

/* ════════════════════════════════════════════════════════════════════
   WATCHLIST — 11 columns is unworkable at 375px. Hide the indicators
   that overlap with each other (VWAP overlaps with Day%, Trend with
   RSI) and keep Score, Symbol, Price, Day%, Vol×, Recent Signal, ✕.
   The hidden columns are still in the DOM so sorting on them works
   from the desktop, just visually collapsed on phones.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Watchlist tbody/thead: hide nth-child for indicator cols 5,6,8,9
     (VWAP, Trend, RSI, Rng%) — leaves 7 visible, fits in 320-400px. */
  #watchlist-thead-row th:nth-child(5),  /* VWAP  */
  #watchlist-thead-row th:nth-child(6),  /* Trend */
  #watchlist-thead-row th:nth-child(8),  /* RSI   */
  #watchlist-thead-row th:nth-child(9),  /* Rng%  */
  #watchlist-tbody tr td:nth-child(5),
  #watchlist-tbody tr td:nth-child(6),
  #watchlist-tbody tr td:nth-child(8),
  #watchlist-tbody tr td:nth-child(9) { display:none; }
}

/* ════════════════════════════════════════════════════════════════════
   HISTORY — the inline rejection-reason sub-row gets crowded. Tighten
   padding on phones so it doesn't push the row to two screen-heights.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .rejection-detail-row td { padding:6px 10px 8px 10px !important; font-size:11px !important; }
  .rejection-detail-row td > div { font-size:10px !important; }
}

/* ════════════════════════════════════════════════════════════════════
   LOGIN MODAL — full-bleed on tiny screens so the form is reachable
   with one thumb and the OAuth buttons get full width.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .login-card {
    padding:28px 22px; max-width:100%; border-radius:12px;
    margin:12px;
  }
  .oauth-row { gap:10px; }
  .oauth-btn { padding:13px 14px; font-size:14px; }
  .login-card h2 { font-size:22px; }
}

/* ════════════════════════════════════════════════════════════════════
   PAGE PADDING — the desktop page padding (28-32px) eats too much real
   estate on phones. Halve it.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .page, .page-card, .page-content { padding:14px 12px; }
  .card, .glass-card { padding:14px 12px; }
  .card-header { padding:10px 12px; font-size:13px; }
}

/* ════════════════════════════════════════════════════════════════════
   FORMS — settings, AutoTrader knobs, manual-trade entry — stack to
   single column at < 480 instead of forcing two columns into 200px.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .sf-row,
  .form-row,
  .settings-form-2col .sf-row { grid-template-columns:1fr; gap:6px; }
  .sf-row label { font-size:12px; margin-bottom:2px; }
}

/* ════════════════════════════════════════════════════════════════════
   TOAST — the 320px-wide toast already works on most phones. Tweak
   placement so it doesn't collide with the iOS home indicator.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .toast { left:8px; right:8px; max-width:none; bottom:max(16px, env(safe-area-inset-bottom)); }
}

/* ════════════════════════════════════════════════════════════════════
   POLISH UTILITIES (Direction-3 redesign)
   ════════════════════════════════════════════════════════════════════ */

/* Polish #4 — tabular-nums helper.
   Numeric tables, P&L values, prices should NEVER jitter on digit changes.
   Apply via class="num" on any cell/span that holds numbers. */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* Polish #6 — status dots.
   Use instead of word-pills for status fields. Examples:
     <span class="sdot sdot-open"></span> Open
     <span class="sdot sdot-closed"></span> Closed
     <span class="sdot sdot-rejected"></span> Rejected
   Pairs nicely with the label text inline. */
.sdot {
  display:inline-block; width:8px; height:8px; border-radius:50%;
  margin-right:6px; vertical-align:middle; flex-shrink:0;
}
.sdot-open     { background:var(--green); box-shadow:0 0 0 3px rgba(10,143,94,.10); }
.sdot-pending  { background:var(--gold);  box-shadow:0 0 0 3px rgba(192,136,0,.10); animation:sdot-pulse 1.6s ease-in-out infinite; }
.sdot-closed   { background:var(--text-dim); }
.sdot-rejected { background:var(--red);   box-shadow:0 0 0 3px rgba(209,40,73,.10); }
.sdot-info     { background:var(--blue);  box-shadow:0 0 0 3px rgba(26,111,213,.10); }
[data-theme="dark"] .sdot-open     { box-shadow:0 0 0 3px rgba(46,232,168,.15); }
[data-theme="dark"] .sdot-pending  { box-shadow:0 0 0 3px rgba(245,184,31,.15); }
[data-theme="dark"] .sdot-rejected { box-shadow:0 0 0 3px rgba(255,107,138,.15); }
[data-theme="dark"] .sdot-info     { box-shadow:0 0 0 3px rgba(92,182,255,.15); }
@keyframes sdot-pulse { 0%,100% { opacity:1; } 50% { opacity:.5; } }

/* Polish #8 — skeleton loaders.
   Replace spinners with shape-matching placeholders that pulse.
     <div class="skel skel-line"></div>
     <div class="skel skel-card"></div>
     <div class="skel skel-circle"></div>
   Always pair with an aria-busy="true" attribute on the wrapping element. */
.skel {
  background: linear-gradient(90deg,
    var(--surface-recessed) 0%,
    var(--surface-hover) 50%,
    var(--surface-recessed) 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
  display:block;
}
.skel-line   { height:12px; width:100%; }
.skel-line.sm { height:10px; width:60%; }
.skel-line.lg { height:18px; width:80%; }
.skel-circle { border-radius:50%; width:32px; height:32px; }
.skel-card   { height:96px; width:100%; border-radius: var(--radius-lg); }
.skel-row    { display:flex; align-items:center; gap:12px; padding:10px 0; }
@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Polish #7 — empty states.
   Use on any data list that has no items yet:
     <div class="empty">
       <div class="empty-icon">📊</div>
       <div class="empty-title">No trades yet</div>
       <div class="empty-sub">Your auto-executed trades will appear here.</div>
       <button class="btn-primary">Run a scan</button>
     </div> */
.empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:48px 24px; gap:10px;
  color: var(--text-muted);
}
.empty-icon { font-size:40px; opacity:.55; margin-bottom:6px; }
.empty-title { font-size: var(--fz-lg); font-weight:700; color: var(--text); letter-spacing: var(--tracking-snug); }
.empty-sub  { font-size: var(--fz-sm); max-width:380px; line-height:1.55; }
.empty .btn-primary, .empty .btn-gold { margin-top:14px; }

/* Polish — KPI values get cleaner type ramp + tabular nums.
   Pre-fix these were 22px/700; bump to 24px and add a subtle baseline grid. */
.kpi-value { font-size: var(--fz-2xl); font-variant-numeric: tabular-nums; }
.kpi-label { font-size: var(--fz-xxs); font-weight:700; letter-spacing: var(--tracking-wide); }

/* Polish — global tabular nums on .mono and numeric cells */
.mono, .data-table td, .num, .kpi-value, .sk-val, .viz-num, .seg-pnl, .big-num,
.rec-value, .gr-value, .funnel-count, .av-num, .pp-num, .billing-price {
  font-variant-numeric: tabular-nums;
}

/* Sortable tables — hint + interaction state on the headers */
table.sortable th[data-sort] {
  cursor: pointer;
  user-select: none;
  transition: color .12s, background .12s;
}
table.sortable th[data-sort]:hover { color: var(--blue); background: var(--surface-hover); }
table.sortable th[data-sort][data-dir="asc"],
table.sortable th[data-sort][data-dir="desc"] { color: var(--blue); }

/* ── Stock Detail Modal sections (theme-aware) ──────────────────────
   Pre-fix the modal used inline rgba(255,255,255,.02) which renders
   as INVISIBLE white-on-white in Daylight mode. These classes are
   the proper theme-aware replacements. */
.sd-card {
  background: var(--surface-recessed);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
}
.sd-section-title {
  font-size: var(--fz-xxs);
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  margin-bottom: 8px;
}
.sd-row {
  border-bottom: 1px solid var(--line);
}
.sd-row:last-child { border-bottom: none; }
.sd-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  font-size: var(--fz-xs);
}
.sd-stat-grid > div { padding: 4px 0; }
.sd-stat-label { color: var(--text-muted); margin-bottom: 2px; }
.sd-stat-grid strong { color: var(--text); font-weight: 600; }
@media (max-width: 700px) {
  .sd-stat-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Stock detail modal body — explicit theme bg so inline child styles
   that use rgba(255,255,255,...) get a defined backdrop to layer over.
   In Daylight that's the cream page; in Twilight it's the dark glass. */
#stock-detail-modal .modal-card {
  background: var(--surface-elevated);
  color: var(--text);
}
#stock-detail-modal .modal-header {
  background: var(--surface-elevated) !important;
  border-bottom: 1px solid var(--line);
  padding: 14px 20px;
}
/* Override invisible inline backgrounds inside the modal so light theme
   surfaces render correctly. The rgba(255,255,255,.02) inline pattern
   is hard to refactor in JS without touching dozens of templates;
   this override is scoped to the modal so it doesn't leak.
   Scoped to BOTH ticker modals: the consolidated profile sections
   (formerly the stock-detail card) now render inside #company-card-modal
   too, so the same theme fix has to reach them. */
#stock-detail-modal [style*="rgba(255,255,255,.02)"],
#stock-detail-modal [style*="rgba(255,255,255,0.02)"],
#stock-detail-modal [style*="rgba(255,255,255,.06)"],
#stock-detail-modal [style*="rgba(255,255,255,0.06)"],
#company-card-modal [style*="rgba(255,255,255,.02)"],
#company-card-modal [style*="rgba(255,255,255,0.02)"],
#company-card-modal [style*="rgba(255,255,255,.06)"],
#company-card-modal [style*="rgba(255,255,255,0.06)"] {
  background: var(--surface-recessed) !important;
  border-color: var(--line) !important;
}
#stock-detail-modal [style*="background:#0f0f10"],
#stock-detail-modal [style*="background:#1a1a1a"],
#company-card-modal [style*="background:#0f0f10"],
#company-card-modal [style*="background:#1a1a1a"] {
  background: var(--surface-card) !important;
  border-color: var(--line) !important;
}
#stock-detail-modal [style*="border:1px solid #2a2a2a"],
#stock-detail-modal [style*="border-bottom:1px solid #2a2a2a"],
#stock-detail-modal [style*="border-bottom:1px solid #1a1a1a"],
#company-card-modal [style*="border:1px solid #2a2a2a"],
#company-card-modal [style*="border-bottom:1px solid #2a2a2a"],
#company-card-modal [style*="border-bottom:1px solid #1a1a1a"] {
  border-color: var(--line) !important;
}

/* ── Themed modal scaffolding (used by Trade-List / Autopsy / Teaching modals) ──
   Pre-fix these used inline `var(--bg-0)` + hardcoded `#2a2a2a` borders which
   rendered as dark navy on the cream Daylight page. Now they pick up the
   theme tokens correctly in BOTH themes. */
.ux-modal-overlay {
  position:fixed; inset:0; z-index:9998;
  background: rgba(13,23,41,0.42);
  backdrop-filter: blur(6px);
  display:flex; align-items:flex-start; justify-content:center;
  overflow-y:auto; padding:40px 20px;
}
[data-theme="dark"] .ux-modal-overlay { background: rgba(0,0,0,0.7); }
.ux-modal-card {
  background: var(--surface-elevated);
  color: var(--text);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-4);
  width: 100%;
  padding: 24px 28px;
  position: relative;
}
.ux-modal-close {
  position:absolute; top:14px; right:18px;
  width:32px; height:32px; border-radius:50%;
  background: var(--surface-recessed);
  border: 1px solid var(--line);
  color: var(--text-muted);
  font-size:18px; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition: background .15s, color .15s, border-color .15s;
}
.ux-modal-close:hover { background: var(--bg4); color: var(--text); border-color: var(--line-2); }
.ux-modal-head {
  margin-bottom:14px; padding-bottom:12px;
  border-bottom: 1px solid var(--line);
}
.ux-modal-eyebrow {
  font-size: var(--fz-xxs);
  color: var(--text-muted);
  text-transform:uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight:600;
}
.ux-modal-title {
  font-size: var(--fz-xl);
  font-weight:700;
  letter-spacing: var(--tracking-snug);
  color: var(--text);
  margin-top:4px;
}
.ux-modal-meta {
  font-size: var(--fz-xs);
  color: var(--text-muted);
  margin-top:4px;
}