/*
 * TL Tracker interface system — 2026
 *
 * Loaded after the route-level styles. This file is intentionally the final
 * presentation layer: page scripts and DOM contracts remain unchanged while
 * every public, application and admin surface shares one visual language.
 */

:root {
  /* Primitive → semantic → component tokens. */
  --ink-0: #080a0d;
  --ink-1: #0c0f13;
  --ink-2: #11151a;
  --ink-3: #171c22;
  --ink-4: #1d232b;
  --line-1: #20262d;
  --line-2: #2a323b;
  --line-3: #39434e;
  --paper-1: #f4f7f8;
  --paper-2: #b5bec8;
  --paper-3: #87929f;

  --accent-rgb: 64, 174, 190;
  --accent: #40aebe;
  --accent-hover: #53bdcc;
  --accent-soft: rgba(var(--accent-rgb), .11);
  --accent-border: rgba(var(--accent-rgb), .32);
  --accent-contrast: #041517;

  --success-rgb: 68, 199, 143;
  --success: #44c78f;
  --warning-rgb: 232, 170, 87;
  --warning: #e8aa57;
  --danger-rgb: 239, 106, 112;
  --danger: #ef6a70;

  /* Product semantics. These are intentionally separate from the compatibility aliases below:
     blue is information, amber is opportunity, purple is Premium, and region hues stay stable
     across tables, charts, chips and item pages. */
  --info-rgb: 103, 142, 255;
  --info: #678eff;
  --opportunity-rgb: 236, 169, 72;
  --opportunity: #eca948;
  --premium-rgb: 161, 125, 245;
  --premium: #a17df5;
  --premium-soft: rgba(var(--premium-rgb), .11);
  --region-eu-rgb: 111, 139, 255;
  --region-as-rgb: 55, 202, 183;
  --region-us-rgb: 229, 105, 153;
  --region-eu: #6f8bff;
  --region-jp: #37cab7;
  --region-na: #e56999;

  --surface-page: var(--ink-0);
  --surface-sidebar: var(--ink-1);
  --surface-card: var(--ink-2);
  --surface-raised: var(--ink-3);
  --surface-hover: var(--ink-4);
  --surface-input: #0e1217;
  --border-subtle: var(--line-1);
  --border-default: var(--line-2);
  --border-strong: var(--line-3);
  --content-primary: var(--paper-1);
  --content-secondary: var(--paper-2);
  --content-tertiary: var(--paper-3);

  /* Compatibility aliases used by the existing pages and charts. */
  --bg: var(--surface-page);
  --bg-1: var(--surface-sidebar);
  --bg-2: var(--surface-card);
  --bg-3: var(--surface-raised);
  --bg-card: var(--surface-card);
  --bg-elevated: var(--surface-raised);
  --bg-glass: rgba(12, 15, 19, .96);
  --border: var(--border-subtle);
  --border-2: var(--border-default);
  --hairline: var(--border-subtle);
  --text: var(--content-primary);
  --text-2: var(--content-secondary);
  --text-3: var(--content-tertiary);
  --blue-rgb: var(--accent-rgb);
  --blue: var(--accent);
  --blue-bright: #72cbd6;
  --blue-hover: var(--accent-hover);
  --blue-dim: var(--accent-soft);
  --blue-glow: rgba(var(--accent-rgb), .2);
  --green-rgb: var(--success-rgb);
  --green: var(--success);
  --green-hover: #56d09d;
  --green-dim: rgba(var(--success-rgb), .11);
  --gold-rgb: var(--warning-rgb);
  --gold: var(--warning);
  --gold-hover: #efb76e;
  --gold-dim: rgba(var(--warning-rgb), .11);
  --red-rgb: var(--danger-rgb);
  --red: var(--danger);
  --red-bright: #ff858a;
  --red-dim: rgba(var(--danger-rgb), .11);
  --positive: var(--success);
  --negative: var(--danger);
  --info: var(--accent);

  --r-xs: 5px;
  --r-sm: 7px;
  --r-md: 9px;
  --r-lg: 11px;
  --r-xl: 13px;
  --r-surface: 10px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .28);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .28);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .38);
  --shadow-xl: 0 28px 80px rgba(0, 0, 0, .48);

  --maxw: 1260px;
  --maxw-data: 1480px;
  --maxw-data-wide: min(1760px, calc(100vw - 48px));
  --gutter: clamp(18px, 2.4vw, 36px);
  --nav-h: 58px;
  --rail-w: 224px;
  --rail-collapsed-w: 62px;

  --fs-title-page: clamp(23px, 2vw, 28px);
  --fs-table: 13px;
  --fs-table-dense: 12px;
  --fs-meta: 12px;
  --fs-label: 12px;
  --section-gap-app: 22px;
  --section-gap-marketing: clamp(72px, 9vw, 120px);
  --control-h: 40px;
  --control-border: #5c6977;
  --workspace-accent: var(--accent);
  --workspace-accent-rgb: var(--accent-rgb);
  --duration-fast: 150ms;
  --duration-normal: 220ms;
  --ease-product: cubic-bezier(.2, .8, .2, 1);
}

/* ── Final product shell: command layer + native-feeling mobile navigation ── */
.tl-commandbar {
  position: sticky;
  top: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: minmax(280px, 620px) auto auto;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 8px var(--gutter);
  border-bottom: 1px solid var(--border-subtle);
  background: color-mix(in srgb, var(--surface-page) 92%, transparent);
  backdrop-filter: blur(18px) saturate(1.15);
}

.tl-command-search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 40px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  background: var(--surface-input);
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.tl-command-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.tl-command-search svg {
  width: 18px;
  height: 18px;
  margin-left: 12px;
  color: var(--content-tertiary);
  flex: 0 0 auto;
}

.tl-command-search input {
  min-width: 0;
  flex: 1;
  height: 100%;
  padding: 0 10px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--content-primary);
  font: inherit;
}

.tl-command-search kbd {
  margin-right: 8px;
  padding: 2px 6px;
  border: 1px solid var(--border-default);
  border-radius: 4px;
  color: var(--content-tertiary);
  background: var(--surface-card);
  font: 10px/1.4 var(--font-mono);
}

.tl-command-regions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--surface-card);
}

.tl-command-regions a,
.tl-command-alerts {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  color: var(--content-secondary);
  text-decoration: none;
  font-size: 12px;
  font-weight: 620;
}

.tl-command-regions a:hover,
.tl-command-alerts:hover { color: var(--content-primary); background: var(--surface-hover); }

.tl-command-alerts {
  justify-self: end;
  min-height: 36px;
  border: 1px solid var(--accent-border);
  color: var(--accent-hover);
  background: var(--accent-soft);
}

.tl-region-dot { width: 7px; height: 7px; border-radius: 50%; }
.tl-region-dot.eu { background: var(--region-eu); }
.tl-region-dot.as { background: var(--region-jp); }
.tl-region-dot.us { background: var(--region-na); }

.tl-mobile-nav { display: none; }

@media (min-width: 881px) {
  /* A new redesign starts expanded even when the previous icon-only rail stored a collapsed
     preference. The current collapse button writes a new versioned preference in site.js. */
  html:not(.rail-collapsed) .tl-nav-links a { padding-inline: 12px; }
  body.tl-page main.page-wrap,
  body.tl-page main.page-wrap-wide { padding-bottom: 48px; }
}

@media (max-width: 880px) {
  .tl-commandbar { display: none; }
  body.has-mobile-nav .tl-hamburger { display: none !important; }
  /* The bottom bar replaces the old phone header completely. Hiding the hamburger while keeping
     the header reservation left a blank 58px slab above every app page on real Safari. */
  body.has-mobile-nav {
    padding-top: 0;
    padding-bottom: calc(68px + env(safe-area-inset-bottom));
  }
  body.has-mobile-nav:not(.page-marketing)::before { display: none; }
  body.has-mobile-nav .tl-up-chip {
    top: auto;
    right: 10px;
    bottom: calc(72px + env(safe-area-inset-bottom));
    width: auto;
    height: 38px;
    min-height: 38px;
    padding: 0 13px;
    border-radius: var(--r-pill);
  }

  .tl-mobile-nav {
    position: fixed;
    inset: auto 0 0;
    z-index: 1650;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: calc(62px + env(safe-area-inset-bottom));
    padding: 5px max(6px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(6px, env(safe-area-inset-left));
    border-top: 1px solid var(--border-default);
    background: color-mix(in srgb, var(--surface-sidebar) 96%, transparent);
    box-shadow: 0 -12px 34px rgba(0, 0, 0, .28);
    backdrop-filter: blur(18px) saturate(1.18);
    transition: opacity var(--duration-fast) ease, transform var(--duration-fast) ease;
  }

  /* The More drawer replaces the bottom bar while it is open. Keeping both navigation
     surfaces visible made the bar cover the drawer's account row on iOS and left two competing
     sets of destinations on screen. The drawer and its scrim own the entire viewport here. */
  html.rail-open .tl-mobile-nav {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(100%);
  }

  .tl-mobile-nav a,
  .tl-mobile-nav button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 52px;
    padding: 4px 2px;
    border: 0;
    border-radius: var(--r-sm);
    color: var(--content-tertiary);
    background: transparent;
    text-decoration: none;
    font: 600 10px/1.15 var(--font-body);
    cursor: pointer;
  }

  .tl-mobile-nav svg { width: 20px; height: 20px; }
  .tl-mobile-nav :is(a, button):hover,
  .tl-mobile-nav :is(a, button):focus-visible { color: var(--content-primary); background: var(--surface-hover); }
  .tl-mobile-nav a.active { color: var(--accent-hover); background: var(--accent-soft); }
  .tl-mobile-nav a.active::before {
    content: '';
    position: absolute;
    top: 1px;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
  }
}

@media (max-width: 390px) {
  .tl-mobile-nav a,
  .tl-mobile-nav button { font-size: 9px; }
}

html[data-theme="light"] {
  color-scheme: light;
  --ink-0: #f4f6f8;
  --ink-1: #ffffff;
  --ink-2: #ffffff;
  --ink-3: #f0f3f6;
  --ink-4: #e8edf1;
  --line-1: #dfe4e9;
  --line-2: #cbd3da;
  --line-3: #aeb9c3;
  --paper-1: #13181e;
  --paper-2: #4c5864;
  --paper-3: #65727f;
  --surface-page: var(--ink-0);
  --surface-sidebar: var(--ink-1);
  --surface-card: var(--ink-2);
  --surface-raised: var(--ink-1);
  --surface-hover: var(--ink-4);
  --surface-input: #ffffff;
  --border-subtle: var(--line-1);
  --border-default: var(--line-2);
  --border-strong: var(--line-3);
  --content-primary: var(--paper-1);
  --content-secondary: var(--paper-2);
  --content-tertiary: var(--paper-3);
  --control-border: #8795a3;
  --accent-rgb: 25, 119, 139;
  --accent: #19778b;
  --accent-hover: #126579;
  --accent-soft: rgba(var(--accent-rgb), .09);
  --accent-border: rgba(var(--accent-rgb), .32);
  --accent-contrast: #ffffff;
  --bg: var(--surface-page);
  --bg-1: var(--surface-sidebar);
  --bg-2: var(--surface-card);
  --bg-3: var(--surface-raised);
  --bg-card: var(--surface-card);
  --bg-elevated: var(--surface-raised);
  --bg-glass: rgba(255, 255, 255, .96);
  --border: var(--border-subtle);
  --border-2: var(--border-default);
  --hairline: var(--border-subtle);
  --text: var(--content-primary);
  --text-2: var(--content-secondary);
  --text-3: var(--content-tertiary);
  --blue-rgb: var(--accent-rgb);
  --blue: var(--accent);
  --blue-bright: #0f6174;
  --blue-hover: var(--accent-hover);
  --blue-dim: var(--accent-soft);
  --green-rgb: 15, 115, 80;
  --green: #0f7350;
  --green-hover: #0b6042;
  --green-dim: rgba(15, 115, 80, .09);
  --gold-rgb: 150, 101, 15;
  --gold: #96650f;
  --gold-hover: #7c520a;
  --gold-dim: rgba(150, 101, 15, .10);
  --red-rgb: 180, 50, 56;
  --red: #b43238;
  --red-bright: #98252b;
  --red-dim: rgba(180, 50, 56, .09);
  --success: var(--green);
  --warning: var(--gold);
  --danger: var(--red);
  --info-rgb: 48, 91, 196;
  --info: #305bc4;
  --opportunity-rgb: 157, 94, 10;
  --opportunity: #9d5e0a;
  --premium-rgb: 103, 71, 181;
  --premium: #6747b5;
  --premium-soft: rgba(var(--premium-rgb), .09);
  --region-eu-rgb: 55, 84, 184;
  --region-as-rgb: 8, 126, 109;
  --region-us-rgb: 170, 56, 105;
  --region-eu: #3754b8;
  --region-jp: #087e6d;
  --region-na: #aa3869;
  --positive: var(--green);
  --negative: var(--red);
  --shadow-sm: 0 1px 2px rgba(18, 27, 35, .06);
  --shadow-md: 0 8px 24px rgba(18, 27, 35, .09);
  --shadow-lg: 0 18px 48px rgba(18, 27, 35, .12);
  --shadow-xl: 0 28px 80px rgba(18, 27, 35, .16);
}

