/* =========================================================================
 * flat.css — Flat / Scandi skin. Loaded by index.html AFTER css/styles.css as
 * the app's PERMANENT look (promoted from the flat.html prototype).
 *
 * Changes ONLY the look: monochrome palette, General Sans, flat surfaces,
 * hairline borders, white header, and a variable-driven glass system
 * (Off / Light / Strong, default Off). All layout/behaviour stays in
 * styles.css; no functional/JS logic depends on this file.
 *
 * Accent is monochrome by DEFAULT (black light / near-white dark) but is NOT
 * forced with !important, so the user's chosen accent (injected #theme-overrides
 * <style>, which loads after this file) wins. Profit/loss stays green/red.
 * ========================================================================= */

/* ---- Typography ------------------------------------------------------- */
body {
  font-family: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Design tokens: FLAT LIGHT (default = glass Off) ------------------- */
body[data-theme="light"] {
  --bg-0: #f4f4f4;
  --bg-1: #eceae3;
  --popup-bg: #ffffff;
  --glass: #ffffff;
  --glass-strong: #f6f7f9;
  /* Solid content surfaces — never glassy (kept for readable cards/charts). */
  --surface: #ffffff;
  --surface-2: #f6f7f9;
  --btn-hover: #dfe3e9;
  --modal-bg: #ffffff;      /* lightboxes stay bright even in glass modes */
  --sidebar-cover: #ffffff; /* scroll-shadow cover = sidebar surface */
  --glass-border: rgba(31, 31, 31, 0.06);       /* near-borderless */
  --glass-border-strong: rgba(31, 31, 31, 0.13);
  --text: #1f1f1f;
  --text-dim: #5f5f5f;
  --text-faint: #9a9a9a;
  --accent: #1f1f1f;
  --accent-2: #505050; /* lighter shade → colour→colour logo gradient */
  --accent-rgb: 31, 31, 31;
  --on-accent: #ffffff;
  --green: #1f9d63;
  --red: #d8453f;
  --green-soft: rgba(31, 157, 99, 0.12);
  --red-soft: rgba(216, 69, 63, 0.10);
  --amber: #c98a00;
  --shadow: none;
  --glass-blur: 0px;
  --gauge-track: rgba(31, 31, 31, 0.10);
  --radius: 10px;
  --radius-sm: 7px;
}

/* ---- Design tokens: FLAT DARK (default = glass Off) -------------------- */
body[data-theme="dark"] {
  --bg-0: #181a20;          /* Slate (DEFAULT dark variant) */
  --bg-1: #14161b;
  --popup-bg: #22252d;
  --glass: #22252d;
  --glass-strong: #2a2e37;
  --surface: #22252d;       /* elevation via tone (borderless) */
  --surface-2: #2a2e37;
  --btn-hover: #333846;
  --modal-bg: #23262e;
  --sidebar-cover: #22252d;
  --glass-border: rgba(255, 255, 255, 0.045);       /* near-invisible → borderless */
  --glass-border-strong: rgba(255, 255, 255, 0.12); /* kept for hover/inputs */
  --text: #f4f4f4;
  --text-dim: #b4b4b4;
  --text-faint: #8a8a8a;
  --accent: #f4f4f4;
  --accent-2: #bebebe; /* darker shade → colour→colour logo gradient */
  --accent-rgb: 244, 244, 244;
  --on-accent: #1f1f1f;
  --green: #3fbf7d;
  --red: #e8635e;
  --green-soft: rgba(63, 191, 125, 0.15);
  --red-soft: rgba(232, 99, 94, 0.15);
  --amber: #e0a53a;
  --shadow: none;
  --glass-blur: 0px;
  --gauge-track: rgba(255, 255, 255, 0.10);
  --radius: 10px;
  --radius-sm: 7px;
}

/* ---- Glass tiers (Light / Strong) — re-introduce translucency + blur --- */
/* Off = the base blocks above (opaque, --glass-blur:0). These tiers win by
   higher specificity (theme + glass attribute). */
/* Subtle scale: Light = barely there; Strong = only a touch beyond the old Light. */
body[data-theme="light"][data-glass="light"] {
  --glass: rgba(255, 255, 255, 0.88);
  --glass-strong: rgba(255, 255, 255, 0.92);
  --popup-bg: rgba(255, 255, 255, 0.72);
  --modal-bg: rgba(255, 255, 255, 0.95);
  --glass-border: rgba(31, 31, 31, 0.06);
  --glass-blur: 6px;
}
body[data-theme="light"][data-glass="strong"] {
  --glass: rgba(255, 255, 255, 0.68);
  --glass-strong: rgba(255, 255, 255, 0.84);
  --popup-bg: rgba(255, 255, 255, 0.55);
  --modal-bg: rgba(255, 255, 255, 0.90);
  --glass-border: rgba(31, 31, 31, 0.07);
  --glass-blur: 14px;
}
body[data-theme="dark"][data-glass="light"] {
  --glass: rgba(34, 37, 45, 0.85);
  --glass-strong: rgba(42, 46, 55, 0.85);
  --popup-bg: rgba(28, 31, 38, 0.72);
  --modal-bg: rgba(40, 44, 54, 0.95);
  --glass-border: rgba(255, 255, 255, 0.045);
  --glass-blur: 6px;
}
body[data-theme="dark"][data-glass="strong"] {
  --glass: rgba(34, 37, 45, 0.58);
  --glass-strong: rgba(42, 46, 55, 0.66);
  --popup-bg: rgba(24, 26, 32, 0.55);
  --modal-bg: rgba(36, 40, 50, 0.90);
  --glass-border: rgba(255, 255, 255, 0.045);
  --glass-blur: 14px;
}

/* ---- Global flatteners ------------------------------------------------ */
.aurora { display: none !important; }
body { background: var(--bg-0); }
/* Dark = Slate (default): soft slate + barely-there depth gradient. */
body[data-theme="dark"] { background: linear-gradient(160deg, #20232b 0%, #181a20 45%, #131519 100%) fixed; }
/* Borderless dark relies on tone → keep controls readable without a visible border. */
body[data-theme="dark"] .btn:not(.btn-primary):not(.btn-danger) { background: var(--surface-2) !important; }
body[data-theme="dark"] .glass-input { border-color: var(--glass-border-strong) !important; }

/* ===== Near-Black dark variant (Plus) — Ink palette overrides Slate ======= */
body[data-theme="dark"][data-dark-variant="nearblack"] {
  --bg-0: #0d0d0f; --bg-1: #0a0a0c;
  --popup-bg: #16161a; --glass: #16161a; --glass-strong: #1e1e22;
  --surface: #16161a; --surface-2: #1e1e22; --btn-hover: #26262b;
  --modal-bg: #17171b; --sidebar-cover: #16161a;
  --glass-border: rgba(255, 255, 255, 0.03); --gauge-track: rgba(255, 255, 255, 0.09);
}
body[data-theme="dark"][data-dark-variant="nearblack"] { background: linear-gradient(160deg, #141416 0%, #0d0d0f 45%, #08080a 100%) fixed; }
body[data-theme="dark"][data-dark-variant="nearblack"][data-glass="light"] {
  --glass: rgba(22, 22, 26, 0.82); --glass-strong: rgba(30, 30, 34, 0.82);
  --popup-bg: rgba(16, 16, 19, 0.72); --modal-bg: rgba(24, 24, 28, 0.95);
  --glass-border: rgba(255, 255, 255, 0.03); --glass-blur: 6px;
}
body[data-theme="dark"][data-dark-variant="nearblack"][data-glass="strong"] {
  --glass: rgba(22, 22, 26, 0.58); --glass-strong: rgba(30, 30, 34, 0.66);
  --popup-bg: rgba(13, 13, 15, 0.55); --modal-bg: rgba(22, 22, 26, 0.90);
  --glass-border: rgba(255, 255, 255, 0.03); --glass-blur: 14px;
}

/* ===== Paper light variant (Plus) — warm off-white overrides Standard ===== */
body[data-theme="light"][data-light-variant="paper"] {
  --bg-0: #f3f1ea; --bg-1: #ece8dd;
  --popup-bg: #fffdf8; --glass: #fffdf8; --glass-strong: #f6f2e8;
  --surface: #fffdf8; --surface-2: #f6f2e8; --btn-hover: #ece7db;
  --modal-bg: #fffdf8; --sidebar-cover: #fffdf8;
  --glass-border: rgba(60, 50, 30, 0.08); --glass-border-strong: rgba(60, 50, 30, 0.14);
}
body[data-theme="light"][data-light-variant="paper"][data-glass="light"] {
  --glass: rgba(255, 253, 248, 0.88); --glass-strong: rgba(255, 253, 248, 0.92);
  --popup-bg: rgba(255, 253, 248, 0.75); --modal-bg: rgba(255, 253, 248, 0.95);
  --glass-border: rgba(60, 50, 30, 0.07); --glass-blur: 6px;
}
body[data-theme="light"][data-light-variant="paper"][data-glass="strong"] {
  --glass: rgba(255, 253, 248, 0.70); --glass-strong: rgba(255, 253, 248, 0.85);
  --popup-bg: rgba(255, 253, 248, 0.60); --modal-bg: rgba(255, 253, 248, 0.90);
  --glass-border: rgba(60, 50, 30, 0.08); --glass-blur: 14px;
}
.kpi.glow-green::before, .kpi.glow-red::before { display: none !important; }
/* Kill leftover hard-coded shadows; surfaces read flat (hairline borders). */
.glass, .card, .sidebar, .topbar, .filter-bar, .btn, .btn-primary, .btn-danger,
.brand .logo, .toast, .migrate-promo, table.tbl th {
  box-shadow: none !important;
}
.cal-cell:hover { transform: none !important; }

/* ---- Card hover: subtle lift + soft shadow (restored) ----------------- */
.dash-widget > .card, .strat-card, .news-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .14s ease;
}
.dash-widget > .card:hover, .strat-card:hover, .news-card:hover {
  transform: translateY(-3px) scale(1.008) !important;
  border-color: var(--glass-border-strong) !important;
}
body[data-theme="light"] .dash-widget > .card:hover,
body[data-theme="light"] .strat-card:hover,
body[data-theme="light"] .news-card:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12) !important; }
body[data-theme="dark"] .dash-widget > .card:hover,
body[data-theme="dark"] .strat-card:hover,
body[data-theme="dark"] .news-card:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45) !important; }

