/* ==============================================================
 * Per-theme personality overrides
 * ============================================================== */

/* ── Canonical card border accents ──────────────────────────────
 * Set --_sg / --_cg in the theme variable block (01-themes.css) to activate.
 * To add a new card: add t-card-content or t-card-summary class in HTML only.
 * Aurora/glass use ::after rings; amoled/shadow override below (higher specificity).
 * ─────────────────────────────────────────────────────────────── */
[data-theme] .t-card-content {
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    var(--_cg, linear-gradient(transparent, transparent)) border-box;
  border: 1px solid transparent;
}
[data-theme] :is(.t-card-summary, .legal-card) {
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    var(--_sg, linear-gradient(transparent, transparent)) border-box;
  border: 1px solid transparent;
}

/* ── Canonical popup panel border — mirrors .t-card-content per theme ──
 * Popup panels are plain .t-card elements (no .t-card-content class) so
 * they don't inherit the gradient border. This rule closes that gap.
 * Per-theme overrides below refine as needed (amoled: none; glass: ring).
 * ─────────────────────────────────────────────────────────────────────── */
[data-theme] :is(.modal-overlay-medium, .modal-overlay-dark) .t-card,
[data-theme] #sym-tx-modal,
[data-theme] #chart-expand-modal {
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    var(--_cg, linear-gradient(transparent, transparent)) border-box;
  border: 1px solid transparent;
}

/* ── DARK: Starfield — midnight navy, steel-blue accent ── */
/* No .t-card override block — gradient border comes from canonical above.
   These shadow overrides must live here (no later .t-card rule to conflict with). */
[data-theme="dark"] .t-card-summary,
[data-theme="dark"] .legal-card {
  box-shadow: 0 2px 8px rgba(138,184,216,0.08), 0 8px 28px rgba(0,0,0,0.35);
}
[data-theme="dark"] .t-card-content {
  box-shadow: 0 2px 8px rgba(138,184,216,0.04), 0 8px 28px rgba(0,0,0,0.35);
}
/* Tabs: accent outline on hover (matches the midnight treatment); the base
   rule only changes the fill, leaving the border the muted --border. */
/* Transparent border at rest (kept at 1px so revealing the hover border
   never shifts layout); accent border on hover. Matches the midnight tab
   treatment and the universal soft-button pattern. */
[data-theme="dark"] .tab-inactive {
  border-color: transparent;
}
[data-theme="dark"] .tab-inactive:hover {
  border-color: var(--accent);
}

/* ── AMOLED: Void terminal — zero-radius, neon, underline nav ── */
[data-theme="amoled"] .t-card, [data-theme="amoled"] .ticker-wrap {
  border-color: transparent;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.07);
  border-radius: 0;
}
[data-theme="amoled"] .mini-chart-card {
  border-color: transparent;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.07);
  border-radius: 0;
  transition: box-shadow 0.12s;
}
[data-theme="amoled"] .mini-chart-card:hover {
  transform: none; /* clinical — no lift */
  box-shadow: 0 0 0 1px rgba(226,226,226,0.35);
}
/* Underline tabs, no fill, no radius */
[data-theme="amoled"] .tab-active {
  background: transparent;
  color: var(--text-primary);
  border: none;
  border-bottom: 2px solid var(--accent);
  border-radius: 0 !important;
}
[data-theme="amoled"] .tab-inactive {
  background: transparent;
  color: var(--text-muted);
  border: none;
  box-shadow: none;
  border-bottom: 2px solid transparent;
  border-radius: 0 !important;
}
[data-theme="amoled"] .tab-inactive:hover {
  background: transparent;
  color: var(--text-sub);
  border-bottom-color: rgba(255,255,255,0.18);
}
/* Period buttons: filled-white for active */
[data-theme="amoled"] .period-active {
  background: var(--accent);
  color: #000;
  border-color: transparent;
}
[data-theme="amoled"] .period-inactive {
  background: transparent;
  border-color: rgba(255,255,255,0.1);
  color: var(--text-muted);
}
[data-theme="amoled"] .period-inactive:hover {
  background: rgba(255,255,255,0.04);
  color: var(--text-sub);
}
/* Summary cards: phosphor scanline gradient border */
[data-theme="amoled"] .t-card-summary {
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(to bottom, rgba(226,226,226,0.61) 0%, rgba(226,226,226,0.09) 40%, transparent 65%) border-box;
  border: 1px solid transparent;
  border-radius: 0;
  box-shadow: none;
}
/* Legal card and upgrade modal: same gradient, keep radius */
[data-theme="amoled"] .legal-card,
[data-theme="amoled"] .upgrade-modal-panel {
  background:
    linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
    linear-gradient(to bottom, rgba(226,226,226,0.61) 0%, rgba(226,226,226,0.09) 40%, transparent 65%) border-box;
  border: 1px solid transparent;
  box-shadow: none;
}