html {
  scrollbar-color: var(--border-strong) var(--surface-page);
  scroll-padding-top: 20px;
}

body {
  background: var(--surface-page);
  color: var(--content-primary);
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: -.006em;
}

body::after,
.lux-field,
.lux-clicklight,
.lux-spark,
.lux-aurora,
.border-glow::before,
.card-spotlight::before {
  display: none !important;
}

body.page-marketing::before {
  background: radial-gradient(70% 55% at 50% -18%, rgba(var(--accent-rgb), .075), transparent 68%);
  opacity: 1;
}

::selection { background: rgba(var(--accent-rgb), .28); color: #fff; }

a { text-underline-offset: 3px; }
h1, h2, h3, h4, h5, h6 { letter-spacing: -.025em; }
p, li, dd { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent-hover);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* The previous intersection reveal could leave whole sections blank in captures
   and on restored tabs. Content is now immediately available; motion is reserved
   for direct interaction feedback. */
[data-reveal], .reveal, .reveal.visible {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* ── Application shell ───────────────────────────────────────────────────── */
.tl-nav {
  width: var(--rail-w);
  background: var(--surface-sidebar);
  border-right: 1px solid var(--border-subtle);
  box-shadow: none;
}

.tl-nav-inner {
  gap: 0;
  padding: 14px 10px 10px;
}

.tl-brand {
  min-height: 42px;
  padding: 0 10px;
  gap: 10px;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.015em;
}

.tl-brand-mark { width: 22px; height: 22px; }

.tl-nav-links { gap: 2px; }
.tl-nav-links .rail-group {
  margin: 16px 10px 6px;
  color: var(--content-tertiary);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
}

.tl-nav-links a,
.rail-foot a,
.rail-settings {
  min-height: 40px;
  border-radius: var(--r-sm);
  padding: 9px 10px;
  color: var(--content-secondary);
  font-size: 13px;
  font-weight: 520;
  letter-spacing: 0;
  transition: color .16s ease, background .16s ease, border-color .16s ease;
}

.tl-nav-links a:hover,
.rail-foot a:hover,
.rail-settings:hover {
  color: var(--content-primary);
  background: rgba(255, 255, 255, .045);
  transform: none;
}

.tl-nav-links a.active,
.tl-nav-links a.active:hover,
.tl-nav-links a.active:focus-visible {
  color: var(--content-primary);
  background: var(--accent-soft);
}

.tl-nav-links a.active::before {
  width: 2px;
  left: -1px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
  box-shadow: none;
}

.tl-nav-links a.active .rail-ico { color: var(--accent-hover); }
.rail-ico { width: 18px; height: 18px; color: var(--content-tertiary); }

.rail-foot {
  border-top: 1px solid var(--border-subtle);
  padding: 8px 10px 6px;
  gap: 2px;
}

.rail-foot a.nav-upgrade,
.tl-nav-links a.nav-upgrade {
  margin: 0;
  color: var(--warning) !important;
  background: rgba(var(--warning-rgb), .07);
  border-color: rgba(var(--warning-rgb), .22);
}

.rail-discord { box-shadow: none !important; }
.tl-nav .rail-ico, .tl-nav .rail-ico > *, .rail-toggle svg,
.tl-nav-auth a { animation: none !important; transform: none !important; }

.tl-nav-auth {
  border-top: 1px solid var(--border-subtle);
  padding: 10px;
  gap: 7px;
}

.tl-nav-auth a {
  min-height: 36px;
  border-color: var(--border-subtle);
  background: transparent;
}

.rail-toggle {
  color: var(--content-tertiary);
  border-top-color: var(--border-subtle);
}

.rail-drawer-close { display: none; }

body { transition: padding-left .18s ease; }

.page-wrap,
.page-wrap-wide {
  padding-inline: var(--gutter);
}

.page-wrap { max-width: var(--maxw); }
.page-wrap-wide { max-width: var(--maxw-data); }

/* ── Page hierarchy ──────────────────────────────────────────────────────── */
.page-titlebar,
.pg-head,
.ah,
.sup-hero,
.st-hero {
  padding: 32px 0 20px;
  gap: 10px 14px;
}

.page-titlebar h1,
.pg-head h1,
.ah h1,
.sup-hero h1,
.st-hero h1 {
  color: var(--content-primary);
  font-size: var(--fs-title-page);
  font-weight: 650;
  line-height: 1.15;
}

.page-titlebar .pt-sub,
.pg-head p,
.ah p,
.sup-hero p,
.st-hero p {
  max-width: 70ch;
  color: var(--content-secondary);
  font-size: 14px;
  line-height: 1.55;
}

.page-titlebar .pt-status,
.eyebrow,
.section-kicker,
.field-label,
.filter-label {
  color: var(--content-tertiary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
}

.section-head { margin-bottom: 16px; }
.section-head h2,
.section-head h3,
.section-card > h2,
.section-card > h3 {
  color: var(--content-primary);
  font-size: 16px;
  font-weight: 630;
  letter-spacing: -.018em;
}
.section-head .section-sub,
.section-card > .section-sub { color: var(--content-secondary); font-size: 13px; }

/* ── Cards, bands and state containers ──────────────────────────────────── */
.card,
.section-card,
.stat-card,
.filter-bar,
.filter-panel,
.toolbar,
.state-box,
.empty-state,
.loading-state,
.banner,
.cta-band,
.table-wrap,
.view-strip,
.stat-strip {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-surface);
  box-shadow: none;
}

.card {
  background: var(--surface-card);
  border-color: var(--border-subtle);
  padding: 20px;
  overflow: clip;
}
.card:hover { border-color: var(--border-default); transform: none; box-shadow: none; }

.section-card {
  padding: clamp(18px, 2vw, 24px);
  margin-bottom: 18px;
}

.stat-card { padding: 17px 18px; }
.stat-card:hover { border-color: var(--border-default); transform: none; }

.state-box,
.empty-state,
.loading-state {
  padding: 28px 24px;
  color: var(--content-secondary);
  text-align: left;
}

.empty-state h2, .empty-state h3,
.state-box h2, .state-box h3 { color: var(--content-primary); }

.banner,
.tl-ref-note,
.tl-credit-note {
  border-radius: var(--r-md);
  box-shadow: none;
}

/* ── Controls ───────────────────────────────────────────────────────────── */
button, input, select, textarea { font: inherit; }

.btn,
.btn-sm,
.btn-lg,
.btn-xl,
.btn-quiet,
.ma-btn,
.filter-btn,
.range-btn,
.lane-filter,
.chip,
.grade-chip {
  border-radius: var(--r-sm);
  box-shadow: none;
  font-family: var(--font-body);
  letter-spacing: 0;
}

.btn {
  min-height: var(--control-h);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 620;
  transition: background .16s ease, border-color .16s ease, color .16s ease, opacity .16s ease;
}
.btn:hover { transform: none; box-shadow: none; }
.btn:active { transform: translateY(1px); }
.btn-sm { min-height: 34px; padding: 7px 12px; font-size: 12px; }
.btn-lg { min-height: 44px; padding: 10px 18px; font-size: 14px; }
.btn-xl { min-height: 48px; padding: 12px 22px; font-size: 15px; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-contrast); }
.btn-outline {
  background: transparent;
  border-color: var(--border-default);
  color: var(--content-secondary);
}
.btn-outline:hover { background: var(--surface-hover); border-color: var(--border-strong); color: var(--content-primary); }
.btn-ghost { color: var(--content-secondary); }
.btn-ghost:hover { background: var(--surface-hover); color: var(--content-primary); }
.btn-success { background: var(--green); color: #061811; border-color: var(--green); }
.btn-premium { background: var(--warning); color: #211505; border-color: var(--warning); }
.btn-danger { background: rgba(var(--danger-rgb), .12); color: var(--danger); border-color: rgba(var(--danger-rgb), .28); }
.btn-danger:hover { background: rgba(var(--danger-rgb), .18); border-color: rgba(var(--danger-rgb), .42); }

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea,
.search-input {
  min-height: var(--control-h);
  border: 1px solid var(--control-border);
  border-radius: var(--r-sm);
  background: var(--surface-input);
  color: var(--content-primary);
  box-shadow: none;
}

input::placeholder, textarea::placeholder { color: var(--content-tertiary); opacity: .82; }
input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus,
.search-input:focus {
  border-color: var(--accent);
  outline: 3px solid rgba(var(--accent-rgb), .12);
  box-shadow: none;
}

/* Native select popups used to fall back to Windows' white menu even when the closed control was
   dark. Keep a native, keyboard-operable <select> as the source of truth, but theme both its
   fallback options and Chromium's customizable picker. Older browsers use the option colours;
   browsers with base-select support get the same surface, spacing and states as TL Tracker menus. */
select:not([multiple]):not([size]) {
  color-scheme: dark;
  accent-color: var(--workspace-accent, var(--accent));
}
html[data-theme="light"] select:not([multiple]):not([size]) { color-scheme: light; }

select option,
select optgroup {
  background-color: var(--surface-raised);
  color: var(--content-primary);
}
select option:disabled { color: var(--content-tertiary); }
select option:checked {
  background-color: var(--workspace-accent, var(--accent));
  color: var(--accent-contrast);
}

.kbd-hint {
  border: 1px solid var(--border-subtle);
  background: var(--surface-raised);
  color: var(--content-tertiary);
  box-shadow: none;
}

.badge, .tier, .tier-badge, .chip, .grade-chip {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
}

.view-strip {
  width: fit-content;
  gap: 3px;
  padding: 3px;
  background: var(--surface-card);
}
.view-strip a,
.view-strip button {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 6px;
  color: var(--content-secondary);
  font-size: 12px;
  font-weight: 560;
}
.view-strip a:hover,
.view-strip button:hover { background: var(--surface-hover); color: var(--content-primary); }
.view-strip a.active,
.view-strip button.active,
.view-strip [aria-selected="true"] {
  background: var(--surface-raised);
  color: var(--content-primary);
  box-shadow: inset 0 0 0 1px var(--border-default);
}

/* ── Tables and market data ─────────────────────────────────────────────── */
.table-wrap {
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

table { border-collapse: separate; border-spacing: 0; }
th, td {
  font-family: var(--font-body);
  font-size: var(--fs-table);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

th,
.data-table th {
  height: 42px;
  padding: 10px 14px;
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-default);
  color: var(--content-tertiary);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 620;
  letter-spacing: .01em;
  text-transform: none;
}

td,
.data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--content-secondary);
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .14s ease; }
tbody tr:hover,
.data-table tbody tr:hover { background: rgba(255, 255, 255, .025); }

.item-cell, .item-cell a, .item-name, .mm-card-name { color: var(--content-primary); font-weight: 580; }
.stat-value, .mc-value, .price-card-value, .profit, .pct-positive,
.pct-negative, .item-id, .tabnum, time, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.profit, .pct-positive { color: var(--success); }
.pct-negative { color: var(--danger); }

.table-wrap::after { display: none !important; }

/* Charts should look like instruments, not ornaments. */
.chart-wrap,
.chart-card,
.chart-shell,
.chart-box {
  background: var(--surface-card);
  border-color: var(--border-subtle);
  border-radius: var(--r-surface);
  box-shadow: none;
}

.range-btn {
  min-height: 32px;
  color: var(--content-secondary);
  background: transparent;
  border-color: transparent;
}
.range-btn:hover { background: var(--surface-hover); color: var(--content-primary); }
.range-btn.active { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-hover); }

/* ── Dialogs, sheets and dropdowns ─────────────────────────────────────── */
.modal-backdrop,
.modal-overlay,
.am-backdrop,
.set-backdrop {
  background: rgba(2, 4, 6, .74);
  backdrop-filter: blur(4px);
}

.modal,
.modal-card,
.am-modal,
.set-panel,
.dialog,
[role="dialog"] {
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-xl);
}

.modal-head,
.modal-header,
.am-head,
.set-head {
  border-bottom: 1px solid var(--border-subtle);
}
.modal-foot,
.modal-footer,
.am-foot {
  border-top: 1px solid var(--border-subtle);
}