/* ---- Surfaces rewired to the glass variables (react to Off/Light/Strong) */
/* In Off, --glass-blur is 0 and --glass/--popup-bg are opaque → flat. */
.topbar {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
}
/* Inputs are content fields → solid & readable (never frost). */
.glass-input {
  background: var(--surface) !important;
  border: 1px solid var(--glass-border);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.glass-input:focus { border-color: var(--accent); }
/* Lightboxes stay bright/white even in glass modes (--modal-bg is whiter than
   --glass) while still frosting via the blur. */
.modal {
  background: var(--modal-bg);
  border: 1px solid var(--glass-border-strong);
  backdrop-filter: blur(calc(var(--glass-blur) * 1.4)) saturate(160%);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 1.4)) saturate(160%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18) !important;
}
body[data-theme="light"] .modal { background: var(--modal-bg); }
.modal-back {
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(calc(var(--glass-blur) * 0.5));
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.5));
}
/* Settings lightbox: fixed tab bar (header) + fixed action footer, with only
   the middle (.modal-auto-body) scrolling between them. Because content scrolls
   BETWEEN the bars — never behind them — both bars simply show the modal's own
   frosted surface and need no background of their own → they blend in seamlessly
   (no brighter/whiter panel from a nested frost). */
.us-settings-modal .us-tabs { flex: 0 0 auto; }
.us-settings-modal .us-foot { flex: 0 0 auto; }
.us-settings-modal .us-foot .modal-actions { margin-top: 14px; }
.us-settings-modal .us-foot .modal-actions.foot-inactive { display: none !important; }
/* .fb-cpanel scales with the glass tier. */
.fb-cpanel {
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
}
/* Mobile top bar: ALWAYS a light glass (even when glass=Off), a touch stronger
   in light mode. It floats over scrolling content so the frost reads well. */