/* AMOLED: content cards — no border, void black */
[data-theme="amoled"] .t-card-content {
  background: var(--bg-card);
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* AMOLED: popup panels — no border (matches .t-card-content; overrides box-shadow border sim) */
[data-theme="amoled"] :is(.modal-overlay-medium, .modal-overlay-dark) .t-card,
[data-theme="amoled"] #sym-tx-modal,
[data-theme="amoled"] #chart-expand-modal {
  border: none;
  box-shadow: none;
}

/* ── MIDNIGHT: GitHub Dark — flat, border-defined, developer DNA ── */
[data-theme="midnight"] .t-card, [data-theme="midnight"] .ticker-wrap {
  box-shadow: none;
  border-color: var(--border);
}
/* Gradient-border cards need transparent border; the .t-card rule above would override
   the canonical transparent border with var(--border) — correct it here. */
[data-theme="midnight"] .t-card-content,
[data-theme="midnight"] .t-card-summary,
[data-theme="midnight"] .legal-card { border-color: transparent; }
[data-theme="midnight"] .mini-chart-card {
  box-shadow: none;
}
[data-theme="midnight"] .mini-chart-card:hover {
  box-shadow: var(--card-shadow-hover);
}

/* Tabs and periods: no border at rest, accent border on hover — matches the
   header buttons' hover treatment (just the border, no fill / shadow flourish). */
[data-theme="midnight"] .tab-inactive {
  border-color: transparent;
}
[data-theme="midnight"] .tab-inactive:hover,
[data-theme="midnight"] .period-inactive:hover {
  border-color: var(--accent);
  transform: none;
  box-shadow: none;
}
/* Header: bottom border only, no blur — crisp like GitHub */
[data-theme="midnight"] header {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── LIGHT: Fintech app — borderless cards, pure shadow, sans ── */
[data-theme="light"] .t-card, [data-theme="light"] .ticker-wrap {
  border-color: transparent;
  box-shadow: var(--card-shadow);
}
[data-theme="light"] .mini-chart-card {
  border-color: transparent;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
}
[data-theme="light"] .mini-chart-card:hover {
  border-color: transparent;
  box-shadow: var(--card-shadow-hover);
}
[data-theme="light"] .tab-inactive {
  background: transparent;
  color: var(--text-sub);
  border-color: var(--border);
}
[data-theme="light"] .tab-inactive:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
}