.dropdown,
.menu,
.popover,
[role="menu"] {
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}

.toast-msg, .lux-toast {
  border-color: var(--border-default);
  border-radius: var(--r-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}

/* ── Route families ────────────────────────────────────────────────────── */

/* Search/filter-heavy market screens. */
.deals-filters,
.pot-filters,
.db-controls,
.ld-controls,
.ma-toolbar,
.nix-controls,
.filter-grid {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-surface);
  box-shadow: none;
}

.filter-btn,
.lane-filter,
.grade-chip,
.chip {
  min-height: 34px;
  background: transparent;
  border: 1px solid var(--control-border);
  color: var(--content-secondary);
}
.filter-btn:hover, .lane-filter:hover, .grade-chip:hover, .chip:hover { background: var(--surface-hover); color: var(--content-primary); }
.filter-btn.active, .filter-btn[aria-pressed="true"],
.lane-filter.active, .lane-filter[aria-pressed="true"],
.grade-chip.active, .chip.active {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent-hover);
}

.deal-card, .pot-card, .db-card, .ma-row, .ld-row,
.mk-row, .nl-row, .xf-row, .price-card {
  background: var(--surface-card);
  border-color: var(--border-subtle);
  border-radius: var(--r-surface);
  box-shadow: none;
}

.deal-card:hover, .pot-card:hover, .db-card:hover,
.ma-row:hover, .mk-row:hover, .nl-row:hover {
  border-color: var(--border-default);
  background: var(--surface-card);
  transform: none;
  box-shadow: none;
}

/* Deals */
.deals-summary,
.deals-stats { gap: 10px; }
.deal-table thead th { background: var(--surface-card); }
.deal-table tbody tr { background: transparent; }
.deal-table .profit, .deal-profit { color: var(--success); }
.row-bell { border-radius: var(--r-sm); }

/* A discount is useful value; red remains reserved for failures and losses. */
.b-drop { color: var(--green); }

/* Potentials */
.fam-rail {
  background: var(--surface-card);
  border-color: var(--border-subtle);
  border-radius: var(--r-surface);
  box-shadow: none;
}
.fam-rail button { border-radius: var(--r-sm); color: var(--content-secondary); }
.fam-rail button:hover { background: var(--surface-hover); color: var(--content-primary); }
.fam-rail button.active { background: var(--accent-soft); color: var(--accent-hover); }
.pot-deck, .deck-line { border-color: var(--border-subtle); }

/* Detail screens */
.item-titlebar, .pd-hero { border-bottom-color: var(--border-subtle); }
.price-card { padding: 18px; }
.price-card-label { color: var(--content-tertiary); font-family: var(--font-body); text-transform: none; letter-spacing: 0; }
.price-card-value { color: var(--content-primary); }
.xf-table, .xf-grid { border-color: var(--border-subtle); }
.item-icon-wrap, .pd-icon { background: var(--surface-raised); border-color: var(--border-default); box-shadow: none; }

/* Alerts */
.page-alert-feed main.page-wrap,
.page-my-alerts main.page-wrap {
  max-width: none;
  min-width: 0;
}
.page-my-alerts #maApp,
.page-my-alerts #maRegionFilter,
.page-my-alerts #maPotSection { min-width: 0; max-width: 100%; }
.page-my-alerts #maRegionFilter { width: 100%; box-sizing: border-box; }

/* The three alert routes are one workspace. Keep their title, status, actions and lede on the
   same grid so moving between Live, Item and Potential alerts does not move the navigation. */
.page-alert-feed .page-titlebar,
.page-my-alerts .page-titlebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label label"
    "title actions"
    "status actions"
    "lede lede";
  align-content: start;
  align-items: center;
  column-gap: 20px;
  row-gap: 5px;
  min-height: 138px;
}
.page-alert-feed .page-titlebar .tl-route-label,
.page-my-alerts .page-titlebar .tl-route-label { grid-area: label; }
.page-alert-feed .page-titlebar h1,
.page-my-alerts .page-titlebar h1 {
  grid-area: title;
  min-height: 40px;
  display: flex;
  align-items: center;
}
.page-alert-feed .page-titlebar > .pt-status,
.page-my-alerts .page-titlebar > .pt-status {
  grid-area: status;
  justify-self: start;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
}
.page-alert-feed .page-titlebar .pt-actions,
.page-my-alerts .page-titlebar .pt-actions {
  grid-area: actions;
  align-self: center;
  justify-self: end;
  margin-left: 0;
}
.page-alert-feed .page-titlebar .pt-sub,
.page-my-alerts .page-titlebar .pt-sub {
  grid-area: lede;
  width: min(100%, 78ch);
  margin: 1px 0 0;
  min-height: calc(2 * 1.55em);
  max-height: calc(2 * 1.55em);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.ma-row { padding: 16px; }
.ma-title { color: var(--content-primary); font-size: 14px; }
.ma-meta { color: var(--content-secondary); font-size: 12px; }
.ma-btn { min-height: 36px; border-color: var(--border-default); background: transparent; color: var(--content-secondary); }
.ma-btn:hover { background: var(--surface-hover); color: var(--content-primary); }

/* Ledger, import and rewards */
.ld-total, .ld-stat, .im-stat, .im-step, .rw-card, .rw-stat,
.rw-hero, .im-drop, .im-summary {
  background: var(--surface-card);
  border-color: var(--border-subtle);
  border-radius: var(--r-surface);
  box-shadow: none;
}
.im-drop:hover, .im-drop.is-drag { border-color: var(--accent); background: var(--accent-soft); }
.rw-hero { background: var(--surface-card); }
.rw-hero::before, .rw-hero::after { display: none; }

/* Account/dashboard */
.me-shell, .me-grid { gap: 16px; }
.me-card, .me-panel, .me-stat, .me-session, .me-quick,
.me-hero, .me-membership {
  background: var(--surface-card);
  border-color: var(--border-subtle);
  border-radius: var(--r-surface);
  box-shadow: none;
}
.me-card, .me-panel { padding: 20px; }
.me-tabs { border-color: var(--border-default); border-radius: var(--r-md); background: var(--surface-card); }
.me-tabs a, .me-tabs button { border-radius: 6px; color: var(--content-secondary); }
.me-tabs .active, .me-tabs [aria-selected="true"] { color: var(--content-primary); background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--border-default); }
.me-session { border-radius: 0; border-width: 0 0 1px; }

/* Statistics */
.pg-tabs, .mi-tabs, .mt-tabs, .tr-tabs { background: var(--surface-card); border-color: var(--border-subtle); border-radius: var(--r-md); }
.pg-card, .mi-card, .mt-card, .tr-card, .lb, .mt-heat-wrap {
  background: var(--surface-card);
  border-color: var(--border-subtle);
  border-radius: var(--r-surface);
  box-shadow: none;
}
.mt-heat td { border-color: var(--surface-card); }

/* Nix / regional gaps */
.nix-card, .nix-panel, .mk-wrap, .nl-wrap {
  background: var(--surface-card);
  border-color: var(--border-subtle);
  border-radius: var(--r-surface);
  box-shadow: none;
}
.c-floor { color: var(--warning); }

/* Marketing and informational pages. */
.page-marketing .page-wrap { max-width: 1220px; }
.page-marketing h1 { font-weight: 640; }
.lp-hero, .u-hero, .acad-hero {
  min-height: auto;
  padding-top: clamp(74px, 10vw, 132px);
  padding-bottom: clamp(54px, 8vw, 96px);
}
.lp-hero h1, .u-hero h1, .acad-hero h1 {
  max-width: 18ch;
  color: var(--content-primary);
  font-size: clamp(38px, 5.2vw, 68px);
  font-weight: 620;
  line-height: 1.02;
  letter-spacing: -.045em;
}
.lp-hero p, .u-hero p, .acad-hero p {
  max-width: 62ch;
  color: var(--content-secondary);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.6;
}
.lp-card, .lpb-card, .u-card, .plan-card, .acad-card,
.flip-card, .find-card, .faq-item, .sup-card, .st-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-surface);
  box-shadow: none;
}
.lp-card:hover, .lpb-card:hover, .u-card:hover, .plan-card:hover,
.acad-card:hover, .find-card:hover, .sup-card:hover {
  transform: none;
  border-color: var(--border-default);
  box-shadow: none;
}
.lp-card::before, .lp-card::after, .u-card::before, .u-card::after,
.plan-card::before, .plan-card::after { display: none; }
.lp-section, .u-section, .acad-section, .sup-section { padding-block: clamp(56px, 8vw, 92px); }
.lp-section h2, .u-section h2, .acad-section h2, .sup-section h2 {
  font-size: clamp(25px, 3vw, 38px);
  font-weight: 630;
}

.tl-footer {
  margin-top: 72px;
  padding-top: 44px;
  background: var(--surface-sidebar);
  border-top-color: var(--border-subtle);
}
.tl-footer-col h2, .tl-footer-col h4 {
  color: var(--content-secondary);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}
.tl-footer-col a { color: var(--content-tertiary); }
.tl-footer-col a:hover { color: var(--content-primary); transform: none; }

/* Legal/support */
.legal-shell { max-width: 900px; }
.legal-shell h1 { font-size: var(--fs-title-page); }
.legal-shell h2 { margin-top: 32px; font-size: 18px; }
.legal-shell p, .legal-shell li { color: var(--content-secondary); font-size: 14px; line-height: 1.7; }
.faq-q { color: var(--content-primary); font-size: 14px; }
.faq-a { color: var(--content-secondary); }

/* Admin keeps its dense information architecture but joins the same system. */
.page-admin {
  --adm-bg: var(--surface-page);
  --adm-panel: var(--surface-card);
  --adm-panel-2: var(--surface-raised);
  --adm-border: var(--border-subtle);
  --adm-border-2: var(--border-default);
  --adm-text: var(--content-primary);
  --adm-muted: var(--content-secondary);
  --adm-faint: var(--content-tertiary);
}
.page-admin .adm-top,
.page-admin .adm-side,
.page-admin .adm-card,
.page-admin .adm-panel,
.page-admin .card,
.page-admin .table-wrap {
  background: var(--surface-card);
  border-color: var(--border-subtle);
  box-shadow: none;
}
.page-admin .adm-nav button,
.page-admin .adm-tab,
.page-admin .adm-action { border-radius: var(--r-sm); }
.page-admin th { position: sticky; top: 0; z-index: 2; }

/* ── Responsive behavior ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
  :root { --gutter: 22px; }
  .page-titlebar { padding-top: 26px; }
}

@media (max-width: 880px) {
  :root { --nav-h: 58px; --gutter: 18px; }
  body { padding-top: var(--nav-h); }
  body:not(.page-marketing)::before {
    height: var(--nav-h);
    background: rgba(12, 15, 19, .96);
    border-bottom-color: var(--border-subtle);
    backdrop-filter: blur(10px);
  }
  html[data-theme="light"] body:not(.page-marketing)::before {
    background: rgba(255, 255, 255, .96);
  }
  .tl-hamburger,
  .tl-up-chip { top: 9px; min-height: 40px; box-shadow: none; }
  .tl-hamburger { left: 10px; }
  .tl-up-chip { right: 10px; }
  html.rail-open .tl-nav {
    width: min(82vw, 304px);
    z-index: 1720;
  }
  html.rail-open .rail-scrim { z-index: 1710; }
  html.rail-open .tl-hamburger { opacity: 0; pointer-events: none; }
  .tl-nav-inner { padding-top: 12px; }
  html.rail-open .tl-nav-inner { overflow: hidden; }
  html.rail-open .tl-nav-links {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  html.rail-open .tl-nav-auth {
    justify-content: flex-start;
  }
  html.rail-open .tl-nav-auth .auth-name {
    display: inline;
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html.rail-open .tl-nav-auth .tier {
    display: inline-flex;
  }
  .rail-drawer-close {
    display: inline-flex;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-default);
    border-radius: var(--r-sm);
    background: var(--surface-raised);
    color: var(--content-secondary);
    cursor: pointer;
  }
  .rail-drawer-close:hover { background: var(--surface-hover); color: var(--content-primary); }
  .rail-drawer-close svg { width: 20px; height: 20px; }
  .tl-nav .tl-brand { padding-right: 46px; }
  .page-titlebar, .pg-head, .ah, .sup-hero, .st-hero { padding-top: 24px; }
  .page-titlebar .pt-actions { width: auto; }
}

@media (max-width: 768px) {
  :root { --gutter: 16px; --fs-title-page: 22px; }

  .page-wrap, .page-wrap-wide { padding-inline: var(--gutter); }
  .page-titlebar { align-items: flex-start; }
  .page-titlebar .pt-actions {
    flex: 1 1 100%;
    margin-left: 0;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .page-titlebar .pt-actions::-webkit-scrollbar { display: none; }

  .page-alert-feed .page-titlebar,
  .page-my-alerts .page-titlebar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "label" "title" "status" "lede" "actions";
    min-height: 0;
    row-gap: 6px;
  }
  .page-alert-feed .page-titlebar .pt-actions,
  .page-my-alerts .page-titlebar .pt-actions {
    justify-self: stretch;
    margin-top: 4px;
  }

  .section-card, .card, .me-card, .me-panel { padding: 16px; }
  .stat-card { padding: 14px; }

  .view-strip {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .view-strip::-webkit-scrollbar { display: none; }
  .view-strip a, .view-strip button { min-height: 40px; white-space: nowrap; }

  .modal, .modal-card, .am-modal, .set-panel, .dialog, [role="dialog"] {
    width: calc(100vw - 20px);
    max-width: none;
    max-height: calc(100dvh - 20px);
    margin: 10px;
    border-radius: 12px;
  }

  .table-wrap { border-radius: var(--r-md); }
  th, .data-table th { padding: 10px 12px; }
  td, .data-table td { padding: 11px 12px; }

  .lp-hero, .u-hero, .acad-hero { padding-top: 64px; padding-bottom: 52px; }
  .lp-hero h1, .u-hero h1, .acad-hero h1 { font-size: clamp(34px, 10.5vw, 48px); }
  .lp-section, .u-section, .acad-section, .sup-section { padding-block: 52px; }
}

/* With the expanded desktop rail a 914px viewport leaves only ~680px for the page. Switch the
   alert header at the available-width boundary, before the global phone breakpoint, so its
   actions and status cannot consume the region filter's right gutter. */