.mobile-topbar {
  background: rgba(24, 26, 32, 0.60) !important;   /* slate, always a light glass — even glass=Off */
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
}
body[data-theme="light"] .mobile-topbar {
  background: rgba(255, 255, 255, 0.58) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
}
/* Let page content scroll UNDER the fixed mobile top bar so its always-on
   Light-tier milk-glass frost actually blurs content. Previously .app had a
   52px top padding that pushed everything below the bar, leaving nothing behind
   it to frost → the bar looked flat. Moving that clearance into .main's top
   padding keeps the first content clear of the bar while letting it scroll
   beneath it. The bar's frost stays fixed regardless of glass/theme/scheme. */
@media (max-width: 760px) {
  .app { padding-top: 0 !important; }
  .main { padding-top: 66px !important; }
}
.rt-color-pop {
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
}
/* Report/Trade side-panel lightbox (styles.css hardcodes old navy) → new slate
   scheme in dark; light stays as-is. Frosts with the glass tier. */
body[data-theme="dark"] .trade-panel {
  background: #14171d !important;   /* darker than the slate panels → contrast + cards pop */
  backdrop-filter: blur(calc(var(--glass-blur) * 1.4)) saturate(160%) !important;
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 1.4)) saturate(160%) !important;
}
body[data-theme="dark"][data-dark-variant="nearblack"] .trade-panel { background: #101013 !important; }
/* .glass utility (AI chat panel etc.), .tip-bubble, popovers already read the
   vars in styles.css — they respond to the tiers automatically. */

/* ---- Sidebar / nav / brand ------------------------------------------- */
.sidebar {
  background: var(--glass) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(160%) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%) !important;
}
.brand-icon { color: var(--accent) !important; }
.brand .logo { background: var(--accent) !important; }
.nav-item { border: 1px solid transparent !important; }
.nav-item:hover { background: var(--glass-strong) !important; }
.nav-item.active {
  background: var(--glass-strong) !important;
  color: var(--text) !important;
  border-color: var(--glass-border) !important;
}
body[data-theme="light"] .nav-item.active { background: #ececE8 !important; color: #1f1f1f !important; }
body[data-theme="dark"]  .nav-item.active { background: rgba(255,255,255,0.09) !important; color: #ffffff !important; }
/* Logo gradients: accent → derived shade (colour→colour). */
.mtb-stop1, .brand-stop1 { stop-color: var(--accent) !important; }
.mtb-stop2, .brand-stop2 { stop-color: var(--accent-2) !important; }

/* Sidebar fills the whole left column, top-to-bottom (desktop/tablet only). */
@media (min-width: 761px) {
  .sidebar {
    grid-row: 1 / -1;
    margin: 0 !important;
    border-radius: 0 !important;
    height: 100% !important;
    border: none !important;
    border-right: 1px solid var(--glass-border) !important;
    box-shadow: none !important;
  }
  .app.nav-collapsed .sidebar { margin: 0 !important; }
  /* banner only spans the content column, so the sidebar runs full-height past it */
  .migrate-promo { grid-column: 2 !important; }
}

/* styles.css has a translucent light-theme topbar bg — override it to the
   glass var so Off = pure white (#fff) and Light/Strong frost. */
body[data-theme="light"] .topbar { background: var(--glass); }

/* ---- Cards / KPI (SOLID content surface — never frost) ---------------- */
.card {
  background: var(--surface) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius);
  padding: 20px 22px;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.dash-grid { gap: 18px; }

/* ---- Buttons (solid content control) ---------------------------------- */
.btn {
  background: var(--surface) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.btn:hover { background: var(--btn-hover) !important; border-color: var(--glass-border-strong) !important; transform: none !important; }
.btn-primary {
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  border: 1px solid var(--accent) !important;
}
/* Hover → the derived accent shade = always a clearly visible change (any accent). */
.btn-primary:hover {
  background: var(--accent-2) !important; border-color: var(--accent-2) !important;
  filter: none !important; opacity: 1;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18) !important;
}

/* Danger button: keep the red identity (flat .btn had overridden it away). */
.btn-danger { color: var(--red) !important; border-color: rgba(216, 69, 63, 0.42) !important; background: var(--surface) !important; }
.btn-danger:hover { background: var(--red-soft) !important; border-color: var(--red) !important; color: var(--red) !important; }

/* Filter pills (custom-select triggers) + native selects had NO hover at all. */
.cs-trigger:hover, select.glass-input:hover {
  background: var(--btn-hover) !important; border-color: var(--glass-border-strong) !important;
}
/* Tabs / collapse: give a visible hover fill instead of white-on-white. */
.atab:hover:not(.active) { background: var(--surface-2) !important; color: var(--text) !important; }
.nav-collapse:hover { background: var(--glass-strong) !important; }
/* Collapsed rail: low contrast → hover fills with accent, arrow contrasts. */
.app.nav-collapsed .nav-collapse:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--on-accent) !important;
}
/* Scroll shadow above the pinned user chip when the nav list is cut off. */
.nav-scroll {
  background:
    linear-gradient(to top, var(--sidebar-cover), rgba(255, 255, 255, 0)) bottom / 100% 18px no-repeat,
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0)) bottom / 100% 11px no-repeat;
  background-attachment: local, scroll;
}