/* ── SOFT: Modern SaaS — full pills, gradient header, sans DNA ── */
[data-theme="soft"] .t-card, [data-theme="soft"] .ticker-wrap {
  border-color: transparent;
  box-shadow: var(--card-shadow);
}
[data-theme="soft"] .t-card:hover {
  box-shadow: var(--card-shadow-hover);
}
[data-theme="soft"] .mini-chart-card {
  border-color: transparent;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 4px 14px rgba(0,0,0,0.06);
}
[data-theme="soft"] .mini-chart-card:hover {
  border-color: transparent;
  box-shadow: var(--card-shadow-hover);
}
/* Tabs: full pill */
[data-theme="soft"] .tab-inactive {
  background: transparent;
  color: var(--text-sub);
  border-color: transparent;
}
[data-theme="soft"] .tab-inactive:hover {
  background: var(--bg-deep);
  border-color: transparent;
}
/* Period buttons: pill — inherited from --radius-sm:999px */
[data-theme="soft"] .period-inactive {
  background: var(--bg-deep);
  border-color: transparent;
}
[data-theme="soft"] .period-inactive:hover {
  background: var(--bg-hover);
}
/* Gradient bar at top of header */
[data-theme="soft"] header {
  position: relative;
}
[data-theme="soft"] header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #6366f1 0%, #818cf8 30%, #a855f7 60%, #818cf8 80%, #6366f1 100%);
  background-size: 200% 100%;
  animation: soft-header-sweep 5s ease-in-out infinite;
  z-index: 1;
}
@keyframes soft-header-sweep {
  0%   { background-position: 0% 0; }
  50%  { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}

/* Soft: all buttons inherit pill radius (inline-styled buttons are unaffected) */
[data-theme="soft"] button { border-radius: var(--radius-sm); }

/* Soft: cap popup/menu containers — --radius-sm is 999px (pill) which is
   intentional for buttons but excessive for multi-line popout menus */
[data-theme="soft"] .tab-overflow-menu,
[data-theme="soft"] .bench-dropdown-menu,
[data-theme="soft"] .export-menu-popup,
[data-theme="soft"] .stat-tip .info-bubble,
[data-theme="soft"] .mkt-tip               { border-radius: 12px; }
[data-theme="soft"] .tab-overflow-item     { border-radius: 8px; }
/* Summary cards: indigo ambient glow (must come after .t-card box-shadow above) */
[data-theme="soft"] .t-card-summary,
[data-theme="soft"] .legal-card {
  box-shadow: 0 2px 6px rgba(99,102,241,0.14), 0 8px 28px rgba(99,102,241,0.12);
}

/* ── VALENCE: Slate-blue fintech — clean grey, brand accent ── */
[data-theme="valence"] .t-card-summary,
[data-theme="valence"] .legal-card {
  box-shadow: var(--card-shadow), 0 2px 6px rgba(58,90,144,0.14), 0 8px 24px rgba(58,90,144,0.12);
}
[data-theme="valence"] .t-card-content {
  box-shadow: var(--card-shadow), 0 2px 6px rgba(58,90,144,0.06), 0 8px 24px rgba(58,90,144,0.05);
}

/* ── AURORA: Glassmorphism — frosted cards, violet glow, nebula body ── */
/* No backdrop-filter on t-card: multiple overlapping blur regions between
   cards + sticky header cause compositor flickering in Chrome. The nearly-
   transparent background already lets the gradient bleed through. */
/* .legal-card is not a .t-card, so it misses this opaque violet fill and would
   otherwise show the canonical --_sg gradient bleeding through the near-transparent
   --bg-card. Including it here gives it the identical frosted summary-card surface. */
[data-theme="aurora"] .t-card, [data-theme="aurora"] .ticker-wrap, [data-theme="aurora"] .legal-card {
  background: rgba(167,139,250,0.06);
  border-color: rgba(167,139,250,0.2);
}
/* (Aurora's watchlist band no longer needs a special case: the shared
   --wg-band-tint in 07-csp-utilities now tints each theme's --bg-hover with its own
   --accent, which covers aurora's violet identically.) */
[data-theme="aurora"] .mini-chart-card {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
[data-theme="aurora"] .mini-chart-card:hover {
  background: rgba(167,139,250,0.1);
  border-color: rgba(167,139,250,0.4);
  box-shadow: 0 8px 36px rgba(0,0,0,0.45), 0 0 0 1px rgba(167,139,250,0.22);
}
/* Aurora: glass violet active tab */
[data-theme="aurora"] .tab-active {
  background: rgba(167,139,250,0.2);
  color: #c4b5fd;
  border-color: rgba(167,139,250,0.35);
}
/* Tabs use the same soft pattern as aurora's period buttons and the
   dark/midnight tabs: subtle --bg-deep fill, transparent border at rest,
   accent border on hover. */
[data-theme="aurora"] .tab-inactive {
  background: var(--bg-deep);
  border-color: transparent;
}
[data-theme="aurora"] .tab-inactive:hover {
  border-color: var(--accent);
  box-shadow: none;
}
/* Aurora: glass period buttons */
[data-theme="aurora"] .period-active {
  background: rgba(167,139,250,0.22);
  color: #c4b5fd;
  border-color: rgba(167,139,250,0.45);
}
/* .period-inactive on aurora now uses the universal soft button style
   (.btn-soft group in 03-components.css); the theme tokens (--bg-deep,
   --accent) give it an aurora-appropriate colour without a bespoke rule. */
/* Aurora: summary cards — gradient ring via ::after mask */
[data-theme="aurora"] .t-card-summary,
[data-theme="aurora"] .legal-card,
[data-theme="aurora"] .upgrade-modal-panel {
  position: relative;
  border: 1px solid transparent;
}
[data-theme="aurora"] .t-card-summary::after,
[data-theme="aurora"] .legal-card::after,
[data-theme="aurora"] .upgrade-modal-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
  padding: 1.5px;
  background: linear-gradient(to bottom, rgba(167,139,250,0.61) 0%, rgba(56,189,248,0.22) 45%, transparent 75%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 0;
}

[data-theme="aurora"] .t-card-summary:hover { border-color: rgba(167,139,250,0.3); }

/* Row hover: violet glass tint */
[data-theme="aurora"] .t-row-hover:hover td {
  background: rgba(167,139,250,0.07);
}
/* Aurora: match CTA buttons to violet accent */
[data-theme="aurora"] .bg-blue-600 { background-color: var(--accent) !important; }
[data-theme="aurora"] .hover\:bg-blue-500:hover { background-color: var(--accent-soft) !important; }

/* ── AMOLED: CRT phosphor scanline overlay ── */
[data-theme="amoled"] body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent   0px,
    transparent   2px,
    rgba(0,0,0,0.07) 2px,
    rgba(0,0,0,0.07) 3px
  );
  pointer-events: none;
  z-index: 9998;
}