@media (min-width: 769px) and (max-width: 1000px) {
  .page-alert-feed .page-titlebar,
  .page-my-alerts .page-titlebar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "label" "title" "status" "lede" "actions";
    min-height: 0;
  }
  .page-alert-feed .page-titlebar .pt-actions,
  .page-my-alerts .page-titlebar .pt-actions {
    justify-self: stretch;
    justify-content: flex-start;
    margin-top: 4px;
  }
}

@media (max-width: 520px) {
  :root { --gutter: 14px; --control-h: 44px; }

  body { font-size: 14px; }
  .page-titlebar, .pg-head, .ah, .sup-hero, .st-hero { padding: 20px 0 16px; }
  .page-titlebar .pt-sub { font-size: 13px; }
  .page-titlebar .pt-status { font-size: 11.5px; }

  .btn, .btn-sm, .ma-btn, .filter-btn, .range-btn, .lane-filter,
  .chip, .grade-chip { min-height: 44px; }

  .filter-bar, .filter-panel, .deals-filters, .pot-filters,
  .db-controls, .ld-controls, .ma-toolbar, .nix-controls { padding: 12px; }

  .db-axes,
  .db-axis--grade .db-seg,
  .toolbar-actions,
  .pg-toc,
  .mt-heat-wrap {
    padding-bottom: 7px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
  }

  .search-wrap, .search-input { width: 100%; }
  .page-titlebar .pt-actions > .btn,
  .page-titlebar .pt-actions > button { flex: 1 1 auto; }

  .state-box, .empty-state, .loading-state { padding: 22px 16px; }

  /* Mobile tables may scroll, but the relationship between the identity and
     primary value remains visible through sticky first columns where present. */
  .table-wrap table { min-width: max-content; }
  .table-wrap th:first-child,
  .table-wrap td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface-card);
  }
  .table-wrap th:first-child { z-index: 3; }
  .table-wrap tbody tr:hover td:first-child { background: var(--surface-hover); }

  .ma-row { padding: 14px; }
  .ma-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ma-actions .ma-btn { width: 100%; }

  .me-grid, .me-shell { gap: 12px; }
  .me-tabs { width: 100%; overflow-x: auto; }

  .tl-footer { margin-top: 56px; padding: 36px 14px 24px; }
  .tl-footer-inner { gap: 24px 18px; }
}

@media (max-width: 560px), (pointer: coarse) {
  .page-admin .adm-range button,
  .page-admin .adm-status,
  .page-admin .modal-close,
  .page-admin .btn-sm {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 390px) {
  :root { --gutter: 12px; }
  .section-card, .card, .me-card, .me-panel { padding: 14px; }
  .page-titlebar h1, .pg-head h1, .ah h1, .sup-hero h1, .st-hero h1 { font-size: 21px; }
  .ma-actions { grid-template-columns: 1fr; }
}

/* ── Browse: two-pane market explorer ──────────────────────────────────── */
.page-database main.page-wrap { max-width: var(--maxw-data); }
.page-database .db-search-command {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.page-database .db-search-command .search-wrap { flex: 1; }
.page-database .db-search-command .search-input { height: 46px; font-size: 14px; }
.page-database .db-filter-toggle { display: none; min-height: 46px; }
.page-database .db-filter-toggle svg { width: 18px; height: 18px; }
.page-database .db-explorer {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}
.page-database .db-filter-dock {
  position: sticky;
  top: 74px;
  display: grid;
  gap: 16px;
  max-height: calc(100dvh - 92px);
  padding: 16px;
  overflow: auto;
  border: 1px solid var(--border-default);
  border-top: 2px solid rgba(var(--accent-rgb), .48);
  border-radius: var(--r-lg);
  background: var(--surface-card);
  scrollbar-width: thin;
}
.page-database .db-filter-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--border-subtle);
}
.page-database .db-filter-kicker {
  color: var(--accent-hover);
  font: 650 10px/1.3 var(--font-body);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.page-database .db-filter-head h2 { margin: 3px 0 0; font-size: 16px; }
.page-database .db-filter-close { display: none; }
.page-database .db-filter-dock .toolbar-actions {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 9px;
  width: 100%;
  min-width: 0;
}
.page-database .db-filter-dock .filter-check {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--content-secondary);
  font-size: 11px;
}
.page-database .db-filter-dock .filter-check:has(input[type="checkbox"]) {
  display: flex;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-sm);
  background: var(--surface-input);
  font-size: 12px;
}
.page-database .db-filter-dock .filter-check select,
.page-database .db-filter-dock .tl-select-trigger { width: 100%; min-width: 0; }
.page-database .db-filter-dock .db-axes {
  display: grid;
  gap: 15px;
  margin: 0;
  padding: 15px 0 0;
  border-width: 1px 0 0;
  border-radius: 0;
  background: transparent;
}
.page-database .db-filter-dock .db-axis { display: grid; gap: 7px; }
.page-database .db-filter-dock .db-seg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  padding: 0;
  overflow: visible;
  background: transparent;
}
.page-database .db-filter-dock .db-seg button {
  min-width: 0;
  min-height: 34px;
  padding: 6px 7px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-input);
  white-space: normal;
  line-height: 1.15;
}
.page-database .db-filter-dock .db-axis--grade .db-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-database .db-results { min-width: 0; }
.page-database .db-results > section:first-child { margin-top: 0; }
.page-database .db-results .db-meta { min-height: 28px; }
.page-database .db-results .db-table-wrap { margin-top: 4px; }
.page-database .db-results .cta-band { margin-top: 18px; }

@media (max-width: 1120px) and (min-width: 881px) {
  .page-database .db-explorer { grid-template-columns: 214px minmax(0, 1fr); gap: 14px; }
}

@media (max-width: 880px) {
  .page-database .db-filter-toggle { display: inline-flex; flex: 0 0 auto; }
  .page-database .db-explorer { display: block; }
  .page-database .db-results { width: 100%; }
  .page-database .db-filter-dock {
    position: fixed;
    inset: auto 0 0;
    z-index: 2200;
    display: grid;
    width: 100%;
    max-height: min(84dvh, 760px);
    padding: 18px 18px calc(24px + env(safe-area-inset-bottom));
    visibility: hidden;
    transform: translateY(102%);
    border: 1px solid var(--border-strong);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: var(--shadow-xl);
    transition: transform var(--duration-normal) var(--ease-product), visibility 0s linear var(--duration-normal);
  }
  body.db-filters-open { overflow: hidden; }
  body.db-filters-open .db-filter-dock {
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }
  .page-database .db-filter-close {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border-default);
    border-radius: var(--r-md);
    color: var(--content-secondary);
    background: var(--surface-input);
  }
  .page-database .db-filter-close svg { width: 20px; height: 20px; }
  .page-database .db-filter-dock .toolbar-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; }
  .page-database .db-filter-dock .db-axes { max-width: none; overflow: visible; }
  .page-database .db-filter-dock .db-axis--grade .db-seg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .page-database .db-search-command .search-input { font-size: 16px; }
  .page-database .db-filter-toggle span:not(.vs-n) { display: none; }
  .page-database .db-filter-toggle { width: 46px; padding: 0; }
  .page-database .db-filter-dock .toolbar-actions { grid-template-columns: 1fr; }
  .page-database .db-filter-dock .db-axis--grade .db-seg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-database .db-results .cta-band { display: none; }
}

/* ── Deals: opportunity board + contextual trade briefing ──────────────── */
.page-deals main.page-wrap { max-width: var(--maxw-data-wide); }
.page-deals .deals-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 306px;
  align-items: start;
  gap: 14px;
}
.page-deals .deals-workspace > .table-wrap { min-width: 0; margin: 0; }
.page-deals .deals-table tbody tr { cursor: pointer; }
.page-deals .deals-table tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.page-deals .deals-table tbody tr.is-selected td {
  background: rgba(var(--accent-rgb), .07);
  box-shadow: inset 0 1px 0 rgba(var(--accent-rgb), .17), inset 0 -1px 0 rgba(var(--accent-rgb), .17);
}
.page-deals .deals-table tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--accent), inset 0 1px 0 rgba(var(--accent-rgb), .17), inset 0 -1px 0 rgba(var(--accent-rgb), .17); }
.page-deals .deal-inspector {
  position: sticky;
  top: 74px;
  display: grid;
  gap: 15px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border-default);
  border-top: 2px solid rgba(var(--opportunity-rgb), .54);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface-card) 96%, var(--opportunity) 4%);
}
.page-deals .deal-inspector-id { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 11px; }
.page-deals .deal-inspector-id img { width: 52px; height: 52px; object-fit: contain; border: 1px solid var(--border-default); border-radius: var(--r-md); background: var(--surface-input); }
.page-deals .deal-inspector-kicker { color: var(--opportunity); font: 650 10px/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.page-deals .deal-inspector-id h2,
.page-deals .deal-inspector-empty h2 { margin: 3px 0 0; font-size: 16px; line-height: 1.25; }
.page-deals .deal-inspector-id p,
.page-deals .deal-inspector-copy,
.page-deals .deal-inspector-empty p { margin: 3px 0 0; color: var(--content-tertiary); font-size: 12px; }
.page-deals .deal-inspector-profit {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 2px 10px;
  padding: 13px;
  border: 1px solid rgba(var(--success-rgb), .26);
  border-radius: var(--r-md);
  background: rgba(var(--success-rgb), .07);
}
.page-deals .deal-inspector-profit > span { color: var(--content-secondary); font-size: 11px; }
.page-deals .deal-inspector-profit strong { grid-row: 1 / span 2; grid-column: 2; color: var(--success); font: 700 20px/1 var(--font-mono); }
.page-deals .deal-inspector-profit small { color: var(--success); font: 600 11px/1.4 var(--font-mono); }
.page-deals .deal-inspector-breakdown { display: grid; gap: 0; margin: 0; }
.page-deals .deal-inspector-breakdown > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); }
.page-deals .deal-inspector-breakdown dt { color: var(--content-tertiary); font-size: 11px; }
.page-deals .deal-inspector-breakdown dd { margin: 0; color: var(--content-primary); font: 600 12px/1.4 var(--font-mono); text-align: right; }
.page-deals .deal-inspector-breakdown dd.negative { color: var(--danger); }
.page-deals .deal-inspector-evidence { display: grid; gap: 7px; }
.page-deals .deal-inspector-evidence p { display: flex; align-items: flex-start; gap: 7px; margin: 0; color: var(--content-secondary); font-size: 11px; line-height: 1.4; }
.page-deals .deal-inspector-evidence .status-dot { width: 6px; height: 6px; margin-top: 5px; border-radius: 50%; background: var(--opportunity); flex: 0 0 auto; }
.page-deals .deal-inspector-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.page-deals .deal-inspector-actions > * { justify-content: center; }