/* Boot splash backdrop: near-white in light; the exact dark-mode bg gradient in
   dark (so the splash matches the app the user last used). */
#bootSplash, #bootSplash[data-theme="light"] {
  background: rgba(255, 255, 255, 0.9) !important;
}
#bootSplash[data-theme="dark"] {
  background: linear-gradient(160deg, #20232b 0%, #181a20 45%, #131519 100%) !important;
}
#bootSplash[data-theme="dark"][data-dark-variant="nearblack"] {
  background: linear-gradient(160deg, #141416 0%, #0d0d0f 45%, #08080a 100%) !important;
}
#bootSplash[data-theme="light"][data-light-variant="paper"] {
  background: rgba(255, 253, 248, 0.92) !important;
}

/* Prop-firm "ready" lightbox — a centered modal that opens on click (js/app.js).
   ~20% wider + taller with more generous spacing so the content has room to
   breathe; font sizes stay as defined in styles.css (nothing looks inflated). */
.propfirm-backdrop {
  position: fixed; inset: 0; z-index: 249;
  background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity 0.18s ease;
}
.propfirm-backdrop.show { opacity: 1; pointer-events: auto; }
.propfirm-popup {
  position: fixed !important;
  /* Sit in the modal tier (250) so the firm-tab tooltips (--z-tip 260) render
     ABOVE the lightbox instead of hidden behind the legacy z-index:9990. */
  z-index: 250 !important;
  left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important;
  transform: translate(-50%, -50%) scale(0.98);
  width: min(372px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 48px) !important;
  display: none; flex-direction: column;
  opacity: 0; transition: opacity 0.18s ease, transform 0.18s ease;
  /* Background matches the settings lightbox (.modal). */
  background: var(--modal-bg) !important;
  border: 1px solid var(--glass-border-strong) !important;
  backdrop-filter: blur(calc(var(--glass-blur) * 1.4)) saturate(160%) !important;
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 1.4)) saturate(160%) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18) !important;
}
.propfirm-popup.show { display: flex !important; opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* More whitespace (not bigger text) → the ~20% extra room. */
.pfp-firmtab { padding: 12px 10px !important; }
.pfp-body { padding: 15px 18px 0 !important; }
.pfp-progtabs { margin-bottom: 12px !important; }
.pfp-verdict { margin-bottom: 13px !important; padding: 7px 12px !important; }
.pfp-table thead th { padding: 3px 5px 8px !important; }
.pfp-table tbody td { padding: 7px 5px !important; }
.pfp-footer { padding: 14px 18px 16px !important; }

/* Upgrade-modal CTA: keep the tier chip gradients (Plus = green, Pro = blue),
   with a darker-gradient hover for clear contrast (overrides .btn/.btn-primary
   flat fills + the old accent-swap hover in styles.css). */
.upg-cta-plus {
  background: linear-gradient(135deg, #34d058 0%, #15803d 100%) !important;
  color: #ffffff !important; border: none !important;
  box-shadow: 0 8px 22px rgba(34, 180, 80, 0.35) !important;
}
.upg-cta-pro {
  background: linear-gradient(135deg, #6ea8ff 0%, #3a6fe0 100%) !important;
  color: #ffffff !important; border: none !important;
  box-shadow: 0 8px 22px rgba(70, 120, 255, 0.35) !important;
}
/* Hover = just a deeper gradient (no growing glow — same shadow as rest). */
.upg-cta-plus:hover { background: linear-gradient(135deg, #27b747 0%, #0d5c2b 100%) !important; box-shadow: 0 8px 22px rgba(34, 180, 80, 0.35) !important; filter: none !important; }
.upg-cta-pro:hover  { background: linear-gradient(135deg, #4f8ef2 0%, #274fb0 100%) !important; box-shadow: 0 8px 22px rgba(70, 120, 255, 0.35) !important; filter: none !important; }

/* ---- Chips (solid content — never frost) ------------------------------ */
.fb-chip { background: var(--surface) !important; border: 1px solid var(--glass-border) !important; }
.fb-chip.on { background: var(--accent) !important; color: var(--on-accent) !important; border-color: var(--accent) !important; }
/* Only the resting (off) tag is a solid neutral surface. Active tags keep their
   CATEGORY colours (blue/green/purple/grey from styles.css) — not the accent. */
.tag-chip:not(.on) { background: var(--surface) !important; }
.risk-adj-chip {
  background: var(--glass-strong) !important; color: var(--text-dim) !important;
  border: 1px solid var(--glass-border) !important;
}

/* ---- Tabs ------------------------------------------------------------- */
.us-tab.active { color: var(--text) !important; border-bottom-color: var(--accent) !important; }
.atab { background: transparent !important; border: 1px solid var(--glass-border) !important; }
.atab.active { background: var(--accent) !important; color: var(--on-accent) !important; border-color: var(--accent) !important; }
.atab-badge { background: var(--accent) !important; color: var(--on-accent) !important; }

/* ---- Popovers (soft flat lift so they read as floating) --------------- */
.cs-pop, .dp-cal, .accent-pop {
  border: 1px solid var(--glass-border-strong) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14) !important;
}
.cs-opt.sel, .cs-opt:hover { background: var(--glass-strong) !important; }

/* ---- Mode toggles: active = BOLD, no colored/black fill --------------- */
/* Portfolio↔Account / news / PF etc. hybrid label toggles */
.fmt-side { font-weight: 600; }
.fmt-side.active { font-weight: 800 !important; color: var(--text) !important; background: none !important; }
/* True segmented buttons: bold + subtle neutral fill (NOT accent/black) */
.seg-btn.active {
  background: var(--glass-strong) !important;
  color: var(--text) !important;
  font-weight: 800 !important;
}
.equity-mode-btn.active {
  background: var(--glass-strong) !important;
  color: var(--text) !important;
  border-color: var(--glass-border-strong) !important;
  font-weight: 800 !important;
}
.filter-mode-toggle .fmt-side.active { background: none !important; }
/* iOS switch stays a real switch; keep track = accent, knob contrasts in dark */
.strat-toggle-track { background: var(--glass-border-strong) !important; }
.strat-toggle-label input:checked + .strat-toggle-track { background: var(--accent) !important; }
body[data-theme="dark"] .strat-toggle-label input:checked + .strat-toggle-track::before { background: #1f1f1f !important; }

/* ---- Calendar --------------------------------------------------------- */
.cal-cell { background: var(--surface) !important; border: 1px solid var(--glass-border) !important; backdrop-filter: none !important; }
.cal-cell:hover { border-color: var(--glass-border-strong) !important; }
.cal-cell.green { background: var(--green-soft) !important; }
.cal-cell.red { background: var(--red-soft) !important; }
/* Empty leading tiles (days before the 1st) have no number → no fill/border/hover
   (the flat .cal-cell !important above otherwise re-adds them). Both themes. */
.cal-cell.empty {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
}