/* ── GLASS: Apple Liquid Glass — near-transparent with corner light refraction ── */

/* Liquid glass cards — thick curved glass rim look */
[data-theme="glass"] .t-card, [data-theme="glass"] .ticker-wrap {
  position: relative;
  background: rgba(255,255,255,0.18);
  /* Thick bright border = physical glass rim */
  border: 2px solid rgba(255,255,255,0.82);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.90),
    0 8px 32px rgba(31,38,135,0.18),
    0 2px 8px rgba(0,0,0,0.08);
  overflow: visible;
  contain: layout style;
}
[data-theme="glass"] .ticker-wrap {
  overflow: hidden;
  /* Ticker animates constantly — skip backdrop-filter to avoid continuous compositing repaints */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--bg-card);
  contain: layout style paint;
}
/* Ticker fades must use the opaque surface color — bg-card is semi-transparent
   and wouldn't mask text. Blend from surface to transparent then to surface. */
[data-theme="glass"] .ticker-wrap::before {
  background: linear-gradient(to right, #f5f9fd 20%, rgba(245,249,253,0) 100%);
}
[data-theme="glass"] .ticker-wrap::after {
  background: linear-gradient(to left, #f5f9fd 20%, rgba(245,249,253,0) 100%);
}
/* Perimeter vignette — bright rim fading to clear center, like curved glass */
[data-theme="glass"] .t-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 92% 88% at 50% 50%,
    transparent 40%,
    rgba(255,255,255,0.70) 100%
  );
  pointer-events: none;
  z-index: 0;
}
[data-theme="glass"] .t-card > * { position: relative; z-index: 1; }
[data-theme="glass"] .t-card:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.92);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.95),
    0 12px 40px rgba(31,38,135,0.24),
    0 4px 12px rgba(0,0,0,0.10);
}
[data-theme="glass"] .mini-chart-card {
  background: rgba(255,255,255,0.18);
  border: 2px solid rgba(255,255,255,0.80);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.88),
    0 4px 16px rgba(31,38,135,0.12),
    0 1px 4px rgba(0,0,0,0.07);
}
[data-theme="glass"] .mini-chart-card:hover {
  background: rgba(255,255,255,0.28);
  border-color: rgba(0,122,255,0.60);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.92),
    0 8px 24px rgba(31,38,135,0.18),
    0 0 0 1px rgba(0,122,255,0.25);
}

