/* SPX Market Intelligence — Shared Light Theme v2
   Linked from all /spx pages. Provides: variables, body, header,
   navigation, cards, stats, filters, tables, buttons, modals, responsive. */

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

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Variables ── */
/* -- Theme tokens ---------------------------------------------------------
   DARK is the default: an unset preference must render exactly what the site
   rendered before this system existed. LIGHT is a real palette, not a filter.
   Semantic hues keep their meaning in both themes; only their lightness moves,
   because #4ADE80 on white is unreadable while #15803D is the same green at
   5.02:1.                                                                   */
:root {
  color-scheme: light;

  /* structure */
  --bg:            #F1F5F9;
  --bg-alt:        #E8EDF4;
  --surface:       #FFFFFF;
  --surface-2:     #F8FAFC;
  --surface-3:     #F1F5F9;
  --surface-muted: #F1F5F9;
  --header-bg:     #FFFFFF;
  --header-scrim:  rgba(255,255,255,.86);
  --border:        #D8E0EA;
  --border-2:      #CBD5E1;
  --border-strong: #94A3B8;
  --chart-grid:    #E2E8F0;

  /* text */
  --text:          #0B0D12;
  --text-bright:   #1E293B;
  --text-secondary:#334155;
  --text-muted:    #475569;
  --text-subtle:   #5A6678;
  --text-faint:    #64748B;
  --text-soft:     #475569;
  --on-accent:     #FFFFFF;

  /* semantic - meaning is fixed, lightness is theme-dependent */
  --green:         #15803D;   /* 5.02:1 */
  --green-soft:    #16A34A;   /* 3.94:1 - large text / fills only */
  --green-strong:  #15803D;   /* 5.02:1 */
  --green-deep:    #15803D;   /* 5.02:1 */
  --green-deeper:  #14532D;   /* 9.11:1 */
  --teal:          #0F766E;   /* 5.47:1 */
  --teal-soft:     #CCFBF1;
  --red:           #DC2626;   /* 4.83:1 */
  --red-soft:      #DC2626;   /* 4.83:1 */
  --red-strong:    #DC2626;   /* 4.83:1 */
  --red-deep:      #B91C1C;   /* 6.47:1 */
  --red-deeper:    #991B1B;   /* 8.30:1 */
  --danger:        #DC2626;   /* 4.83:1 */
  --amber:         #B45309;   /* 5.02:1 */
  --amber-soft:    #B45309;   /* 5.02:1 */
  --amber-strong:  #B45309;   /* 5.02:1 */
  --amber-deep:    #92400E;   /* 7.09:1 */
  --orange-strong: #C2410C;   /* 5.18:1 */
  --orange-deep:   #9A3412;   /* 7.30:1 */
  --yellow-strong: #A16207;   /* 4.92:1 */
  --cyan:          #0E7490;   /* 5.36:1 */
  --blue:          #1D4ED8;   /* 6.70:1 */
  --blue-soft:     #1D4ED8;   /* 6.70:1 */
  --blue-strong:   #1D4ED8;   /* 6.70:1 */
  --blue-deep:     #1E3A8A;   /* 10.35:1 */
  --purple:        #6D28D9;   /* 7.10:1 */
  --purple-strong: #5B21B6;   /* 8.98:1 */
  --btc-orange:    #B45309;   /* 5.02:1 */

  /* legacy names kept so existing rules keep resolving */
  --accent:        var(--teal);
  --accent-soft:   var(--teal-soft);
  --accent2:       #059669;
  --bull:          var(--green-deep);
  --bear:          var(--red-deep);
  --warn:          var(--amber-deep);
  --info:          var(--blue-strong);
  --text2:         var(--text-secondary);
  --text-sub:      var(--text-muted);

  --shadow:        0 8px 24px rgba(15,23,42,.07);
  --shadow-sm:     0 1px 4px rgba(15,23,42,.06);
  --radius:        16px;
  --radius-sm:     8px;

  /* canvas: read by JS, not inherited */
  --liq-long-rgb:  180,83,9;
  --liq-short-rgb:   14,116,144;
  --price-line:     #0B0D12;
  --price-casing:   255,255,255;
  --canvas-grid:    #E2E8F0;
  --canvas-label:   #64748B;
  --canvas-axis:    #475569;
  --observed-mark:  #B91C1C;

  --edge-shadow:   0 10px 26px rgba(15,23,42,.10), 0 2px 8px rgba(15,23,42,.06);
  --edge-glow:     0 10px 26px rgba(15,23,42,.10), 0 0 20px rgba(22,163,74,.10);
}

html[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #0B0D12;
  --bg-alt:        #0D1117;
  --surface:       #1A1D26;
  --surface-2:     #232733;
  --surface-3:     #21262D;
  --surface-muted: #232733;
  --header-bg:     #14161C;
  --header-scrim:  rgba(11,13,18,.82);
  --border:        #2E3340;
  --border-2:      #30363D;
  --border-strong: #3A3F4B;
  --chart-grid:    #1F2937;

  --text:          #F1F5F9;
  --text-bright:   #E6EDF3;
  --text-secondary:#C9D1D9;
  --text-muted:    #94A3B8;
  --text-subtle:   #64748B;
  --text-faint:    #8B949E;
  --text-soft:     #B4BCC9;
  --on-accent:     #FFFFFF;

  /* same hues, darkened until each clears 4.5:1 on #FFFFFF */
  --green:         #22C55E;   /* what pages have always meant by --green */
  --green-soft:    #4ADE80;
  --green-strong:  #22C55E;
  --green-deep:    #16A34A;
  --green-deeper:  #15803D;
  --teal:          #168A68;
  --teal-soft:     #E8F7F1;
  --red:           #EF4444;   /* what pages have always meant by --red */
  --red-soft:      #F87171;
  --red-strong:    #EF4444;
  --red-deep:      #DC2626;
  --red-deeper:    #B91C1C;
  --danger:        #D14343;
  --amber:         #FBBF24;
  --amber-soft:    #FBBF24;
  --amber-strong:  #F59E0B;   /* what pages have always meant by --yellow */
  --amber-deep:    #D97706;
  --orange-strong: #EA580C;
  --orange-deep:   #C2410C;
  --yellow-strong: #EAB308;
  --cyan:          #48C9E8;
  --blue:          #2563EB;   /* what pages have always meant by --blue */
  --blue-soft:     #60A5FA;
  --blue-strong:   #2563EB;
  --blue-deep:     #1D4ED8;
  --purple:        #A855F7;
  --purple-strong: #7C3AED;
  /* Bitcoin orange is a brand mark: #F7931A is only 2.30:1 on white, so light
     mode uses the nearest legible tone that is still recognisably it -
     #B45309 holds the hue at 26deg (vs 33deg), where #C2410C would drop to
     17deg and read as rust. */
  --btc-orange:    #F7931A;

  /* canvas: same meanings, darkened so alpha over white still reads */
  --liq-long-rgb:  240,166,58;
  --liq-short-rgb:   72,201,232;
  --price-line:     #FFFFFF;
  --price-casing:   6,8,12;
  --canvas-grid:    #1A1F29;
  --canvas-label:   #5A6678;
  --canvas-axis:    #6F7C90;
  --observed-mark:  #F2545B;

  --shadow:        0 8px 24px rgba(0,0,0,.42);
  --shadow-sm:     0 1px 4px rgba(0,0,0,.32);

  --edge-shadow:   0 14px 34px rgba(0,0,0,.42), 0 4px 12px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.035);
  --edge-glow:     0 12px 30px rgba(0,0,0,.4), 0 0 22px rgba(22,163,74,.14), inset 0 1px 0 rgba(255,255,255,.04);
}

/* -- Alias layer ----------------------------------------------------------
   The names the codebase already uses, re-pointed at the canonical tokens.
   This is what makes the switch global: 1,622 existing var() call sites become
   theme-aware without editing the pages that contain them.                  */
:root {
  --edge-bg:         var(--bg);
  --edge-surface:    var(--surface);
  --edge-surface-2:  var(--surface-2);
  --edge-border:     var(--border);
  --edge-text:       var(--text);
  --edge-text-muted: var(--text-muted);
  --edge-green:      var(--green-deep);
  --edge-blue:       var(--blue-strong);
  --edge-red:        var(--red-deep);
  --edge-amber:      var(--amber-deep);

  --card:            var(--surface);
  --card2:           var(--surface-2);
  --t:               var(--text);
  --t1:              var(--text);
  --t2:              var(--text-muted);
  --t3:              var(--text-subtle);
  --yellow:          var(--amber-strong);
  --primary:         var(--green-deep);
  --primary-hover:   var(--green-deeper);
  --warning:         var(--amber-deep);
  --orange:          var(--btc-orange);
  --poker-bg:        var(--bg);
  --poker-border:    var(--surface-2);
  --poker-text:      var(--text);
  --poker-muted:     var(--text-muted);
  --poker-soft:      var(--text-soft);
}