@media (max-width: 1180px) {
  .page-deals .deals-workspace { grid-template-columns: 1fr; }
  .page-deals .deal-inspector { position: static; grid-template-columns: minmax(220px, .9fr) minmax(190px, .7fr) minmax(260px, 1.2fr); align-items: center; }
  .page-deals .deal-inspector-id { grid-column: 1; }
  .page-deals .deal-inspector-profit { grid-column: 2; }
  .page-deals .deal-inspector-breakdown { grid-column: 3; grid-row: 1 / span 2; }
  .page-deals .deal-inspector-evidence { grid-column: 1 / 3; }
  .page-deals .deal-inspector-actions { grid-column: 3; }
}

@media (max-width: 700px) {
  .page-deals .deal-inspector { display: none; }
  .page-deals .deals-workspace { display: block; }
}

/* ── Alert composer: decision flow rather than an undifferentiated form ── */
#alertModal .modal { width: min(960px, calc(100vw - 32px)); max-width: 960px; }
#alertModal .modal-head { padding-bottom: 14px; }
#alertModal .modal-summary {
  margin: 12px 0 0;
  padding: 11px 13px;
  border: 1px solid var(--accent-border);
  border-radius: var(--r-md);
  color: var(--content-primary);
  background: var(--accent-soft);
  font-size: 13px;
}
#alertModal .alert-compose-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
#alertModal .alert-compose-steps::before {
  content: '';
  position: absolute;
  left: 7%; right: 7%; top: 12px;
  height: 1px;
  background: var(--border-default);
}
#alertModal .alert-compose-steps li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 5px;
  color: var(--content-tertiary);
  font-size: 10px;
  font-weight: 620;
}
#alertModal .alert-compose-steps span {
  z-index: 1;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--content-secondary);
  background: var(--surface-raised);
  font: 650 10px/1 var(--font-mono);
}
#alertModal .alert-compose-steps li:first-child span { border-color: var(--accent); color: var(--accent-contrast); background: var(--accent); }
#alertModal .modal-body { display: grid; grid-template-columns: minmax(260px, .72fr) minmax(360px, 1.28fr); gap: 18px; align-items: start; }
#alertModal .modal-left {
  position: sticky;
  top: 0;
  padding: 15px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  background: var(--surface-card);
}
#alertModal .modal-right { min-width: 0; }
#alertModal .modal-right > .modal-field {
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle);
}
#alertModal .modal-right > .modal-field:first-child { padding-top: 0; }
#alertModal .modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 16px -2px -2px;
  padding: 12px 2px 2px;
  background: linear-gradient(180deg, transparent, var(--surface-raised) 24%);
}

@media (max-width: 700px) {
  #alertModal .modal { width: 100vw; max-width: 100vw; }
  #alertModal .alert-compose-steps { grid-template-columns: repeat(3, 1fr); row-gap: 10px; }
  #alertModal .alert-compose-steps::before { display: none; }
  #alertModal .modal-body { display: block; }
  #alertModal .modal-left { position: static; margin-bottom: 14px; }
  #alertModal .modal-right > .modal-field { padding-block: 13px; }
}

/* ── Homepage: product demonstration in the first viewport ─────────────── */
@media (min-width: 1101px) {
  .page-home main.page-wrap { max-width: var(--maxw-data); }
  .page-home .lp-hero {
    display: grid;
    grid-template-columns: minmax(360px, .78fr) minmax(520px, 1.22fr);
    grid-template-rows: auto auto auto;
    align-items: stretch;
    gap: 18px 28px;
    padding-top: clamp(54px, 6vw, 82px);
  }
  .page-home .lp-hero-top { display: contents; }
  .page-home .lp-hero-top > div:first-child { grid-column: 1; grid-row: 1; align-self: center; }
  .page-home .lp-h1 { font-size: clamp(46px, 4.5vw, 68px); max-width: 12ch; }
  .page-home .lp-lede { max-width: 56ch; }
  .page-home .lp-pulse {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    padding: 14px 16px;
    border-top: 2px solid rgba(var(--success-rgb), .42);
  }
  .page-home .lp-pulse-foot { display: none; }
  .page-home .lp-feat {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-height: 100%;
    margin: 0;
    border-top: 2px solid rgba(var(--opportunity-rgb), .48);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .25);
  }
  .page-home .lp-jump { grid-column: 1 / -1; grid-row: 3; margin-top: 2px; }
}

@media (max-width: 1100px) {
  .page-home .lp-hero { display: block; }
}

@media (max-width: 1080px) {
  .page-analytics #movers { grid-template-columns: 1fr; }
  .page-analytics #movers > .pg-sec-head,
  .page-analytics #movers > #mktIndex,
  .page-analytics #movers > .lb-section,
  .page-analytics #movers > #mktValue,
  .page-analytics #movers > #mktTop100 { grid-column: 1; grid-row: auto; }
  .page-analytics #movers .lb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .page-analytics #movers .lb-grid { grid-template-columns: 1fr; }
  .page-analytics #movers .lb-list { max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}

@media (forced-colors: active) {
  .tl-nav-links a.active { border: 1px solid Highlight; }
  .btn-primary { border: 1px solid ButtonText; }
}

html[data-contrast="high"] {
  --content-secondary: var(--content-primary);
  --content-tertiary: var(--content-primary);
  --text-2: var(--content-primary);
  --text-3: var(--content-primary);
  --border-subtle: var(--border-strong);
  --control-border: var(--content-primary);
}

html[data-colorblind="1"]:not([data-theme="light"]) {
  --green-rgb: 76, 201, 240;
  --green: #4cc9f0;
  --green-hover: #6fd4f5;
  --green-dim: rgba(76, 201, 240, .11);
  --red-rgb: 255, 138, 76;
  --red: #ff8a4c;
  --red-bright: #ffa473;
  --red-dim: rgba(255, 138, 76, .11);
  --positive: var(--green);
  --negative: var(--red);
  --success: var(--green);
  --danger: var(--red);
}

html[data-colorblind="1"][data-theme="light"] {
  --green-rgb: 3, 105, 161;
  --green: #0369a1;
  --green-hover: #0472ad;
  --green-dim: rgba(3, 105, 161, .09);
  --red-rgb: 180, 71, 12;
  --red: #b4470c;
  --red-bright: #8f3908;
  --red-dim: rgba(180, 71, 12, .09);
  --positive: var(--green);
  --negative: var(--red);
  --success: var(--green);
  --danger: var(--red);
}

/* ── Product redesign: route-aware workspaces ──────────────────────────── */

body.tl-page {
  --workspace-accent: var(--accent);
  --workspace-accent-rgb: var(--accent-rgb);
  background-color: var(--surface-page);
  background-image:
    linear-gradient(180deg, rgba(var(--workspace-accent-rgb), .035), transparent 340px),
    linear-gradient(90deg, transparent, rgba(var(--workspace-accent-rgb), .012) 52%, transparent);
  background-attachment: fixed;
}
body.workspace-opportunity { --workspace-accent: var(--opportunity); --workspace-accent-rgb: var(--opportunity-rgb); }
body.workspace-analytics { --workspace-accent: var(--info); --workspace-accent-rgb: var(--info-rgb); }
body.workspace-automation { --workspace-accent: var(--accent); --workspace-accent-rgb: var(--accent-rgb); }
body.workspace-premium { --workspace-accent: var(--premium); --workspace-accent-rgb: var(--premium-rgb); }
body.workspace-personal { --workspace-accent: var(--success); --workspace-accent-rgb: var(--success-rgb); }
body.workspace-support { --workspace-accent: var(--info); --workspace-accent-rgb: var(--info-rgb); }

.tl-route-label {
  order: -5;
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 2px;
  color: var(--workspace-accent);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 680;
  letter-spacing: .065em;
  line-height: 1.2;
  text-transform: uppercase;
}
.tl-route-label > span {
  width: 18px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--workspace-accent);
  box-shadow: 0 0 0 3px rgba(var(--workspace-accent-rgb), .10);
}

body.tl-page .tl-nav-links a.active,
body.tl-page .tl-nav-links a.active:hover,
body.tl-page .tl-nav-links a.active:focus-visible {
  background: var(--accent-soft);
}
body.tl-page .tl-nav-links a.active::before { background: var(--accent); }
body.tl-page .tl-nav-links a.active .rail-ico { color: var(--accent-hover); }

body.tl-page .page-titlebar {
  position: relative;
  margin-top: 18px;
  padding: 22px 0 19px;
}
body.tl-page .page-titlebar::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--workspace-accent-rgb), .55), var(--border-subtle) 24%, transparent 84%);
}
body.tl-page .page-titlebar h1 { font-size: clamp(24px, 2.1vw, 31px); }

/* Surfaces have three intentional levels: flat structure, raised decisions and interactive rows. */
body.tl-page .section-card,
body.tl-page .table-wrap,
body.tl-page .toolbar,
body.tl-page .card {
  border-color: color-mix(in srgb, var(--border-subtle) 82%, var(--workspace-accent) 18%);
}
body.tl-page .table-wrap {
  background: color-mix(in srgb, var(--surface-card) 96%, var(--workspace-accent) 4%);
}
body.tl-page tbody tr:hover td,
body.tl-page .data-table tbody tr:hover td {
  background: rgba(var(--workspace-accent-rgb), .045);
}
body.tl-page .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
}

/* ── Navigation: compact market terminal with stronger orientation ─────── */
.tl-nav { box-shadow: 8px 0 32px rgba(0, 0, 0, .08); }
.tl-nav-links .rail-group { margin-top: 18px; letter-spacing: .055em; text-transform: uppercase; font-size: 9.5px; }
.tl-nav-links a, .rail-foot a, .rail-settings { position: relative; }
.tl-nav-links a::after, .rail-foot a::after, .rail-settings::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035);
  transition: opacity var(--duration-fast) ease;
}
.tl-nav-links a:hover::after, .rail-foot a:hover::after, .rail-settings:hover::after { opacity: 1; }

/* ── Homepage: product story + live instrument, not a generic hero ─────── */
.page-home .lp-hero { padding-top: clamp(56px, 7vw, 96px); }
.page-home .lp-hero-top { grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); align-items: stretch; }
.page-home .lp-h1 {
  max-width: 13.5ch;
  font-size: clamp(44px, 6.2vw, 76px);
  font-weight: 650;
  letter-spacing: -.055em;
}
.page-home .lp-h1::after {
  content: '';
  display: block;
  width: 72px;
  height: 4px;
  margin-top: 24px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent), var(--info));
}
.page-home .lp-pulse {
  border-color: rgba(var(--info-rgb), .25);
  background:
    linear-gradient(145deg, rgba(var(--info-rgb), .08), transparent 52%),
    var(--surface-card);
  padding: 22px;
}
.page-home .lp-pulse-h { color: var(--info); }
.page-home .lp-feat {
  border-color: rgba(var(--success-rgb), .24);
  background:
    linear-gradient(115deg, rgba(var(--success-rgb), .065), transparent 42%),
    var(--surface-card);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .16);
}
.page-home .lp-jump { padding: 8px; border: 1px solid var(--border-subtle); border-radius: var(--r-lg); background: var(--surface-card); }
.page-home .lp-jump a { flex: 1 1 130px; justify-content: center; border-radius: var(--r-sm); background: transparent; }
.page-home .lp-sec { position: relative; }
.page-home .lp-sec > .lp-head { padding-left: 22px; border-left: 2px solid var(--workspace-accent); }
.page-home .lp-sec:nth-of-type(3n + 1) > .lp-head { border-left-color: var(--success); }
.page-home .lp-sec:nth-of-type(3n + 2) > .lp-head { border-left-color: var(--info); }
.page-home .lp-sec:nth-of-type(3n) > .lp-head { border-left-color: var(--opportunity); }