/* Apple segmented-control tabs: white raised active, transparent inactive */
[data-theme="glass"] .tab-active {
  background: rgba(255,255,255,0.92);
  color: var(--accent);
  border-color: rgba(0,0,0,0.07);
  box-shadow: 0 1px 4px rgba(0,0,0,0.1), 0 0 0 0.5px rgba(0,0,0,0.06);
}
[data-theme="glass"] .tab-inactive {
  background: transparent;
  color: var(--text-sub);
  border-color: transparent;
}
[data-theme="glass"] .tab-inactive:hover {
  background: rgba(255,255,255,0.5);
  border-color: rgba(255,255,255,0.88);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.9), 0 4px 12px rgba(31,38,135,0.14);
}

/* Period buttons: same segmented control logic */
[data-theme="glass"] .period-active {
  background: rgba(255,255,255,0.92);
  color: var(--accent);
  border-color: rgba(0,0,0,0.08);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
[data-theme="glass"] .period-inactive {
  background: transparent;
  border-color: transparent;
  color: var(--text-sub);
}
[data-theme="glass"] .period-inactive:hover {
  background: rgba(255,255,255,0.52);
  border-color: rgba(255,255,255,0.82);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.82);
}

/* Summary cards: transparent border + top-down prismatic ring */
[data-theme="glass"] .t-card-summary { border-color: transparent; }
[data-theme="glass"] .t-card-summary:hover { border-color: rgba(255,255,255,0.92); }
[data-theme="glass"] .t-card-summary::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: var(--radius-card);
  padding: 2px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.39) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 0;
}

/* Glass: content cards — same prismatic ring treatment (ticker-wrap excluded: uses ::after for text-fade) */
[data-theme="glass"] .t-card-content,
[data-theme="glass"] .t-card-content:hover { border-color: transparent; }
[data-theme="glass"] .t-card-content:not(.ticker-wrap)::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: var(--radius-card);
  padding: 2px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.39) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 0;
}

/* Glass: legal card and upgrade modal — liquid glass base + summary-card gradient ring */
[data-theme="glass"] .legal-card,
[data-theme="glass"] .upgrade-modal-panel {
  position: relative;
  background: rgba(255,255,255,0.18);
  border: 2px solid transparent;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.90),
    0 8px 32px rgba(31,38,135,0.18),
    0 2px 8px rgba(0,0,0,0.08);
  overflow: visible;
}
[data-theme="glass"] .legal-card::before,
[data-theme="glass"] .upgrade-modal-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 92% 88% at 50% 50%,
    transparent 40%,
    rgba(255,255,255,0.70) 100%
  );
  pointer-events: none;
  z-index: 0;
}
[data-theme="glass"] .legal-card > *,
[data-theme="glass"] .upgrade-modal-panel > * { position: relative; z-index: 1; }
[data-theme="glass"] .legal-card::after,
[data-theme="glass"] .upgrade-modal-panel::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: var(--radius-card);
  padding: 2px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.39) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 0;
}

/* ── Glass: modal panels — premium frosted glass, near-opaque for legibility ──
   Covers all overlay dialogs, direct-positioned panels, and the upgrade panel.
   Specificity: .modal-overlay-* .t-card = 0,0,3 (beats .t-card override 0,0,2);
   ID rules = 0,1,1 (beats canonical 0,0,2 and .t-card override 0,0,2).        */