/* ── Body ── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui,Inter,sans-serif);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ── Header ── */
.hdr {
  display: flex; align-items: center; justify-content: flex-start;
  width: 100%; height: 66px; min-height: 66px;
  padding: 0 20px; gap: 20px;
  background: var(--header-bg);
  border-bottom: 1px solid #262A35;
  position: sticky; top: 0; z-index: 1000;
  flex-wrap: nowrap;
}
.logo {
  font-size: 14px; font-weight: 700; color: var(--accent);
  letter-spacing: -0.2px; display: flex; align-items: center; gap: 8px;
  white-space: nowrap; flex-shrink: 0; line-height: 1;
  text-decoration: none; cursor: pointer; padding: 4px 6px; margin: -4px -6px;
  border-radius: 8px; transition: background .12s ease;
}
.logo:hover { background: var(--surface-muted); }
.hdr .logo:hover { background: rgba(255,255,255,.08); }
.logo-img { height: 26px; width: auto; display: block; }

/* ── Navigation (grouped dropdown menu) ── */
.nav-top {
  display: flex; flex: 1 1 auto; min-width: 0; gap: 2px;
  flex-wrap: nowrap; align-items: center; height: 100%;
}
.nav-item {
  display: inline-flex; align-items: center; gap: 4px;
  height: 36px; padding: 0 12px; font-size: 14px; font-weight: 500;
  color: var(--text2); background: transparent; border: none; border-radius: 9px;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  font-family: inherit; position: relative;
  transition: background .12s ease, color .12s ease;
}
.nav-item:hover { background: var(--surface-muted); color: var(--text); }
.nav-item.active {
  background: var(--accent-soft); color: var(--accent); font-weight: 600;
}
.nav-item.active::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 2px; border-radius: 2px; background: var(--accent);
}
.nav-item-btc { color: #c2410c; }
.nav-item-btc:hover { background: #FFF7ED; color: #9a3412; }
.nav-item-btc.active { background: #FFF7ED; color: #c2410c; }
.nav-item-btc.active::after { background: #c2410c; }
.nav-mobile-link.nav-item-btc, .nav-mobile-sublink.nav-item-btc { color: #c2410c; }
.nav-item-signals { color: #A16207; }
.nav-item-signals:hover { background: #FEF3C7; color: #854D0E; }
.nav-item-signals.active { background: #FEF3C7; color: #A16207; }
.nav-item-signals.active::after { background: #A16207; }
.nav-mobile-link.nav-item-signals, .nav-mobile-sublink.nav-item-signals { color: #A16207; }
.dropdown-arrow { font-size: 12px; line-height: 1; margin-top: 1px; color: var(--text-sub); }

/* ── Dark header (scoped — the rest of the site stays on the light theme) ── */
.hdr .logo { color: #22C55E; }
.hdr .nav-item { color: #B4BCC9; }
.hdr .nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.hdr .nav-item.active { background: transparent; }
.hdr .nav-item-btc:hover { background: rgba(251,146,60,.14); color: #FDBA74; }
.hdr .nav-item-btc.active { background: transparent; }
.hdr .nav-item-signals { color: #FBBF24; }
.hdr .nav-item-signals:hover { background: rgba(251,191,36,.14); color: #FDE68A; }
.hdr .nav-item-signals.active { background: transparent; }
.hdr .dropdown-arrow { color: #7C8697; }
.hdr .nav-theme-btn { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; background: transparent; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.hdr .nav-theme-btn:hover { color: var(--text); border-color: var(--border-strong); }
.hdr .nav-help-btn { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #3A3F4B; background: rgba(255,255,255,.04); color: #B4BCC9; cursor: pointer; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 6px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05); transition: all .15s ease; }
.hdr .nav-help-btn:hover { background: rgba(255,255,255,.12); color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07); }
.hdr .nav-mobile-toggle { border-color: #3A3F4B; }
.hdr .nav-mobile-toggle span { background: #B4BCC9; }

.hdr .nav-login-link { color: #B4BCC9; font-size: 14px; font-weight: 600; text-decoration: none; padding: 6px 12px; border-radius: 8px; white-space: nowrap; }
.hdr .nav-login-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-account { position: relative; }
.hdr .nav-account-btn { display: flex; align-items: center; gap: 4px; background: transparent; border: none; padding: 2px; cursor: pointer; border-radius: 999px; transition: background .15s ease; }
.hdr .nav-account-btn:hover { background: rgba(255,255,255,.08); }
.hdr .nav-avatar-btn { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(160deg,#22C55E 0%,#168A68 100%); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: var(--edge-glow), 0 3px 8px rgba(0,0,0,.35); }
.hdr .nav-account-chevron { color: #B4BCC9; flex-shrink: 0; }
.nav-account-menu { display: none; position: absolute; top: calc(100% + 10px); right: 0; min-width: 210px; background: var(--edge-surface); border: 1px solid var(--edge-border); border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04); padding: 10px; z-index: 1500; }
.nav-account-menu.open { display: block; }
.nav-account-email { font-size: 12px; font-weight: 700; color: var(--edge-text); word-break: break-all; padding: 4px 8px; }
.nav-account-plan { font-size: 12px; color: var(--edge-text-muted); padding: 0 8px 8px; border-bottom: 1px solid var(--edge-border); margin-bottom: 6px; }
.nav-account-link { display: block; padding: 8px; border-radius: 8px; font-size: 14px; color: var(--edge-text); text-decoration: none; transition: background .15s ease; }
.nav-account-link:hover { background: var(--edge-surface-2); }
.nav-account-link-disabled { color: var(--edge-text-muted); cursor: default; pointer-events: none; }
.nav-account-link-disabled:hover { background: none; }

.nav-bell-wrap { position: relative; }
.hdr .nav-bell-btn { position: relative; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255,255,255,.04); color: #B4BCC9; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 6px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.05); transition: all .15s ease; }
.hdr .nav-bell-btn:hover { background: rgba(255,255,255,.12); color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07); }
.nav-bell-badge { position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: var(--edge-red); color: #fff; font-size: 12px; font-weight: 700; line-height: 15px; text-align: center; display: none; box-shadow: 0 0 0 2px var(--header-bg), 0 2px 6px rgba(220,38,38,.5); }
.nav-bell-menu { display: none; position: absolute; top: calc(100% + 10px); right: 0; width: 320px; max-width: calc(100vw - 24px); background: var(--edge-surface); border: 1px solid var(--edge-border); border-radius: 14px; box-shadow: 0 16px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04); padding: 10px; z-index: 1500; }
.nav-bell-menu.open { display: block; }
.nav-bell-empty { font-size: 14px; color: var(--edge-text-muted); padding: 20px 8px; text-align: center; }
.notif-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px 8px; border-bottom: 1px solid var(--edge-border); margin-bottom: 4px; }
.notif-title { font-size: 14px; font-weight: 700; color: var(--edge-text); }
.notif-mark-all { background: none; border: none; color: #60A5FA; font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px; white-space: nowrap; }
.notif-mark-all:hover { text-decoration: underline; }
.notif-list { max-height: 360px; overflow-y: auto; }
.notif-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 8px; border-radius: 10px; text-decoration: none; margin-bottom: 2px; background: transparent; transition: background .12s ease; }
.notif-item:hover { background: var(--edge-surface-2); }
.notif-item.unread { background: rgba(22,163,74,.07); box-shadow: inset 0 0 0 1px rgba(22,163,74,.16); }
.notif-item.unread:hover { background: rgba(22,163,74,.12); }
.notif-dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; background: transparent; }
.notif-item.unread .notif-dot { background: #4ADE80; box-shadow: 0 0 6px rgba(74,222,128,.7); }
.notif-icon { flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px; background: var(--edge-surface-2); color: var(--edge-text-muted); display: flex; align-items: center; justify-content: center; }
.notif-item.unread .notif-icon { color: #4ADE80; }
.notif-body { min-width: 0; flex: 1; }
.notif-line1 { display: block; font-size: 14px; font-weight: 600; color: var(--edge-text); line-height: 1.4; overflow-wrap: break-word; }
.notif-item:not(.unread) .notif-line1 { color: var(--edge-text-muted); font-weight: 500; }
.notif-line2 { display: block; font-size: 12px; color: var(--edge-text-muted); margin-top: 2px; }
.notif-tag { display: inline-block; background: rgba(22,163,74,.16); color: #4ADE80; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 1px 6px; border-radius: 5px; }
.notif-icon-asset { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.notif-icon-crypto { background: rgba(234,179,8,.16); color: #EAB308; box-shadow: inset 0 0 0 1px rgba(234,179,8,.35); }
.notif-icon-stock { background: rgba(22,163,74,.16); color: #4ADE80; box-shadow: inset 0 0 0 1px rgba(22,163,74,.35); }
.notif-tv-link { flex-shrink: 0; align-self: center; margin-left: 4px; font-size: 14px; color: var(--edge-text-muted); }
.notif-item:hover .notif-tv-link { color: #4ADE80; }
@media (max-width: 480px) {
  .nav-bell-menu { position: fixed; top: 60px; left: 12px; right: 12px; width: auto; max-width: none; }
  .notif-icon, .notif-icon-asset { width: 22px; height: 22px; }
}

.nav-dropdown { position: relative; height: 100%; display: flex; align-items: center; }
.nav-dropdown-menu {
  display: none; position: absolute; top: 100%; left: 0; min-width: 200px;
  background: var(--edge-surface); border: 1px solid var(--edge-border); border-radius: 12px;
  box-shadow: var(--edge-shadow); padding: 10px 6px 6px; margin-top: 0; z-index: 1001;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-link {
  display: flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 10px; border-radius: 8px;
  font-size: 14px; font-weight: 500; color: var(--edge-text); text-decoration: none;
  white-space: nowrap; position: relative;
}
.nav-dropdown-link:hover { background: var(--edge-surface-2); color: var(--edge-text); }
.nav-dropdown-link.active { background: rgba(22,163,74,.16); color: #4ADE80; font-weight: 600; }

.nav-dot {
  display: none !important; width: 7px; height: 7px; border-radius: 50%;
  background: #dc2626; flex-shrink: 0;
}

.nav-mobile-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 36px; height: 36px; margin-left: auto; padding: 0;
  background: transparent; border: 1px solid var(--edge-border); border-radius: 8px; cursor: pointer;
}
.nav-mobile-toggle span { display: block; height: 2px; margin: 0 7px; background: var(--edge-text); border-radius: 2px; }
.nav-mobile-panel { display: none; }
.nav-mobile-panel.open { display: block; }
.nav-mobile-link {
  display: block; padding: 12px 20px; font-size: 14px; font-weight: 500;
  color: var(--edge-text); text-decoration: none; border-bottom: 1px solid var(--edge-border);
}
.nav-mobile-link.active { color: #4ADE80; font-weight: 700; background: rgba(22,163,74,.16); }
.nav-mobile-group { border-bottom: 1px solid var(--edge-border); }
.nav-mobile-group summary {
  padding: 12px 20px; font-size: 14px; font-weight: 600; color: var(--edge-text);
  cursor: pointer; list-style: none;
}
.nav-mobile-group summary::-webkit-details-marker { display: none; }
.nav-mobile-group summary::after { content: '⌄'; float: right; color: var(--edge-text-muted); }
.nav-mobile-group[open] summary::after { content: '⌃'; }
.nav-mobile-subgroup { padding-bottom: 6px; }
.nav-mobile-sublink {
  display: block; padding: 10px 20px 10px 34px; font-size: 14px;
  color: var(--edge-text); text-decoration: none;
}
.nav-mobile-sublink.active { color: #4ADE80; font-weight: 600; }
.nav-mobile-sublink .nav-dot, .nav-mobile-link .nav-dot { margin-left: 6px; }

@media (max-width: 900px) {
  .nav-top { display: none; }
  .nav-mobile-toggle { display: flex; }
  .nav-mobile-panel {
    position: fixed; top: 66px; left: 0; right: 0; bottom: 0;
    background: var(--edge-surface); overflow-y: auto; z-index: 999;
  }
}

/* ── Price sub-bar (dashboard only) ── */
.price-sub {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 24px;
  background: var(--edge-surface);
  border-bottom: 1px solid var(--edge-border);
  font-size: 12px;
}
.sep-v { width: 1px; height: 20px; background: var(--edge-border); flex-shrink: 0; }

/* ── Content wrapper ── */
.wrap {
  max-width: 1440px; margin: 0 auto; padding: 20px 24px;
}

/* ── Grid layouts ── */
.g1 { margin-bottom: 12px; }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.g4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 12px; }

/* ── Card ── */
.card {
  background: var(--edge-surface);
  border: 1px solid var(--edge-border);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--edge-shadow);
}

/* ── Stats grid ── */
.stats {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 20px;
}
.stat {
  background: var(--edge-surface); border: 1px solid var(--edge-border);
  border-radius: var(--radius); padding: 16px 20px;
  box-shadow: var(--edge-shadow); display: flex; align-items: flex-start; gap: 14px;
}
.stat-icon {
  width: 38px; height: 38px; border-radius: 10px; background: rgba(22,163,74,.16); color: #4ADE80;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.stat-body { min-width: 0; }
.stat-v { font-size: 24px; font-weight: 700; color: var(--edge-text); line-height: 1; }
.stat-l { font-size: 12px; color: var(--edge-text-muted); margin-top: 4px; }

/* ── Filter card ── */
.filter-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 20px;
  box-shadow: var(--shadow); margin-bottom: 16px;
}
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filter-row select, .filter-row input {
  height: 36px; padding: 0 12px; font-size: 12px; font-family: inherit;
  background: var(--surface-muted); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  outline: none; transition: border-color .15s; appearance: auto;
}
.filter-row select:focus, .filter-row input:focus { border-color: var(--accent); }
.filter-sep {
  width: 1px; height: 24px; background: var(--border); margin: 0 4px; flex-shrink: 0;
}
.filter-sum-row {
  display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap;
}
.filter-summary {
  font-size: 12px; color: var(--text-muted); background: var(--surface-muted);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 12px; flex: 1; min-width: 160px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.btn-reset {
  height: 36px; padding: 0 14px; font-size: 12px; font-family: inherit;
  font-weight: 600; color: var(--text-muted); background: var(--surface-muted);
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
  transition: all .15s; white-space: nowrap;
}
.btn-reset:hover {
  border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
.shown-lbl { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

/* ── Table card ── */
.tbl-card {
  background: var(--edge-surface); border: 1px solid var(--edge-border);
  border-radius: var(--radius); box-shadow: var(--edge-shadow); overflow: hidden;
  margin-bottom: 16px;
}
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Table ── */
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; padding: 10px 12px; font-size: 12px; font-weight: 700;
  color: var(--edge-text-muted); background: var(--edge-surface);
  border-bottom: 2px solid var(--edge-border);
  position: sticky; top: 0; z-index: 3; cursor: pointer; user-select: none;
  white-space: nowrap; text-transform: uppercase; letter-spacing: .5px;
}
thead th.nosort { cursor: default; }
thead th:not(.nosort):hover { color: var(--accent); }
thead th.sorted-asc::after  { content: " ↑"; color: var(--accent); font-size: 12px; }
thead th.sorted-desc::after { content: " ↓"; color: var(--accent); font-size: 12px; }
tbody td {
  padding: 8px 12px; border-bottom: 1px solid var(--edge-border);
  vertical-align: middle; white-space: nowrap;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--edge-surface-2); }
.tbl-empty { text-align: center; color: var(--edge-text-muted); padding: 48px; font-size: 14px; }

/* ── Primary button ── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 16px; font-size: 12px; font-weight: 600; font-family: inherit;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  border-radius: 8px; cursor: pointer; transition: all .15s;
}
.btn-primary:hover { background: #126B52; border-color: #126B52; }

/* ── Modal ── */
.modal-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.6); z-index: 1000;
  align-items: center; justify-content: center; padding: 16px;
}
.modal-box {
  background: var(--edge-surface); border: 1px solid var(--edge-border);
  border-radius: 20px; padding: 28px;
  max-width: 560px; width: 100%; max-height: 85vh; overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
}
.modal-box::-webkit-scrollbar { width: 4px; }
.modal-box::-webkit-scrollbar-thumb { background: var(--edge-border); border-radius: 2px; }
.modal-hdr {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;
}
.modal-title { font-size: 14px; font-weight: 700; color: var(--edge-text); }
.modal-close {
  background: none; border: none; color: var(--edge-text-muted);
  font-size: 24px; cursor: pointer; line-height: 1; padding: 0 4px; transition: color .15s;
}
.modal-close:hover { color: var(--edge-text); }

/* ── Footer ── */
.footer { font-size: 12px; color: var(--edge-text-muted); margin-top: 16px; padding: 0 2px; }

/* ═══════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════ */

/* 1024px */
@media (max-width: 1024px) {
  .hdr { padding: 10px 18px; }
  .wrap { padding: 16px 18px; }
  .stats { grid-template-columns: repeat(2,1fr); }
  .g3 { grid-template-columns: 1fr 1fr; }
  .g4 { grid-template-columns: repeat(2,1fr); }
  .price-sub { padding: 6px 18px; }
}

/* 768px */
@media (max-width: 768px) {
  .hdr { padding: 0 14px; }
  .logo { font-size: 14px; }
  .wrap { padding: 12px 12px; }
  .price-sub { padding: 5px 14px; gap: 8px; }
  .stats { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .stat { padding: 12px 14px; gap: 10px; }
  .stat-icon { width: 32px; height: 32px; font-size: 14px; }
  .stat-v { font-size: 24px; }
  .g2 { grid-template-columns: 1fr; }
  .g3 { grid-template-columns: 1fr; }
  .g4 { grid-template-columns: repeat(2,1fr); }
  .filter-card { padding: 12px 14px; }
  .filter-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .filter-row select, .filter-row input { height: 40px; font-size: 14px; width: 100% !important; }
  .filter-sep { display: none; }
  .filter-sum-row { flex-direction: column; align-items: stretch; gap: 6px; margin-top: 8px; }
  .filter-summary { min-width: 0; }
  .btn-reset { height: 40px; width: 100%; }
  .shown-lbl { text-align: center; }
}

/* Compact grouped navigation: preserve layout/behaviour, reduce footprint. */
.hdr { height:54px; min-height:54px; padding:0 20px; gap:4px; }
.logo { font-size:14px; font-weight:700; gap:7px; }
.nav-top { gap:4px; }
.nav-item { height:34px; padding:8px 12px; font-size:14px; border-radius:8px; }
.nav-dropdown-menu { min-width:180px; padding:6px; border-radius:10px; }
.nav-dropdown-link { height:auto; min-height:34px; padding:9px 12px; font-size:14px; }
.nav-mobile-toggle { width:34px; height:34px; }
@media (max-width:900px) {
  .nav-mobile-panel { top:54px; }
}
@media (max-width:600px) {
  .hdr { padding:0 14px; }
  .logo { font-size:14px; }
}
@media (max-width:390px) {
  .hdr { padding:0 10px; }
  .logo-img { height: 22px; }
}

/* 390px — mobile */
@media (max-width: 390px) {
  .hdr { padding: 0 10px; gap: 8px; }
  .logo { font-size: 12px; }
  .wrap { padding: 10px 10px; }
  .price-sub { padding: 5px 10px; gap: 6px; font-size: 12px; }
  .stats { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .stat { padding: 10px 12px; gap: 8px; }
  .stat-icon { width: 30px; height: 30px; font-size: 14px; }
  .stat-v { font-size: 18px; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .filter-row select, .filter-row input { height: 42px; font-size: 14px; }
  .btn-reset { height: 42px; }
  .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .modal-box { padding: 16px 14px; border-radius: 14px; max-height: 90vh; }
  .modal-backdrop { padding: 10px; }
  /* Prevent table from overflowing viewport */
  .tbl-card { overflow: hidden; }
  /* Long text doesn't stretch page */
  td, th { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
  /* Sticky columns on mobile */
  thead th:first-child, tbody td:first-child {
    position: sticky; left: 0; z-index: 2; background: var(--edge-surface);
  }
  tbody tr:hover td:first-child { background: var(--edge-surface-2); }
}

/* Compact page help (unrelated to top nav — used by render_page_info()).
   Collapsed by default; opens as a floating popover that never shifts layout. */
.page-info {
  position: relative; display: inline-flex; width: auto; margin: 0 0 0 auto; padding: 0;
  background: none; border: none; box-shadow: none; color: var(--text); flex-shrink: 0;
}
/* When (i) is paired inline with a label (e.g. "Обновлено: ... (i)"), the auto
   left-margin above fights the row's own alignment and splits the pair apart. */
.info-row { display: flex; align-items: center; gap: 6px; }
.info-row .page-info { margin: 0; }
.page-info-toggle {
  flex: 0 0 22px; width: 22px; height: 22px; padding: 0; border: 1px solid #7fc2ac;
  border-radius: 50%; background: #eaf9f3; color: var(--accent); font: 700 12px/1 inherit;
  cursor: pointer;
}
.page-info-content {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 0;
  width: min(360px, 88vw); max-height: 70vh; overflow-y: auto;
  background: var(--edge-surface); border: 1px solid var(--edge-border); border-radius: 13px;
  box-shadow: var(--edge-shadow); padding: 12px 14px; z-index: 1500;
}
.page-info-content strong { display: block; margin-bottom: 3px; color: #4ADE80; font-size: 12px; }
.page-info-content span { display: block; color: var(--edge-text-muted); font-size: 12px; line-height: 1.45; }
.page-info:not(.is-collapsed) .page-info-content { display: block; }
@media (max-width: 768px) {
  .page-info-content { position: fixed; top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; max-height: 60vh; }
}

/* Final compact navigation overrides. */
.hdr, .hdr button, .hdr a, .nav-dropdown-menu, .nav-mobile-panel { font-family:var(--font-ui,Inter,sans-serif); line-height:normal; -webkit-font-smoothing:auto; -moz-osx-font-smoothing:auto; }
.hdr { height:43px; min-height:43px; padding:0 20px; gap:4px; }
.logo { font-size:12px; font-weight:700; gap:6px; }
.nav-top { gap:4px; }
.nav-item { height:27px; padding:6px 10px; font-size:12px; border-radius:7px; }
.nav-dropdown-menu { min-width:180px; padding:6px; border-radius:10px; }
.nav-dropdown-link { height:auto; min-height:27px; padding:7px 10px; font-size:12px; }
.nav-mobile-toggle { width:27px; height:27px; }
@media (max-width:900px) { .nav-mobile-panel { top:43px; } }
@media (max-width:600px) { .hdr { padding:0 14px; } .logo { font-size:12px; } }
@media (max-width:390px) { .hdr { padding:0 10px; gap:4px; } .logo-img { height: 20px; } }

/* ── Flat UI (2026-09-13) ─────────────────────────────────────────────────────
   No box-shadow, text-shadow, drop-shadow or hover glow anywhere: surfaces are
   separated by their 1px border. Page templates still carry shadow declarations
   (inline and in their own <style>), so this block overrides them with
   !important instead of editing every page. Rings that marked a state (active
   filter, selected day, unread item, LONG/SHORT column stripe) are redrawn with
   outline or a background stripe, neither of which changes layout. */
*, *::before, *::after { box-shadow: none !important; text-shadow: none !important; }
.spark-green, .spark-blue, .spark-amber, .spark-red, .spark-neutral, .lp-kicker-mark { filter: none !important; }

/* Spread rings (0 0 0 Npx) → outline of the same width outside the border. */
.opp-stat.active-filter, .alt-stat.active-filter { outline: 2px solid var(--accent-soft) !important; outline-offset: 0; }
.pcalc input.want { outline: 2px solid color-mix(in srgb, var(--amber) 25%, transparent) !important; outline-offset: 0; }
.nav-bell-badge { outline: 2px solid var(--header-bg) !important; outline-offset: 0; }

/* Inset 1px rings → outline drawn inside the box. */
.notif-item.unread { outline: 1px solid rgba(22,163,74,.16) !important; outline-offset: -1px; }
.notif-icon-crypto { outline: 1px solid rgba(234,179,8,.35) !important; outline-offset: -1px; }
.notif-icon-stock { outline: 1px solid rgba(22,163,74,.35) !important; outline-offset: -1px; }
.lvl1-tab.active .lvl1-icon, .best-hero-icon { outline: 1px solid rgba(74,222,128,.35) !important; outline-offset: -1px; }
.trg-market-tab.active .trg-market-icon { outline: 1px solid rgba(255,255,255,.25) !important; outline-offset: -1px; }
.evc-seg-btn.is-active { outline: 1px solid var(--border-strong) !important; outline-offset: -2px; }
.evc-day.is-selected { outline: 1px solid var(--blue) !important; outline-offset: -2px; }
.lp-flow-step.active { outline: 1px solid rgba(22,163,74,.32) !important; outline-offset: -1px; }
.lp-example-row.is-ready { outline: 1px solid rgba(37,99,235,.32) !important; outline-offset: -2px; }
.lp-example-row.is-signal { outline: 1px solid rgba(22,163,74,.4) !important; outline-offset: -2px; }
.lp-feat-icon { outline: 1px solid var(--edge-border) !important; outline-offset: -1px; }
.lp-notif-mock-item { outline: 1px solid rgba(22,163,74,.2) !important; outline-offset: -1px; }

/* LONG / SHORT / alternative column heads kept their 3px top stripe as an inset shadow. */
.sig-col-head.long, .sig-col-head.short, .sig-col-head.alt {
  background-repeat: no-repeat !important; background-size: 100% 3px !important; background-position: top left !important;
}
.sig-col-head.long { background-image: linear-gradient(rgba(74,222,128,.55), rgba(74,222,128,.55)) !important; }
.sig-col-head.short { background-image: linear-gradient(rgba(248,113,113,.55), rgba(248,113,113,.55)) !important; }
.sig-col-head.alt { background-image: linear-gradient(rgba(147,197,253,.55), rgba(147,197,253,.55)) !important; }

/* Focus rings that were shadows → outline; focus stays visible. */
.auth-field input:focus { outline: 2px solid rgba(22,163,74,.45) !important; outline-offset: 0; }
.auth-btn:focus-visible { outline: 2px solid var(--green-deep) !important; outline-offset: 2px; }

/* ══ Redesign V1 (2026-09-14) ═══════════════════════════════════════════════
   One visual language for every EDGE page, taken from the Market Regime /
   Trigger calendar: flat surfaces, 1px borders, radius 14/10/999, sans type with
   tabular numbers, readable secondary text in both themes.
   This layer loads before each page's own <style>, so component rules use
   `html body …` specificity; inline style="" colours and fonts written by the
   Python templates are remapped with attribute selectors. Nothing here changes
   data, scoring or ordering — only presentation.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 22px; --space-6: 32px;
  --r-lg: 14px; --r-md: 12px; --r-sm: 10px; --r-xs: 6px; --r-pill: 999px;
  --radius: var(--r-lg); --radius-sm: var(--r-sm);
  --fs-label: 11px; --fs-sm: 12px; --fs-body: 13px; --fs-md: 15px; --fs-lg: 20px; --fs-xl: 24px;

  /* Semantic text colours: 4.5:1 or better on page and card backgrounds. */
  --pos-text: #15803D; --neg-text: #B91C1C; --warn-text: #92400E; --info-text: #1D4ED8;
  --link-text: #0F766E; --purple-text: #6D28D9;
  --green-soft: #15803D;            /* was #16A34A (3.9:1) and is used for small text */
  --success: var(--pos-text); --warning: var(--warn-text); --danger: var(--neg-text);
  /* Tokens some pages referenced but nobody defined (brief). */
  --bd: var(--border); --good: var(--pos-text); --bad: var(--neg-text);
}
html[data-theme="dark"] {
  --pos-text: #4ADE80; --neg-text: #F87171; --warn-text: #FBBF24; --info-text: #60A5FA;
  --link-text: #2DD4BF; --purple-text: #C4B5FD;
  --green-soft: #4ADE80;
  --text-subtle: #8B96A8;           /* was #64748B (3.5:1 on cards) */
}

/* ── 2. Typography ─────────────────────────────────────────────────────────── */
html body, html body button, html body input, html body select, html body textarea,
html body .hdr, html body .hdr button, html body .hdr a, html body .nav-dropdown-menu, html body .nav-mobile-panel {
  font-family: var(--font-sans);
}
html body code, html body pre, html body kbd, html body samp { font-family: var(--font-mono); }
/* Prices, percentages and scores are numbers, not code: sans with tabular figures. */
html body :is(.rv, .ts, .fg-num, .ai-box, .price-big, .price-chg, .mb-val, .num, .market-index span, .market-index strong,
              #liqheat .lh-z b, #liqheat .lh-z .u, #liqheat .lh-m .v, #liqheat .lh-row b),
html body [style*="font-family:var(--font-ui,Inter,sans-serif)], html body [style*="font-family: var(--font-ui,Inter,sans-serif)],
html body [style*="font-family:var(--font-ui,Inter,sans-serif)], html body [style*="font-family:var(--font-ui,Inter,sans-serif)] {
  font-family: var(--font-sans) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
html body :is(.stat-v, .opp-stat-count, .trg-stat-value, .hnum, .cnum, .score-num, .sig-score-pill, .forecast-ticker) {
  font-variant-numeric: tabular-nums;
}
/* Eyebrow labels: one size, weight and tracking everywhere. */
html body :is(.ctitle, .trg-stat-label, .lvl-label, .forecast-label, .mo-sec-title, .settings-section-label,
              .expl-cat-title, .pro-con-title, .sector-pulse-tag, .sig-col-head, .evc-hero-label) {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
html body :is(.ctitle, .trg-stat-label, .lvl-label, .forecast-label, .mo-sec-title, .settings-section-label) {
  color: var(--text-muted);
}
html body thead th { font-size: var(--fs-label); letter-spacing: .04em; color: var(--text-muted); }
/* Opacity-based muting drops below 4.5:1; use the muted colour instead. */
html body :is(.muted, .caveat, .t-mid, .creg, .ctrend) { opacity: 1; color: var(--text-muted); }
html body .card :is(.ctitle, .cnum) { opacity: 1; }

/* ── 3. Surfaces ───────────────────────────────────────────────────────────── */
html body :is(.card, .stat, .filter-card, .tbl-card, .trg-table-wrap, .best-hero, .lvl1-tab, .trg-market-tab, .trg-stat,
              .market-state, .how-to, .market-dashboard, .forecast-card, .trade-plan, .rotation-universe-card,
              .opp-stat, .pricebar, .ctx-col, .sig-list, .radar-list, .hero, .det, .ev, .modal-box, .mo-box,
              .sig-modal-box, .settings-modal-box, .rk-box, .pwa-install-modal, .eg-box) {
  background: var(--surface);
  background-image: none;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
html body .sig-list { border-radius: 0 0 var(--r-lg) var(--r-lg); }
html body .sig-col-head, html body .radar-col-head { border-radius: var(--r-lg) var(--r-lg) 0 0; background-color: var(--surface-2); }
html body .radar-list { border-radius: 0 0 var(--r-md) var(--r-md); }
html body :is(.card, .stat, .filter-card, .market-state, .how-to, .forecast-card, .trade-plan, .rotation-universe-card, .pricebar) {
  padding: var(--space-4) 18px;
}
html body .hero { padding: var(--space-4) 18px; }
html body .card[style*="padding"]:not([style*="padding:0"]):not([style*="padding: 0"]) { padding: var(--space-4) 18px !important; }
/* Inner blocks inside a card. */
html body :is(.market-index, .metric-cell, .driver-stat, .decision-card, .stock-hero, .eg-step, .sector-pulse-strip,
              .best-locked-strip, .evc-past-card, .market-regime, .market-confidence, .market-now, .market-driver, .ev) {
  background: var(--surface-2);
  background-image: none;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
/* Accent cards keep their meaning with a flat tint and a coloured 1px border. */
html body .best-hero { border-color: color-mix(in srgb, var(--pos-text) 35%, var(--border)); }
html body .best-trade { background: color-mix(in srgb, var(--pos-text) 7%, var(--surface)); border: 1px solid var(--pos-text); border-radius: var(--r-md); }
html body :is(.sig-stop, .sig-short) { background: color-mix(in srgb, var(--neg-text) 9%, var(--surface)) !important; border-width: 1px; }
html body .sig-long { background: color-mix(in srgb, var(--pos-text) 9%, var(--surface)) !important; border-width: 1px; }
html body .trg-market-tab.active { background: var(--green-deeper); background-image: none; border-color: var(--green-deeper); }
/* No lift or glow on hover: hover changes border colour only. */
html body :is(.trg-stat, .lvl1-tab, .sector-stock-trigger, .opp-stat, .forecast-card):hover { transform: none; border-color: var(--border-strong); }
html body .pwa-btn-primary:hover { filter: none; opacity: .92; }

/* ── 4. Badges, chips, buttons ─────────────────────────────────────────────── */
html body :is(.badge, .lane-badge, .radar-badge, .locked-pro-badge, .market-badge, .uh-layer, .risk-badge, .short-badge,
              .shadow-badge, .radar-shadow-badge, .issuer-status, .forecast-confidence, .expl-block, .lvl1-badge) {
  border-radius: var(--r-pill);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.45;
  padding: 1px 8px;
  white-space: nowrap;
}
html body .sig-score-pill { border-radius: var(--r-pill); font-size: var(--fs-label); font-weight: 700; }
html body :is(.lvl3-btn, .lvl3-dot-btn, .trg-filters button, .uh-hz-btn, .chart-btn, .dir-toggle a, .opp-page, .sig-risk-btn) {
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
}
html body :is(.btn-primary, .btn-reset, .locked-cta, .sector-list-close, .stock-drawer-actions a, .stock-drawer-actions button) {
  border-radius: var(--r-sm);
}
html body .btn-primary:hover { background: var(--accent); border-color: var(--accent); opacity: .9; }
html body :is(.lvl3-btn.active, .dir-toggle a.active) { background: var(--green-deeper); border-color: var(--green-deeper); color: #fff; }
html body .uh-hz-btn.active { background: var(--text); border-color: var(--text); color: var(--bg); }
html body .sig-risk-calc { color: var(--text); border-color: var(--border-strong); border-radius: var(--r-pill); font-size: var(--fs-label); letter-spacing: 0; }
html body .sig-risk-calc:hover { background: var(--surface-2); color: var(--text); }

/* ── 5. Contrast ───────────────────────────────────────────────────────────── */
/* Header: its rules were written for a dark header and applied in both themes. */
html body .hdr { border-bottom-color: var(--border); }
html body .hdr .logo { color: var(--pos-text); }
html body .hdr :is(.nav-item, .nav-login-link, .nav-account-chevron, .dropdown-arrow) { color: var(--text-muted); }
html body .hdr :is(.nav-item, .nav-login-link):hover { background: var(--surface-2); color: var(--text); }
html body .hdr .nav-item.active { color: var(--text); }
html body .hdr :is(.nav-help-btn, .nav-bell-btn) { background: var(--surface-2); border-color: var(--border); color: var(--text-muted); }
html body .hdr :is(.nav-help-btn, .nav-bell-btn):hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
html body .hdr .nav-mobile-toggle { border-color: var(--border); }
html body .hdr .nav-mobile-toggle span { background: var(--text-muted); }
html body .hdr .nav-avatar-btn { background: var(--green-deeper); background-image: none; }
html body :is(.nav-dropdown-link.active, .nav-mobile-link.active, .nav-mobile-sublink.active, .notif-tag, .stat-icon,
              .page-info-content strong, .notif-item.unread .notif-icon) { color: var(--pos-text); }
html body .notif-mark-all { color: var(--info-text); }
/* Guide modal: light-only colours broke the dark theme. */
html body :is(.eg-head h2, .eg-step b) { color: var(--text); }
html body .eg-body { color: var(--text-muted); }
html body :is(.eg-tip, .eg-heart) { background: var(--surface-2); border-color: var(--border); color: var(--text); }
html body .eg-heart b { color: var(--text); }
/* Semantic colours written inline by the templates (value colouring of numbers and pills). */
html body :is([style^="color:#16a34a" i], [style*=";color:#16a34a" i], [style*="; color:#16a34a" i],
              [style^="color:#22c55e" i], [style*=";color:#22c55e" i], [style^="color:#168A68" i], [style*=";color:#168A68" i],
              [style^="color:#4ADE80" i], [style*=";color:#4ADE80" i], [style^="color:#15803D" i], [style*=";color:#15803D" i],
              [style^="color:var(--green-soft)"], [style*=";color:var(--green-soft)"]) { color: var(--pos-text) !important; }
html body :is([style^="color:#dc2626" i], [style*=";color:#dc2626" i], [style*="; color:#dc2626" i],
              [style^="color:#ef4444" i], [style*=";color:#ef4444" i], [style^="color:#F87171" i], [style*=";color:#F87171" i],
              [style^="color:#B91C1C" i], [style*=";color:#B91C1C" i],
              [style^="color:var(--red-soft)"], [style*=";color:var(--red-soft)"]) { color: var(--neg-text) !important; }
html body :is([style^="color:#d97706" i], [style*=";color:#d97706" i], [style*="; color:#d97706" i],
              [style^="color:#f59e0b" i], [style*=";color:#f59e0b" i], [style^="color:#FBBF24" i], [style*=";color:#FBBF24" i],
              [style^="color:#EA580C" i], [style*=";color:#EA580C" i], [style^="color:#FB923C" i], [style*=";color:#FB923C" i]) { color: var(--warn-text) !important; }
html body :is([style^="color:#2563eb" i], [style*=";color:#2563eb" i], [style*="; color:#2563eb" i],
              [style^="color:#3B82F6" i], [style*=";color:#3B82F6" i], [style^="color:#60A5FA" i], [style*=";color:#60A5FA" i],
              [style^="color:var(--blue-soft)"], [style*=";color:var(--blue-soft)"]) { color: var(--info-text) !important; }
html body :is([style^="color:#94A3B8" i], [style*=";color:#94A3B8" i], [style^="color:#64748B" i], [style*=";color:#64748B" i],
              [style^="color:#6B7280" i], [style*=";color:#6B7280" i], [style^="color:#9CA3AF" i], [style*=";color:#9CA3AF" i],
              [style^="color:var(--t3)"], [style*=";color:var(--t3)"]) { color: var(--text-muted) !important; }
/* Token colours that are fine as fills but too dark (or too light) for small text. */
html body :is([style^="color:var(--teal)"], [style*=";color:var(--teal)"], [style^="color:var(--accent)"], [style*=";color:var(--accent)"]) { color: var(--link-text) !important; }
html body :is([style^="color:var(--red)"], [style*=";color:var(--red)"], [style^="color:var(--red-deep)"], [style*=";color:var(--red-deep)"]) { color: var(--neg-text) !important; }
html body :is([style^="color:var(--green)"], [style*=";color:var(--green)"], [style^="color:var(--green-deep)"], [style*=";color:var(--green-deep)"]) { color: var(--pos-text) !important; }
html body :is([style^="color:var(--purple)"], [style*=";color:var(--purple)"], [style^="color:var(--purple-strong)"], [style*=";color:var(--purple-strong)"], [style^="color:#7C3AED" i], [style*=";color:#7C3AED" i],
              [style^="color:#A855F7" i], [style*=";color:#A855F7" i], [style^="color:#A78BFA" i], [style*=";color:#A78BFA" i]) { color: var(--purple-text) !important; }
html body :is([style^="color:#1E3A8A" i], [style*=";color:#1E3A8A" i], [style^="color:#0284C7" i], [style*=";color:#0284C7" i],
              [style^="color:var(--blue)"], [style*=";color:var(--blue)"], [style^="color:var(--blue-strong)"], [style*=";color:var(--blue-strong)"]) { color: var(--info-text) !important; }
html body :is([style^="color:#f7931a" i], [style*=";color:#f7931a" i], [style^="color:#F97316" i], [style*=";color:#F97316" i],
              [style^="color:#EAB308" i], [style*=";color:#EAB308" i], [style^="color:var(--btc-orange)"], [style*=";color:var(--btc-orange)"],
              [style^="color:var(--orange-strong)"], [style*=";color:var(--orange-strong)"]) { color: var(--warn-text) !important; }
/* White labels on value bars: darker fills keep the label readable. */
html body [style*="background:var(--green)"][style*="color:#fff" i] { background: var(--green-deeper) !important; }
html body [style*="background:var(--red)"][style*="color:#fff" i] { background: var(--red-deeper) !important; }
/* Value classes of the dashboard and BTC rows (support / resistance / neutral / accent). */
html body :is(.rv.res, .res) { color: var(--neg-text); }
html body :is(.rv.sup, .rv.grn, .sup, .grn) { color: var(--pos-text); }
html body :is(.rv.ora, .ora, .rv.warn) { color: var(--warn-text); }
html body #liqheat .lh-badge.lh-obs { color: var(--neg-text); border-color: var(--neg-text); }
html body :is(.opp-page-size a, .lg-note a) { color: var(--link-text); }
/* Component colours measured below 4.5:1. */
html body :is(.lane-badge.tier-a, .issuer-OK, .market-index .up, .trg-stat-value.pos, .metric-good, .lvl-pos, .trg-pos) { color: var(--pos-text); }
html body :is(.market-index .down, .trg-stat-value.neg) { color: var(--neg-text); }
html body :is(.lane-badge.tier-multi, .radar-badge.multi) { color: var(--purple-text); }
html body :is(.expl-extended, .state-badge-extended) { color: var(--warn-text); }
html body .email-verify-banner a { color: var(--warn-text); }
html body .t-good { color: var(--pos-text); }
html body .t-warn { color: var(--warn-text); }
html body .t-bad { color: var(--neg-text); }
html body .vuln { border-left-color: var(--warn-text); background: color-mix(in srgb, var(--warn-text) 7%, transparent); }
html body .pb-wrap { background: var(--border); }
html body .settings-save-btn { background: var(--green-deeper); }
html body :is(.evc-hero-details summary, .evc-detail-source a, .tech summary) { color: var(--info-text); }
html body .evc-day.is-today .evc-day-number { color: #fff; }
html body .evc-chip-critical { color: var(--neg-text); border-color: var(--neg-text); }
html body .evc-chip-high { color: var(--warn-text); border-color: var(--warn-text); }

/* ── EDGE Best: "Почему этот сигнал здесь?" ──────────────────────────────── */
html body .sig-why > summary { font-weight: 600; }
html body :is(.sig-row-top, .best-row-top) { flex-wrap: wrap; row-gap: 6px; }
html body :is(.sig-why, .sig-why dt, .sig-why dd, .sig-why p, .sig-why div, .sig-why summary) { white-space: normal; }
html body .sig-why-codes code { white-space: normal; overflow-wrap: anywhere; }
html body .sig-why-group { margin-top: var(--space-2); padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-sm); }
html body .sig-why-rank { background: var(--surface-2); }
html body .sig-why-title { font-size: var(--fs-label); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
html body .sig-why-rank .sig-why-title { color: var(--pos-text); }
html body .sig-why .sig-metrics-list { margin: 0; }
html body .sig-why-tech { margin-top: var(--space-2); }
html body .sig-why-tech > summary { font-size: var(--fs-sm); color: var(--text-muted); cursor: pointer; min-height: 28px; display: flex; align-items: center; }
html body .sig-why-codes { margin: 4px 0 0; font-size: var(--fs-label); color: var(--text-muted); overflow-wrap: anywhere; line-height: 1.7; }

/* ── 6. Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  /* The theme makes every table cell nowrap; tables without a scroll wrapper must wrap. */
  html body .tbl :is(th, td) { white-space: normal; overflow-wrap: normal; word-break: normal; padding: 5px; }
  html body .tbl th { text-transform: none; letter-spacing: 0; }
  html body .market-indices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .next-condition { min-width: 0; }
  html body :is(.sig) { flex-wrap: wrap; gap: var(--space-3); }
}

/* ══ Redesign V1.1 (2026-09-14): contrast polish ═════════════════════════════
   /ru/dashboard heatmap and /spx/market-regime/liquidity. Colours only: no layout,
   no shadows, heatmap fills and state colours keep their meaning. */
:root {
  --muted: var(--text-muted);        /* referenced by the liquidity page, never defined */
  --on-green-soft: #FFFFFF;
  /* Labels on tinted state chips: one step deeper than the plain text tokens in light. */
  --pos-chip-text: #166534; --neg-chip-text: #991B1B; --warn-chip-text: #92400E;
}
html[data-theme="dark"] {
  --on-green-soft: #04120A;
  --pos-chip-text: #4ADE80; --neg-chip-text: #FCA5A5; --warn-chip-text: #FBBF24;
}

/* RU heatmap: tiles are translucent fills over the card. Text uses the full theme
   colour (the old .85/.7 opacity cost contrast); the deepest red bucket (≤ −3%,
   alpha .80) is too dark for dark text in the light theme, so it gets white text. */
html body .tm-cell { color: var(--text); }
html body .tm-cell :is(.tm-name, .tm-count) { opacity: 1; }
html body .tm-cell[style*="rgba(185,28,28,0.80)"] { color: #FFFFFF; }
html body .ltab.active { color: var(--on-green-soft); }
html body .bp-decl { color: var(--neg-text); }
html body .dfo-stat-lbl { color: #9CA3AF; }   /* label on the promo's fixed dark panel */

/* Liquidity: state colours through the theme's semantic text tokens. */
html body :is(.lq-good, .lq-chip.lq-ok, .lq-drv-v.pos) { color: var(--pos-text); }
html body :is(.lq-warn, .lq-chip.lq-stale) { color: var(--warn-text); }
html body :is(.lq-bad, .lq-chip.lq-missing, .lq-drv-v.neg) { color: var(--neg-text); }

/* Text on tinted chips (the tint lightens the backdrop in the light theme). */
html body :is(.lq-good, .lq-chip.lq-ok, .rating-bull, .rating-up) { color: var(--pos-chip-text); }
html body :is(.lq-warn, .lq-chip.lq-stale) { color: var(--warn-chip-text); }
html body :is(.lq-bad, .lq-chip.lq-missing, .rating-bear, .rating-dn, .bp-decl) { color: var(--neg-chip-text); }
html body :is(.contrib-val.bull) { color: var(--pos-text); }
html body :is(.contrib-val.bear) { color: var(--neg-text); }
html body .tv-arrow { opacity: 1; }

/* ── Единый светлый макет (2026-09-20) ──────────────────────────────────────
   Приводит основной сайт к тем же токенам, размерам и ритму, что и опорный
   макет: фон #F7F9FB, граница #E2E8F0, текст #0F172A, рабочий акцент — зелёный.
   Селекторы повторяют форму слоя «Surfaces» выше (html body :is(...)), иначе
   тот перебивает их по специфичности. Тёмная тема получает только новые имена
   токенов — её палитра не трогается. */

html:not([data-theme="dark"]) {
  --bg:            #F7F9FB;
  --border:        #E2E8F0;
  --border-strong: #CBD5E1;
  --text:          #0F172A;
  --text-muted:    #475569;   /* «secondary» из макета: контраст 7.5:1 на белом */
  --text-faint:    #64748B;   /* «muted» из макета: только крупный/служебный текст */

  --green-accent:       #16A34A;
  --green-accent-hover: #15803D;
  --green-light:        #DCFCE7;
  --green-soft-bg:      #F0FDF4;

  /* Золото остаётся акцентом важности; автоматически им ничего не красится. */
  --accent-gold:      #C9A86C;
  --accent-gold-soft: #F8F1E3;

  /* Зелёный вместо бирюзы как рабочий акцент; для текста берём тон потемнее. */
  --accent:      #15803D;
  --accent-soft: #F0FDF4;
}

html[data-theme="dark"] {
  --green-accent:       #22C55E;
  --green-accent-hover: #16A34A;
  --green-light:        rgba(34,197,94,.16);
  --green-soft-bg:      rgba(34,197,94,.08);
  --accent-gold:        #D4B87F;
  --accent-gold-soft:   rgba(212,184,127,.12);
}

/* ── Типографическая шкала ─────────────────────────────────────────────────
   Значения сняты с живого /alpha: Inter без примесей, 10–13px служебный текст,
   15–16px основной, 18/22px заголовки секций, 30px заголовок страницы.
   Ступени ограничены намеренно: промежуточных размеров (9.5, 10.5, 11.5, 12.5,
   14, 17, 19, 20, 26) в системе больше нет, они сведены к ближайшей ступени. */
:root {
  --text-2xs:  10px;   /* плотные метки в таблицах */
  --text-xs:   11px;   /* meta, время, бейджи */
  --text-sm:   12px;   /* мелкий служебный UI */
  --text-md:   13px;   /* вторичный текст, кнопки */
  --text-base: 15px;   /* основной текст */
  --text-nav:  14px;   /* навигация: фактическое значение /alpha (14/500) */
  --text-lg:   18px;   /* заголовок карточки */
  --text-xl:   22px;   /* заголовок секции */
  --text-2xl:  24px;   /* крупное значение */
  --text-page: 30px;   /* заголовок страницы */
  --text-display: 44px; /* единственное «витринное» число страницы */
  --lh-tight:  1.15;
  --lh-heading: 1.3;
  --lh-body:   1.55;
}

/* Один шрифтовой стек на весь интерфейс; моноширинный остаётся только там,
   где он уже применялся осознанно (колонки чисел, коды движка). */
html body { font-family: var(--font-ui,Inter,sans-serif);
            font-size: var(--text-base); line-height: var(--lh-body); }

/* Роли заголовков. Размеры приходят из шаблонов инлайном и своими классами
   (H2 был набран 22/18/17/16/14 на разных страницах), поэтому роль фиксируется
   здесь — источников слишком много, чтобы править каждый. */
html body h1, html body .now-title {
  /* вес тоже принудительно: у отдельных страниц свой класс на h1 (.lq-h1 и т.п.) */
  font-size: var(--text-page) !important; font-weight: 700 !important;
  line-height: var(--lh-tight); letter-spacing: -.01em; color: var(--text);
}
html body h2 { font-size: var(--text-xl) !important; font-weight: 700;
               line-height: var(--lh-heading); color: var(--text); }
html body h3 { font-size: var(--text-lg) !important; font-weight: 700;
               line-height: var(--lh-heading); color: var(--text); }

/* Вторичный текст и метки — одна ступень на всю систему. */
html body :is(small, .muted, .sub, .sig-why, .now-note) { font-size: var(--text-md); }
html body :is(.kicker, .eyebrow, .label-upp) {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-faint);
}

/* Кнопки: в эталоне 13/600, в терминале были 15/600, 16/400 и 16/600. */
html body :is(.btn-primary, .btn-secondary, .cta, button.primary, button.secondary,
              .now-btn, .sig-settings-btn, .lvl3-btn) {
  font-size: var(--text-md); font-weight: 600;
}

/* ── Контейнер ─────────────────────────────────────────────────────────────── */
html body .wrap { max-width: 1280px; margin: 0 auto; padding: 24px; }

/* ── Шапка ─────────────────────────────────────────────────────────────────── */
html body .hdr { min-height: 66px; background: var(--header-bg); border-bottom: 1px solid var(--border); }
html body .hdr .nav-top { align-items: center; }

/* ── Карточки ──────────────────────────────────────────────────────────────
   Лёгкая тень возвращается поверх flat-слоя выше (`*{box-shadow:none!important}`),
   поэтому здесь !important — иначе сброс выигрывает. */
html body :is(.card, .stat, .filter-card, .tbl-card, .best-hero, .market-state, .how-to,
              .forecast-card, .trade-plan, .rotation-universe-card, .pricebar, .ctx-col,
              .sig-list, .radar-list, .hero, .trg-stat, .opp-stat, .market-dashboard) {
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.04) !important;
}
html body :is(.card, .stat, .filter-card, .market-state, .how-to, .forecast-card,
              .trade-plan, .rotation-universe-card, .pricebar) {
  padding: 20px;
}

/* ── Кнопки ────────────────────────────────────────────────────────────────── */
html body :is(.btn-primary, .cta, button.primary) {
  background: var(--green-accent); color: #fff; border: 1px solid var(--green-accent);
  border-radius: 11px; padding: 10px 18px; font-size: 14px; font-weight: 700; cursor: pointer;
}
html body :is(.btn-primary, .cta, button.primary):hover {
  background: var(--green-accent-hover); border-color: var(--green-accent-hover);
}
html body :is(.btn-secondary, button.secondary) {
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: 11px; padding: 10px 18px; font-size: 14px; font-weight: 700; cursor: pointer;
}
html body :is(.btn-secondary, button.secondary):hover { background: var(--surface-2); }
html body :is(.btn-primary, .cta, button.primary, .btn-secondary, button.secondary):focus-visible {
  outline: 2px solid var(--green-accent); outline-offset: 2px;
}

/* Активные вкладки и фильтры — это и есть основная зелёная заливка страницы,
   поэтому берут тот же тон, что кнопки в опорном макете (#16A34A вместо #14532D). */
/* :not(.inactive) поднимает вес правила: выше по файлу тот же селектор уже
   красит кнопку в --green-deeper, и при равной специфичности он выигрывал. */
html body :is(.trg-market-tab.active, .lvl3-btn.active):not(.inactive) {
  background: var(--green-accent); border-color: var(--green-accent); color: #fff;
}

/* ── Бейджи ────────────────────────────────────────────────────────────────
   Цвета обычных бейджей остаются прежними: они несут смысл (риск, режим). */
html body .badge-soft {
  background: var(--green-soft-bg); color: var(--green-accent-hover); border: 1px solid var(--green-light);
}
html body .badge-gold {
  background: var(--accent-gold-soft); color: #8A6D3B; border: 1px solid var(--accent-gold);
}

/* ── Ссылки в контенте ─────────────────────────────────────────────────────── */
html body .wrap a:not(.btn-primary):not(.btn-secondary):not(.nav-item):not(.notif-item) { color: var(--accent); }
html body .wrap a:not(.btn-primary):not(.btn-secondary):not(.nav-item):not(.notif-item):hover { color: var(--green-accent-hover); }

/* ── Футер ─────────────────────────────────────────────────────────────────
   Логотип в футере повторяет шапку: два файла, нужный показывает тема. */
html body .legal-footer .footer-logo { height: 22px; width: auto; display: none; margin: 0 auto 12px; }
html[data-theme="dark"] body .legal-footer .logo-dark { display: block; }
html:not([data-theme="dark"]) body .legal-footer .logo-light { display: block; }
/* На экранах инициализации body — flex-строка, и вставленный футер вставал
   соседней колонкой, уезжая за правый край. Перенос строки действует только
   там, где body действительно flex; на обычных страницах свойство игнорируется. */
html body { flex-wrap: wrap; }
html body .legal-footer { width: 100%; box-sizing: border-box; }
html body .legal-footer a { text-decoration: none; }
html body .legal-footer a:hover { text-decoration: underline; }

@media (max-width: 768px) {
  html body .wrap { padding: 16px; }
  html body .hdr { min-height: 56px; }
  html body :is(.card, .stat, .filter-card, .market-state, .how-to, .forecast-card,
                .trade-plan, .rotation-universe-card, .pricebar) { padding: 16px; }
  html body h1, html body .now-title { font-size: 24px !important; }
  html body h2 { font-size: 18px; }
}

/* ── Лого-локап и общий футер ───────────────────────────────────────────────
   Живут в теме, а не в инлайновом блоке навигации: главная страница рисует
   свою шапку без render_nav, и футер там оставался без стилей. */
.logo-lockup { display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.logo-lockup__name { font-size: 18px; font-weight: 700; letter-spacing: .72px; line-height: 1;
                     color: var(--text); }
/* TERMINAL длиннее, чем ALPHA, поэтому трекинг меньше — иначе подпись шире знака. */
.logo-lockup__sub { font-size: 12px; font-weight: 700; letter-spacing: 1.1px; line-height: 1;
                    color: var(--green-accent, #16A34A); }
html[data-theme="dark"] .logo-lockup__name { color: #F5F7FB; }
html[data-theme="dark"] .logo-lockup__sub { color: #4ADE80; }
/* ── Футер по образцу Alpha ───────────────────────────────────────────────
   Одна строка: лого, ссылки, поддержка справа; ниже — строка о продукте и
   дисклеймер. Боковые поля считаются от окна, как у .wrap и шапки. */
.legal-footer {
  background: var(--surface); border-top: 1px solid var(--border);
  padding: 16px max(24px, calc((100% - 1280px) / 2 + 24px));
  margin-top: 26px; text-align: left; font-size: var(--text-md, 14px);
}
.legal-footer .ft-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px;
}
.legal-footer .ft-lockup { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.legal-footer .ft-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
html body .legal-footer a { color: var(--text-muted); font-size: var(--text-md, 14px);
                            text-decoration: none; }
html body .legal-footer a:hover { color: var(--green-accent, #16A34A); text-decoration: none; }
html body .legal-footer .ft-support { margin: 0 0 0 auto; color: var(--text-muted);
                                      font-size: var(--text-md, 14px); }
.legal-footer .ft-support a { font-weight: 600; color: var(--accent); }
@media (max-width: 720px) {
  .legal-footer { padding: 20px 16px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   EDGE UI / TYPOGRAPHY V1 (2026-10-08)
   Один шрифт и четыре размера на весь терминал:
     24px / 700  название страницы
     18px / 700  заголовок секции и крупной карточки
     14px / 400-600  весь основной интерфейс
     12px / 400-500  дата, источник, служебные подписи
   Прежние ступени (--text-2xs … --text-2xl, --fs-*) сведены к этим четырём,
   чтобы старые правила продолжали работать без правки каждого. Размеры
   крупнее 24px остаются только у показателей-«героев» (EDGE Score, цена).
   Иерархия внутри размера - насыщенностью, цветом и отступами.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --font-ui: Inter, sans-serif;
  --text-page: 24px;
  --text-section: 18px;
  --text-body: 14px;
  --text-meta: 12px;

  --font-sans: var(--font-ui); --font-mono: var(--font-ui);
  --text-2xs: var(--text-meta); --text-xs: var(--text-meta); --text-sm: var(--text-meta);
  --text-md: var(--text-body); --text-base: var(--text-body); --text-nav: var(--text-body);
  --text-lg: var(--text-section); --text-xl: var(--text-section); --text-2xl: var(--text-page);
  --fs-label: var(--text-meta); --fs-sm: var(--text-meta); --fs-body: var(--text-body); --fs-md: var(--text-body);
  --fs-lg: var(--text-section); --fs-xl: var(--text-page);
}
html, html body,
html body :is(button, input, select, textarea, optgroup, table, th, td, code, pre, kbd, samp) { font-family: var(--font-ui); }
/* Страница: чистый светлый фон без картинок; карточки отделяются границей и лёгкой тенью. */
html body { font-size: var(--text-body); background-image: none; }
html body :is(button, input, select, textarea) { font-size: var(--text-body); }
html body thead th { font-size: var(--text-meta); font-weight: 600; }
/* Ячейки таблиц - 14px. На телефоне плотные таблицы сохраняют свой размер (не меньше 12px):
   принудительные 14px выталкивали их за край экрана. */
@media (min-width: 721px) { html body tbody td { font-size: var(--text-body); } }
@media (max-width: 600px) { html body :is(.shown-lbl, .filter-summary) { white-space: normal; max-width: 100%; } }