/* ── Dashboard: personalized command center ────────────────────────────── */
.page-dashboard #meHead { margin-bottom: 2px; }
.page-dashboard .me-tabs { margin-bottom: 18px; }
.page-dashboard main.page-wrap { max-width: var(--maxw-data); }
.page-dashboard #meHead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label who" "title who" "sub who";
  align-items: center;
}
.page-dashboard #meHead .tl-route-label { grid-area: label; }
.page-dashboard #meHead h1 { grid-area: title; font-size: clamp(30px, 3vw, 42px); }
.page-dashboard #meHead .pt-sub { grid-area: sub; min-width: 0; }
.page-dashboard #meHead .me-who { grid-area: who; align-self: center; }
.page-dashboard .me-create-alert { margin-right: 4px; }
.page-dashboard #paneOverview > .me-grid2 { grid-template-columns: minmax(0, 1.65fr) minmax(280px, .78fr); align-items: start; gap: 18px; }
.page-dashboard #paneOverview > .me-grid2 > .me-col:first-child {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border-default);
  border-top: 2px solid rgba(var(--success-rgb), .48);
  border-radius: var(--r-lg);
  background: var(--surface-card);
}
.page-dashboard #paneOverview > .me-grid2 > .me-col:first-child > .me-card {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.page-dashboard #paneOverview > .me-grid2 > .me-col:first-child > .me-card + .me-card { border-top: 1px solid var(--border-default); }
.page-dashboard #paneOverview > .me-grid2 > .me-col:last-child { gap: 12px; }
.page-dashboard #paneOverview > .me-grid2 > .me-col:last-child > .me-card { margin: 0; }
.page-dashboard .me-tabs {
  width: max-content;
  min-width: 0;
  padding: 3px;
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  background: var(--surface-card);
}
.page-dashboard .me-tab { min-height: 36px; border-radius: var(--r-sm); }
.page-dashboard .me-do {
  overflow: hidden;
  border-color: rgba(var(--accent-rgb), .30);
  background:
    linear-gradient(105deg, rgba(var(--accent-rgb), .11), transparent 48%),
    var(--surface-card);
  box-shadow: inset 3px 0 0 var(--accent);
}
.page-dashboard .me-do-kicker { color: var(--accent-hover); }
.page-dashboard #meNearCard { border-top: 2px solid var(--opportunity); }
.page-dashboard #meCaught { border-top: 2px solid var(--success); }
.page-dashboard #meRecentCard { border-top: 2px solid var(--info); }
.page-dashboard #meFavCard { border-top: 2px solid var(--premium); }
.page-dashboard #meUpsell {
  border-color: rgba(var(--premium-rgb), .28);
  background: linear-gradient(135deg, rgba(var(--premium-rgb), .09), transparent 56%), var(--surface-card);
}
.page-dashboard .me-card-h { padding-bottom: 12px; border-bottom: 1px solid var(--border-subtle); }
.page-dashboard .me-row-action { color: var(--workspace-accent); }

/* ── Deals: dense opportunity scanner ─────────────────────────────────── */
.page-deals .page-titlebar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.page-deals .page-titlebar .tl-route-label,
.page-deals .page-titlebar .pt-sub { grid-column: 1 / -1; }
.page-deals #dealsContent > .toolbar {
  position: sticky;
  top: 10px;
  z-index: 20;
  border-color: rgba(var(--opportunity-rgb), .26);
  background: color-mix(in srgb, var(--surface-card) 94%, var(--opportunity) 6%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .18);
  backdrop-filter: blur(14px);
}
.page-deals #netHeadline {
  border-left: 3px solid var(--opportunity);
  background: rgba(var(--opportunity-rgb), .07);
}
.page-deals .deals-table th[data-sort="profit"],
.page-deals .deals-table td.profit,
.page-deals .deals-table .profit { background: rgba(var(--success-rgb), .025); }
.page-deals .deals-table tbody tr:first-child td { border-top: 1px solid rgba(var(--opportunity-rgb), .20); }
.page-deals .deals-table tbody tr:first-child .profit { color: var(--opportunity); }

/* ── Database: discovery workspace ─────────────────────────────────────── */
.page-database > main > .toolbar,
.page-database .toolbar {
  border-color: rgba(var(--accent-rgb), .24);
  background: linear-gradient(120deg, rgba(var(--accent-rgb), .055), transparent 34%), var(--surface-card);
}
.page-database .db-axes {
  padding: 10px 0 2px;
  border-bottom: 1px solid var(--border-subtle);
}
.page-database .db-table-wrap { border-top: 2px solid rgba(var(--accent-rgb), .40); }
.page-database .db-table tbody tr { transition: background var(--duration-fast) ease, box-shadow var(--duration-fast) ease; }
.page-database .db-table tbody tr:hover { box-shadow: inset 2px 0 0 var(--accent); }
.page-database .db-active-filters:not([hidden]) { padding: 9px 12px; border: 1px solid var(--accent-border); border-radius: var(--r-md); background: var(--accent-soft); }

/* ── Potentials and NIX: opportunity families ──────────────────────────── */
.page-potentials #viewRail { margin-bottom: 16px; border-color: rgba(var(--opportunity-rgb), .25); }
.page-potentials .pot-deck {
  border: 1px solid rgba(var(--opportunity-rgb), .20);
  border-radius: var(--r-lg);
  background: linear-gradient(125deg, rgba(var(--opportunity-rgb), .055), transparent 32%), var(--surface-card);
}
.page-potentials .fam-rail { border-bottom: 1px solid var(--border-default); }
.page-potentials .fam-rail button.active { color: var(--opportunity); background: rgba(var(--opportunity-rgb), .10); }
.page-potentials .pot-grid .pot-card,
.page-potentials .pot-grid .pot-row { border-left: 2px solid transparent; }
.page-potentials .pot-grid .pot-card:hover,
.page-potentials .pot-grid .pot-row:hover { border-left-color: var(--opportunity); }
.page-nix .nix-sec--market { border-top: 2px solid rgba(var(--opportunity-rgb), .46); }
.page-nix .c-floor { color: var(--opportunity); }

/* ── Item intelligence: current price → trend → evidence ─────────────── */
.page-item .item-titlebar { align-items: center; }
.page-item main.page-wrap { max-width: var(--maxw-data); }
.page-item #content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}
.page-item #content > * { min-width: 0; margin: 0; }
.page-item #content > .trait-bar,
.page-item #content > .price-rail,
.page-item #content > .item-chart-card,
.page-item #content > .reality-strip,
.page-item #content > #supplyCard,
.page-item #content > .section-card:not(.price-rail):not(.item-chart-card),
.page-item #content > #alertHistoryCard,
.page-item #content > #potentialsCard { grid-column: 1 / -1; }
.page-item #content > .item-chart-card { grid-row: auto; min-height: 0; }
.page-item #content > .price-rail {
  grid-row: auto;
  position: static;
  order: initial;
  top: auto;
  border-top: 2px solid rgba(var(--success-rgb), .48);
}
.page-item .price-rail-head { margin-bottom: 12px; }
.page-item #content > .price-rail .price-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
}
.page-item #content > .price-rail .price-card {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  padding: 16px;
  border-width: 0 1px 0 0;
  border-radius: 0;
}
.page-item #content > .price-rail .price-card:last-child { border-right: 0; }
.page-item #content > .price-rail .price-card-body { display: block; }
.page-item #content > .price-rail .price-card-value { font-size: 24px; text-align: left; }
.page-item #content > .item-chart-card .chart-frame { min-height: 440px; }
.page-item #content > .item-chart-card .chart-wrap { min-height: 410px; }
.page-item .price-rail {
  border-color: rgba(var(--info-rgb), .24);
  background: linear-gradient(130deg, rgba(var(--info-rgb), .055), transparent 36%), var(--surface-card);
}
.market-verdict {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) repeat(2, minmax(170px, .8fr));
  gap: 0;
  margin: 0 0 14px;
  overflow: hidden;
  border: 1px solid rgba(var(--info-rgb), .22);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface-raised) 93%, var(--info) 7%);
}
.market-verdict > div { min-width: 0; padding: 15px 18px; border-left: 1px solid var(--border-subtle); }
.market-verdict > div:first-child { border-left: 0; }
.mv-lead { background: rgba(var(--success-rgb), .065); }
.mv-k, .mv-note { display: block; }
.mv-k { color: var(--content-tertiary); font-size: 10.5px; font-weight: 680; letter-spacing: .05em; text-transform: uppercase; }
.market-verdict strong { display: block; margin-top: 3px; color: var(--content-primary); font-family: var(--font-mono); font-size: 18px; font-variant-numeric: tabular-nums; }
.market-verdict strong span { color: var(--content-tertiary); font-size: 11px; font-weight: 560; }
.mv-lead strong { color: var(--success); }
.mv-note { margin-top: 3px; color: var(--content-secondary); font-size: 11.5px; }
.page-item .price-card { position: relative; overflow: hidden; }
.page-item .price-card::after {
  content: attr(data-market-rank);
  position: absolute;
  top: 10px;
  right: 10px;
  color: var(--content-tertiary);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.page-item .price-card.is-cheapest { border-color: rgba(var(--success-rgb), .42); background: rgba(var(--success-rgb), .045); }
.page-item .price-card.is-cheapest::after { color: var(--success); }
.page-item .price-card.is-highest { border-color: rgba(var(--opportunity-rgb), .28); }
.page-item .section-card:has(#chartWrap) { border-top: 2px solid rgba(var(--info-rgb), .44); }

/* ── Potential intelligence: the item-page grammar, with carrier evidence ─ */
.page-potential main.page-wrap { max-width: var(--maxw-data); }
.page-potential #pdBody {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}
.page-potential #pdBody > * { min-width: 0; margin: 0; }
.page-potential .pd-titlebar { align-items: center; }
.page-potential .pd-titlebar .pd-title { min-width: 0; margin: 0; }
.page-potential .pd-titlebar .pd-weapon { margin-left: 0; }
.page-potential .pd-titlebar .pd-desc { margin-top: 2px; }
.page-potential .pd-titlebar .pd-hero-icon {
  width: 48px;
  height: 48px;
  border-color: rgba(var(--premium-rgb), .48);
  background: rgba(var(--premium-rgb), .08);
}
.page-potential .pd-titlebar .pd-actions { flex: 0 0 auto; }
.page-potential .pd-market-card {
  border-top: 2px solid rgba(var(--success-rgb), .48);
  border-color: rgba(var(--info-rgb), .24);
  background: linear-gradient(130deg, rgba(var(--info-rgb), .055), transparent 36%), var(--surface-card);
}
.page-potential .pd-market-head { margin-bottom: 12px; }
.page-potential .market-verdict .mv-lead .mv-k { color: var(--content-secondary); }
.page-potential .pd-floors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 0;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
}
.page-potential .pd-floor-card {
  position: relative;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 16px;
  border-right: 1px solid var(--border-subtle);
  background: var(--surface-card);
}
.page-potential .pd-floor-card:last-child { border-right: 0; }
.page-potential .pd-floor-card > .rdot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; }
.page-potential .pd-floor-card::after {
  content: attr(data-market-rank);
  position: absolute;
  top: 10px;
  right: 10px;
  color: var(--content-tertiary);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.page-potential .pd-floor-card.is-cheapest { background: rgba(var(--success-rgb), .045); }
.page-potential .pd-floor-card.is-cheapest::after { color: var(--success); }
.page-potential .pd-floor-card.is-highest { background: rgba(var(--opportunity-rgb), .025); }
.page-potential .pd-floor-body { min-width: 0; }
.page-potential .pd-floor-card .rname {
  padding-right: 68px;
  color: var(--content-secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.page-potential .pd-floor-card .fval,
.page-potential .pd-floor-card .fnone { margin-top: 7px; }
.page-potential .pd-floor-card .fval .lucent { color: var(--content-primary); font-size: 24px; }
.page-potential .pd-floor-card .fnone { color: var(--content-tertiary); font-size: 18px; font-weight: 650; }
.page-potential .pd-floor-meta { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; color: var(--content-secondary); font-size: 11.5px; line-height: 1.45; }
.page-potential .pd-floor-meta a { color: var(--content-primary); text-decoration: none; }
.page-potential .pd-floor-meta a:hover { color: var(--accent-hover); text-decoration: underline; }
.page-potential .pd-floor-card .fsplit {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 9px;
  color: var(--content-tertiary);
  font-size: 11px;
}
.page-potential .pd-floor-card .fsplit .lucent { font-size: 11px; }
.page-potential .pd-chart-card { border-top: 2px solid rgba(var(--info-rgb), .44); }
.page-potential .pd-chart-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.page-potential .pd-chart-frame { height: 410px; min-height: 410px; }
.page-potential .pd-carriers-card { border-top: 2px solid rgba(var(--opportunity-rgb), .38); }
.page-potential .stats-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.page-potential .stats-matrix { min-width: 480px; }
.page-potential .stats-matrix td.sm-stat { color: var(--content-secondary); white-space: nowrap; }
.page-potential .stats-matrix thead th.rh-eu { color: var(--region-eu); }
.page-potential .stats-matrix thead th.rh-as { color: var(--region-jp); }
.page-potential .stats-matrix thead th.rh-us { color: var(--region-na); }
.page-potential .stats-matrix thead th .region-dot { width: 7px; height: 7px; margin-right: 6px; }
.page-potential .stats-matrix td.sm-none { color: var(--content-tertiary); }
.page-potential .stats-foot { margin: 12px 0 0; color: var(--content-tertiary); font-family: var(--font-mono); font-size: 11px; line-height: 1.55; }
.page-potential .subsec { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border-subtle); }
.page-potential .subsec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.page-potential .subsec-title { margin: 0; color: var(--content-primary); font-size: 15px; font-weight: 630; }
.page-potential .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 700px) {
  .page-potential #pdBody { gap: 14px; }
  .page-potential .pd-titlebar .pd-title { flex: 1 1 calc(100% - 64px); }
  .page-potential .pd-titlebar .pd-actions { width: 100%; }
  .page-potential .pd-titlebar .fav-btn { flex: 0 0 44px; }
  .page-potential .pd-titlebar .btn-alert { flex: 1 1 auto; justify-content: center; }
  .page-potential .pd-floors { grid-template-columns: minmax(0, 1fr); }
  .page-potential .pd-floor-card { border-right: 0; border-bottom: 1px solid var(--border-subtle); padding: 14px 12px; }
  .page-potential .pd-floor-card:last-child { border-bottom: 0; }
  .page-potential .pd-floor-card .fval .lucent { font-size: 22px; }
  .page-potential .pd-chart-controls { align-items: stretch; }
  .page-potential .range-row,
  .page-potential .pd-chart-controls .chart-toggles { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .page-potential .pd-chart-frame { height: 310px; min-height: 310px; }
  .page-potential .subsec-head { align-items: flex-start; flex-direction: column; }
  .page-potential .subsec-regions { width: 100%; }
  .page-potential .subsec-regions .range-btn { flex: 1 1 0; min-height: 44px; }
}

/* ── Analytics: editorial chapters around one market narrative ────────── */
.page-analytics .pg-head {
  position: relative;
  padding-top: 48px;
  padding-left: clamp(0px, 3vw, 38px);
  border-left: 3px solid var(--info);
}
.page-analytics .pg-head h1 { max-width: 26ch; font-size: clamp(30px, 4vw, 48px); }
.page-analytics .pg-toc {
  position: sticky;
  top: 10px;
  z-index: 15;
  padding: 6px;
  border: 1px solid rgba(var(--info-rgb), .22);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface-page) 91%, var(--info) 9%);
  backdrop-filter: blur(14px);
}
.page-analytics .pg-toc a { border-radius: var(--r-sm); }
.page-analytics .pg-toc a:hover { background: rgba(var(--info-rgb), .09); }
.page-analytics .pg-sec { scroll-margin-top: 76px; }
.page-analytics main.page-wrap { max-width: var(--maxw-data); }
.page-analytics #movers {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, .85fr);
  align-items: start;
  gap: 16px;
}
.page-analytics #movers > .pg-sec-head { grid-column: 1 / -1; }
.page-analytics #movers > #mktIndex { grid-column: 1; grid-row: 2; }
.page-analytics #movers > .lb-section { grid-column: 2; grid-row: 2 / span 2; margin: 0; }
.page-analytics #movers > #mktValue { grid-column: 1; grid-row: 3; }
.page-analytics #movers > #mktTop100 { grid-column: 1 / -1; grid-row: 4; }
.page-analytics #movers .lb-grid { grid-template-columns: 1fr; gap: 8px; }
.page-analytics #movers .lb { min-width: 0; }
.page-analytics #movers .lb-head p { display: none; }
.page-analytics #movers .lb-list { max-height: 188px; overflow: auto; scrollbar-width: thin; }
.page-analytics #movers #mktIndex .mi-chart { min-height: 360px; }
.page-analytics #movers #mktValue .mi-chart { min-height: 280px; }
.page-analytics .pg-sec-head { padding-left: 18px; border-left: 2px solid var(--info); }
.page-analytics #timing .pg-sec-head { border-left-color: var(--opportunity); }
.page-analytics #service .pg-sec-head { border-left-color: var(--success); }
.page-analytics .pg-card { box-shadow: 0 16px 45px rgba(0, 0, 0, .10); }