[data-theme="glass"] .modal-overlay-medium .t-card,
[data-theme="glass"] .modal-overlay-dark .t-card,
[data-theme="glass"] #sym-tx-modal,
[data-theme="glass"] #chart-expand-modal,
[data-theme="glass"] .upgrade-modal-panel {
  background: rgba(233,244,255,0.62);
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  border: 1px solid transparent;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.98),
    inset 0 -1px 0 rgba(31,38,135,0.06),
    0 24px 64px rgba(31,38,135,0.20),
    0 4px 16px rgba(0,0,0,0.10);
}
/* Glass: popup panels — same prismatic top-down ring as .t-card-content */
[data-theme="glass"] :is(.modal-overlay-medium, .modal-overlay-dark) .t-card::after,
[data-theme="glass"] #sym-tx-modal::after,
[data-theme="glass"] #chart-expand-modal::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: var(--radius-card);
  padding: 2px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.39) 40%, transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 0;
}

/* ── Aurora: modal panels — deep void, near-opaque, violet nebula border ──
   Covers all overlay dialogs, direct-positioned panels, and the upgrade panel.
   Specificity: .modal-overlay-* .t-card = 0,0,3; ID rules = 0,1,1.           */
[data-theme="aurora"] .modal-overlay-medium .t-card,
[data-theme="aurora"] .modal-overlay-dark .t-card,
[data-theme="aurora"] #sym-tx-modal,
[data-theme="aurora"] #chart-expand-modal,
[data-theme="aurora"] .upgrade-modal-panel {
  background: rgba(10,11,22,0.85);
  border: 1px solid rgba(167,139,250,0.2);
  color: var(--text-primary);
  box-shadow:
    0 0 0 1px rgba(167,139,250,0.10),
    0 24px 64px rgba(0,0,0,0.70),
    0 4px 16px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(167,139,250,0.12);
}
[data-theme="aurora"] .modal-overlay-medium .t-card:hover,
[data-theme="aurora"] .modal-overlay-dark .t-card:hover,
[data-theme="aurora"] #sym-tx-modal:hover,
[data-theme="aurora"] #chart-expand-modal:hover,
[data-theme="aurora"] .upgrade-modal-panel:hover {
  background: rgba(10,11,22,0.85);
  box-shadow:
    0 0 0 1px rgba(167,139,250,0.18),
    0 28px 72px rgba(0,0,0,0.75),
    0 6px 20px rgba(0,0,0,0.50),
    inset 0 1px 0 rgba(167,139,250,0.20);
}

/* Popout button dropdowns: more opaque on transparent themes */
[data-theme="aurora"] #benchmark-toggles,
[data-theme="aurora"] #export-menu,
[data-theme="aurora"] .theme-picker-list,
[data-theme="aurora"] .tab-overflow-menu,
[data-theme="aurora"] .bench-dropdown-menu,
[data-theme="aurora"] .mkt-tip {
  background: rgba(18,17,40,0.96) !important;
  border-color: rgba(167,139,250,0.25) !important;
}
[data-theme="glass"] #benchmark-toggles,
[data-theme="glass"] #export-menu,
[data-theme="glass"] .theme-picker-list,
[data-theme="glass"] .tab-overflow-menu,
[data-theme="glass"] .bench-dropdown-menu,
[data-theme="glass"] .mkt-tip {
  background: rgba(225,235,250,0.78) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Row hover: Apple blue micro-tint */
[data-theme="glass"] .t-row-hover:hover td {
  background: rgba(0,122,255,0.04);
}

/* All buttons: Apple-style (rounded, white glass feel) */
[data-theme="glass"] button { border-radius: var(--radius-sm); }

/* CTA buttons: Apple system blue */
[data-theme="glass"] .bg-blue-600 {
  background-color: var(--accent) !important;
}
[data-theme="glass"] .hover\:bg-blue-500:hover {
  background-color: rgba(0,122,255,0.84) !important;
}

/* Table header deep: recessed glass layer */
[data-theme="glass"] .t-deep {
  background: rgba(255,255,255,0.38);
}

/* Header: liquid glass panel — thin prismatic rim at bottom */
[data-theme="glass"] header {
  border-bottom: 1px solid rgba(255,255,255,0.51) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), inset 0 1.5px 0 rgba(255,255,255,0.80);
}