/* ── Alerts: automation states, not generic lists ──────────────────────── */
.page-alert-feed .view-strip,
.page-my-alerts .view-strip { border-color: rgba(var(--accent-rgb), .26); }
.page-alert-feed .lane-filter,
.page-my-alerts .lane-filter { background: rgba(var(--accent-rgb), .055); }
.page-my-alerts .ma-quota { border-color: var(--accent-border); background: var(--accent-soft); }
.page-my-alerts .ma-row { border-left: 3px solid rgba(var(--accent-rgb), .42); }
.page-my-alerts .ma-row.is-paused,
.page-my-alerts .ma-row[data-active="false"] { border-left-color: var(--content-tertiary); }
.page-my-alerts .ma-pot {
  border: 1px solid rgba(var(--premium-rgb), .26);
  border-radius: var(--r-lg);
  background: linear-gradient(130deg, rgba(var(--premium-rgb), .07), transparent 42%), var(--surface-card);
}
.page-my-alerts .state-box { min-height: 260px; display: grid; place-content: center; text-align: center; }
.page-my-alerts .am-modal,
.page-my-alerts [role="dialog"] { background: color-mix(in srgb, var(--surface-raised) 96%, var(--accent) 4%); }

/* ── Ledger, rewards and Premium: separate product personalities ──────── */
.page-ledger .ld-receipt { border-left: 3px solid var(--success); background: rgba(var(--success-rgb), .045); }
.page-ledger .ld-fig { color: var(--success); }
.page-ledger .ld-filters { position: sticky; top: 10px; z-index: 12; backdrop-filter: blur(12px); }
.page-rewards .rw-hero { border-color: rgba(var(--opportunity-rgb), .28); background: linear-gradient(135deg, rgba(var(--opportunity-rgb), .11), transparent 48%), var(--surface-card); }
.page-rewards .rw-bal-num { color: var(--opportunity); }
.page-pricing .uh {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 28px 28px;
  background:
    radial-gradient(70% 85% at 50% 0%, rgba(var(--premium-rgb), .13), transparent 68%),
    linear-gradient(180deg, rgba(var(--premium-rgb), .035), transparent);
}
.page-pricing .uh::after {
  content: '';
  position: absolute;
  right: 8%;
  bottom: 0;
  left: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--premium-rgb), .55), transparent);
}
.page-pricing .plan-card { border-color: rgba(var(--premium-rgb), .24); }
.page-pricing .plan-card.is-featured,
.page-pricing .plan-card.featured { background: linear-gradient(145deg, rgba(var(--premium-rgb), .10), transparent 48%), var(--surface-card); }
.page-pricing .btn-premium { background: var(--premium); border-color: var(--premium); color: #fff; }

/* ── Support, guide and errors: calm reading surfaces ──────────────────── */
.page-support .sup-hero { padding-top: 54px; }
.page-support .sup-search { border-color: rgba(var(--info-rgb), .25); box-shadow: 0 16px 42px rgba(0, 0, 0, .12); }
.page-support .sup-group { scroll-margin-top: 24px; }
.page-support .faq-q[open] { border-color: rgba(var(--info-rgb), .30); background: rgba(var(--info-rgb), .035); }
.page-guide .ah { border-left: 3px solid var(--opportunity); padding-left: clamp(18px, 3vw, 38px); }
.page-error .err-inner { border-top: 3px solid var(--info); background: linear-gradient(140deg, rgba(var(--info-rgb), .07), transparent 55%), var(--surface-card); }

/* ── Admin: dedicated operations console ───────────────────────────────── */
.page-admin { --workspace-accent: var(--info); --workspace-accent-rgb: var(--info-rgb); }
.page-admin .tl-nav {
  width: 236px;
  background: color-mix(in srgb, var(--surface-sidebar) 94%, var(--info) 6%);
  border-right-color: rgba(var(--info-rgb), .18);
}
.page-admin .adm-shell { padding: 0 clamp(18px, 2.2vw, 34px) 40px; }
.page-admin .adm-bar {
  margin-inline: calc(clamp(18px, 2.2vw, 34px) * -1);
  padding-inline: clamp(18px, 2.2vw, 34px);
  border-bottom-color: rgba(var(--info-rgb), .20);
  background: color-mix(in srgb, var(--surface-page) 92%, var(--info) 8%);
  box-shadow: 0 10px 32px rgba(0, 0, 0, .12);
}
.page-admin .adm-bar-title h1 { font-size: 22px; letter-spacing: -.03em; }
.page-admin .adm-search-in { background: var(--surface-input); border-color: var(--border-strong); }
.page-admin .adm-kpis { gap: 12px; }
.page-admin .adm-kpi {
  position: relative;
  overflow: hidden;
  border-color: rgba(var(--info-rgb), .18);
}
.page-admin .adm-kpi::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--info);
}
.page-admin .adm-panel { border-color: var(--border-default); }
.page-admin .adm-panel-h { background: color-mix(in srgb, var(--surface-card) 96%, var(--info) 4%); }
.page-admin .adm-p1 { border-color: rgba(var(--danger-rgb), .38); box-shadow: inset 3px 0 0 var(--danger); }
.page-admin .adm-p2 { border-color: rgba(var(--info-rgb), .30); box-shadow: inset 3px 0 0 var(--info); }
.page-admin #adMoneyH,
.page-admin #adRevH { color: var(--success); }
.page-admin #adAttH { color: var(--danger); }
.page-admin #adHealthH,
.page-admin #adTrendH { color: var(--info); }
.page-admin .table-wrap { border-color: var(--border-default); }
.page-admin th { background: color-mix(in srgb, var(--surface-raised) 95%, var(--info) 5%); }

/* ── Dedicated mobile product design ───────────────────────────────────── */
@media (max-width: 880px) {
  body.tl-page { background-attachment: scroll; }
  body.tl-page .page-titlebar { margin-top: 10px; padding-top: 18px; }
  .page-deals #dealsContent > .toolbar,
  .page-ledger .ld-filters,
  .page-analytics .pg-toc { top: calc(var(--nav-h) + 6px); }
  .page-admin .tl-nav { width: min(86vw, 320px); }
  .page-admin .adm-shell { padding-inline: 16px; }
  .page-admin .adm-bar { margin-inline: -16px; padding-inline: 16px; }
}