/* ── SHADOW: Carved void — vignette darkness, sunken cards, ash DNA ── */

/* Viewport vignette: darkness pools at the edges, keeping the eye on the data */
[data-theme="shadow"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 75% at 50% 35%,
    transparent 42%,
    rgba(0,0,0,0.62) 100%
  );
  pointer-events: none;
  z-index: 2;
}

/* Cards: no border, pure inset — feels carved into void */
[data-theme="shadow"] .t-card,
[data-theme="shadow"] .ticker-wrap {
  border-color: transparent;
  box-shadow: var(--card-shadow);
}
[data-theme="shadow"] .t-card:hover {
  border-color: rgba(100,100,100,0.10);
}
[data-theme="shadow"] .mini-chart-card {
  border-color: transparent;
  box-shadow: var(--card-shadow);
}
[data-theme="shadow"] .mini-chart-card:hover {
  transform: none;
  box-shadow: var(--card-shadow-hover);
}

/* Header: pure opaque black, no blur, no accent */
[data-theme="shadow"] header {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Tabs: invisible border at rest, hairline rim on hover */
[data-theme="shadow"] .tab-inactive {
  border-color: transparent;
  color: var(--text-muted);
}
[data-theme="shadow"] .tab-inactive:hover {
  background: rgba(255,255,255,0.015);
  border-color: rgba(100,100,100,0.18);
  transform: none;
  box-shadow: none;
}

/* Period buttons: near-invisible at rest, hairline on hover */
[data-theme="shadow"] .period-inactive {
  background: transparent;
  border-color: #111111;
  color: var(--text-muted);
}
[data-theme="shadow"] .period-inactive:hover {
  background: rgba(255,255,255,0.018);
  border-color: rgba(100,100,100,0.22);
  box-shadow: none;
  transform: none;
}

/* Row hover: barely-there tint — ash ghost */
[data-theme="shadow"] .t-row-hover:hover td {
  background: rgba(255,255,255,0.014);
}

/* Dropdown/popup menus: absolute black, hairline border */
[data-theme="shadow"] #benchmark-toggles,
[data-theme="shadow"] #export-menu,
[data-theme="shadow"] .theme-picker-list,
[data-theme="shadow"] .bench-dropdown-menu {
  background: rgba(6,6,6,0.99) !important;
  border-color: rgba(100,100,100,0.16) !important;
}

/* Accent-background elements: cold ash text (no white against near-black bg) */
[data-theme="shadow"] .tab-active,
[data-theme="shadow"] .period-active,
[data-theme="shadow"] .btn-accent,
[data-theme="shadow"] .btn-accent-warn,
[data-theme="shadow"] .btn-accent-sm,
[data-theme="shadow"] .btn-full-accent {
  color: rgba(190,190,190,0.88);
}
/* tab-tx uses !important in base — override with equal specificity + !important */
[data-theme="shadow"] button.tab-tx,
[data-theme="shadow"] button.tab-tx.tab-inactive {
  color: rgba(190,190,190,0.88) !important;
}

/* Content cards: borderless — pure inset shadow, cards dissolve into the void */
[data-theme="shadow"] .t-card-content {
  background: var(--bg-card);
  border: none;
  box-shadow: var(--card-shadow);
}

/* Summary cards: borderless — depth from inset shadow alone */
[data-theme="shadow"] .t-card-summary,
[data-theme="shadow"] .legal-card,
[data-theme="shadow"] .upgrade-modal-panel {
  background: var(--bg-card);
  border: none;
  box-shadow:
    var(--card-shadow),
    0 8px 48px rgba(0,0,0,0.92);
}