@media (max-width: 620px) {
  .tl-route-label { font-size: 9.5px; }
  body.tl-page .page-titlebar { margin-top: 6px; padding-bottom: 15px; }

  /* Dashboard identity is supporting context on a phone, not a competing desktop column. Keep
     the reading order explicit and give the primary action its own touch-safe row. */
  .page-dashboard #meHead {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "label" "title" "sub" "who";
    align-items: start;
    gap: 7px;
  }
  .page-dashboard #meHead h1 {
    font-size: clamp(30px, 9.5vw, 38px);
    line-height: 1.04;
    max-width: 13ch;
  }
  .page-dashboard #meHead .pt-sub {
    width: 100%;
    max-width: 36ch;
    margin-top: 3px;
    font-size: 14px;
    line-height: 1.55;
  }
  .page-dashboard #meHead .me-who {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    width: 100%;
    margin-top: 9px;
    gap: 8px 10px;
    overflow: visible;
  }
  .page-dashboard #meHead .me-create-alert {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 46px;
    margin: 0 0 2px;
    justify-content: center;
  }
  .page-dashboard #meHead .me-who-av {
    grid-column: 1;
    grid-row: 2;
    width: 24px;
    height: 24px;
  }
  .page-dashboard #meHead .me-who-name {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    max-width: 100%;
    font-size: 13px;
  }
  .page-dashboard #meHead .me-top-plan {
    grid-column: 1 / -1;
    grid-row: 3;
    gap: 8px 10px;
    padding-top: 2px;
  }

  .page-home .lp-hero { padding-top: 42px; }
  .page-home .lp-hero-top { grid-template-columns: 1fr; }
  .page-home .lp-h1 { font-size: clamp(40px, 12vw, 52px); }
  .page-home .lp-pulse { padding: 17px; }
  .page-home .lp-jump { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .page-home .lp-jump a { min-width: 0; padding-inline: 10px; font-size: 12px; }

  .page-deals .page-titlebar { display: flex; }
  .page-deals #dealsContent > .toolbar { position: static; box-shadow: none; }

  /* Database filters become a compact two-column control sheet instead of a clipped desktop rail. */
  .page-database .toolbar { display: block; padding: 11px; }
  .page-database .toolbar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    width: 100%;
    max-height: 154px;
    margin-top: 8px;
    padding: 0 3px 4px 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .page-database .toolbar-actions > * { width: 100%; min-width: 0; }
  .page-database .toolbar-actions label { justify-content: flex-start; }
  .page-database .db-axes { position: relative; overflow-x: auto; scroll-snap-type: x proximity; }
  .page-database .db-axis { scroll-snap-align: start; }
  .page-database .db-table .col-grade,
  .page-database .db-table .col-level,
  .page-database .db-table .col-cat,
  .page-database .db-table .col-traits { display: none; }
  .page-database .db-table { width: 100%; min-width: 0 !important; }
  .page-database .db-table th,
  .page-database .db-table td { white-space: normal; }

  .page-potentials .fam-rail {
    width: 100%;
    flex: 0 0 auto;
    scroll-snap-type: x proximity;
  }
  .page-potentials .fam-rail button { scroll-snap-align: start; }
  .page-potentials .deck-line {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
  }
  .page-potentials .deck-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
    margin-left: 0;
    gap: 8px;
  }
  .page-potentials .deck-search,
  .page-potentials .deck-sel {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }
  .page-potentials .pot-regseg,
  .page-potentials .deck-tools .wmenu { width: 100%; min-width: 0; }
  .page-potentials .pot-regseg button { flex: 1 1 0; padding-inline: 8px; }
  .page-potentials .wmenu > .btn-quiet { width: 100%; }
  .page-potentials #filterToggle { grid-column: 1 / -1; width: 100%; }

  .market-verdict { grid-template-columns: 1fr 1fr; margin: -2px -2px 12px; }
  .market-verdict .mv-lead { grid-column: 1 / -1; }
  .market-verdict > div { padding: 12px 14px; }
  .market-verdict > div:nth-child(2) { border-left: 0; border-top: 1px solid var(--border-subtle); }
  .market-verdict > div:nth-child(3) { border-top: 1px solid var(--border-subtle); }
  .market-verdict strong { font-size: 16px; }
  .page-item .price-cards { display: grid; grid-template-columns: 1fr; gap: 0; }
  .page-item .price-card {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    padding: 14px 12px;
    border-radius: 0;
    border-width: 0 0 1px;
  }
  .page-item .price-card:first-child { border-radius: var(--r-md) var(--r-md) 0 0; }
  .page-item .price-card:last-child { border-bottom: 0; border-radius: 0 0 var(--r-md) var(--r-md); }
  .page-item .price-card-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
  .page-item .price-card-region { grid-column: 1; }
  .page-item .price-card-value { grid-column: 2; grid-row: 1; text-align: right; font-size: 22px; }
  .page-item .price-card-meta { grid-column: 1 / -1; }
  .page-item .price-card::after { position: static; grid-column: 2; grid-row: 3; align-self: end; justify-self: end; }

  .page-analytics .pg-head { padding: 34px 0 22px 16px; }
  .page-analytics .pg-head h1 { font-size: 28px; }
  .page-analytics .pg-toc {
    position: relative;
    top: auto;
    margin-inline: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .page-analytics .pg-toc a { min-width: 210px; scroll-snap-align: start; }

  .page-my-alerts .state-box { min-height: 220px; }
  .page-my-alerts .modal-overlay,
  .page-my-alerts .am-backdrop { align-items: end; }
  .page-my-alerts .am-modal,
  .page-my-alerts [role="dialog"] { width: 100vw; max-height: calc(100dvh - 18px); margin: 0; border-radius: 16px 16px 0 0; }

  .page-pricing .uh { border-radius: 0 0 18px 18px; }
  .page-admin .adm-bar { gap: 10px; }
  .page-admin .adm-search { order: 3; flex: 1 0 100%; }
  .page-admin .adm-bar-act { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .page-admin .adm-grid--main,
  .page-admin .adm-grid--2,
  .page-admin .adm-grid--3 { grid-template-columns: 1fr; }
  .page-admin .toolbar-left { display: grid; grid-template-columns: 1fr; width: 100%; }
  .page-admin .toolbar-left > input,
  .page-admin .toolbar-left > select { width: 100% !important; }
}

@media (max-width: 390px) {
  .page-home .lp-jump { grid-template-columns: 1fr; }
  .page-database .toolbar-actions { grid-template-columns: 1fr; max-height: 176px; }
  .market-verdict { grid-template-columns: 1fr; }
  .market-verdict .mv-lead { grid-column: auto; }
  .market-verdict > div { border-left: 0; border-top: 1px solid var(--border-subtle); }
  .market-verdict > div:first-child { border-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.tl-page { background-attachment: scroll; }
  .tl-nav-links a::after, .rail-foot a::after, .rail-settings::after { transition: none; }
}

/* ── Production responsive hardening · 2026-09-18 ──────────────────────────────
   These rules intentionally live at the end of the presentation layer. Several earlier phone
   overrides preceded their desktop base rules, so the later desktop declarations won at 390px.
   The final layer is the contract: one-column item intelligence, one shared bottom-safe offset,
   and touch-safe personal data cards. */
:root {
  --mobile-nav-height: 62px;
  --mobile-bottom-safe: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px));
  --grade-aa-readable: #b68be8;
}

html[data-theme="light"] { --grade-aa-readable: #6827a3; }

/* A command bar is one labelled product-tools region. Its search and market nav remain their own
   nested landmarks, while the account action no longer sits outside every landmark. */
.tl-commandbar[role="region"] { isolation: isolate; }

/* Small data labels need normal-text contrast on tinted cards. */
.page-item .mv-k,
.page-item .mv-note { color: var(--content-secondary); }
.page-nix .it-g.g-AA,
.page-nix .it-g.g-AA2,
.page-nix .it-g.g-AA3 { color: var(--grade-aa-readable); }
.page-my-alerts .ma-terms { color: var(--content-secondary); opacity: 1; }

/* Muted comparison rows remain visually secondary without fading every glyph below WCAG AA. */
.page-pricing .ladder tbody tr.frow.is-flat th[scope="row"],
.page-pricing .ladder tbody tr.frow.is-flat td { opacity: 1; color: var(--content-tertiary); }
.page-pricing .ladder tbody tr.frow.is-flat th[scope="row"] small { color: var(--content-secondary); }
.page-pricing .ladder tbody tr.frow.is-flat:hover th[scope="row"],
.page-pricing .ladder tbody tr.frow.is-flat:hover td { opacity: 1; }

/* Guest proof belongs below the gate at full reading width, not inside the authenticated 306px
   deal-inspector column. */
.page-deals.deals-guest .deals-workspace { grid-template-columns: minmax(0, 1fr); }
.page-deals.deals-guest .deal-inspector { display: none; }
.page-deals.deals-guest .deals-showcase { min-width: 0; }

/* Inline names still read as prose, but their boxes meet the instrumented 24px pointer floor. */
.page-dashboard .me-att-list a.me-att-name,
.page-import .im-pot-name .pn > a { display: inline-flex; align-items: center; min-height: 24px; }
.page-ledger .ld-gate-alt a { text-decoration: underline; text-underline-offset: 2px; }
.skip-link { display: inline-flex; align-items: center; min-height: 24px; }
.pt-help:not([open]) > .pt-help-pop { display: none; }

@media (max-width: 880px) {
  /* Every bottom-owned action clears the same native navigation estate. */
  body.has-mobile-nav { padding-bottom: calc(var(--mobile-bottom-safe) + 8px); }
  body.has-mobile-nav.page-item #linkAlert {
    bottom: calc(var(--mobile-bottom-safe) + 10px);
    z-index: 900;
  }
  body.has-mobile-nav.page-onboarding .st-bar {
    bottom: var(--mobile-bottom-safe);
    z-index: 900;
  }
  body.has-mobile-nav.page-onboarding #main {
    padding-bottom: calc(var(--mobile-bottom-safe) + 96px);
  }
  body.page-item .tl-up-chip,
  body.page-onboarding .tl-up-chip {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* While consent is awaiting a choice, a second floating sales control is neither useful nor
     legible. The rail still carries Premium once the sheet is gone. */
  body:has(#ckBanner.is-in) .tl-up-chip {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  body:has(#ckBanner.is-in).page-item #linkAlert,
  body:has(#ckBanner.is-in).page-onboarding .st-bar {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* The logged-out landing page keeps a solid, compact phone rail so text never scrolls through
     the gap between its two controls. */
  body.page-home .tl-mobile-topbar {
    position: fixed;
    inset: 0 0 auto;
    z-index: 104;
    display: block;
    height: 62px;
    border-bottom: 1px solid var(--border-subtle);
    background: color-mix(in srgb, var(--surface-page) 94%, transparent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    backdrop-filter: blur(16px) saturate(1.12);
    pointer-events: none;
  }

  /* Scrollable decision rails advertise that they continue. The arrow is a compact edge cue,
     not another control, and therefore ignores pointer input. */
  .page-potentials .fam-rail::after,
  .page-analytics .pg-toc::after {
    content: '\2192';
    position: sticky;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    align-self: stretch;
    color: var(--content-secondary);
    background: linear-gradient(90deg, transparent, var(--surface-card) 42%);
    pointer-events: none;
  }
  .page-deals .table-wrap,
  .page-ledger #ldStats { position: relative; }
  .page-deals .table-wrap::after,
  .page-ledger #ldStats::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    width: 22px;
    background: linear-gradient(90deg, transparent, rgba(8, 10, 13, .88));
    pointer-events: none;
  }
}

@media (max-width: 700px) {
  /* This repeats the intended item breakpoint after the desktop rules, so the phone cannot
     inherit the 1fr/340px analysis grid or a sticky comparison rail. */
  .page-item #content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .page-item #content > .item-chart-card,
  .page-item #content > .price-rail {
    grid-column: 1;
    grid-row: auto;
    position: static;
    min-width: 0;
  }
  .page-item #content > .price-rail { order: initial; top: auto; }
  .page-item #content > .price-rail .price-cards { grid-template-columns: minmax(0, 1fr); }
  .page-item #content > .price-rail .price-card {
    padding: 14px 12px;
    border-width: 0 0 1px;
  }
  .page-item #content > .price-rail .price-card:last-child { border-right: 0; border-bottom: 0; }
  .page-item #content > .price-rail .price-card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px;
  }
  .page-item #content > .price-rail .price-card-region { grid-column: 1; }
  .page-item #content > .price-rail .price-card-value {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
    font-size: 22px;
  }
  .page-item #content > .price-rail .price-card-meta { grid-column: 1 / -1; }
  .page-item #content > .price-rail .price-card::after {
    position: static;
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    justify-self: end;
  }
  .page-item #content > .item-chart-card { min-height: 0; }
  .page-item #content > .item-chart-card .chart-frame { min-height: 340px; }
  .page-item #content > .item-chart-card .chart-wrap { min-height: 310px; }
  .page-item .chart-controls { align-items: stretch; }
  .page-item .range-buttons,
  .page-item .chart-toggles { width: 100%; flex-wrap: nowrap; overflow-x: auto; }
  .page-item .range-buttons > *,
  .page-item .chart-toggles > * { flex: 0 0 auto; }

  /* Mobile ledger filters participate in document flow. A 230px sticky slab left barely half a
     phone for the journal and made every scroll feel trapped. */
  .page-ledger .ld-filters { position: static; top: auto; z-index: auto; backdrop-filter: none; }
  .page-ledger tbody tr {
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr) minmax(112px, .72fr);
    grid-template-areas:
      "item region"
      "bought sold"
      "fee hold"
      "net net"
      "status status";
  }
  .page-ledger tbody td { min-width: 0; }
  .page-ledger tbody td.ld-cell-item { padding-right: 8px; }
  .page-ledger tbody td.ld-cell-item .item-cell { min-width: 0; }
  .page-ledger tbody td.ld-cell-item .ld-item-text { min-width: 0; }
  .page-ledger tbody td.ld-cell-item .ld-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .page-ledger tbody td.ld-cell-sold,
  .page-ledger tbody td.ld-cell-hold { overflow-wrap: anywhere; }
  .page-ledger tbody td.ld-cell-net {
    margin-right: 0;
    padding-right: 0;
  }
  .page-ledger tbody td.ld-cell-status {
    width: 100%;
    padding-top: 8px;
    text-align: left;
  }
  .page-ledger .ld-cell-status button.ld-status {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  /* A compact inset consent sheet leaves substantially more product visible and still keeps both
     choices equal, touch-safe and above the native bottom navigation. */
  .ck {
    left: 10px;
    right: 10px;
    width: auto;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    border: 1px solid var(--border-default);
    border-radius: var(--r-lg);
  }
  .ck-title { font-size: 13.5px; }
  .ck-body { font-size: 12px; line-height: 1.45; }
  .ck-more { margin-top: 5px; }
  .ck-acts { margin-top: 10px; }

  /* Timeline endpoint labels stay inside the rail. Both the time and its explanation share the
     same alignment; previously only the italic explanation was counter-translated. */
  .page-pricing .fmt-mark.now { transform: none; align-items: flex-start; }
  .page-pricing .fmt-mark.late { transform: translateX(-100%); align-items: flex-end; }
  .page-pricing .fmt-mark.now i,
  .page-pricing .fmt-mark.late i { transform: none; }
}

.tl-mobile-topbar { display: none; }