/* AlgoTraderPro Design System */
/* Default link colour (GTP 2026-09-20). The stylesheet never set one, so every anchor
   without its own rule fell back to Bootstrap's blue (#0d6efd) — unreadable on this dark
   theme and visibly wrong on the homepage evidence links and the footer risk disclosure.
   Matches the design handoff's global `a { color: #8CCA2B }`. Components that set their own
   colour (buttons, nav, footer links, table cells) are unaffected: they are more specific. */
a { color: var(--green-primary); }
a:hover { color: var(--green-deep); }

:root {
    --bg-dark: #262B2F;
    --bg-card: #2C3136;
    --bg-card-border: #3A3F44;
    --accent: #8CCA2B;
    --accent-dark: #69952F;
    --text-white: #FFFFFF;
    --text-muted: #A0A8B0;
    --term-yellow: #E8D44D;   /* terminal-card highlights (homepage hero), used sparingly */
}

* { box-sizing: border-box; }

body {
    background-color: var(--bg-dark);
    color: var(--text-white);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    /* clip, not hidden (2026-09-18): with html { overflow-x: clip } the body's overflow no longer
       propagates to the viewport, so `hidden` made <body> its own (never-scrolling) scroll container
       and every position:sticky element on the site stuck to it instead of the window. */
    overflow-x: clip;
}

/* Typography */
.text-accent { color: var(--accent) !important; }
.text-muted-light { color: var(--text-muted) !important; }
.bg-accent { background-color: var(--accent) !important; color: #1a1d20 !important; }
.bg-accent-subtle { background-color: rgba(140, 202, 43, 0.15) !important; }
.bg-card { background-color: var(--bg-card); }

/* Navbar — 72px tall on desktop: every sticky offset in the page shell (control bars top:72px,
   rails/FAQ intro top:96px, ProvenAlpha thead top:131px) is derived from it. min-height, not height,
   so the collapsed mobile menu can still open below 992px. Background = --bg-deep at 92%. */
.navbar {
    min-height: 72px;
    background-color: rgba(26, 30, 33, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    padding: 0;
}
.navbar > .container { min-height: 71px; }   /* + the 1px bottom border = 72px */
@media (max-width: 991.98px) { .navbar-collapse { padding-bottom: 1rem; } }
.navbar-brand { display: flex; align-items: center; padding: 0; }
/* Client-supplied logo (transparent PNG, white wordmark), 579x145 → 38px tall. */
.brand-logo { height: 38px; width: auto; display: block; }
.nav-link { color: var(--text-secondary) !important; transition: color 0.2s; }
.nav-link:hover { color: var(--text-primary) !important; }
/* Menu sits straight after the logo (32px), links 22px apart; the CTA is pushed to the far right. */
.navbar .navbar-brand { margin-right: 2rem; }
.navbar .nav-main .nav-link { font-family: var(--font-body); font-size: 0.85rem; }
.navbar .nav-main .dropdown-toggle::after { display: none; }   /* no caret: Tools opens on hover */
@media (min-width: 992px) {
  .navbar .nav-main { gap: 22px; }
  .navbar .nav-main .nav-link { padding-left: 0; padding-right: 0; }
}
/* Start Free: a 32px pill, not a Bootstrap .btn (whose radius is forced to --r-sm site-wide). */
.nav-cta {
    display: inline-flex; align-items: center; height: 32px; padding: 0 14px;
    border-radius: 100px; background: var(--green-primary); color: var(--text-inverted);
    font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; text-decoration: none;
    transition: background-color 0.2s;
}
.nav-cta:hover { background: var(--green-deep); color: var(--text-primary); }
@media (min-width: 992px) { .nav-cta { margin-left: auto; } }
@media (max-width: 991.98px) { .nav-cta { margin-top: 0.5rem; } }

/* Buttons */
.btn-accent {
    background-color: var(--accent);
    color: #1a1d20;
    border: none;
    font-weight: 600;
}
.btn-accent:hover {
    background-color: var(--accent-dark);
    color: #fff;
}
.btn-outline-accent {
    border: 1px solid var(--accent);
    color: var(--accent);
}
.btn-outline-accent:hover {
    background-color: var(--accent);
    color: #1a1d20;
}

/* Cards */
.card-dark {
    background-color: var(--bg-card);
    border: 1px solid var(--bg-card-border);
    border-radius: 12px;
    transition: transform 0.2s, border-color 0.2s;
}
.card-dark:hover {
    transform: translateY(-2px);
    border-color: var(--accent-dark);
}
.card-featured {
    border-color: var(--accent) !important;
    box-shadow: 0 0 30px rgba(140, 202, 43, 0.1);
}

/* Icon Circle */
.icon-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(140, 202, 43, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hero */
.hero-section {
    min-height: 90vh;
    padding-top: 100px;
    background: linear-gradient(180deg, rgba(140, 202, 43, 0.05) 0%, transparent 60%);
}
.hero-section-sm {
    min-height: 40vh;
    padding-top: 100px;
    background: linear-gradient(180deg, rgba(140, 202, 43, 0.05) 0%, transparent 60%);
}

/* Footer */
footer {
    background-color: #1E2226;
    border-top: 1px solid var(--bg-card-border);
}
.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    display: block;
    padding: 0.2rem 0;
    transition: color 0.2s;
}
.footer-links a:hover { color: var(--accent); }

/* Section alternating bg — darker than body, lighter than card */
.bg-dark-subtle {
    background-color: #1E2226 !important;
}

/* Feature icon circles */
.feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(140, 202, 43, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--accent);
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-section { min-height: 70vh; }
    .display-3 { font-size: 2.2rem; }
    .display-4 { font-size: 1.8rem; }
}

/* Alternating section background — matches logo mid-gray tones */
.bg-dark-subtle {
    background-color: #23272B !important;
}

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Selection */
::selection {
    background-color: var(--accent);
    color: #1a1d20;
}

/* ═══════════════════════════════════════════
   DESIGN UPGRADE — Terminal × Premium SaaS
   Syne (headings) · DM Sans (body) · JetBrains Mono (data)
   ═══════════════════════════════════════════ */

body { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; }
h1,h2,h3,h4,h5,h6,.display-3,.display-4,.display-5,.display-6,.navbar-brand,.brand-text-logo {
    font-family: 'Syne', sans-serif;
}
.font-mono { font-family: 'JetBrains Mono', monospace; }

/* Hero: subtle grid-line background */
.hero-section, .hero-section-sm {
    position: relative;
    overflow: hidden;
}
.hero-section::before, .hero-section-sm::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(140,202,43,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(140,202,43,0.035) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    z-index: 0;
}
.hero-section > *, .hero-section-sm > * { position: relative; z-index: 1; }

/* Enhanced featured card */
.card-featured {
    box-shadow: 0 0 0 1px rgba(140,202,43,0.35), 0 0 50px rgba(140,202,43,0.1) !important;
}
.card-featured:hover {
    box-shadow: 0 0 0 1px rgba(140,202,43,0.6), 0 0 70px rgba(140,202,43,0.18) !important;
    transform: translateY(-3px) !important;
}

/* Price display — monospace terminal */
.price-tag {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    letter-spacing: -0.03em;
}

/* Metric pill — terminal style */
.metric-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    background: rgba(140,202,43,0.07);
    border: 1px solid rgba(140,202,43,0.18);
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: var(--accent);
    white-space: nowrap;
}

/* Section label */
.section-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
}

/* Glow divider */
.glow-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(140,202,43,0.4) 50%, transparent 100%);
    border: none;
    margin: 0;
}

/* ── Terminal Preview Card (hero decorative) ── */
.terminal-card {
    background: #0d1117;
    border: 1px solid rgba(140,202,43,0.22);
    border-radius: 12px;
    overflow: hidden;
    font-family: 'JetBrains Mono', monospace;
    box-shadow: 0 0 80px rgba(140,202,43,0.07), 0 24px 64px rgba(0,0,0,0.5);
}
.terminal-header {
    padding: 0.65rem 1rem;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(140,202,43,0.12);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.terminal-dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
.terminal-dot.td-red   { background:#ff5f57; }
.terminal-dot.td-yellow{ background:#febc2e; }
.terminal-dot.td-green { background:#28c840; }
.terminal-title {
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-left: 0.4rem;
}
.terminal-matrix {
    border-collapse: collapse;
    font-size: 0.72rem;
    width: 100%;
}
.terminal-matrix th {
    color: rgba(140,202,43,0.55);
    font-weight: 500;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    padding: 0.3rem 0.5rem;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.terminal-matrix th.tf-col { text-align: left; }
.terminal-matrix td {
    padding: 0.35rem 0.5rem;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.terminal-matrix td.tf-label {
    color: var(--text-muted);
    font-size: 0.65rem;
    text-align: left;
    letter-spacing: 0.05em;
}
.terminal-matrix td.bull { color: #8CCA2B; }
.terminal-matrix td.bear { color: #e74c3c; }
.terminal-matrix td.neutral { color: rgba(160,168,176,0.4); }
@keyframes rowPulse {
    0%,100% { background: transparent; }
    50% { background: rgba(140,202,43,0.06); }
}
.terminal-matrix tr.live-row { animation: rowPulse 2.5s ease infinite; }

.situation-scores {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 0;
    border-top: 1px solid rgba(140,202,43,0.12);
    margin-top: 0.5rem;
}
.score-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.25rem;
    border-right: 1px solid rgba(140,202,43,0.08);
}
.score-cell:last-child { border-right: none; }
.score-label { font-size: 0.55rem; letter-spacing: 0.1em; color: rgba(160,168,176,0.5); margin-bottom: 0.15rem; }
.score-value { font-size: 1rem; font-weight: 700; }
.score-value.bull { color: #8CCA2B; }
.score-value.bear { color: #e74c3c; }
.score-value.neutral { color: var(--text-muted); }

.terminal-alert {
    background: rgba(140,202,43,0.06);
    border: 1px solid rgba(140,202,43,0.15);
    border-radius: 4px;
    font-size: 0.62rem;
    letter-spacing: 0.05em;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
@keyframes pulseDot {
    0%,100% { opacity:1; transform:scale(1); }
    50% { opacity:0.4; transform:scale(0.8); }
}
.pulse-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    animation: pulseDot 1.5s ease infinite;
}

/* ── Animations ── */
@keyframes fadeSlideUp {
    from { opacity:0; transform:translateY(18px); }
    to   { opacity:1; transform:translateY(0); }
}
.anim-in { animation: fadeSlideUp 0.55s ease both; }
.anim-in-1 { animation-delay:.05s; }
.anim-in-2 { animation-delay:.15s; }
.anim-in-3 { animation-delay:.25s; }
.anim-in-4 { animation-delay:.35s; }

/* ── Accordion overrides ── */
.accordion-button:not(.collapsed) {
    color: var(--accent) !important;
    background: rgba(140,202,43,0.06) !important;
    box-shadow: none !important;
}
.accordion-button:focus { box-shadow: none !important; }
.accordion-button::after { filter: invert(1) sepia(1) saturate(2) hue-rotate(60deg); }

/* Indicator image placeholder */
.indicator-img-placeholder {
    height: 170px;
    background: linear-gradient(135deg, #1E2226 0%, #262B2F 100%);
    border-radius: 8px;
    border: 1px solid rgba(140, 202, 43, 0.12);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.indicator-img-placeholder.placeholder-lg {
    height: 240px;
}

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE v2 — Design Manual v1.0
   DM Serif Display (h1-h3) · DM Sans (body) · JetBrains Mono (data)
   ═══════════════════════════════════════════════════════════ */

/* ── Full Design System Variables ── */
:root {
  --bg-base:        #262B2F;
  --bg-surface:     #2E3338;
  --bg-elevated:    #363C42;
  --bg-deep:        #1A1E21;
  --green-deep:     #69952F;
  --green-primary:  #8CCA2B;
  --green-accent:   #E0DD00;
  --text-primary:   #FFFFFF;
  --text-secondary: #B2B6BA;
  --text-muted:     #767981;
  --cell-ink:       #E2E4E8;   /* every shaded screener cell's text: a bright grey, not white, so the tints still read (GTP 2026-10-23) */
  --text-inverted:  #1A1E21;
  --positive:       #8CCA2B;
  --negative:       #E05252;
  --border:         rgba(255,255,255,0.07);
  --border-accent:  rgba(140,202,43,0.28);
  --glow-green:     rgba(140,202,43,0.10);
  --glow-green-md:  rgba(140,202,43,0.16);
  /* Data surfaces (tables + charts) — see the "Data surfaces" block. All OPAQUE: sticky first-column
     cells inherit the row colour and must cover content scrolling under them. */
  /* Page width (GTP 2026-09-09): one cap and one fluid gutter for every Bootstrap container —
     12px on a phone so tables stay visible, 4vw in between, 64px on a desktop (then the cap centres). */
  --page-max:           1600px;
  --page-gutter:        clamp(0.75rem, 4vw, 4rem);
  --table-bg:           #2E3338;   /* table body: one step above the page */
  --table-row-alt:      #33383D;   /* zebra */
  --table-hover:        #3A4046;
  --table-row-selected: #374237;   /* lime 10% over --table-bg */
  --chart-bg:           #363C42;   /* chart canvas: one step above its panel */
  --chart-grid:         #454B52;
  --chart-axis:         #4B5158;
  --chart-text:         #B2B6BA;
  /* Page-shell redesign (2026-09-18): three values the handoff uses that had no token yet. */
  --text-faint:     #4B5158;   /* breadcrumb separators, footnotes, chart placeholder text (= --chart-axis) */
  --bg-band:        #2A2F34;   /* Screener group-header band, one step below --bg-elevated */
  --amber:          #D4AC5C;   /* the amber-ramp hue, promoted so text can use it */
  --line-faint:     rgba(255,255,255,0.04);   /* column dividers inside a group */
  --line-row:       rgba(255,255,255,0.05);   /* table row separators */
  --line-strong:    rgba(255,255,255,0.09);   /* sticky-column edge, end of a column group */
  --line-sep:       rgba(255,255,255,0.10);   /* control-bar cluster separators */
  --line-btn:       rgba(255,255,255,0.14);   /* ghost-button border in cards */
  /* ZoneHunter chart layer colours — the SAME values the chart draws and the legend swatches used before
     (.zh-sw-*, .zh-grade-*), promoted to tokens so the legend chips can reuse them (2026-09-18). */
  --zh-bfvg:  rgb(255,82,82);
  --zh-ufvg:  rgb(0,230,118);
  --zh-ob:    rgb(255,152,0);
  --zh-entry: #5B9BD5;
  --zh-ema:   #2962FF;
  --zh-g-ap:  #e040fb;
  --zh-g-a:   #ffeb3b;
  --zh-g-b:   #5B9BD5;
  --zh-g-c:   #616161;
  /* Market overview 8-band spectrum (2026-09-28) — pumping (strongest bullish) through falling
     (strongest bearish); tokens live here so the .os-ov-* rules past the hex-literal guard
     (line ~2183) can reference var() instead of a literal. */
  --ov-pumping:       #8CCA2B;
  --ov-pulling-back:  #6FA535;
  --ov-resuming-up:   #4F7F3A;
  --ov-turning-up:    #C3CC3F;
  --ov-turning-down:  #D4AC5C;
  --ov-resuming-down: #B0613F;
  --ov-bouncing:      #8F3B3B;
  --ov-falling:       #E05252;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --font-display: 'DM Serif Display', serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
}

/* ── Heading Font Override (Design Manual §3) ── */
h1, h2, h3, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--font-display) !important;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
h4, h5, h6, .navbar-brand, .brand-text-logo {
    font-family: var(--font-body);
}
.btn { border-radius: var(--r-sm) !important; }

/* ── Section Tag (eyebrow) ── */
.section-tag {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--green-primary);
    margin-bottom: 0.75rem;
    display: block;
}
/* ── Unified section header standard ── */
h2.section-headline {
    font-family: var(--font-display) !important;
    font-size: clamp(1.9rem, 3.5vw, 2.8rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    font-weight: 400;
    margin-bottom: 0.5rem;
}
p.section-lead {
    font-size: 1.05rem;
    color: var(--text-primary);
    max-width: 580px;
    margin-bottom: 0.5rem;
    font-weight: 400;
    line-height: 1.6;
}
p.section-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    max-width: 520px;
    margin-bottom: 0;
    line-height: 1.7;
}

/* ════════════════════════════════════════
   1. TICKER BAR
   ════════════════════════════════════════ */
.ticker-wrap {
    background: var(--bg-deep);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    height: 36px;
    display: flex;
    align-items: center;
    margin-top: 72px; /* navbar height offset (72px navbar, 2026-09-18) */
}
.ticker-inner { overflow: hidden; width: 100%; }
.ticker-track {
    display: flex;
    white-space: nowrap;
    animation: ticker-scroll 50s linear infinite;
    will-change: transform;
}
.ticker-track:hover { animation-play-state: paused; }
@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--text-secondary);
    padding: 0 1.8rem;
    border-right: 1px solid var(--border);
    flex-shrink: 0;
}
.ticker-symbol { color: var(--text-primary); font-weight: 700; }
.ticker-up   { color: var(--positive); }
.ticker-down { color: var(--negative); }
.ticker-neu  { color: var(--text-muted); }
.ticker-dot  { width: 5px; height: 5px; border-radius: 50%; background: var(--green-primary); animation: pulseDot 2s ease infinite; }
.ticker-sep { color: var(--border); margin: 0 0.2rem; }

/* ════════════════════════════════════════
   2. HERO V2
   ════════════════════════════════════════ */
.hero-v2 {
    min-height: calc(100vh - 98px); /* viewport minus navbar + ticker */
    padding: 5rem 0 4rem;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: var(--bg-base);
}
.hero-grid-bg {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(140,202,43,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(140,202,43,0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 40%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 40%, transparent 100%);
    pointer-events: none;
}
.hero-glow {
    position: absolute;
    top: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 400px;
    background: radial-gradient(ellipse at center, rgba(140,202,43,0.10) 0%, transparent 70%);
    pointer-events: none;
}
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--glow-green);
    border: 1px solid var(--border-accent);
    border-radius: 100px;
    padding: 0.3rem 0.9rem;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--green-primary);
    margin-bottom: 1.5rem;
}
.eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green-primary);
    animation: pulseDot 2s ease infinite;
    flex-shrink: 0;
}
.hero-headline {
    font-family: var(--font-display) !important;
    font-size: clamp(2.8rem, 5.5vw, 5rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}
.hero-headline em {
    font-style: italic;
    color: var(--green-primary);
}
.hero-sub {
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--text-secondary);
    max-width: 480px;
    margin-bottom: 1.5rem;
    font-weight: 300;
}
.hero-trust-bar {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}
.hero-trust-item {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding-right: 1rem;
    margin-right: 1rem;
    border-right: 1px solid var(--border);
    white-space: nowrap;
}
.hero-trust-item:last-child { border-right: none; }
.hero-trust-item strong { color: var(--text-secondary); }
.hero-ctas {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.btn-primary-v2 {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--green-primary);
    color: var(--text-inverted);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.015em;
    padding: 0.75rem 1.75rem;
    border-radius: var(--r-sm);
    border: none;
    text-decoration: none;
    transition: background 0.18s, transform 0.18s;
    cursor: pointer;
}
.btn-primary-v2:hover { background: var(--green-deep); color: var(--text-primary); transform: translateY(-1px); }
.btn-ghost-v2 {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.75rem 1.4rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: all 0.18s;
}
.btn-ghost-v2:hover { border-color: var(--green-primary); color: var(--green-primary); }
.btn-surface-v2 {
    display: inline-flex;
    align-items: center;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.65rem 1.3rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: all 0.18s;
}
.btn-surface-v2:hover { border-color: var(--border-accent); color: var(--text-primary); }

/* Kill stray ~12px horizontal overflow on mobile (Bootstrap row negative
   margins) that let the page scroll/shift sideways. `clip` doesn't create a
   scroll container, so sticky/fixed elements keep working. */
html { overflow-x: clip; }

/* ── Mobile hero fixes (added 2026-06-08) ──
   Below lg (992px) the dashboard column is hidden, so the single text column
   floated vertically-centered inside a full-height hero → huge empty gap.
   Also: the g-5 row gutter's negative margin pushed text past the hero's
   right edge (hero has overflow:hidden) → clipped subtext. Both fixed here. */
@media (max-width: 991.98px) {
    .hero-v2 {
        min-height: auto;
        padding: 2.5rem 0 3rem;
        align-items: flex-start;
    }
    /* fully neutralize the g-5 row gutter — its negative margin pushed the
       column past the hero's right edge (overflow:hidden) and clipped text/CTAs */
    .hero-v2 .row { margin-left: 0; margin-right: 0; }
    .hero-v2 .row > * { padding-left: 0; padding-right: 0; }
    .hero-headline { font-size: clamp(2.4rem, 9vw, 3.2rem); }
    .hero-sub { font-size: 1rem; max-width: 100%; overflow-wrap: break-word; }
}

/* ════════════════════════════════════════
   3. LIVE MARKET SCANNER
   ════════════════════════════════════════ */
.section-scanner {
    padding: 5rem 0;
    background: var(--bg-base);
    position: relative;
}
.scanner-header-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}
.scanner-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--glow-green);
    border: 1px solid var(--border-accent);
    border-radius: 100px;
    padding: 0.25rem 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--green-primary);
    white-space: nowrap;
}
.scanner-table-outer {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    position: relative;
}
.scanner-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 0.8rem;
}
.scanner-table thead th {
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.scanner-table th.sc-col-price,
.scanner-table th.sc-col-chg { text-align: right; }
.scanner-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}
.scanner-table tbody tr:last-child { border-bottom: none; }
.scanner-table td { padding: 0.9rem 1rem; vertical-align: middle; }
.sc-num { color: var(--text-muted); font-size: 0.65rem; width: 32px; }
.sc-asset { display: flex; align-items: center; gap: 0.6rem; }
.coin-logo { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.coin-logo-ph { width: 24px; height: 24px; border-radius: 50%; background: var(--bg-elevated); flex-shrink: 0; }
/* Asset-class glyphs and equity monogram tiles are square-ish (rx="6" in a 24x24 viewBox), not
   round CoinGecko photos — .coin-logo's border-radius: 50% would clip all four corners (the
   rounded-rect's corner arc sits ~13.1 units from centre vs. a 12-unit circular clip). Same
   specificity as .coin-logo, declared after it, so this wins on source order without touching
   .coin-logo itself (spec 2026-09-10 §6.1 fix round 2). */
.coin-glyph { opacity: .75; border-radius: 6px; }
.sc-asset-name { color: var(--text-primary); font-weight: 700; font-size: 0.82rem; font-family: var(--font-body); }
.sc-asset-tf { color: var(--text-muted); font-size: 0.62rem; letter-spacing: 0.06em; margin-left: 0.25rem; }
/* The quote currency, printed straight after the base with no separator:
   BTC|USDT, GOLD|USDC. Dimmed and lighter so the base still reads as the
   name of the market and the quote as an annotation on it. Colour comes from
   the palette token, never a literal — a hardcoded grey is how the HIP-3
   disclaimer ended up darker than the background it sat on. */
.sc-asset-quote { color: var(--text-muted); font-weight: 500; font-size: 0.72rem;
                  font-family: var(--font-body); letter-spacing: 0.01em; }
.sc-price { text-align: right; color: var(--text-primary); font-weight: 500; }
.sc-chg { text-align: right; }
.chg-up   { color: var(--positive); }
.chg-down { color: var(--negative); }
.chg-neu  { color: var(--text-muted); }
/* TF Alignment bar */
.tf-bar-wrap { display: flex; align-items: center; gap: 0.5rem; }
.tf-bar-track { width: 56px; height: 3px; background: var(--bg-muted, #767981); border-radius: 2px; overflow: hidden; }
.tf-bar-fill { height: 100%; border-radius: 2px; transition: width 0.4s; }
.tf-hi { background: var(--positive); }
.tf-md { background: var(--green-accent); }
.tf-lo { background: var(--negative); }
.tf-pct { font-size: 0.72rem; }
.tf-pct.tf-hi { color: var(--positive); }
.tf-pct.tf-md { color: var(--green-accent); }
.tf-pct.tf-lo { color: var(--negative); }
/* Signal badge */
.sig-long  { background: rgba(140,202,43,0.12); border: 1px solid rgba(140,202,43,0.28); color: var(--positive); }
.sig-short { background: rgba(224,82,82,0.10);  border: 1px solid rgba(224,82,82,0.22);  color: var(--negative); }
.sig-wait  { background: rgba(118,121,129,0.10); border: 1px solid var(--border);         color: var(--text-muted); }
.sig-watch { background: rgba(224,221,0,0.08);   border: 1px solid rgba(224,221,0,0.22);  color: var(--green-accent); }
.sig-badge {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: var(--r-sm);
    white-space: nowrap;
}
.sc-status { color: var(--text-muted); font-size: 0.7rem; text-transform: capitalize; }
.lock-gradient {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 160px;
    background: linear-gradient(to bottom, transparent 0%, var(--bg-surface) 75%);
    pointer-events: none;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
}
/* Scanner lock strip */
.scanner-lock-strip {
    text-align: center;
    padding: 2rem 1rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.scanner-lock-strip p { color: var(--text-secondary); font-size: 0.9rem; margin: 0; }
.scanner-lock-strip .lock-ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }
/* M9 — standalone rule: the Opportunity Screener homepage CTA row (_screener_home.html) uses
   .lock-ctas without the (removed) .scanner-lock-strip wrapper, so it needs its own layout. */
.lock-ctas { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.scanner-update-time { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-muted); letter-spacing: 0.05em; }

/* ════════════════════════════════════════
   4. DIFFERENTIATOR
   ════════════════════════════════════════ */
.section-diff {
    padding: 5rem 0;
    background: var(--bg-surface);
}
.diff-headline {
    font-family: var(--font-display) !important;
    font-size: clamp(1.9rem, 3.5vw, 2.8rem);
    line-height: 1.1;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}
.diff-sub { color: var(--text-muted); font-size: 1rem; margin-bottom: 0.25rem; }
.diff-main {
    font-size: 1.15rem;
    color: var(--text-secondary);
    font-weight: 400;
    margin-bottom: 3rem;
    max-width: 600px;
}
.diff-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.diff-card {
    background: var(--bg-surface);
    padding: 1.75rem;
    position: relative;
    transition: background 0.2s;
}
.diff-card:hover { background: var(--bg-elevated); }
.diff-icon {
    width: 42px;
    height: 42px;
    background: var(--glow-green);
    border: 1px solid var(--border-accent);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--green-primary);
    margin-bottom: 1rem;
}
.diff-card h5 {
    font-family: var(--font-body) !important;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    letter-spacing: 0;
    line-height: 1.3;
}
.diff-card p { font-size: 0.85rem; color: var(--text-secondary); margin: 0; line-height: 1.6; }

/* ════════════════════════════════════════
   5. HOW IT WORKS
   ════════════════════════════════════════ */
.section-how {
    padding: 5rem 0;
    background: var(--bg-base);
}
.how-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-top: 2.5rem;
}
@media (max-width: 768px) { .how-grid { grid-template-columns: 1fr; } }
.how-card {
    background: var(--bg-surface);
    padding: 2.25rem 1.75rem;
    position: relative;
    overflow: hidden;
    transition: background 0.2s;
}
.how-card:hover { background: var(--bg-elevated); }
.how-step-num {
    font-family: var(--font-mono);
    font-size: 5rem;
    font-weight: 700;
    color: rgba(140,202,43,0.06);
    position: absolute;
    top: 0.75rem;
    right: 1.25rem;
    line-height: 1;
    pointer-events: none;
}
.how-icon-wrap {
    width: 48px;
    height: 48px;
    background: var(--glow-green);
    border: 1px solid var(--border-accent);
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--green-primary);
    margin-bottom: 1.25rem;
}
.how-card h4 {
    font-family: var(--font-display) !important;
    font-size: 1.2rem;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.how-card p { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.65; margin: 0; }
.how-step-tag {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--green-primary);
    margin-bottom: 0.6rem;
}

/* ════════════════════════════════════════
   6. SIGNALS FEATURE
   ════════════════════════════════════════ */
.section-signals {
    padding: 5rem 0;
    background: var(--bg-surface);
}
.signal-card {
    background: #0d1117;
    border: 1px solid rgba(140,202,43,0.22);
    border-radius: var(--r-lg);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    overflow: hidden;
    box-shadow: 0 0 60px rgba(140,202,43,0.06), 0 20px 60px rgba(0,0,0,0.4);
}
.sig-card-header {
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding: 0.7rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.sig-card-title { color: var(--text-muted); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; }
.sig-card-badge { font-size: 0.58rem; letter-spacing: 0.06em; padding: 0.15rem 0.45rem; border-radius: 3px; font-weight: 700; text-transform: uppercase; }
.sig-body { padding: 1rem 1.25rem; }
.sig-direction { font-size: 1.05rem; font-weight: 700; color: var(--positive); margin-bottom: 0.9rem; }
.sig-direction.short { color: var(--negative); }
.sig-exchanges { color: var(--text-muted); font-size: 0.68rem; margin-bottom: 1rem; line-height: 1.5; }
.sig-row { display: flex; justify-content: space-between; padding: 0.35rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.sig-row:last-of-type { border-bottom: none; }
.sig-label { color: var(--text-muted); font-size: 0.65rem; }
.sig-val { color: var(--text-primary); font-weight: 600; }
.sig-val.blurred {
    filter: blur(5px);
    user-select: none;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    padding: 0 0.25rem;
}
.sig-divider { border-top: 1px solid rgba(255,255,255,0.06); margin: 0.85rem -1.25rem; padding: 0 1.25rem; }
.sig-ai-label { font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green-primary); margin: 0.75rem 0 0.5rem; }
.sig-ai-text { font-size: 0.72rem; color: var(--text-secondary); line-height: 1.6; font-family: var(--font-body); }
.sig-footer { font-size: 0.6rem; color: var(--text-muted); text-align: center; padding: 0.6rem 1.25rem; border-top: 1px solid rgba(255,255,255,0.05); letter-spacing: 0.06em; }
/* Tier cards */
.tier-cards { display: flex; flex-direction: column; gap: 0.75rem; }
.tier-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 1.25rem 1.5rem;
    transition: all 0.2s;
    position: relative;
}
.tier-card:hover { border-color: var(--border-accent); background: var(--bg-elevated); }
.tier-card.tier-featured {
    border-color: var(--border-accent);
    box-shadow: 0 0 30px rgba(140,202,43,0.08);
}
.tier-badge {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--green-accent);
    color: var(--text-inverted);
    padding: 0.15rem 0.5rem;
    border-radius: var(--r-sm);
    font-weight: 700;
    position: absolute;
    top: 1rem;
    right: 1rem;
}
.tier-name { font-family: var(--font-body); font-weight: 700; color: var(--text-primary); font-size: 1rem; }
.tier-desc { font-size: 0.8rem; color: var(--text-muted); margin: 0.25rem 0 0.75rem; }
.tier-price {
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--green-primary);
}
.tier-price span { font-size: 0.8rem; color: var(--text-muted); font-weight: 400; }
.tier-freq { font-size: 0.75rem; color: var(--text-muted); font-family: var(--font-mono); }
.tier-plan-tag { font-size: 0.75rem; color: var(--text-muted); }
.tier-plan-tag strong { color: var(--green-primary); }

/* ════════════════════════════════════════
   7. PRODUCTS
   ════════════════════════════════════════ */
.section-products {
    padding: 5rem 0;
    background: var(--bg-base);
}
.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-top: 2.5rem;
}
@media (max-width: 640px) { .products-grid { grid-template-columns: 1fr; } }
.prod-card {
    background: var(--bg-surface);
    padding: 2rem;
    position: relative;
    overflow: hidden;
    transition: background 0.2s;
}
.prod-card:hover { background: var(--bg-elevated); }
.prod-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--green-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.28s ease;
}
.prod-card:hover::before { transform: scaleX(1); }
.prod-icon {
    width: 48px; height: 48px;
    background: var(--glow-green);
    border: 1px solid var(--border-accent);
    border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; color: var(--green-primary);
    margin-bottom: 1.25rem;
}
.prod-card h4 {
    font-family: var(--font-display) !important;
    font-size: 1.2rem;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}
.prod-card p { font-size: 0.86rem; color: var(--text-secondary); margin-bottom: 1rem; line-height: 1.6; }
.prod-tier-tag {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 0.2rem 0.6rem;
    display: inline-block;
}
.prod-tag-core {
    color: var(--green-primary);
    border-color: var(--border-accent);
    background: var(--glow-green);
}

/* ════════════════════════════════════════
   8. PROOF NUMBERS
   ════════════════════════════════════════ */
.section-proof {
    padding: 5rem 0;
    background: var(--bg-deep);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.proof-grid {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    justify-content: center;
}
.proof-item {
    flex: 1 0 160px;
    text-align: center;
    padding: 1.5rem 1rem;
    border-right: 1px solid var(--border);
}
.proof-item:last-child { border-right: none; }
.proof-num {
    font-family: var(--font-mono);
    font-size: clamp(2.2rem, 4vw, 3.5rem);
    font-weight: 700;
    color: var(--green-primary);
    line-height: 1;
    margin-bottom: 0.4rem;
}
.proof-label {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}
@media (max-width: 640px) {
    .proof-item { border-right: none; border-bottom: 1px solid var(--border); }
    .proof-item:last-child { border-bottom: none; }
}

/* ════════════════════════════════════════
   9. INDICATORS STRIP
   ════════════════════════════════════════ */
.section-indicators {
    padding: 5rem 0;
    background: var(--bg-surface);
}
.indicators-strip {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.indicators-strip::-webkit-scrollbar { height: 4px; }
.indicators-strip::-webkit-scrollbar-track { background: transparent; }
.indicators-strip::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.ind-card {
    flex: 0 0 220px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 1.5rem;
    transition: all 0.2s;
    text-decoration: none;
}
.ind-card:hover { border-color: var(--border-accent); transform: translateY(-2px); }
.ind-card.ind-free { border-color: rgba(140,202,43,0.15); }
.ind-name { font-family: var(--font-body); font-weight: 700; font-size: 0.9rem; color: var(--text-primary); margin-bottom: 0.35rem; }
.ind-desc { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 1rem; line-height: 1.5; }
.ind-price {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-weight: 700;
    color: var(--green-primary);
}
.ind-price.free { color: var(--green-accent); font-size: 0.85rem; }
.ind-cta {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-decoration: none;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
    transition: color 0.15s;
}
.ind-card:hover .ind-cta { color: var(--green-primary); }

/* ════════════════════════════════════════
   10. PRICING
   ════════════════════════════════════════ */
.section-pricing {
    padding: 5rem 0;
    background: var(--bg-base);
}
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    margin-top: 2.5rem;
}
@media (max-width: 900px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .pricing-grid { grid-template-columns: 1fr; } }
.pricing-card {
    background: var(--bg-surface);
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    position: relative;
}
.pricing-card.featured {
    background: var(--bg-elevated);
    box-shadow: inset 0 0 0 1px var(--border-accent);
}
.pricing-tier-badge {
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--green-accent);
    color: var(--text-inverted);
    padding: 0.15rem 0.5rem;
    border-radius: var(--r-sm);
    font-weight: 700;
    display: inline-block;
    margin-bottom: 0.75rem;
    align-self: flex-start;
}
.pricing-name {
    font-family: var(--font-display) !important;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}
.pricing-amount {
    font-family: var(--font-mono);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin: 1rem 0 0.25rem;
}
.pricing-amount sup { font-size: 1rem; vertical-align: super; color: var(--text-muted); }
.pricing-period { font-size: 0.78rem; color: var(--text-muted); font-family: var(--font-mono); margin-bottom: 1.5rem; }
.pricing-divider { height: 1px; background: var(--border); margin: 0 0 1.25rem; }
.pricing-features { list-style: none; padding: 0; margin: 0 0 1.5rem; flex-grow: 1; }
.pricing-features li {
    font-size: 0.82rem;
    color: var(--text-secondary);
    padding: 0.3rem 0;
    padding-left: 1.25rem;
    position: relative;
}
.pricing-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--green-primary);
    font-weight: 700;
    font-size: 0.75rem;
}
.pricing-features li.dimmed { color: var(--text-muted); }
.pricing-features li.dimmed::before { content: '—'; color: var(--text-muted); font-weight: 400; }
.pricing-cta {
    display: block;
    text-align: center;
    padding: 0.65rem 1rem;
    border-radius: var(--r-sm);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    transition: all 0.18s;
    letter-spacing: 0.01em;
}
.pricing-cta-primary {
    background: var(--green-primary);
    color: var(--text-inverted);
}
.pricing-cta-primary:hover { background: var(--green-deep); color: var(--text-primary); }
.pricing-cta-outline {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.pricing-cta-outline:hover { border-color: var(--border-accent); color: var(--text-primary); }
.pricing-note {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    text-align: center;
    margin-top: 1.5rem;
}

/* ════════════════════════════════════════
   11. FINAL CTA
   ════════════════════════════════════════ */
.section-final-cta {
    padding: 6rem 0;
    background: var(--bg-deep);
    position: relative;
    text-align: center;
    overflow: hidden;
}
.cta-glow-bottom {
    position: absolute;
    bottom: -80px;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 300px;
    background: radial-gradient(ellipse at center, rgba(140,202,43,0.12) 0%, transparent 70%);
    pointer-events: none;
}
.cta-top-line {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--green-primary), transparent);
}
.section-final-cta h2 {
    font-family: var(--font-display) !important;
    font-size: clamp(2rem, 4vw, 3.5rem);
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-bottom: 1rem;
}
.section-final-cta p { font-size: 1rem; color: var(--text-secondary); max-width: 460px; margin: 0 auto 2rem; font-weight: 300; }
.section-final-cta .cta-sub { font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-muted); letter-spacing: 0.06em; margin-top: 1rem; }

/* ════════════════════════════════════════
   Legal Disclaimer Page
   ════════════════════════════════════════ */
.legal-body { max-width: 720px; }
.legal-section {
    margin-bottom: 2.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid var(--border);
}
.legal-section:last-child { border-bottom: none; }
.legal-h2 {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-accent);
    display: inline-block;
}
.legal-body p {
    font-size: .9rem;
    color: var(--text-secondary);
    line-height: 1.75;
    margin-bottom: .75rem;
}
.legal-body p:last-child { margin-bottom: 0; }
.legal-list {
    font-size: .9rem;
    color: var(--text-secondary);
    line-height: 1.75;
    padding-left: 1.25rem;
    margin-bottom: .75rem;
}
.legal-list li { margin-bottom: .4rem; }
.legal-contact {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 1.5rem;
}

/* ════════════════════════════════════════
   Scanner — live-trade row highlight
   ════════════════════════════════════════ */
.sc-live-row { border-left: 2px solid var(--positive) !important; }
.sc-live-tag {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-family: var(--font-mono); font-size: 0.55rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--positive); margin-top: 3px;
}
.sc-live-tag::before {
    content: '';
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--positive);
    animation: pulse-green 2s ease-in-out infinite;
}
@keyframes pulse-green {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.4; transform: scale(0.7); }
}

/* ════════════════════════════════════════
   Scanner — Multi-TF: 6-dot + percentage
   (sctf- prefix avoids conflict with tf-hi bg rule)
   ════════════════════════════════════════ */
.sctf-wrap  { display: flex; align-items: center; gap: 0.55rem; }
.sctf-dots  { display: flex; gap: 3px; align-items: center; }
.sctf-dot   { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.sctf-bull  { background: var(--positive); }
.sctf-bear  { background: var(--negative); }
.sctf-neu   { background: rgba(118,121,129,0.35); }
.sctf-pct   { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; min-width: 2.5rem; }
.sctf-pct.sctf-hi { color: var(--positive); }
.sctf-pct.sctf-md { color: var(--green-accent); }
.sctf-pct.sctf-lo { color: var(--negative); }

/* ════════════════════════════════════════
   Scanner — Score badge (SMC)
   ════════════════════════════════════════ */
.score-badge { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; }
.score-hi    { color: var(--positive); }
.score-md    { color: var(--green-accent); }
.score-lo    { color: var(--negative); }
.score-none  { color: var(--text-muted); }

/* ════════════════════════════════════════
   Scanner — Chart pattern cell
   ════════════════════════════════════════ */
.chart-pattern-wrap { display: flex; flex-direction: column; gap: 3px; }
.chart-pattern-name {
    font-size: 0.74rem; font-weight: 600; color: var(--text-primary);
    font-family: var(--font-body); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 120px;
}
.chart-bias-pill {
    font-family: var(--font-mono); font-size: 0.55rem; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.1rem 0.35rem; border-radius: 2px;
    display: inline-block; width: fit-content;
}
.bias-bullish { background: rgba(140,202,43,0.12); border: 1px solid rgba(140,202,43,0.25); color: var(--positive); }
.bias-bearish { background: rgba(224,82,82,0.10);  border: 1px solid rgba(224,82,82,0.22);  color: var(--negative); }
.bias-neutral { background: rgba(118,121,129,0.10); border: 1px solid var(--border);         color: var(--text-muted); }

/* ════════════════════════════════════════
   Scanner — VPST + Zone tags
   ════════════════════════════════════════ */
.vpst-tag {
    font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
    color: #00bcd4; white-space: nowrap;
}
.zone-tag {
    font-family: var(--font-mono); font-size: 0.68rem;
    color: var(--text-secondary); white-space: nowrap;
}

/* ════════════════════════════════════════
   Scanner — Locked column header indicator
   ════════════════════════════════════════ */
.scanner-table thead th.sc-col-locked {
    color: rgba(118,121,129,0.5);
    position: relative;
}
.scanner-table thead th.sc-col-locked::after {
    content: '🔒';
    font-size: 0.55rem;
    margin-left: 0.3rem;
    vertical-align: middle;
    opacity: 0.6;
}

/* ════════════════════════════════════════
   Scanner — Locked rows: blur tease
   ════════════════════════════════════════ */
.sc-locked td { user-select: none; }
.sc-blur {
    filter: blur(5px);
    user-select: none;
    pointer-events: none;
    display: inline-block;
}
/* dim the row number + logo placeholder slightly */
.sc-locked .sc-num       { opacity: 0.3; }
.sc-locked .coin-logo-ph { opacity: 0.25; }

/* hide price/chg + locked columns on narrow screens */
@media (max-width: 767px) {
    .sc-col-price,
    .sc-col-chg,
    .sc-col-locked { display: none; }
}

/* ════════════════════════════════════════
   Section — Who This Is For
   ════════════════════════════════════════ */
.section-for-who {
    padding: 3.5rem 0;
    background: var(--bg-deep);
}
.for-who-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
}
@media (max-width: 767px) {
    .for-who-inner { grid-template-columns: 1fr; gap: 2rem; }
}
.for-who-body {
    font-size: .95rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 1.25rem;
}
.for-who-body strong { color: var(--text-primary); }
.for-who-not {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}
.for-who-not-label {
    font-family: var(--font-mono);
    font-size: .65rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-right: .25rem;
}
.for-who-tag {
    font-size: .75rem;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: .15rem .55rem;
    font-family: var(--font-mono);
    letter-spacing: .02em;
}
.for-who-tag-yes {
    color: var(--green-primary);
    border-color: var(--green-primary);
    background: rgba(140, 202, 43, 0.07);
}
.for-who-col-quote {
    border-left: 2px solid var(--green-primary);
    padding-left: 2rem;
}
.for-who-quote {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-style: italic;
    color: var(--text-primary);
    line-height: 1.5;
    margin: 0 0 .75rem;
}
.for-who-quote-sub {
    font-family: var(--font-mono);
    font-size: .65rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--green-primary);
    margin: 0;
}

/* ═══════════════════════════════════════
   OPPORTUNITY SCREENER — column styles
   osc- prefix to avoid conflict with existing scanner-table rules
   ═══════════════════════════════════════ */

/* ∑TF score column — the osc-tfsum wrapper (bull/bear/neu bar) is gone (spec 2026-09-08 B2,
   replaced by the .os-hm heatmap on the <td>); osc-tfnum survives as a plain span. */

/* Situation badge */
.osc-sit {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .15rem .4rem;
  border-radius: 3px;
  white-space: nowrap;
}
.osc-sit-trend    { background: rgba(140,202,43,.18); color: var(--positive); border: 1px solid rgba(140,202,43,.3); }
.osc-sit-pullback { background: rgba(251,191,36,.15); color: #fbbf24;         border: 1px solid rgba(251,191,36,.3); }
.osc-sit-accum    { background: rgba(99,102,241,.18); color: #818cf8;         border: 1px solid rgba(99,102,241,.3); }
.osc-sit-reversal { background: rgba(239,68,68,.15);  color: var(--negative); border: 1px solid rgba(239,68,68,.3); }
.osc-sit-none     { background: var(--bg-elevated);   color: var(--text-muted); border: 1px solid var(--border); }

/* Zone label */
.osc-zone {
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
}
.osc-zone-abover { color: #ef4444; }
.osc-zone-hiprem { color: #f97316; }
.osc-zone-prem   { color: #eab308; }
.osc-zone-disc   { color: #84cc16; }
.osc-zone-hidis  { color: var(--positive); }
.osc-zone-belows { color: #22d3ee; }
.osc-zone-none   { color: var(--text-muted); }

/* TG Alpha column */
.osc-tg {
  display: inline-flex;
  flex-direction: column;
  gap: .1rem;
  font-size: .68rem;
}
.osc-tg-count { font-family: var(--font-mono); font-weight: 700; color: var(--text-primary); }
.osc-tg-bull  { color: var(--positive); font-size: .6rem; }
.osc-tg-bear  { color: var(--negative); font-size: .6rem; }
.osc-tg-neu   { color: var(--text-muted); font-size: .6rem; }

/* AI Rating column */
.osc-ai {
  display: inline-flex;
  flex-direction: column;
  gap: .1rem;
}
.osc-ai-enter { font-family: var(--font-mono); font-size: .62rem; font-weight: 700; color: var(--positive); text-transform: uppercase; }
.osc-ai-avoid { font-family: var(--font-mono); font-size: .62rem; font-weight: 700; color: var(--negative); text-transform: uppercase; }
.osc-ai-conf  { font-family: var(--font-mono); font-size: .58rem; color: var(--text-muted); }

/* Lead/Lag column */
.osc-lag {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  white-space: nowrap;
}
.osc-lag-leads { color: var(--positive); }
.osc-lag-lags  { color: var(--text-muted); }
.osc-lag-none  { color: var(--text-muted); }
.osc-lag-sub {
  font-size: .55rem;
  font-weight: 400;
  color: var(--text-muted);
  display: block;
  margin-top: .05rem;
}

/* --- Buy experience (spec 2026-08-28) --- */
.atp-buy-steps-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1.25rem; }
.atp-buy-steps-list li { display: flex; gap: .6rem; align-items: flex-start; }
.atp-buy-steps-list li i { margin-top: .2rem; }
@media (max-width: 767px) { .atp-buy-steps-list { grid-template-columns: 1fr; } }

.atp-video { position: relative; cursor: pointer; overflow: hidden; background: #000; }
.atp-video-play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; color: #fff; font-weight: 600; background: rgba(0,0,0,.25); transition: background .2s; }
.atp-video-play i { width: 72px; height: 72px; border-radius: 50%; background: var(--accent); color: #1a1d20; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; padding-left: 4px; }
.atp-video:hover .atp-video-play { background: rgba(0,0,0,.4); }
.atp-video-fallback { position: absolute; right: .75rem; bottom: .75rem; font-size: .75rem; color: #fff; opacity: .7; }
.atp-video.is-playing { aspect-ratio: 16 / 9; }
.atp-video.is-playing iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.atp-proof .atp-outcome { font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; }
.atp-proof .outcome-held .atp-outcome { background: rgba(140,202,43,.18); color: var(--accent); }
.atp-proof .outcome-failed .atp-outcome { background: rgba(255,99,99,.18); color: #ff8080; }

/* gumroad.js restyles anything it binds to; keep our buttons ours. */
/* Literal colors on purpose: gumroad.js defines its own --accent (an RGB
   triplet) on .gumroad-button, so var(--accent) resolves invalid there. */
a.atp-buy, a.atp-buy:hover, a.atp-buy:focus { background-color: #8CCA2B !important; color: #1a1d20 !important; border: none !important; box-shadow: none !important; font-family: inherit !important; }
a.atp-buy:hover { background-color: #69952F !important; color: #fff !important; }
a.atp-buy .logo-full, a.atp-buy img { display: none !important; }


/* ── FAQ accordion (homepage + ZoneHunter pages) ─────────────────────── */
.faq-acc { max-width: 820px; }
.faq-acc details { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-card); margin-bottom: .6rem; overflow: hidden; }
.faq-acc summary { list-style: none; cursor: pointer; padding: 1rem 1.1rem; color: var(--text-primary); font-size: .9rem; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.faq-acc summary::-webkit-details-marker { display: none; }
.faq-acc summary::after { content: '+'; color: var(--green-primary); font-size: 1.15rem; font-weight: 400; line-height: 1; flex-shrink: 0; transition: transform .2s; }
.faq-acc details[open] summary::after { content: '−'; }
.faq-acc details[open] summary { border-bottom: 1px solid var(--border); }
.faq-acc .faq-a { padding: .9rem 1.1rem 1.1rem; font-size: .82rem; color: var(--text-secondary); line-height: 1.65; }
.faq-acc details:hover { border-color: var(--border-accent); }

/* ── ZoneHunter section (/zonehunter/) ─────────────────────────────────── */
.zh-section { padding: 6rem 0 3rem; }
.zh-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.zh-links { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--text-muted); }
.zh-links a { color: var(--green-primary); text-decoration: none; }
.zh-links a:hover { text-decoration: underline; }
.zh-meta { display: flex; align-items: center; gap: 0.75rem; }
.zh-banner { border-radius: var(--r-lg); padding: 0.6rem 1rem; margin-bottom: 1rem; font-size: 0.85rem; }
.zh-stale { background: rgba(224,221,0,0.08); border: 1px solid rgba(224,221,0,0.3); color: var(--text-primary); }
.zh-unavailable { background: rgba(224,82,82,0.08); border: 1px solid rgba(224,82,82,0.3); color: var(--text-primary); }
.zh-controls { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 0.75rem; }
.zh-layout { display: grid; grid-template-columns: var(--zh-left, 55fr) 10px minmax(360px, 45fr); gap: 0.5rem; align-items: start; }
.zh-layout > * { min-width: 0; }
.zh-splitter { width: 10px; align-self: stretch; cursor: col-resize; border-radius: 4px; background: transparent; position: relative; touch-action: none; }
.zh-splitter::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; background: var(--border); border-radius: 2px; }
.zh-splitter:hover::before, .zh-splitter.is-dragging::before { background: var(--green-primary); }
.zh-chart-panel { position: sticky; top: 80px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 0.75rem; }
.zh-chart { height: 460px; width: 100%; overflow: hidden; }
.zh-chart-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.zh-chart-tools { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.zh-chip-icon { font-family: var(--font-body); }
.zh-chart-msg { color: var(--text-muted); font-size: 0.85rem; padding: 0.5rem 0; }
.zh-table-outer { overflow-x: auto; }
/* Header = same format as the Opportunity Screener (.os-table): larger uppercase mono, green sort arrows,
   hover cards via data-tip-* (card markup/CSS shared: .os-tip). */
.zh-table thead th { font-size: .74rem; letter-spacing: .06em; }
.zh-table th { white-space: nowrap; user-select: none; }
.zh-table th[data-sort] { cursor: pointer; }
.zh-table th.is-sorted-asc::after, .pa-table th.is-sorted-asc::after, .hip3-table th.is-sorted-asc::after { content: ' ↑'; color: var(--green-primary); }
.zh-table th.is-sorted-desc::after, .pa-table th.is-sorted-desc::after, .hip3-table th.is-sorted-desc::after { content: ' ↓'; color: var(--green-primary); }
.zh-table thead th:focus-visible { outline: 1px solid var(--green-primary); outline-offset: -1px; }
.zh-table tbody tr { cursor: pointer; }
.zh-table tbody tr.is-selected { background: var(--table-row-selected); }
.zh-table td { padding: 0.6rem 0.75rem; white-space: nowrap; }
/* Numeric headers — right-aligned like the cells. Deliberately NOT .sc-col-price/.sc-col-chg: those are hidden under 768px for the homepage scanner, while this table scrolls sideways and shows every column. */
.zh-table th.zh-num { text-align: right; }
.zh-grade[title], .zh-rrr[title] { cursor: help; }
.zh-chips { display: inline-flex; gap: 0.25rem; }
.zh-chip { font-family: var(--font-mono); font-size: 0.68rem; padding: 0.25rem 0.55rem; border-radius: 100px; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); cursor: pointer; }
.zh-chip.is-active { border-color: var(--border-accent); color: var(--green-primary); background: var(--glow-green); }
.zh-chip[data-dir="short"].is-active { border-color: rgba(224,82,82,0.6); color: #E05252; background: rgba(224,82,82,0.12); }
.zh-chip[data-tip-how] { cursor: help; }
.zh-selects { display: flex; gap: 0.75rem; font-size: 0.75rem; color: var(--text-secondary); }
.zh-selects select { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border); border-radius: 6px; padding: 0.15rem 0.3rem; font-size: 0.72rem; }
.zh-grade { display: inline-block; font-size: 0.6rem; font-weight: 700; border-radius: 2px; padding: 0 3px; line-height: 1.4; }
.zh-grade-AP { background: #e040fb; color: #fff; }
.zh-grade-A  { background: #ffeb3b; color: #000; }
.zh-grade-B  { background: #5B9BD5; color: #fff; }
.zh-grade-C  { background: #616161; color: #ddd; }
.zh-dim { color: var(--text-muted); font-size: 0.72rem; }
.zh-rrr-good { color: #8CCA2B; } .zh-rrr-ok { color: #E0DD00; } .zh-rrr-low { color: #E05252; }
/* Sets its own colour: a <button> otherwise takes the browser default (black) and the currentColor icon vanishes. */
.zh-chart-btn { background: transparent; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; padding: 0.1rem 0.4rem; color: var(--text-secondary); }
.zh-chart-btn:hover { color: var(--green-primary); border-color: var(--green-primary); }
.zh-legend { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; font-size: 0.7rem; color: var(--text-secondary); margin-top: 0.5rem; }
.zh-sw { display: inline-block; width: 14px; height: 9px; margin-right: 4px; vertical-align: middle; border: 1px solid transparent; }
.zh-sw-bfvg { background: rgba(255,82,82,0.5); border-color: rgba(255,82,82,0.35); }
.zh-sw-ufvg { background: rgba(0,230,118,0.5); border-color: rgba(0,230,118,0.35); }
.zh-sw-ob   { background: rgba(255,152,0,0.5); border-color: rgba(255,152,0,0.35); }
.zh-sw-entry { height: 2px; background: #5B9BD5; }
.zh-sw-sl    { height: 2px; background: #E05252; }
.zh-sw-tp    { height: 2px; background: #8CCA2B; }
.zh-sw-ema   { height: 2px; background: #2962FF; }
/* Inline Lucide icons ({% icon %} tag): sized to the text, coloured by it. Slightly lighter stroke than
   Lucide's 2px to sit with the site's thin type. */
.lu { width: 1em; height: 1em; vertical-align: -0.15em; stroke: currentColor; stroke-width: 1.75; flex-shrink: 0; }
/* Tool identity icons (GTP 2026-09-19): one Lucide glyph per tool, a finer stroke than UI icons. */
.lu.lu-tool { stroke-width: 1.5; }
/* ATP tool icons (#863, static/icons/tools/): the family's stroke is 1.75 wherever they sit; the one lit
   element carries its own yellow in the file, so only the outline follows currentColor (and hover). */
.lu.atp-tool-icon, .at9-page .lu.atp-tool-icon { stroke-width: 1.75; }
.btn-ghost-v2 .atp-tool-icon { color: var(--green-primary); }   /* handoff: lime outline in ghost buttons */
/* On a lime-filled button the accents vanish (ZoneHunter Chart's up candle IS the fill colour): there the whole
   icon takes the button's text colour, accents included (GTP 2026-10-26). Menus, rows and ghost buttons keep them. */
.btn-primary-v2 .atp-tool-icon [stroke]:not([stroke="none"]), .at9-page .at9-cta .atp-tool-icon [stroke]:not([stroke="none"]) { stroke: currentColor; }
.btn-primary-v2 .atp-tool-icon [fill]:not([fill="none"]), .at9-page .at9-cta .atp-tool-icon [fill]:not([fill="none"]) { fill: currentColor; }
.footer-links .lu-tool { color: var(--green-primary); vertical-align: -2px; margin-right: 2px; }
/* Legend = layer toggle bar (page + fullscreen chart). Off = struck through and dimmed. */
.zh-lg { display: inline-flex; align-items: center; gap: 0; background: none; border: 1px solid transparent; border-radius: 4px; padding: 0.1rem 0.3rem; font: inherit; color: inherit; cursor: pointer; line-height: 1.4; }
.zh-lg:hover { border-color: var(--border); background: var(--bg-elevated); }
.zh-lg:focus-visible { outline: 2px solid var(--green-primary); outline-offset: 1px; }
.zh-lg[aria-pressed="false"], .zh-lg.is-off { opacity: 0.45; text-decoration: line-through; }
.zh-lg.is-off .zh-grade { filter: grayscale(1); }
.zh-lg-grade { padding: 0.1rem 0.2rem; }
.zh-sw-label { width: auto; height: auto; font: 600 8px/1 sans-serif; font-style: normal; color: #000; background: #ffeb3b; padding: 1px 3px; border-radius: 2px; }
.zh-chart-pair select { min-width: 7rem; }
/* Table colour engine (pages/zonehunter_format.py ↔ zonehunter.js): shaded 24h and ×TF cells reuse the
   screener heatmap buckets (.os-hm-*); OB distance text uses the same ramp at full opacity (nearer = greener). */
.zh-table td.os-hm { font-family: var(--font-mono); }
.zh-table tbody tr:hover td.os-hm { filter: brightness(1.18); }
.zh-table tbody tr.is-selected td.os-hm { box-shadow: inset 0 0 0 1px rgba(140,202,43,0.35); }
.zh-hm-num { color: var(--text-primary); font-weight: 400; }
.zh-near { font-size: 0.72rem; font-weight: 600; }
.zh-near-p4 { color: rgb(140,202,43); } .zh-near-p3 { color: rgb(154,206,38); } .zh-near-p2 { color: rgb(172,211,32); } .zh-near-p1 { color: rgb(196,216,24); }
.zh-near-0  { color: rgb(224,221,0); }
.zh-near-n1 { color: rgb(233,166,46); } .zh-near-n2 { color: rgb(230,133,58); } .zh-near-n3 { color: rgb(227,106,69); } .zh-near-n4 { color: rgb(224,82,82); }
.zh-bias { cursor: help; }
.zh-bias-long { border-color: rgba(140,202,43,0.4); color: var(--green-primary); }
.zh-bias-short { border-color: rgba(224,82,82,0.4); color: #E05252; }
.zh-bias-neutral { border-color: var(--border); color: var(--text-muted); }
.zh-cta { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.zh-cta p { width: 100%; margin: 0 0 0.25rem; color: var(--text-secondary); font-size: 0.85rem; }
/* expand (floating overlay) + fullscreen */
.zh-chart-panel.is-expanded { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(92vw, 1400px); height: min(88vh, 900px); z-index: 1050; overflow: auto; }
.zh-chart-panel.is-expanded .zh-chart { height: calc(100% - 150px); }
/* The alerts CTA's radar icon carries the accent (GTP 2026-09-09): as a ghost button beside the
   ghost Telegram one, the icon is what tells them apart. Lucide strokes with currentColor.
   Scoped to the ghost variant 2026-09-17 (P1): the CTA is now .btn-primary-v2, whose background IS
   --green-primary, so the unscoped rule painted #8CCA2B on #8CCA2B and the icon vanished. On the
   primary variant the stroke inherits the button's --text-inverted, which is the contrast we want. */
.zh-alerts-cta.btn-ghost-v2 .lu { color: var(--green-primary); }
.zh-chart-panel.is-expanded .zh-cta { display: none; }
.zh-chart-panel.is-expanded .zh-ask { display: none; }
.zh-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1040; }
body.zh-no-scroll { overflow: hidden; }
.zh-hero { max-width: 860px; }
.zh-hero h1.section-headline { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.zh-more { margin: 0.35rem 0 0; }
.zh-more summary { cursor: pointer; color: var(--green-primary); font-size: 0.85rem; list-style: none; }
.zh-more summary::-webkit-details-marker { display: none; }
.zh-more summary::before { content: '+ '; }
.zh-more[open] summary::before { content: '− '; }
.zh-more p { color: var(--text-secondary); font-size: 0.9rem; margin: 0.5rem 0 0; max-width: 78ch; }
.zh-picks { border: 1px solid var(--border-accent); background: var(--glow-green); border-radius: var(--r-lg); padding: 0.85rem 1rem; margin: 0 0 1rem; }
.zh-picks-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.zh-picks-head .section-tag { margin: 0; }
.zh-picks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.6rem; margin-top: 0.6rem; }
.zh-pick { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0.7rem 0.8rem; display: flex; flex-direction: column; gap: 0.4rem; }
.zh-pick-top { display: flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: 0.85rem; }
.zh-pick-dir { font-size: 0.62rem; padding: 0.1rem 0.45rem; }
.zh-pick-long { border-color: rgba(140,202,43,0.4); color: var(--green-primary); }
.zh-pick-short { border-color: rgba(224,82,82,0.4); color: #E05252; }
.zh-pick-legs { display: flex; flex-wrap: wrap; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); }
.zh-pick-legs b { color: var(--text-primary); font-weight: 600; }
.zh-pick-why { margin: 0; color: var(--text-secondary); font-size: 0.85rem; }
.zh-pick-open { align-self: flex-start; background: transparent; border: 1px solid var(--border); color: var(--green-primary); border-radius: 100px; padding: 0.2rem 0.6rem; font-size: 0.72rem; cursor: pointer; }
.zh-pick-open:hover { border-color: var(--border-accent); background: var(--glow-green-md); }
.zh-picks-foot { margin: 0.6rem 0 0; font-size: 0.72rem; }
.zh-block { padding: 3rem 0; }
.zh-block-deep { background: var(--bg-deep); }
.zh-chartpage { padding-top: 5rem; }
.zh-chartpage-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 0.5rem; }
.zh-chartpage-symbol { margin-left: auto; font-family: var(--font-mono); }
.zh-chartpage-panel { position: static; }
.zh-chartpage .zh-chart { height: calc(100vh - 400px); min-height: 360px; }
.zh-guide-container { max-width: 88ch; }
.zh-guide-h2 { font-size: 1.25rem; margin: 2.5rem 0 0.75rem; color: var(--text-primary); font-family: var(--font-display); }
.zh-guide-list li { margin: 0.35rem 0; color: var(--text-secondary); }
.zh-guide-list li strong, .zh-guide p strong { color: var(--text-primary); }
.zh-guide p { color: var(--text-secondary); line-height: 1.6; }
.zh-guide-table { border-collapse: collapse; margin: 0.5rem 0 1rem; font-family: var(--font-mono); font-size: 0.85rem; }
.zh-guide-table td { padding: 0.35rem 0.9rem 0.35rem 0; border-bottom: 1px solid var(--border); color: var(--text-secondary); }
.zh-guide-table td:first-child { color: var(--text-primary); font-weight: 600; }
/* driver.js tour — on-brand popover. driver.js's own stylesheet loads after ours (extra_head),
   so every rule is prefixed with `body ` to win on specificity. */
body .driver-popover { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--r-lg); font-family: var(--font-body); box-shadow: 0 12px 40px rgba(0,0,0,.45); }
body .driver-popover-title { color: var(--text-primary); font-size: 1rem; }
body .driver-popover-description { color: var(--text-secondary); }
body .driver-popover-progress-text { color: var(--text-muted); background: transparent; }
body .driver-popover-navigation-btns button { background: transparent; color: var(--text-primary); border: 1px solid var(--border); border-radius: 100px; text-shadow: none; }
body .driver-popover-navigation-btns button:hover { background: var(--glow-green); color: var(--green-primary); }
body .driver-popover-close-btn { color: var(--text-muted); }
body .driver-popover-close-btn:hover { color: var(--text-primary); }
body .driver-popover-arrow-side-left.driver-popover-arrow { border-left-color: var(--bg-elevated); }
body .driver-popover-arrow-side-right.driver-popover-arrow { border-right-color: var(--bg-elevated); }
body .driver-popover-arrow-side-top.driver-popover-arrow { border-top-color: var(--bg-elevated); }
body .driver-popover-arrow-side-bottom.driver-popover-arrow { border-bottom-color: var(--bg-elevated); }
@media (max-width: 991px) {
  .zh-layout { grid-template-columns: 1fr; }
  .zh-splitter { display: none; }
  .zh-chart-panel { position: static; order: -1; }
  .zh-chart { height: 340px; }
  .zh-chart-panel.is-expanded { top: 0; left: 0; transform: none; width: 100vw; height: 100vh; border-radius: 0; }
}

/* ── Opportunity Screener section (spec 2026-09-08) — reuses zh-* + scanner-table ── */
.os-controls { flex-wrap: wrap; row-gap: .5rem; }
.os-ctl-label { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-right: .35rem; align-self: center; }
.os-search input { font-family: var(--font-mono); font-size: .72rem; padding: .3rem .6rem; border-radius: 100px; border: 1px solid var(--border); background: transparent; color: var(--text-primary); min-width: 150px; }
.os-count { font-family: var(--font-mono); font-size: .68rem; align-self: center; margin-left: auto; }
.os-table-outer { overflow-x: auto; }
.os-table thead th { font-size: .74rem; letter-spacing: .06em; }
.os-table th { white-space: nowrap; cursor: pointer; user-select: none; }
.os-table th.is-sorted-asc::after { content: ' ↑'; color: var(--green-primary); }
.os-table th.is-sorted-desc::after { content: ' ↓'; color: var(--green-primary); }
/* .os-th-pair/.os-td-pair sticky + background: covered by the site-wide first-column rule (Data surfaces). */
.os-table tbody tr { cursor: pointer; }
.os-table tbody tr:hover td:not(.os-hm) { background: var(--bg-elevated); }
.os-table tbody tr:hover td.os-hm { filter: brightness(1.18); }
.os-table .sc-asset { text-decoration: none; color: inherit; }
.os-table td.os-empty { color: var(--text-muted); }
.os-empty-row { color: var(--text-muted); font-family: var(--font-mono); font-size: .75rem; }
.os-table tr[hidden] { display: none; }
.os-table td[hidden], .os-table th[hidden] { display: none; }   /* belt-and-braces (2026-09-13 final review #6) — hidden on individual cells, not just whole rows */
/* Heatmap tint for score/situation cells (spec 2026-09-08 B2) — nine buckets, site red -> yellow -> green ramp */
.os-hm { font-family: var(--font-mono); }
.os-hm-n4 { background: rgba(224,82,82,.42); } .os-hm-n3 { background: rgba(227,106,69,.34); }
.os-hm-n2 { background: rgba(230,133,58,.22); } .os-hm-n1 { background: rgba(233,166,46,.16); }
.os-hm-0  { background: rgba(224,221,0,.12); }
.os-hm-p1 { background: rgba(196,216,24,.16); } .os-hm-p2 { background: rgba(172,211,32,.22); }
.os-hm-p3 { background: rgba(154,206,38,.34); } .os-hm-p4 { background: rgba(140,202,43,.42); }
.os-hm.os-empty { color: var(--text-muted); }
/* One ink for every shaded cell (GTP 2026-10-23) — score, situation, 24h / MACD / VWAP, ratio, ADX and the amber
   tiers alike: the tint carries the reading, the number is always --cell-ink (was white on some, the bucket's hue
   brightened on the sign-coloured pct cells). Only the Vol/MA20 + OI/MA20 "above 1×" yellow stays, below. */
.os-hm .osc-tfnum, .os-hm .os-sit-num { color: var(--text-primary); font-weight: 400; }   /* 2026-09-15: numbers are not bold */
.os-hm.os-empty .osc-tfnum, .os-hm.os-empty .os-sit-num { color: var(--text-muted); font-weight: 400; }
/* pct cells keep their sign colour on the OTHER tables that share .os-hm (ZoneHunter, ProvenAlpha); the screener's
   rule below outranks these (one more element in the selector). */
.os-hm .osc-tfnum.chg-up { color: var(--positive); }
.os-hm .osc-tfnum.chg-down { color: #E05252; }
.os-table td.os-hm, .os-table td.os-hm .osc-tfnum, .os-table td.os-hm .os-sit-num, .os-table td.zh-vol { color: var(--cell-ink); }
.os-table td.zh-vol-1 { color: var(--cell-ink) !important; }
.os-table td.os-hm.os-empty, .os-table td.os-hm.os-empty .osc-tfnum, .os-table td.os-hm.os-empty .os-sit-num { color: var(--text-muted); }
.os-table .osc-tfnum.os-ratio-up, .os-table td.os-hm .osc-tfnum.os-ratio-up { color: var(--term-yellow); }   /* Vol/MA20 + OI/MA20 above 1× (GTP 2026-10-22) */
/* Section group header row (spec 2026-09-08 B6). Selector matches .os-table thead th's own
   specificity (0,1,2) so this wins the cascade instead of inheriting B4's .74rem header size. */
.os-table thead th.os-group { font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); text-align: center; border-bottom: 1px solid var(--border); background: var(--bg-surface); }
.os-group + .os-group { border-left: 1px solid var(--border); }
.os-sit-num { font-family: var(--font-mono); font-size: .72rem; }
.os-badge { display: inline-block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .04em; padding: .15rem .45rem; border-radius: 4px; border: 1px solid var(--border); color: var(--text-secondary); }
.os-badge-trend { background: rgba(140,202,43,.18); color: var(--positive); border-color: rgba(140,202,43,.3); }
.os-badge-pullback { background: rgba(91,155,213,.18); color: #5B9BD5; border-color: rgba(91,155,213,.3); }
.os-badge-accumulation { background: rgba(224,221,0,.18); color: var(--green-accent); border-color: rgba(224,221,0,.3); }
.os-badge-reversal { background: rgba(224,82,82,.18); color: #E05252; border-color: rgba(224,82,82,.3); }
.os-badge-bull, .os-badge-bullish, .os-badge-yes { color: var(--positive); }
.os-badge-bear, .os-badge-bearish { color: #E05252; }
.os-badge-above-r, .os-badge-high-premium { color: #E05252; } .os-badge-premium { color: var(--green-accent); }
.os-badge-discount { color: #84cc16; } .os-badge-high-discount, .os-badge-below-s { color: var(--positive); }
.os-badge-none, .os-badge-no, .os-badge-neutral { color: var(--text-muted); }
/* MACD Scenario column (2026-09-23): the two aligned regimes are filled; the rest are coloured by where the 1H points now. */
.os-badge-pumping { background: rgba(140,202,43,.18); color: var(--positive); border-color: rgba(140,202,43,.3); }
.os-badge-falling { background: rgba(224,82,82,.18); color: #E05252; border-color: rgba(224,82,82,.3); }
.os-badge-resuming-up, .os-badge-bouncing, .os-badge-turning-up { color: var(--positive); }
.os-badge-pulling-back, .os-badge-turning-down, .os-badge-resuming-down { color: #E05252; }
.os-legend { margin: 1rem 0 0; border: 1px solid var(--border); border-radius: var(--r-lg); padding: .6rem 1rem; }
.os-legend summary { cursor: pointer; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.os-legend-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .5rem 1.5rem; margin: .75rem 0; }
.os-legend-item dt { font-family: var(--font-mono); font-size: .7rem; color: var(--green-primary); }
.os-legend-item dd { font-size: .8rem; color: var(--text-secondary); margin: 0; }
.os-cta { margin-top: 2rem; }
.os-sort-note { font-family: var(--font-mono); font-size: .72rem; margin: .35rem 0 .9rem; }
.os-tfsum-note { font-size: .82rem; color: var(--text-secondary); margin: .75rem 0 0; }
.os-tfsum-note a { color: var(--green-primary); }
@media (max-width: 991px) { .os-count { margin-left: 0; } }
/* Header hover card (spec 2026-09-08 v4 Part B item 2/4) — one shared element, positioned by JS. */
.os-tip { position: fixed; z-index: 1000; max-width: 320px; background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--r-lg); padding: .7rem .85rem; box-shadow: 0 12px 40px rgba(0,0,0,.45); font-family: var(--font-body); font-size: .82rem; line-height: 1.4; pointer-events: auto; }
/* v5 fix 1 — bridges the 8px gap between the header and the card so the pointer can travel
   header -> card without leaving both (which would otherwise fire the header's mouseleave). */
.os-tip::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.os-tip-title { display:block; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--green-primary); margin-bottom: .3rem; }
.os-tip-what { margin: 0 0 .35rem; font-weight: 600; }
.os-tip-how { margin: 0; color: var(--text-secondary); }
.os-tip-more { display:inline-block; margin-top:.4rem; color: var(--green-primary); pointer-events: auto; }
.os-table thead th:focus-visible { outline: 1px solid var(--green-primary); outline-offset: -1px; }

/* Favourites star (spec 2026-09-13 §4.4). Sets its own colour: a <button> otherwise takes the browser default. */
.os-fav { background: transparent; border: 0; padding: 0 .3rem 0 0; cursor: pointer; color: var(--text-muted); vertical-align: middle; line-height: 1; }
.os-fav .lu { width: .85rem; height: .85rem; }
.os-fav:hover { color: var(--green-accent); }
.os-fav[aria-pressed="true"] { color: var(--green-accent); }
.os-fav[aria-pressed="true"] .lu { fill: currentColor; }
.os-table tr[data-fav="1"] td.os-td-pair { box-shadow: inset 2px 0 0 var(--green-accent); }

/* Chart link (spec 2026-09-13 §4.5) — since 2026-09-14 it sits in the Pair cell next to the star,
   after the name. .zh-chart-btn (ZoneHunter) already sets its own colour. */
.os-table .zh-chart-btn { display: inline-flex; padding: .1rem .35rem; text-decoration: none; }
.os-pair-actions { display: inline-flex; align-items: center; gap: .3rem; margin-left: .6rem; vertical-align: middle; }
.os-pair-actions .os-fav { padding: 0; }
/* Crowd mark (GTP 2026-10-23) — AT9's CrowdMark: grey silhouettes, the ProvenAlpha lean as a corner badge; hollow = thin or old read. */
.os-crowd { display: inline-flex; line-height: 0; }
.os-crowd .os-crowd-ppl { fill: var(--text-secondary); stroke: var(--bg-surface); stroke-width: .9; }
.os-crowd .os-crowd-badge { stroke: var(--bg-surface); stroke-width: 1.3; stroke-linejoin: round; fill: var(--text-secondary); }
.os-crowd[data-lean="long"] .os-crowd-badge { fill: var(--positive); }
.os-crowd[data-lean="short"] .os-crowd-badge { fill: var(--negative); }
.os-crowd[data-lean="mixed"] .os-crowd-badge { fill: var(--term-yellow); }
.os-crowd.os-crowd-muted .os-crowd-badge { fill: var(--bg-surface); stroke: var(--text-secondary); }
.os-crowd:hover .os-crowd-ppl { fill: var(--text-primary); }
/* Header filter chips (GTP 2026-10-23): one per timeframe / MACD column, in the filter row of the head. + green, − red, · idle. */
.os-flt { font-family: var(--font-mono); font-size: .72rem; font-weight: 600; line-height: 1; min-width: 26px; height: 20px; padding: 0 .4rem;
          border-radius: 100px; border: 1px solid var(--line-strong, var(--border)); background: transparent; color: var(--text-muted); cursor: pointer; }
.os-flt:hover, .os-flt:focus-visible { border-color: var(--border-accent); color: var(--text-primary); }
.os-flt.is-up { color: var(--green-primary); border-color: var(--border-accent); background: var(--glow-green); }
.os-flt.is-down { color: var(--negative); border-color: rgba(224,82,82,.4); background: rgba(224,82,82,.1); }
.os-flt-clear { font-size: .62rem; font-weight: 400; margin-left: .5rem; }
/* ── Screener polish (2026-09-14 items 1 + 3): ZoneHunter-height rows — one line per cell (.zh-table td
   is 0.6rem/0.75rem + nowrap; the OB cells used to wrap to three lines under .scanner-table's 0.9rem/1rem)
   — and the hero subtitle that sits between the title and the collapsed text. */
.os-table td { padding: .55rem .75rem; white-space: nowrap; }
.os-table td.os-td-pair .sc-asset { display: inline-flex; vertical-align: middle; }
.os-subtitle { font-size: 1.05rem; line-height: 1.45; color: var(--text-secondary); max-width: 62ch; margin: .4rem 0 .2rem; }
/* ── Scenario conditions (2026-09-15): builder row + condition chips. Small mono controls on the site's
   dark surface (never Bootstrap's light form defaults — see the 2026-09-10b disclaimer lesson). */
.os-cond-bar { align-items: center; }
.os-select, .os-input { font-family: var(--font-mono); font-size: .72rem; color: var(--text-primary); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 999px; padding: .2rem .6rem; height: 1.7rem; line-height: 1; }
.os-select { padding-right: 1.2rem; cursor: pointer; }
.os-input { width: 6.5rem; }
.os-input.is-invalid { border-color: #E05252; }
.os-select:focus-visible, .os-input:focus-visible { outline: 1px solid var(--green-primary); outline-offset: 0; }
.os-ctl-sep { width: 1px; height: 1.2rem; background: var(--border); margin: 0 .25rem; }
.os-cond-chips { display: contents; }
.zh-chip.os-cond { display: inline-flex; align-items: center; gap: .3rem; cursor: default; }
.os-cond-x { background: transparent; border: 0; color: inherit; font-size: .9rem; line-height: 1; padding: 0 0 0 .1rem; cursor: pointer; opacity: .75; }
.os-cond-x:hover { opacity: 1; color: #E05252; }
#os-scenario-namebox { display: inline-flex; gap: .3rem; align-items: center; }
#os-scenario-namebox .os-input { width: 9rem; }
/* ── Screener controls + table v3 (2026-09-15, GTP) ───────────────────────────────────────────────
   1 · Every header and cell is centred except the Pair column (the painters no longer emit inline text-align).
   2 · Numbers are not bold: heat numbers (above), OB distances, RRR, ×N stacks, Price.
   3 · Ramp heat = strength without direction (ADX, Vol/MA20) → the amber family 24h Vol / ATR already use,
       never the bull green. Buckets p1..p4 come from heat_for('ramp').
   4 · The Zones-on / Long-Short chips sit inside the SMC Zones group header (rendered by _screener_zone_ctl.html).
   5 · Control labels carry a hover card (data-tip-*) — dotted underline + help cursor say so. */
.os-table th:not(.os-th-pair):not(.os-group), .os-table td:not(.os-td-pair) { text-align: center; }
.os-table td strong, .os-table td.sc-price, .os-table .zh-near { font-weight: 400; }
.os-hm-ramp.os-hm-p1 { background: rgba(212,172,92,.10); } .os-hm-ramp.os-hm-p2 { background: rgba(212,172,92,.16); }
.os-hm-ramp.os-hm-p3 { background: rgba(212,172,92,.23); } .os-hm-ramp.os-hm-p4 { background: rgba(212,172,92,.30); }
.os-zone-ctl { display: inline-flex; align-items: center; gap: .5rem; margin-left: .75rem; vertical-align: middle; text-transform: none; letter-spacing: 0; }
.os-zone-ctl .zh-chips { gap: .2rem; align-items: center; }
.os-zone-ctl .zh-chip { font-size: .6rem; padding: .1rem .4rem; }
.os-zone-ctl .os-ctl-label { margin-right: .25rem; }
.os-ctl-label[data-tip-how] { cursor: help; border-bottom: 1px dotted var(--text-muted); line-height: 1.2; }
@media (max-width: 767.98px) {
  /* P1 — each control row is one line that scrolls sideways (no wrap); chips and inputs shrink. */
  .os-controls { gap: .4rem; }
  .os-controls > .zh-chips { display: flex; flex-wrap: nowrap; align-items: center; flex: 1 1 100%; max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .os-controls > .zh-chips::-webkit-scrollbar { display: none; }
  .os-controls > .zh-chips > *, .os-controls .os-cond-chips > * { flex: 0 0 auto; }
  .os-controls .zh-chip { font-size: .6rem; padding: .15rem .4rem; }
  .os-controls .os-select, .os-controls .os-input { font-size: .64rem; height: 1.5rem; padding: .1rem .5rem; }
  .os-controls .os-input { width: 5.5rem; }
  .os-controls .os-ctl-label { font-size: .56rem; }
  .os-controls .os-venue-chips { flex: 0 1 auto; }
  .os-search input { min-width: 120px; font-size: .66rem; }
  /* The homepage-scanner rule above (.sc-col-price/.sc-col-chg hidden under 768px) also hid THIS table's Price and
     24h header cells while their body cells stayed — the header was two columns out of step on a phone. */
  .os-table th.sc-col-price, .os-table th.sc-col-chg { display: table-cell; }
  /* Pair column: smaller logo, tighter gap and padding. The chart icon STAYS at every width (GTP 2026-09-15). */
  .os-table td.os-td-pair { padding-left: .45rem; padding-right: .45rem; }
  .os-table .coin-logo, .os-table .coin-logo-ph { width: 18px; height: 18px; }
  .os-table .sc-asset { gap: .35rem; }
  .os-table .sc-asset-name { font-size: .74rem; }
  .os-table .sc-asset-quote { font-size: .62rem; }
  .os-pair-actions { margin-left: .3rem; gap: .1rem; }
  /* P4 — denser cells: about two more columns per screen. */
  .os-table td { padding: .4rem .45rem; font-size: .7rem; }
  .os-table thead th { font-size: .64rem; }
  .os-zone-ctl { margin-left: .5rem; gap: .3rem; }
}

/* ── Data surfaces (site-wide, GTP 2026-09-09) ──────────────────────────────────────────
   Every table body sits one step lighter than the page, zebra-striped, hover + selected opaque,
   first column sticky (inherits the row colour). Every chart canvas sits one step lighter than
   its panel. Add a new table class to the selector lists below — never restyle per page. */
.scanner-table tbody tr, .zh-guide-table tbody tr, .lp-compare tbody tr, table.table tbody tr, .hip3-table tbody tr { background: var(--table-bg); }
.scanner-table tbody tr:nth-child(even), .zh-guide-table tbody tr:nth-child(even), .lp-compare tbody tr:nth-child(even), table.table tbody tr:nth-child(even), .hip3-table tbody tr:nth-child(even) { background: var(--table-row-alt); }
.scanner-table tbody tr:hover, .zh-guide-table tbody tr:hover, .lp-compare tbody tr:hover, table.table tbody tr:hover, .hip3-table tbody tr:hover { background: var(--table-hover); }
.scanner-table th:first-child:not(.os-group), .scanner-table td:first-child { position: sticky; left: 0; z-index: 1; background: inherit; }
.scanner-table thead th:first-child:not(.os-group) { background: var(--bg-elevated); }   /* group-label rows (screener) scroll normally */
table.table { --bs-table-bg: transparent; --bs-table-striped-bg: transparent; --bs-table-hover-bg: transparent; --bs-table-color: inherit; color: inherit; }
.chart-surface { background: var(--chart-bg); border-radius: var(--r-md); }
/* ── End data surfaces ── */

/* ── Ask AI panel (spec 2026-09-09) — under the chart legend on the page and the fullscreen chart ── */
.zh-ask { margin-top: 0.85rem; padding: 0.8rem 0.95rem; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-elevated); }
.zh-ask-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; }
.zh-ask-head .section-tag { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; }
.zh-ask-count { font-family: var(--font-mono); font-size: 0.68rem; }
.zh-ask-lead { margin: 0.45rem 0 0.75rem; font-size: 0.82rem; color: var(--text-secondary); }
.zh-ask-chips { margin-bottom: 0.7rem; }
.zh-ask-form { display: flex; gap: 0.5rem; align-items: stretch; }
.zh-ask-input { flex: 1 1 auto; min-width: 0; background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border); border-radius: 8px; padding: 0.45rem 0.65rem; font: inherit; font-size: 0.88rem; }
.zh-ask-input:focus { outline: 2px solid var(--green-primary); outline-offset: 1px; border-color: var(--green-primary); }
.zh-ask-input::placeholder { color: var(--text-muted); }
.zh-ask-btn { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; padding: 0.45rem 0.9rem; font-size: 0.85rem; }
.zh-ask-btn[disabled] { opacity: 0.6; cursor: progress; }
.zh-ask-btn.is-loading .lu { display: none; }
.zh-ask-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
/* Working indicator (GTP 2026-09-09): a spinner in the status line and on the button while the answer is built. */
@keyframes zh-spin { to { transform: rotate(360deg); } }
.zh-ask-spinner { display: inline-block; width: 0.9em; height: 0.9em; margin-right: 0.45em; vertical-align: -0.15em; border: 2px solid var(--border); border-top-color: var(--green-primary); border-radius: 50%; animation: zh-spin 0.8s linear infinite; }
.zh-ask-msg { display: flex; align-items: center; margin: 0.6rem 0 0; font-size: 0.82rem; color: var(--text-secondary); }
/* The answer is its own box: darker ground, padding, air between the five sections, disclaimer set apart. */
.zh-ask-answer { margin-top: 1rem; padding: 1rem 1.1rem; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.zh-ask-answer h4 { margin: 1rem 0 0.3rem; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green-primary); }
.zh-ask-answer h4:first-child { margin-top: 0; }
.zh-ask-answer p { margin: 0; font-size: 0.88rem; line-height: 1.6; color: var(--text-primary); white-space: pre-line; }
.zh-ask-disc { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border); font-size: 0.72rem; line-height: 1.5; color: var(--text-muted); }
.zh-ask-meta { font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-muted); margin-top: 0.4rem; }
.zh-ask-pay { margin-top: 0.4rem; }
@media (max-width: 575px) { .zh-ask-form { flex-direction: column; } .zh-ask-btn { justify-content: center; } }
/* ZoneHunter Live improvements (GTP 2026-09-11) — pair search, 24h volume, shareable chart link,
   legend explainer, "How Ask AI works". Volume uses ONE muted sand-amber hue in fixed liquidity tiers
   (round 2: the first blue stood out; this one sits with the palette and tops out at .30 alpha). */
.zh-search { display: inline-flex; align-items: center; }
.zh-search input { min-width: 150px; }
.zh-search-empty { margin: 0 0 0.5rem; }
.zh-table td.zh-vol, .hip3-table td.zh-vol { font-family: var(--font-mono); text-align: right; white-space: nowrap; color: var(--text-primary); }
.os-table td.zh-vol { font-family: var(--font-mono); white-space: nowrap; color: var(--cell-ink); }   /* centred with the rest of the screener (2026-09-15) */
.zh-vol-1 { background: rgba(212,172,92,.05); color: var(--text-secondary) !important; }
.zh-vol-2 { background: rgba(212,172,92,.10); }
.zh-vol-3 { background: rgba(212,172,92,.16); }
.zh-vol-4 { background: rgba(212,172,92,.23); }
.zh-vol-5 { background: rgba(212,172,92,.30); }
/* HIP-3 reuses this liquidity-tier scale for open interest too (same USD-magnitude shape,
   no second colour scale — GTP review 2026-09-12), so both its 24h volume and OI columns
   carry .zh-vol-*. */
.zh-table tbody tr:hover td.zh-vol, .hip3-table tbody tr:hover td.zh-vol, .os-table tbody tr:hover td.zh-vol { filter: brightness(1.18); }
.zh-share-tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-left: auto; }
.zh-bookmark-hint { font-family: var(--font-mono); }
.zh-legend-help { margin-top: 0.4rem; font-size: 0.74rem; color: var(--text-secondary); }
.zh-legend-help summary { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; color: var(--text-secondary); }
.zh-legend-help summary:hover, .zh-legend-help[open] summary { color: var(--text-primary); }
.zh-legend-help dl { margin: 0.5rem 0 0; padding: 0.7rem 0.85rem; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.zh-legend-help dt { font-weight: 600; color: var(--text-primary); margin-top: 0.5rem; }
.zh-legend-help dt:first-child { margin-top: 0; }
.zh-legend-help dd { margin: 0.1rem 0 0; line-height: 1.5; }
.zh-ask-how { margin: 0.6rem 0.1rem 0; font-size: 0.76rem; line-height: 1.55; color: var(--text-secondary); }
.zh-ask-how summary { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; color: var(--text-secondary); }
.zh-ask-how summary:hover, .zh-ask-how[open] summary { color: var(--text-primary); }
.zh-ask-how p { margin: 0.4rem 0 0; }
.zh-chart-panel.is-expanded .zh-ask-how, .zh-chart-panel.is-expanded .zh-legend-help { display: none; }
.zh-ask-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.75rem; font-size: 0.78rem; color: var(--text-secondary); }
.zh-ask-rate-label { margin-right: 0.2rem; }
.zh-ask-thumb { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 1.8rem; padding: 0; background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; }
.zh-ask-thumb:hover { color: var(--text-primary); border-color: var(--text-muted); }
.zh-ask-thumb:focus-visible { outline: 2px solid var(--green-primary); outline-offset: 1px; }
.zh-ask-thumb-up.is-on { color: var(--green-primary); border-color: var(--border-accent); }
.zh-ask-thumb-down.is-on { color: var(--negative); border-color: rgba(224,82,82,.4); }
.zh-ask-rate-status { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); }
.zh-ask-rate-note { display: flex; gap: 0.4rem; margin-top: 0.5rem; }
.zh-ask-rate-note .zh-ask-input { font-size: 0.8rem; padding: 0.35rem 0.55rem; }
/* Site feedback card (spec 2026-09-11) — shared by ZoneHunter, the chart page, the Screener and contact#feedback. */
.atp-feedback { margin-top: 1rem; padding: 0.8rem 0.95rem; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-elevated); color: var(--text-primary); }
.atp-feedback-head .section-tag { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; }
.atp-feedback-lead { margin: 0.45rem 0 0.7rem; font-size: 0.82rem; color: var(--text-secondary); }
.atp-feedback-kinds { margin-bottom: 0.6rem; }
.atp-feedback-text, .atp-feedback-email { width: 100%; background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border); border-radius: 8px; padding: 0.45rem 0.65rem; font: inherit; font-size: 0.86rem; }
.atp-feedback-text { resize: vertical; min-height: 4.5rem; display: block; }
.atp-feedback-text:focus, .atp-feedback-email:focus { outline: 2px solid var(--green-primary); outline-offset: 1px; border-color: var(--green-primary); }
.atp-feedback-text::placeholder, .atp-feedback-email::placeholder { color: var(--text-muted); }
.atp-feedback-row { display: flex; gap: 0.5rem; margin-top: 0.5rem; align-items: stretch; }
.atp-feedback-email { flex: 1 1 auto; min-width: 0; }
.atp-feedback-btn { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; padding: 0.45rem 0.9rem; font-size: 0.85rem; }
.atp-feedback-btn[disabled] { opacity: 0.6; cursor: progress; }
.atp-feedback-msg { margin: 0.55rem 0 0; font-size: 0.8rem; color: var(--text-secondary); }
.atp-feedback-msg.is-ok { color: var(--green-primary); }
.zh-chart-panel.is-expanded .atp-feedback { display: none; }
@media (max-width: 575px) { .atp-feedback-row { flex-direction: column; } .atp-feedback-btn { justify-content: center; } }

/* ── Page width ────────────────────────────────────────────────────────────────
   Every Bootstrap container (nav, hero sections, tables, guides, FAQ) shares --page-max and
   --page-gutter, so no page decides its own margins again. Loaded after bootstrap.min.css, so
   these plain rules win over Bootstrap's per-breakpoint max-widths (1140/1320px).
   Centred reading columns keep the measure they had under the old 1320px cap: prose must not
   stretch with the page. */
/* The cap is the CONTENT width: the box adds the gutter on each side (Bootstrap containers are border-box). */
.container, .container-fluid { max-width: calc(var(--page-max) + 2 * var(--page-gutter)); padding-left: var(--page-gutter); padding-right: var(--page-gutter); }
.container .col-lg-8.mx-auto { max-width: 880px; }
.container .col-lg-6.mx-auto { max-width: 660px; }
.container .col-xl-10.mx-auto { max-width: 1100px; }
/* ── End page width ── */
/* ── Tools nav dropdown (spec 2026-09-09 §6.5) ─────────────────────────── */
.navbar .nav-tools-menu { background: var(--bg-deep); border: 1px solid rgba(255,255,255,.08); border-radius: .5rem; padding: .35rem; min-width: 14rem; }
.navbar .nav-tools-menu .dropdown-item { color: var(--text-muted); border-radius: .35rem; padding: .45rem .75rem; }
.navbar .nav-tools-menu .dropdown-item:hover, .navbar .nav-tools-menu .dropdown-item:focus { color: var(--text-white); background: rgba(255,255,255,.06); }
/* Dropdown items carry icon + name + description (Task 7, homepage-redesign, 2026-09-19). */
.nav-tool { display: flex; align-items: flex-start; gap: 10px; }
.nav-tool .lu-tool { color: var(--green-primary); flex-shrink: 0; margin-top: .15rem; }
.nav-tool-name { display: block; font-size: 14px; color: var(--text-primary); }
.nav-tool-desc { display: block; font-size: 12px; color: var(--text-secondary); white-space: normal; max-width: 260px; }
@media (max-width: 991.98px) { .navbar .nav-tools-menu { background: transparent; border: 0; padding-left: .75rem; } }
/* Desktop: the Tools menu opens on hover (2026-09-14 item 14); Bootstrap's click toggle still serves
   touch and keyboard, and :focus-within keeps it open while tabbing through the items. */
@media (min-width: 992px) {
  .navbar .nav-item.dropdown:hover > .nav-tools-menu, .navbar .nav-item.dropdown:focus-within > .nav-tools-menu { display: block; left: 0; }
  .navbar .nav-item.dropdown > .nav-tools-menu { margin-top: 0; }
}

/* ── ProvenAlpha board (spec 2026-09-09 §6.3) — reuses .zh-* / .scanner-table from ZoneHunter/Screener ── */
.pa-honesty { margin: .25rem 0 1rem; font-size: .85rem; }
.pa-status { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; padding: .2rem .6rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); }
.pa-status-live .live-dot { background: var(--positive); } .pa-status-delayed .live-dot { background: color-mix(in srgb, var(--positive), var(--negative)); } .pa-status-paused .live-dot { background: var(--text-muted); }
/* Round 2 item 4: the board's own status pill and read-freshness pill now render the site's
   .scanner-live-badge (same markup as ZoneHunter/Screener's "Live" pill) instead of the
   white-bordered .pa-status; a modifier class recolours the dot for the delayed/paused states.
   (.pa-status itself stays — /prediction-markets/ still uses it.) */
.scanner-live-badge.is-delayed .live-dot { background: color-mix(in srgb, var(--positive), var(--negative)); }
.scanner-live-badge.is-paused .live-dot { background: var(--text-muted); }
/* Round 2 item 1: the read card moves to the site's card padding/rhythm scale — more breathing
   room around the bias column, a body-sized narrative capped at readable measure, and the
   counts/freshness/bar rows spaced apart instead of stacked edge to edge. */
.pa-read { display: flex; gap: 2rem; align-items: flex-start; padding: 1.4rem 1.6rem; border: 1px solid rgba(255,255,255,.08); border-left-width: 4px; border-radius: .6rem; margin-bottom: 1rem; background: rgba(255,255,255,.02); }
.pa-read.pa-bull { border-left-color: var(--positive); } .pa-read.pa-bear { border-left-color: var(--negative); } .pa-read.pa-mixed { border-left-color: color-mix(in srgb, var(--positive), var(--negative)); } .pa-read.pa-neu { border-left-color: var(--text-muted); }
.pa-read-badge { min-width: 150px; text-align: center; } .pa-read-label { display: block; font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin-bottom: .5rem; }
.pa-bias { display: inline-block; font-weight: 700; font-size: 1.15rem; padding: .35rem .8rem; border-radius: .4rem; background: rgba(255,255,255,.06); margin-bottom: .5rem; }
.pa-bull .pa-bias { color: var(--positive); } .pa-bear .pa-bias { color: var(--negative); } .pa-mixed .pa-bias { color: color-mix(in srgb, var(--positive), var(--negative)); } .pa-neu .pa-bias { color: var(--text-muted); }
.pa-read-conf { display: block; font-size: .8rem; opacity: .75; margin-top: .5rem; }
.pa-read-body { flex: 1; } .pa-narrative { font-size: 1rem; line-height: 1.65; max-width: 70ch; margin-bottom: .75rem; }
.pa-counts { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .75rem; margin-bottom: .75rem; }
.pa-count { padding: .15rem .5rem; border-radius: .3rem; font-weight: 600; }
.pa-count-long { background: rgba(34,197,94,.15); color: var(--positive); } .pa-count-short { background: rgba(239,68,68,.15); color: var(--negative); }
.pa-count-mixed { background: rgba(245,158,11,.15); color: color-mix(in srgb, var(--positive), var(--negative)); } .pa-count-neutral { background: rgba(107,114,128,.2); color: var(--text-muted); }
.pa-bar { height: 8px; display: flex; border-radius: 4px; overflow: hidden; background: rgba(255,255,255,.08); margin-top: .75rem; }
.pa-bar-long { background: var(--positive); } .pa-bar-short { background: var(--negative); } .pa-bar-mixed { background: color-mix(in srgb, var(--positive), var(--negative)); } .pa-bar-neutral { background: var(--text-muted); }
.pa-empty { margin: 0; opacity: .8; }
.pa-freshness { display: flex; align-items: center; gap: .5rem; margin: 0 0 .75rem; font-size: .8rem; }
.pa-table { table-layout: auto; }
.pa-table-outer { overflow-x: auto; }   /* the site-wide .scanner-table first-child rule already makes the Pair column sticky+opaque (round 2 item 5) */
.pa-table th[data-sort] { cursor: pointer; }
.pa-table .pa-center { text-align: center; }
.pa-table .sc-asset { color: inherit; text-decoration: none; }
.pa-row { cursor: pointer; } .pa-row:hover { background: rgba(255,255,255,.04); } .pa-row:hover td.os-hm { filter: brightness(1.18); } .pa-row[hidden] { display: none; }
.pa-quote { font-size: .7rem; margin-left: .1rem; }
.pa-dir { font-size: .65rem; font-weight: 700; padding: .15rem .45rem; border-radius: .3rem; }
.pa-dir-long { background: rgba(34,197,94,.15); color: var(--positive); } .pa-dir-short { background: rgba(239,68,68,.15); color: var(--negative); }
.pa-dir-mixed { background: rgba(245,158,11,.15); color: color-mix(in srgb, var(--positive), var(--negative)); } .pa-dir-neutral { background: rgba(107,114,128,.2); color: var(--text-muted); }
.pa-conf-hi { color: var(--positive); } .pa-conf-mid { color: color-mix(in srgb, var(--positive), var(--negative)); } .pa-conf-lo, .pa-conf-none, .pa-sent-none { opacity: .6; }
.pa-sent-pos { color: var(--positive); } .pa-sent-neg { color: var(--negative); } .pa-sent-neu { opacity: .8; }
.pa-levels { white-space: nowrap; } .pa-lvl { display: inline-block; font-size: .7rem; padding: .1rem .4rem; border-radius: .3rem; margin-right: .25rem; border: 1px solid rgba(255,255,255,.1); }
.pa-lvl-support { color: var(--positive); } .pa-lvl-resistance { color: color-mix(in srgb, var(--positive), var(--negative)); } .pa-lvl-other { opacity: .7; }
.pa-summary { width: 100%; min-width: 28rem; white-space: normal; }
.pa-summary a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: inherit; text-decoration: none; opacity: .9; }
.pa-summary a:hover { text-decoration: underline; }
.pa-hint { margin-top: .5rem; font-size: .8rem; }
.pa-channels { margin-top: 1.25rem; } .pa-channels > summary { cursor: pointer; font-weight: 600; } .pa-channels-table { margin-top: .75rem; font-size: .85rem; }
.pa-active-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--positive); }
.pa-modal { background: var(--bg-deep); color: inherit; border: 1px solid rgba(255,255,255,.1); }

/* ── HIP-3 markets section (spec 2026-09-09; shell rewrite spec 2026-09-12 §5/§6) ── */
.hip3-dexstrip { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: .5rem 0 1.25rem; font-family: var(--font-mono); font-size: .85rem; }
.hip3-dex { color: var(--text-muted); } .hip3-dex.is-live { color: var(--text-primary); }
.hip3-dex b { color: var(--green-primary); margin-left: .25rem; } .hip3-dex s { color: var(--negative); margin-left: .25rem; }
/* 'NEW' on the HIP-3 venue pill — the stock/commodity/FX rows are the newest
   thing on both tools and the pill is easy to walk past. Filled rather than
   outlined so it reads louder than the .hip3-badge dex chips next to it, but
   from the same accent token so it stays in palette. */
.venue-new { display: inline-block; margin-left: .3rem; padding: 0 .25rem; border-radius: var(--r-sm);
             background: var(--green-accent); color: var(--bg-deep); font-family: var(--font-mono);
             font-size: .55rem; font-weight: 700; letter-spacing: .06em; vertical-align: middle; }
.hip3-badge { display: inline-block; padding: 0 .35rem; border: 1px solid var(--border-accent); border-radius: var(--r-sm); font-family: var(--font-mono); font-size: .7rem; color: var(--green-accent); vertical-align: middle; }
.hip3-table td.num, .hip3-table th.num { text-align: right; font-family: var(--font-mono); }
.hip3-table .is-pos { color: var(--positive); } .hip3-table .is-neg { color: var(--negative); }
.hip3-table tr.is-inactive td { color: var(--text-muted); }
/* GTP review 2026-09-12: these anchors sit outside .zh-links (whose `a` rule at 1718 already
   greens the hero row) and were falling through to Bootstrap's default link blue. Scoped to
   the HIP-3 link classes only — never a blanket `.hip3-section a`, because the "Go deeper"
   .how-card anchors further down deliberately inherit body-text colour. Deliberately the
   class selector (table also has a matching id) — an id-hash selector this far down the file
   trips the PaletteTests hex-literal ban in test_provenalpha_board_views.py. */
.hip3-table tbody td a.fw-bold, .hip3-links a, .hip3-crumbs a, .hip3-siblings a, .hip3-canonical a { color: var(--green-primary); text-decoration: none; }
.hip3-table tbody td a.fw-bold:hover, .hip3-links a:hover, .hip3-crumbs a:hover, .hip3-siblings a:hover, .hip3-canonical a:hover { text-decoration: underline; }
.hip3-links a { margin-right: .5rem; }
.hip3-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin: 1rem 0; }
.hip3-stats dt { color: var(--text-muted); font-size: .75rem; text-transform: uppercase; } .hip3-stats dd { font-family: var(--font-mono); font-size: 1.1rem; }
.hip3-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1rem; }
.hip3-chart { height: 220px; border-radius: var(--r-md); }
.hip3-grouphead td { background: var(--table-row-alt); font-family: var(--font-display); letter-spacing: .02em; }
.hip3-grouphead small { color: var(--text-muted); margin-left: .35rem; }
.hip3-table th[data-key] { cursor: pointer; user-select: none; }
/* Sort-arrow colour/glyph lives on the shared .zh-table/.pa-table/.hip3-table selector list
   above (1742-1743) — do not re-add a third copy here (fix round 2, 2026-09-12). */
.hip3-siblings a { margin-right: .35rem; }
/* The shared .scanner-table-outer (730) does not set overflow-x — every sibling page pairs it
   with a modifier that does (.zh-table-outer 1736, .os-table-outer 1880, .pa-table-outer 2084,
   .pm-table-outer 2143). Without this, the 12-column tracker table is clipped and unreachable
   past ~400px instead of scrolling inside its own outer. */
.hip3-table-outer { overflow-x: auto; }
@media (max-width: 767.98px) { .pa-read { flex-direction: column; gap: .75rem; } .pa-read-badge { text-align: left; } }

/* ── Prediction Markets (the /prediction-markets/ board) — sits on top of the shared
   .zh-* / .scanner-table / .pa-read format; only what genuinely differs lives here.
   Tokens only: every colour is a var() or a color-mix of one, never a literal. ── */
.pm-read .pa-read-badge { flex: 0 0 15rem; min-width: 0; max-width: 15rem; }   /* the caveat wraps inside the stance column, never across the card */
.pm-read .pa-read-conf { opacity: .8; line-height: 1.5; }
.pm-read-time { margin: .5rem 0 0; }
.pm-controls { justify-content: space-between; }
.pm-controls em { font-style: normal; color: var(--text-secondary); }
.pm-flag { display: inline-block; width: 0; height: 0; margin-right: .35rem; vertical-align: middle;
           border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid var(--green-primary); }
.pm-table-outer { overflow-x: auto; }   /* the shared outer clips; the board scrolls inside it, never the page */
.pm-table thead th { vertical-align: top; cursor: help; }
.pm-rel { display: block; margin-top: .25rem; font-size: .58rem; letter-spacing: .06em; color: var(--green-primary); text-transform: none; }
.pm-table td { vertical-align: top; }
.pm-td { min-width: 11rem; }
.pm-asset { display: inline-flex; flex-direction: column; gap: .1rem; }
.pm-asset strong { font-family: var(--font-body); font-size: .82rem; color: var(--text-primary); }
.pm-asset-name { font-size: .62rem; letter-spacing: .04em; }
.pm-cell-top { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .35rem; }
.pm-prob { font-size: 1.05rem; font-weight: 600; color: var(--text-primary); letter-spacing: -.02em; }
.pm-prob.pm-up { color: var(--positive); } .pm-prob.pm-dn { color: var(--negative); }
.pm-chg { font-size: .7rem; font-weight: 600; padding: .1rem .35rem; border-radius: var(--r-sm); }
.pm-chg.d-up { color: var(--positive); background: color-mix(in srgb, var(--positive) 15%, transparent); }
.pm-chg.d-dn { color: var(--negative); background: color-mix(in srgb, var(--negative) 15%, transparent); }
.pm-chg.d-fl { color: var(--text-muted); background: color-mix(in srgb, var(--text-muted) 18%, transparent); }
.pm-track { position: relative; height: 5px; border-radius: 3px; overflow: hidden; background: var(--bg-elevated); margin-bottom: .35rem; }
.pm-fill { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.pm-fill-up { background: var(--positive); } .pm-fill-dn { background: var(--negative); }
.pm-mid { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--text-muted); opacity: .55; }
.pm-cell-meta { display: flex; justify-content: space-between; gap: .5rem; font-size: .62rem; color: var(--text-muted); letter-spacing: .03em; }
.pm-thin { margin-left: .3rem; padding: 0 .3rem; border: 1px solid var(--border); border-radius: var(--r-sm);
           font-size: .55rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.pm-realised-table .pm-td { min-width: 9rem; }

.pm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.pm-tile { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.1rem 1.25rem; }
.pm-tile-accent { border-left: 3px solid var(--green-primary); }
.pm-tile-rail { display: block; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--green-primary); margin-bottom: .5rem; }
.pm-tile-h { font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--text-primary); margin: 0 0 .35rem; }
.pm-tile-v { font-family: var(--font-mono); font-size: 1.35rem; font-weight: 600; color: var(--text-primary); letter-spacing: -.02em; margin-bottom: .4rem; }
.pm-tile-bar { height: 4px; border-radius: 2px; overflow: hidden; background: var(--bg-elevated); margin-bottom: .55rem; }
.pm-tile-bar i { display: block; height: 100%; background: var(--green-primary); border-radius: 2px; }
.pm-tile-p { font-size: .8rem; color: var(--text-secondary); line-height: 1.6; margin: 0; }
.pm-method { margin-top: 1.25rem; }
.pm-method-p { font-size: .78rem; color: var(--text-secondary); line-height: 1.65; max-width: 80ch; margin: .6rem 0 0; }
.pm-method-p b { color: var(--text-primary); }
@media (max-width: 767.98px) {
  .pm-read .pa-read-badge { flex: 0 0 auto; min-width: 0; max-width: none; }
  .pm-tiles { grid-template-columns: 1fr; }
}

/* ── ZoneHunter Live v3 (2026-09-15, GTP): the screener's table rules applied to /zonehunter/ ─────────────
   Centred except Pair · numbers not bold · ×TF (a count, no direction) on the amber ramp · hover cards on the
   Timeframe / Entry / Target labels · CTA + feedback card below the table + chart block · phone sizing.
   Chips are NOT forced onto one-line scrolling rows here: every ZoneHunter control row is short enough.
   The chart button lives in the Pair cell (after the name, like the screener) and stays visible on phones. */
.zh-table th:not(:first-child), .zh-table td:not(:first-child) { text-align: center; }
.zh-table th.zh-num, .zh-table td.zh-vol, .zh-table td.sc-price { text-align: center; }
.zh-table .zh-near, .zh-table td strong, .zh-table td.sc-price { font-weight: 400; }
.zh-sel-label[data-tip-how] { cursor: help; border-bottom: 1px dotted var(--text-muted); }
@media (max-width: 767.98px) {
  .zh-controls { gap: .4rem .6rem; }
  .zh-controls .zh-chip { font-size: .6rem; padding: .15rem .4rem; }
  .zh-controls .os-ctl-label { font-size: .56rem; }
  .zh-selects { gap: .5rem; font-size: .66rem; }
  .zh-selects select { font-size: .62rem; padding: .1rem .2rem; }
  .zh-search input { min-width: 120px; font-size: .66rem; }
  .zh-table .coin-logo, .zh-table .coin-logo-ph { width: 18px; height: 18px; }
  .zh-table .sc-asset { gap: .35rem; }
  .zh-table .sc-asset-name { font-size: .74rem; }
  .zh-table .sc-asset-quote { font-size: .62rem; }
  .zh-table td { padding: .4rem .45rem; font-size: .7rem; }
  .zh-table thead th { font-size: .64rem; }
}
.zh-table .os-pair-actions { margin-left: 0; }   /* .sc-asset's flex gap already spaces it from the name */

/* Zone-touch alerts subscribe box (spec 2026-09-15 §10) — appended last on purpose: source order wins. */

/* /alerts/ landing (spec 2026-09-15 §11) — search, worked example, feature list. */
h2.section-headline-sm { font-size: 1.15rem; font-weight: 600; color: var(--text-primary); margin: 1.75rem 0 .6rem; }
.alerts-search { display: block; max-width: 360px; margin: 0 0 .5rem; font-size: .78rem; color: var(--text-secondary); }
.alerts-search input { display: block; width: 100%; margin-top: .3rem; padding: .5rem .7rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-primary); font-size: .85rem; }
.alerts-search input:focus { outline: none; border-color: var(--border-accent); }
.alerts-example { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1rem 1.1rem; color: var(--text-primary); font-family: var(--font-mono); font-size: .78rem; line-height: 1.6; white-space: pre-wrap; overflow-x: auto; }
.alerts-list { padding-left: 1.1rem; color: var(--text-secondary); font-size: .88rem; line-height: 1.7; }
.alerts-list li { margin-bottom: .4rem; }

/* Chart heading: pair logo + name, both ZoneHunter pages (GTP 2026-09-16) — appended last on purpose. */
.zh-pair-heading { display: inline-flex; align-items: center; gap: .5rem; }
.zh-pair-logo { width: 22px; height: 22px; }

/* HIP-3 synthetic scorecard (spec 2026-09-16 §11) */
.hip3-hero-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.hip3-hero-grade { text-align: center; }
.hip3-hero-price { font-family: var(--font-mono); }
.hip3-tools-cta { display: flex; gap: .6rem; flex-wrap: wrap; margin: .75rem 0 1.25rem; }
.hip3-grade { display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: .5rem; font-size: 1.75rem; font-weight: 700;
  font-family: var(--font-mono); color: var(--bg-dark); background: var(--text-muted); }
.hip3-grade-a { background: var(--green-primary); }
.hip3-grade-b { background: var(--green-deep); }
.hip3-grade-c { background: var(--green-accent); }
.hip3-grade-d { background: var(--negative); }
.hip3-grade-none { background: transparent; border: 1px dashed var(--chart-axis); color: var(--text-muted); }
.hip3-grade-label { display: block; font-size: .85rem; color: var(--text-muted); }
.hip3-no-underlying { background: var(--bg-elevated); border: 1px solid var(--green-accent); color: var(--text-primary); }
.hip3-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .75rem; }
.hip3-card { border: 1px solid var(--chart-grid); border-radius: .5rem; padding: .85rem; }
.hip3-card-headline { font-family: var(--font-mono); font-size: 1.5rem; margin: .2rem 0; }
.hip3-card-rating { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: .78rem; }
.hip3-rating-good .hip3-card-rating { color: var(--green-primary); }
.hip3-rating-fair .hip3-card-rating { color: var(--green-accent); }
.hip3-rating-weak .hip3-card-rating { color: var(--negative); }
.hip3-rating-na .hip3-card-rating { color: var(--text-muted); }
.hip3-card-sample { font-size: .78rem; }
.hip3-card-context { font-size: .78rem; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--chart-grid); color: var(--text-muted); }
.hip3-coarse td { opacity: .6; }
/* The market page's reopen table and the methodology tables are a bare .hip3-table — no
   .scanner-table beside them, so nothing padded their cells and the headers collided
   ("Venue priceReal reopenJump"). The tracker and the delisted list ARE .scanner-table and keep
   the shared scanner padding, hence the :not() — otherwise this rule, last in the file, would
   quietly restyle both. Tokens only, no literals: the palette guard scans this block to EOF. */
.hip3-table:not(.scanner-table) { width: 100%; border-collapse: collapse; font-size: .84rem; }
.hip3-table:not(.scanner-table) th { padding: .6rem .85rem; text-align: left; font-size: .68rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
  background: var(--bg-elevated); border-bottom: 1px solid var(--border); white-space: nowrap; }
.hip3-table:not(.scanner-table) td { padding: .55rem .85rem; vertical-align: middle;
  border-bottom: 1px solid var(--border); }
.hip3-reopen-summary { margin: .75rem 0 .5rem; }
.hip3-rowtag { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 0 .3rem; margin-left: .35rem; white-space: nowrap; }
.hip3-unrated td { opacity: .7; }
.hip3-dataset { margin-top: .75rem; }
.hip3-mechanics-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .75rem; margin: .75rem 0 1.25rem; }
.hip3-mechanics-list dt { color: var(--text-muted); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; }
.hip3-mechanics-list dd { margin: .15rem 0 0; font-size: .86rem; line-height: 1.55; }
.hip3-mechanics-list a { color: var(--green-primary); text-decoration: none; }
.hip3-mechanics-list a:hover { text-decoration: underline; }
@media (max-width: 480px) { .hip3-hero-row { flex-direction: column; } }

/* ── ProvenAlpha evidence page (/provenalpha/pair/<slug>/) ──────────────────────────────
   Designed to read as one more tool (ZoneHunter, the screener), not as a document: a dense
   identity row, one scannable meta line instead of four oversized cards, and tabular blocks.
   GTP's direction, 18-Sep. Tokens only — no new colours. */
.pa-pair-head { margin: .2rem 0 1.1rem; }
.pa-pair-id { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.pa-pair-logo { width: 26px; height: 26px; }
.pa-pair-h1 { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700;
              letter-spacing: .01em; margin: 0; color: var(--text-primary); }
.pa-pair-price { font-family: var(--font-mono); font-size: 1.1rem; color: var(--text-primary); }
.pa-pair-conf { font-family: var(--font-mono); font-size: .8rem; }
.pa-pair-actions-top { margin-left: auto; display: inline-flex; gap: .4rem; }
.pa-pair-btn { padding: .3rem .65rem; font-size: .8rem; display: inline-flex; align-items: center; gap: .3rem; }
.pa-pair-btn svg { width: 14px; height: 14px; }
.pa-pair-meta { font-family: var(--font-mono); font-size: .78rem; color: var(--text-secondary);
                margin: .55rem 0 .25rem; }
.pa-pair-meta b { color: var(--text-primary); font-weight: 600; }
.pa-pair-lede { font-size: .82rem; margin: 0; max-width: 90ch; }

.pa-pair-read { margin: 1.2rem 0; padding: .75rem .9rem;
                background: var(--bg-surface); border: 1px solid var(--border);
                border-left: 3px solid var(--green-primary); border-radius: .3rem; }
.pa-pair-read .section-tag { margin: 0 0 .35rem; }
.pa-pair-summary { font-size: .93rem; line-height: 1.6; color: var(--text-primary);
                   max-width: 96ch; margin: 0; }

.pa-pair-levels, .pa-pair-posts { margin: 1.3rem 0; }
.pa-pair-levels .section-tag, .pa-pair-posts .section-tag { margin-bottom: .45rem; }
.pa-lvl-note { color: var(--text-secondary); font-size: .85rem; }

.pa-pair-group { margin: 0 0 1rem; }
.pa-pair-group h3 {
    font-size: .82rem; font-weight: 600; letter-spacing: .01em;
    margin: 0 0 .35rem; display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap;
}
.pa-pair-group h3 a { color: var(--green-primary); text-decoration: none; font-family: var(--font-mono); }
.pa-pair-group h3 a:hover,
.pa-pair-group h3 a:focus-visible { color: var(--green-accent); text-decoration: underline; }

/* The quotation treatment. These are other people's words — the rule is to make that visible
   at a glance, not to blend them into our own prose. Denser than the first pass so a 40-post
   pair still scans. */
.pa-pair-post {
    margin: 0 0 .3rem; padding: .45rem .65rem;
    background: var(--bg-surface);
    border-left: 2px solid var(--border-accent);
    border-radius: 0 .25rem .25rem 0;
}
.pa-pair-post p { margin: 0; line-height: 1.5; font-size: .88rem;
                  color: var(--text-secondary); overflow-wrap: anywhere; }
.pa-pair-post footer { margin-top: .2rem; font-size: .72rem; font-family: var(--font-mono); }
.pa-pair-post footer a { color: var(--text-muted); text-decoration: underline; }
.pa-pair-post footer a:hover,
.pa-pair-post footer a:focus-visible { color: var(--green-primary); }

.pa-pair-disclosure {
    margin: 1.6rem 0 0; padding-top: .8rem;
    border-top: 1px solid var(--border); font-size: .76rem; line-height: 1.6; max-width: 90ch;
}

@media (max-width: 640px) {
    .pa-pair-actions-top { margin-left: 0; width: 100%; }
    .pa-pair-h1 { font-size: 1.25rem; }
    .pa-pair-meta { font-size: .72rem; }
}

/* ProvenAlpha Mentions cell — the TG/X split, mirroring the internal Social Alpha page.
   Monospace so the two counts stay column-aligned down the table. */
.pa-mentions { font-family: var(--font-mono); font-size: .82rem; white-space: nowrap; }
.pa-src-tg { color: var(--text-secondary); }
.pa-src-x  { color: var(--text-muted); }
/* Which platform an excerpt came from — a reader should never have to guess. */
.pa-plat { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em;
           text-transform: uppercase; padding: .05rem .3rem; margin-left: .4rem;
           border: 1px solid var(--border); border-radius: .2rem; color: var(--text-muted); }
.pa-lvl-note { color: var(--text-secondary); font-size: .85rem; }

/* ProvenAlpha Pair cell — logo, ticker, badge and BOTH action icons on ONE line.
   The sticky first column is narrow, so without an explicit nowrap flex row the actions
   wrapped underneath the ticker (GTP, 18-Sep). */
.pa-pair-cell { display: flex; align-items: center; gap: .3rem; flex-wrap: nowrap; white-space: nowrap; }
.pa-pair-cell .sc-asset { display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto; }
.pa-pair-cell .os-pair-actions { display: inline-flex; align-items: center; gap: .15rem; margin-left: auto; flex: 0 0 auto; }
.pa-pair-cell .os-detail svg { width: 15px; height: 15px; }
/* Two chip groups sit side by side (venue, then direction) and each opens with an "All".
   A divider keeps them from reading as one control. */
.pa-chip-group { position: relative; padding-right: .7rem; margin-right: .4rem; }
.pa-chip-group::after { content: ""; position: absolute; right: 0; top: 18%; bottom: 18%;
                        width: 1px; background: var(--border); }

/* ── Page shell (design handoff 2026-09-18, Part 1) ──────────────────────────────────────────────
   Shared by the tool pages (ProvenAlpha board + pair, Screener, ZoneHunter Live, HIP-3 + asset page,
   Zone Alerts) and Indicators. Tokens only: this block sits inside the palette test's scan range.
   Sticky offsets all derive from the 72px navbar: control bar 72 · rails/FAQ intro 96. */

/* 1.2 Breadcrumbs — directly under the navbar. The section clears the fixed navbar exactly (72px);
   the crumb's own 22px top padding is the only space above it, its 32px bottom margin the space
   before the page header. */
.zh-section.atp-shell { padding-top: 72px; }
.atp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: 1.375rem 0 0; margin: 0 0 2rem;
              font-family: var(--font-mono); font-size: .72rem; line-height: 1.4; color: var(--text-muted); }
.atp-crumbs a { color: var(--text-muted); text-decoration: none; }
.atp-crumbs a:hover { color: var(--green-primary); text-decoration: underline; }
.atp-crumbs .sep { color: var(--text-faint); }
.atp-crumbs .step { color: var(--text-muted); }
.atp-crumbs .is-current { color: var(--text-secondary); }

/* 1.3 Page header — hero left, status card right (ProvenAlpha, Screener, ZoneHunter, HIP-3).
   .zh-header/.zh-hero stay as hooks (tests split on them); .atp-pagehead turns the old flex row into
   the grid. No top padding: the breadcrumb's 32px bottom margin is the space above. */
.zh-header.atp-pagehead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
                          gap: clamp(24px, 4vw, 64px); align-items: start; padding: 0; margin-bottom: 1rem; }
.atp-pagehead .zh-hero { max-width: 70ch; }
.atp-pagehead .section-tag { margin-bottom: 14px; }
.atp-pagehead h1.section-headline { font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 14px; }
.atp-pagehead-long h1.section-headline { font-size: clamp(1.9rem, 3.2vw, 2.7rem); line-height: 1.12; }   /* Screener + ZoneHunter: long titles */
.atp-pagehead .section-desc, .atp-pagehead .os-subtitle { font-size: .98rem; line-height: 1.65; max-width: 64ch; margin: 0;
                                                          color: var(--text-secondary); text-wrap: pretty; }
.atp-pagehead .zh-more { margin: 14px 0 0; }
.atp-pagehead .zh-more summary { font-family: var(--font-mono); }
.atp-pagehead .zh-more p { line-height: 1.7; margin: 10px 0 0; }
.atp-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 20px 0 0; font-size: .85rem; }
.atp-links .sep { color: var(--bg-card-border); }
.atp-statuscard { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.125rem 1.25rem; }
.atp-statuscard-head { display: flex; align-items: center; justify-content: space-between; gap: .625rem;
                       padding-bottom: .875rem; border-bottom: 1px solid var(--border); }
.atp-statuscard-head .scanner-update-time { font-size: .68rem; letter-spacing: 0; text-align: right; }
.atp-statuscard dl { display: grid; grid-template-columns: 1fr auto; gap: .625rem .75rem; margin: .875rem 0 0;
                     font-family: var(--font-mono); font-size: .72rem; }
.atp-statuscard dt { color: var(--text-muted); font-weight: 400; }
.atp-statuscard dd { margin: 0; text-align: right; color: var(--text-primary); }
.atp-statuscard dd.is-accent { color: var(--green-primary); }
.atp-statuscard .atp-statuscard-foot { margin: .875rem 0 0; padding-top: .875rem; border-top: 1px solid var(--border);
                                       font-size: .74rem; line-height: 1.6; color: var(--text-muted); }
/* Phones: the card drops under the hero, full width. */
@media (max-width: 767.98px) { .zh-header.atp-pagehead { grid-template-columns: minmax(0, 1fr); } }
/* Phones, tool pages (GTP 2026-09-23, same call as the homepage): the full status card pulled focus
   from the tool below it. `.is-phone-line` shrinks it in place into a compact terminal status line —
   same DOM, so the pages' JS (updated-ago stamp, ZoneHunter's AI-answers count) keeps writing to it.
   Stays above the table on purpose: below a 66-row table nobody would see it. */
@media (max-width: 767.98px) {
  .atp-statuscard.is-phone-line { padding: 9px 14px; background: var(--bg-deep); border-radius: var(--r-md);
                                  font-family: var(--font-mono); font-size: .68rem; line-height: 1.5; color: var(--text-muted); }
  .is-phone-line .atp-statuscard-head { justify-content: flex-start; gap: 10px; padding: 0; border: 0; }
  .is-phone-line .atp-statuscard-head::before { content: '$ status'; color: var(--text-muted); }
  .is-phone-line .scanner-live-badge { padding: 0; border: 0; background: none; font-size: .68rem; }
  .is-phone-line .atp-statuscard-head .scanner-update-time { font-size: .68rem; text-align: left; }
  .is-phone-line dl { display: flex; flex-wrap: wrap; gap: 2px 0; margin: 4px 0 0; font-size: .68rem; }
  .is-phone-line dt { margin-right: .6ch; }
  .is-phone-line dd { text-align: left; color: var(--text-secondary); }
  .is-phone-line dd:not(:last-of-type)::after { content: '·'; margin: 0 .9ch; color: var(--text-muted); }
  .atp-links .sep { display: none; }   /* dots dangled at line ends once the link row wraps */
  .is-phone-line .atp-statuscard-foot { margin-top: 4px; padding-top: 0; border-top: 0; font-size: .64rem; line-height: 1.5; }
}

/* 1.4 Control bar — every chip cluster gets a mono uppercase label (.os-ctl-label, reused site-wide)
   and clusters are split by a 1px rule. Sticky under the 72px navbar. Two logical rows (Screener,
   ZoneHunter) = .atp-ctlbar-2rows holding two .atp-ctlrow rows, not one long wrap. Chips keep .zh-chip. */
.os-ctl-label { font-size: .6rem; letter-spacing: .12em; }
.atp-ctlbar { position: sticky; top: 72px; z-index: 40; background: var(--bg-base); border-bottom: 1px solid var(--border);
              display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; padding: 1rem 0 .75rem; margin-bottom: 0; }
.atp-ctlbar-2rows { flex-direction: column; align-items: stretch; }
.atp-ctlrow { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; }
.atp-ctl-sep { width: 1px; height: 20px; background: var(--line-sep); margin: 0 .25rem; flex: 0 0 auto; }
.atp-push { margin-left: auto; }   /* first item of the right-hand group: the search box, or the count when alone */

/* 1.5 Table panel — .scanner-table-outer already IS the panel (surface, border, radius). Tool-page
   tables (inside .atp-shell) get the handoff's header colour/weight. Size + letter-spacing stay per
   table (GTP 2026-09-18): Screener + ZoneHunter keep .74rem (the 09-15 decision), ProvenAlpha + HIP-3
   keep the shared .62rem. .atp-tablescroll makes the panel its own
   scrollport (Screener, ZoneHunter, HIP-3) so the header can pin at top:0 inside it. ProvenAlpha does
   NOT use it: its header pins to the viewport (top:131px) — set in §2.1. Deliberate; don't unify. */
.atp-shell .scanner-table thead th:not(.os-group) { font-weight: 500; text-transform: uppercase; color: var(--text-secondary); }
.scanner-table-outer.atp-tablescroll { overflow: auto; max-height: min(76vh, 900px); overscroll-behavior: contain; margin-top: 1.25rem; }
.atp-tablescroll .scanner-table thead th { position: sticky; top: 0; z-index: 2; }
.atp-tablescroll .scanner-table thead th:first-child:not(.os-group) { z-index: 5; }   /* wins on both axes */
/* First column: heavier right edge. Cell dividers: faint between columns, stronger at the end of a
   logical group (.atp-group-end on the th + td), 5% row separators. */
.atp-shell .scanner-table th:first-child:not(.os-group), .atp-shell .scanner-table td:first-child { border-right: 1px solid var(--line-strong); }
.atp-shell .scanner-table tbody tr { border-bottom: 1px solid var(--line-row); }
.atp-shell .scanner-table .atp-group-end { border-right: 1px solid var(--line-strong); }

/* 1.7 "Go deeper" — separate cards, not one joined panel (matches the mock; GTP 2026-09-18).
   Scoped to .atp-deeper/.atp-cards on the four tool pages; pages that share the library data
   (/zonehunter/guide/, /prediction-markets/) keep the joined .how-grid. Icons: vendored Lucide via
   {% icon %} at 20px in the existing 48px accent tile (kept above the title, GTP ok'd). */
.zh-block.atp-deeper { padding: 72px 0; border-top: 1px solid var(--border); background: var(--bg-base); }
.atp-deeper .section-tag { margin-bottom: 14px; }
.atp-deeper h2.section-headline { font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.15; margin: 0 0 10px; }
.atp-deeper p.section-desc { font-size: .92rem; line-height: 1.6; color: var(--text-secondary); max-width: 56ch; margin: 0 0 36px; }
.how-grid.atp-cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 0;
                      background: none; border: 0; border-radius: 0; overflow: visible; }
.atp-cards .how-card { display: flex; flex-direction: column; gap: 10px; padding: 26px; background: var(--bg-surface);
                       border: 1px solid var(--border); border-radius: var(--r-lg); color: inherit; text-decoration: none;
                       overflow: visible; transition: border-color .2s; }
.atp-cards .how-card:hover { background: var(--bg-surface); border-color: var(--border-accent); }
.atp-cards .how-card h4 { font-family: var(--font-body) !important; font-size: 1.02rem; font-weight: 500; line-height: 1.3;
                          letter-spacing: 0; color: var(--text-primary); margin: 0; }
.atp-cards .how-card p { font-size: .86rem; line-height: 1.6; color: var(--text-secondary); margin: 0; }
.atp-cards .how-card .ind-cta { margin-top: 6px; font-size: .74rem; letter-spacing: 0; color: var(--green-primary); }
.atp-cards .how-icon-wrap { margin-bottom: 4px; }
.how-icon-wrap .lu { display: block; }

/* 1.8 FAQ — sticky intro (eyebrow, h2, the page's CTA card) left, numbered accordion right. Replaces the
   full-width .faq-acc stack on the tool pages only; .faq-acc stays for the pages that still use it.
   The number is aria-hidden so the summary reads as the question alone (FAQPage parity). */
.zh-block.atp-faqsec { padding: 72px 0; }
.atp-faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.atp-faq-intro { position: sticky; top: 96px; }
.atp-faq-intro .section-tag { margin-bottom: 14px; }
.atp-faq-intro h2.section-headline { font-size: clamp(1.6rem, 2.4vw, 2rem); line-height: 1.2; margin: 0 0 28px; }
.atp-faq-card { padding: 22px 24px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.atp-faq-card > .zh-cta { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.atp-faq-card > .zh-cta p { flex: 1 1 100%; margin: 0 0 6px; font-size: .92rem; line-height: 1.6; color: var(--text-primary); }
.atp-faq-card .btn-primary-v2, .atp-faq-card .btn-ghost-v2 { height: 38px; padding: 0 16px; border-radius: var(--r-md); font-size: .84rem; letter-spacing: 0; }
.atp-faq-card .btn-primary-v2 { font-weight: 700; }
.atp-faq-card .btn-ghost-v2 { font-weight: 400; border: 1px solid var(--line-btn); }
.atp-faq details { border-bottom: 1px solid var(--border); }
.atp-faq summary { cursor: pointer; list-style: none; display: flex; gap: 14px; align-items: baseline; padding: 18px 0;
                   font-size: .98rem; font-weight: 500; color: var(--text-primary); }
.atp-faq summary::-webkit-details-marker { display: none; }
.atp-faq summary:hover .faq-q { color: var(--green-primary); }
.atp-faq summary:focus-visible { outline: 2px solid var(--green-primary); outline-offset: 2px; border-radius: var(--r-sm); }
.atp-faq .faq-n { font-family: var(--font-mono); font-size: .72rem; color: var(--green-primary); flex: 0 0 auto; }
.atp-faq .faq-a { margin: 0 0 20px; padding-left: 34px; font-size: .9rem; line-height: 1.7; color: var(--text-secondary); max-width: 72ch; }
/* Below the lg breakpoint: one column, the intro scrolls with the page. */
@media (max-width: 991.98px) { .atp-faq-grid { grid-template-columns: minmax(0, 1fr); } .atp-faq-intro { position: static; } }

/* Go deeper, split variant (Screener + ZoneHunter mocks): guides as a list on the left, tools as compact
   cards on the right — a third of the height of 12-13 equal cards. No icons in this variant (mock). */
.atp-deeper-wide p.section-desc { max-width: 62ch; }
.atp-deeper-split { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.atp-deeper-label { display: block; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
                    color: var(--text-muted); margin-bottom: 6px; }
.atp-toolcards { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.atp-guide { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; align-items: baseline; padding: 16px 0;
             border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; }
.atp-guide:hover { background: color-mix(in srgb, var(--text-primary) 2%, transparent); color: inherit; }
.atp-guide-title { font-size: .95rem; font-weight: 500; color: var(--text-primary); }
.atp-guide:hover .atp-guide-title { color: var(--green-primary); }
.atp-guide-cta { font-family: var(--font-mono); font-size: .7rem; color: var(--green-primary); white-space: nowrap; }
.atp-guide-blurb { grid-column: 1 / 2; font-size: .84rem; line-height: 1.6; color: var(--text-secondary); text-wrap: pretty; }
.atp-toolcard { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--bg-surface); border: 1px solid var(--border);
                border-radius: 10px; color: inherit; text-decoration: none; transition: border-color .2s; }
.atp-toolcard:hover { border-color: var(--border-accent); color: inherit; }
.atp-toolcard-title { font-size: .92rem; font-weight: 500; color: var(--text-primary); }
.atp-toolcard-blurb { font-size: .82rem; line-height: 1.55; color: var(--text-secondary); }
.atp-toolcard-cta { font-family: var(--font-mono); font-size: .7rem; color: var(--green-primary); margin-top: 2px; }
@media (max-width: 991.98px) { .atp-deeper-split { grid-template-columns: minmax(0, 1fr); } }

/* Feedback card in the FAQ column, under the CTA card (Screener + ZoneHunter mocks). The form keeps its
   message box and optional email — only the frame and type change. */
.atp-faq-intro .atp-feedback { margin-top: 16px; padding: 18px 24px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.atp-faq-intro .atp-feedback-head .section-tag { font-size: .62rem; letter-spacing: .14em; color: var(--text-muted); }
.atp-faq-intro .atp-feedback-head .lu { display: none; }
.atp-faq-intro .atp-feedback-lead { margin: 8px 0 12px; font-size: .84rem; line-height: 1.6; color: var(--text-secondary); }
.atp-faq-intro .atp-feedback-btn { background: color-mix(in srgb, var(--text-primary) 6%, transparent); color: var(--text-primary);
                                   font-family: var(--font-mono); font-size: .68rem; font-weight: 400; padding: 6px 14px; border-radius: var(--r-md); }
.atp-faq-intro .atp-feedback-btn:hover { background: var(--green-primary); color: var(--text-inverted); transform: none; }
.atp-faq-intro .atp-feedback-btn .lu { display: none; }

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE REDESIGN (claude.ai/design handoff, 2026-09-19)
   Insight hero, job blocks, On TradingView band, desk + Telegram pair, FAQ/final CTA reuse the
   §1.x page-shell classes above. Only what's genuinely new lives here — tokens only, no new ones
   (handoff §0). `.home-card` is a pure hover marker (§3.1), layered onto each component's own box
   class; it defines no box model of its own.
   ═══════════════════════════════════════════════════════════ */

/* Page clearance — the fixed 72px navbar needs a spacer since .home-shell is a plain div, not the
   `.zh-section.atp-shell` tool-page pattern that already carries it. */
.home-shell { padding-top: 72px; }

/* ── Hero ── */
.zh-block.home-hero { padding: 88px 0 56px; }
.home-hero-copy { max-width: 70ch; }   /* matches screener/zonehunter's .zh-hero — without it the
                                          hero link row stretches full-width at 1600px */
.home-eyebrow { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
                color: var(--green-primary); margin: 0 0 14px; }
.home-h1 { font-family: var(--font-display); font-weight: 400; font-size: 60px; line-height: 1.08;
           letter-spacing: -.025em; color: var(--text-primary); margin: 0 0 16px; text-wrap: pretty; }
.home-sub1 { margin: 0 0 8px; font-size: 18px; line-height: 1.55; color: var(--text-primary); max-width: 56ch; text-wrap: pretty; }
.home-sub2 { margin: 0; font-size: 15.2px; line-height: 1.6; color: var(--text-secondary); max-width: 60ch; text-wrap: pretty; }
.home-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.home-ctas.is-centered { justify-content: center; }
.home-updated { font-family: var(--font-mono); font-size: .68rem; color: var(--text-muted); text-align: right; }
.home-caption { margin: 18px 0 0; font-family: var(--font-mono); font-size: .68rem; color: var(--text-muted); }

/* ── Insight cards (the heart, handoff §3 "Insight cards") ──
   6-column track: two wide cards span 3 (row 1), three narrow span 2 (row 2) — one grid, no media
   query needed for the 2+3 layout itself. Frame = .atp-cards .how-card at insight-card scale. */
.home-insights { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.home-insight {
  grid-column: span 2; display: flex; flex-direction: column; gap: 12px; min-height: 176px;
  padding: 22px 24px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  color: inherit; text-decoration: none; box-sizing: border-box;
}
.home-insight.is-wide { grid-column: span 3; min-height: 168px; padding: 24px 26px; gap: 14px; }
.home-insight-head { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: .68rem;
                     letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.home-insight-head .lu { color: var(--green-primary); }
.home-insight-say { font-size: 16px; line-height: 1.45; color: var(--text-primary); text-wrap: pretty; }
.home-insight.is-wide .home-insight-say { font-size: 21px; }
.home-insight-foot { display: flex; align-items: baseline; gap: 12px; margin-top: auto; padding-top: 4px; }
.home-insight.is-wide .home-insight-foot { gap: 16px; }
.home-insight-ts { font-family: var(--font-mono); font-size: .66rem; color: var(--text-muted); }
.home-insight-cta { margin-left: auto; font-family: var(--font-mono); font-size: .72rem; color: var(--green-primary); white-space: nowrap; }

/* ── Terminal cards (GTP 2026-09-23) — each hero card is a terminal window: title bar, a typed
   `$ command`, the reading in mono with key elements in yellow, and a blinking block cursor.
   Typing + live retype: js/home_terminal.js. Scanlines/glow are faint on purpose — a nod to a CRT,
   still the site's palette. */
.home-insight.term { position: relative; overflow: hidden; padding: 0; gap: 0; background: var(--bg-deep);
                     box-shadow: inset 0 0 48px color-mix(in srgb, var(--green-primary) 5%, transparent); }
.home-insight.term.is-wide { padding: 0; gap: 0; }
.home-insight.term::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--text-primary) 2.5%, transparent) 0 1px, transparent 1px 3px); }
.term-bar { display: flex; align-items: center; gap: 14px; height: 32px; padding: 0 14px; flex: 0 0 auto;
            background: var(--bg-surface); border-bottom: 1px solid var(--border); }
.term-dots { display: flex; gap: 6px; }
.term-dots i { display: block; width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, white 16%, transparent); }
.term .home-insight-head { font-size: .64rem; }
.term-cmd, .home-insight.term .home-insight-say, .home-insight.term .home-insight-foot { padding-left: 22px; padding-right: 22px; }
.term-cmd { display: block; padding-top: 16px; min-height: 2.4em; font-family: var(--font-mono); font-size: .76rem;
            color: color-mix(in srgb, var(--green-primary) 65%, var(--text-muted)); }
.term-ps { color: var(--green-primary); }
.home-insight.term .home-insight-say { display: flex; align-items: baseline; gap: .8ch; margin-top: 8px;
  font-family: var(--font-mono); font-size: 14px; line-height: 1.65; letter-spacing: -.01em; color: var(--text-secondary);
  text-shadow: 0 0 10px color-mix(in srgb, var(--green-primary) 12%, transparent); }
.home-insight.term.is-wide .home-insight-say { font-size: 17px; line-height: 1.6; }
.term-body { flex: 1; min-width: 0; }
.term-body.is-armed { display: grid; }
.term-body.is-armed > * { grid-area: 1 / 1; }
.term-body .term-ghost, .term-body .term-ghost .term-hl { color: transparent; text-shadow: none; }
.term-hl { background: none; padding: 0; color: var(--term-yellow);
           text-shadow: 0 0 9px color-mix(in srgb, var(--term-yellow) 35%, transparent); }
.term-cursor { display: inline-block; width: .6em; height: 1.1em; margin-left: 3px; vertical-align: -.2em;
               background: var(--green-primary); box-shadow: 0 0 8px color-mix(in srgb, var(--green-primary) 55%, transparent);
               animation: term-blink 1.06s steps(1, end) infinite; }
.term-cmd .term-cursor { height: 1.05em; }
.term.is-typing .term-cursor { animation: none; }
@keyframes term-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .term-cursor { animation: none; } }
.home-insight.term .home-insight-foot { padding-top: 14px; padding-bottom: 18px; }

/* Phone-only terminal status line (replaces the hero status card below 768px). */
.home-statusline { display: none; }

/* ── Job blocks ── */
.zh-block.home-job { padding: 72px 0; border-top: 1px solid var(--border); background: var(--bg-base); }
.zh-block.home-job.is-band { background: var(--bg-band); }
.home-jobs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 64px; align-items: start; }
/* Flip swaps the column WIDTHS either way (text 1.25fr on the media-less block, matching the mock's
   block 4 — dc.html:259 — where there's nothing to reorder). Reordering the media column ahead of
   the text is a SEPARATE step, gated on `.has-shot` (fix round 1, item 1): without a shot, `order:-1`
   on an empty-of-media wrapper just crushed the headline into the narrow column for no visual gain. */
.is-flipped .home-jobs { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.home-job.is-flipped.has-shot .home-job-media { order: -1; }
.home-job-text .how-icon-wrap { margin-bottom: 18px; width: 48px; height: 48px; }
.home-job-title { font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 1.15;
                  letter-spacing: -.02em; color: var(--text-primary); margin: 0 0 12px; }
.home-job-sentence { margin: 0; font-size: 15px; line-height: 1.7; color: var(--text-secondary); max-width: 52ch; text-wrap: pretty; }
.home-job-tv { margin: 20px 0 0; font-size: 13.5px; color: var(--text-muted); }
.home-job-tv a { color: var(--green-primary); }
.home-job-evidence { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 14px 0 0; font-size: 13px; }
.home-job-evidence .sep { color: var(--text-faint); }
.home-job-media { display: flex; flex-direction: column; gap: 16px; }

/* Browser-frame screenshot — tokens, not an image; §5 of the handoff. */
.home-shot { border-radius: var(--r-lg); border: 1px solid var(--border); overflow: hidden; background: var(--bg-deep);
             box-shadow: 0 22px 50px rgba(0,0,0,.5), 0 0 60px rgba(140,202,43,.05); margin: 0; }
.home-shot-bar { height: 30px; background: var(--bg-deep); border-bottom: 1px solid var(--border);
                 display: flex; align-items: center; padding: 0 12px; gap: 6px; }
.home-shot-bar span { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, white 16%, transparent); display: block; }
.home-shot-bar em { margin: 0 auto; font-style: normal; font-family: var(--font-mono); font-size: .66rem; color: var(--text-muted); }
.home-shot img { display: block; width: 100%; height: auto; }
/* Tap/click to enlarge (js/lightbox.js). The link itself points at the full image, so it still
   works with JS off. */
.home-shot-open { display: block; position: relative; cursor: zoom-in; }
.home-shot-hint { position: absolute; right: 10px; bottom: 10px; pointer-events: none;
                  font-family: var(--font-mono); font-size: .66rem; color: var(--text-primary);
                  background: color-mix(in srgb, var(--bg-deep) 85%, transparent); border: 1px solid var(--border); border-radius: 100px; padding: 4px 10px; }

/* Screenshot lightbox (js/lightbox.js) — full-screen dark viewer; tap the image to toggle zoom. */
html.has-lightbox { overflow: hidden; }
.atp-lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0;
                border: 0; background: color-mix(in srgb, var(--bg-deep) 95%, transparent); color: var(--text-primary); }
.atp-lightbox::backdrop { background: color-mix(in srgb, var(--bg-deep) 60%, transparent); }
.atp-lightbox-stage { width: 100%; height: 100%; overflow: auto; display: flex; padding: 56px 12px 16px; box-sizing: border-box; }
.atp-lightbox-stage img { display: block; margin: auto; max-width: 100%; max-height: 100%; height: auto;
                          border-radius: var(--r-md); cursor: zoom-in; }
.atp-lightbox.is-zoomed .atp-lightbox-stage img { max-width: none; max-height: none; width: max(250%, 1100px); margin: 0; cursor: zoom-out; }
.atp-lightbox-close { position: fixed; top: 10px; right: 12px; z-index: 1; width: 40px; height: 40px;
                      border-radius: 50%; border: 1px solid var(--border); background: var(--bg-surface);
                      color: var(--text-primary); font-size: 18px; line-height: 1; cursor: pointer; }
/* ProvenAlpha only: 1322×1000 (1.32:1) would stand ~90px taller than the two 16:9 shots. Force the
   frame to the other two panels' ratio and crop from the bottom, keeping the bias card + filter bar
   + first rows on screen. */
.home-shot.is-pinned img { aspect-ratio: 1650 / 950; object-fit: cover; object-position: top; }

.home-job-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.home-job-cards.is-single { grid-template-columns: 1fr; }
/* Scoped under .home-job-cards: bare .how-card already carries different (older) box rules used
   live on /provenalpha/, /hip3/ and the ZoneHunter guide — must not be touched. */
.home-job-cards .how-card {
  display: flex; flex-direction: column; gap: 10px; padding: 26px; background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: var(--r-lg); color: inherit; text-decoration: none;
}
.home-job-cards .how-card:hover { background: var(--bg-surface); }
.home-job-cards .how-card h4 { margin: 0; font-family: var(--font-body) !important; font-size: 16.5px; font-weight: 500;
                               line-height: 1.3; letter-spacing: 0; color: var(--text-primary); }
.home-job-cards .how-card p { margin: 0; font-size: 13.8px; line-height: 1.6; color: var(--text-secondary); }
.home-job-cards .how-card .ind-cta { margin-top: 6px; font-family: var(--font-mono); font-size: 11.8px;
                                      letter-spacing: 0; color: var(--green-primary); }
.home-freetag { align-self: flex-start; font-family: var(--font-mono); font-size: .625rem; letter-spacing: .12em;
                text-transform: uppercase; color: var(--green-primary); border: 1px solid var(--border-accent);
                background: var(--glow-green); border-radius: 100px; padding: 3px 10px; }
.home-card.is-railed { border-left: 3px solid var(--green-primary); }

/* ── On TradingView / Behind the tools section heads ── */
.zh-block.home-tv h2.section-headline, .zh-block.home-behind h2.section-headline {
  font-size: clamp(1.6rem, 2.4vw, 2rem); margin: 0 0 10px;
}
.zh-block.home-tv p.section-desc, .zh-block.home-behind p.section-desc { max-width: 62ch; font-size: .92rem; }
.home-sechead { display: flex; align-items: flex-end; gap: 32px; margin-bottom: 28px; }
.home-more { font-family: var(--font-mono); font-size: .72rem; color: var(--green-primary); white-space: nowrap; }
.home-sechead .home-more { margin-left: auto; }

/* ── On TradingView band ── */
.zh-block.home-tv { padding: 64px 0; border-top: 1px solid var(--border); background: var(--bg-band); }
.home-indicators { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.home-ind { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; border-radius: var(--r-md);
            background: var(--bg-surface); border: 1px solid var(--border); color: inherit; text-decoration: none; }
.home-ind-head { display: flex; align-items: baseline; gap: 10px; }
.home-ind-name { font-size: 14.7px; font-weight: 500; color: var(--text-primary); }
.home-ind-price { margin-left: auto; font-family: var(--font-mono); font-size: 11.2px; color: var(--text-muted); white-space: nowrap; }
.home-ind-tag { font-size: 13.1px; line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; }
.home-ind-cta { margin-top: auto; padding-top: 6px; font-family: var(--font-mono); font-size: 11.2px; color: var(--green-primary); }
.home-ind.is-free { border-color: var(--border-accent); }
.home-ind.is-free .home-ind-price { color: var(--green-primary); }

/* ── Behind the tools: desk + Telegram pair ── */
.zh-block.home-behind { padding: 64px 0; border-top: 1px solid var(--border); background: var(--bg-base); }
.home-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; margin-top: 28px; }
.home-desk, .home-tg { display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--border);
                        border-radius: var(--r-lg); padding: 26px 28px; }
.home-desk { border-left: 3px solid var(--green-primary); }
.home-pair-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: .625rem;
                     letter-spacing: .14em; text-transform: uppercase; color: var(--green-primary); margin: 0 0 12px; }
.home-pair-eyebrow .lu { color: var(--green-primary); }
.home-pair-line { margin: 0 0 20px; font-size: 15.5px; line-height: 1.6; color: var(--text-primary); text-wrap: pretty; }
.home-tg .home-pair-line { margin-bottom: 10px; }
.home-pair-sub { margin: 0; font-size: 13.6px; line-height: 1.65; color: var(--text-secondary); text-wrap: pretty; }
.home-desk-facts { display: grid; grid-template-columns: 1fr auto; gap: .625rem .75rem; margin: 0; padding-top: 16px;
                   border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 12.5px; }
.home-desk-facts dt { color: var(--text-muted); font-weight: 400; }
.home-desk-facts dd { margin: 0; text-align: right; color: var(--text-primary); }
.home-desk > .home-more { margin-top: auto; padding-top: 20px; }
.home-tg-btn { margin-top: auto; align-self: flex-start; }
/* §3.1 note: the ghost Telegram button takes the card-hover idea at button weight — no lift. */
.home-tg-btn:hover { border-color: color-mix(in srgb, var(--green-primary) 42%, transparent); background: var(--glow-green); color: var(--green-primary);
                     box-shadow: 0 0 22px rgba(140,202,43,0.10); }

/* ── Final CTA ── */
.zh-block.home-final { padding: 72px 0; border-top: 1px solid var(--border); background: var(--bg-base); }
.home-final-title { font-family: var(--font-display); font-weight: 400; font-size: 36px; line-height: 1.15;
                    letter-spacing: -.02em; color: var(--text-primary); margin: 0 0 24px; }

/* ── §3.1 Card hover — one treatment, every card on the page ── */
.home-card { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.home-card:hover {
  border-color: color-mix(in srgb, var(--green-primary) 42%, transparent);
  box-shadow: 0 0 0 1px rgba(140,202,43,0.20), 0 14px 34px rgba(0,0,0,0.38), 0 0 40px rgba(140,202,43,0.10);
  transform: translateY(-2px);
  text-decoration: none;
}
@media (prefers-reduced-motion: reduce) { .home-card:hover { transform: none; } }

/* Adaptive fill (fix round 1, item 9): when HIP-3 isn't indexed, `build_insight_cards` returns 4
   cards — the usual 2 wide (row 1) + 2 narrow, and 2×span-2 narrow cards only fill 4 of row 2's 6
   columns, leaving a one-third hole. `:has()` detects "exactly 4 children" structurally (4th child
   is also the last) so the narrow pair spans 3 each instead — wide cards are untouched. Neutralised
   below 992px by the media rules, which must repeat this selector: it is (0,5,0) and beat their
   plain `.home-insight` (fix 2026-09-23 — a 4-card phone render had a 2px-wide first card). */
.home-insights:has(> .home-insight:nth-child(4):last-child) .home-insight:not(.is-wide) {
  grid-column: span 3;
}

/* ── §4 responsive ── */
@media (max-width: 991.98px) and (min-width: 768px) {
  .home-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-insight, .home-insight.is-wide,
  .home-insights:has(> .home-insight:nth-child(4):last-child) .home-insight:not(.is-wide) { grid-column: span 1; }
  /* SPEC §4: "768–991: Job blocks → one column, media first" — every block, has-shot or not
     (block 4's lone card leading is fine at this width; only the phone board special-cases it).
     Fix round 2: `.home-job .home-jobs, .home-job.is-flipped .home-jobs` (2 and 3 classes) must
     both be at least as specific as the desktop `.is-flipped .home-jobs` rule (2 classes) — a
     bare `.home-jobs { … }` here (1 class) LOST to it regardless of media-query/source order,
     so the two flipped blocks (2, 4) kept their desktop two-column grid down to this width. */
  .home-job .home-jobs, .home-job.is-flipped .home-jobs { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .home-job-media { order: -1; }
  .home-indicators { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .zh-block.home-hero { padding: 32px 0 40px; }
  .home-h1 { font-size: 38px; }
  .home-sub1 { font-size: 16px; }
  .home-sub2 { font-size: 14.2px; }
  /* Buttons size to their label (GTP 2026-09-23: full-width read as too big), left-aligned,
     44px tap height. The final CTA stays centred. Link-row dots hide on phones — at a wrap
     they dangled at the end of a line ("FAQ → ·"). */
  .home-ctas { flex-direction: column; align-items: flex-start; gap: 10px; }
  .home-ctas.is-centered { align-items: center; }
  .home-ctas a { justify-content: center; min-height: 44px; padding-top: 0; padding-bottom: 0; }
  .home-links { gap: 8px 16px; }
  .home-links .sep, .home-job-evidence .sep { display: none; }
  .home-insights { grid-template-columns: 1fr; gap: 12px; }
  .home-insight, .home-insight.is-wide { grid-column: span 1; min-height: 0; }
  .home-insights:has(> .home-insight:nth-child(4):last-child) .home-insight:not(.is-wide) { grid-column: span 1; }
  .home-insight.term .home-insight-say, .home-insight.term.is-wide .home-insight-say { font-size: 14.5px; }
  .home-hero .atp-statuscard { display: none; }
  .home-statusline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 14px 0 0;
                     padding: 9px 14px; background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--r-md);
                     font-family: var(--font-mono); font-size: .68rem; line-height: 1.5; color: var(--text-muted); }
  .home-statusline-live { display: inline-flex; align-items: center; gap: 6px; color: var(--green-primary); text-transform: uppercase; letter-spacing: .1em; }
  .home-statusline .home-updated { text-align: left; }
  .home-statusline-facts { flex-basis: 100%; }
  .home-statusline-facts > span { white-space: nowrap; }
  .home-hero .home-caption { margin-top: 10px; }
  .term-cmd, .home-insight.term .home-insight-say, .home-insight.term .home-insight-foot { padding-left: 18px; padding-right: 18px; }
  .home-indicators { grid-template-columns: 1fr; gap: 10px; }
  .home-ind-cta { display: none; }
  .home-pair { grid-template-columns: 1fr; gap: 12px; }
  .home-final-title { font-size: 28px; }

  /* Fix round 1, item 2: the mock's phone board (dc.html:575-604) does NOT lead with the shot —
     it's icon → H2 → sentence → shot → cards → TradingView line → evidence. `.home-job-text` and
     `.home-job-media` both go `display: contents` so their children become directly orderable
     items of `.home-jobs` (still a single-column grid; `order` works there exactly as in flex),
     without touching the two-div DOM. Scoped to `.has-shot` — a shot-less block (job 4) is already
     in the right order (text, then its one card) and needs no reordering at all.
     Fix round 2 (regression measured at 400px in a real browser): same specificity fix as the
     tablet query above — `.home-jobs { grid-template-columns: minmax(0,1fr); }` alone (1 class)
     lost to the desktop `.is-flipped .home-jobs` rule (2 classes), so blocks 2 and 4 rendered a
     two-column grid on phones (measured 168.875px/135.125px columns instead of one 368px column),
     crushing block 2's headline/screenshot and block 4's card into the narrow track. */
  /* GTP 2026-09-23: `display: contents` makes every child a row of `.home-jobs`, which still
     carried the desktop 64px gap — 64px between icon, H2, sentence, shot, cards and links. Gap 0
     here; the spacing below is set per element instead.  */
  .zh-block.home-job { padding: 44px 0; }
  .home-job .home-jobs, .home-job.is-flipped .home-jobs { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .home-job:not(.has-shot) .home-job-media { margin-top: 20px; }
  .home-job-text .how-icon-wrap { margin-bottom: 14px; width: 44px; height: 44px; }
  .home-job-title { font-size: 28px; margin-bottom: 10px; }
  .home-job.has-shot .home-job-text, .home-job.has-shot .home-job-media { display: contents; }
  .home-job.has-shot .how-icon-wrap    { order: 1; }
  .home-job.has-shot .home-job-title   { order: 2; }
  .home-job.has-shot .home-job-sentence { order: 3; margin-bottom: 20px; }
  .home-job.has-shot .home-shot        { order: 4; margin-bottom: 16px; }
  .home-job.has-shot .home-job-cards   { order: 5; }
  .home-job.has-shot .home-job-tv      { order: 6; }
  .home-job.has-shot .home-job-evidence { order: 7; }
  .home-job-cards { grid-template-columns: 1fr; gap: 12px; }
  .home-job-cards .how-card { padding: 20px; }
  .home-job-tv { margin-top: 16px; }
  .home-job-evidence { margin-top: 10px; }

  /* GTP 2026-09-23: the old 200% top-left crop showed only a strip of filter buttons. Show the whole
     capture at full width, aspect kept (the desktop `.is-pinned` crop still applies); tapping opens
     it full-size in the lightbox. */
  .home-job.has-shot .home-shot { box-shadow: 0 14px 32px rgba(0,0,0,.45), 0 0 40px rgba(140,202,43,.04); }
  .home-job.has-shot .home-shot-bar { height: 26px; padding: 0 10px; gap: 5px; }
  .home-job.has-shot .home-shot-bar span { width: 7px; height: 7px; }
  .home-job.has-shot .home-shot-bar em { font-size: .56rem; }
  .home-shot-hint { right: 8px; bottom: 8px; font-size: .6rem; padding: 3px 8px; }

  /* Fix round 1, item 4: the mock (dc.html:773) never puts "All 8 indicators →" in the section
     head on phone — it sits under the card grid instead. `.home-sechead` goes `display: contents`
     so its two children re-order as siblings of `.home-indicators` inside the section `.container`. */
  .home-tv .container { display: flex; flex-direction: column; }
  .home-sechead { display: contents; }
  .home-sechead > div { order: 1; margin-bottom: 20px; }
  .home-indicators { order: 2; }
  .home-sechead > .home-more { order: 3; display: inline-block; margin: 16px 0 0; }
}

/* ── About page (redesign GTP 2026-10-02) — reuses the home-* blocks; only the grid, the two
   team cards' heads and the phone fixes are new. Tokens only. ── */
.zh-block.about-sec { padding: 64px 0; border-top: 1px solid var(--border); background: var(--bg-base); }
.zh-block.about-sec.is-band { background: var(--bg-band); }
.about-sec .section-desc { margin-bottom: 0; }
.about-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.about-grid.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.about-sec .home-sechead + .about-grid { margin-top: 0; }
.about-grid .home-ind-name { display: inline-flex; align-items: center; gap: 8px; }
.about-grid .home-ind-name .lu { color: var(--green-primary); flex: 0 0 auto; }
.about-card-label { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase;
                    color: var(--green-primary); }
.about-person-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.about-person-head .home-pair-eyebrow { margin-bottom: 4px; }
.about-person-name { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.2;
                     color: var(--text-primary); }
.about-portrait { width: 72px; height: 72px; flex: 0 0 auto; object-fit: cover; object-position: 50% 20%;
                  border-radius: 50%; border: 1px solid var(--border); }
.about-avatar { display: grid; place-items: center; width: 72px; height: 72px; flex: 0 0 auto; border-radius: 50%;
                background: var(--glow-green); border: 1px solid var(--border-accent); }
.about-avatar .lu { color: var(--green-primary); }
.about-person .home-pair-sub { margin-bottom: 0; }
.home-tg.about-person { border-left: 3px solid var(--border-accent); }
.about-portrait.is-hark { object-position: 50% 50%; border-color: var(--border-accent); }
@media (max-width: 1199.98px) and (min-width: 992px) { .about-grid.is-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991.98px) and (min-width: 768px) { .about-grid, .about-grid.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
  .zh-block.about-sec { padding: 48px 0; }
  .about-grid, .about-grid.is-4 { grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }
  /* the homepage hides its hero status card on phones (its terminal line replaces it); here the
     card IS the desk's facts, so it stays, full width under the hero copy. */
  .about-shell .home-hero .atp-statuscard { display: block; margin-top: 24px; }
  .about-sec .container { display: flex; flex-direction: column; }
  .about-sec .about-grid { order: 2; }
  .about-person-name { font-size: 21px; }
  .about-portrait, .about-avatar { width: 60px; height: 60px; }
}

/* ZoneHunter chart panel — Ask AI card, then the Telegram alert card (mock, GTP 2026-09-18). Scoped to
   /zonehunter/ (.atp-shell): the same partials on the fullscreen chart, /alerts/ and the HIP-3 asset
   page get their own treatment. Behaviour and copy unchanged; only frame, order and type. */
.atp-shell .zh-askcard { margin-top: 14px; background: var(--bg-surface); border: 1px solid var(--border);
                         border-left: 3px solid var(--green-primary); border-radius: var(--r-lg); padding: 18px 20px; }
.zh-chart-panel.is-expanded .zh-askcard { display: none; }
.atp-shell .zh-askcard .zh-ask { margin: 0; padding: 0; border: 0; background: none; }
.atp-shell .zh-askcard .zh-ask-head { align-items: baseline; gap: 10px; margin-bottom: 8px; }
.atp-shell .zh-askcard .zh-ask-head .section-tag { font-size: .65rem; letter-spacing: .14em; color: var(--green-primary); }
.atp-shell .zh-askcard .zh-ask-head .lu, .atp-shell .zh-askcard .zh-ask-btn .lu, .atp-shell .zh-askcard .zh-ask-how summary .lu { display: none; }
.atp-shell .zh-askcard .zh-ask-count { margin-left: auto; font-size: .66rem; color: var(--text-muted); }
.atp-shell .zh-askcard .zh-ask-lead { margin: 0 0 14px; font-size: .84rem; line-height: 1.6; color: var(--text-secondary); }
.atp-shell .zh-askcard .zh-ask-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.atp-shell .zh-askcard .zh-ask-chip { flex: 0 1 auto; text-align: left; font-size: .68rem; padding: 5px 11px; border-color: var(--line-sep); color: var(--text-secondary); }
.atp-shell .zh-askcard .zh-ask-chip:hover { border-color: var(--border-accent); color: var(--green-primary); }
.atp-shell .zh-askcard .zh-ask-form { gap: 8px; align-items: center; }
.atp-shell .zh-askcard .zh-ask-input { font-family: var(--font-mono); font-size: .74rem; padding: 9px 14px; border-radius: var(--r-md);
                                       border: 1px solid var(--line-sep); background: transparent; }
.atp-shell .zh-askcard .zh-ask-btn { font-size: .82rem; font-weight: 700; padding: 9px 18px; border-radius: var(--r-md); }
.atp-shell .zh-askcard .zh-ask-how { margin: 12px 0 0; }
.atp-shell .zh-askcard .zh-ask-how summary { display: inline; list-style: none; font-family: var(--font-mono); font-size: .68rem; color: var(--green-primary); }
.atp-shell .zh-askcard .zh-ask-how summary::-webkit-details-marker { display: none; }
.atp-shell .zh-askcard .zh-ask-how summary::before { content: '+ '; }
.atp-shell .zh-askcard .zh-ask-how[open] summary::before { content: '− '; }
.atp-shell .zh-askcard .zh-ask-how p { margin: 10px 0 0; font-size: .8rem; line-height: 1.6; color: var(--text-secondary); }

/* ── ZoneHunter Live, page redesign (handoff §2.4, GTP 2026-09-18) ─────────────────────────────────
   Scoped to /zonehunter/ (.atp-shell). All shading (24h heat, volume tiers, ×TF ramp, distance colours,
   bias pills, RRR colours, grade tags) is UNCHANGED by GTP ruling — only layout, type and frames move. */

/* Curated setups */
.atp-shell .zh-picks { margin: 36px 0 0; padding: 22px 24px; border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
                       background: color-mix(in srgb, var(--text-primary) 2%, transparent); border-radius: var(--r-lg); }
.atp-shell .zh-picks-head { justify-content: flex-start; gap: 12px; margin-bottom: 18px; }
.atp-shell .zh-picks-head .section-tag { font-size: .68rem; letter-spacing: .14em; }
.atp-shell .zh-picks-sub { font-size: .84rem; color: var(--text-secondary); }
.atp-shell .zh-picks-head .zh-chips { margin-left: auto; gap: 4px; }
.atp-shell .zh-picks-tab { padding: 5px 12px; }
.atp-shell .zh-picks-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-top: 0; }
.atp-shell .zh-pick { border-radius: 10px; padding: 16px 18px; gap: 12px; }
.atp-shell .zh-pick-top { gap: 8px; flex-wrap: wrap; }
.atp-shell .zh-pick-top strong { font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.atp-shell .zh-pick .zh-pick-dir { font-weight: 700; letter-spacing: .06em; border-radius: var(--r-sm); padding: 3px 8px; text-transform: none; border-color: transparent; }
.atp-shell .zh-pick .zh-pick-long { background: color-mix(in srgb, var(--positive) 15%, transparent); }
.atp-shell .zh-pick .zh-pick-short { background: color-mix(in srgb, var(--negative) 15%, transparent); }
.atp-shell .zh-pick-grade, .atp-shell .zh-pick-tfs { font-family: var(--font-mono); font-size: .62rem; padding: 3px 7px; border-radius: var(--r-sm); }
.atp-shell .zh-pick-grade { border: 1px solid var(--line-sep); color: var(--text-secondary); background: none; font-weight: 400; line-height: 1.4; }
.atp-shell .zh-pick-tfs { border: 1px solid var(--border-accent); color: var(--green-primary); }
.atp-shell .zh-pick-legs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 10px; margin: 0; padding: 12px 0;
                           border-top: 1px solid var(--line-row); border-bottom: 1px solid var(--line-row); }
.atp-shell .zh-pick-legs dt { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); font-weight: 400; }
.atp-shell .zh-pick-legs dd { margin: 0; font-family: var(--font-mono); font-size: .84rem; }
.atp-shell .zh-pick-legs dd:not(.zh-rrr) { color: var(--text-primary); }   /* RRR keeps its good/ok/low colours */
.atp-shell .zh-pick-legs .zh-leg-sl { color: var(--negative); }
.atp-shell .zh-pick-legs .zh-leg-tp { color: var(--green-primary); }
.atp-shell .zh-pick-legs .zh-leg-rrr { font-weight: 700; }
.atp-shell .zh-pick-why { font-size: .84rem; line-height: 1.6; text-wrap: pretty; }
.atp-shell .zh-pick-open { margin-top: auto; padding: 0; border: 0; background: none; font-family: var(--font-mono); font-size: .72rem; }
.atp-shell .zh-pick-open:hover { background: none; text-decoration: underline; }
.atp-shell .zh-picks-foot { margin: 16px 0 0; font-size: .74rem; color: var(--text-muted); }
.atp-shell .zh-picks-foot a { color: var(--text-muted); text-decoration: underline; }

/* Controls — two labelled rows in the sticky bar */
.atp-shell .zh-controls.atp-ctlbar { margin-top: 28px; }
.atp-shell .zh-controls .zh-chips { display: inline-flex; gap: 4px; align-items: center; }
.atp-shell .zh-controls .zh-chip { padding: 5px 11px; }
.atp-shell .zh-controls [data-dir] { padding: 5px 14px; }
.atp-shell .zh-controls .zh-sel-label { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.atp-shell .zh-zone-chips .zh-chip { font-size: .66rem; padding: 4px 10px; }
.atp-ctl-sep-sm { height: 16px; margin: 0 3px; }
.atp-shell .zh-controls .os-search input { font-size: .72rem; padding: 6px 14px; border-radius: 100px; }
.atp-shell .zh-controls .os-count { font-family: var(--font-mono); font-size: .68rem; color: var(--text-muted); }

/* Table + chart side by side; the chart column pins under the two-row bar */
.atp-shell .zh-layout { gap: 5px; margin-top: 20px; }
.atp-shell .zh-table-outer.atp-tablescroll { margin-top: 0; max-height: min(72vh, 780px); }
.atp-shell .zh-table { font-size: .78rem; min-width: 900px; }
.atp-shell .zh-table thead th { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.atp-shell .zh-table th:first-child, .atp-shell .zh-table td:first-child { padding: 10px 16px; min-width: 170px; }
.atp-shell .zh-table td { padding: 10px 12px; font-size: .76rem; white-space: nowrap; }
.atp-shell .zh-table th:not(:first-child), .atp-shell .zh-table td:not(:first-child) { border-right: 1px solid var(--line-faint); }
.atp-shell .zh-table th:nth-child(4), .atp-shell .zh-table td:nth-child(4),
.atp-shell .zh-table th:nth-child(5), .atp-shell .zh-table td:nth-child(5),
.atp-shell .zh-table th:nth-child(8), .atp-shell .zh-table td:nth-child(8),
.atp-shell .zh-table th:nth-child(12), .atp-shell .zh-table td:nth-child(12) { border-right: 1px solid var(--line-strong); }
/* Alignment: numbers right, bias and ×TF centred, zones left (mock). */
.atp-shell .zh-table th:nth-child(2), .atp-shell .zh-table td:nth-child(2), .atp-shell .zh-table th:nth-child(3), .atp-shell .zh-table td:nth-child(3),
.atp-shell .zh-table th:nth-child(4), .atp-shell .zh-table td:nth-child(4),
.atp-shell .zh-table th:nth-child(n+9), .atp-shell .zh-table td:nth-child(n+9) { text-align: right; }
.atp-shell .zh-table th:nth-child(6), .atp-shell .zh-table td:nth-child(6), .atp-shell .zh-table th:nth-child(7), .atp-shell .zh-table td:nth-child(7) { text-align: left; }
.atp-shell .zh-table td:nth-child(2), .atp-shell .zh-table td:nth-child(9) { color: var(--text-primary); }
.atp-shell .zh-table td:nth-child(10) { color: var(--negative); }
.atp-shell .zh-table td:nth-child(11) { color: var(--green-primary); }
.atp-shell .zh-table td:nth-child(6), .atp-shell .zh-table td:nth-child(7) { color: var(--amber); }
.atp-shell .zh-table .coin-logo, .atp-shell .zh-table .coin-logo-ph { width: 20px; height: 20px; border-radius: 50%; }
.atp-shell .zh-table .sc-asset { gap: 9px; font-size: .82rem; }
.atp-shell .zh-chart-panel { top: 180px; padding: 14px; background: var(--bg-surface); }

/* Chart toolbar */
.atp-shell .zh-chart-head { justify-content: flex-start; gap: 10px; margin-bottom: 12px; }
.atp-shell .zh-pair-heading { font-family: var(--font-mono); font-size: .95rem; font-weight: 700; color: var(--text-primary); }
.atp-shell .zh-chart-chg { font-family: var(--font-mono); font-size: .8rem; color: var(--text-secondary); }
.atp-shell .zh-chart-chg.is-up { color: var(--green-primary); }
.atp-shell .zh-chart-chg.is-down { color: var(--negative); }
.atp-shell .zh-chart-tools { margin-left: 0; gap: 3px; justify-content: flex-start; }   /* left-aligned (GTP 2026-09-18) */
.atp-shell .zh-chart-tools .zh-chip { font-size: .64rem; padding: 4px 9px; }
.atp-shell .zh-chart-tools .zh-chip-icon { font-family: var(--font-mono); border-radius: 6px; border-color: var(--line-sep); margin-left: 4px; }
.atp-shell .zh-chart-pair { font-family: var(--font-mono); font-size: .64rem; color: var(--text-muted); }
.atp-shell .zh-chart { height: 380px; border: 1px solid var(--line-row); }

/* Legend = layer chips with a 7px swatch in the colour the chart draws */
.atp-shell .zh-legend { gap: 4px; margin-top: 12px; font-size: .62rem; }
.atp-shell .zh-lg { gap: 6px; font-family: var(--font-mono); font-size: .62rem; padding: 4px 9px; border-radius: 100px;
                    border: 1px solid var(--line-sep); color: var(--text-secondary); }
.atp-shell .zh-lg:hover { background: none; border-color: var(--border-accent); }
.atp-shell .zh-lg .zh-sw { width: 7px; height: 7px; margin: 0; border: 0; border-radius: 2px; }
.atp-shell .zh-lg .zh-sw-label { font-size: 0; padding: 0; background: color-mix(in srgb, var(--text-primary) 35%, transparent); }
.atp-shell .zh-lg .zh-sw-ema { background: var(--zh-ema); }
.atp-shell .zh-lg[data-layer="bearish_fvg"] { border-color: color-mix(in srgb, var(--zh-bfvg) 60%, transparent); }
.atp-shell .zh-lg[data-layer="bullish_fvg"] { border-color: color-mix(in srgb, var(--zh-ufvg) 60%, transparent); }
.atp-shell .zh-lg[data-layer="supply_ob"], .atp-shell .zh-lg[data-layer="demand_ob"] { border-color: color-mix(in srgb, var(--zh-ob) 60%, transparent); }
.atp-shell .zh-lg[data-layer="AP"] { border-color: color-mix(in srgb, var(--zh-g-ap) 60%, transparent); }
.atp-shell .zh-lg[data-layer="A"] { border-color: color-mix(in srgb, var(--zh-g-a) 45%, transparent); }
.atp-shell .zh-lg[data-layer="B"] { border-color: color-mix(in srgb, var(--zh-g-b) 50%, transparent); }
.atp-shell .zh-lg[data-layer="entry"] { border-color: color-mix(in srgb, var(--zh-entry) 50%, transparent); }
.atp-shell .zh-lg[data-layer="sl"] { border-color: color-mix(in srgb, var(--negative) 40%, transparent); }
.atp-shell .zh-lg[data-layer="tp"] { border-color: color-mix(in srgb, var(--green-primary) 40%, transparent); }
.atp-shell .zh-lg-grade { padding: 4px 9px; }
.atp-shell .zh-lg-grade .zh-grade { display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none; color: var(--text-secondary);
                                    font-family: var(--font-mono); font-size: .62rem; font-weight: 400; line-height: 1; }
.atp-shell .zh-lg-grade .zh-grade::before { content: ""; width: 7px; height: 7px; border-radius: 2px; }
.atp-shell .zh-lg-grade .zh-grade-AP::before { background: var(--zh-g-ap); }
.atp-shell .zh-lg-grade .zh-grade-A::before { background: var(--zh-g-a); }
.atp-shell .zh-lg-grade .zh-grade-B::before { background: var(--zh-g-b); }
.atp-shell .zh-lg-grade .zh-grade-C::before { background: var(--zh-g-c); }
.atp-shell .zh-legend-help { margin-top: 10px; }
.atp-shell .zh-legend-help summary { display: inline; list-style: none; font-family: var(--font-mono); font-size: .68rem; color: var(--green-primary); }
.atp-shell .zh-legend-help summary::-webkit-details-marker { display: none; }
.atp-shell .zh-legend-help summary .lu { display: none; }
.atp-shell .zh-legend-help summary::before { content: '+ '; }
.atp-shell .zh-legend-help[open] summary::before { content: '− '; }
.atp-shell .zh-legend-help dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px 24px; margin: 12px 0 0;
                                padding: 0; background: none; border: 0; }
.atp-shell .zh-legend-help dt { margin: 0 0 4px; font-family: var(--font-mono); font-size: .7rem; font-weight: 400; color: var(--green-primary); }
.atp-shell .zh-legend-help dd { margin: 0; font-size: .78rem; line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; }

/* ── ProvenAlpha board, page redesign (handoff §2.1, GTP 2026-09-18) ─────────────────────────────────
   Scoped to /provenalpha/ (.atp-shell). Heat tints, direction/level colours unchanged (GTP ruling). The
   table scrolls WITH THE PAGE and its header pins under the control bar (72 nav + 62 bar = 134, measured —
   the README assumed 59; the search box is taller than the chips) — no
   inner scroll container (GTP's explicit choice; the other tool tables scroll inside their panel). */

/* Community read: badge column | narrative + bar + legend */
.atp-shell .pa-read { display: grid; grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px);
                      padding: 1.75rem 2rem; margin: 2.5rem 0 0; border-radius: var(--r-lg); align-items: start; }
.atp-shell .pa-read.is-empty { display: block; }
.atp-shell .pa-read-badge { display: flex; flex-direction: column; gap: .625rem; min-width: 0; text-align: left; }
.atp-shell .pa-read-label { margin: 0; font-family: var(--font-mono); font-size: .65rem; letter-spacing: .14em; color: var(--text-muted); opacity: 1; }
.atp-shell .pa-bias { margin: 0; padding: 0; background: none; font-size: 2rem; font-weight: 700; line-height: 1; letter-spacing: -.01em; }
.atp-shell .pa-read-conf { margin: 0; font-family: var(--font-mono); font-size: .72rem; color: var(--text-muted); opacity: 1; }
.atp-shell .pa-read-conf b { font-size: 1.1rem; font-weight: 400; color: var(--text-primary); margin-right: 4px; }
.pa-meter { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--text-primary) 8%, transparent); overflow: hidden; }
.pa-meter-fill { height: 100%; background: var(--text-muted); }
.pa-bull .pa-meter-fill { background: var(--positive); } .pa-bear .pa-meter-fill { background: var(--negative); }
.pa-mixed .pa-meter-fill { background: color-mix(in srgb, var(--positive), var(--negative)); }
.atp-shell .pa-freshness { margin: 6px 0 0; gap: 8px; }
.atp-shell .pa-freshness .zh-dim { font-family: var(--font-mono); font-size: .68rem; }
.atp-shell .pa-narrative { max-width: 80ch; font-size: .95rem; line-height: 1.7; margin: 0 0 22px; color: var(--text-secondary); text-wrap: pretty; }   /* body copy, not a white headline (GTP 2026-10-06) */
.atp-shell .pa-bar { margin-top: 0; }
.atp-shell .pa-counts { gap: 8px 20px; margin: 14px 0 0; font-family: var(--font-mono); font-size: .74rem; }
.atp-shell .pa-count { display: inline-flex; align-items: center; gap: 7px; padding: 0; background: none; font-weight: 400; }
.pa-sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
.pa-count-long .pa-sw { background: var(--positive); } .pa-count-short .pa-sw { background: var(--negative); }
.pa-count-mixed .pa-sw { background: color-mix(in srgb, var(--positive), var(--negative)); } .pa-count-neutral .pa-sw { background: var(--text-muted); }
.atp-shell .pa-counts-total { margin-left: auto; font-size: .74rem; }

/* Control bar: one row, labelled clusters; renders 62px tall, so the table header pins at 134 */
.atp-shell .pa-controls.atp-ctlbar { margin-top: 32px; padding: 18px 0 12px; gap: 10px; }
.atp-shell .pa-controls .zh-chips { display: inline-flex; gap: 4px; }
.atp-shell .pa-controls .zh-chip { padding: 5px 11px; }
.atp-shell .pa-controls .os-search input { font-size: .72rem; padding: 6px 14px; border-radius: 100px; }
.atp-shell .pa-controls .os-count { font-family: var(--font-mono); font-size: .68rem; margin-left: 14px; }

/* Table: page-scrolled, header pinned under the bar. overflow: clip keeps the rounded panel without
   making it a scroll container (hidden/auto would capture the sticky header). */
.atp-shell .pa-table-outer { margin-top: 20px; overflow: clip; }
.atp-shell .pa-table-outer .pa-table { font-size: .82rem; }
/* 2026-10-06 (GTP): the filter bar stopped pinning on 09-19 (the .zh-controls.atp-ctlbar static rule matches it too),
   so the header pins straight under the 72px navbar — 134px left it floating one bar-height low. */
.atp-shell .pa-table-outer .pa-table thead th { position: sticky; top: 72px; z-index: 3; padding: 11px 12px; color: var(--text-muted); }
.atp-shell .pa-table-outer .pa-table thead th:first-child { z-index: 4; width: 230px; padding: 11px 16px; }
.atp-shell .pa-table-outer .pa-table th:nth-child(2) { width: 96px; } .atp-shell .pa-table-outer .pa-table th:nth-child(3), .atp-shell .pa-table-outer .pa-table th:nth-child(4) { width: 74px; }
.atp-shell .pa-table-outer .pa-table th:nth-child(5) { width: 90px; } .atp-shell .pa-table-outer .pa-table th:nth-child(6) { width: 66px; }
.atp-shell .pa-table-outer .pa-table th:nth-child(7) { width: 118px; } .atp-shell .pa-table-outer .pa-table th:nth-child(9) { width: 250px; } .atp-shell .pa-table-outer .pa-table th:nth-child(10) { width: 72px; }
.atp-shell .pa-table-outer .pa-table th:nth-child(n+7), .atp-shell .pa-table-outer .pa-table td:nth-child(n+7) { padding-left: 16px; padding-right: 16px; }
.atp-shell .pa-table-outer .pa-table td { padding: 12px; vertical-align: middle; }
.atp-shell .pa-table-outer .pa-table td:first-child { padding: 12px 16px; }
/* group dividers before Dir, Mentions, Price, Summary */
.atp-shell .pa-table-outer .pa-table th:nth-child(2), .atp-shell .pa-table-outer .pa-table td:nth-child(2), .atp-shell .pa-table-outer .pa-table th:nth-child(5), .atp-shell .pa-table-outer .pa-table td:nth-child(5),
.atp-shell .pa-table-outer .pa-table th:nth-child(7), .atp-shell .pa-table-outer .pa-table td:nth-child(7), .atp-shell .pa-table-outer .pa-table th:nth-child(8), .atp-shell .pa-table-outer .pa-table td:nth-child(8) { border-left: 1px solid var(--line-row); }
.atp-shell .pa-table-outer .pa-table th:nth-child(n+3):nth-child(-n+7), .atp-shell .pa-table-outer .pa-table td:nth-child(n+3):nth-child(-n+7),
.atp-shell .pa-table-outer .pa-table th:last-child, .atp-shell .pa-table-outer .pa-table td:last-child { text-align: right; }
.atp-shell .pa-table-outer .pa-table .pa-center { text-align: right; }
.atp-shell .pa-table-outer .pa-table td.pa-center, .atp-shell .pa-table-outer .pa-table td:nth-child(7) { color: var(--text-primary); }
.atp-shell .pa-table-outer .pa-table td:last-child { font-size: .72rem; }
.atp-shell .pa-dir { font-size: .62rem; letter-spacing: .06em; padding: 3px 7px; border-radius: var(--r-sm); }
/* Pair cell: 22px logo, ticker, both actions pushed right as 24px bordered squares */
.atp-shell .pa-pair-cell { gap: 10px; }
.atp-shell .pa-pair-cell .sc-asset { gap: 10px; font-size: .84rem; font-weight: 500; }
.atp-shell .pa-pair-cell .coin-logo, .atp-shell .pa-pair-cell .coin-logo-ph { width: 22px; height: 22px; border-radius: 50%; }
.atp-shell .pa-pair-cell .os-pair-actions { margin-left: auto; gap: 6px; }
.atp-shell .pa-pair-cell .zh-chart-btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0;
                                         border-radius: 5px; border-color: var(--line-sep); color: var(--text-muted); }
.atp-shell .pa-pair-cell .zh-chart-btn:hover { color: var(--green-primary); border-color: var(--border-accent); }
.atp-shell .pa-pair-cell .zh-chart-btn .lu { width: 14px; height: 14px; }
/* Summary fills, clamped to 2 lines (max-width: 0 lets the clamp engage in a table cell); levels wrap */
.atp-shell .pa-summary { min-width: 0; max-width: 0; width: auto; }
.atp-shell .pa-summary a { font-size: .82rem; line-height: 1.5; color: var(--text-secondary); opacity: 1; }
.atp-shell .pa-levels { white-space: normal; }
.atp-shell .pa-levels:has(.pa-lvl) { display: flex; flex-wrap: wrap; gap: 4px; }
.atp-shell .pa-lvl { margin: 0; font-family: var(--font-mono); font-size: .68rem; padding: 2px 6px; border-radius: var(--r-sm);
                     border-color: color-mix(in srgb, var(--text-primary) 8%, transparent); }
.atp-shell .pa-hint { margin: 12px 0 0; font-size: .76rem; line-height: 1.6; }
/* Phones/tablets: the 10-column table no longer fits — scroll it sideways (header then scrolls too). */
@media (max-width: 1279.98px) { .atp-shell .pa-table-outer { overflow-x: auto; } .atp-shell .pa-table-outer .pa-table thead th { position: static; } }
/* Phones (GTP 2026-09-23: "no mobile configuration"). Two breaks, both from the redesign's desktop-only
   rules: (1) the read card's 240px badge column squeezed the narrative into a one-word column, and
   (2) the table was squeezed to the screen, so the summary cell (max-width: 0, takes the leftover)
   got ~nothing and wrapped a word per line — rows hundreds of px tall. Now: the card stacks, and
   the table keeps real column widths and scrolls sideways under the pinned Pair column. */
@media (max-width: 767.98px) {
  .atp-shell .pa-read { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 1.25rem 1.1rem; margin-top: 1.5rem; }
  .atp-shell .pa-bias { font-size: 1.6rem; }
  .atp-shell .pa-narrative { font-size: .92rem; line-height: 1.65; margin-bottom: 16px; }
  .atp-shell .pa-counts { gap: 6px 14px; }
  .atp-shell .pa-counts-total { margin-left: 0; flex-basis: 100%; }
  .atp-shell .pa-table-outer .pa-table { min-width: 1400px; }   /* Summary gets ~290px → 2 clamped lines */
  .atp-shell .pa-table-outer .pa-table thead th:first-child { width: 150px; padding: 11px 12px; position: sticky; left: 0; top: auto; z-index: 4; }
  .atp-shell .pa-table-outer .pa-table .sc-asset-quote { display: none; }   /* pinned column: ticker only */
  .atp-shell .pa-table-outer .pa-table .os-detail { display: none; }         /* same URL as the ticker link */
  .atp-shell .pa-table-outer .pa-table td:first-child { padding: 10px 12px; background: var(--bg-surface); }
  .atp-shell .pa-pair-cell, .atp-shell .pa-pair-cell .sc-asset { gap: 7px; }
  .atp-shell .pa-pair-cell .os-pair-actions { gap: 4px; }
  .atp-shell .pa-controls.atp-ctlbar { margin-top: 20px; }
  .atp-shell .pa-channels { padding: 14px 16px; }
}

/* Channels: a card with a multi-column list (~15 rows tall instead of 60) */
.atp-shell .pa-channels { margin-top: 36px; padding: 18px 24px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.atp-shell .pa-channels > summary { list-style: none; display: flex; align-items: center; gap: 12px; font-size: .92rem; font-weight: 500; }
.atp-shell .pa-channels > summary::-webkit-details-marker { display: none; }
.pa-ch-plus { color: var(--green-primary); font-family: var(--font-mono); }
.pa-channels[open] .pa-ch-plus { font-size: 0; } .pa-channels[open] .pa-ch-plus::before { content: '−'; font-size: .92rem; }
.pa-ch-followers { font-family: var(--font-mono); font-size: .72rem; font-weight: 400; color: var(--text-muted); }
.pa-channels-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 32px; margin-top: 1.125rem; }
.pa-channels-row { display: flex; align-items: center; gap: .625rem; padding: .4375rem 0; border-bottom: 1px solid var(--line-row); min-width: 0; }
.pa-channels-row .name { font-size: .82rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-channels-row .followers { margin-left: auto; font-family: var(--font-mono); font-size: .68rem; color: var(--text-muted); white-space: nowrap; }
.pa-channels-row .pa-active-dot { width: 6px; height: 6px; flex: 0 0 auto; }
.pa-active-dot.is-off { background: color-mix(in srgb, var(--text-primary) 12%, transparent); }
.atp-shell .pa-ch-note { margin: 16px 0 0; font-size: .74rem; }

/* ── ProvenAlpha pair page, redesign (handoff §2.2, GTP 2026-09-18) ─────────────────────────────────
   Header row → main column + sticky rail. Direction/level colours unchanged. */
.pa-pair-head { margin: 0; padding: 0 0 24px; border-bottom: 1px solid var(--border); }
.pa-pair-id { gap: 16px; }
.pa-pair-logo { width: 40px; height: 40px; border-radius: 50%; }
.pa-pair-h1 { font-size: 1.9rem; letter-spacing: -.01em; margin: 0; }
.pa-pair-head .pa-dir { font-size: .68rem; letter-spacing: .06em; padding: 4px 9px; border-radius: 5px; }
.pa-pair-div { width: 1px; height: 26px; background: var(--line-sep); }
.pa-pair-price { font-size: 1.5rem; }
.pa-pair-btn { height: 36px; padding: 0 14px; border-radius: var(--r-md) !important; border-color: var(--line-btn); font-size: .82rem; gap: 7px; }
.pa-pair-lede { margin: 16px 0 0; font-size: .88rem; line-height: 1.6; color: var(--text-muted); max-width: 88ch; }
.pa-pair-lede a { color: var(--green-primary); }   /* was Bootstrap blue — no rule reached it */

.pa-pair-layout { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); align-items: flex-start; padding-top: 2rem; }
.pa-pair-main { flex: 1 1 520px; min-width: 0; }
.pa-pair-rail { flex: 1 1 300px; min-width: 0; max-width: 360px; position: sticky; top: 96px; display: flex; flex-direction: column; gap: 1rem; }

.pa-pair-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.pa-pair-sechead .section-tag { margin: 0; letter-spacing: .16em; }
.pa-pair-seccount { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .06em; color: var(--text-muted); text-transform: none; }
.pa-pair-levels, .pa-pair-posts { margin: 0; }
.pa-pair-posts { margin-top: 44px; }

/* Levels: fluid column, percentage widths */
.pa-pair-levels-panel { overflow: hidden; }
.pa-pair-levels .pa-table { font-size: .86rem; }
.pa-pair-levels .pa-table thead th { padding: 10px 16px; color: var(--text-muted); }
.pa-pair-levels .pa-table th:first-child, .pa-pair-levels .pa-table td:first-child { width: 22%; min-width: 110px; text-align: right; padding: 14px 20px; border-right: 0; }
.pa-pair-levels .pa-table thead th:first-child { padding: 10px 20px; }
.pa-pair-levels .pa-table th:nth-child(2) { width: 18%; min-width: 96px; }
.pa-pair-levels .pa-table td { padding: 14px 16px; border-top: 1px solid var(--line-row); }
.pa-pair-levels .pa-table td.num { font-family: var(--font-mono); font-size: .98rem; color: var(--text-primary); }
.pa-pair-levels .pa-lvl { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .06em; padding: 3px 8px; border-radius: var(--r-sm); }
.pa-pair-levels .pa-lvl-note { color: var(--text-secondary); line-height: 1.55; }
/* Phones (GTP 2026-09-23): three columns clipped the quote column off the panel. Each level becomes a
   two-column row — price over its type badge on the left, the full quote on the right. */
@media (max-width: 767.98px) {
  .pa-pair-levels .pa-table thead { display: none; }
  .pa-pair-levels .pa-table, .pa-pair-levels .pa-table tbody { display: block; }
  .pa-pair-levels .pa-table tr { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; row-gap: 6px;
                                 padding: 12px 14px; border-top: 1px solid var(--line-row); }
  .pa-pair-levels .pa-table tbody tr:first-child { border-top: 0; }
  .pa-pair-levels .pa-table td, .pa-pair-levels .pa-table td:first-child { width: auto; min-width: 0; padding: 0; border: 0; text-align: left; }
  .pa-pair-levels .pa-table td:first-child { grid-column: 1; grid-row: 1; font-size: .92rem; }
  .pa-pair-levels .pa-table td:nth-child(2) { grid-column: 1; grid-row: 2; }
  .pa-pair-levels .pa-table td:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; font-size: .8rem; }
}

/* Source posts: the header stays reachable through a long list */
.pa-pair-poststhead { position: sticky; top: 72px; z-index: 20; background: var(--bg-base); padding: 12px 0; margin-bottom: 18px; flex-wrap: wrap; align-items: center; }
.pa-pair-poststhead .zh-chips { gap: 4px; }
.pa-pair-poststhead .zh-chip { padding: 5px 12px; }
.pa-pair-group { margin: 0 0 28px; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-surface); }
.pa-pair-group h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; padding: 12px 20px; background: var(--bg-elevated);
                    border-bottom: 1px solid var(--line-row); font-size: .86rem; font-weight: 500; }
.pa-pair-group h3 a { font-size: .86rem; }
.pa-pair-group .pa-plat { font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: var(--r-sm); }
.pa-grp-name { font-size: .8rem; color: var(--text-secondary); font-weight: 400; }
.pa-grp-cat { font-size: .74rem; color: var(--text-muted); font-weight: 400; }
.pa-grp-count { margin-left: auto; font-family: var(--font-mono); font-size: .72rem; color: var(--text-muted); font-weight: 400; }
/* ▲ bullish / ▼ bearish post counts beside the post count (2026-10-06, GTP) — the day's lean at a glance */
.pa-grp-leans { margin-left: auto; display: inline-flex; gap: 10px; font-family: var(--font-mono); font-size: .72rem; font-weight: 500; }
.pa-grp-leans + .pa-grp-count { margin-left: 6px; }
/* each post is a row: text left, time + open aligned in a column on the right */
.pa-pair-group .pa-pair-post { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 20px;
                               margin: 0; padding: 14px 20px; border: 0; border-bottom: 1px solid var(--line-faint); border-radius: 0; background: none; }
.pa-pair-group .pa-pair-post:last-child { border-bottom: 0; }
.pa-pair-group .pa-pair-post p { flex: 1 1 300px; min-width: 0; margin: 0; font-size: .88rem; line-height: 1.6; color: var(--text-secondary);
                                 overflow-wrap: anywhere; text-wrap: pretty; }
.pa-pair-group .pa-pair-post footer { background: none; border: 0; padding: 0;   /* not the site footer's dark band (global footer rule) */
                                      flex: 0 0 auto; display: flex; align-items: baseline; justify-content: flex-end; gap: 12px; margin: 0;
                                      font-family: var(--font-mono); font-size: .72rem; color: var(--text-muted); white-space: nowrap; }
.pa-pair-disclosure { margin: 32px 0 0; padding-top: 20px; border-top: 1px solid var(--border); font-size: .78rem; line-height: 1.7; max-width: 90ch; }

/* Collapsible source groups (GTP, 21-Sep). Native <details>: the collapse needs no JS, so
   a blocked or failed script costs the chart and the view chips, never the evidence — and
   a closed group is still in the DOM, which is what keeps these pages indexable. Only the
   first group ships open (the template writes `open` on forloop.first). */
.pa-pair-group > summary { display: block; cursor: pointer; list-style: none; }
.pa-pair-group > summary::-webkit-details-marker { display: none; }
.pa-pair-group > summary h3 { border-bottom: 0; }
.pa-pair-group[open] > summary h3 { border-bottom: 1px solid var(--line-row); }
/* the +/- sits after .pa-grp-count, which already has margin-left:auto */
.pa-pair-group > summary h3::after {
  content: '+'; flex: 0 0 18px; width: 18px; height: 18px; margin-left: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: .95rem; line-height: 1; color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: var(--r-sm); }
.pa-pair-group[open] > summary h3::after { content: '\2212'; }   /* U+2212 minus, not a hyphen */
.pa-pair-group > summary:hover h3::after,
.pa-pair-group > summary:focus-visible h3::after { color: var(--green-primary); border-color: var(--green-primary); }
.pa-pair-group > summary:focus-visible { outline: 2px solid var(--green-primary); outline-offset: -2px; }
.pa-grp-handle { font-family: var(--font-mono); color: var(--green-primary); }
/* the handle link moves out of <summary> — a link inside it swallows the toggle click */
.pa-grp-link { margin: 0; padding: 12px 20px 0; font-family: var(--font-mono); font-size: .74rem; }
.pa-grp-link a { color: var(--green-primary); text-decoration: none; }
.pa-grp-link a:hover, .pa-grp-link a:focus-visible { color: var(--green-accent); text-decoration: underline; }

/* The asset chart with the analysts' named levels. Same engine and tokens as
   /zonehunter/chart/ so the two read as one product. */
.pa-pair-chart-sec { margin: 0 0 28px; }
.pa-pair-chart-wrap { position: relative; border: 1px solid var(--border); border-radius: var(--r-lg);
                      overflow: hidden; background: var(--chart-bg); }
.pa-pair-chart { width: 100%; height: 360px; }
.pa-pair-chart-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
                     margin: 0; font-size: .82rem; pointer-events: none; }
.pa-pair-chart-msg[hidden] { display: none; }
@media (max-width: 720px) { .pa-pair-chart { height: 260px; } }

.pa-pair-disclosure a { color: var(--green-primary); }

/* Rail cards */
.pa-pair-rail .pa-pair-read { margin: 0; padding: 20px 22px; background: var(--bg-surface); border: 1px solid var(--border);
                              border-left: 3px solid var(--green-primary); border-radius: var(--r-lg); }
.pa-pair-rail .pa-pair-read .section-tag { margin: 0 0 12px; font-size: .65rem; letter-spacing: .16em; }
.pa-pair-rail .pa-pair-summary { margin: 0; font-size: .94rem; line-height: 1.7; color: var(--text-primary); text-wrap: pretty; }
.pa-pair-consensus { padding: 20px 22px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.pa-rail-label { margin: 0 0 16px; font-family: var(--font-mono) !important; font-size: .65rem; letter-spacing: .16em; text-transform: uppercase;
                 color: var(--text-muted); font-weight: 400; line-height: 1.4; }
.pa-cons-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; font-size: .82rem; color: var(--text-secondary); }
.pa-cons-row b { font-family: var(--font-mono); font-size: .92rem; font-weight: 400; color: var(--text-primary); }
.pa-cons-row b.is-pos { color: var(--positive); } .pa-cons-row b.is-neg { color: var(--negative); }
.pa-pair-consensus .pa-meter { margin-bottom: 16px; }
.pa-pair-consensus .pa-meter-fill { background: var(--green-primary); }
.pa-cz { position: relative; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--text-primary) 8%, transparent); margin-bottom: 18px; }
.pa-cz-tick { position: absolute; left: 50%; top: -3px; width: 1px; height: 10px; background: color-mix(in srgb, var(--text-primary) 18%, transparent); }
.pa-cz-fill { position: absolute; top: 0; height: 100%; border-radius: 2px; }
.pa-cz-fill.is-pos { background: var(--green-primary); } .pa-cz-fill.is-neg { background: var(--negative); }
.pa-cons-meta { display: grid; grid-template-columns: 1fr auto; gap: 10px 12px; margin: 0; padding-top: 16px; border-top: 1px solid var(--border);
                font-family: var(--font-mono); font-size: .74rem; }
.pa-cons-meta dt { color: var(--text-muted); font-weight: 400; }
.pa-cons-meta dd { margin: 0; text-align: right; color: var(--text-primary); }
.pa-cons-meta dd.is-dim { color: var(--text-secondary); }
@media (max-width: 767.98px) { .pa-pair-rail { position: static; max-width: none; } .pa-pair-h1 { font-size: 1.4rem; } .pa-pair-price { font-size: 1.15rem; } }

/* Headings on the pair page: the site forces DM Serif on every h2/h3 (!important) — these are mono labels
   and a sans row header in the design. */
.pa-pair-page h2.section-tag, .pa-pair-rail h2.section-tag { font-family: var(--font-mono) !important; font-size: .68rem; font-weight: 400; line-height: 1.4; letter-spacing: .16em; }
.pa-pair-page .pa-pair-group h3 { font-family: var(--font-body) !important; letter-spacing: 0; line-height: 1.4; }

/* ── Opportunity Screener, page redesign (handoff §2.3, GTP 2026-09-18) ─────────────────────────────
   GTP rulings: control ORDER and LABELS stay as set on 2026-09-15 (Filters → Scenario → Columns On → Venue);
   column-header SIZE stays .74rem; every heat tint stays. Only rows, frames, type and dividers change. */

/* Control bar: two labelled rows, pinned. The wrapper is the sticky element — the controls box is its only
   child, so pinning the inner box would have no room to travel. */
.atp-shell .os-ctl-sticky { position: sticky; top: 72px; z-index: 40; background: var(--bg-base); border-bottom: 1px solid var(--border);
                            margin-top: 32px; padding: 16px 0 12px; }
.atp-shell .os-controls { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 0; }
.atp-shell .os-controls .zh-chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.atp-shell .os-controls .zh-chip { padding: 5px 11px; }
.atp-shell .os-controls .os-ctl-label { margin-right: 6px; }
.atp-shell .os-controls .os-search input { font-size: .72rem; padding: 6px 14px; border-radius: 100px; }
.atp-shell .os-controls .os-count { font-family: var(--font-mono); font-size: .68rem; color: var(--text-muted); }
/* Scenario builder: metric · operator · value · + Add as ONE bordered control */
.os-builder { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid var(--border); border-radius: var(--r-md);
              background: var(--bg-surface); }
.os-builder .os-select, .os-builder .os-input { border: 0; background: transparent; font-family: var(--font-mono); font-size: .7rem; padding: 2px 6px; height: auto; }
.os-builder .os-select { color: var(--text-secondary); }
.os-builder .os-input { color: var(--text-primary); width: 5.5rem; }
.os-builder select[aria-label="Operator"] { color: var(--green-primary); border-left: 1px solid var(--border); border-right: 1px solid var(--border); border-radius: 0; }
.os-builder [data-cond-add] { border: 0; background: var(--green-primary); color: var(--text-inverted); border-radius: 5px; padding: 3px 9px; font-weight: 700; }
.atp-shell .os-cond-bar .os-select[aria-label="Scenarios"] { border: 1px dashed var(--line-btn); border-radius: 100px; background: transparent;
                                                            color: var(--text-muted); font-family: var(--font-mono); font-size: .68rem; padding: 5px 11px; }
.atp-shell .os-cond-bar .os-ctl-sep { display: none; }   /* the dashed Scenarios… chip already reads as a different control */
.atp-shell .os-cond-chips .zh-chip.os-cond { padding: 5px 10px; }
/* Column toggles: a 6px dot, accent when the group is shown */
.atp-shell [data-section-chip] { display: inline-flex; align-items: center; gap: 6px; }
.atp-shell [data-section-chip]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: color-mix(in srgb, var(--text-primary) 14%, transparent); }
.atp-shell [data-section-chip].is-active::before { background: var(--green-primary); }

/* Table: own scrollport, two-tier sticky header (group band + column names), group dividers */
.atp-shell .os-table-outer.atp-tablescroll { margin-top: 20px; max-height: min(74vh, 820px); }
.atp-shell .os-table { font-size: .78rem; }
.atp-shell .os-table thead tr.os-thead-groups th { position: sticky; top: 0; z-index: 3; background: var(--bg-band); padding: 8px 14px;
                                                   font-size: .6rem; letter-spacing: .14em; color: var(--text-muted); border-bottom: 1px solid var(--line-row);
                                                   border-right: 1px solid var(--line-strong); text-align: left; }
.atp-shell .os-table thead tr.os-thead-groups th:first-child { left: 0; z-index: 5; }
.atp-shell .os-table thead th.os-group[data-section="alignment"], .atp-shell .os-table thead th.os-group[data-section="smc"] { color: var(--green-primary); }
.atp-shell .os-table thead th.os-group[data-section="momentum"], .atp-shell .os-table thead th.os-group[data-section="situation"] { color: var(--amber); }
.atp-shell .os-table thead th.os-group[data-section="community"] { color: var(--text-secondary); }
.atp-shell .os-table thead tr + tr th { position: sticky; top: var(--os-band-h, 36px); z-index: 3; padding: 10px 12px; }   /* = rendered group-band height (measured 36.1px) */
.atp-shell .os-table thead tr + tr th:first-child { left: 0; z-index: 5; }
.atp-shell .os-table td { padding: 10px 12px; font-size: .76rem; white-space: nowrap; }
.atp-shell .os-table th:first-child, .atp-shell .os-table td:first-child { padding-left: 16px; padding-right: 16px; min-width: 190px; }
.atp-shell .os-table :is(th, td):not(:first-child) { text-align: right; border-right: 1px solid var(--line-faint); }
.atp-shell .os-table th.sc-col-oi { text-align: center; }   /* the short OI title sat flush right (GTP 2026-10-22) */
.atp-shell .os-table :is(th, td)[data-fmt="badge"], .atp-shell .os-table :is(th, td)[data-fmt="stack"] { text-align: center; }
.atp-shell .os-table :is(th, td)[data-fmt="spark"] { text-align: center; }   /* Mom mini-chart cells */
.atp-shell .os-table :is(th, td)[data-fmt="zone"] { text-align: left; }
.atp-shell .os-table thead tr.os-thead-groups th { text-align: left; }
.atp-shell .os-table :is(th, td):not([data-section="alignment"]) + [data-section="alignment"],
.atp-shell .os-table :is(th, td):not([data-section="momentum"]) + [data-section="momentum"],
.atp-shell .os-table :is(th, td):not([data-section="smc"]) + [data-section="smc"],
.atp-shell .os-table :is(th, td):not([data-section="community"]) + [data-section="community"],
.atp-shell .os-table :is(th, td):not([data-section="situation"]) + [data-section="situation"] { border-left: 1px solid var(--line-strong); }
.atp-shell .os-table .coin-logo, .atp-shell .os-table .coin-logo-ph { width: 20px; height: 20px; border-radius: 50%; }
.atp-shell .os-table .os-td-pair .zh-chart-btn { width: 22px; height: 22px; padding: 0; justify-content: center; align-items: center; border-radius: 5px;
                                                 border-color: var(--line-sep); color: var(--text-muted); }
.atp-shell .os-table .os-td-pair .zh-chart-btn:hover { color: var(--green-primary); border-color: var(--border-accent); }
.atp-shell .os-hint { margin: 12px 0 0; font-size: .76rem; line-height: 1.6; max-width: 110ch; }

/* How to read this table: a card, entries in a grid with their group tag */
.atp-shell .os-legend { margin: 28px 0 0; padding: 18px 24px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.atp-shell .os-legend summary { list-style: none; display: flex; align-items: center; gap: 12px; font-family: var(--font-body); font-size: .92rem;
                                font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-primary); }
.atp-shell .os-legend summary::-webkit-details-marker { display: none; }
.os-legend-plus { color: var(--green-primary); font-family: var(--font-mono); }
.os-legend[open] .os-legend-plus { font-size: 0; } .os-legend[open] .os-legend-plus::before { content: '−'; font-size: .92rem; }
.os-legend-sub { font-family: var(--font-mono); font-size: .72rem; font-weight: 400; color: var(--text-muted); }
.atp-shell .os-legend-list { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px 36px; margin: 20px 0 0; }
.atp-shell .os-legend-item dt { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; font-size: .76rem; font-weight: 400; }
.os-legend-tag { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.atp-shell .os-legend-item dd { font-size: .82rem; line-height: 1.6; text-wrap: pretty; }

/* ── HIP-3 Markets, page redesign (handoff §2.5, GTP 2026-09-18) ────────────────────────────────────
   Existing cell shading (24h heat, OI/volume tiers) unchanged and NOT extended — GTP: shading stays as is. */

/* Deployers: a panel of cards instead of an inline run where the delisted count hit the next name */
.hip3-dexpanel { margin: 32px 0 0; padding: 18px 22px; border: 1px solid color-mix(in srgb, var(--text-primary) 8%, transparent);
                 background: color-mix(in srgb, var(--text-primary) 2%, transparent); border-radius: var(--r-lg); }
.hip3-dexhead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.hip3-dexhead .os-ctl-label { font-size: .62rem; letter-spacing: .14em; }
.hip3-dexkey { font-size: .8rem; color: var(--text-muted); }
.hip3-dexline { margin-left: auto; font-size: .8rem; color: var(--text-secondary); }
.hip3-dexgrid.hip3-dexstrip { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: .5rem; margin: 0; font-size: inherit; }
.hip3-dexcard { display: flex; align-items: baseline; gap: .5rem; padding: .5625rem .75rem; border-radius: var(--r-md); border: 1px solid var(--border); }
.hip3-dexcard.is-live { border-color: var(--border-accent); background: color-mix(in srgb, var(--green-primary) 6%, transparent); }
.hip3-dexcard .n { font-family: var(--font-mono); font-size: .78rem; color: var(--text-muted); }
.hip3-dexcard.is-live .n { color: var(--text-primary); }
.hip3-dexcard .live { margin-left: auto; font-family: var(--font-mono); font-size: .82rem; font-weight: 700; color: var(--text-muted); }
.hip3-dexcard.is-live .live { color: var(--green-primary); }
.hip3-dexcard .dead { margin: 0; font-family: var(--font-mono); font-size: .68rem; color: var(--text-faint); text-decoration: line-through; }

/* Controls */
.atp-shell.hip3-section .zh-controls.atp-ctlbar { margin-top: 28px; }
.atp-shell.hip3-section .zh-controls .zh-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.atp-shell.hip3-section .zh-controls .zh-chip { padding: 5px 11px; display: inline-flex; align-items: center; gap: 6px; }
.atp-shell.hip3-section .zh-controls .os-search input { font-size: .72rem; padding: 6px 14px; border-radius: 100px; }
.atp-shell.hip3-section .zh-controls .os-count { font-family: var(--font-mono); font-size: .68rem; color: var(--text-muted); margin-left: 12px; }
/* Type colour key — the same dot on the chip and on its group header row */
.hip3-dot { display: inline-block; width: 6px; height: 6px; border-radius: 2px; background: var(--text-muted); flex: 0 0 auto; }
.hip3-dot-commodity { background: var(--amber); } .hip3-dot-index { background: var(--green-primary); } .hip3-dot-rates { background: var(--text-secondary); }
.hip3-dot-fx { background: var(--green-accent); } .hip3-dot-equity { background: var(--green-deep); } .hip3-dot-crypto { background: var(--green-primary); }
.hip3-dot-other { background: var(--text-muted); }

/* Table: own scrollport, sticky header + Market column; group rows keep their label in view sideways */
.atp-shell .hip3-table-outer.atp-tablescroll { margin-top: 20px; }
.atp-shell .hip3-table { font-size: .78rem; min-width: 1180px; }
.atp-shell .hip3-table thead th { padding: 10px 12px; }
.atp-shell .hip3-table td { padding: 10px 12px; font-size: .76rem; white-space: nowrap; }
.atp-shell .hip3-table th:first-child, .atp-shell .hip3-table td:first-child { padding-left: 16px; padding-right: 16px; min-width: 190px; }
.atp-shell .hip3-table :is(th, td):not(:first-child) { border-right: 1px solid var(--line-faint); }
.atp-shell .hip3-table .coin-logo { width: 18px; height: 18px; opacity: .85; }
.atp-shell .hip3-table .sc-asset { gap: 9px; }
.atp-shell .hip3-grouphead td { padding: 9px 16px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); position: static; }
.hip3-grouplabel { position: sticky; left: 16px; display: inline-flex; align-items: center; gap: 9px; }
.hip3-grouplabel .hip3-dot { width: 7px; height: 7px; }
.hip3-groupname { font-family: var(--font-display); font-size: .95rem; letter-spacing: .02em; color: var(--text-primary); }
.atp-shell .hip3-grouphead small { margin: 0; font-family: var(--font-mono); font-size: .7rem; color: var(--text-muted); }
/* Links as small bordered buttons; Zones carries the accent */
.atp-shell .hip3-links a { display: inline-block; margin: 0 5px 0 0; padding: 3px 7px; border-radius: 5px; border: 1px solid var(--line-sep);
                           font-family: var(--font-mono); font-size: .62rem; color: var(--text-secondary); text-decoration: none; }
.atp-shell .hip3-links a[href*="zonehunter"] { border-color: var(--border-accent); color: var(--green-primary); }
.atp-shell .hip3-links a:hover { border-color: var(--border-accent); color: var(--green-primary); text-decoration: none; }
.hip3-hint { margin: 12px 0 0; font-size: .76rem; line-height: 1.6; }

/* ── HIP-3 asset page, redesign (handoff §2.6, GTP 2026-09-18) ──────────────────────────────────────
   Rating colours, grade tags and cell shading unchanged (GTP ruling); layout, frames and type only. */
.hip3-market h2.section-tag { font-family: var(--font-display) !important; font-size: 1.5rem; letter-spacing: 0; text-transform: none;
                              color: var(--text-primary); font-weight: 400; line-height: 1.2; margin: 0 0 6px; }
/* Header: identity left, price block right */
.hip3-asset-head { display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; padding: 0 0 24px; border-bottom: 1px solid var(--border); }
.hip3-asset-id { flex: 1 1 440px; min-width: 0; }
.hip3-idrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hip3-asset-icon { width: 30px; height: 30px; opacity: .9; }
.hip3-idrow h1.section-headline { font-family: var(--font-mono) !important; font-size: 1.9rem; font-weight: 700; letter-spacing: -.01em; margin: 0 !important;
                                  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hip3-idrow h1 .hip3-badge { font-size: .68rem; padding: 2px 8px; border-radius: 5px; letter-spacing: 0; }
.hip3-idrow h1 small { font-family: var(--font-mono); font-size: .8rem; font-weight: 400; letter-spacing: 0; }
.hip3-class-chip { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px;
                   border-radius: 5px; border: 1px solid var(--line-sep); color: var(--text-secondary); }
.hip3-asset-desc { margin: 14px 0 0 !important; font-size: .95rem; line-height: 1.65; color: var(--text-secondary); max-width: 72ch; text-wrap: pretty; }
.hip3-asset-price { flex: 0 1 320px; min-width: 260px; display: flex; flex-direction: column; gap: 14px; }
.hip3-asset-price .hip3-hero-price { margin: 0; display: flex; align-items: baseline; gap: 12px; }
.hip3-asset-price .hip3-hero-price b { font-size: 2.4rem; font-weight: 700; line-height: 1; color: var(--text-primary); }
.hip3-asset-price .hip3-hero-price span { font-size: 1rem; }
.hip3-asset-price .hip3-hero-grade { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; text-align: left; }
.hip3-asset-price .hip3-grade-label { display: inline; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; }
.hip3-grade-reason { font-family: var(--font-mono); font-size: .7rem; }
.hip3-history-meter { height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--text-primary) 8%, transparent); overflow: hidden; }
.hip3-history-meter > div { height: 100%; background: var(--amber); }
.hip3-asset-price .hip3-tools-cta { margin: 0; gap: 8px; }
.hip3-asset-price .hip3-tools-cta a { height: 36px; padding: 0 14px; border-radius: var(--r-md) !important; font-size: .82rem; gap: 7px; }
.hip3-asset-price .hip3-tools-cta .btn-primary-v2 { font-weight: 700; }
.hip3-asset-price .hip3-tools-cta .btn-ghost-v2 { border-color: var(--line-btn); }

/* Main column + sticky rail */
.hip3-asset-layout { display: flex; flex-wrap: wrap; gap: clamp(24px, 3vw, 44px); align-items: flex-start; padding-top: 32px; }
.hip3-asset-main { flex: 1 1 560px; min-width: 0; }
.hip3-asset-main > section + section { margin-top: 44px; }
.hip3-asset-rail { flex: 1 1 300px; min-width: 0; max-width: 360px; position: sticky; top: 96px; display: flex; flex-direction: column; gap: 14px; }
.hip3-scorecard > .zh-dim { font-size: .88rem; line-height: 1.6; color: var(--text-muted); max-width: 80ch; margin: 0 0 18px; }
.hip3-scorecard > .zh-dim a { color: var(--green-primary); font-family: var(--font-mono); font-size: .72rem; }

/* Quality rating cards: verdict colour on the top edge, window pinned to the foot so the four align */
.hip3-market .hip3-cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.hip3-market .hip3-card { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; background: var(--bg-surface); border: 1px solid var(--border);
                          border-top: 3px solid var(--text-muted); border-radius: 10px; }
.hip3-market .hip3-rating-good { border-top-color: var(--green-primary); } .hip3-market .hip3-rating-fair { border-top-color: var(--green-accent); }
.hip3-market .hip3-rating-weak { border-top-color: var(--negative); }
.hip3-market .hip3-card h3 { order: 0; margin: 0; font-family: var(--font-mono) !important; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
                             color: var(--text-muted); font-weight: 400; line-height: 1.4; }
.hip3-market .hip3-card-rating { align-self: flex-start; margin: -30px 0 0 auto; padding: 3px 9px; border-radius: 100px; font-family: var(--font-mono);
                                 font-size: .6rem; letter-spacing: .08em; background: color-mix(in srgb, var(--text-primary) 5%, transparent); }
.hip3-market .hip3-rating-good .hip3-card-rating { background: color-mix(in srgb, var(--green-primary) 12%, transparent); }
.hip3-market .hip3-rating-fair .hip3-card-rating { background: color-mix(in srgb, var(--green-accent) 14%, transparent); }
.hip3-market .hip3-rating-weak .hip3-card-rating { background: color-mix(in srgb, var(--negative) 12%, transparent); }
.hip3-market .hip3-card-headline { margin: 0; font-size: 1.45rem; font-weight: 700; line-height: 1.1; color: var(--text-primary); }
.hip3-market .hip3-card-sentence { margin: 0; font-size: .82rem; line-height: 1.6; color: var(--text-secondary); text-wrap: pretty; }
.hip3-market .hip3-card-context { margin: 0; padding: 0; border: 0; font-size: .78rem; line-height: 1.55; }
.hip3-market .hip3-card-sample { margin: auto 0 0; padding-top: 10px; border-top: 1px solid var(--line-row); font-family: var(--font-mono); font-size: .65rem; color: var(--text-faint); }

/* Reopens: caveat as a notice, pill for "Beat the close?", CSV as a button beside the licence */
.hip3-reopens > .zh-dim { font-size: .88rem; line-height: 1.6; color: var(--text-muted); max-width: 80ch; margin: 0 0 16px; }
.hip3-notice { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px; padding: 14px 16px;
               background: color-mix(in srgb, var(--green-accent) 6%, transparent); border: 1px solid color-mix(in srgb, var(--green-accent) 28%, transparent); border-radius: 10px; }
.hip3-notice-icon { flex: 0 0 auto; margin-top: 2px; color: var(--green-accent); display: inline-flex; }
.hip3-market .hip3-reopen-summary { margin: 0; font-size: .84rem; line-height: 1.6; color: var(--text-secondary); }
.hip3-market .hip3-reopen-summary b { color: var(--text-primary); }
.hip3-reopens .hip3-table-outer { overflow-x: auto; }
.hip3-reopens .hip3-table { font-size: .82rem; min-width: 640px; width: 100%; }
.hip3-reopens .hip3-table:not(.scanner-table) th { padding: 10px 14px; background: var(--bg-elevated); }
.hip3-reopens .hip3-table:not(.scanner-table) td { padding: 13px 14px; border-top: 1px solid var(--line-row); font-family: var(--font-mono); }
.hip3-reopens .hip3-table :is(th, td):nth-child(n+3):nth-child(-n+5) { text-align: right; }
.hip3-reopens .hip3-table :is(th, td):nth-child(6) { text-align: center; }
.hip3-beat { font-family: var(--font-mono); font-size: .68rem; padding: 3px 10px; border-radius: 100px; color: var(--text-muted); }
.hip3-beat.is-no { background: color-mix(in srgb, var(--negative) 15%, transparent); color: var(--negative); }
.hip3-beat.is-yes { background: color-mix(in srgb, var(--positive) 15%, transparent); color: var(--positive); }
.hip3-market .hip3-dataset { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin-top: 14px; }
.hip3-csv-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: .72rem; padding: 7px 13px;
                border-radius: var(--r-md); border: 1px solid var(--border-accent); color: var(--green-primary); text-decoration: none; }
.hip3-csv-btn:hover { background: var(--glow-green); color: var(--green-primary); }
.hip3-market .hip3-dataset small { flex: 1 1 320px; min-width: 0; font-size: .76rem; line-height: 1.6; }

/* 90-day charts, now in the main flow */
.hip3-market .hip3-charts { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 16px; }
.hip3-market .hip3-charts figure { margin: 0; padding: 16px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; }
.hip3-market .hip3-charts figcaption { margin: 0 0 12px; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.hip3-market .hip3-chart { height: 150px; border: 1px solid var(--line-row); }

/* Contract mechanics: two columns of labelled terms */
.hip3-market .hip3-mechanics-list { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2px 32px; margin-top: 16px; }
.hip3-market .hip3-mechanics-list > div { padding: 16px 0; border-bottom: 1px solid var(--border); }
.hip3-market .hip3-mechanics-list dt { margin-bottom: 6px; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
                                       color: var(--green-primary); font-weight: 400; }
.hip3-market .hip3-mechanics-list dd { margin: 0; font-size: .86rem; line-height: 1.65; color: var(--text-secondary); text-wrap: pretty; }

/* Rail: venue stats card (mono dl, signed values coloured), weekend meter, links; alert card below */
.hip3-railcard { padding: 20px 22px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.hip3-railcard h2.section-tag { font-family: var(--font-mono) !important; font-size: .65rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 14px; }
.hip3-market .hip3-stats { display: grid; grid-template-columns: 1fr auto; gap: 11px 12px; margin: 0; font-family: var(--font-mono); font-size: .76rem; }
.hip3-market .hip3-stats > div { display: contents; }
.hip3-market .hip3-stats dt { color: var(--text-muted); font-size: .76rem; text-transform: none; font-weight: 400; }
.hip3-market .hip3-stats dd { margin: 0; text-align: right; font-size: .76rem; color: var(--text-primary); }
.hip3-market .hip3-stats dd.is-neg { color: var(--negative); } .hip3-market .hip3-stats dd.is-pos { color: var(--positive); }
.hip3-market .hip3-weekend { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--border); }
.hip3-weekend-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; font-size: .8rem; color: var(--text-secondary); }
.hip3-weekend-row b { font-family: var(--font-mono); font-size: .86rem; font-weight: 400; color: var(--amber); }
.hip3-weekend-meter { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--text-primary) 8%, transparent); overflow: hidden; margin-bottom: 8px; }
.hip3-weekend-meter > div { height: 100%; background: var(--amber); }
.hip3-market .hip3-weekend p { margin: 0; font-size: .76rem; line-height: 1.55; }
.hip3-rail-links { display: flex; flex-direction: column; gap: 6px; margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--border); }
.hip3-market .hip3-rail-links a { margin: 0; font-family: var(--font-mono); font-size: .74rem; }
.hip3-railcard .hip3-disclosure, .hip3-railcard .hip3-siblings, .hip3-railcard .hip3-canonical, .hip3-rail-note { margin: 12px 0 0; font-size: .74rem; line-height: 1.55; }
@media (max-width: 767.98px) { .hip3-asset-rail { position: static; max-width: none; } .hip3-idrow h1.section-headline { font-size: 1.4rem; }
                               .hip3-asset-price .hip3-hero-price b { font-size: 1.8rem; } }
/* Rail links are plain links — the tracker's bordered TV/Zones buttons (.atp-shell .hip3-links a) must not reach them. */
.hip3-market .hip3-rail-links a[href] { display: inline; padding: 0; border: 0; border-radius: 0; color: var(--green-primary); }
.hip3-market .hip3-rail-links a[href]:hover { text-decoration: underline; background: none; }
/* Grade state as a status chip with a dot ("Not graded" = muted dot); a letter grade keeps its coloured tag, smaller. */
.hip3-asset-price .hip3-grade { width: 1.8rem; height: 1.8rem; font-size: 1rem; border-radius: var(--r-md); }
.hip3-asset-price .hip3-grade-none { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hip3-asset-price .hip3-hero-grade:has(.hip3-grade-none) .hip3-grade-label { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px;
                                                                             border: 1px solid var(--line-sep); border-radius: 100px; color: var(--text-muted); }
.hip3-asset-price .hip3-hero-grade:has(.hip3-grade-none) .hip3-grade-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
.hip3-hero-price .is-neg { color: var(--negative); } .hip3-hero-price .is-pos { color: var(--positive); }
/* GTP review 2026-09-18: "How this is graded ›" sits right of the heading, not inside the sentence; grade chip and
   history on one line; the two tool buttons side by side. */
.hip3-sechead { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.hip3-sechead h2.section-tag { margin: 0; }
.hip3-graded-link { margin-left: auto; font-family: var(--font-mono); font-size: .72rem; color: var(--green-primary); text-decoration: none; }
.hip3-graded-link:hover { text-decoration: underline; color: var(--green-primary); }
.hip3-asset-price .hip3-hero-grade { flex-wrap: nowrap; }
.hip3-asset-price .hip3-grade-reason { white-space: nowrap; }
.hip3-asset-price .hip3-tools-cta { flex-wrap: nowrap; }
.hip3-asset-price .hip3-tools-cta a { white-space: nowrap; }

/* ── Zone Alerts, page redesign (handoff §2.7, GTP 2026-09-18) ──────────────────────────────────────
   No table here, so the container narrows to 1280px; setup + facts left, the example as a Telegram message right. */
.alerts-section .alerts-container { max-width: calc(1280px + 2 * var(--page-gutter)); }
.alerts-section .alerts-head { display: block; padding-top: 12px; margin: 0; }
.alerts-section .alerts-head .zh-hero { max-width: 62ch; }
.alerts-section .alerts-head h1.section-headline { font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.08; margin: 0 0 16px !important; }
.alerts-section .alerts-head .section-desc { font-size: 1.02rem; line-height: 1.65; max-width: none; }
.alerts-layout { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); align-items: flex-start; padding-top: 44px; }
.alerts-left { flex: 1 1 360px; min-width: 0; max-width: 460px; display: flex; flex-direction: column; gap: 20px; }
.alerts-right { flex: 1 1 440px; min-width: 0; }
.alerts-section h2.section-headline-sm { font-family: var(--font-display) !important; font-size: 1.4rem; font-weight: 400; line-height: 1.2; margin: 0 0 16px; }

/* Setup card */
.alerts-setup { padding: 26px 28px; background: var(--bg-surface); border: 1px solid var(--border-accent); border-radius: 14px; }
.alerts-setup-tag { display: block; margin-bottom: 18px; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--green-primary); }
.alerts-field-label { display: block; margin-bottom: 7px; font-size: .8rem; color: var(--text-muted); }
.alerts-setup .alerts-search { max-width: none; margin: 0 0 18px; font-size: inherit; }
.alerts-setup .alerts-search input { margin: 0; padding: 11px 14px; border-radius: 9px; border: 1px solid var(--line-btn); background: var(--bg-elevated);
                                     font-family: var(--font-mono); font-size: .88rem; color: var(--text-primary); }
.alerts-tfs { display: flex; gap: 5px; margin-bottom: 20px; }
.alerts-tfs span { font-family: var(--font-mono); font-size: .7rem; padding: 5px 13px; border-radius: 100px; border: 1px solid var(--border-accent);
                   background: var(--glow-green); color: var(--green-primary); }
.alerts-setup-foot { margin: 12px 0 0; text-align: center; font-family: var(--font-mono); font-size: .68rem; color: var(--text-muted); }

/* What you get / don't */
.alerts-facts .alerts-list { list-style: none; margin: 0; padding: 0; }
.alerts-facts .alerts-list li { display: flex; gap: 13px; align-items: flex-start; margin: 0; padding: 14px 0; border-bottom: 1px solid var(--border);
                                font-size: .88rem; line-height: 1.6; color: var(--text-secondary); }
.alerts-mark { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; }
.alerts-mark.is-yes { background: var(--glow-green); border: 1px solid var(--border-accent); color: var(--green-primary); }
.alerts-mark.is-no { background: color-mix(in srgb, var(--negative) 12%, transparent); border: 1px solid color-mix(in srgb, var(--negative) 35%, transparent); color: var(--negative); }
.alerts-note { margin: 18px 0 0; font-size: .78rem; line-height: 1.6; }
.alerts-facts .alerts-note { color: var(--text-secondary); }

/* The example, as a Telegram message */
.alerts-exhead { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.alerts-exhead h2.section-headline-sm { margin: 0; }
.alerts-exhead span { font-family: var(--font-mono); font-size: .68rem; color: var(--text-secondary); }
.alerts-msg { padding: 18px; background: var(--bg-deep); border: 1px solid var(--border); border-radius: 14px;
              box-shadow: 0 12px 34px color-mix(in srgb, var(--text-inverted) 80%, transparent); }
.alerts-msg-from { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--border); font-size: .84rem; }
.alerts-msg-from b { font-weight: 500; color: var(--text-primary); }
.alerts-msg-avatar { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
                     background: color-mix(in srgb, var(--green-primary) 12%, transparent); border: 1px solid var(--border-accent); color: var(--green-primary); }
.alerts-msg-time { margin-left: auto; font-family: var(--font-mono); font-size: .66rem; color: var(--text-secondary); }
.alerts-msg-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 16px 0 12px; }
.alerts-msg-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green-primary); }
.alerts-msg-head b { font-family: var(--font-mono); font-size: 1rem; color: var(--text-primary); }
.alerts-msg-venue, .alerts-msg-zone { font-family: var(--font-mono); font-size: .66rem; padding: 2px 7px; border-radius: var(--r-sm); }
.alerts-msg-venue { border: 1px solid var(--line-sep); color: var(--text-secondary); }
.alerts-msg-zone { background: color-mix(in srgb, var(--positive) 15%, transparent); color: var(--green-primary); }
.alerts-msg-event { font-family: var(--font-mono); font-size: .66rem; color: var(--green-primary); }
.alerts-msg-data { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 12px 16px; margin: 0 0 14px; padding: 14px 16px;
                   background: var(--bg-base); border-radius: 9px; }
.alerts-msg-data dt { margin-bottom: 3px; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); font-weight: 400; }
.alerts-msg-data dd { margin: 0; font-family: var(--font-mono); font-size: .8rem; color: var(--text-primary); }
.alerts-msg-data dd.is-pos { color: var(--positive); } .alerts-msg-data dd.is-neg { color: var(--negative); }
.alerts-msg-read { margin: 0 0 14px; font-size: .88rem; line-height: 1.65; color: var(--text-secondary); text-wrap: pretty; }
.alerts-msg-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.alerts-msg-actions span { font-family: var(--font-mono); font-size: .72rem; padding: 5px 11px; border-radius: 7px; border: 1px solid var(--line-sep); color: var(--text-secondary); }
.alerts-msg-actions span.is-primary { border-color: var(--border-accent); color: var(--green-primary); }
.alerts-msg-actions .alerts-msg-cmd { margin-left: auto; align-self: center; padding: 0; border: 0; font-size: .68rem; color: var(--text-secondary); }
.alerts-msg-disc { margin: 12px 0 0; font-family: var(--font-mono); font-size: .66rem; color: var(--text-secondary); }
.alerts-msg-controls { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; margin-top: 2px; border-top: 1px solid var(--border); }
.alerts-msg-controls span { font-family: var(--font-mono); font-size: .72rem; padding: 5px 11px; border-radius: 7px; border: 1px solid var(--line-sep); color: var(--text-secondary); }

/* /alerts/ hub (spec 2026-10-02 §6): more sources, control block */
.alerts-card-title { display: flex; align-items: center; gap: 9px; margin: 44px 0 0 !important; }
.alerts-card-title + .alerts-layout { padding-top: 20px; }
.alerts-badge { display: inline-block; padding: 2px 9px; border-radius: 100px; border: 1px solid var(--line-sep); font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); vertical-align: middle; }
.alerts-badge.is-live { border-color: var(--border-accent); background: var(--glow-green); color: var(--green-primary); }
.alerts-soon, .alerts-control { padding-top: 56px; }
.alerts-soon-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.alerts-soon-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 14px; }
.alerts-soon-card h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 1rem; color: var(--text-primary); }
.alerts-soon-card p { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--text-secondary); }
.alerts-soon-card .alerts-soon-sample { font-family: var(--font-mono); font-size: .72rem; color: var(--text-secondary); border-left: 2px solid var(--border-accent); padding-left: 10px; }
.alerts-soon-card .btn-ghost-v2 { margin-top: auto; }
.alerts-control-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 6px 32px; }
.alerts-control-list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: .9rem; line-height: 1.6; color: var(--text-secondary); }
.alerts-control-list li b { color: var(--text-primary); font-weight: 600; }
.alerts-control-list .lu { flex: 0 0 auto; margin-top: 3px; color: var(--green-primary); }
@media (min-width: 768px) { .alerts-control-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 992px) { .alerts-soon-grid { grid-template-columns: repeat(3, 1fr); } }

/* ── Indicators, page redesign (handoff §2.8, GTP 2026-09-18) ───────────────────────────────────────
   Container 1480. One card anatomy repeated; FlowMatrix Lite (free) differs on purpose. */
.ind-page { padding: 72px 0 72px; }
.ind-page .ind-container { max-width: calc(1480px + 2 * var(--page-gutter)); }
.ind-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: clamp(24px, 4vw, 64px); align-items: end; padding-top: 12px; }
.ind-head-copy { max-width: 62ch; }
.ind-head .section-tag { margin-bottom: 14px; }
.ind-head h1.section-headline { font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 16px; color: var(--text-primary); }
.ind-head .section-desc { font-size: 1.02rem; line-height: 1.65; max-width: none; margin: 0; }
.ind-claims { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ind-claims li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 9px; border: 1px solid var(--border);
                 background: var(--bg-surface); font-size: .82rem; color: var(--text-secondary); }
.ind-claims li::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--green-primary); }
.ind-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 36px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.ind-filter .zh-chip { padding: 5px 12px; }
.ind-filter-note { margin-left: auto; font-family: var(--font-mono); font-size: .68rem; color: var(--text-muted); }
.ind-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 20px; margin-top: 24px; }
.indp-card { display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
            transition: border-color .2s; }
.indp-card:hover { border-color: var(--border-accent); }
.indp-card.is-free { border-color: color-mix(in srgb, var(--green-accent) 32%, transparent); }
.ind-cover { position: relative; aspect-ratio: 16 / 9; margin: 0; background: var(--bg-elevated); overflow: hidden; }   /* full-bleed: top/left/right flush with the card (mock, GTP 2026-09-18) */
.ind-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ind-cat, .indp-price { position: absolute; top: 12px; font-family: var(--font-mono); border-radius: 6px; padding: 4px 9px;
                       background: color-mix(in srgb, var(--bg-deep) 82%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ind-cat { left: 12px; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.indp-price { right: 12px; font-size: .78rem; font-weight: 700; padding: 4px 10px; color: var(--text-primary); }
.indp-card.is-free .indp-price { background: var(--green-accent); color: var(--text-inverted); }
.ind-body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.ind-body h3 { margin: 0 0 7px; font-family: var(--font-display) !important; font-size: 1.3rem; font-weight: 400; line-height: 1.2; color: var(--text-primary); }
.ind-tagline { margin: 0 0 16px; font-size: .88rem; line-height: 1.5; color: var(--green-primary); }
.ind-benefits { display: flex; flex-direction: column; gap: 11px; margin: 0 0 20px; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--border); }
.ind-benefits li { display: flex; gap: 10px; align-items: flex-start; font-size: .84rem; line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; }
.ind-benefits .lu { flex: 0 0 auto; margin-top: 3px; color: var(--green-primary); stroke-width: 2.5; }
.ind-cta-btn { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border-radius: 9px;
               background: var(--green-primary); border: 1px solid var(--green-primary); color: var(--text-inverted); font-size: .88rem; font-weight: 700; text-decoration: none; }
.ind-cta-btn:hover { background: var(--green-deep); border-color: var(--green-deep); color: var(--text-primary); }
.ind-cta-btn.is-ghost { background: transparent; border-color: var(--green-accent); color: var(--green-accent); }
.ind-cta-btn.is-ghost:hover { background: color-mix(in srgb, var(--green-accent) 10%, transparent); color: var(--green-accent); }
.ind-foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 40px; }
.ind-foot-card { display: flex; gap: 16px; align-items: flex-start; padding: 26px 28px; background: var(--bg-surface); border: 1px solid var(--border);
                 border-radius: 14px; color: inherit; text-decoration: none; }
.ind-foot-card.is-accent { border-color: var(--border-accent); }
a.ind-foot-card { align-items: center; }
a.ind-foot-card:hover { border-color: var(--border-accent); background: var(--bg-elevated); color: inherit; }
.ind-foot-card .how-icon-wrap { flex: 0 0 auto; margin: 0; }
.ind-foot-card h4 { margin: 0 0 7px; font-family: var(--font-display) !important; font-size: 1.2rem; font-weight: 400; line-height: 1.2; color: var(--text-primary); }
.ind-foot-card p { margin: 0; font-size: .88rem; line-height: 1.65; color: var(--text-secondary); }
.ind-foot-arrow { margin-left: auto; font-family: var(--font-mono); font-size: .8rem; color: var(--green-primary); }
@media (max-width: 767.98px) { .ind-head { grid-template-columns: minmax(0, 1fr); } .ind-grid { grid-template-columns: minmax(0, 1fr); } }

/* 2026-09-19 (GTP review) — Screener + ZoneHunter Live.
   Filters no longer pin: two rows are too tall on phones and smaller laptops, and pinned they covered
   the table header. The table's two-tier header, pinned inside the table's own scrollport, is the only
   sticky thing; the scrollport never grows taller than the viewport under the 72px navbar, so the
   header stays in view while you're in the table. The ZoneHunter chart panel stops following too.
   ProvenAlpha + HIP-3 keep their pinned bars (§2.1, untouched). */
.atp-shell .os-ctl-sticky, .atp-shell .zh-controls.atp-ctlbar { position: static; }
.atp-shell .zh-chart-panel { position: static; }
.atp-shell .os-table-outer.atp-tablescroll { max-height: min(74vh, calc(100vh - 96px), 820px); }
.atp-shell .zh-table-outer.atp-tablescroll { max-height: min(72vh, calc(100vh - 96px), 780px); }
[id="os-data"], [id="os-alerts"], [id="os-feedback"], [id="zh-data"], [id="zh-chart-panel"], [id="zh-alerts"], [id="zh-feedback"] { scroll-margin-top: 88px; }

/* Quick links: priority one (icon + label, bordered) above the reading links (priority two, unchanged,
   one line from tablet up). */
.atp-quicklinks { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }
.atp-quicklinks a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line-btn);
                    border-radius: var(--r-md); background: var(--bg-surface); color: var(--text-primary);
                    font-size: .85rem; font-weight: 600; text-decoration: none; transition: border-color .15s; }
.atp-quicklinks a .lu { color: var(--green-primary); flex: 0 0 auto; }
.atp-quicklinks a:hover, .atp-quicklinks a:focus-visible { border-color: var(--green-primary); }
.atp-quicklinks + .atp-links { margin-top: 14px; }
@media (min-width: 768px) { .atp-quicklinks + .atp-links { flex-wrap: nowrap; white-space: nowrap; } }
/* In-box sticky header offset, pushed down under the navbar by static/js/table_head_pin.js. */
.atp-shell .os-table thead tr.os-thead-groups th { top: var(--pin-y, 0px); }
.atp-shell .os-table thead tr + tr th { top: calc(var(--os-band-h, 36px) + var(--pin-y, 0px)); }
/* The filter row sits between the section band and the column names (2026-10-23); table_head_pin.js measures both
   heights into --os-band-h / --os-flt-h so the three sticky rows stack without a gap on desktop and phone. */
.atp-shell .os-table thead tr.os-thead-filter th { padding: 4px 6px; text-align: center; font-size: .6rem; }
.atp-shell .os-table thead tr.os-thead-filter th.os-flt-lead { text-align: left; padding-left: 16px; }
.atp-shell .os-table thead tr.os-thead-cols th { top: calc(var(--os-band-h, 36px) + var(--os-flt-h, 29px) + var(--pin-y, 0px)); }
.atp-shell .zh-table thead th { top: var(--pin-y, 0px); }

/* ── Market overview + Mom mini-charts (2026-09-28, GTP) ─────────────────────────────── */
.os-overview { margin: 24px 0 8px; padding: 16px 18px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; }
.os-ov-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.os-ov-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }   /* ZoneHunter card head: eyebrow + sub (2026-09-28) */
.os-ov-title .section-tag { margin: 0; }
.os-ov-head { font-size: .8rem; color: var(--text-primary); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.os-ov-split { color: var(--text-secondary); font-size: .74rem; }
.os-ov-ctl { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 10px 0; }
.os-ov-chart { position: relative; height: 220px; cursor: crosshair; }
.os-ov-chart svg { display: block; width: 100%; height: 100%; }
.os-ov-band { fill: var(--ov-c); stroke: var(--bg-surface); stroke-width: .5; }
.os-ov-x { stroke: var(--text-secondary); stroke-width: 1; }
.os-ov-axis { position: relative; height: 18px; margin-top: 4px; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: .62rem; color: var(--text-secondary); }
.os-ov-tick { position: absolute; top: 3px; transform: translateX(-50%); white-space: nowrap; }
.os-ov-tick::before { content: ""; position: absolute; left: 50%; top: -7px; height: 4px; border-left: 1px solid var(--border); }
.os-ov-tip { position: absolute; top: 6px; min-width: 160px; padding: 6px 8px; background: var(--bg-band); border: 1px solid var(--border); border-radius: 6px; font-size: .72rem; color: var(--text-primary); pointer-events: none; }
.os-ov-tip-t { color: var(--text-secondary); margin-bottom: 2px; }
.os-ov-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 0; margin: 10px 0 0; font-size: .72rem; color: var(--text-secondary); }
.os-ov-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; background: var(--ov-c); }
.os-ov-pumping { --ov-c: var(--ov-pumping); }
.os-ov-pulling-back { --ov-c: var(--ov-pulling-back); }
.os-ov-resuming-up { --ov-c: var(--ov-resuming-up); }
.os-ov-turning-up { --ov-c: var(--ov-turning-up); }
.os-ov-turning-down { --ov-c: var(--ov-turning-down); }
.os-ov-resuming-down { --ov-c: var(--ov-resuming-down); }
.os-ov-bouncing { --ov-c: var(--ov-bouncing); }
.os-ov-falling { --ov-c: var(--ov-falling); }
/* ProvenAlpha community bias over time (2026-10-06, GTP) — same card, the board's direction colours */
.pa-ov-long { --ov-c: var(--positive); } .pa-ov-short { --ov-c: var(--negative); }
.pa-ov-mixed { --ov-c: color-mix(in srgb, var(--positive), var(--negative)); } .pa-ov-neutral { --ov-c: var(--text-muted); }
/* Round 2 (same day): the chart is the top strip of the Community bias read card, not a card of its own. */
.atp-shell .pa-read:has(> .pa-bias-ov) { row-gap: 26px; }   /* chart strip → read: tighter than the column gap */
.atp-shell .pa-read > .pa-bias-ov { grid-column: 1 / -1; padding-bottom: 16px; border-bottom: 1px solid var(--border); min-width: 0; }
.pa-bias-ov .os-ov-top { align-items: center; }
.pa-bias-ov .os-ov-title .pa-read-label { margin: 0; }
.pa-bias-ov .os-ov-ctl { gap: 8px 14px; justify-content: flex-start; }
.pa-bias-ov .os-ov-ctl .zh-chip { padding: 3px 10px; font-size: .68rem; }
.pa-bias-ov .os-ov-band { fill-opacity: .82; }
.pa-bias-ov .os-ov-chart { height: 240px; }   /* GTP 2026-10-06: taller vs the text below */
.pa-bias-ov .os-ov-legend { margin-top: 8px; }
.pa-ov-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 3; }
.pa-ov-ylab { position: absolute; left: 2px; transform: translateY(2px); font-family: var(--font-mono); font-size: .6rem; color: var(--text-muted); pointer-events: none; }
.pa-bias-ov-note { margin: 12px 0 4px; font-size: .78rem; }
@media (max-width: 767.98px) {
  .pa-bias-ov .os-ov-chart { height: 170px; }
  .pa-bias-ov .os-ov-head { font-size: .74rem; }
  .pa-bias-ov .os-ov-ctl { gap: 6px 10px; }
}
.pa-bias-chip { display: inline-block; padding: 1px 7px; border-radius: var(--r-sm); font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; border: 1px solid currentColor; }
.pa-bias-chip.pa-bull { color: var(--positive); } .pa-bias-chip.pa-bear { color: var(--negative); }
.pa-bias-chip.pa-mixed { color: color-mix(in srgb, var(--positive), var(--negative)); } .pa-bias-chip.pa-neu { color: var(--text-muted); }
.os-table td.os-spark { padding-top: 2px; padding-bottom: 2px; }
.os-table td.os-spark svg { display: inline-block; vertical-align: middle; }

@media (max-width: 767.98px) {
  /* screener phone (2026-09-28) */
  /* Same specificity as the .atp-shell .os-table rules above (and the sticky-header rules just
     above this block), so it finally wins — the older phone block at ~2043 lost to them. */
  .atp-shell .os-table { font-size: .68rem; }
  .atp-shell .os-table td { padding: 4px 6px; font-size: .68rem; font-variant-numeric: tabular-nums; }
  .atp-shell .os-table thead tr + tr th, .atp-shell .os-table thead tr.os-thead-groups th { padding: 4px 6px; font-size: .6rem; }
  .atp-shell .os-table th:first-child, .atp-shell .os-table td:first-child { padding-left: 6px; padding-right: 4px; min-width: 0; max-width: 112px; }
  .atp-shell .os-table .coin-logo, .atp-shell .os-table .coin-logo-ph { width: 16px; height: 16px; }
  .atp-shell .os-table .sc-asset { gap: 4px; }
  .atp-shell .os-table .sc-asset-name { font-size: .7rem; }
  .atp-shell .os-table .sc-asset-quote { display: none; }
  .atp-shell .os-table .os-fav { display: none; }
  .atp-shell .os-table .os-td-pair .zh-chart-btn { width: 18px; height: 18px; }
  .atp-shell .os-table-outer.atp-tablescroll { margin-top: 12px; }
  .os-overview { margin: 14px 0 6px; padding: 10px 10px; }
  .os-ov-chart { height: 160px; }
  .os-ov-sub { display: none; }
}

/* Tool-page heroes (GTP 2026-09-19): "+ Read More" continues the paragraph's last line; the extra text
   opens below it (main.js). Same mono accent as the old details summary. */
.atp-readmore { display: inline; padding: 0; margin: 0 0 0 4px; border: 0; background: none; cursor: pointer; white-space: nowrap;
                font-family: var(--font-mono); font-size: .8em; color: var(--green-primary); }
.atp-readmore::before { content: '+ '; }
.atp-readmore[aria-expanded="true"]::before { content: '− '; }
.atp-readmore:hover { text-decoration: underline; }
.atp-readmore:focus-visible { outline: 1px solid var(--green-primary); outline-offset: 2px; }
.atp-more p { color: var(--text-secondary); font-size: .9rem; line-height: 1.7; max-width: 78ch; margin: 10px 0 0; }
.atp-more + .atp-quicklinks, .atp-more + .zh-links { margin-top: 20px; }
/* Feedback card outside a FAQ intro column (HIP-3, Prediction Markets): same card as .atp-faq-intro. */
.atp-feedback-sec { padding-top: 0; }
.atp-feedback-sec .atp-feedback-wrap { margin-top: -24px; }   /* sits under Go deeper, not a new block */
.atp-feedback-wrap { max-width: 560px; margin-top: 24px; }
.atp-feedback-wrap .atp-feedback { margin-top: 0; padding: 18px 24px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); }
.atp-feedback-wrap .atp-feedback-head .section-tag { font-size: .62rem; letter-spacing: .14em; color: var(--text-muted); }
.atp-feedback-wrap .atp-feedback-head .lu { display: none; }
.atp-feedback-wrap .atp-feedback-lead { margin: 8px 0 12px; font-size: .84rem; line-height: 1.6; color: var(--text-secondary); }
.atp-feedback-wrap .atp-feedback-btn { background: color-mix(in srgb, var(--text-primary) 6%, transparent); color: var(--text-primary);
                                       font-family: var(--font-mono); font-size: .68rem; font-weight: 400; padding: 6px 14px; border-radius: var(--r-md); }
.atp-feedback-wrap .atp-feedback-btn:hover { background: var(--green-primary); color: var(--text-inverted); transform: none; }
.atp-feedback-wrap .atp-feedback-btn .lu { display: none; }
[id="pa-controls"], [id="pa-channels"], [id="pa-feedback"], [id="hip3-controls"], [id="hip3-feedback"], [id="pm-board"], [id="pm-picks"], [id="pm-feedback"] { scroll-margin-top: 88px; }

/* Analyst-levels legend swatch + the "this pair has none" state (GTP 21-Sep).
   Dimmed rather than disabled: the button still toggles, it simply has nothing to draw,
   and the hover card explains that only ProvenAlpha pairs carry these. */
.zh-sw-pa { border: 0; border-top: 2px dashed var(--positive); border-bottom: 2px dashed var(--negative); height: 8px; background: none; }
.zh-lg.is-empty { opacity: .45; }

/* ProvenAlpha pair page (GTP 2026-10-02): section cards above the chart + one explanation under each
   section header. The explanation replaces the old caption below the chart. */
.pa-pair-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 32px; }
.pa-pair-navcard { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--bg-surface); border: 1px solid var(--border);
                   border-radius: var(--r-md); color: var(--text-primary); text-decoration: none; transition: border-color .15s; }
.pa-pair-navcard:hover, .pa-pair-navcard:focus-visible { border-color: var(--green-primary); color: var(--text-primary); }
.pa-pair-navtitle { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--green-primary); }
.pa-pair-navtitle::after { content: ' \2193'; }
.pa-pair-navsub { font-size: .8rem; line-height: 1.45; color: var(--text-secondary); }
.pa-pair-explain { margin: -4px 0 16px; font-size: .84rem; line-height: 1.65; color: var(--text-secondary); max-width: 80ch; }
.pa-pair-explain .pa-lvl { font-size: .58rem; padding: 2px 6px; }
.pa-pair-explain a { color: var(--green-primary); }
.pa-pair-explain b { color: var(--text-primary); font-weight: 500; }
.pa-pair-chart-sec, .pa-pair-levels, .pa-pair-posts { scroll-margin-top: 88px; }
.pa-pair-levels { margin-top: 44px; }
@media (max-width: 767.98px) {
  .pa-pair-nav { gap: 6px; margin-bottom: 24px; }
  .pa-pair-navcard { padding: 8px 9px; }
  .pa-pair-navtitle { font-size: .6rem; letter-spacing: .04em; }
  .pa-pair-navsub { font-size: .66rem; }
  .pa-pair-explain { font-size: .78rem; }
}

@media (max-width: 767.98px) {
  /* provenalpha board phone (2026-10-02) */
  /* GTP: rows and columns too big on a phone. The screener's phone density (2026-09-28): .68rem text,
     4px/6px cells, 16px logo, narrow pinned Pair column, quote hidden. Summary clamps to ONE line —
     two clamped lines were what made each row ~70px tall. Same specificity as the rules above. */
  .atp-shell .pa-table-outer .pa-table { min-width: 980px; font-size: .68rem; }
  .atp-shell .pa-table-outer .pa-table thead th { padding: 4px 6px; font-size: .6rem; }
  .atp-shell .pa-table-outer .pa-table td { padding: 4px 6px; font-size: .68rem; font-variant-numeric: tabular-nums; }
  .atp-shell .pa-table-outer .pa-table th:nth-child(n+7), .atp-shell .pa-table-outer .pa-table td:nth-child(n+7) { padding-left: 6px; padding-right: 6px; }
  .atp-shell .pa-table-outer .pa-table thead th:first-child { width: 104px; padding: 4px 6px; }
  .atp-shell .pa-table-outer .pa-table td:first-child { padding: 4px 4px 4px 6px; }
  .atp-shell .pa-table-outer .pa-table th:nth-child(2) { width: 72px; }
  .atp-shell .pa-table-outer .pa-table th:nth-child(3), .atp-shell .pa-table-outer .pa-table th:nth-child(4) { width: 50px; }
  .atp-shell .pa-table-outer .pa-table th:nth-child(5) { width: 64px; } .atp-shell .pa-table-outer .pa-table th:nth-child(6) { width: 48px; }
  .atp-shell .pa-table-outer .pa-table th:nth-child(7) { width: 90px; } .atp-shell .pa-table-outer .pa-table th:nth-child(9) { width: 180px; }
  .atp-shell .pa-table-outer .pa-table th:nth-child(10) { width: 56px; }
  .atp-shell .pa-table-outer .pa-table td:last-child { font-size: .62rem; }
  .atp-shell .pa-table-outer .pa-table .coin-logo, .atp-shell .pa-table-outer .pa-table .coin-logo-ph { width: 16px; height: 16px; }
  .atp-shell .pa-table-outer .pa-table .sc-asset { gap: 4px; }
  .atp-shell .pa-table-outer .pa-table .sc-asset-name { font-size: .7rem; }
  .atp-shell .pa-table-outer .pa-table .zh-chart-btn { width: 18px; height: 18px; }
  .atp-shell .pa-table-outer .pa-table .pa-dir { font-size: .56rem; padding: 2px 5px; }
  .atp-shell .pa-summary a { -webkit-line-clamp: 1; font-size: .68rem; line-height: 1.4; }
  /* Levels chips and "TG 16 · X 29" wrapped to 2–3 lines (measured 83px rows at 400px): one line each. */
  .atp-shell .pa-levels, .atp-shell .pa-levels:has(.pa-lvl) { flex-wrap: nowrap; white-space: nowrap; }
  .atp-shell .pa-table-outer .pa-table .pa-lvl { font-size: .6rem; padding: 1px 4px; }
  .atp-shell .pa-mentions { white-space: nowrap; }
}

/* ProvenAlpha per-post lean (csj9 labels, 2026-10-02): ▲ bull / ▼ bear / • neutral before each excerpt
   and in the Consensus card. Same positive/negative tokens as the direction badges. */
.pa-lean { display: inline-block; min-width: 1.1em; font-family: var(--font-mono); font-size: .8em; text-align: center; }
.pa-lean-bull { color: var(--positive); } .pa-lean-bear { color: var(--negative); } .pa-lean-neutral { color: var(--text-muted); }
.pa-cons-leans { font-family: var(--font-mono); white-space: nowrap; }

/* Signals page Alerts link (2026-10-02 spec §6) */
.signals-alerts-link { text-align: center; margin: 24px 0; }
.signals-alerts-disc { color: var(--text-secondary); font-size: .78rem; margin: 8px 0 0; text-align: center; }
.signals-alerts-link a { color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.signals-alerts-link a:hover { text-decoration: underline; }

/* /at9/ AlgoTrader9 app page (board task 250) — claude.ai/design handoff 2026-10-08, high fidelity.
   No media queries by design: flex-wrap bases, auto-fill grids and clamp() type do the responsive work. */
.at9-page { overflow-x: clip; background: var(--bg-base); color: var(--text-primary); font-family: 'DM Sans', system-ui, sans-serif; font-size: 16px; line-height: 1.55; }
.at9-page h1, .at9-page h2, .at9-page h3, .at9-page p { margin: 0; }
/* The site-wide `.lu { width: 1em; stroke-width: 1.75 }` would shrink the handoff's icons: pin them here. */
.at9-page .lu { stroke-width: 2; vertical-align: middle; }
.at9-page .at9-cta .lu, .at9-page .at9-ghost .lu, .at9-page .at9-check .lu { width: 18px; height: 18px; }
.at9-page .at9-feature-icon, .at9-page .at9-chev { width: 20px; height: 20px; }
.at9-wrap { max-width: 1600px; margin: 0 auto; padding-inline: clamp(0.75rem, 4vw, 4rem); }
.at9-section { padding-block: clamp(3.5rem, 7vw, 7rem); }
.at9-rule { border-top: 1px solid var(--border); }
.at9-tag { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--green-primary); }
.at9-head { display: flex; flex-direction: column; gap: 12px; max-width: 42rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.at9-page .at9-h1, .at9-page .at9-h2, .at9-page .at9-h2-beta { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; color: var(--text-primary); text-wrap: balance; }
.at9-page .at9-h1 { font-size: clamp(2.5rem, 1.5rem + 3.8vw, 4.75rem); line-height: 1.04; letter-spacing: -0.01em; max-width: 14ch; }
.at9-page .at9-h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); line-height: 1.08; letter-spacing: 0; }
.at9-page .at9-h2-beta { font-size: clamp(1.875rem, 1.3rem + 2vw, 2.75rem); line-height: 1.1; letter-spacing: 0; }
.at9-desc { color: var(--text-secondary); font-size: 17px; text-wrap: pretty; }

/* Hero */
/* 72px = the fixed-top navbar (measured 2026-10-08); the handoff's spacing starts below the site header. */
.at9-hero { padding-top: calc(72px + clamp(2rem, 6vw, 6rem)); padding-bottom: clamp(3rem, 7vw, 6.5rem); display: flex; flex-wrap: wrap; align-items: center; gap: clamp(2.5rem, 5vw, 5rem); }
.at9-hero-copy { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(1rem, 2vw, 1.5rem); }
.at9-lede { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.55; color: var(--text-secondary); max-width: 36rem; text-wrap: pretty; }
.at9-cta-block { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.at9-hero-copy .at9-cta-block { margin-top: 4px; width: 100%; }
.at9-cta-note { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .04em; color: var(--text-secondary); }
.at9-hero-media { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.at9-hero-shot { position: relative; width: 100%; max-width: 560px; aspect-ratio: 560 / 640; margin-inline: auto; }
.at9-shot { position: absolute; display: block; height: auto; border-radius: 13% / 6%; border: 1px solid var(--border); }
.at9-shot-left { left: 3%; top: 12%; width: 40%; transform: rotate(-6deg); transform-origin: bottom right; opacity: .92; box-shadow: 0 24px 48px -16px rgba(0,0,0,.55); }
.at9-shot-right { right: 3%; top: 12%; width: 40%; transform: rotate(6deg); transform-origin: bottom left; opacity: .92; box-shadow: 0 24px 48px -16px rgba(0,0,0,.55); }
.at9-shot-front { left: 25%; top: 0; width: 50%; box-shadow: 0 40px 80px -24px rgba(0,0,0,.7); }
.at9-caption { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .04em; color: var(--text-muted); text-align: center; }

/* Buttons */
.at9-page .at9-cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 8px; background: var(--green-primary); color: var(--text-inverted); font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 16px; text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; outline: none; }
.at9-page .at9-cta:hover { color: var(--text-inverted); box-shadow: 0 0 0 4px var(--border-accent); transform: translateY(-1px); }
.at9-page .at9-cta:focus-visible, .at9-page .at9-ghost:focus-visible { outline: 2px solid var(--green-accent); outline-offset: 3px; }
.at9-page .at9-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 8px; background: transparent; border: 1px solid var(--border-accent); color: var(--green-primary); font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 15px; text-decoration: none; transition: border-color .15s ease, color .15s ease; outline: none; }
.at9-page .at9-ghost:hover { border-color: var(--green-primary); color: var(--green-primary); }

/* Features */
.at9-feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.at9-feature { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; padding: clamp(1.25rem, 2.4vw, 1.75rem); display: flex; flex-direction: column; gap: 10px; transition: border-color .15s; }
.at9-feature:hover { border-color: var(--border-accent); }
.at9-feature-icon { color: var(--green-primary); }
/* !important only to beat the site-wide `h1,h2,h3 { font-family: var(--font-display) !important }`; the handoff sets these h3s in DM Sans. */
.at9-page .at9-feature h3 { margin-top: 8px; font-family: 'DM Sans', sans-serif !important; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--text-primary); }
.at9-feature p, .at9-step-list p { color: var(--text-secondary); font-size: 15px; text-wrap: pretty; }

/* Paper (full-bleed deep band) */
.at9-band { background: var(--bg-deep); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.at9-paper { display: flex; flex-wrap: wrap; gap: clamp(2rem, 5vw, 5rem); align-items: flex-start; }
.at9-paper-head { flex: 1 1 360px; min-width: 0; max-width: 34rem; margin-bottom: 0; }
.at9-paper-body { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.at9-paper-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.at9-paper-list li { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--border); }
.at9-check { flex: 0 0 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border-accent); display: flex; align-items: center; justify-content: center; color: var(--green-primary); }
.at9-page .at9-check .lu { stroke-width: 2.25; }
.at9-paper-text { font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.45; padding-top: 3px; color: var(--text-primary); }
.at9-disclaimer { font-size: 13px; line-height: 1.55; color: var(--text-muted); }
.at9-paper-note { max-width: 40rem; }
.at9-page-disclaimer { max-width: 48rem; }

/* How it works */
.at9-step-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem) 24px; }
.at9-step-list li { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid var(--border); }
.at9-step-n { font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--green-primary); }
.at9-page .at9-step-list h3 { font-family: 'DM Sans', sans-serif !important; font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--text-primary); }

/* Beta (no top padding: follows How it works) */
.at9-beta { padding-bottom: clamp(3.5rem, 7vw, 7rem); display: flex; flex-direction: column; gap: 16px; }
.at9-beta-card { background: var(--bg-surface); border: 1px solid var(--border-accent); border-radius: 8px; padding: clamp(1.5rem, 4vw, 3.5rem); display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 4rem); align-items: flex-end; justify-content: space-between; }
.at9-beta-copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 12px; max-width: 44rem; }
.at9-waitlist { border: 1px solid var(--border); border-radius: 8px; padding: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 4vw, 3.5rem); display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.at9-waitlist-copy { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.at9-waitlist-title { font-size: 17px; font-weight: 600; }
.at9-waitlist-text { color: var(--text-secondary); font-size: 15px; text-wrap: pretty; }

/* FAQ */
.at9-faq { padding-top: clamp(3.5rem, 7vw, 7rem); padding-bottom: clamp(3rem, 6vw, 5rem); display: flex; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 5rem); align-items: flex-start; }
.at9-faq-intro { flex: 1 1 300px; min-width: 0; max-width: 26rem; margin-bottom: 0; }
.at9-faq-body { flex: 2 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.at9-faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.at9-faq-row { border-bottom: 1px solid var(--border); }
.at9-faq-q { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 16px; padding: 22px 4px; cursor: pointer; border-radius: 4px; color: var(--text-primary); }
.at9-faq-q:focus-visible { outline: 2px solid var(--green-accent); outline-offset: 2px; }
.at9-faq-n { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--green-primary); flex: 0 0 28px; }
.at9-faq-text { flex: 1; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); font-weight: 500; line-height: 1.35; }
.at9-chev { flex: 0 0 20px; color: var(--green-primary); transition: transform .2s; }
.at9-faq-q[aria-expanded="true"] .at9-chev { transform: rotate(180deg); }
.at9-faq-a { padding: 0 44px 24px 48px; color: var(--text-secondary); font-size: 16px; max-width: 44rem; text-wrap: pretty; }

/* /journal/ Trading Journal product page (board 848) — claude.ai/design handoff v1.1 (csj9
   docs/design/at9-app/journal-web/a-landing/), Version 2 for the comparison, tour and trust. A sibling of /at9/:
   it wears .at9-page and reuses the at9-* classes; jr-* are its own. Like /at9/: no media queries except the
   two the handoff calls for at 600px (stacked comparison) and the bento's column spans. */
.jr-page .jr-h1 { max-width: 12ch; }
.jr-cta-pair { display: flex; flex-wrap: wrap; gap: 12px; }
.jr-page .jr-cta-pair .at9-ghost { height: 52px; }
.jr-muted { color: var(--text-secondary) !important; }
.jr-dim { color: var(--text-muted); }

/* Hero visual: a browser frame with the dashboard, and the phone with a journal entry over its bottom-left.
   Geometry from the handoff at 720px: browser 86% wide, phone 30% (bezel 3.5% of its width, radius 14%). */
.jr-hero-media { flex: 1 1 560px; }
.jr-hero-shot { position: relative; width: 100%; max-width: 720px; aspect-ratio: 720 / 450; }
.jr-browser { position: absolute; right: 0; top: 0; width: 86%; border-radius: 8px; overflow: hidden; background: var(--bg-deep); border: 1px solid var(--border); box-shadow: 0 40px 80px -24px rgba(0,0,0,.7); }
.jr-browser-bar { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid var(--border); }
.jr-browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); flex: none; }
.jr-url { margin-left: 12px; padding: 3px 10px; border-radius: 100px; background: var(--bg-surface); font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.jr-browser-img { display: block; width: 100%; height: auto; }
.jr-phone { position: absolute; left: 0; bottom: 0; width: 30%; padding: 1.05%; border-radius: 14% / 7%; background: var(--bg-deep); box-shadow: 0 40px 80px -24px rgba(0,0,0,.8), 0 0 0 1px var(--border); }
.jr-phone img { display: block; width: 100%; height: auto; border-radius: 11% / 5.5%; }
/* Phone width: the browser crops to the KPI tiles (42% scale) and the phone sits right, at 46%. */
@media (max-width: 599.98px) {
  .jr-hero-shot { aspect-ratio: 358 / 420; }
  .jr-browser { width: 100%; height: 55%; }
  .jr-browser-img { width: 169%; max-width: none; }
  .jr-phone { left: auto; right: 2%; width: 46%; padding: 1.6%; }
}
.jr-step-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }

/* Version 2 header: tag + H2 left, description right, bottom-aligned. */
.jr-stack { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3.5rem); }
.jr-head-split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 48px; }
.jr-head-l { display: flex; flex-direction: column; gap: 12px; max-width: 40rem; }
.jr-head-split .at9-desc { max-width: 27rem; }

/* 3 · Comparison: timeline card. */
.jr-timeline { background: var(--bg-base); border: 1px solid var(--border); border-radius: 8px; padding: clamp(1.25rem, 2.4vw, 1.75rem); display: flex; flex-direction: column; }
.jr-tl-lane { display: grid; grid-template-columns: 170px minmax(0, 1fr); column-gap: 28px; padding: 22px 0; }
.jr-tl-lane:first-child { padding-top: 0; }
.jr-tl-lane-imp { border-top: 1px solid var(--border); padding-bottom: 0; }
.jr-tl-who { display: flex; flex-direction: column; gap: 4px; padding-top: 30px; }
.jr-tl-name { font-size: 16px; font-weight: 600; }
.jr-tl-sub { font-size: 12.5px; color: var(--text-secondary); }
.jr-tl-sub.jr-dim { color: var(--text-muted); }
.jr-tl-track { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.jr-tl-track li { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.jr-tl-stage { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); height: 16px; }
.jr-tl-at9::before { content: ''; position: absolute; left: 7px; right: 7px; top: 34px; height: 2px; background: var(--green-primary); opacity: .55; }
.jr-dot { position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--green-primary); box-shadow: 0 0 0 5px color-mix(in srgb, var(--green-primary) 14%, transparent); flex: none; }
.jr-dot-hollow { background: var(--bg-deep); box-shadow: inset 0 0 0 2px var(--text-muted); }
.jr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.jr-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 4px; background: var(--bg-surface); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-primary); white-space: nowrap; }
.jr-chip-muted { color: var(--text-secondary); }
.jr-chip-dashed { background: transparent; box-shadow: none; outline: 1px dashed rgba(255,255,255,.22); outline-offset: -1px; color: var(--text-muted); }
.jr-tl-imp { padding-top: 28px; }
.jr-tl-imp::before { content: ''; position: absolute; left: 7px; right: 7px; top: 34px; border-top: 2px dashed var(--text-faint); }
.jr-tl-gap { grid-column: span 3; padding-top: 26px; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); max-width: 30rem; }
.jr-tl-later { position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.jr-tl-later-tag { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .08em; color: var(--text-muted); }

/* Comparison table with the AlgoTrader9 column highlighted. */
.jr-cmp-row { display: grid; grid-template-columns: minmax(150px, .75fr) minmax(0, 1.2fr) minmax(0, 1fr); }
.jr-cmp-row > span { padding: 15px 20px; display: flex; gap: 10px; font-size: 15px; line-height: 1.45; border-top: 1px solid var(--border); }
.jr-cmp-row > .jr-cmp-k { padding-left: 0; font-weight: 600; }
.jr-cmp-row > .jr-cmp-a { background: color-mix(in srgb, var(--green-primary) 6%, transparent); border-top-color: color-mix(in srgb, var(--green-primary) 14%, transparent); box-shadow: inset 1px 0 0 var(--border-accent), inset -1px 0 0 var(--border-accent); }
.jr-cmp-row > .jr-cmp-b { color: var(--text-secondary); }
.jr-cmp-head > span { border-top: 0; padding: 16px 20px 14px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; }
.jr-cmp-head > .jr-cmp-a { color: var(--green-primary); border-radius: 8px 8px 0 0; box-shadow: inset 1px 0 0 var(--border-accent), inset -1px 0 0 var(--border-accent), inset 0 1px 0 var(--border-accent); }
.jr-cmp-head > .jr-cmp-b { color: var(--text-muted); }
.jr-cmp-row:last-child > .jr-cmp-a { border-radius: 0 0 8px 8px; box-shadow: inset 1px 0 0 var(--border-accent), inset -1px 0 0 var(--border-accent), inset 0 -1px 0 var(--border-accent); }
.jr-page .jr-ck { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--green-primary); stroke-width: 2.25; }
.jr-dash { flex: none; width: 18px; text-align: center; color: var(--text-muted); }

@media (max-width: 599.98px) {
  .jr-tl-lane { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
  .jr-tl-who { padding-top: 0; }
  .jr-tl-track { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .jr-tl-at9::before, .jr-tl-imp::before { display: none; }
  .jr-tl-at9 li { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 14px; row-gap: 8px; padding-bottom: 14px; position: relative; }
  .jr-tl-at9 li::before { content: ''; position: absolute; left: 6px; top: 14px; bottom: 0; width: 2px; background: color-mix(in srgb, var(--green-primary) 40%, transparent); }
  .jr-tl-at9 li:last-child::before { display: none; }
  .jr-tl-at9 .jr-dot { grid-row: 1; grid-column: 1; box-shadow: none; margin-top: 1px; }
  .jr-tl-at9 .jr-tl-stage { grid-row: 1; grid-column: 2; height: auto; }
  .jr-tl-at9 .jr-chips { grid-column: 2; }
  .jr-tl-imp { padding-top: 0; }
  .jr-tl-gap { display: none; }
  .jr-tl-later { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 14px; row-gap: 8px; }
  .jr-tl-later .jr-dot { grid-row: 1; margin-top: 1px; }
  .jr-tl-later .jr-chips { grid-column: 2; }
  /* The table stacks: label, then the AlgoTrader9 line, then the import line. */
  .jr-cmp-head { display: none; }
  .jr-cmp-row { grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; row-gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--border); }
  .jr-cmp-row > span { padding: 0; border: 0; font-size: 14.5px; }   /* .jr-cmp-a/-b turn display: contents below, so their fill and rules vanish */
  .jr-cmp-row > .jr-cmp-k { grid-column: 1 / -1; font-size: 15px; margin-bottom: 2px; }
  .jr-cmp-row > .jr-cmp-a, .jr-cmp-row > .jr-cmp-b { display: contents; }
}

/* 4 · Feature tour: bento (desktop 7+5 / 12 / 4+4+4; mid 12 / 6+6 / 4+4+4; phone 12 each). */
.jr-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.jr-tile { grid-column: span 12; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; min-width: 0; transition: border-color .15s; }
.jr-tile:hover { border-color: var(--border-accent); }
.jr-tile-vis { position: relative; flex: none; height: 240px; overflow: hidden; background: var(--bg-deep); border-bottom: 1px solid var(--border); }
.jr-tile-vis::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(rgba(26,30,33,0), var(--bg-deep)); pointer-events: none; }
.jr-screen { position: absolute; left: 24px; top: 28px; width: calc(100% - 48px); height: auto; border-radius: 6px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08); }
.jr-tile-app .jr-tile-vis { height: 300px; }
.jr-bezel { position: absolute; left: 50%; top: 28px; transform: translateX(-50%); width: 220px; bottom: 0; border-radius: 28px 28px 0 0; background: color-mix(in srgb, var(--bg-deep) 66%, black); padding: 7px 7px 0; box-shadow: 0 30px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08); }
.jr-bezel img { display: block; width: 100%; height: auto; border-radius: 22px 22px 0 0; }
.jr-tile-body { flex: 1 1 auto; padding: clamp(1.25rem, 2.4vw, 1.75rem); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.jr-overline { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--green-primary); }
.jr-page .jr-tile h3 { font-family: 'DM Sans', sans-serif !important; font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: 0; color: var(--text-primary); text-wrap: balance; }
.jr-tile-body p { color: var(--text-secondary); font-size: 15px; max-width: 34rem; text-wrap: pretty; }
.jr-mono-chip { align-self: flex-start; margin-top: 4px; padding: 6px 10px; border-radius: 4px; background: var(--bg-deep); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-primary); }
.jr-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.jr-pills span { height: 26px; padding: 0 10px; border-radius: 100px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); display: inline-flex; align-items: center; font-size: 12.5px; color: var(--text-secondary); }
.jr-tile-body .jr-quote { margin-top: 4px; font-family: 'DM Serif Display', Georgia, serif; font-size: 19px; line-height: 1.35; color: var(--text-primary); }
@media (min-width: 600px) {
  .jr-tile-1 .jr-tile-vis { height: 380px; }
  .jr-tile-2, .jr-tile-3 { grid-column: span 6; }
  .jr-tile-web .jr-tile-vis { height: 300px; }
  .jr-tile-1 .jr-tile-vis { height: 380px; }
  .jr-tile-app { grid-column: span 4; }
  .jr-bezel { width: 200px; }
}
@media (min-width: 1200px) {
  .jr-tile-1 { grid-column: span 7; }
  .jr-tile-2 { grid-column: span 5; }
  .jr-tile-1 .jr-tile-vis, .jr-tile-2 .jr-tile-vis { height: 420px; }
  .jr-page .jr-tile-1 h3, .jr-page .jr-tile-2 h3 { font-size: 24px; }
  /* Tile 3 is a horizontal strip: text left, the visual right at 62%. */
  .jr-tile-3 { grid-column: span 12; flex-direction: row-reverse; }
  .jr-tile-3 .jr-tile-vis { flex: 0 0 62%; height: 360px; border-bottom: 0; border-left: 1px solid var(--border); }
  .jr-tile-3 .jr-tile-body { flex: 1 1 0; justify-content: center; }
  .jr-tile-app .jr-tile-vis { height: 340px; }
  .jr-bezel { width: 230px; }
}

/* 5 · Free and Paid */
.jr-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; }
.jr-plan { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; padding: clamp(1.25rem, 2.4vw, 1.75rem); display: flex; flex-direction: column; }
.jr-plan-free { border-color: var(--border-accent); }
.jr-plan-tag { padding-bottom: 12px; }
.jr-plan ul { list-style: none; margin: 0; padding: 0; }
.jr-plan li { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--border); font-size: 15.5px; line-height: 1.45; }
.jr-page .jr-plus { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--text-secondary); }
.jr-page .jr-plans-foot { margin-top: 16px; font-size: 14px; color: var(--text-secondary); }

/* 6 · Trust panel */
.jr-trust-panel { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.jr-trust-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.jr-trust-col { padding: clamp(1.25rem, 2.4vw, 1.75rem); display: flex; flex-direction: column; gap: 12px; box-shadow: -1px 0 0 var(--border), 0 -1px 0 var(--border); }
.jr-badge { width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--border-accent); background: color-mix(in srgb, var(--green-primary) 6%, transparent); display: inline-flex; align-items: center; justify-content: center; color: var(--green-primary); }
.jr-page .jr-badge .lu { width: 20px; height: 20px; }
.jr-page .jr-trust-col h3 { margin-top: 6px; font-family: 'DM Sans', sans-serif !important; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--text-primary); }
.jr-trust-col p { color: var(--text-secondary); font-size: 15px; text-wrap: pretty; }
.jr-proof { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.jr-proof-tag { height: 24px; padding: 0 9px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); display: inline-flex; align-items: center; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; color: var(--text-secondary); }
.jr-eq { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 4px; background: var(--bg-deep); font-size: 12.5px; color: var(--text-secondary); }
.jr-eq b { font-family: 'JetBrains Mono', monospace; font-weight: 400; color: var(--green-primary); }
.jr-eq-sign { font-family: 'JetBrains Mono', monospace; color: var(--text-muted); }
.jr-trust-foot { border-top: 1px solid var(--border); background: var(--bg-band); padding: 14px clamp(1.25rem, 2.4vw, 1.75rem); display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-secondary); }
.jr-page .jr-trust-foot .lu { flex: none; width: 16px; height: 16px; color: var(--text-muted); }

/* 8 · Final CTA band + disclaimer */
.jr-final { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.jr-page .jr-final .at9-h2-beta { flex: 1 1 420px; max-width: 40rem; }
.jr-disclaimer-wrap { padding-block: 24px 28px; }
.jr-page .jr-disclaimer { max-width: 52rem; }

/* AlgoTrader9 per-symbol links (board 280): an icon beside the screener chart button, and a
   "Trade" button on the pair views (board 301 wording). Only rendered where Hyperliquid lists the market.
   Board 863 (tool-icon handoff): the row action is icon-only, the AT9 tool icon in the zh-chart-btn frame — outline
   text-secondary, lime on hover; the icon's own yellow thunder never changes. title + aria-label keep it labelled. */
.at9-sym-link { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 6px; padding: .1rem .35rem; margin-left: 4px; color: var(--text-secondary); line-height: 1; text-decoration: none; white-space: nowrap; }
.at9-sym-link svg, .at9-sym-btn svg { flex: 0 0 auto; }
.at9-sym-link:hover { color: var(--green-primary); border-color: var(--green-primary); }
@media (max-width: 767.98px) {
  .at9-sym-link svg { width: 14px; height: 14px; }
}
.at9-sym-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--green-primary); border-radius: 8px; padding: 4px 10px; color: var(--green-primary); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.at9-sym-btn:hover { background: color-mix(in srgb, var(--green-primary) 12%, transparent); color: var(--green-primary); }
.at9-sym-btn[hidden] { display: none; }

/* Alerts Pro scorecard (729) */
.aps { --aps-amber: var(--amber); --aps-lime: var(--green-primary); --aps-red: var(--negative); --aps-fill: var(--amber); --aps-fill-2: var(--negative); }   /* the -bd / -bg tints and --aps-blue: the shared token block (my alerts, 728) */
.aps { padding-top: 56px; }

/* Alerts Pro — sign-in (728) */
/* Nav slot (handoff v2 7d). Desktop: after the collapsed menu, far right. Below 992px it sits between
   the logo and the hamburger, so sign-in stays one tap away without opening the menu. */
.aps-navslot { position: relative; display: flex; align-items: center; gap: 14px; margin-left: auto; font-family: var(--font-body); }
@media (min-width: 992px) {
  .navbar > .container > .navbar-collapse { order: 1; }
  .aps-navslot { order: 2; margin-left: 14px; }
}
@media (max-width: 991.98px) { .aps-navslot { margin-right: 4px; } }
.nav-cta-tg {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border: 0;
  border-radius: 999px; background: var(--green-primary); color: var(--text-inverted);
  font-family: var(--font-body); font-size: 13px; font-weight: 700; white-space: nowrap; transition: background-color .2s;
}
.nav-cta-tg:hover { background: var(--green-deep); color: var(--text-primary); }
.nav-cta-tg:focus-visible, .aps-chip:focus-visible, .aps-nav-mine:focus-visible { outline: 2px solid var(--green-primary); outline-offset: 2px; }
.nav-cta-tg-short { display: none; }
.aps-nav-mine { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--text-primary); text-decoration: none; white-space: nowrap; }
.aps-nav-mine:hover { color: var(--green-primary); }
.aps-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; border: 1px solid var(--line-btn);
  border-radius: 999px; background: transparent; color: var(--text-primary); font-size: 13px; cursor: pointer;
}
.aps-chip[aria-expanded="true"] { border-color: var(--green-primary); }
.aps-chip-av {
  width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--table-hover); color: var(--text-primary);
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
}
.aps-chip-name:empty { display: none; }
.aps-chip-caret { color: var(--text-secondary); }
.aps-usermenu {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 1045; width: 200px; padding: 6px;
  display: flex; flex-direction: column; border-radius: 8px; background: var(--bg-elevated);
  border: 1px solid var(--line-btn); box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.aps-usermenu[hidden] { display: none; }
.aps-usermenu-head { padding: 8px 10px 6px; font-size: 12px; color: var(--text-secondary); }
.aps-usermenu [role="menuitem"] {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 10px; border: 0; border-radius: 4px;
  background: transparent; color: var(--text-primary); font: 400 14px var(--font-body); text-align: left; text-decoration: none;
}
.aps-usermenu [role="menuitem"] .lu { color: var(--text-secondary); flex: none; }
.aps-usermenu [role="menuitem"]:hover, .aps-usermenu [role="menuitem"]:focus { background: var(--table-hover); outline: none; }
.aps-usermenu-sep { height: 1px; background: var(--line-strong); margin: 4px 2px; }
@media (max-width: 575.98px) {
  .nav-cta-tg { height: 44px; padding: 0 12px; gap: 6px; font-size: 12.5px; }   /* >= 44 px tap target */
  .nav-cta-tg-long { display: none; }
  .nav-cta-tg-short { display: inline; }
  .aps-nav-mine { display: none; }
  .aps-chip { width: 44px; height: 44px; padding: 0; border: 0; justify-content: center; }
  .aps-chip-av { width: 32px; height: 32px; font-size: 12px; }
  .aps-chip[aria-expanded="true"] .aps-chip-av { box-shadow: 0 0 0 2px var(--green-primary); }
  .aps-chip-name, .aps-chip-caret { display: none; }
  .aps-usermenu { top: calc(100% + 6px); }
  .aps-usermenu [role="menuitem"] { height: 44px; }
}

/* Modal (7a desktop 440px · 7b phone full screen, button pinned low · 7c results replace the button area). */
html.aps-signin-open { overflow: hidden; }
.aps-signin {
  --aps-ink: rgb(226,228,232);   /* bright body copy (handoff 7a reasons) */
  --aps-blue-bg: rgba(91,155,213,.12);
  --aps-lime-bd: rgba(140,202,43,.45);
  --aps-red-bd: rgba(224,82,82,.45);
  --aps-amber-bd: rgba(212,172,92,.5);
  --aps-scrim: rgba(26,30,33,.92);
  position: fixed; inset: 0; z-index: 1060; display: flex; align-items: center; justify-content: center;
  padding: 16px; font-family: var(--font-body); color: var(--text-primary);
}
.aps-signin[hidden] { display: none; }
.aps-signin-backdrop { position: absolute; inset: 0; background: var(--aps-scrim); }
.aps-signin-dialog {
  position: relative; width: 440px; max-width: 100%; max-height: calc(100vh - 32px); overflow: auto;
  background: var(--bg-surface); border: 1px solid var(--line-btn); border-radius: 14px; padding: 32px; outline: none;
}
.aps-signin-bar { display: none; }
.aps-signin-x {
  position: absolute; right: 16px; top: 16px; width: 36px; height: 36px; border-radius: 4px; border: 1px solid var(--line-btn);
  background: transparent; color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center;
}
.aps-signin-x:hover, .aps-signin-barx:hover { color: var(--text-primary); }
.aps-signin-body { display: flex; flex-direction: column; gap: 18px; }
.aps-signin-foot { display: flex; flex-direction: column; gap: 18px; }
.aps-signin-badge {
  width: 52px; height: 52px; border-radius: 50%; background: var(--aps-blue-bg); color: var(--zh-entry);
  display: flex; align-items: center; justify-content: center;
}
.aps-signin .aps-signin-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--text-primary); }
.aps-signin-reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--aps-ink); }
.aps-signin-reasons li { display: flex; gap: 10px; }
.aps-signin-reasons .lu { color: var(--green-primary); flex: none; margin-top: 3px; }
.aps-signin-action[hidden], .aps-signin-result[hidden], .aps-signin-loadfail[hidden] { display: none; }
.aps-signin-next { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--line-strong); }
.aps-signin-next-h { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.aps-signin-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; color: var(--aps-ink); }
.aps-signin-steps li::marker { color: var(--green-primary); font-weight: 700; }
.aps-signin-widget { margin-top: 16px; }
.aps-signin-tg {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px; border: 0; border-radius: 999px;
  background: var(--green-primary); color: var(--text-inverted); font: 700 15px var(--font-body); cursor: pointer;
}
.aps-signin-tg:hover { background: var(--green-deep); color: var(--text-primary); }
.aps-signin-tg:focus-visible { outline: 2px solid var(--green-primary); outline-offset: 3px; }
.aps-signin-tg.is-waiting .lu { display: none; }
.aps-signin-tg:disabled { background: transparent; border: 1px dashed var(--line-btn); color: var(--text-secondary); cursor: progress; }
@keyframes aps-signin-spin { to { transform: rotate(360deg); } }
.aps-signin-spin { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--text-muted); border-top-color: var(--green-primary); animation: aps-signin-spin .9s linear infinite; }
.aps-signin-spin[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .aps-signin-spin { animation-duration: 3s; } }
.aps-signin-get { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); text-align: center; }
.aps-signin-get a { color: var(--green-primary); }
.aps-signin-loadfail { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); }
.aps-signin-result { display: flex; gap: 12px; padding: 16px; border-radius: 10px; background: var(--bg-surface); border: 1px solid var(--line-strong); }
.aps-signin-result > .lu { flex: none; margin-top: 2px; color: var(--text-secondary); }
.aps-signin-result > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.aps-signin-result.is-ok { border-color: var(--aps-lime-bd); }
.aps-signin-result.is-ok > .lu { color: var(--green-primary); }
.aps-signin-result.is-err { border-color: var(--aps-red-bd); }
.aps-signin-result.is-err > .lu { color: var(--negative); }
.aps-signin-result.is-warn { border-color: var(--aps-amber-bd); }
.aps-signin-result.is-warn > .lu { color: var(--amber); }
.aps-signin-rt { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.4; color: var(--text-primary); }
.aps-signin-rd { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); }
.aps-signin-btn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 16px; border-radius: 4px;
  border: 1px solid var(--line-btn); background: transparent; color: var(--text-primary); font: 700 14px var(--font-body); text-decoration: none;
}
.aps-signin-btn:hover { background: var(--table-hover); color: var(--text-primary); }
.aps-signin-btn.is-primary { border: 0; background: var(--green-primary); color: var(--text-inverted); }
.aps-signin-btn.is-primary:hover { background: var(--green-deep); color: var(--text-primary); }
.aps-signin-privacy { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
@media (max-width: 575.98px) {
  .aps-signin { padding: 0; align-items: stretch; }
  .aps-signin-dialog {
    width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0; padding: 0;
    background: var(--bg-base); display: flex; flex-direction: column;
  }
  .aps-signin-x { display: none; }
  .aps-signin-bar {
    display: flex; align-items: center; gap: 8px; height: 56px; flex: none; padding: 0 8px;
    border-bottom: 1px solid var(--border); background: var(--bg-deep);
  }
  .aps-signin-barx { width: 44px; height: 44px; border: 0; background: transparent; color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; }
  .aps-signin-bartitle { font-size: 15px; font-weight: 600; }
  .aps-signin-body { flex: 1; padding: 28px 16px 24px; gap: 16px; }
  .aps-signin-reasons { font-size: 15px; }
  .aps-signin-foot { margin-top: auto; gap: 16px; }
  .aps-signin-tg { height: 50px; }
  .aps-signin-get a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Alerts Pro — my alerts (728) */
/* Scoped semantic tokens (handoff v2 "Tokens"). Component roots carry them too, so the shared includes
   (_aps_toggle / _aps_pill / _aps_tfrecord / _aps_winbar / _aps_outcomesplit) work on any page. */
.aps, .aps-page, .aps-tog, .aps-pl, .aps-wb, .aps-tfr, .aps-os, .aph, .aph-hub,
.aps-mt, .aps-rr, .aps-tt, .aps-plan, .aps-cy, .aps-l, .aps-rp {
  --aps-lime-bg: rgba(140,202,43,.10); --aps-lime-bd: rgba(140,202,43,.35); --aps-lime-chip: rgba(140,202,43,.06);
  --aps-lime-chip-bd: rgba(140,202,43,.30);
  --aps-red-bg: rgba(224,82,82,.10); --aps-red-bd: rgba(224,82,82,.40); --aps-red-row: rgba(224,82,82,.08);
  --aps-amber-bg: rgba(212,172,92,.10); --aps-amber-bd: rgba(212,172,92,.45);
  --aps-blue: var(--zh-entry); --aps-blue-bg: rgba(91,155,213,.10); --aps-blue-bd: rgba(91,155,213,.45);
  --aps-blue-14: rgba(91,155,213,.14);   /* delta 2 progress track */
  --aps-blue-band: rgba(91,155,213,.08); --aps-blue-band-bd: rgba(91,155,213,.40);
  --aps-track: rgba(255,255,255,.08); --aps-tick: rgb(255,255,255); --aps-faint: rgba(255,255,255,.05);
  --aps-dash: rgba(255,255,255,.22); --aps-lime-16: rgba(140,202,43,.16); --aps-lime-55: rgba(140,202,43,.55);
  --aps-lime-45: rgba(140,202,43,.45); --aps-line-06: rgba(255,255,255,.06); --aps-shadow: rgba(0,0,0,.45); --aps-cell-ink: rgb(226,228,232);
}

/* Toggle (44 px tap area, word label always shown; off border = --text-muted for 3:1) */
.aps-tog { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: transparent;
  color: var(--text-primary); font: 600 13px var(--font-body); cursor: pointer; user-select: none; }
.aps-tog-track { position: relative; flex: none; width: 36px; height: 20px; border-radius: 999px; box-sizing: border-box;
  border: 1px solid var(--text-muted); background: transparent; transition: background-color .15s, border-color .15s; }
.aps-tog-knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--text-secondary); transition: left .15s, background-color .15s; }
.aps-tog-word { min-width: 56px; text-align: left; color: var(--text-secondary); }
.aps-tog[aria-checked="true"] .aps-tog-track { background: var(--green-primary); border-color: var(--green-primary); }
.aps-tog[aria-checked="true"] .aps-tog-knob { left: 18px; background: var(--text-inverted); }
.aps-tog[aria-checked="true"] .aps-tog-word { color: var(--text-primary); }
.aps-tog[disabled] { cursor: not-allowed; }
.aps-tog[disabled][aria-checked="true"] .aps-tog-track { background: var(--green-deep); border-color: var(--green-deep); }
.aps-tog:focus-visible { outline: 2px solid var(--green-primary); outline-offset: 2px; border-radius: 4px; }

/* Pill */
.aps-pl { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; box-sizing: border-box;
  border: 1px solid var(--line-btn); border-radius: 4px; background: transparent; color: var(--aps-cell-ink);
  font: 700 11.5px var(--font-body); letter-spacing: .01em; white-space: nowrap; vertical-align: middle; }
.aps-pl--sm { height: 18px; font-size: 10.5px; }
.aps-pl--long, .aps-pl--short, .aps-pl--ver, .aps-pl--notenough { font-family: var(--font-mono); letter-spacing: .04em; }
.aps-pl--free { color: var(--text-primary); border-color: var(--text-muted); }
.aps-pl--pro { color: var(--text-inverted); background: var(--green-primary); border-color: var(--green-primary); }
.aps-pl--prolock { color: var(--green-primary); border-color: var(--green-primary); }
.aps-pl--beta { color: var(--aps-blue); background: var(--aps-blue-bg); border-color: var(--aps-blue-bd); }
.aps-pl--long { color: var(--green-primary); background: var(--aps-lime-bg); border-color: var(--aps-lime-bd); }
.aps-pl--short { color: var(--negative); background: var(--aps-red-bg); border-color: var(--aps-red-bd); }
.aps-pl--ver { color: var(--text-secondary); }
.aps-pl--strong, .aps-pl--medium, .aps-pl--initial, .aps-pl--collecting, .aps-pl--notpassing, .aps-pl--notenough { border-radius: 999px; }
.aps-pl--strong, .aps-pl--medium, .aps-pl--initial, .aps-pl--collecting, .aps-pl--notpassing { padding: 0 9px; }
.aps-pl--strong { color: var(--text-inverted); background: var(--green-primary); border-color: var(--green-primary); }
.aps-pl--medium { color: var(--green-primary); background: var(--aps-lime-16); border-color: var(--aps-lime-55); }
.aps-pl--initial { color: var(--green-primary); background: transparent; border-color: var(--aps-lime-45); }
.aps-pl--collecting { color: var(--text-secondary); background: var(--aps-faint); border-color: var(--text-muted); }
.aps-pl--notpassing { color: var(--negative); background: var(--aps-red-bg); border-color: var(--aps-red-bd); }
.aps-pl--notenough { color: var(--text-secondary); border: 1px dashed var(--text-muted); }
.aps-pl .lu { flex: none; }

/* Alerts v2 shared components (B1): metric tile, range row, template tile, plan card, cycle. Role tokens come from the
   shared block above; the lime/red rgba values are the handoff's fixed alphas. */
.aps-mt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px; box-sizing: border-box;
  min-width: 0; border-radius: 10px; background: var(--bg-surface); border: 1px solid transparent; }
.aps-mt-label { font: 400 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.aps-mt-value { font: 700 clamp(24px, 3vw, 30px)/1.1 var(--font-mono); color: var(--text-primary); }
.aps-mt-sub { font-size: 12.5px; line-height: 1.4; color: var(--text-secondary); }
.aps-mt-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.aps-mt-pills .aps-pl { height: 20px; }
.aps-mt--off { background: transparent; border: 1px dashed var(--aps-dash); }
.aps-mt--off .aps-mt-value { color: var(--text-muted); }

.aps-rr { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 2fr) 150px 172px; align-items: center; column-gap: 16px;
  padding: 8px 18px; border-top: 1px solid var(--line-row); --rr-tone: var(--text-secondary); }
.aps-rr--lime { --rr-tone: var(--green-primary); }
.aps-rr--amber { --rr-tone: var(--amber); }
.aps-rr--red { --rr-tone: var(--negative); }
.aps-rr-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.aps-rr-dir { flex: none; width: 62px; font: 700 10px var(--font-mono); letter-spacing: .04em; color: var(--text-secondary); }
.aps-rr-dir--long { color: var(--green-primary); }
.aps-rr-dir--short { color: var(--negative); }
.aps-rr-title { flex: 1 1 auto; min-width: 0; font-size: 13.5px; line-height: 1.4; color: var(--cell-ink); }   /* wraps (delta 2): "+ ProvenAlpha agrees" is never cut */
.aps-rr-bar { position: relative; height: 22px; min-width: 0; }
.aps-rr-bar::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--aps-line-06); }
.aps-rr-g { position: absolute; top: 4px; bottom: 4px; width: 1px; background: var(--aps-line-06); }
.aps-rr-g--25 { left: 25%; }
.aps-rr-g--75 { left: 75%; }
.aps-rr-mid { position: absolute; top: 2px; bottom: 2px; left: 50%; width: 2px; margin-left: -1px; background: var(--aps-tick); }
.aps-rr-range { position: absolute; top: 6px; height: 10px; box-sizing: border-box; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--rr-tone) 50%, transparent);
  background: color-mix(in srgb, var(--rr-tone) 22%, transparent); }
.aps-rr-dot { position: absolute; top: 4px; width: 14px; height: 14px; margin-left: -7px; box-sizing: border-box; border-radius: 50%;
  background: var(--rr-tone); border: 2px solid var(--bg-base); }
.aps-rr-bar--none { display: flex; align-items: center; height: auto; font-size: 12px; color: var(--text-muted); }
.aps-rr-bar--none::before { display: none; }
/* delta 2 §1.3: the win-rate cell ("75%" / "15 of 20 won"), the empty track, the Collecting progress bar, tooltip triggers */
.aps-rr-n { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; white-space: nowrap; }
.aps-rr-rate { font: 700 17px var(--font-mono); color: var(--rr-tone, var(--text-primary)); }
.aps-rr-wl { display: none; margin-left: 6px; font: 400 12px var(--font-body); color: var(--text-secondary); }
.aps-rr-won, .aps-rr-none { font: 400 11.5px var(--font-mono); color: var(--text-secondary); }
.aps-rr-none { white-space: normal; }
.aps-rr-bar--empty .aps-rr-g, .aps-rr-bar--empty .aps-rr-mid { opacity: .7; }
.aps-rr-pa { color: var(--text-secondary); text-decoration: underline dotted rgba(178,182,186,.6); text-underline-offset: 3px; cursor: help; }
.aps-rr-dir.aps-tip-t { cursor: help; }
.aps-rr-prog { display: flex; flex-direction: column; gap: 6px; width: 150px; max-width: 100%; }
.aps-rr-prog-bar { position: relative; display: block; height: 4px; border-radius: 2px; background: var(--aps-blue-14); overflow: hidden; }
.aps-rr-prog-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: linear-gradient(90deg, var(--aps-blue-bd), var(--aps-blue)); }
.aps-rr-prog-label { display: inline-flex; align-items: center; gap: 5px; font: 600 11.5px var(--font-body); color: var(--text-secondary); white-space: nowrap; }
.aps-rr-prog-label .lu { flex: none; color: var(--zh-entry); }
.aps-tip-t { display: inline-flex; align-items: center; gap: 5px; border-radius: 3px; cursor: help; }
.aps-rr-pa.aps-tip-t { display: inline; }
.aps-tip-t:focus-visible { outline: 2px solid var(--green-primary); outline-offset: 2px; }
.aps-rr-tag { display: flex; align-items: center; min-width: 0; }
.aps-rr-note { font-size: 11.5px; color: var(--text-secondary); }

.aps-tt { display: flex; flex-direction: column; align-items: stretch; gap: 10px; width: 100%; min-height: 44px; padding: 16px; box-sizing: border-box;
  text-align: left; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-primary);
  font: inherit; cursor: pointer; }
.aps-tt--zone { border-color: var(--aps-lime-chip-bd); }
.aps-tt:hover { background: var(--table-row-alt); border-color: var(--aps-lime-45); }
.aps-tt:focus-visible { outline: 2px solid var(--green-primary); outline-offset: 2px; }
.aps-tt-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.aps-tt-head { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.aps-tt-name { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.aps-tt-meta { font: 400 10.5px var(--font-mono); letter-spacing: .06em; color: var(--text-secondary); }
.aps-tt-plan { flex: none; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; box-sizing: border-box; border-radius: 4px;
  font: 700 11px var(--font-body); }
.aps-tt-plan--free { color: var(--text-primary); border: 1px solid var(--text-muted); }
.aps-tt-plan--paid { color: var(--text-inverted); background: var(--green-primary); border: 1px solid var(--green-primary); }
.aps-tt-def { font-size: 13px; line-height: 1.45; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.aps-tt-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.aps-tt-note { font-size: 12px; color: var(--text-secondary); }
.aps-tt-use { font: 700 13px var(--font-body); color: var(--green-primary); white-space: nowrap; }

.aps-plan { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 26px 24px; box-sizing: border-box; min-width: 0;
  border-radius: 14px; background: var(--bg-band); border: 1px solid rgba(255,255,255,.09); }
.aps-plan--hi { background: var(--bg-surface); border: 2px solid var(--green-primary); box-shadow: 0 0 0 4px rgba(140,202,43,.10); }
.aps-plan-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 22px; }
.aps-plan-ribbon { margin-left: auto; display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  border-radius: 4px; border: 1px solid var(--aps-blue-bd); background: var(--aps-blue-bg); color: var(--aps-blue); font: 700 11px var(--font-body); }
.aps-plan-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 4px;
  background: var(--green-primary); color: var(--text-inverted); font: 700 11.5px var(--font-body); }
.aps-plan-name { margin: 0; font: 700 19px var(--font-body); font-family: var(--font-body) !important; letter-spacing: 0; color: var(--text-primary); }   /* h3 carries the display face !important site-wide */
.aps-plan-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.aps-plan-amt { font: 700 38px/1 var(--font-mono); color: var(--text-primary); }
.aps-plan-per { font-size: 14px; color: var(--text-secondary); }
.aps-plan-sub { margin: -8px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
.aps-plan [data-for="annual"], .aps-plan[data-billing="annual"] [data-for="monthly"] { display: none; }
.aps-plan[data-billing="annual"] [data-for="annual"] { display: revert; }
.aps-plan-rows { margin: 0; flex: 1 1 auto; }
.aps-plan-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.06); }
.aps-plan-row dt { font-size: 13.5px; color: var(--text-secondary); }
.aps-plan-row dd { margin: 0; font: 400 13px var(--font-mono); color: var(--text-primary); text-align: right; }
.aps-plan-yes { display: inline-flex; color: var(--green-primary); }
.aps-plan-no { color: var(--text-muted); }
.aps-plan-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 48px; box-sizing: border-box; border-radius: 4px;
  font: 700 14.5px var(--font-body); text-decoration: none; cursor: pointer; }
.aps-plan-btn--primary { border: 0; background: var(--green-primary); color: var(--text-inverted); }
.aps-plan-btn--primary:hover { background: var(--green-deep); color: var(--text-primary); }
.aps-plan-btn--ghost { border: 1px solid var(--line-btn); background: transparent; color: var(--text-primary); }
.aps-plan-btn--ghost:hover { background: var(--table-hover); color: var(--text-primary); }
.aps-plan-btn:focus-visible { outline: 2px solid var(--green-primary); outline-offset: 2px; }

/* How it works — step line (delta 2 §1.2, boards 8a/8b) */
.aps-cy { display: flex; flex-direction: column; }
.aps-cy-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.aps-cy-steps::before { content: ""; position: absolute; top: 19px; height: 2px; left: calc((100% - 120px) / 8); right: calc((100% - 120px) / 8);
  background: var(--aps-lime-55); }
.aps-cy-step { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.aps-cy-num { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px;
  box-sizing: border-box; border-radius: 50%; border: 2px solid var(--green-primary); background: var(--bg-base);
  font: 700 16px var(--font-mono); color: var(--green-primary); }
.aps-cy-chev { position: absolute; z-index: 1; top: 20px; right: -20px; display: inline-flex; padding: 0 2px; transform: translate(50%, -50%);
  background: var(--bg-base); color: var(--green-primary); }
.aps-cy-card { position: relative; align-self: stretch; flex: 1; display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding: 22px;
  box-sizing: border-box; border-radius: 12px; background: var(--bg-surface); }
.aps-cy-card::before { content: ""; position: absolute; left: 50%; top: -16px; width: 2px; height: 16px; margin-left: -1px; background: var(--aps-lime-55); }
.aps-cy-head { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.aps-cy-ic { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px;
  background: var(--aps-lime-bg); color: var(--green-primary); }
.aps-cy-kw { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.aps-cy-body { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.aps-cy-return { position: relative; height: 42px; margin: 0 calc((100% - 120px) / 8); box-sizing: border-box; border: 1.5px dashed var(--aps-lime-55);
  border-top: 0; border-radius: 0 0 8px 8px; }
.aps-cy-up { position: absolute; left: -10px; top: -10px; display: inline-flex; color: var(--green-primary); }
.aps-cy-left { display: none; }
.aps-cy-label { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 0 10px; background: var(--bg-base);
  font: 400 11.5px var(--font-mono); color: var(--green-primary); white-space: nowrap; }
@media (max-width: 719.98px) {
  .aps-rr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "tag n" "bar bar" "desc desc"; row-gap: 8px; padding: 12px 16px; }
  .aps-rr-name { grid-area: name; }
  .aps-rr-tag { grid-area: tag; }
  .aps-rr-n { grid-area: n; text-align: right; }
  .aps-rr-wl { display: inline; }
  .aps-rr-bar { grid-area: bar; }
  .aps-cy { position: relative; }
  .aps-cy-steps { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-right: 34px; }
  .aps-cy-steps::before { display: none; }
  .aps-cy-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; align-items: start; }
  .aps-cy-step:not(:last-child)::after { content: ""; position: absolute; left: 19px; top: 40px; bottom: -16px; width: 2px; background: var(--aps-lime-55); }
  .aps-cy-chev { display: none; }
  .aps-cy-card { margin-top: 0; padding: 16px; gap: 10px; }
  .aps-cy-card::before { display: none; }
  .aps-cy-head { flex-direction: row; align-items: center; gap: 12px; }
  .aps-cy-ic { width: 32px; height: 32px; }
  .aps-cy-kw { font-size: 17px; }
  .aps-cy-body { font-size: 15px; }
  .aps-cy-return { position: absolute; top: 36px; bottom: 36px; right: 0; width: 22px; height: auto; margin: 0; border: 1.5px dashed var(--aps-lime-55);
    border-left: 0; border-radius: 0 8px 8px 0; }
  .aps-cy-up { display: none; }
  .aps-cy-left { display: inline-flex; position: absolute; left: -10px; top: -10px; color: var(--green-primary); }
  .aps-cy-label { display: none; }
}

/* WinBar (v2, R5): mono % · 8 px bar · white 2 px tick at 50 % overshooting 4 px */
.aps-wb { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); }
.aps-wb-pct { min-width: 38px; text-align: right; font-size: 13px; font-weight: 700; color: var(--text-primary); }
.aps-wb-track { position: relative; flex: none; height: 8px; border-radius: 2px; background: var(--aps-track); }
.aps-wb-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: transparent; }
.aps-wb-tick { position: absolute; top: -4px; bottom: -4px; left: 50%; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--aps-tick); }
.aps-wb--pos .aps-wb-fill { background: var(--green-primary); }
.aps-wb--mid .aps-wb-fill { background: var(--amber); }
.aps-wb--neg .aps-wb-fill { background: var(--negative); }
.aps-tone--pos { color: var(--green-primary); }
.aps-tone--mid { color: var(--amber); }
.aps-tone--neg { color: var(--negative); }
.aps-tone--none { color: var(--text-secondary); }

/* TfRecord (R4) */
.aps-tfr { display: inline-flex; flex-direction: column; gap: 3px; font-family: var(--font-mono); }
.aps-tfr-main { font-size: 13px; color: var(--text-primary); white-space: nowrap; }
.aps-tfr-main b { font-weight: 700; }
.aps-tfr-tf { color: var(--text-secondary); }
.aps-tfr-others { font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; }
.aps-tfr-few { display: inline-flex; align-self: flex-start; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px;
  border: 1px dashed var(--text-muted); font-size: 11.5px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.aps-tfr--sm .aps-tfr-main { font-size: 12px; }
.aps-tfr--sm .aps-tfr-others { font-size: 10.5px; }

/* Page */
.aps-mine .aps-mine-wrap { max-width: calc(1280px + 2 * var(--page-gutter)); display: flex; flex-direction: column; gap: 22px; padding-top: 32px; }
.aps-mine b { font-weight: 700; }
.aps-mh1 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 40px; letter-spacing: -.02em; line-height: 1.1; color: var(--text-primary); }
.aps-msub { font-size: 14px; color: var(--text-secondary); }
.aps-ic-lime { color: var(--green-primary); }
.aps-mbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 16px;
  border-radius: 4px; border: 1px solid transparent; font: 600 14px var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; }
.aps-mbtn[hidden] { display: none; }
.aps-mbtn--lime { background: var(--green-primary); color: var(--text-inverted); font-weight: 700; }
.aps-mbtn--lime:hover { background: var(--green-deep); color: var(--text-primary); }
.aps-mbtn--ghost { background: transparent; border-color: var(--line-btn); color: var(--text-primary); font-weight: 500; }
.aps-mbtn--ghost:hover { background: var(--table-hover); color: var(--text-primary); }
.aps-mbtn--red { background: var(--negative); color: var(--text-inverted); font-weight: 700; }
.aps-mbtn--off { background: var(--bg-surface); border: 1px dashed var(--aps-dash); color: var(--text-muted); font-weight: 700; cursor: not-allowed; }
.aps-mbtn--sm { height: 36px; padding: 0 14px; font-size: 13px; }
.aps-mbtn--lg { height: 44px; padding: 0 22px; font-size: 15px; font-weight: 700; }
.aps-mbtn:focus-visible, .aps-dots:focus-visible { outline: 2px solid var(--green-primary); outline-offset: 2px; }

/* My-alerts plan banner (728); scoped by its variants so it never touches the B1 plan card (article.aps-plan). */
/* flex-direction: row undoes B1's column .aps-plan card rule, which matches the banner too (handoff 4e). */
.aps-plan--beta, .aps-plan--free { display: flex; flex-direction: row; align-items: center; gap: 14px; min-height: 48px; padding: 0 18px; border-radius: 8px; font-size: 14px; color: var(--text-primary); }
.aps-plan--beta { background: var(--aps-blue-band); border: 1px solid var(--aps-blue-band-bd); }
.aps-plan--free { background: var(--bg-surface); border: 1px solid var(--border); }
.aps-plan-quota { margin-left: auto; font-family: var(--font-mono); font-size: 12.5px; color: var(--aps-cell-ink); white-space: nowrap; }
.aps-plan--free .aps-plan-quota { margin-left: 0; font-size: 13px; color: var(--text-primary); }
.aps-plan-link { margin-left: auto; font-weight: 700; color: var(--green-primary); }

.aps-r2 { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-radius: 10px; border: 1px solid var(--aps-amber-bd);
  background: var(--aps-amber-bg); font-size: 14px; line-height: 1.5; color: var(--text-primary); }
.aps-r2[hidden] { display: none; }
.aps-r2-icon { color: var(--amber); display: inline-flex; }
.aps-r2 .aps-mbtn { margin-left: auto; flex: none; height: 38px; }

.aps-mhead { display: flex; align-items: flex-end; gap: 16px; }
.aps-mhead-text { display: flex; flex-direction: column; gap: 6px; }
.aps-mhead-actions { margin-left: auto; display: flex; gap: 10px; }
.aps-quota { display: flex; align-items: center; gap: 16px; padding: 14px 20px; border-radius: 10px; background: var(--bg-base);
  border: 1px solid var(--border); }
.aps-quota[hidden] { display: none; }
.aps-quota-text { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-secondary); }
.aps-quota-on { font-family: var(--font-mono); color: var(--text-primary); }
.aps-quota .aps-mbtn { margin-left: auto; }

/* List (desktop grid 128 · 1fr · 140 · 210 · 44, handoff 2a) */
.aps-mlist { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-surface); }
.aps-mcols, .aps-mgrid { display: grid; grid-template-columns: 128px minmax(0,1fr) 140px 210px 44px; gap: 16px; padding: 0 20px; }
.aps-mcols { padding-top: 11px; padding-bottom: 11px; border-bottom: 1px solid var(--border); background: var(--bg-band); border-radius: 12px 12px 0 0;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.aps-mrow { position: relative; border-bottom: 1px solid var(--line-row); }
.aps-mrow:last-child { border-bottom: 0; }
.aps-mgrid { padding-top: 16px; padding-bottom: 16px; align-items: start; }
.aps-mgrid[hidden] { display: none; }
.aps-mrow.is-stopped .aps-mgrid { opacity: .8; }
.aps-m-tog { margin-top: -10px; }
.aps-m-main { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.aps-m-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aps-m-title[hidden] { display: none; }
.aps-m-name { font-size: 15.5px; font-weight: 700; color: var(--text-primary); overflow-wrap: anywhere; }
.aps-m-pills { display: inline-flex; gap: 6px; }
.aps-m-when { font-size: 14px; line-height: 1.5; color: var(--text-primary); }
.aps-m-label { color: var(--text-secondary); }
.aps-m-if { font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.aps-m-syms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.aps-sym { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 4px;
  border: 1px solid var(--aps-lime-chip-bd); background: var(--aps-lime-chip); font-family: var(--font-mono); font-size: 11.5px; color: var(--text-primary); }
.aps-sym-hip { font-size: 9.5px; color: var(--text-secondary); border-left: 1px solid var(--line-btn); padding-left: 5px; }
.aps-m-more { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 4px; border: 1px solid var(--line-btn);
  font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary); }
.aps-m-more--p { display: none; }
.aps-m-last { padding-top: 2px; font-family: var(--font-mono); font-size: 13px; color: var(--text-primary); }
.aps-m-last.is-never { color: var(--text-secondary); }
.aps-m-rec { padding-top: 2px; }
.aps-dots { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 4px;
  border: 1px solid var(--line-btn); background: transparent; color: var(--text-primary); cursor: pointer; }
.aps-dots[aria-expanded="true"] { border-color: var(--green-primary); }
.aps-menu { position: absolute; right: 20px; top: 58px; z-index: 5; width: 180px; padding: 6px; display: flex; flex-direction: column;
  border-radius: 8px; background: var(--bg-elevated); border: 1px solid var(--line-btn); box-shadow: 0 16px 40px var(--aps-shadow); }
.aps-menu[hidden] { display: none; }
.aps-menu [role="menuitem"] { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border: 0; border-radius: 4px;
  background: transparent; color: var(--text-primary); font: 500 14px var(--font-body); text-align: left; cursor: pointer; }
.aps-menu [role="menuitem"] .lu { color: var(--text-secondary); flex: none; }
.aps-menu-ic { display: inline-flex; }
.aps-menu-ic[hidden] { display: none; }
.aps-menu [role="menuitem"]:hover, .aps-menu [role="menuitem"]:focus { background: var(--table-hover); outline: none; }
.aps-menu [role="menuitem"].is-danger, .aps-menu [role="menuitem"].is-danger .lu { color: var(--negative); }
.aps-confirm { display: flex; align-items: center; gap: 14px; padding: 20px; background: var(--aps-red-row); font-size: 14px; color: var(--text-primary); }
.aps-confirm[hidden] { display: none; }
.aps-confirm-ic { color: var(--negative); display: inline-flex; }
.aps-confirm-actions { margin-left: auto; display: flex; gap: 8px; }
.aps-rename { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.aps-rename[hidden] { display: none; }
.aps-rename-input { flex: 1 1 200px; min-width: 0; height: 36px; padding: 0 10px; border-radius: 4px; border: 1px solid var(--line-btn);
  background: var(--bg-base); color: var(--text-primary); font: 600 14px var(--font-body); }
.aps-rename-input:focus { outline: none; border-color: var(--green-primary); }

/* Cards: signed out · unreachable · empty */
.aps-mcard { background: var(--bg-base); border: 1px solid var(--border); border-radius: 10px; padding: 32px 24px; }
.aps-mcard--center { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.aps-mcard-body { margin: 0; max-width: 460px; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.aps-out { max-width: 560px; margin: 24px auto 0; width: 100%; background: var(--bg-surface); }
.aps-out-badge { width: 48px; height: 48px; border-radius: 50%; background: var(--aps-blue-bg); color: var(--aps-blue);
  display: inline-flex; align-items: center; justify-content: center; }
.aps-out-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 26px; color: var(--text-primary); }
.aps-down { background: var(--bg-surface); }
.aps-down-icon { color: var(--text-secondary); display: inline-flex; }
.aps-down-line { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.aps-empty { background: var(--bg-surface); }
.aps-empty-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 28px; color: var(--text-primary); }
/* B5 (4e/4f): the empty card carries the template grid */
.aps-empty--tpl { display: flex; flex-direction: column; align-items: stretch; text-align: left; gap: 22px; padding: 36px; }
.aps-empty-top { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.aps-empty-text { flex: 1 1 320px; display: flex; flex-direction: column; gap: 8px; }
.aps-et-sec { display: flex; flex-direction: column; gap: 12px; }
.aps-et-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.aps-et-head b { font-size: 15px; }
.aps-et-head span { font-size: 13px; color: var(--text-secondary); }
.aps-et-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 8px; }
.aps-et { display: flex; flex-direction: column; gap: 8px; min-height: 44px; padding: 12px 14px; border-radius: 8px; text-align: left;
  background: var(--bg-base); border: 1px solid rgba(255,255,255,.09); color: var(--text-primary); font-family: var(--font-body); cursor: pointer; }
.aps-et--zone { border-color: var(--aps-lime-chip-bd); }
.aps-et:hover { border-color: var(--aps-lime-55); }
.aps-et:focus-visible, .aps-et-all:focus-visible { outline: 2px solid var(--green-primary); outline-offset: 2px; }
.aps-et-top { display: flex; align-items: center; gap: 8px; width: 100%; }
.aps-et-name { flex: 1; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.aps-et .aps-tt-plan { height: 18px; padding: 0 6px; font-size: 10.5px; }
.aps-et-meta { display: flex; align-items: center; gap: 8px; }
.aps-et-dir { font: 700 10.5px var(--font-mono); }
.aps-et-dir--long { color: var(--green-primary); }
.aps-et-dir--short { color: var(--negative); }
.aps-et-note { font-size: 11.5px; color: var(--text-muted); }
.aps-et-all { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; text-decoration: none; }
.aps-et-all:hover { text-decoration: underline; }
@media (max-width: 719.98px) {
  .aps-empty--tpl { padding: 22px 16px; }
  .aps-et-grid > .aps-et:nth-child(n+7) { display: none; }
}

.aps-mfoot { display: flex; align-items: center; gap: 12px; margin: 34px 0 0; padding: 20px 0; border-top: 1px solid var(--border);
  font-size: 13px; color: var(--text-secondary); }
.aps-toast { position: fixed; left: 50%; bottom: 24px; z-index: 1050; transform: translateX(-50%); max-width: calc(100vw - 32px);
  padding: 12px 18px; border-radius: 8px; background: var(--bg-elevated); border: 1px solid var(--line-btn); box-shadow: 0 16px 40px var(--aps-shadow);
  color: var(--text-primary); font: 500 14px var(--font-body); }
.aps-toast[hidden] { display: none; }

/* Tablet and phone (2b / 2d): one card per alert, toggle bottom-left, chips first 2 then "+N more" */
@media (max-width: 991.98px) {
  .aps-mcols { display: none; }
  .aps-mlist { border: 0; background: transparent; display: flex; flex-direction: column; gap: 12px; }
  .aps-mrow { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-surface); }
  .aps-mrow:last-child { border-bottom: 1px solid var(--border); }
  .aps-mgrid { grid-template-columns: auto minmax(0,1fr) 44px; grid-template-areas: "main main menu" "tog last last" "tog rec rec";
    gap: 9px 10px; padding: 14px; }
  .aps-m-main { grid-area: main; gap: 9px; }
  .aps-m-menu { grid-area: menu; justify-self: end; margin: -8px -8px 0 0; }
  .aps-m-tog { grid-area: tog; margin: 0; align-self: center; padding-top: 4px; }
  .aps-m-last { grid-area: last; justify-self: end; padding-top: 6px; font-size: 11.5px; color: var(--text-secondary); }
  .aps-m-rec { grid-area: rec; justify-self: end; padding-top: 0; }
  .aps-m-rec .aps-tfr { align-items: flex-end; }
  .aps-m-tog, .aps-m-last { border-top: 1px solid var(--line-row); }
  .aps-m-last { margin-left: -10px; padding-left: 10px; justify-self: stretch; text-align: right; }
  .aps-m-if { display: none; }
  .aps-dots { width: 44px; height: 44px; border-color: transparent; color: var(--text-secondary); }
  .aps-menu { right: 8px; top: 48px; }
  .aps-menu [role="menuitem"] { height: 44px; }
  .aps-sym--dx, .aps-m-more--d { display: none; }
  .aps-m-more--p { display: inline-flex; }
  .aps-confirm { flex-direction: column; align-items: stretch; padding: 14px; border-radius: 12px; }
  .aps-confirm-ic { display: none; }
  .aps-confirm-actions { margin-left: 0; display: grid; grid-template-columns: 1fr 1fr; }
  .aps-confirm-actions .aps-mbtn { height: 44px; }
  .aps-rename .aps-mbtn, .aps-rename-input { height: 44px; }
}
@media (max-width: 575.98px) {
  .aps-mine .aps-mine-wrap { gap: 14px; padding-top: 16px; }
  .aps-mh1 { font-size: 30px; }
  .aps-msub { font-size: 13px; }
  .aps-plan--beta, .aps-plan--free { flex-wrap: wrap; gap: 6px 8px; padding: 12px 14px; font-size: 13.5px; line-height: 1.45; }
  .aps-plan--beta .aps-plan-text { order: 3; flex: 1 0 100%; color: var(--aps-cell-ink); }
  .aps-plan-quota { font-size: 11.5px; }
  .aps-mhead { flex-direction: column; align-items: stretch; gap: 14px; }
  .aps-mhead-actions { margin-left: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .aps-mhead-actions .aps-mbtn { height: 44px; padding: 0 8px; }
  .aps-r2, .aps-quota { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; }
  .aps-r2-icon { display: none; }
  .aps-r2 .aps-mbtn, .aps-quota .aps-mbtn { margin-left: 0; height: 48px; }
  .aps-mcard { padding: 24px 14px; }
  .aps-mcard .aps-mbtn { width: 100%; height: 48px; }
  .aps-mfoot { align-items: flex-start; font-size: 12.5px; line-height: 1.5; }
}

/* Alerts Pro — builder (728) */
/* Sentence builder (handoff v2 §4, 3a–3e): desktop 920 px modal at top 40 px; phone full screen with a 56 px header
   and a sticky footer (48 px Save). Slots: trigger blue, conditions amber, symbols lime. Scoped semantic tokens below;
   the shared --aps-* ones (--aps-blue-bd, --aps-amber-bd, --aps-amber-bg, --aps-lime-bg …) are reused as they are. */
.apb, .apb-toast {
  --apb-scrim: rgba(26,30,33,.78); --apb-shadow: rgba(0,0,0,.5); --apb-tray-bd: rgba(255,255,255,.09);
  --apb-trig-blank-bg: rgba(91,155,213,.06); --apb-trig-bg: rgba(91,155,213,.12); --apb-pick-bg: rgba(91,155,213,.15);
  --apb-trig-ring: rgba(91,155,213,.25);
  --apb-quarter-on-bg: rgba(212,172,92,.14); --apb-cond-dash: rgba(212,172,92,.6); --apb-cond-ring: rgba(212,172,92,.25);
  --apb-up-bg: rgba(140,202,43,.08); --apb-up-bd: rgba(140,202,43,.5); --apb-sym-dash: rgba(140,202,43,.6);
  --apb-sym-ring: rgba(140,202,43,.25);
  --apb-down-bg: rgba(224,82,82,.08); --apb-down-bd: rgba(224,82,82,.5); --apb-error-bd: rgba(224,82,82,.55);
}
html.apb-open { overflow: hidden; }
.apb { position: fixed; inset: 0; z-index: 1055; font-family: var(--font-body); }
.apb[hidden] { display: none; }
.apb-backdrop { position: absolute; inset: 0; background: var(--apb-scrim); }
.apb-dialog { position: absolute; left: 50%; top: 40px; transform: translateX(-50%); width: 920px; max-width: calc(100vw - 32px);
  max-height: calc(100vh - 80px); display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--line-btn);
  border-radius: 14px; box-shadow: 0 30px 80px var(--apb-shadow); outline: none; }
.apb-head { display: flex; align-items: center; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--border); flex: none; }
.apb-x { order: 9; margin-left: auto; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  padding: 0; border-radius: 4px; border: 1px solid var(--line-btn); background: transparent; color: var(--text-secondary); cursor: pointer; }
.apb-title { margin: 0; font: 700 18px var(--font-body); color: var(--text-primary); }
.apb-sub { font-size: 13px; color: var(--text-secondary); }
.apb-head-slot:empty { display: none; }
.apb-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.apb-loading { margin: 0; font-size: 14px; color: var(--text-secondary); }
.apb-loading[hidden], .apb-started[hidden], .apb-sentence[hidden] { display: none; }

/* Sentence */
.apb-sentence { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 12px; font-size: 21px; font-weight: 500;
  color: var(--text-secondary); min-width: 0; }
.apb-dir { display: inline-flex; padding: 2px; border-radius: 6px; border: 1px solid var(--line-btn); background: var(--bg-base); }
.apb-dir-btn { height: 34px; padding: 0 12px; border: 0; border-radius: 4px; background: transparent; color: var(--text-secondary);
  font: 700 13px var(--font-mono); letter-spacing: .06em; cursor: pointer; white-space: nowrap; }
.apb-dir-btn--long[aria-checked="true"] { background: var(--green-primary); color: var(--text-inverted); }
.apb-dir-btn--short[aria-checked="true"] { background: var(--negative); color: var(--text-inverted); }
.apb-slot { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; max-width: 100%; padding: 6px 12px; border-radius: 6px;
  border: 1px solid var(--line-btn); background: var(--bg-base); color: var(--text-primary); font: 600 15.5px var(--font-body);
  line-height: 1.3; text-align: left; cursor: pointer; }
.apb-slot .lu { flex: none; }
.apb-slot-t { min-width: 0; overflow-wrap: anywhere; }
.apb-slot--trig { border-color: var(--aps-blue-bd); background: var(--apb-trig-bg); }
.apb-slot--trig .lu, .apb-slot--par .lu { color: var(--aps-blue); }
.apb-slot--trig.is-blank { border-style: dashed; border-color: var(--aps-blue); background: var(--apb-trig-blank-bg); color: var(--aps-blue); padding: 6px 14px; }
.apb-slot--par { padding: 6px 10px; font: 500 13px var(--font-mono); }
.apb-slot--cond { border-color: var(--aps-amber-bd); background: var(--aps-amber-bg); }
.apb-slot--cond .lu { color: var(--amber); }
.apb-slot-warn { display: inline-flex; color: var(--amber); }
.apb-slot--add { border-style: dashed; background: transparent; font-size: 14px; }
.apb-slot--add-cond { border-color: var(--apb-cond-dash); color: var(--amber); }
.apb-slot--add-sym { border-color: var(--apb-sym-dash); color: var(--green-primary); }
.apb-slot--trig.is-active, .apb-slot--par.is-active { border-color: var(--aps-blue); box-shadow: 0 0 0 3px var(--apb-trig-ring); }
.apb-slot--cond.is-active, .apb-slot--add-cond.is-active { border-color: var(--amber); box-shadow: 0 0 0 3px var(--apb-cond-ring); }
.apb-slot--add-sym.is-active { border-color: var(--green-primary); box-shadow: 0 0 0 3px var(--apb-sym-ring); }
.apb-syms { display: contents; }
.apb-sym { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 4px 0 10px; border-radius: 6px;
  border: 1px solid var(--aps-lime-bd); background: var(--aps-lime-bg); color: var(--text-primary); font: 600 13px var(--font-mono); }
.apb-sym-hip { font: 600 10px var(--font-body); color: var(--text-secondary); }
.apb-sym-x { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0;
  border-radius: 4px; background: transparent; color: var(--text-secondary); cursor: pointer; }
.apb-sym-x:hover { background: var(--table-hover); color: var(--text-primary); }
/* 28 px visual, 44 px tap area (transparent overhang; chips sit ≥ 8 px apart, so areas never overlap a neighbour) */
.apb-sym-x { position: relative; }
.apb-sym-x::after { content: ''; position: absolute; inset: -8px; }

/* Warning / rejection chips */
.apb-notes, .apb-reasons { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.apb-notes:empty, .apb-reasons:empty { display: none; }
.apb-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 12px; border-radius: 999px; font-size: 13px;
  line-height: 1.4; color: var(--text-primary); }
.apb-chip .lu { flex: none; }
.apb-chip--amber { border: 1px solid var(--aps-amber-bd); background: var(--aps-amber-bg); }
.apb-chip--amber .lu { color: var(--amber); }
.apb-chip--red { border: 1px solid var(--apb-error-bd); background: var(--aps-red-bg); }
.apb-chip--red .lu { color: var(--negative); }

/* Trays */
.apb-tray { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 10px; border: 1px solid var(--apb-tray-bd);
  background: var(--bg-band); color: var(--text-primary); }
.apb-tray[hidden] { display: none; }
.apb-tray-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.apb-tray-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--text-secondary); }
.apb-tray-dot--blue { background: var(--aps-blue); }
.apb-tray-dot--amber { background: var(--amber); }
.apb-tray-dot--lime { background: var(--green-primary); }
.apb-tray-title { font-size: 14px; font-weight: 700; }
.apb-tray-sub { font-size: 12.5px; color: var(--text-secondary); }
.apb-search { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--line-btn);
  background: var(--bg-base); color: var(--text-secondary); }
.apb-search--blue:focus-within { border-color: var(--aps-blue); }
.apb-search--amber:focus-within { border-color: var(--amber); }
.apb-search--lime:focus-within { border-color: var(--green-primary); }
.apb-search-input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text-primary);
  font: 400 14px var(--font-body); outline: none; }
.apb-search-count { margin-left: auto; font: 400 12px var(--font-mono); color: var(--text-secondary); white-space: nowrap; }
.apb-groups { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.apb-group { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.apb-group-name { padding: 0 10px 4px; font: 400 10.5px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); }
.apb-an .apb-group-name { padding-left: 0; }
.apb-item { display: flex; align-items: flex-start; gap: 10px; border-radius: 6px; border: 1px solid transparent; }
.apb-item:hover { background: var(--bg-elevated); }
.apb-item.is-on { border-color: var(--aps-blue); background: var(--aps-blue-bg); }
.apb-item-btn { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: 9px 10px; border: 0;
  border-radius: 6px; background: transparent; color: var(--text-primary); font-family: var(--font-body); text-align: left; cursor: pointer; }
.apb-item-btn[aria-disabled="true"] { cursor: not-allowed; }
.apb-item.is-locked .apb-item-t, .apb-item.is-locked .apb-item-d { opacity: .7; }
.apb-item-t { font-size: 14px; font-weight: 600; }
.apb-item-d { font-size: 12.5px; line-height: 1.4; color: var(--text-secondary); }
.apb-item-pro { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding: 10px 10px 0 0; }
.apb-plans { font-size: 12px; font-weight: 600; color: var(--green-primary); text-decoration: underline; text-underline-offset: 2px; }
.apb-empty { margin: 0; font-size: 13px; color: var(--text-secondary); }

/* Param trays */
.apb-params { display: flex; flex-direction: column; gap: 12px; }
.apb-prow { display: grid; grid-template-columns: 150px minmax(0,1fr); gap: 12px 16px; align-items: center; font-size: 14px; }
.apb-plabel { color: var(--text-secondary); }
.apb-seg, .apb-checks { display: flex; gap: 6px; flex-wrap: wrap; }
.apb-seg-btn, .apb-check { display: inline-flex; align-items: center; gap: 6px; min-width: 44px; height: 32px; padding: 0 12px;
  border-radius: 4px; border: 1px solid var(--line-btn); background: transparent; color: var(--text-secondary); font: 600 13px var(--font-body); cursor: pointer; }
.apb-check { font-family: var(--font-mono); }
.apb-seg-btn[aria-checked="true"] { border-color: var(--aps-blue); background: var(--table-hover); color: var(--text-primary); }
.apb-check[aria-checked="true"] { border-color: var(--aps-blue); background: var(--apb-pick-bg); color: var(--text-primary); }
.apb-box { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 18px; height: 18px; border-radius: 4px;
  border: 1px solid var(--text-muted); color: var(--text-inverted); }
[aria-checked="true"] > .apb-box { border-color: var(--aps-blue); background: var(--aps-blue); }
.apb-fixed { display: flex; align-items: center; gap: 8px; }
.apb-fixed-v { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 4px; background: var(--table-hover); font-weight: 600; }
.apb-fixed-n { font-size: 12.5px; color: var(--text-secondary); }
.apb-num { width: 120px; height: 36px; padding: 0 10px; border-radius: 4px; border: 1px solid var(--line-btn); background: var(--bg-base);
  color: var(--text-primary); font: 500 14px var(--font-mono); }
.apb-num:focus { outline: none; border-color: var(--amber); }
.apb-text { width: 220px; max-width: 100%; }
.apb-pblock { display: flex; flex-direction: column; gap: 10px; }
.apb-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.apb-scen { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.apb-scen-btn { display: flex; align-items: center; gap: 10px; min-width: 0; height: 48px; padding: 0 12px; border-radius: 6px;
  border: 1px solid var(--apb-tray-bd); background: var(--bg-surface); color: var(--text-primary); font: 600 14px var(--font-body); text-align: left; cursor: pointer; }
.apb-scen-btn--blue[aria-pressed="true"] { border-color: var(--aps-blue); background: var(--apb-trig-bg); }
.apb-scen-btn--amber[aria-pressed="true"] { border-color: var(--amber); background: var(--aps-amber-bg); }
.apb-scen-arrows { display: flex; gap: 2px; font: 400 11px var(--font-mono); }
.apb-scen-arrows .is-up { color: var(--green-primary); }
.apb-scen-arrows .is-down { color: var(--negative); }
.apb-scen-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apb-scen-dir { font: 400 10.5px var(--font-mono); }
.apb-scen-dir--long { color: var(--green-primary); }
.apb-scen-dir--short { color: var(--negative); }
.apb-pat { display: flex; gap: 8px; flex-wrap: wrap; }
.apb-pat-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.apb-pat-tf { font: 400 11px var(--font-mono); color: var(--text-secondary); }
.apb-pat-btn { width: 52px; height: 52px; padding: 0; border-radius: 6px; border: 1px solid var(--line-btn); font: 700 22px var(--font-mono); cursor: pointer; }
.apb-pat-btn.is-up { border-color: var(--apb-up-bd); background: var(--apb-up-bg); color: var(--green-primary); }
.apb-pat-btn.is-down { border-color: var(--apb-down-bd); background: var(--apb-down-bg); color: var(--negative); }
.apb-pat-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.apb-pat-str { font: 400 15px var(--font-mono); letter-spacing: .12em; white-space: nowrap; color: var(--text-primary); }
.apb-quarters { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); overflow: hidden; border: 1px solid var(--line-btn); border-radius: 6px; }
.apb-q-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; min-height: 72px; padding: 12px 6px; border: 0;
  border-right: 1px solid var(--border); background: var(--bg-surface); color: var(--text-secondary); font-family: var(--font-body); cursor: pointer; }
.apb-q-btn:last-child { border-right: 0; }
.apb-q-btn[aria-pressed="true"] { background: var(--apb-quarter-on-bg); color: var(--text-primary); }
.apb-q-n { font-size: 13px; font-weight: 700; text-align: center; }
.apb-q-r { font: 400 10.5px var(--font-mono); color: var(--text-secondary); }
.apb-q-ic { display: inline-flex; height: 14px; color: var(--amber); }
.apb-an-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.apb-an-chip { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 2px 0 10px; border-radius: 4px;
  border: 1px solid var(--aps-blue-bd); background: var(--aps-blue-bg); font-size: 13px; color: var(--text-primary); }
.apb-an-rows { display: flex; flex-direction: column; gap: 2px; max-height: 264px; overflow-y: auto; }
.apb-an-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent;
  color: var(--text-primary); font: 600 14px var(--font-body); text-align: left; cursor: pointer; }
.apb-an-row:hover { background: var(--bg-elevated); }
.apb-tray-foot { display: flex; justify-content: space-between; gap: 8px; }
.apb-symadd { display: flex; gap: 8px; }
.apb-symadd .apb-search { flex: 1; min-width: 0; }

/* Name, footer */
.apb-name { display: flex; flex-direction: column; gap: 6px; }
.apb-name-label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.apb-name-row { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--line-btn); background: var(--bg-base); }
.apb-name-row:focus-within { border-color: var(--green-primary); }
.apb-name-input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text-primary); font: 400 15px var(--font-body); outline: none; }
.apb-name-hint { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.apb-name-hint:empty, .apb-headline:empty, .apb-quota:empty { display: none; }
.apb-foot { flex: none; display: flex; align-items: center; gap: 12px; padding: 16px 24px; border-top: 1px solid var(--border); background: var(--bg-band);
  border-radius: 0 0 14px 14px; }
.apb-quota { font: 400 12.5px var(--font-mono); color: var(--text-secondary); }
.apb-why { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.apb-why[hidden] { display: none; }
.apb-actions { margin-left: auto; display: flex; gap: 10px; }
.apb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 4px;
  border: 1px solid transparent; font: 600 15px var(--font-body); white-space: nowrap; cursor: pointer; }
.apb-btn--lime { padding: 0 22px; background: var(--green-primary); color: var(--text-inverted); font-weight: 700; }
.apb-btn--lime:hover { background: var(--green-deep); color: var(--text-primary); }
.apb-btn--lime[disabled] { border: 1px dashed var(--aps-dash); background: transparent; color: var(--text-muted); cursor: not-allowed; }
.apb-btn--ghost { border-color: var(--line-btn); background: transparent; color: var(--text-primary); font-weight: 500; }
.apb-btn--ghost:hover { background: var(--table-hover); }
.apb-btn--sm { height: 36px; padding: 0 12px; font-size: 13px; }
.apb button:focus-visible, .apb a:focus-visible, .apb-toast button:focus-visible, .apb-toast a:focus-visible { outline: 2px solid var(--green-primary); outline-offset: 2px; }

/* Toast (bottom centre, 8 s) */
.apb-toast { position: fixed; left: 50%; bottom: 24px; z-index: 1070; transform: translateX(-50%); display: flex; align-items: center; gap: 12px;
  min-height: 48px; max-width: min(760px, calc(100vw - 32px)); padding: 6px 8px 6px 16px; box-sizing: border-box; border-radius: 8px;
  border: 1px solid var(--line-btn); background: var(--bg-elevated); box-shadow: 0 12px 30px var(--apb-shadow); color: var(--text-primary);
  font: 400 14px var(--font-body); }
.apb-toast[hidden] { display: none; }
.apb-toast--stopped { border-color: var(--aps-amber-bd); }
.apb-toast-ic { display: inline-flex; flex: none; color: var(--green-primary); }
.apb-toast--stopped .apb-toast-ic { color: var(--amber); }
.apb-toast--failed .apb-toast-ic { color: var(--negative); }
.apb-toast-text { line-height: 1.45; }
.apb-toast-text b { font-weight: 700; }
.apb-toast-actions { display: flex; flex: none; gap: 2px; }
.apb-toast-actions:empty { display: none; }
.apb-toast-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; border-radius: 4px; background: transparent;
  color: var(--text-primary); font: 600 14px var(--font-body); text-decoration: none; cursor: pointer; }
.apb-toast-btn--lime, .apb-toast-link { color: var(--green-primary); font-weight: 700; }

/* W4b — HeadlineTf (shared include _aps_headlinetf.html; handoff "HeadlineTf"): 32 px desktop, 44 px phone */
.aps-htf { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-body); }
.aps-htf-label { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.aps-htf-seg { display: inline-flex; align-self: flex-start; padding: 2px; border-radius: 6px; border: 1px solid var(--line-btn); background: var(--bg-base); }
.aps-htf-btn { height: 32px; min-width: 48px; padding: 0 14px; border: 0; border-radius: 4px; background: transparent; color: var(--text-secondary);
  font: 700 13px var(--font-mono); cursor: pointer; }
.aps-htf-btn[aria-checked="true"] { background: var(--table-hover); color: var(--text-primary); }
.aps-htf-btn:focus-visible { outline: 2px solid var(--green-primary); outline-offset: 2px; }
.aps-htf-note { margin: 0; max-width: 560px; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
@media (min-width: 576px) { .aps-htf { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; } .aps-htf-note { flex-basis: 100%; } }

/* W4b — builder: headline block, name hint, started line, copy header, edit header, quota, R3 note, symbol picker */
.apb-headline { padding: 14px 16px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-band); }
.apb-headline[hidden], .apb-name[hidden], .apb-copyhead[hidden] { display: none; }
.apb-name-hint { display: inline-flex; align-items: center; gap: 6px; }
.apb-started { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-secondary); }
.apb-started .lu { flex: none; color: var(--aps-blue); }
.apb-started b { font-weight: 700; color: var(--text-primary); }
.apb-copyhead { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 14px 16px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg-base); }
.apb-copyhead-main { flex: 1 1 260px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.apb-copyhead-kind { font: 400 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.apb-copyhead-name { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.apb-copyhead-title { font-size: 15.5px; font-weight: 700; color: var(--text-primary); overflow-wrap: anywhere; }
.apb-copyhead-rec { display: flex; flex-direction: column; gap: 3px; font-family: var(--font-mono); }
.apb-copyhead-l1 { font-size: 13px; color: var(--text-primary); }
.apb-copyhead-l1 b { color: var(--green-primary); }
.apb-copyhead-l2 { font-size: 11.5px; color: var(--text-secondary); }
.apb-copyhead-when { margin: 0; flex: 1 1 100%; font-size: 15px; line-height: 1.5; color: var(--text-primary); }
.apb-copyhead-note { margin: 0; flex: 1 1 100%; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
/* B5: template strip, "Started from <template>" strip, plan note under the condition picker */
.apb-strip { display: flex; flex-direction: column; gap: 10px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.apb-strip[hidden] { display: none; }
.apb-strip-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.apb-strip-title { font-size: 14px; }
.apb-strip-scratch { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 4px;
  border: 1px solid var(--line-btn); background: transparent; color: var(--text-primary); font: 600 13.5px var(--font-body); cursor: pointer; }
.apb-strip-scratch:hover { background: var(--table-hover); }
.apb-strip-scratch .lu { color: var(--green-primary); }
.apb-strip-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.apb-st { flex: 0 0 200px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; min-height: 44px; padding: 12px;
  border-radius: 8px; background: var(--bg-base); border: 1px solid rgba(255,255,255,.09); color: var(--text-primary);
  text-align: left; font-family: var(--font-body); cursor: pointer; }
.apb-st--zone { border-color: var(--aps-lime-chip-bd); }
.apb-st:hover { border-color: var(--aps-lime-45); }
.apb-st:focus-visible, .apb-strip-scratch:focus-visible { outline: 2px solid var(--green-primary); outline-offset: 2px; }
.apb-st-name { font-size: 13px; font-weight: 600; line-height: 1.35; }
.apb-st-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.apb-st-dir { font: 700 10px var(--font-mono); }
.apb-st-dir--long { color: var(--green-primary); }
.apb-st-dir--short { color: var(--negative); }
.apb-st .aps-tt-plan { height: 18px; padding: 0 6px; font-size: 10.5px; }
.apb-started--tpl { flex-wrap: wrap; gap: 8px 12px; padding: 10px 14px; border-radius: 8px; font-size: 13.5px;
  background: var(--aps-lime-chip); border: 1px solid var(--aps-lime-chip-bd); }
.apb-started--tpl .lu { color: var(--green-primary); }
.apb-started--tpl .aps-tt-plan { height: 18px; padding: 0 6px; font-size: 10.5px; }
.apb-started-tail { flex: 1 1 220px; color: var(--text-secondary); }
.apb-betanote { margin: 0; padding: 10px 14px; border-radius: 6px; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary);
  background: var(--aps-blue-band); }
.apb-head-slot { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 auto; }
.apb-head-rec { display: inline-flex; align-items: center; gap: 14px; min-width: 0; }
.apb-head-sep { width: 1px; height: 28px; background: var(--line-btn); }
.apb-head-last { margin-left: auto; font: 400 12px var(--font-mono); color: var(--text-secondary); white-space: nowrap; }
.apb-head-quota { display: none; margin-left: auto; font: 400 11.5px var(--font-mono); color: var(--text-secondary); white-space: nowrap; }
.apb-quota { display: inline-flex; align-items: center; gap: 8px; }
.apb-quota.is-over { color: var(--negative); }
.apb-quota[hidden] { display: none; }
.apb-foot.is-r3 { background: var(--aps-amber-bg); }
.apb-r3 { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; line-height: 1.5; color: var(--text-primary); }
.apb-r3 .lu { flex: none; color: var(--amber); }
.apb-r3[hidden] { display: none; }
.apb-syms.is-over .apb-sym { border-color: var(--negative); background: var(--aps-red-bg); }
.apb-search-count.is-over { color: var(--negative); }
.apb-sym-recent { display: flex; flex-direction: column; gap: 6px; }
.apb-sym-recent .apb-group-name, .apb-sym-list .apb-group-name { padding-left: 0; }
.apb-sym-recent-row { display: flex; gap: 6px; flex-wrap: wrap; }
.apb-recent { display: inline-flex; align-items: center; height: 32px; padding: 0 10px; border-radius: 4px; border: 1px solid var(--line-btn);
  background: transparent; color: var(--text-primary); font: 500 12px var(--font-mono); cursor: pointer; }
.apb-recent[aria-pressed="true"] { border-color: var(--aps-lime-bd); background: var(--aps-lime-bg); }
.apb-sym-list { display: flex; flex-direction: column; gap: 12px; max-height: 320px; overflow-y: auto; }
.apb-sym-group { display: flex; flex-direction: column; gap: 2px; }
.apb-sym-row { display: flex; align-items: center; gap: 10px; height: 44px; flex: none; padding: 0 8px; border: 0; border-radius: 6px;
  background: transparent; color: var(--text-primary); font-family: var(--font-body); text-align: left; cursor: pointer; }
.apb-sym-row:hover { background: var(--bg-elevated); }
.apb-sym-row[aria-checked="true"] > .apb-box { border-color: var(--green-primary); background: var(--green-primary); }
.apb-sym-row-s { font: 600 13.5px var(--font-mono); }
.apb-sym-row-d { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--text-secondary); }
.apb-sym-row-hip { font: 600 10px var(--font-body); color: var(--text-secondary); }

/* Phone (3b / 3c): full screen, 56 px header, sticky footer with a 48 px Save */
@media (max-width: 575.98px) {
  .apb-dialog { left: 0; top: 0; transform: none; width: 100%; max-width: none; height: 100%; max-height: none; border: 0; border-radius: 0; }
  .apb-head { height: 56px; padding: 0 8px; gap: 8px; background: var(--bg-deep); }
  .apb-x { order: -1; margin-left: 0; width: 44px; height: 44px; border: 0; }
  .apb-title { font-size: 16px; }
  .apb-sub { display: none; }
  .apb-head-slot { margin-left: auto; padding-right: 8px; }
  .apb-body { padding: 16px; gap: 14px; }
  .apb-sentence { font-size: 17px; column-gap: 8px; }
  .apb-slot, .apb-sym { min-height: 44px; font-size: 14.5px; }
  .apb-sym { height: 44px; font-size: 12.5px; }
  .apb-dir-btn { height: 44px; }
  .apb-tray { padding: 14px; }
  .apb-groups { grid-template-columns: minmax(0,1fr); }
  .apb-prow { grid-template-columns: minmax(0,1fr); gap: 6px; }
  .apb-seg-btn, .apb-check { height: 44px; }
  .apb-btn--sm, .apb-toast-btn { height: 44px; }
  .apb-num { height: 44px; }
  .apb-plans { display: inline-flex; align-items: center; min-height: 44px; }
  .apb-pat { gap: 6px; }
  .apb-scen-btn { flex-wrap: wrap; align-content: center; height: auto; min-height: 56px; padding: 8px 10px; column-gap: 8px; row-gap: 2px; }
  .apb-scen-n { white-space: normal; line-height: 1.25; }
  .apb-scen-dir { flex-basis: 100%; }
  .apb-q-btn { padding: 10px 2px; }
  .apb-q-n { font-size: 12px; }
  .apb-name-row { height: 48px; }
  .apb-foot { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 16px 20px; border-radius: 0; }
  .apb-quota { text-align: center; }
  .apb-why { justify-content: center; }
  .apb-actions { margin-left: 0; }
  .apb-cancel { display: none; }
  .apb-save { flex: 1; height: 48px; }
  .apb-toast { left: 16px; right: 16px; transform: none; max-width: none; bottom: 16px; flex-wrap: wrap; }
  /* W4b */
  .aps-htf-btn { height: 44px; min-width: 64px; }
  .apb-headline { padding: 14px; }
  .apb-name { position: relative; padding-bottom: 22px; }
  .apb-name-hint { position: absolute; left: 0; bottom: 0; }
  .apb-head { flex-wrap: wrap; height: auto; min-height: 56px; }
  .apb-head-slot.is-edit { margin-left: 0; padding: 0 8px 8px; flex-basis: 100%; }
  .apb-quota { justify-content: center; }
  .apb-head-quota { display: inline; }
  .apb-head-rec { flex-wrap: wrap; gap: 10px; }
  .apb-head-last { display: none; }
  .apb-head-sep { display: none; }
  .apb-recent { height: 44px; }
  .apb-sym-list { max-height: none; }
  .apb-foot.is-r3 .apb-r3 { font-size: 13px; }
}

/* Alerts Pro — scorecard mine (728) */
/* Personal scorecard /alerts/mine/scorecard/ (handoff v2 §6, 5a–5d). Shares the My-alerts page shell (.aps-mine-wrap,
   .aps-mh1, .aps-mbtn, .aps-mcard, .aps-mfoot). */
.aps-scm { --aps-veil: rgba(38,43,47,.45); }

/* OutcomeSplit (HR3): 8 px 4-part bar, 2 px gaps; solid = hit within the window, striped = decided at window end */
.aps-os { display: inline-flex; flex-direction: column; gap: 5px; max-width: 100%; font-family: var(--font-mono); }
.aps-os-bar { display: flex; gap: 2px; height: 8px; max-width: 100%; }
.aps-os-seg { min-width: 3px; height: 8px; border-radius: 1px; }
.aps-os-seg--tp { background: var(--green-primary); }
.aps-os-seg--pe { background: repeating-linear-gradient(135deg, var(--green-primary) 0 2px, transparent 2px 4px); }
.aps-os-seg--sl { background: var(--negative); }
.aps-os-seg--le { background: repeating-linear-gradient(135deg, var(--negative) 0 2px, transparent 2px 4px); }
.aps-os-empty { flex: 1; height: 8px; border-radius: 1px; background: var(--aps-track); }
.aps-os-counts { font-size: 11px; color: var(--aps-cell-ink); white-space: nowrap; }

/* Header + breadcrumb */
.aps-scm-head { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 16px; }
.aps-scm-crumb { font-size: 13px; color: var(--text-secondary); }
.aps-scm-crumb a { color: var(--green-primary); text-decoration: none; }
.aps-scm-crumb a:hover { text-decoration: underline; }
.aps-scm-crumb-sep { color: var(--text-muted); }
.aps-scm-summary { margin-left: auto; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-secondary); }

/* Filters (5a): segmented controls, 30 px desktop, 44 px phone; Free shows the longer periods locked */
.aps-scm-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.aps-scm-fgroup { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.aps-scm-flabel { font-size: 12.5px; color: var(--text-secondary); }
.aps-scm-segctl { display: flex; padding: 2px; border: 1px solid var(--line-btn); border-radius: 6px; background: var(--bg-base); }
.aps-scm-opt { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 30px; padding: 0 12px; border-radius: 4px;
  color: var(--text-secondary); font: 600 13px var(--font-body); text-decoration: none; white-space: nowrap; }
.aps-scm-opt:hover { color: var(--text-primary); }
.aps-scm-opt.is-on { background: var(--table-hover); color: var(--text-primary); }
.aps-scm-opt.is-locked { color: var(--text-muted); cursor: not-allowed; }
.aps-scm-opt:focus-visible, .aps-scm-plans:focus-visible, .aps-scm-house:focus-visible { outline: 2px solid var(--green-primary); outline-offset: 2px; }
.aps-scm-pills { display: none; }
.aps-scm-plans { font-size: 13px; font-weight: 600; color: var(--green-primary); }
.aps-scm-tfnote { font-size: 12.5px; color: var(--text-secondary); }

/* Table (5a): minmax(0,1fr) 70 180 96 72 190 180 */
.aps-scm-table { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-surface); }
.aps-scm-cols, .aps-scm-row { display: grid; grid-template-columns: minmax(0,1fr) 70px 180px 96px 72px 190px 180px; gap: 14px;
  align-items: center; padding: 14px 20px; }
.aps-scm-cols { padding: 12px 20px; background: var(--bg-band); border-bottom: 1px solid var(--border); font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.aps-scm-row { border-bottom: 1px solid var(--line-row); }
.aps-scm-row:last-child { border-bottom: 0; }
.aps-scm-r { text-align: right; }
.aps-scm-alert { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.aps-scm-name { font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--text-primary); overflow-wrap: anywhere; }
.aps-scm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.aps-scm-on { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }
.aps-scm-on--p { display: none; }
.aps-scm-earlier { font-size: 12px; color: var(--text-secondary); }
.aps-scm-row.is-deleted .aps-scm-name { color: var(--text-secondary); }
.aps-scm-n { font-family: var(--font-mono); font-size: 13px; color: var(--text-primary); }
.aps-scm-range, .aps-scm-ep { font-family: var(--font-mono); font-size: 12.5px; color: var(--aps-cell-ink); white-space: nowrap; }
.aps-scm-mini { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.aps-scm-mini-on { font-weight: 700; }
.aps-scm-explainer { margin: 0; max-width: 900px; font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }

/* Fewer than 5 settled firings in total (5c): replaces the table */
.aps-scm-few { display: flex; flex-direction: column; gap: 16px; padding: 32px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-surface); }
.aps-scm-segs { display: flex; gap: 6px; }
.aps-scm-seg { flex: 1; height: 8px; box-sizing: border-box; border-radius: 2px; border: 1px solid var(--text-muted); background: transparent; }
.aps-scm-seg.is-on { border-color: var(--green-primary); background: var(--green-primary); }
.aps-scm-few-line { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--text-primary); }
.aps-scm-few-body { margin: 0; max-width: 620px; font-size: 14px; line-height: 1.6; color: var(--aps-cell-ink); }
.aps-scm-next { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 13px; color: var(--text-secondary); }
.aps-scm-house { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600;
  color: var(--green-primary); }

/* Free after the beta (5c / 5d): older data blurred under "Your full record is kept" */
.aps-scm-lock { position: relative; border-radius: 10px; overflow: hidden; }
.aps-scm-lock-ghost { display: flex; flex-direction: column; gap: 8px; filter: blur(6px); opacity: .6; }
.aps-scm-lock-ghost span { height: 56px; border-radius: 8px; background: var(--bg-surface); }
.aps-scm-lock-over { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 16px; text-align: center; background: var(--aps-veil); }
.aps-scm-lock-title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.aps-scm-lock-body { font-size: 13.5px; color: var(--aps-cell-ink); }

/* Below 1200 px the 7-column grid no longer fits: one card per alert (5b / 5d); two per row on tablets */
@media (max-width: 1199.98px) {
  .aps-scm-table { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; border: 0; border-radius: 0;
    overflow: visible; background: transparent; }
  .aps-scm-cols { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .aps-scm-row { grid-template-columns: minmax(0,1fr) auto; grid-template-areas: "alert alert" "win range" "split ep" "mini mini";
    gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-surface); }
  .aps-scm-row:last-child { border-bottom: 1px solid var(--border); }
  .aps-scm-row.is-few { grid-template-areas: "alert alert" "win win" "mini mini"; }
  .aps-scm-row.is-few .aps-scm-range, .aps-scm-row.is-few .aps-scm-ep, .aps-scm-row.is-few .aps-scm-split { display: none; }
  .aps-scm-alert { grid-area: alert; }
  .aps-scm-n { display: none; }
  .aps-scm-win { grid-area: win; }
  .aps-scm-range { grid-area: range; justify-self: end; font-size: 12px; }
  .aps-scm-split { grid-area: split; min-width: 0; }
  .aps-scm-ep { grid-area: ep; justify-self: end; font-size: 12px; }
  .aps-scm-mini { grid-area: mini; padding-top: 8px; border-top: 1px solid var(--line-row); font-size: 11.5px; white-space: normal; }
  .aps-scm-on--d { display: none; }
  .aps-scm-on--p { display: inline; }
}
@media (max-width: 767.98px) {
  .aps-scm-table { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 575.98px) {
  .aps-scm-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .aps-scm-summary { margin-left: 0; font-size: 11.5px; }
  .aps-scm-filters { flex-direction: column; align-items: stretch; gap: 10px; }
  .aps-scm-fgroup--seg { display: none; }
  .aps-scm-pills { display: flex; gap: 8px; position: relative; }
  .aps-scm-pill { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 30px 0 14px;
    border: 1px solid var(--line-btn); border-radius: 22px; background: var(--bg-base); font-size: 13px; color: var(--text-secondary); }
  .aps-scm-pill::after { content: ""; position: absolute; right: 14px; top: 50%; margin-top: -2px; border: 4px solid transparent;
    border-top-color: var(--text-secondary); border-bottom: 0; pointer-events: none; }
  .aps-scm-pill:focus-within { outline: 2px solid var(--green-primary); outline-offset: 2px; }
  .aps-scm-pill-k { flex: 0 0 auto; }
  .aps-scm-pill select { appearance: none; -webkit-appearance: none; flex: 1 1 auto; min-width: 0; height: 44px; margin: 0; padding: 0; border: 0;
    background: transparent; color: var(--text-primary); font: inherit; font-weight: 600; cursor: pointer; outline: 0; }
  .aps-scm-pills-go { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .aps-scm-plans { display: inline-flex; align-items: center; min-height: 44px; }
  .aps-scm-crumb a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
  .aps-scm-few { gap: 12px; padding: 16px; }
  .aps-scm-few-line { font-size: 14px; }
  .aps-scm-next { font-size: 12.5px; }
  .aps-scm-lock-ghost { gap: 12px; }
  .aps-scm-lock-ghost span { height: 96px; border-radius: 12px; }
  .aps-scm-lock .aps-mbtn { height: 44px; padding: 0 20px; }
}

/* Alerts Pro — bell (728) */
/* Row bell + popover (handoff v2 §5, Bell + BellPopover; alerts_bell.js). Default = outline, open = blue
   (aria-expanded), filled = lime tint + a lime dot, so it reads without colour. 32 px desktop, 44 px phone. */
.atp-bell, .atp-bellpop, .atp-bellpop-scrim {
  --bell-blue-bg: rgba(91,155,213,.14); --bell-lime-bd: rgba(140,202,43,.50); --bell-lime-bg: rgba(140,202,43,.12);
  --bell-sep: rgba(255,255,255,.09); --bell-grip: rgba(255,255,255,.22); --bell-scrim: rgba(26,30,33,.72);
  --bell-shadow: rgba(0,0,0,.45); --bell-red-bd: rgba(224,82,82,.40); --bell-red-bg: rgba(224,82,82,.10);
}
.atp-bell { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 32px; height: 32px; padding: 0; box-sizing: border-box; border: 1px solid var(--line-btn); border-radius: 6px;
  background: transparent; color: var(--text-secondary); font: 500 12.5px var(--font-body); line-height: 1; cursor: pointer;
  vertical-align: middle; }
.atp-bell .lu { width: 15px; height: 15px; flex: none; }
.atp-bell:hover { color: var(--text-primary); border-color: var(--text-muted); }
.atp-bell:focus-visible { outline: 2px solid var(--green-primary); outline-offset: 2px; }
.atp-bell[aria-expanded="true"] { border-color: var(--zh-entry); background: var(--bell-blue-bg); color: var(--zh-entry); }
.atp-bell.is-filled { border-color: var(--bell-lime-bd); background: var(--bell-lime-bg); color: var(--green-primary); }
.atp-bell-dot { display: none; position: absolute; top: 5px; right: 5px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--green-primary); box-shadow: 0 0 0 2px var(--bg-surface); }
.atp-bell.is-filled .atp-bell-dot { display: block; }
.atp-bell--labelled { width: auto; padding: 0 12px 0 12px; }
.atp-bell-lbl { color: inherit; }
.os-pair-actions .atp-bell { margin: 0; }
.atp-bell-group { margin-left: .4rem; }

.atp-bellpop { position: absolute; z-index: 1055; width: 340px; box-sizing: border-box; padding: 8px;
  background: var(--bg-elevated); border: 1px solid var(--line-btn); border-radius: 10px;
  box-shadow: 0 20px 50px var(--bell-shadow); color: var(--text-primary); font: 400 14px/1.4 var(--font-body); text-align: left; }
.atp-bellpop:focus { outline: none; }
.atp-bellpop[aria-busy="true"] { opacity: .75; }
.atp-bellpop-arrow { position: absolute; top: -7px; left: 18px; width: 12px; height: 12px; background: var(--bg-elevated);
  border-left: 1px solid var(--line-btn); border-top: 1px solid var(--line-btn); transform: rotate(45deg); }
.atp-bellpop.is-above .atp-bellpop-arrow { top: auto; bottom: -7px; border: 0; border-right: 1px solid var(--line-btn);
  border-bottom: 1px solid var(--line-btn); }
.atp-bellpop.no-arrow .atp-bellpop-arrow { display: none; }
.atp-bellpop-grip { display: none; width: 36px; height: 4px; border-radius: 2px; background: var(--bell-grip); margin: 0 auto 10px; }
.atp-bellpop-body { position: relative; }
.atp-bellpop-title { padding: 8px 10px; font-size: 14px; font-weight: 700; }
.atp-bellpop-mono { font-family: var(--font-mono); }
.atp-bellpop-opt, .atp-bellpop-row { display: flex; width: 100%; align-items: center; gap: 10px; min-height: 42px; padding: 6px 10px;
  box-sizing: border-box; border: 0; border-radius: 6px; background: transparent; color: var(--text-primary);
  font: 500 14px var(--font-body); text-align: left; text-decoration: none; cursor: pointer; }
.atp-bellpop-opt:hover, .atp-bellpop-row:hover, .atp-bellpop-opt:focus-visible, .atp-bellpop-row:focus-visible {
  background: var(--table-hover); color: var(--text-primary); text-decoration: none; outline: none; }
.atp-bellpop-row--lime, .atp-bellpop-row--lime:hover, .atp-bellpop-row--lime:focus-visible { color: var(--green-primary); font-weight: 600; }
.atp-bellpop-opt:disabled, .atp-bellpop-row:disabled { cursor: progress; }
.atp-bellpop-optlbl { flex: 1; min-width: 0; }
.atp-bellpop-ic { width: 16px; height: 16px; flex: none; color: var(--text-secondary); }
.atp-bellpop-ic--blue { color: var(--zh-entry); }
.atp-bellpop-ic--lime, .atp-bellpop-head .atp-bellpop-ic { color: var(--green-primary); }
.atp-bellpop-head.is-r2 .atp-bellpop-ic { color: var(--amber); }
.atp-bellpop-chev { width: 16px; height: 16px; margin-left: auto; color: var(--text-secondary); }
.atp-bellpop-sep { height: 1px; margin: 6px 4px; background: var(--bell-sep); }
.atp-bellpop-back { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; border: 0; background: transparent;
  color: var(--text-secondary); font: 500 13px var(--font-body); cursor: pointer; }
.atp-bellpop-back .atp-bellpop-mono { color: var(--text-primary); }
.atp-bellpop-back .lu { width: 16px; height: 16px; }
.atp-bellpop-two { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.atp-bellpop-meta { font: 400 11px var(--font-mono); color: var(--text-secondary); }
.atp-bellpop-done { display: flex; flex-direction: column; gap: 10px; padding: 10px 10px 0; }
.atp-bellpop-head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.atp-bellpop-text { font-size: 13.5px; line-height: 1.5; color: var(--aps-cell-ink); }
.atp-bellpop-in { display: flex; align-items: flex-start; gap: 8px; color: var(--text-primary); }
.atp-bellpop-in .atp-bellpop-ic { margin-top: 2px; }
.atp-bellpop-filled { display: flex; flex-direction: column; gap: 10px; padding: 4px 10px 10px; }
.atp-bellpop-acts { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; }
.atp-bellpop-filled .atp-bellpop-acts { padding: 0; }
.atp-bellpop-btn { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 14px; box-sizing: border-box;
  border: 1px solid var(--line-btn); border-radius: 4px; background: transparent; color: var(--text-primary);
  font: 600 13px var(--font-body); text-decoration: none; cursor: pointer; }
.atp-bellpop-btn:hover, .atp-bellpop-btn:focus-visible { background: var(--table-hover); color: var(--text-primary); text-decoration: none; }
.atp-bellpop-btn--lime, .atp-bellpop-btn--lime:hover { border-color: var(--green-primary); background: var(--green-primary); color: var(--text-inverted); }
.atp-bellpop-btn--red, .atp-bellpop-btn--red:hover { border-color: var(--bell-red-bd); color: var(--negative); }
.atp-bellpop-cta { display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border: 0; border-radius: 4px;
  background: var(--green-primary); color: var(--text-inverted); font: 700 14px var(--font-body); cursor: pointer; }
.atp-bellpop-cta .lu { width: 16px; height: 16px; }
.atp-bellpop-btn:focus-visible, .atp-bellpop-cta:focus-visible, .atp-bellpop-back:focus-visible {
  outline: 2px solid var(--green-primary); outline-offset: 2px; }
.atp-bellpop-msg { display: flex; flex-direction: column; gap: 2px; margin: 0 10px 6px; padding: 6px 10px; border-radius: 6px;
  font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); background: var(--bell-sep); }
.atp-bellpop-msg.is-error { color: var(--negative); background: var(--bell-red-bg); }
.atp-bellpop-note { margin: 0; padding: 6px 10px 10px; font-size: 13px; color: var(--text-secondary); }
.atp-bellpop-scrim { position: fixed; inset: 0; z-index: 1054; background: var(--bell-scrim); }

/* The screener's phone Pair column is capped at 112 px (2026-09-28); with the bell in it the cap would paint the
   actions over Price, so the column grows to fit instead. */
@media (max-width: 767.98px) {
  .atp-shell .os-table td.os-td-pair, .atp-shell .os-table th.os-th-pair { max-width: none; }
}
@media (max-width: 575.98px) {
  .atp-bell { width: 44px; height: 44px; }
  .atp-bell .lu { width: 18px; height: 18px; }
  .atp-bell--labelled { width: auto; height: 44px; padding: 0 14px; }
  .atp-bellpop, .atp-bellpop.is-sheet { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: 85vh;
    overflow-y: auto; border-radius: 16px 16px 0 0; border-bottom: 0; padding: 10px 12px 24px; }
  .atp-bellpop-arrow { display: none; }
  .atp-bellpop-grip { display: block; }
  .atp-bellpop-title { font-size: 16px; }
  .atp-bellpop-opt, .atp-bellpop-row { min-height: 52px; font-size: 15px; border-radius: 0; border-bottom: 1px solid var(--border); }
  .atp-bellpop-back { height: 44px; }
  .atp-bellpop-btn { height: 44px; }
  .atp-bellpop-cta { height: 48px; }
}

/* Alerts Pro — hub hero (728 W7) */
/* /alerts/ (handoff v2 §1, 1a–1e): the Alerts Pro header, the signed-in strip + "Your alerts" (HR2, filled by
   alerts_hero.js), and the "How it works" hero (R10) that the My-alerts first visit reuses. */
.aph-hub { display: flex; flex-direction: column; gap: 12px; margin: 28px 0 44px; }
.aph-h { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 1.08; letter-spacing: -.02em; color: var(--text-primary); max-width: 820px; }
.aph-lead { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text-secondary); max-width: 640px; }
.aph-hub > .aph { margin-top: 16px; }
.aph-strip { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 20px; margin-top: 12px; border-radius: 10px; border: 1px solid var(--aps-lime-bd); background: var(--bg-surface); box-sizing: border-box; }
.aph-strip[hidden], .aph-mine[hidden], .aph-mine-empty[hidden], .aph-mine-all[hidden] { display: none; }
.aph-strip-text { font-size: 15px; color: var(--text-primary); }
.aph-strip-btns { margin-left: auto; display: flex; gap: 10px; }
.aph-strip-btns .aps-mbtn { height: 40px; font-size: 14px; }
.aph-mine { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.aph-mine-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.aph-mine-h { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 28px; color: var(--text-primary); }
.aph-mine-sub { font-size: 13px; color: var(--text-secondary); }
.aph-mine-sc { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--green-primary); text-decoration: none; }
.aph-mine-sc:hover, .aph-mine-all:hover { color: var(--green-primary); text-decoration: underline; }
.aph-mine-box { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-surface); overflow: hidden; }
.aph-mrow { display: grid; grid-template-columns: 112px minmax(0,1fr) auto; gap: 16px; align-items: center; padding: 10px 20px; border-bottom: 1px solid var(--line-row); }
.aph-m-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.aph-m-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.aph-m-title { font-size: 15px; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.aph-m-name .aps-pl { flex: none; }
.aph-m-last { font-size: 12.5px; color: var(--text-muted); }
.aph-m-rec { justify-self: end; }
.aph-m-rec .aps-tfr { align-items: flex-end; }
.aph-mine-empty { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; margin: 0; padding: 16px 20px; font-size: 14.5px; color: var(--text-secondary); border-bottom: 1px solid var(--line-row); }
.aph-mine-empty .aps-mbtn { flex: none; height: 44px; }
.aph-mine-empty[hidden] { display: none; }
.aps-l-hero[data-aph-signed] .aps-l-hero-grid[data-aph-hero] { display: none; }
.aph-mine-all { display: flex; align-items: center; height: 48px; padding: 0 20px; font-size: 14px; font-weight: 600; color: var(--green-primary); text-decoration: none; }
.aph-anchor { scroll-margin-top: 80px; }

.aph-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; padding: 28px; }
.aph-card[hidden], .aph-bar[hidden], .aph-ctas[hidden] { display: none; }
.aph-top { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.aph-title { margin: 0; font-family: var(--font-body) !important; letter-spacing: 0; line-height: 1.3; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.aph-ctrls { margin-left: auto; display: flex; gap: 4px; }
.aph-ctrl { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 4px; border: 1px solid var(--line-btn); background: transparent; color: var(--text-secondary); cursor: pointer; }
.aph-ctrl:hover { background: var(--table-hover); color: var(--text-primary); }
.aph-ctrl:focus-visible, .aph-bar:focus-visible { outline: 2px solid var(--green-primary); outline-offset: 2px; }
.aph-steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--border); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.aph-step { display: flex; gap: 16px; padding: 22px; background: var(--bg-band); }
.aph-step-ic { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 8px; background: var(--aps-lime-bg); border: 1px solid var(--aps-lime-bd); color: var(--green-primary); box-sizing: border-box; }
.aph-step-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.aph-step-n { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--green-primary); }
.aph-step-t { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.aph-step-d { font-size: 14px; line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; }
.aph-ctas { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.aph-bar { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 18px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-primary); font: 600 14px var(--font-body); text-align: left; cursor: pointer; box-sizing: border-box; }
.aph-bar:hover { background: var(--table-hover); }
.aph-bar-path { font-weight: 400; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.aph-bar-note { margin-left: auto; flex: none; font-size: 12px; font-weight: 400; color: var(--text-secondary); }
.aph-saveerr { margin: 8px 0 0; font-size: 13px; color: var(--amber); }
.aph-saveerr[hidden] { display: none; }

@media (max-width: 575.98px) {
  .aph-hub { gap: 10px; margin: 20px 0 32px; }
  .aph-h { font-size: 30px; }
  .aph-lead { font-size: 15px; line-height: 1.55; }
  .aph-strip { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
  .aph-strip-btns { margin-left: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .aph-strip-btns .aps-mbtn { height: 44px; }
  .aph-mine-h { font-size: 24px; }
  .aph-mine-sc { font-size: 13.5px; display: inline-flex; align-items: center; min-height: 44px; }
  .aph-mrow { grid-template-columns: minmax(0,1fr); gap: 4px; align-items: start; padding: 8px 14px 14px; }
  .aph-m-title { font-size: 14.5px; }
  .aph-m-rec { justify-self: start; }
  .aph-m-rec .aps-tfr { align-items: flex-start; }
  .aph-mine-empty { flex-direction: column; align-items: flex-start; }
  .aph-mine-all, .aph-mine-empty { padding-left: 14px; padding-right: 14px; }
  .aph-card { padding: 16px; }
  .aph-top { margin-bottom: 14px; }
  .aph-title { font-size: 14px; }
  .aph-ctrls { gap: 2px; margin-right: -10px; }
  .aph-ctrl { width: 44px; height: 44px; border: 0; }
  .aph-steps { grid-template-columns: minmax(0,1fr); gap: 14px; background: none; border: 0; border-radius: 0; overflow: visible; }
  .aph-step { gap: 12px; padding: 0; background: none; }
  .aph-step-ic { width: 36px; height: 36px; }
  .aph-step-ic .lu { width: 16px; height: 16px; }
  .aph-step-text { display: block; }
  .aph-step-n { font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--text-primary); }
  .aph-step-n::after { content: " · "; }
  .aph-step-t { font-size: 14px; }
  .aph-step-d { display: block; margin-top: 3px; font-size: 13px; line-height: 1.5; }
  .aph-ctas { flex-direction: column; gap: 10px; margin-top: 14px; }
  .aph-ctas .aps-mbtn { width: 100%; min-height: 44px; }
  .aph-ctas .aps-mbtn--lime { height: 48px; }
  .aph-bar { padding: 0 14px; gap: 8px; }
  .aph-bar-path { display: none; }
}

/* Alerts v2 landing, /alerts/ signed out (829 B2, handoff §1.1–1.7 + §7). Scoped .aps-l-*; tokens from :root and the
   shared .aps role block. One breakpoint at 720 px (phone below). Geometry from data stays in inline style (R7). */
.aps-l { padding-top: 72px; color: var(--text-primary); font-family: var(--font-body); }
.aps-l-in { max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 3.2vw, 40px); box-sizing: border-box; }
.aps-l .atp-crumbs { margin-bottom: 28px; }
.aps-l-sec { border-top: 1px solid var(--border); }
.aps-l-sec > .aps-l-in { padding-top: clamp(56px, 6.5vw, 88px); padding-bottom: clamp(56px, 6.5vw, 88px); }
.aps-l-h1 { margin: 0 0 18px; font: 400 clamp(34px, 4.3vw, 54px)/1.08 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.aps-l-h2 { margin: 0 0 36px; max-width: 760px; font: 400 clamp(28px, 3.2vw, 42px)/1.15 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.aps-l-h2--tight { margin-bottom: 10px; }
.aps-l-h2--flush { margin-bottom: 0; }
.aps-l-h3 { margin: 0; font: 400 clamp(22px, 2.2vw, 28px)/1.2 var(--font-display); letter-spacing: -.02em; }
.aps-l-lead { margin: 0 0 28px; max-width: 560px; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.6; color: var(--text-secondary); text-wrap: pretty; }
.aps-l-sublead { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text-secondary); text-wrap: pretty; }
.aps-l-intro { margin: 0 0 8px; font-size: 16.5px; line-height: 1.6; color: var(--cell-ink); text-wrap: pretty; }
.aps-l-label { font: 400 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.aps-l-btn { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; box-sizing: border-box; border-radius: 4px;
  font: 700 15px var(--font-body); text-decoration: none; cursor: pointer; }
.aps-l-btn--lime { background: var(--green-primary); color: var(--text-inverted); border: 0; }
.aps-l-btn--lime:hover { background: var(--green-deep); color: var(--text-primary); }
.aps-l-btn--ghost { padding: 0 20px; background: transparent; color: var(--text-primary); border: 1px solid var(--line-btn); }
.aps-l-btn--ghost:hover { background: var(--table-hover); color: var(--text-primary); }
.aps-l-btn--sm { height: 44px; padding: 0 16px; font-size: 14px; font-weight: 600; }
.aps-l-btn:focus-visible, .aps-l-seg-btn:focus-visible, .aps-l-bill-btn:focus-visible, .aps-l-prow-btn:focus-visible,
.aps-l-faqbtn:focus-visible, .aps-l-more:focus-visible { outline: 2px solid var(--green-primary); outline-offset: 2px; }
.aps-l-links { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 2px 0 0; font-size: 14.5px; font-weight: 600; }
.aps-l-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--green-primary); text-decoration: none; }
.aps-l-links a:hover { text-decoration: underline; }

/* 1.1 Hero */
.aps-l-hero > .aps-l-in { padding-bottom: clamp(48px, 6vw, 80px); }
.aps-l-hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(32px, 4vw, 56px); align-items: center; }
.aps-l-hero-text, .aps-l-hero-vis { min-width: 0; }
.aps-l-hero .section-tag { margin-bottom: 16px; }
.aps-l-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.aps-l-hero-vis { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; }
.aps-l-tgcol { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.aps-l-gradecol { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.aps-l-cap { font: 400 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); }
.aps-l-tgcol .alerts-msg { box-shadow: none; }
.aps-l-dot--short { background: var(--negative); }
.aps-l-dirchip { font: 400 11px var(--font-mono); padding: 2px 7px; border-radius: 4px; }
.aps-l-dirchip--short { background: var(--aps-red-bg); color: var(--negative); }
.aps-l-dirchip--long { background: var(--aps-lime-bg); color: var(--green-primary); }
.aps-l-msgtitle { font: 400 11px var(--font-mono); color: var(--cell-ink); }
.aps-l-msgdata { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
.aps-l-grades { flex: 1; display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.aps-l-grade { flex: 1; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 10px; background: var(--bg-surface);
  border: 1px solid var(--border); }
.aps-l-grade .lu { flex: none; }
.aps-l-grade--win { border-color: var(--aps-lime-bd); }
.aps-l-grade--win .lu { color: var(--green-primary); }
.aps-l-grade--loss { border-color: var(--aps-red-bd); }
.aps-l-grade--loss .lu { color: var(--negative); }
.aps-l-grade-tf { width: 26px; flex: none; font: 700 15px var(--font-mono); }
.aps-l-grade-text { min-width: 0; font-size: 13.5px; line-height: 1.45; color: var(--cell-ink); }   /* "<b>Won</b>, target hit on candle 9" */
.aps-l-grade-text b { font-weight: 700; color: var(--text-primary); }
.aps-l-grade--open { border-color: var(--line-btn); }
.aps-l-grade--open .lu { color: var(--text-secondary); }
.aps-l-gradenote { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.aps-l-gradesub { margin: -4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.aps-l-gradelink { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; margin-top: -10px; font-size: 13.5px;
  font-weight: 600; color: var(--green-primary); text-decoration: none; }
.aps-l-gradelink:hover { text-decoration: underline; }
.aps-l-gradelink:focus-visible { outline: 2px solid var(--green-primary); outline-offset: 2px; }
.aps-l-hub { margin: 0; gap: 0; }
.aps-l-hub .aph-strip { border-color: var(--border); }
.aps-l-hub .aph-mine { margin-top: 36px; }

/* 1.3 Live proof */
.aps-l-proof { display: flex; flex-direction: column; gap: 18px; }
.aps-l-proofhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; }
.aps-l-proofhead-text { max-width: 720px; }
.aps-l-proofhead-text .aps-l-h2 { text-wrap: balance; }
.aps-l-feed { display: inline-flex; align-items: center; gap: 8px; font: 400 12px var(--font-mono); color: var(--text-secondary); }
.aps-l-feed-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
.aps-l-feed--live .aps-l-feed-dot { background: var(--green-primary); }
.aps-l-feed--cached .aps-l-feed-dot { background: var(--amber); }
.aps-l-cached { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 8px; border: 1px solid var(--aps-amber-bd);
  background: var(--aps-amber-bg); color: var(--amber); font-size: 14px; line-height: 1.5; }
.aps-l-cached .lu { flex: none; margin-top: 2px; }
.aps-l-down { display: flex; flex-wrap: wrap; gap: 16px 24px; padding: 28px; border-radius: 12px; background: var(--bg-surface); border: 1px dashed var(--aps-dash); }
.aps-l-down-ic { display: flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--aps-faint); color: var(--text-secondary); }
.aps-l-down-text { flex: 1 1 300px; display: flex; flex-direction: column; gap: 8px; }
.aps-l-down-title { margin: 0; font-size: 17px; font-weight: 700; }
.aps-l-down-body { margin: 0; max-width: 640px; font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); }
.aps-l-down .aps-l-links { margin-top: 6px; font-size: 14px; gap: 4px 20px; }
.aps-l-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.aps-l-metrics .aps-mt { border-color: var(--border); }
.aps-l-metrics .aps-mt--off { border: 1px dashed var(--aps-dash); background: var(--bg-surface); }
.aps-l-chart { border-radius: 12px; background: var(--bg-surface); border: 1px solid var(--border); overflow: hidden; }
.aps-l-chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 16px 18px;
  border-bottom: 1px solid var(--line-row); }
.aps-l-chart-title { display: flex; flex-direction: column; gap: 3px; }
.aps-l-chart-title b { font-size: 16px; }
.aps-l-chart-title > span { font-size: 12.5px; color: var(--text-secondary); }
.aps-l-chart-title > .aps-l-chart-def { font-size: 13.5px; color: var(--cell-ink); }
.aps-l-axis-n { text-align: right; }
.aps-l-axis-n .aps-tip-t { justify-content: flex-end; }
/* phone key row + inline tip panel (delta 2 §1.3); desktop uses the hover card */
.aps-l-tipcard { max-width: 300px; }   /* the shared .os-tip is 320 px; the record tips are 300 (delta 2) */
.aps-l-sec .aps-cy { margin-top: 4px; }   /* h2 36 px + 4 = the step line's 40 px (delta 2) */
.aps-l-tipkeys, .aps-l-tippanel { display: none; }
.aps-l-tipkey { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; border: 0; background: transparent;
  color: var(--text-secondary); font: 600 13px var(--font-body); cursor: pointer; }
.aps-l-tipkey[aria-expanded="true"] { color: var(--text-primary); }
.aps-l-tipkey:focus-visible, .aps-l-tippanel-x:focus-visible { outline: 2px solid var(--green-primary); outline-offset: 2px; }
.aps-l-tippanel { position: relative; margin: 0 16px 12px; padding: 12px 44px 12px 14px; border-radius: 10px; background: var(--bg-elevated);
  border: 1px solid var(--border); box-shadow: 0 12px 40px rgba(0,0,0,.45); font-size: 13px; line-height: 1.45; }
.aps-l-tippanel .os-tip-what { margin: 0; }
.aps-l-tippanel-x { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 0; background: transparent; color: var(--text-secondary); cursor: pointer; }
.aps-l-seg { display: flex; gap: 2px; padding: 3px; border-radius: 6px; background: var(--bg-deep); border: 1px solid var(--border); }
.aps-l-seg-btn { min-width: 44px; height: 32px; padding: 0 12px; border: 0; border-radius: 4px; background: transparent; color: var(--text-secondary);
  font: 600 13px var(--font-mono); cursor: pointer; }
.aps-l-seg-btn--wide { min-width: 88px; }
.aps-l-seg-btn[aria-checked="true"] { background: var(--table-hover); color: var(--text-primary); }
.aps-l-info { margin: 0; padding: 10px 18px; font-size: 13px; line-height: 1.5; color: var(--text-secondary); background: var(--aps-blue-band);
  border-bottom: 1px solid rgba(91,155,213,.25); }
.aps-l-rows { padding: 6px 0; }
.aps-l-rows .aps-rr-dot { border-color: var(--bg-surface); }
.aps-l-axis { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 2fr) 150px 172px; column-gap: 16px; align-items: center;
  min-height: 44px; padding: 6px 18px; box-sizing: border-box; font-size: 13px; color: var(--text-secondary); }
.aps-l-axis-scale { position: relative; height: 14px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
/* delta 3 (boards 9a–9j): readable headers, sort buttons, status line, Timeframe / Direction controls, phone Sort by */
.aps-l-axis-name { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
.aps-l-axis-name b { font-size: 13px; font-weight: 600; color: var(--cell-ink); }
.aps-l-axis-hint { font-size: 12px; color: var(--text-secondary); }
.aps-l-sorth { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 8px; border: 0; border-radius: 4px; background: transparent;
  color: var(--text-secondary); font: 600 13px var(--font-body); cursor: pointer; }
.aps-l-sorth:hover { background: var(--table-hover); }
.aps-l-sorth:not([data-sort-state="none"]) { color: var(--text-primary); }
.aps-l-axis-n .aps-l-sorth { margin-right: -8px; }
.aps-l-sortic { display: inline-flex; }
.aps-l-sortic .lu { display: none; }
.aps-l-sorth[data-sort-state="none"] .aps-l-sortic-none { display: inline-flex; color: var(--text-muted); }
.aps-l-sorth[data-sort-state="desc"] .aps-l-sortic-desc, .aps-l-sorth[data-sort-state="asc"] .aps-l-sortic-asc { display: inline-flex; color: var(--green-primary); }
.aps-l-sorth:focus-visible, .aps-l-reset:focus-visible, .aps-l-sortdir:focus-visible, .aps-rr-namebtn:focus-visible,
.aps-l-dirchips .zh-chip:focus-visible { outline: 2px solid var(--green-primary); outline-offset: 2px; }
.aps-l-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 36px; padding: 4px 18px; box-sizing: border-box;
  border-bottom: 1px solid var(--line-row); font-size: 12.5px; color: var(--text-secondary); }
.aps-l-status-n { font: 700 12.5px var(--font-mono); color: var(--text-primary); }
.aps-l-reset { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 4px; border: 0; background: transparent;
  color: var(--green-primary); font: 600 12.5px var(--font-body); cursor: pointer; }
.aps-l-reset[hidden] { display: none; }
.aps-l-reset--lg { min-height: 44px; font-size: 13.5px; }
.aps-l-chart .aps-l-off { display: none !important; }   /* not .is-off: ZoneHunter / ProvenAlpha use that for 'dimmed' */
.aps-rr[hidden] { display: none; }
.aps-l-nameshead { display: none; }
.aps-l-fempty { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 12px 18px; font-size: 14px; color: var(--cell-ink); }
.aps-l-fempty[hidden] { display: none; }
.aps-l-fempty .lu { flex: none; color: var(--text-secondary); }
.aps-l-ctls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.aps-l-ctl { display: flex; flex-direction: column; gap: 6px; }
.aps-l-ctl-lab { font: 400 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.aps-l-dirchips { gap: 6px; }
.aps-l-dirchips .zh-chip { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 14px; box-sizing: border-box;
  font: 600 12.5px var(--font-mono); }
.aps-l-sortby { display: none; }
.aps-l-sortby-row { display: flex; gap: 8px; }
.aps-l-sortdir { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 52px; height: 52px; box-sizing: border-box;
  border-radius: 6px; border: 1px solid var(--aps-lime-45); background: transparent; color: var(--green-primary); cursor: pointer; }
.aps-l-sortdir:disabled { border-color: var(--border); color: var(--text-faint); cursor: default; }
.aps-l-sortdir .lu { display: none; }
.aps-l-sortdir[data-dir-state="desc"] .aps-l-sortdir-desc, .aps-l-sortdir[data-dir-state="asc"] .aps-l-sortdir-asc { display: inline-flex; }
.aps-rr-nm { cursor: help; text-underline-offset: 3px; }
.aps-rr-nm.aps-tip-t { display: inline; }
.aps-rr-nm:hover, .aps-rr-nm[aria-describedby] { color: var(--text-primary); text-decoration: underline solid var(--aps-dash); }
.aps-rr-namebtn, .aps-rr-desc { display: none; }
.aps-l-tipcard--wide { max-width: 360px; }
.aps-l-tipcard .os-tip-how { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-row); font-size: 12px; font-weight: 500; }
.aps-l-tipcard .os-tip-how[hidden] { display: none; }
.aps-l-ax { position: absolute; transform: translateX(-50%); }
.aps-l-ax--0 { left: 0; transform: none; }
.aps-l-ax--25 { left: 25%; }
.aps-l-ax--50 { left: 50%; color: var(--text-primary); }
.aps-l-ax--75 { left: 75%; }
.aps-l-ax--100 { right: 0; transform: none; }
.aps-l-tfnone { margin: 0; padding: 14px 18px; font-size: 13px; color: var(--text-muted); }
.aps-l-pub { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.aps-l-pubhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.aps-l-pubhead > span { font-size: 13.5px; color: var(--text-secondary); }
.aps-l-table { border: 1px solid var(--border); border-radius: 10px; background: var(--table-bg); overflow: hidden; }
.aps-l-thead, .aps-l-prow-btn { display: grid; grid-template-columns: 112px minmax(0, 1.4fr) minmax(250px, 1.3fr) 64px 96px 100px 24px; gap: 10px 14px; align-items: center; }
.aps-l-thead { min-height: 38px; padding: 0 18px; background: var(--bg-band); color: var(--text-muted); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.aps-l-num { text-align: right; }
.aps-l-prow { border-top: 1px solid var(--line-row); }
.aps-l-thead + .aps-l-prow { border-top: 0; }
.aps-l-prow-btn { width: 100%; min-height: 60px; padding: 0 18px; border: 0; background: transparent; color: var(--text-primary); text-align: left;
  font: inherit; cursor: pointer; }
.aps-l-prow-btn:hover { background: var(--table-hover); }
.aps-l-p-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.aps-l-p-name b { font-size: 14.5px; font-weight: 600; }
.aps-l-p-dir { font: 700 10.5px var(--font-mono); }
.aps-l-p-dir--long { color: var(--green-primary); }
.aps-l-p-dir--short { color: var(--negative); }
.aps-l-p-win { display: flex; align-items: center; gap: 10px; }
.aps-l-p-range { font: 400 12px var(--font-mono); color: var(--text-secondary); white-space: nowrap; }
.aps-l-p-n { font: 400 13px var(--font-mono); color: var(--cell-ink); text-align: right; }
.aps-l-p-ep { font: 400 12.5px var(--font-mono); color: var(--cell-ink); white-space: nowrap; }
.aps-l-p-since { font: 400 12px var(--font-mono); color: var(--text-secondary); white-space: nowrap; }
.aps-l-ph { display: none; }
.aps-l-p-chev { justify-self: end; display: inline-flex; color: var(--text-secondary); }
.aps-l-prow-btn[aria-expanded="true"] .aps-l-p-chev { transform: rotate(180deg); }
.aps-l-pdetail { display: flex; flex-wrap: wrap; gap: 18px 32px; padding: 4px 18px 20px; }
.aps-l-pdetail[hidden] { display: none; }
.aps-l-pdef { flex: 1 1 360px; max-width: 620px; display: flex; flex-direction: column; gap: 6px; }
.aps-l-pdef p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--cell-ink); text-wrap: pretty; }
.aps-l-psplit { flex: 0 1 260px; display: flex; flex-direction: column; gap: 8px; }
.aps-l-puse { flex: 0 0 auto; display: flex; align-items: flex-end; }
.aps-l-pempty { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding: 26px 22px; }
.aps-l-pempty-ic { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; box-sizing: border-box;
  border-radius: 50%; background: var(--aps-faint); border: 1px solid var(--text-muted); color: var(--text-secondary); }
.aps-l-pempty > div { flex: 1 1 280px; display: flex; flex-direction: column; gap: 4px; }
.aps-l-pempty-title { margin: 0; font-size: 16px; font-weight: 600; }
.aps-l-pempty-body { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }

/* 1.4 Sources */
.aps-l-srcgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.aps-l-src { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 12px; background: var(--bg-surface); border: 1px solid var(--border); }
.aps-l-src-head { display: flex; align-items: center; gap: 12px; }
.aps-l-src-ic { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 10px;
  background: var(--aps-lime-bg); color: var(--green-primary); }
.aps-l-src-name { display: flex; flex-direction: column; gap: 2px; }
.aps-l-src-name b { font-size: 17px; }
.aps-l-src-name span { font: 400 11px var(--font-mono); color: var(--text-secondary); }
.aps-l-src-part { display: flex; flex-direction: column; gap: 6px; }
.aps-l-src-part p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; }
.aps-l-src-part .aps-l-src-trig { color: var(--cell-ink); }

/* 1.5 Templates */
.aps-l-tplhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 28px; }
.aps-l-tplhead h2 { max-width: 720px; }
.aps-l-tplhead p { margin: 0; max-width: 420px; font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); }
.aps-l-tplgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 10px; }
.aps-l-more { display: none; width: 100%; height: 48px; margin-top: 10px; border-radius: 8px; border: 1px solid var(--line-btn); background: transparent;
  color: var(--green-primary); font: 600 14px var(--font-body); cursor: pointer; }

/* 1.6 Plans */
.aps-l-plans { display: flex; flex-direction: column; gap: 22px; }
.aps-l-beta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 16px 20px; border-radius: 10px;
  background: var(--aps-blue-band); border: 1px solid var(--aps-blue-band-bd); }
.aps-l-beta .lu { flex: none; color: var(--aps-blue); }
.aps-l-beta b { flex: 1 1 280px; font-size: 16px; }
.aps-l-beta span { font: 400 12.5px var(--font-mono); color: var(--cell-ink); }
.aps-l-billing { display: flex; justify-content: center; }
.aps-l-billseg { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--bg-deep); border: 1px solid var(--border); }
.aps-l-bill-btn { height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--text-secondary);
  font: 600 14px var(--font-body); cursor: pointer; }
.aps-l-bill-btn[aria-checked="true"] { background: var(--green-primary); color: var(--text-inverted); }
.aps-l-plangrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; align-items: stretch; }
.aps-l-trial { margin: 0; text-align: center; font-size: 14px; color: var(--text-secondary); }

/* 1.7 FAQ + footer */
.aps-l-faq { background: var(--bg-deep); }
.aps-l-faqgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 28px 56px;
  padding-top: clamp(56px, 6.5vw, 88px); padding-bottom: clamp(56px, 6.5vw, 88px); }
.aps-l-faq .section-tag { margin-bottom: 14px; }
.aps-l-faqh { margin: 0; font: 400 clamp(26px, 2.6vw, 34px)/1.2 var(--font-display); letter-spacing: -.02em; }
.aps-l-faqlist { display: flex; flex-direction: column; }
.aps-l-faqitem { border-top: 1px solid var(--border); }
.aps-l-faqbtn { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 60px; padding: 12px 0; border: 0; background: transparent;
  color: var(--text-primary); text-align: left; font: 600 16px var(--font-body); cursor: pointer; }
.aps-l-faqn { font: 400 12px var(--font-mono); color: var(--green-primary); }
.aps-l-faqq { flex: 1; }
.aps-l-faqic { display: inline-flex; flex: none; color: var(--text-secondary); }
.aps-l-faqbtn[aria-expanded="true"] .aps-l-faqic--plus, .aps-l-faqbtn[aria-expanded="false"] .aps-l-faqic--minus { display: none; }
.aps-l-faqa { max-width: 680px; margin: 0 0 18px 36px; font-size: 15px; line-height: 1.65; color: var(--text-secondary); text-wrap: pretty; }
.aps-l-faqa[hidden] { display: none; }
.aps-l-foot { background: var(--bg-deep); border-top: 1px solid var(--border); }
.aps-l-foot p { margin: 0 auto; padding-top: 22px; padding-bottom: 22px; font-size: 13px; color: var(--text-secondary); }

@media (max-width: 719.98px) {
  .aps-l-seg-btn { height: 44px; }
  .aps-l-bill-btn { height: 44px; }
  .aps-l .atp-crumbs a { position: relative; display: inline-flex; align-items: center; min-height: 44px; }
  .aps-l .atp-crumbs a::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: max(100%, 44px); transform: translateX(-50%); }   /* 44 px hit area without min-width, so "Home" keeps the board's spacing */
  .aps-l-axis { display: none; }
  .aps-l-tipkeys { display: flex; flex-wrap: wrap; gap: 0 14px; padding: 4px 16px 6px; }
  .aps-l-ctls, .aps-l-ctl { width: 100%; }
  .aps-l-ctls { flex-direction: column; align-items: stretch; }
  .aps-l-ctl .aps-l-seg-btn, .aps-l-sortseg .aps-l-seg-btn { flex: 1 1 0; }
  .aps-l-dirchips { display: flex; }
  .aps-l-dirchips .zh-chip { flex: 1 1 0; height: 44px; }
  .aps-l-sortby { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-top: 1px solid var(--line-row); }
  .aps-l-sortseg { flex: 1 1 auto; }
  .aps-l-status { min-height: 44px; padding: 6px 16px; }
  .aps-l-reset { min-height: 44px; }
  .aps-l-nameshead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; padding: 12px 16px 4px; font-size: 12.5px; color: var(--text-secondary); }
  .aps-l-nameshead b { font-size: 13px; font-weight: 600; color: var(--cell-ink); }
  .aps-l-fempty { padding: 12px 16px; }
  .aps-l-sortseg .aps-l-seg-btn { padding: 0 6px; white-space: nowrap; font-size: 12.5px; }
  /* phone name line (delta 3): the button replaces the desktop name + tooltip triggers; here, after the base rules */
  .aps-l-rows .aps-rr-name--btn .aps-rr-title { display: none; }
  .aps-l-rows .aps-rr-namebtn { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 1 1 auto; min-width: 0;
    min-height: 44px; margin: -8px 0; padding: 0; border: 0; background: transparent; color: var(--cell-ink); font: 400 14.5px/1.35 var(--font-body);
    text-align: left; cursor: pointer; }
  .aps-rr-namebtn .lu { flex: none; transition: transform .15s; }
  .aps-rr-namebtn[aria-expanded="true"] .lu { transform: rotate(180deg); }
  .aps-l-rows .aps-rr-desc:not([hidden]) { display: block; grid-area: desc; position: relative; padding: 12px 44px 12px 14px; border-radius: 10px;
    background: var(--bg-elevated); border: 1px solid var(--border); box-shadow: 0 12px 40px var(--aps-shadow); font-size: 13px; line-height: 1.45; }
  .aps-rr-desc .os-tip-what { margin: 0; }
  .aps-l-tippanel:not([hidden]) { display: block; }
  .aps-l-thead { display: none; }
  .aps-l-prow-btn { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tag chev" "name name" "win win" "n ep" "since since";
    padding: 14px 16px; }
  .aps-l-p-tag { grid-area: tag; }
  .aps-l-p-name { grid-area: name; }
  .aps-l-p-win { grid-area: win; }
  .aps-l-p-n { grid-area: n; text-align: left; }
  .aps-l-p-ep { grid-area: ep; text-align: right; }
  .aps-l-p-since { grid-area: since; }
  .aps-l-p-chev { grid-area: chev; }
  .aps-l-ph { display: inline; }
  .aps-l-pdetail { padding: 4px 16px 18px; }
  .aps-l-tplgrid:not(.is-all) > .aps-tt:nth-child(n+7) { display: none; }
  .aps-l-more { display: block; }
  .aps-l-more[hidden] { display: none; }
  .aps-l-plangrid .aps-plan--hi { order: -1; }
  .aps-l-faqgrid { grid-template-columns: minmax(0, 1fr); }
  .aps-l-faqa { margin-left: 0; }
}

/* ---- Alerts v2 record pages (task 763 B6, handoff §5 boards 5a–5h, §7 7h/7i) -------------------------------------
   /alerts/record/collecting/ (.aps-rp-*), /alerts/data/ (.aps-rd-*), /alerts/method/ (.aps-rm-*). Server-rendered,
   no JS; one breakpoint at 720 px (below = phone). */
.aps-rp { padding-top: 72px; color: var(--text-primary); font-family: var(--font-body); }
.aps-rp-in { max-width: 1280px; margin: 0 auto; padding: 28px clamp(16px, 3.2vw, 40px) 72px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 22px; }
.aps-rp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; color: var(--text-muted); }
.aps-rp-crumbs a { color: var(--text-muted); text-decoration: none; }
.aps-rp-crumbs a:hover { color: var(--green-primary); text-decoration: underline; }
.aps-rp-crumbs .sep { color: var(--text-faint); }
.aps-rp-crumbs .is-current { color: var(--text-secondary); }
.aps-rp-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.aps-rp-tab { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; box-sizing: border-box; border-radius: 999px;
  border: 1px solid var(--line-sep); color: var(--text-secondary); font: 600 13.5px var(--font-body); text-decoration: none; }
.aps-rp-tab:hover { background: var(--table-hover); color: var(--text-primary); }
.aps-rp-tab[aria-current="page"] { background: var(--aps-lime-bg); border-color: var(--aps-lime-bd); color: var(--green-primary); }
.aps-rp-note { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: 8px; font-size: 14px; line-height: 1.5; }
.aps-rp-note .lu { flex: none; margin-top: 2px; }
.aps-rp-note--cached { border: 1px solid var(--aps-amber-bd); background: var(--aps-amber-bg); color: var(--amber); }
.aps-rp-note--down { border: 1px solid var(--aps-dash); background: var(--bg-surface); color: var(--cell-ink); }
.aps-rp-head { display: flex; flex-direction: column; gap: 12px; max-width: 820px; }
.aps-rp-head--data { gap: 14px; max-width: 860px; }
.aps-rp-head .section-tag { margin: 0; }
.aps-rp-h1 { margin: 0; font: 400 clamp(30px, 3.6vw, 46px)/1.1 var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.aps-rp-lead { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-secondary); text-wrap: pretty; }
.aps-rp-asof { font: 400 12px var(--font-mono); color: var(--text-secondary); }
.aps-rp-foot { margin: 12px 0 0; padding-top: 18px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-secondary); }
.aps-rp-num { text-align: right; }
.aps-rp-dir { font: 700 10.5px var(--font-mono); }
.aps-rp-dir--long { color: var(--green-primary); }
.aps-rp-dir--short { color: var(--negative); }

/* collecting (5a–5c) */
.aps-rp-group { display: flex; flex-direction: column; gap: 10px; }
.aps-rp-ghead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.aps-rp-gtitle { margin: 0; font: 400 26px var(--font-display); letter-spacing: -.02em; }
.aps-rp-gcount { font: 400 13px var(--font-mono); color: var(--text-secondary); }
.aps-rp-gsub { flex: 1 1 100%; font-size: 13.5px; color: var(--text-secondary); }
.aps-rp-table { border: 1px solid var(--border); border-radius: 10px; background: var(--table-bg); overflow: hidden; }
.aps-rp-thead, .aps-rp-row { display: grid; grid-template-columns: minmax(0, 1.5fr) 160px minmax(230px, 1.2fr) 64px 96px minmax(0, 1.3fr);
  gap: 8px 14px; align-items: center; }
.aps-rp-thead { min-height: 38px; padding: 0 18px; background: var(--bg-band); color: var(--text-muted); font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; }
.aps-rp-row { grid-template-areas: "name tag win n ep why"; padding: 12px 18px; border-top: 1px solid var(--line-row); }
.aps-rp-thead + .aps-rp-row { border-top: 0; }
.aps-rp-name { grid-area: name; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.aps-rp-name b { font-size: 14px; font-weight: 600; }
.aps-rp-tag { grid-area: tag; }
.aps-rp-win { grid-area: win; display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); }
.aps-rp-win .aps-wb-pct { min-width: 38px; text-align: right; }
.aps-rp-range { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.aps-rp-n { grid-area: n; font: 400 13px var(--font-mono); color: var(--cell-ink); text-align: right; }
.aps-rp-ep { grid-area: ep; font: 400 12.5px var(--font-mono); color: var(--cell-ink); white-space: nowrap; }
.aps-rp-why { grid-area: why; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--cell-ink); }
.aps-rp-prog { display: block; height: 4px; max-width: 180px; border-radius: 2px; background: var(--aps-track); }
.aps-rp-prog-fill { display: block; height: 4px; border-radius: 2px; background: var(--text-secondary); }

/* data (5d–5f, 7h) */
.aps-rd-summary { margin: 0; font-size: 16.5px; line-height: 1.7; color: var(--cell-ink); text-wrap: pretty; }
.aps-rd-csv { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.aps-rd-csvbtn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; box-sizing: border-box; border-radius: 4px;
  border: 1px solid var(--line-btn); color: var(--text-primary); font: 600 14px var(--font-body); text-decoration: none; }
.aps-rd-csvbtn:hover { background: var(--table-hover); color: var(--text-primary); }
.aps-rd-defs { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }
.aps-rd-defs a { color: var(--green-primary); text-decoration: none; }
.aps-rd-defs a:hover { text-decoration: underline; }
.aps-rd-alert { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--border); }
.aps-rd-ahead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.aps-rd-name { margin: 0; font: 700 19px/1.3 var(--font-body); font-family: var(--font-body) !important; letter-spacing: 0; }   /* h2 carries the display face !important site-wide */
.aps-rd-def { margin: 0; max-width: 860px; font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.aps-rd-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--table-bg); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; }
.aps-rd-table thead tr { background: var(--bg-band); color: var(--text-muted); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.aps-rd-table thead th { padding: 10px 14px; font-weight: 500; text-align: left; }
.aps-rd-table thead th.aps-rp-num { text-align: right; }
.aps-rd-table tbody tr { border-top: 1px solid var(--line-row); font-family: var(--font-mono); color: var(--cell-ink); }
.aps-rd-table tbody th { padding: 10px 14px; text-align: left; font-weight: 700; color: var(--text-primary); }
.aps-rd-table tbody td { padding: 10px 14px; }
.aps-rd-dim { color: var(--text-secondary); }
.aps-rd-rate--lime { color: var(--green-primary); }
.aps-rd-rate--amber { color: var(--amber); }
.aps-rd-rate--red { color: var(--negative); }
.aps-rd-rate--none { color: var(--text-secondary); }
.aps-rd-tag { font: 400 12.5px var(--font-body); color: var(--text-muted); }
.aps-rd-tag--strong, .aps-rd-tag--medium, .aps-rd-tag--initial { color: var(--green-primary); }
.aps-rd-tag--collecting { color: var(--text-secondary); }
.aps-rd-tag--notpassing { color: var(--negative); }
.aps-rd-dls { display: none; flex-direction: column; gap: 8px; }
.aps-rd-dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; padding: 12px 14px; border-radius: 8px;
  background: var(--table-bg); border: 1px solid var(--border); font-size: 13px; }
.aps-rd-dl dt { color: var(--text-secondary); }
.aps-rd-dl dd { margin: 0; font-family: var(--font-mono); }
.aps-rd-dl .aps-rd-dlhead { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 10px; font: 700 14px var(--font-mono);
  color: var(--text-primary); }
.aps-rd-dlhead .aps-rd-tag { font-weight: 600; font-size: 12px; }

/* method (5g/5h) */
.aps-rm-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px 48px; align-items: start; }
.aps-rm-nav { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.aps-rm-nav a { padding: 7px 10px; border-radius: 4px; color: var(--text-secondary); text-decoration: none; }
.aps-rm-nav a:hover { background: var(--bg-surface); color: var(--text-primary); }
.aps-rm-body { display: flex; flex-direction: column; gap: 30px; max-width: 760px; min-width: 0; }
.aps-rm-sec { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 92px; }
.aps-rm-h2 { margin: 0; display: flex; gap: 10px; font: 700 19px/1.3 var(--font-body); font-family: var(--font-body) !important; letter-spacing: 0; }
.aps-rm-n { padding-top: 4px; font: 400 13px var(--font-mono); color: var(--green-primary); }
.aps-rm-p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--cell-ink); text-wrap: pretty; }
.aps-rm-tiers { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--table-bg); border: 1px solid var(--border); }
.aps-rm-tiers thead tr { background: var(--bg-band); color: var(--text-muted); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.aps-rm-tiers thead th { padding: 10px 12px; font-weight: 500; text-align: left; }
.aps-rm-tiers tbody tr { border-top: 1px solid var(--line-row); font-family: var(--font-mono); }
.aps-rm-tiers tbody th, .aps-rm-tiers tbody td { padding: 10px 12px; text-align: left; }
.aps-rm-box { padding: 14px 16px; border-radius: 8px; border: 1px dashed var(--aps-dash); font-size: 14px; color: var(--text-secondary); }

@media (max-width: 719.98px) {
  .aps-rp-thead { display: none; }
  .aps-rp-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name tag" "win win" "ep n" "why why"; padding: 14px 16px; }
  .aps-rd-table { display: none; }
  .aps-rd-dls { display: flex; }
  .aps-rm-grid { grid-template-columns: minmax(0, 1fr); }
  .aps-rm-nav { display: none; }
  .aps-rp-crumbs a, .aps-rd-defs a { position: relative; display: inline-flex; align-items: center; min-height: 44px; }
  .aps-rp-crumbs a::after, .aps-rd-defs a::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: max(100%, 44px);
    transform: translateX(-50%); }
}

/* ── Zone entry card (829 B7, handoff boards 6a–6f): ZoneHunter rail + HIP-3 market rail ─────────────────────
   --bg-surface, lime .35 border, 20 px padding; the "Already in" row is the lime-tint note; hit targets >= 44 px. */
.aze { --aze-lime-bd: color-mix(in srgb, var(--green-primary) 35%, transparent); --aze-lime-bg: color-mix(in srgb, var(--green-primary) 6%, transparent);
       display: flex; flex-direction: column; gap: 14px; margin-top: 14px; padding: 20px; border-radius: var(--r-lg);
       background: var(--bg-surface); border: 1px solid var(--aze-lime-bd); color: var(--text-primary); text-align: left; }
.hip3-asset-rail .aze { margin-top: 0; }
/* chart page (829 chart delta, boards 6g–6l): two columns on desktop, stacked on phone; hidden in the expanded chart */
.aze-main, .aze-side { display: contents; }
@media (min-width: 720px) {
  .aze--wide { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: center; gap: 16px; }
  .aze--wide .aze-main { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; align-items: center; }
  .aze--wide .aze-head { display: contents; }
  .aze--wide .aze-badge { grid-row: 1 / span 2; }
  .aze--wide .aze-body { grid-column: 2; }
  .aze--wide .aze-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .aze--wide .aze-own { align-self: flex-start; }
}
.zh-chart-panel.is-expanded .aze { display: none; }
.zh-chartpage-foot { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.aze-head { display: flex; align-items: flex-start; gap: 12px; }
.aze-badge { flex: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
             background: color-mix(in srgb, var(--green-primary) 10%, transparent); color: var(--green-primary); }
.aze-h { margin: 0; font-family: var(--font-body) !important; font-weight: 700; font-size: 16.5px; line-height: 1.4; letter-spacing: 0; color: var(--text-primary); min-width: 0; overflow-wrap: anywhere; }   /* h2 carries the display face !important site-wide */
.aze-mono { font-family: var(--font-mono); }
.aze-body { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
.aze-existing { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: var(--r-md);
                background: var(--aze-lime-bg); border: 1px solid color-mix(in srgb, var(--green-primary) 30%, transparent); font-size: 13px; }
.aze-existing[hidden], .aze [hidden] { display: none; }
.aze-existing .lu { color: var(--green-primary); flex: none; }
.aze-ex-name { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.aze-ex-edit, .aze-own { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--green-primary); text-decoration: none; }
.aze-ex-edit:hover, .aze-own:hover { color: var(--green-light, var(--green-primary)); text-decoration: underline; }
.aze-own { font-size: 13.5px; }
.aze-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 16px; border-radius: var(--r-sm);
           background: var(--green-primary); color: var(--text-inverted); font: 700 14.5px var(--font-body); text-decoration: none; text-align: center; }
.aze-cta:hover { background: var(--green-light, var(--green-primary)); color: var(--text-inverted); }
.aze-cta [data-ze-ico] { display: inline-flex; }
.aze-cta:focus-visible, .aze-own:focus-visible, .aze-ex-edit:focus-visible { outline: 2px solid var(--green-primary); outline-offset: 2px; }
.aze-hint { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }

/* Journal — /journal/mine/ (847 B4; journal-web-handoff v1.1). Site tokens only, dark only, one page width.
   A block is never red: --text-primary + an 8x8 square dot. Red (--negative) is for losses only. No hex
   literals in this block (the palette guards scan to EOF); tints are scoped tokens on .jr-page. */
.jr-page {
  --jr-lime-bg: rgba(140,202,43,.10); --jr-lime-bd: rgba(140,202,43,.35);
  --jr-red-bg: rgba(224,82,82,.10); --jr-red-bd: rgba(224,82,82,.40);
  --jr-amber-bg: rgba(212,172,92,.10); --jr-amber-bd: rgba(212,172,92,.45);
  --jr-lime-1: rgba(140,202,43,.16); --jr-lime-2: rgba(140,202,43,.30); --jr-lime-3: rgba(140,202,43,.48);
  --jr-red-1: rgba(224,82,82,.16); --jr-red-2: rgba(224,82,82,.30); --jr-red-3: rgba(224,82,82,.48);
  --jr-area: rgba(255,255,255,.05);
  padding-top: 72px; background: var(--bg-base); color: var(--text-primary); font-family: var(--font-body);
}
.jr-wrap { max-width: calc(var(--page-max) + 2 * var(--page-gutter)); margin: 0 auto; padding: 0 var(--page-gutter); }
.jr-sticky { position: sticky; top: 72px; z-index: 40; background: var(--bg-base); }
.jr-num { font-family: var(--font-mono); }
.jr-sec { color: var(--text-secondary); }
.jr-muted { color: var(--text-muted); }
.jr-small { font-size: 12.5px; }
.jr-strong { font-weight: 600; }
.jr-page .t-pos { color: var(--green-primary); }
.jr-page .t-neg { color: var(--negative); }
.jr-page .t-zero { color: var(--text-secondary); }
.jr-link { color: var(--green-primary); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.jr-link:hover { color: var(--green-primary); text-decoration: underline; }
.jr-page button { font-family: inherit; }

/* chips, tags, paid */
.jr-chip { font: 700 10.5px var(--font-mono); letter-spacing: .08em; padding: 2px 7px; border-radius: var(--r-sm);
  color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--line-sep); white-space: nowrap; }
.jr-chip--real { color: var(--green-primary); background: var(--jr-lime-bg); box-shadow: inset 0 0 0 1px var(--jr-lime-bd); }
.jr-tag { font: 700 11px var(--font-mono); letter-spacing: .1em; padding: 3px 8px; border-radius: var(--r-sm); white-space: nowrap; }
.jr-tag--amber { color: var(--amber); background: var(--jr-amber-bg); box-shadow: inset 0 0 0 1px var(--jr-amber-bd); }
.jr-tag--outline { font-size: 10px; letter-spacing: .08em; padding: 1px 6px; color: var(--text-secondary); box-shadow: inset 0 0 0 1px var(--line-sep); }
.jr-paid { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: var(--r-sm); font: 600 10.5px var(--font-mono);
  color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--line-sep); }

/* DemoBand */
.jr-demoband { background: var(--bg-deep); border-bottom: 1px solid var(--jr-amber-bd); padding: 12px var(--page-gutter);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.jr-demoband-text { flex: 1 1 280px; font-size: 14px; line-height: 1.45; color: var(--text-primary); }
.jr-demoband-ctas { display: flex; flex-wrap: wrap; gap: 8px; }
.jr-demoband .aps-mbtn { height: 40px; }
.jr-pill-btn { border-radius: 999px; }

/* JournalTopBar */
.jr-topbar { padding: 20px 0 18px; border-bottom: 1px solid var(--border); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.jr-topbar-head { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.jr-crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.jr-crumbs a { color: var(--text-secondary); text-decoration: none; }
.jr-crumb-sep { color: var(--text-faint); }
.jr-titleline { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.jr-h1 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 1.1; letter-spacing: -.02em; color: var(--text-primary); }
.jr-h1-sub { font-size: 14px; color: var(--text-secondary); }
.jr-topbar-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.jr-seg { height: 36px; border-radius: var(--r-md); background: var(--bg-deep); padding: 3px; display: inline-flex; gap: 3px; }
.jr-seg-btn { padding: 0 14px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 13.5px; font-weight: 600; color: var(--text-secondary); text-decoration: none; white-space: nowrap; }
.jr-seg-btn:hover { color: var(--text-primary); }
.jr-seg-btn.is-on { background: var(--bg-elevated); color: var(--text-primary); }
.jr-seg--book .jr-seg-btn--real.is-on { color: var(--green-primary); }
.jr-seg--range { gap: 2px; }
.jr-seg--range .jr-seg-btn { padding: 0 11px; font: 600 12.5px var(--font-mono); }
.jr-seg-btn.is-locked { color: var(--text-muted); cursor: not-allowed; }
.jr-ghost { height: 36px; padding: 0 12px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--line-btn); display: inline-flex;
  align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--text-primary); text-decoration: none; white-space: nowrap; }
.jr-ghost:hover { background: var(--table-hover); color: var(--text-primary); }
.jr-ghost.is-locked { color: var(--text-muted); cursor: not-allowed; }
.jr-ghost.is-locked:hover { background: transparent; }
.jr-user { display: inline-flex; align-items: center; gap: 8px; padding-left: 4px; }
.jr-user-av { width: 28px; height: 28px; border-radius: 50%; background: var(--bg-elevated); display: inline-flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.jr-user-txt { display: flex; flex-direction: column; line-height: 1.2; }
.jr-user-name { font-size: 13px; font-weight: 500; }
.jr-user-out, .jr-login { padding: 0; border: 0; background: transparent; cursor: pointer; text-align: left; }
.jr-user-out { font-size: 11.5px; color: var(--text-muted); }
.jr-user-out:hover { color: var(--text-primary); }
.jr-login { font-size: 13px; font-weight: 500; color: var(--green-primary); min-height: 36px; }

/* LimitBanner: warn = amber rule + tag; block = --text-primary rule + square dot (never red) */
.jr-banner { margin: 14px 0 0; background: var(--bg-surface); border: 1px solid var(--border); border-left: 3px solid var(--amber);
  border-radius: var(--r-md); padding: 12px 16px; font-size: 14px; line-height: 1.45; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.jr-banner-tag { display: inline-flex; align-items: center; gap: 8px; font: 700 11px var(--font-mono); letter-spacing: .1em; color: var(--amber); white-space: nowrap; }
.jr-banner--block { border-left-color: var(--text-primary); }
.jr-banner--block .jr-banner-tag { color: var(--text-primary); }
.jr-banner-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--text-primary); }
.jr-banner-text { flex: 1 1 320px; min-width: 0; }
.jr-banner-count { font-size: 13px; font-weight: 600; white-space: nowrap; }
.jr-banner-x { margin-left: auto; align-self: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.jr-banner-x:hover { background: var(--table-hover); color: var(--text-primary); }
.jr-banner-x:disabled { color: var(--text-faint); cursor: not-allowed; background: transparent; }

/* content grid + cards */
.jr-content { padding: 20px 0 16px; display: flex; flex-direction: column; gap: 16px; }
.jr-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px 20px;
  display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.jr-card--flush { padding: 16px 0 6px; gap: 0; }
.jr-card--flush > .jr-card-head { padding: 0 20px 10px; }
.jr-card--flush > .jr-err { margin: 0 20px; }
.jr-card-head { display: flex; align-items: baseline; gap: 6px 10px; min-width: 0; }
.jr-card-head--wrap { flex-wrap: wrap; align-items: center; }
.jr-card-title { font-size: 16px; font-weight: 600; }
.jr-card-tag { font-size: 12px; color: var(--text-secondary); }
.jr-card-end { margin-left: auto; }
.jr-row { display: grid; gap: 16px; align-items: start; }
.jr-row--a { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.jr-row--b { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.jr-row--c { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jr-err { min-height: 52px; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-secondary); border-top: 1px solid var(--line-row); }
.jr-err-sep { color: var(--text-faint); }
.jr-err a { color: var(--green-primary); font-weight: 500; text-decoration: none; }
.jr-foot { margin: 4px 0 0; padding-bottom: 40px; font-size: 12.5px; color: var(--text-muted); text-align: center; }
.jr-track { display: block; height: 6px; border-radius: 3px; background: var(--bg-elevated); overflow: hidden; }
.jr-track-fill { display: block; height: 6px; border-radius: 3px; background: var(--text-secondary); }
.jr-track-fill.is-amber { background: var(--amber); }
.jr-track-fill.is-neg { background: var(--negative); }

/* KpiTiles */
.jr-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.jr-kpis-err { grid-column: 1 / -1; }
.jr-kpi { padding: 14px 16px; gap: 8px; }
.jr-kpi-label { font-size: 12.5px; color: var(--text-secondary); }
.jr-kpi-value { font-size: 22px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.jr-kpi-unit { margin-left: 4px; font: 500 12px var(--font-body); letter-spacing: 0; color: var(--text-secondary); }
.jr-kpi-sub { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* EquityChart (static SVG; hover arrives with the page JS) */
.jr-eq { padding-bottom: 14px; }
.jr-eq .jr-card-head { flex-wrap: wrap; }
.jr-eq-sum { margin-left: auto; font-size: 12.5px; color: var(--text-secondary); }
.jr-eq-canvas { position: relative; height: 260px; border-radius: 6px; background: var(--chart-bg); }
.jr-eq-svg { display: block; width: 100%; height: 100%; }
.jr-eq-zero { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.jr-eq-area { fill: var(--jr-area); }
.jr-eq-btc { fill: none; stroke: var(--text-muted); stroke-width: 1.5; stroke-dasharray: 4 3; }
.jr-eq-you { fill: none; stroke: var(--text-primary); stroke-width: 2; }
.jr-eq-axis { position: absolute; right: 8px; font-size: 10.5px; color: var(--text-secondary); }
.jr-eq-axis--top { top: 6px; }
.jr-eq-axis--bottom { bottom: 6px; }
.jr-eq-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: var(--text-secondary); }
.jr-leg { display: inline-flex; align-items: center; gap: 6px; }
.jr-leg-line { width: 14px; height: 2px; background: var(--text-primary); }
.jr-leg-dash { width: 14px; height: 0; border-top: 1.5px dashed var(--text-muted); }

/* DisciplineToday */
.jr-disc { gap: 2px; padding-bottom: 14px; }
.jr-disc > .jr-card-head { align-items: center; margin-bottom: 8px; }
.jr-disc-day { display: flex; align-items: baseline; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line-row); }
.jr-disc-pnl { margin-left: auto; font-size: 18px; font-weight: 600; }
.jr-disc-row { padding: 10px 0; border-bottom: 1px solid var(--line-row); display: flex; flex-direction: column; gap: 7px; }
.jr-disc-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jr-disc-name { font-size: 14px; font-weight: 500; }
.jr-disc-state { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 600 11px var(--font-mono); letter-spacing: .04em; color: var(--text-secondary); }
.jr-disc-row.is-warned .jr-disc-state { color: var(--amber); }
.jr-disc-row.is-warned .jr-track-fill { background: var(--amber); }
.jr-disc-row.is-blocked .jr-disc-state { color: var(--text-primary); }
.jr-disc-row.is-blocked .jr-track-fill { background: var(--text-primary); }
.jr-disc-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.jr-disc-bar .jr-num { white-space: nowrap; }
.jr-disc-none { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.jr-disc-foot { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-top: 10px; font-size: 12.5px; color: var(--text-secondary); }
.jr-disc-foot .jr-num { font-weight: 600; color: var(--text-primary); }
.jr-disc-foot .jr-muted { margin-left: auto; }

/* CalendarCard */
.jr-cal { gap: 10px; }
.jr-cal-head { display: flex; align-items: center; gap: 6px; }
.jr-cal-head .jr-card-title { margin-right: auto; }
.jr-iconbtn { width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-secondary);
  box-shadow: inset 0 0 0 1px var(--line-btn); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.jr-iconbtn:disabled { color: var(--text-faint); box-shadow: inset 0 0 0 1px var(--border); cursor: default; }
.jr-cal-sum { font-size: 12.5px; color: var(--text-secondary); }
.jr-cal-dow, .jr-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.jr-cal-dow { font-size: 11px; color: var(--text-muted); text-align: center; }
.jr-cal-cell { aspect-ratio: 1.15; border-radius: 6px; background: var(--bg-band); display: flex; flex-direction: column; justify-content: space-between;
  padding: 5px 6px; min-width: 0; color: var(--text-muted); text-decoration: none; }
.jr-cal-cell.is-blank { background: transparent; }
.jr-cal-d { font: 11px var(--font-mono); }
.jr-cal-v { font: 500 11px var(--font-mono); text-align: right; color: var(--cell-ink); }
.jr-cal-cell.is-pos, .jr-cal-cell.is-neg, .jr-cal-cell.is-zero, .jr-cal-cell.is-today { color: var(--text-primary); }
.jr-cal-cell.is-pos.lv-1 { background: var(--jr-lime-1); }
.jr-cal-cell.is-pos.lv-2 { background: var(--jr-lime-2); }
.jr-cal-cell.is-pos.lv-3 { background: var(--jr-lime-3); }
.jr-cal-cell.is-neg.lv-1 { background: var(--jr-red-1); }
.jr-cal-cell.is-neg.lv-2 { background: var(--jr-red-2); }
.jr-cal-cell.is-neg.lv-3 { background: var(--jr-red-3); }
.jr-cal-cell.is-today { box-shadow: inset 0 0 0 1.5px var(--text-primary); }
.jr-cal-cell.is-future { opacity: .35; }
a.jr-cal-cell:hover { outline: 1px solid var(--line-btn); }
.jr-cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); }
.jr-sw { width: 12px; height: 8px; border-radius: 2px; }
.jr-sw.is-pos.lv-1 { background: var(--jr-lime-1); } .jr-sw.is-pos.lv-2 { background: var(--jr-lime-2); } .jr-sw.is-pos.lv-3 { background: var(--jr-lime-3); }
.jr-sw.is-neg.lv-1 { background: var(--jr-red-1); } .jr-sw.is-neg.lv-2 { background: var(--jr-red-2); } .jr-sw.is-neg.lv-3 { background: var(--jr-red-3); }
.jr-cal-hint { margin-left: auto; }

/* TradesTable */
.jr-tt { display: flex; flex-direction: column; }
.jr-tt-row { display: grid; grid-template-columns: minmax(84px, .9fr) minmax(110px, 1fr) minmax(0, 1.1fr) 40px minmax(0, 1fr) 64px 76px 58px;
  column-gap: 12px; align-items: center; min-height: 44px; padding: 0 20px; border-bottom: 1px solid var(--line-row);
  font-size: 13px; color: var(--text-primary); text-decoration: none; }
.jr-tt a.jr-tt-row:nth-of-type(even) { background: var(--table-row-alt); }
.jr-tt a.jr-tt-row:hover { background: var(--table-hover); color: var(--text-primary); }
.jr-tt-row--head { min-height: 0; padding: 8px 20px; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-secondary); border-bottom-color: var(--line-strong); }
.jr-tt .is-r, .jr-bk .is-r { text-align: right; }
.jr-bk .is-c { text-align: center; }
.jr-tt-closed { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.jr-tt-coin { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; }
.jr-tt-strat, .jr-tt-emo { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jr-tt-emo { font-size: 12px; color: var(--text-secondary); }
.jr-tt-hold { font-size: 12px; }
.jr-side { font: 700 10px var(--font-mono); letter-spacing: .04em; padding: 1px 6px; border-radius: 100px; white-space: nowrap; }
.jr-side--long { color: var(--green-primary); background: var(--jr-lime-bg); box-shadow: inset 0 0 0 1px var(--jr-lime-bd); }
.jr-side--short { color: var(--negative); background: var(--jr-red-bg); box-shadow: inset 0 0 0 1px var(--jr-red-bd); }
.jr-strat { font-size: 11.5px; font-weight: 500; padding: 2px 6px; border-radius: var(--r-sm); background: var(--bg-elevated); color: var(--text-secondary); }
.jr-grade { font: 600 11px var(--font-mono); padding: 1px 6px; border-radius: var(--r-sm); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--line-btn); }

/* BreakdownTable */
.jr-bk-panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.jr-bk-panel { display: flex; flex-direction: column; min-width: 0; }
.jr-tabs { display: flex; gap: 16px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; margin-bottom: 4px; }
.jr-tab { padding: 8px 0 9px; border: 0; background: transparent; font-size: 13px; font-weight: 500; color: var(--text-secondary); white-space: nowrap; cursor: pointer; }
.jr-tab.is-on { font-weight: 600; color: var(--text-primary); box-shadow: inset 0 -2px 0 var(--green-primary); }
.jr-bk-row { display: grid; grid-template-columns: minmax(0, 1.2fr) 48px 56px minmax(150px, 1.4fr) 76px 58px; column-gap: 12px; align-items: center;
  min-height: 42px; border-top: 1px solid var(--line-row); font-size: 13px; color: var(--text-primary); text-decoration: none; }
.jr-bk-row--head { min-height: 0; padding: 8px 0; border-top: 0; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
a.jr-bk-row:hover { background: var(--table-hover); color: var(--text-primary); }
.jr-bk-key { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jr-bk-key.is-none { color: var(--text-secondary); }
.jr-bk .is-dim { color: var(--text-muted); }
.jr-bk-r { display: grid; grid-template-columns: minmax(0, 1fr) 56px; gap: 8px; align-items: center; }
.jr-bar { position: relative; height: 4px; border-radius: 2px; background: var(--bg-elevated); }
.jr-bar-half { position: absolute; top: 0; bottom: 0; width: 50%; display: flex; }
.jr-bar-half.is-pos { left: 50%; }
.jr-bar-half.is-neg { right: 50%; justify-content: flex-end; }
.jr-bar-half.is-zero { display: none; }
.jr-bar-fill { display: block; height: 100%; border-radius: 2px; }
.jr-bar-half.is-pos .jr-bar-fill { background: var(--green-primary); }
.jr-bar-half.is-neg .jr-bar-fill { background: var(--negative); }
.jr-bar-tick { position: absolute; left: 50%; top: -3px; width: 1px; height: 10px; background: var(--text-secondary); }
.jr-bk-base { border-top: 1px solid var(--line-row); padding-top: 10px; font-size: 12.5px; color: var(--text-muted); }
.jr-bk-locked { position: relative; border-top: 1px solid var(--line-row); }
.jr-bk-ghosts span { display: block; height: 44px; border-bottom: 1px solid var(--line-row); opacity: .5;
  background: linear-gradient(var(--bg-elevated), var(--bg-elevated)) 0 50% / 40% 10px no-repeat; }
.jr-bk-locked-msg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  text-align: center; font-size: 14.5px; }
.jr-bk-locked-msg .jr-sec { font-size: 13px; }

/* Edge · Risk · Coverage */
.jr-edge-grid, .jr-risk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; }
.jr-stat { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.jr-stat-v { font-size: 20px; font-weight: 600; }
.jr-stat-v2 { font-size: 16px; font-weight: 600; margin-top: 4px; }
.jr-risk-wait { margin: 0; padding-top: 10px; border-top: 1px solid var(--line-row); font-size: 13.5px; color: var(--text-secondary); }
.jr-cov-line { font-size: 14px; }
.jr-cov-line .jr-num:first-child { font-weight: 600; }

/* ReportsList */
.jr-reports { padding-bottom: 8px; gap: 0; }
.jr-reports > .jr-card-head { margin-bottom: 10px; }
.jr-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.jr-kind { height: 30px; padding: 0 12px; border: 0; border-radius: 100px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-btn);
  color: var(--text-secondary); font-size: 12.5px; font-weight: 500; cursor: pointer; }
.jr-kind.is-on { background: var(--jr-lime-bg); box-shadow: inset 0 0 0 1px var(--jr-lime-bd); color: var(--green-primary); font-weight: 600; }
.jr-rep-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 28px; }
.jr-rep { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 14px; gap: 10px; align-items: center; min-height: 52px;
  border-top: 1px solid var(--line-row); color: var(--text-primary); text-decoration: none; }
a.jr-rep:hover { color: var(--text-primary); background: var(--table-hover); }
.jr-rep-dot { width: 8px; height: 8px; border-radius: 4px; background: transparent; }
.jr-rep.is-unread .jr-rep-dot { background: var(--green-primary); }
.jr-rep-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jr-rep-title { font-size: 14px; }
.jr-rep.is-unread .jr-rep-title { font-weight: 600; }
.jr-rep.is-pending .jr-rep-title { color: var(--text-secondary); }
.jr-rep-sub { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jr-rep-kind { font: 600 10px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.jr-rep-chev { color: var(--text-muted); display: inline-flex; }

/* JournalAccessPanel (A1 / A2 / A5) */
.jr-access { padding: 56px 0 72px; display: flex; flex-direction: column; align-items: center; }
.jr-content .jr-access { padding: 0; }
.jr-access-card { margin: 0; }
.jr-access-card--real { max-width: none; padding: 40px 24px; }
.jr-access-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.15; }
.jr-signin { width: 100%; max-width: 320px; height: 48px; margin-top: 8px; border-radius: 999px; }
.jr-access-demo { width: 100%; max-width: 320px; font-weight: 500; }
.jr-access-link { margin-top: 4px; font-size: 13.5px; color: var(--text-secondary); }
.jr-access-link a { color: var(--green-primary); text-decoration: none; }
.jr-access-foot { margin-top: 6px; font-size: 12px; color: var(--text-muted); }
.jr-access-ctas { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }

/* mid: 600-1199 */
@media (max-width: 1199.98px) {
  .jr-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jr-kpi-value { font-size: 24px; }
  .jr-row--a { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .jr-row--b { grid-template-columns: minmax(0, 1fr); }
  .jr-bk-panels { grid-template-columns: minmax(0, 1fr); }
  .jr-rep-list { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .jr-tt-row { grid-template-columns: minmax(84px, .8fr) minmax(110px, 1fr) minmax(0, 1fr) 40px minmax(0, .9fr) 60px 72px 56px; }
}
/* phone: < 600 */
@media (max-width: 599.98px) {
  .jr-sticky { position: static; }
  .jr-topbar { padding: 14px 0; }
  .jr-h1 { font-size: 30px; }
  .jr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr-kpi-value { font-size: 20px; }
  .jr-row--a, .jr-row--c { grid-template-columns: minmax(0, 1fr); }
  .jr-eq-canvas { height: 180px; }
  .jr-eq-sum { margin-left: 0; flex-basis: 100%; }
  .jr-cal-cell { aspect-ratio: 1; }
  .jr-cal-v { font-size: 10px; }
  .jr-tt-row.jr-tt-row--head { display: none; }
  /* miniapp rows (handoff B1 §5): coin · side · grade / net, then strategy · emotions / R · date. A flex row with a
     forced break (::after, order 4) keeps the cells in the markup's table order. */
  .jr-tt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; padding: 10px 16px; border-bottom: 0;
    border-top: 1px solid var(--line-row); }
  .jr-tt-row::after { content: ''; order: 4; flex-basis: 100%; height: 0; }
  .jr-tt-coin { order: 1; font-size: 14px; }
  .jr-tt-side, .jr-tt-grade { order: 2; }
  .jr-tt-net { order: 3; margin-left: auto; font-size: 14px; }
  .jr-tt-strat { order: 5; flex: 0 1 auto; font-size: 12px; }
  .jr-tt-emo { order: 6; flex: 0 1 auto; }
  .jr-tt-emo:not(:empty)::before, .jr-tt-closed::before { content: '\00b7\00a0'; color: var(--text-muted); }
  .jr-tt-strat:empty ~ .jr-tt-emo::before { content: none; }
  .jr-tt-r { order: 7; margin-left: auto; font-size: 12px; }
  .jr-tt-closed { order: 8; font-size: 12px; }
  .jr-tt-hold, .jr-tt-fund { display: none; }
  .jr-bk-row { grid-template-columns: minmax(0, 1fr) 32px 46px 112px 66px; }
  .jr-bk-fund { display: none; }
  .jr-cal-hint, .jr-disc-foot .jr-muted { margin-left: 0; }
}

/* Journal sub-pages — day / trade / trades / report (847 B5; journal-web-handoff v1.1 §2 B2–B5). Same rules as the
   block above: site tokens only, no hex literals, a block is never red, grades are outlined white. */
.jr-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.jr-dayrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.jr-daynav { margin-left: auto; display: inline-flex; gap: 8px; }
.jr-daynav .jr-ghost { height: 34px; color: var(--text-secondary); }
.jr-ghost.is-off { color: var(--text-faint); box-shadow: inset 0 0 0 1px var(--border); cursor: default; }
.jr-ghost.is-off:hover { background: transparent; }
.jr-row--day { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.jr-row--rep { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.jr-hero { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px; }
.jr-hero-r { font-size: 40px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.jr-hero-net { font-size: 14px; color: var(--text-secondary); }
.jr-hero-net .jr-num { font-size: 18px; }
.jr-four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; border-top: 1px solid var(--border); padding-top: 14px; }
.jr-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.jr-four > div, .jr-three > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jr-stat-v3 { font-size: 18px; font-weight: 600; }
.jr-note { margin: 0; }
.jr-intraday-canvas { position: relative; height: 220px; border-radius: 6px; background: var(--chart-bg); }
.jr-bw { padding: 6px 20px; gap: 0; }
.jr-bw-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 46px;
  color: var(--text-primary); text-decoration: none; }
.jr-bw-row + .jr-bw-row { border-top: 1px solid var(--line-row); }
a.jr-bw-row:hover { color: var(--text-primary); background: var(--table-hover); }
.jr-bw-name { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; font-weight: 500; }
.jr-pills { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.jr-epill { height: 32px; padding: 0 12px; border-radius: 100px; box-shadow: inset 0 0 0 1px var(--line-btn); display: inline-flex;
  align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.jr-epill .jr-num { font-size: 12px; }
.jr-daydisc { gap: 0; padding-bottom: 6px; }
.jr-daydisc > .jr-card-title { margin-bottom: 6px; }
.jr-daydisc-row { padding: 10px 0; border-top: 1px solid var(--line-row); display: flex; flex-direction: column; gap: 4px; }
.jr-daydisc-top { display: flex; gap: 10px; }
.jr-daydisc-state { margin-left: auto; font-size: 14px; font-weight: 600; white-space: nowrap; }
.jr-daydisc-streak { min-height: 44px; border-top: 1px solid var(--line-row); display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.jr-daydisc-streak .jr-num { font-weight: 600; }
.jr-hark-p { margin: 0; font-size: 14px; line-height: 1.55; }
.jr-hark--report { max-width: none; }
.jr-hark--report .jr-hark-p { max-width: 920px; font-size: 15px; line-height: 1.6; }
.jr-hark-min { margin: 0; padding: 0 4px; }

/* B3 · Trade */
.jr-trade { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.jr-under { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.jr-thead { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.jr-thead-id { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jr-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--bg-elevated); display: inline-flex; align-items: center;
  justify-content: center; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.jr-thead-sym { font-size: 20px; font-weight: 600; }
.jr-tag--amber-outline { font-size: 10px; letter-spacing: .08em; padding: 1px 6px; color: var(--amber); box-shadow: inset 0 0 0 1px var(--jr-amber-bd); }
.jr-thead-pnl { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.jr-thead-fig { display: flex; align-items: baseline; gap: 8px; }
.jr-thead-net { font-size: 24px; font-weight: 600; }
.jr-thead-facts { flex-basis: 100%; font-size: 13px; color: var(--text-secondary); }
.jr-tc { padding: 14px 20px 16px; }
.jr-tc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.jr-seg--tf { height: 32px; }
.jr-seg--tf .jr-seg-btn { padding: 0 10px; border: 0; background: transparent; cursor: pointer; font: 600 12px var(--font-mono); }
.jr-seg--tf .jr-seg-btn.is-on { background: var(--bg-elevated); }
.jr-tc-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--text-secondary); }
.jr-leg-line.is-entry { background: var(--zh-entry); }
.jr-leg-line.is-stop { background: var(--negative); }
.jr-leg-line.is-target { background: var(--green-primary); }
.jr-leg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-primary); }
.jr-replay { margin-left: auto; height: 32px; border: 0; background: transparent; color: var(--text-muted); cursor: not-allowed; }
.jr-replay:hover { background: transparent; }
.jr-tc-canvas { position: relative; height: 380px; border-radius: 6px; background: var(--chart-bg); }
.jr-result { gap: 14px; }
.jr-runbar { display: flex; flex-direction: column; gap: 8px; }
.jr-rb-track { position: relative; height: 10px; border-radius: 5px; background: var(--bg-elevated); }
.jr-rb-track > span { position: absolute; top: 0; bottom: 0; }
.jr-rb-neg { background: var(--negative); }
.jr-rb-pos { background: var(--green-primary); }
.jr-rb-tint { background: var(--jr-lime-1); box-shadow: inset 0 0 0 1px var(--jr-lime-bd); border-radius: 0 5px 5px 0; }
.jr-rb-track > .jr-rb-zero { top: -3px; bottom: auto; width: 1px; height: 16px; background: var(--text-secondary); }
.jr-rb-track > .jr-rb-exit { top: -4px; bottom: auto; width: 3px; height: 18px; margin-left: -1px; background: var(--text-primary); }
.jr-rb-track > .jr-rb-stop { width: 2px; background: var(--negative); }
.jr-rb-labels { position: relative; height: 32px; font-size: 11.5px; color: var(--text-secondary); }
.jr-rb-l { position: absolute; top: 0; white-space: nowrap; line-height: 1.35; }
.jr-rb-l.is-mid { transform: translateX(-50%); text-align: center; }
.jr-rb-l.is-end { right: 0; text-align: right; }
.jr-rb-labels.has-low { height: 62px; }
.jr-rb-l.is-low { top: 30px; }
.jr-plan { display: flex; flex-direction: column; }
.jr-plan--two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; }
.jr-plan-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-height: 32px; padding: 6px 0;
  border-top: 1px solid var(--line-row); font-size: 13.5px; }
.jr-plan-row.is-group { border-top-color: var(--line-strong); }
.jr-plan-row > span:last-child { text-align: right; }
.jr-plan-v { font-size: 13px; font-weight: 500; }
.jr-fields { position: sticky; top: calc(72px + var(--jr-topbar-h, 100px) + 16px); gap: 14px; }
.jr-saved { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--green-primary); }
.jr-saved[hidden] { display: none; }
.jr-demo-note { background: var(--bg-deep); border: 1px solid var(--jr-amber-bd); border-radius: 6px; padding: 8px 12px;
  font-size: 12.5px; line-height: 1.45; }
.jr-fields-body { display: flex; flex-direction: column; gap: 14px; }
.jr-fields-body.is-off { opacity: .5; }
.jr-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.jr-field-label { font-size: 12.5px; color: var(--text-secondary); }
.jr-input { width: 100%; min-height: 40px; border: 0; border-radius: 6px; background: var(--bg-deep); color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--line-btn); padding: 0 12px; font: 14px var(--font-body); }
.jr-input:focus { outline: 2px solid var(--green-accent); outline-offset: 1px; }
.jr-input:disabled { cursor: not-allowed; }
.jr-textarea { min-height: 72px; padding: 10px 12px; font-size: 13.5px; line-height: 1.5; resize: vertical; }
.jr-textarea::placeholder { color: var(--text-muted); }
.jr-field-err { margin: 0; font-size: 12px; color: var(--negative); }
.jr-field-err[hidden] { display: none; }
.jr-grades { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.jr-gbtn { height: 36px; border: 0; border-radius: 6px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-btn);
  color: var(--text-primary); font: 13px var(--font-mono); cursor: pointer; }
.jr-gbtn.is-on, .jr-pill.is-on { background: var(--jr-lime-bg); box-shadow: inset 0 0 0 1px var(--jr-lime-bd); color: var(--green-primary); font-weight: 600; }
.jr-pill { height: 30px; padding: 0 11px; border: 0; border-radius: 100px; background: transparent; box-shadow: inset 0 0 0 1px var(--line-btn);
  color: var(--text-secondary); font-size: 12.5px; cursor: pointer; }
.jr-gbtn:disabled, .jr-pill:disabled { cursor: not-allowed; }
.jr-mkt-sentence { font-size: 16px; font-weight: 600; line-height: 1.35; }
.jr-mkt-tf { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; min-height: 30px; align-items: center;
  border-top: 1px solid var(--line-row); font-size: 13.5px; }
.jr-mkt-read { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; border-top: 1px solid var(--line-row); padding-top: 12px; }
.jr-read { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.jr-read-v { font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jr-read-bar { position: relative; height: 4px; border-radius: 2px; background: var(--bg-elevated); }
.jr-read-fill { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: var(--text-secondary); }
.jr-read-fill.is-pos { background: var(--green-primary); }
.jr-read-fill.is-neg { background: var(--negative); }
/* Designer intensity tones (bars.tsx, spec 2026-09-28 §15.1): non-directional bars are yellow / brown, never red/green */
.jr-page { --jr-int-hi: rgba(242,201,76,1); --jr-int-lo: rgba(192,131,74,1); }
.jr-read-fill.is-int-hi, .jr-read-dot.is-int-hi { background: var(--jr-int-hi); }
.jr-read-fill.is-int-lo, .jr-read-dot.is-int-lo { background: var(--jr-int-lo); }
.jr-read-mark { position: absolute; top: -2px; width: 1px; height: 8px; background: var(--text-muted); }
.jr-read-dot { position: absolute; top: -2px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; }
.jr-nodata { color: var(--text-muted); font-style: italic; }
.jr-mkt-figs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; border-top: 1px solid var(--line-row); padding-top: 12px; }
.jr-mkt-fig { font-size: 13px; font-weight: 500; margin-top: 4px; }
.jr-notrec { gap: 10px; }
.jr-setup { gap: 8px; }
.jr-card > .jr-chip { align-self: flex-start; }

/* B4 · Trades */
.jr-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.jr-filter { position: relative; }
.jr-filter > summary { list-style: none; }
.jr-filter > summary::-webkit-details-marker { display: none; }
.jr-fpill { height: 34px; padding: 0 12px; border-radius: 100px; box-shadow: inset 0 0 0 1px var(--line-btn); display: inline-flex;
  align-items: center; gap: 6px; font-size: 13px; color: var(--text-primary); text-decoration: none; white-space: nowrap; cursor: pointer; }
.jr-fpill:hover { background: var(--table-hover); color: var(--text-primary); }
.jr-fpill.is-on, .jr-filter.is-on > .jr-fpill { background: var(--jr-lime-bg); box-shadow: inset 0 0 0 1px var(--jr-lime-bd); color: var(--green-primary); font-weight: 600; }
.jr-fpill-v { font-weight: 600; }
.jr-fmenu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 200px; max-height: 320px; overflow-y: auto;
  padding: 6px; border-radius: var(--r-md); background: var(--bg-elevated); border: 1px solid var(--border); box-shadow: 0 12px 28px rgba(0,0,0,.35);
  display: flex; flex-direction: column; }
.jr-fitem { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; border-radius: 6px; font-size: 13.5px;
  color: var(--text-primary); text-decoration: none; white-space: nowrap; }
.jr-fitem:hover { background: var(--table-hover); color: var(--text-primary); }
.jr-fitem.is-on { color: var(--green-primary); }
.jr-fitem.is-group + .jr-fitem:not(.is-group) { margin-top: 4px; border-top: 1px solid var(--line-row); border-radius: 0 0 6px 6px; }
.jr-fitem-pad { width: 13px; }
.jr-fseg { height: 34px; border-radius: 100px; box-shadow: inset 0 0 0 1px var(--line-btn); padding: 3px; display: inline-flex; gap: 2px; }
.jr-fseg-btn { padding: 0 12px; border-radius: 100px; display: flex; align-items: center; font-size: 12.5px; color: var(--text-secondary); text-decoration: none; }
.jr-fseg-btn.is-on { background: var(--bg-elevated); color: var(--text-primary); font-weight: 600; }
.jr-count { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 0 2px; font-size: 13px; color: var(--text-secondary); }
.jr-count .jr-chip { margin-right: 6px; }
.jr-count-n { color: var(--text-primary); }
.jr-trades { padding: 0; overflow: visible; }
.jr-trades .jr-tt-row--head { position: sticky; top: calc(72px + var(--jr-topbar-h, 100px)); z-index: 5; background: var(--bg-surface); padding-top: 10px; padding-bottom: 10px; }
.jr-sort { display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary); text-decoration: none; }
.jr-sort:hover, .jr-sort.is-on { color: var(--text-primary); }
.jr-tt--full .jr-tt-row { grid-template-columns: minmax(96px, .9fr) minmax(56px, .6fr) minmax(72px, .6fr) minmax(0, 1fr) 44px minmax(0, 1fr) 64px 76px 64px 58px; }
.jr-tt-side { white-space: nowrap; }
.jr-tt-fund { font-size: 12px; }
.jr-empty { min-height: 72px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 20px; font-size: 14px; color: var(--text-secondary); }
.jr-pager { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--line-row); }
.jr-pager-nav { margin-left: auto; display: inline-flex; gap: 6px; }
.jr-iconbtn.is-off { color: var(--text-faint); box-shadow: inset 0 0 0 1px var(--border); cursor: default; }

/* B5 · Report */
.jr-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.jr-strip .jr-cal-cell { aspect-ratio: .9; }
.jr-repcal .jr-cal-cell:not(.is-blank):not([href]) { background: var(--bg-band); }
.jr-year { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; }
.jr-mini { display: flex; flex-direction: column; gap: 4px; }
.jr-mini-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.jr-mini-cell { aspect-ratio: 1; border-radius: 2px; background: var(--bg-band); }
.jr-mini-cell.is-blank { background: transparent; }
.jr-mini-cell.is-pos.lv-1 { background: var(--jr-lime-1); } .jr-mini-cell.is-pos.lv-2 { background: var(--jr-lime-2); } .jr-mini-cell.is-pos.lv-3 { background: var(--jr-lime-3); }
.jr-mini-cell.is-neg.lv-1 { background: var(--jr-red-1); } .jr-mini-cell.is-neg.lv-2 { background: var(--jr-red-2); } .jr-mini-cell.is-neg.lv-3 { background: var(--jr-red-3); }
.jr-bk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 28px; }
.jr-bk-title { font-size: 14px; font-weight: 600; padding-bottom: 4px; }
.jr-bk-panel--compact .jr-bk-row { grid-template-columns: minmax(0, 1.2fr) 48px 56px minmax(120px, 1.4fr) 76px; }

/* mid: 600-1199 */
@media (max-width: 1199.98px) {
  .jr-trade { grid-template-columns: minmax(0, 1fr) 300px; }
  .jr-under, .jr-bk-grid { grid-template-columns: minmax(0, 1fr); }
  .jr-tc-canvas { height: 320px; }
  .jr-tt--full .jr-tt-row { grid-template-columns: minmax(96px, .9fr) minmax(56px, .6fr) minmax(72px, .6fr) minmax(0, 1fr) 44px 64px 76px 58px; }
  .jr-tt--full .jr-tt-emo, .jr-tt--full .jr-tt-fund { display: none; }
  .jr-mkt-figs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899.98px) {
  .jr-row--day, .jr-row--rep, .jr-trade { grid-template-columns: minmax(0, 1fr); }
  .jr-fields { position: static; }
}
/* phone: < 600 */
@media (max-width: 599.98px) {
  .jr-hero-r { font-size: 32px; }
  .jr-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr-intraday { display: none; }
  .jr-tc-canvas { height: 260px; }
  .jr-replay { margin-left: 0; }
  .jr-thead-pnl { margin-left: 0; align-items: flex-start; }
  .jr-plan--two { grid-template-columns: minmax(0, 1fr); }
  .jr-mkt-read { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr-mkt-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr-year { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jr-bk-panel--compact .jr-bk-row { grid-template-columns: minmax(0, 1fr) 28px 50px 58px 70px; column-gap: 8px; }
  .jr-bk-panel--compact .jr-bk-r { grid-template-columns: minmax(0, 1fr); }
  .jr-bk-panel--compact .jr-bar { display: none; }
  .jr-bk-panel--compact .jr-bk-row:not(.jr-bk-row--head) > span { white-space: nowrap; }
  .jr-tt--full .jr-tt-emo { display: block; }          /* the phone row shows emotions again (dropped at mid) */
  .jr-tt--full .jr-tt-fund { display: none; }
  .jr-trades .jr-tt-row--head { display: none; }
  .jr-daynav { margin-left: 0; }
}

/* Journal page JS (847 B6): EquityChart hover, IntradayChart, TradeChart, month nav, reports paging. Inline SVG drawn
   in a 1000-wide viewBox (preserveAspectRatio none, non-scaling strokes); dots are zero-length round-capped lines.
   Site tokens only, no hex literals; the candle down colour is ZoneHunter's (zonehunter.js) as a scoped token. */
.jr-page { --jr-candle-dn: rgba(136,136,136,1); --jr-entry-shade: rgba(91,155,213,.06); --jr-tip-shadow: 0 8px 20px rgba(0,0,0,.4); }
.jr-chart-svg { display: block; width: 100%; height: 100%; }
.jr-grid { stroke: var(--chart-grid); stroke-width: 1; }
.jr-dot { stroke-width: 9; stroke-linecap: round; }
.jr-dot--white { stroke: var(--text-primary); }
.jr-dot--ring { stroke: var(--chart-bg); stroke-width: 13; }
.jr-eq-canvas { cursor: crosshair; touch-action: pan-y; }
.jr-eq-hair { stroke: var(--text-secondary); stroke-width: 1; }
.jr-eq-mark { stroke: var(--text-primary); stroke-width: 7; }
.jr-eq-tip { position: absolute; z-index: 3; transform: translate(-50%, 14px); display: flex; flex-direction: column; gap: 3px;
  padding: 8px 10px; border-radius: 6px; background: var(--bg-deep); border: 1px solid var(--line-btn); box-shadow: var(--jr-tip-shadow);
  font-size: 12.5px; white-space: nowrap; pointer-events: none; }
.jr-eq-tip[hidden], .jr-eq-tip-row[hidden] { display: none; }
.jr-eq-tip.is-left { transform: translate(0, 14px); }
.jr-eq-tip.is-right { transform: translate(-100%, 14px); }
.jr-eq-tip.is-up { transform: translate(-50%, calc(-100% - 14px)); }
.jr-eq-tip.is-left.is-up { transform: translate(0, calc(-100% - 14px)); }
.jr-eq-tip.is-right.is-up { transform: translate(-100%, calc(-100% - 14px)); }
.jr-eq-tip-date { font-size: 12px; color: var(--text-secondary); }
.jr-intraday-canvas { margin-bottom: 14px; }
.jr-id-zero { stroke: var(--text-muted); stroke-width: 1; }
.jr-id-line { fill: none; stroke: var(--text-primary); stroke-width: 2; stroke-linejoin: round; }
.jr-lv { fill: none; stroke-width: 1.5; stroke-dasharray: 5 4; }
.jr-lv--loss, .jr-lv--stop { stroke: var(--negative); }
.jr-lv--gb { stroke: var(--amber); }
.jr-lv--goal, .jr-lv--target { stroke: var(--green-primary); }
.jr-lv--entry { stroke: var(--zh-entry); }
.jr-lv--entry, .jr-lv--stop, .jr-lv--target { stroke-width: 1.2; stroke-dasharray: none; }
.jr-chart-chip { position: absolute; right: 8px; transform: translateY(-50%); padding: 1px 6px; border-radius: 3px; background: var(--bg-deep);
  font: 10.5px var(--font-mono); color: var(--text-secondary); white-space: nowrap; pointer-events: none; }
.jr-chart-chip .jr-num { font: inherit; }
.jr-chart-chip.is-neg { color: var(--negative); }
.jr-chart-chip.is-amber { color: var(--amber); }
.jr-chart-chip.is-pos { color: var(--green-primary); }
.jr-chart-tick { position: absolute; bottom: -18px; transform: translateX(-50%); font: 10.5px var(--font-mono); color: var(--text-muted); }
.jr-chart-tick.is-first { transform: none; }
.jr-chart-tick.is-last { transform: translateX(-100%); }
.jr-tc-hold { fill: var(--jr-entry-shade); }
.jr-cd-wick { stroke-width: 1; }
.jr-cd-wick.jr-cd-up { stroke: var(--text-primary); }
.jr-cd-wick.jr-cd-dn { stroke: var(--jr-candle-dn); }
.jr-cd-body.jr-cd-up { fill: var(--text-primary); }
.jr-cd-body.jr-cd-dn { fill: var(--jr-candle-dn); }
.jr-tc-tag { position: absolute; right: 6px; transform: translateY(-50%); padding: 1px 6px; border-radius: 3px; font-size: 10.5px; font-weight: 600;
  color: var(--chart-bg); white-space: nowrap; pointer-events: none; }
.jr-tc-tag.is-entry { background: var(--zh-entry); }
.jr-tc-tag.is-stop { background: var(--negative); }
.jr-tc-tag.is-target { background: var(--green-primary); }
.jr-chart-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px;
  font-size: 14px; color: var(--text-secondary); text-align: center; }
.jr-tc-canvas[aria-busy="true"], .jr-cal[aria-busy="true"] .jr-cal-grid, .jr-reports[aria-busy="true"] .jr-rep-list { opacity: .55; transition: opacity .15s; }
.jr-linkbtn { padding: 0; border: 0; background: transparent; color: var(--green-primary); font: 500 13px var(--font-body); cursor: pointer; }
.jr-linkbtn:hover { text-decoration: underline; }
.jr-linkbtn:focus-visible { outline: 2px solid var(--green-accent); outline-offset: 2px; }
.jr-cal-sum .jr-linkbtn, .jr-rep-list .jr-linkbtn { font-size: inherit; }
.jr-rep-err { grid-column: 1 / -1; }
/* phone BreakdownTable (B6 fix round 1): the key gets the room — Won and the bar drop below 600 (Avg R keeps its
   signed value), cells never wrap. The report's compact tables keep their own phone rule above. */
@media (max-width: 599.98px) {
  .jr-bk-panel:not(.jr-bk-panel--compact) .jr-bk-row { grid-template-columns: minmax(0, 1fr) 46px 62px 72px; column-gap: 8px; }
  .jr-bk-panel:not(.jr-bk-panel--compact) .jr-bk-row > :nth-child(3) { display: none; }
  .jr-bk-panel:not(.jr-bk-panel--compact) .jr-bk-r { grid-template-columns: minmax(0, 1fr); }
  .jr-bk-panel:not(.jr-bk-panel--compact) .jr-bar { display: none; }
  .jr-bk-panel:not(.jr-bk-panel--compact) .jr-bk-row > span { white-space: nowrap; }
/* ===== News (/news/, board 854) — built from the claude.ai/design handoff (News Page.dc.html + README).
   Existing tokens only; new ones are derived: impact meter on = amber, off = 10% white; "moved" fill = the tone
   colour at 14%; macro chip border = amber at 40%. The impact meter is amber intensity, never red/green. ===== */
.nw-page { --nw-impact-on: var(--amber); --nw-impact-off: color-mix(in srgb, var(--text-primary) 10%, transparent); }
.nw-page .section-tag { display: block; margin-bottom: 10px; }
.nw-section { scroll-margin-top: 96px; }
.nw-markets, .nw-symbols { margin-top: clamp(3rem, 6vw, 5rem); }
.nw-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 18px; }
.nw-head-text { display: flex; flex-direction: column; max-width: 64ch; }
.nw-moves .nw-head-text { margin-bottom: 18px; }
.nw-page h2.section-headline { font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.15; margin: 0 0 10px; text-wrap: balance; }
.nw-moves h2.section-headline { font-size: clamp(1.5rem, 2vw, 1.8rem); }
.nw-page .nw-head-text .section-desc { font-size: .92rem; line-height: 1.6; color: var(--text-secondary); margin: 0; text-wrap: pretty; }
.nw-page .zh-banner { margin: 1rem 0; }
.nw-amber { color: var(--amber) !important; }
.nw-empty { margin: 0; padding: 18px 20px; font-size: .88rem; color: var(--text-muted); }
.nw-foot { margin: 10px 2px 0; font-size: .78rem; line-height: 1.55; color: var(--text-muted); }

/* Hero + A beside the rail; the rail wraps under A below ~980px of content width (no new media query). */
.nw-lead { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(2rem, 3vw, 2.5rem); margin-top: 1rem; }
.nw-top { flex: 1 1 640px; min-width: 0; }
.nw-moves { flex: 1 1 300px; max-width: 440px; min-width: 0; }

/* Engine off / no data yet */
.nw-warmup { margin: 1rem 0 0; padding: clamp(1.5rem, 4vw, 3rem); max-width: 760px; background: var(--bg-surface);
             border: 1px solid var(--border); border-radius: var(--r-md); display: flex; flex-direction: column; gap: 10px; }
.nw-warmup .nw-tag-muted { color: var(--text-muted); margin: 0; }
.nw-warmup h2.section-headline { font-size: clamp(1.6rem, 2.4vw, 2rem); margin: 0; }
.nw-warmup p { margin: 0; font-size: .98rem; line-height: 1.65; color: var(--text-secondary); max-width: 60ch; }
.nw-warmup .atp-links { margin-top: 6px; font-size: .84rem; }

/* Story list card + legend */
.nw-list { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.nw-list > .nw-empty + .nw-story, .nw-list > .nw-legend + .nw-story { border-top: 1px solid var(--border); }
.nw-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 10px 20px;
             font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.nw-legend-imp { display: inline-flex; align-items: center; gap: 6px; }
.nw-c-bull { color: var(--positive); } .nw-c-bear { color: var(--negative); } .nw-c-unclear { color: var(--text-muted); }
.nw-moved-key { padding: 0 5px; border-radius: 3px; background: color-mix(in srgb, var(--green-primary) 14%, transparent); color: var(--green-primary); font-family: var(--font-mono); }

/* Story row (.nw-story) — one partial for A, B and the symbol pages */
.nw-story { display: flex; gap: 16px; padding: 16px 20px; border-top: 1px solid var(--border); transition: background .12s; }
.nw-list > .nw-story:first-child { border-top: 0; }
.nw-story:hover { background: var(--table-hover); }
.nw-story-side { flex: 0 0 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 3px; }
.nw-rank { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--text-muted); }
.nw-pin { display: flex; height: 16px; align-items: center; color: var(--green-primary); }
.nw-impact { display: flex; gap: 2px; align-items: flex-end; height: 14px; }
.nw-impact i { display: block; width: 4px; border-radius: 1px; background: var(--nw-impact-off); }
.nw-impact i.is-on { background: var(--nw-impact-on); }
.nw-impact .h6 { height: 6px; } .nw-impact .h8 { height: 8px; } .nw-impact .h10 { height: 10px; }
.nw-impact .h12 { height: 12px; } .nw-impact .h14 { height: 14px; }
.nw-impact-sm { height: 9px; } .nw-impact-sm i { width: 3px; }
.nw-impact-sm .h6 { height: 5px; } .nw-impact-sm .h8 { height: 7px; } .nw-impact-sm .h10 { height: 9px; }
.nw-story-main { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 12px 28px; }
.nw-story-text { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.nw-headline { color: var(--text-primary); text-decoration: none; font-family: var(--font-body); font-size: 16px; font-weight: 600;
               line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; }
.nw-headline:hover, .nw-headline:focus-visible { color: var(--green-primary); }
.nw-headline .lu { color: var(--text-muted); margin-left: 6px; vertical-align: -1px; }
.nw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; color: var(--text-secondary); }
.nw-outlet { font-weight: 500; }
.nw-more-outlets, .nw-age { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.nw-age { cursor: help; }
.nw-ev { font-family: var(--font-mono); font-size: 11px; line-height: 18px; padding: 0 6px; border: 1px solid color-mix(in srgb, var(--text-primary) 10%, transparent);
         border-radius: var(--r-sm); color: var(--text-secondary); }
.nw-ev.nw-macro { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 40%, transparent); }
.nw-why { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; }
.nw-why-lbl { color: var(--text-muted); }
.nw-syms { flex: 0 1 290px; min-width: 0; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; }
.nw-sym { position: relative; display: inline-flex; align-items: center; height: 26px; border: 1px solid var(--border);
          border-radius: var(--r-sm); background: var(--bg-elevated); }
.nw-sym[hidden] { display: none; }
.nw-sym > a { display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 8px; text-decoration: none; color: var(--text-primary); }
.nw-sym > a:hover { color: var(--green-primary); }
.nw-glyph { font-size: 9px; }
.nw-tone-bull .nw-glyph, .nw-tone-bull .nw-moved, .nw-tone-bull .nw-tip-move { color: var(--positive); }
.nw-tone-bear .nw-glyph, .nw-tone-bear .nw-moved, .nw-tone-bear .nw-tip-move { color: var(--negative); }
.nw-tone-unclear .nw-glyph, .nw-tone-unclear .nw-moved, .nw-tone-unclear .nw-tip-move { color: var(--text-muted); }
.nw-base { font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.nw-xyz { font-family: var(--font-mono); font-size: 9px; line-height: 13px; padding: 0 3px; border: 1px solid var(--border-accent);
          border-radius: 3px; color: var(--green-accent); }
.nw-moved { height: 18px; margin-right: 4px; padding: 0 6px; border: 0; border-radius: 3px; font-family: var(--font-mono);
            font-size: 10px; cursor: pointer; background: color-mix(in srgb, var(--text-primary) 8%, transparent); }
.nw-tone-bull .nw-moved { background: color-mix(in srgb, var(--green-primary) 14%, transparent); }
.nw-tone-bear .nw-moved { background: color-mix(in srgb, var(--negative) 14%, transparent); }
.nw-moved:focus-visible { outline: 2px solid var(--green-primary); outline-offset: 1px; }
.nw-tip { position: absolute; top: calc(100% + 6px); left: 0; z-index: 6; white-space: nowrap; padding: 8px 10px;
          background: var(--bg-elevated); border: 1px solid var(--border-accent); border-radius: var(--r-md);
          box-shadow: 0 12px 24px -8px color-mix(in srgb, var(--bg-deep) 60%, transparent); font-family: var(--font-mono); font-size: 12px; color: var(--text-primary);
          display: flex; flex-direction: column; gap: 3px; }
.nw-tip[hidden] { display: none; }
.nw-tip-sub { color: var(--text-muted); font-size: 11px; }
.nw-sym-more { height: 26px; padding: 0 8px; border: 1px dashed var(--line-btn); border-radius: var(--r-sm); background: transparent;
               color: var(--text-secondary); font-family: var(--font-mono); font-size: 12px; cursor: pointer; }
.nw-sym-more:hover { color: var(--green-primary); border-color: var(--border-accent); }

/* No news, big move (rail) */
.nw-moves-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.nw-moves-hd, .nw-move-line { display: grid; grid-template-columns: minmax(0, 1fr) auto 62px; gap: 12px; align-items: center; }
.nw-moves-hd { padding: 10px 16px; background: var(--bg-elevated); font-family: var(--font-mono); font-size: .62rem;
               letter-spacing: .12em; text-transform: uppercase; color: var(--text-secondary); }
.nw-moves-hd span:not(:first-child) { text-align: right; }
.nw-move { display: block; padding: 12px 16px; border-top: 1px solid var(--border); text-decoration: none; color: var(--text-primary); }
.nw-move:nth-of-type(even) { background: var(--table-row-alt); }
.nw-move:hover { background: var(--table-hover); }
.nw-move .sc-asset { gap: 8px; min-width: 0; }
.nw-move-pct { font-family: var(--font-mono); font-size: .9rem; font-weight: 600; text-align: right; }
.nw-move-pct.is-up { color: var(--positive); } .nw-move-pct.is-down { color: var(--negative); }
.nw-move-x { font-family: var(--font-mono); font-size: .82rem; text-align: right; }
.nw-move-sub { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; padding-left: 32px;
               font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }

/* B tabs */
.nw-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.nw-tabs .zh-chip { font-size: .78rem; padding: .4rem .85rem; display: inline-flex; align-items: center; gap: 8px; }
.nw-tabs .zh-chip small { font-size: .68rem; color: var(--text-muted); }

/* C: every symbol */
.nw-ctlbar { margin-bottom: 0; }
.nw-table-outer.atp-tablescroll { margin-top: 12px; }
.nw-table { min-width: 900px; font-size: .85rem; }
.nw-table th[data-sort] { cursor: pointer; white-space: nowrap; }
.nw-table th.is-sorted-desc::after { content: ' ↓'; color: var(--green-primary); }
.nw-table th.is-sorted-asc::after { content: ' ↑'; color: var(--green-primary); }
.nw-table th.nw-th-sym { min-width: 250px; }
.nw-table th.nw-th-age, .nw-table td.nw-agecell { text-align: right; }
.nw-table tbody tr.is-alt { background: var(--table-row-alt); }
.nw-table tbody tr:hover { background: var(--table-hover); }
.nw-table td { padding: .75rem 1rem; vertical-align: middle; font-family: var(--font-body); }
.nw-table td.num, .nw-table .pa-center { font-family: var(--font-mono); }
.nw-table .pa-center { text-align: center; }
.nw-table .sc-asset { color: inherit; text-decoration: none; }
.nw-read { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--text-secondary); white-space: nowrap; }
.nw-read .nw-glyph { font-size: 10px; }
.nw-count-hi { font-weight: 600; }
.nw-topcell { max-width: 460px; }
.nw-top-headline { display: block; color: var(--text-primary); text-decoration: none; white-space: nowrap; overflow: hidden;
                   text-overflow: ellipsis; font-weight: 500; }
.nw-top-headline:hover { color: var(--green-primary); }
.nw-top-outlet { display: block; margin-top: 2px; font-size: .75rem; color: var(--text-muted); }
.nw-price { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: .75rem; white-space: nowrap; }
.nw-price .nw-moved-key { line-height: 18px; padding: 0 6px; }
.nw-price.nw-tone-bull { color: var(--positive); } .nw-price.nw-tone-bear { color: var(--negative); }
.nw-price.nw-tone-unclear { color: var(--text-muted); }
.nw-price.nw-tone-bear .nw-moved-key { background: color-mix(in srgb, var(--negative) 14%, transparent); color: var(--negative); }
.nw-price.nw-tone-unclear .nw-moved-key { background: color-mix(in srgb, var(--text-primary) 8%, transparent); color: var(--text-muted); }

/* How it works */
.nw-how .section-desc { max-width: 62ch; }
.nw-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
            gap: clamp(1.5rem, 3vw, 2.5rem) 24px; }
.nw-steps li { padding-top: 20px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.nw-step-n { font-family: var(--font-mono); font-size: 14px; color: var(--green-primary); }
.nw-step-t { font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--text-primary); }
.nw-step-b { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }

/* ===== Symbol-page news block (board task 855, claude.ai/design handoff prompt B) =====
   _news_block.html + _news_block_row.html + _news_railrow.html. Scoped under .atp-shell, not .hip3-market, so
   /crypto/<base>/ takes it as is: the host places the block in its main column, a rail card takes the row last.
   On /hip3/<slug>/ the block is the last section (GTP ruling 25-Oct) and the phone order is unchanged. */
.atp-shell .news-block [hidden] { display: none; }
.atp-shell .news-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.atp-shell .news-head h2.section-tag { font-family: var(--font-display) !important; font-size: 1.5rem; letter-spacing: 0; text-transform: none;
                                       color: var(--text-primary); font-weight: 400; line-height: 1.2; margin: 0; }
.news-count { font-family: var(--font-mono); font-size: .72rem; color: var(--text-secondary); padding: 1px 8px; border: 1px solid var(--line-sep); border-radius: 100px; }
.news-updated { margin-left: auto; font-family: var(--font-mono); font-size: .72rem; color: var(--text-muted); }
.news-updated.is-stale { color: var(--amber); }
/* Read line: one of moved / didn't react / quiet */
.news-read { margin: 0 0 16px; font-size: .95rem; line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; }
.news-read b { color: var(--text-primary); font-weight: 600; }
.news-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text-secondary); margin-right: 10px; vertical-align: 1px; }
.news-dot.is-moved { background: var(--green-primary); }
.news-dot.is-quiet { background: none; border: 1.5px solid var(--text-muted); vertical-align: 0; }
.news-read-tail.is-moved { color: var(--green-primary); }
/* Big move, no news found: amber = unexplained (the hue the page uses for weekend liquidity) */
.news-bigmove { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding: 20px 22px; margin: 0 0 16px; border-radius: var(--r-lg);
                background: color-mix(in srgb, var(--amber) 7%, transparent); border: 1px solid color-mix(in srgb, var(--amber) 34%, transparent); }
.news-bigmove-num { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; }
.news-bigmove-move { font-family: var(--font-mono); font-size: 2.2rem; font-weight: 700; line-height: 1; }
.news-bigmove-move.is-up { color: var(--positive); } .news-bigmove-move.is-down { color: var(--negative); }
.news-bigmove-cap { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; }
.news-bigmove-text { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.news-bigmove-title { margin: 0; font-size: 1.02rem; font-weight: 600; color: var(--text-primary); }
.news-bigmove-body { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--text-secondary); text-wrap: pretty; }
.news-bigmove-link { font-family: var(--font-mono); font-size: .72rem; color: var(--green-primary); }
/* Story list */
.news-list { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.news-divider { padding: 8px 20px; background: var(--bg-band); border-top: 1px solid var(--line-row); font-family: var(--font-mono); font-size: .62rem;
                letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.news-list > .news-earlier:first-child .news-divider { border-top: 0; }
.news-row { display: flex; flex-wrap: wrap; gap: 10px 24px; padding: 16px 20px; border-top: 1px solid var(--line-row); transition: background .12s; }
.news-list > .news-row:first-child { border-top: 0; }
.news-row:hover { background: var(--table-hover); }
.news-row-main { flex: 1 1 320px; min-width: 0; }
.news-hl { color: var(--text-primary); text-decoration: none; font-size: .98rem; font-weight: 500; line-height: 1.45;
           display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-hl:hover { color: var(--green-primary); text-decoration: underline; }
.news-hl:focus-visible { outline: 2px solid var(--green-primary); outline-offset: 2px; border-radius: 2px; }
.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 7px; font-family: var(--font-mono); font-size: .7rem; color: var(--text-muted); }
.news-impact { display: inline-flex; gap: 2px; align-items: center; }
.news-impact i { display: block; width: 4px; height: 10px; border-radius: 1px; background: var(--chart-grid); }
.news-impact i.is-on { background: var(--amber); }
.news-src, .news-age { white-space: nowrap; }
.news-outlet { color: var(--text-secondary); }
.news-age { cursor: help; }
.news-chip { font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; border: 1px solid var(--line-sep); color: var(--text-secondary); }
.news-chip.is-macro { border: 1px dashed color-mix(in srgb, var(--amber) 50%, transparent); color: var(--amber); cursor: help; }
.news-also { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.news-also a { display: inline-flex; gap: 4px; align-items: center; padding: 1px 6px; border-radius: var(--r-sm); background: var(--bg-elevated); color: var(--text-secondary); text-decoration: none; }
.news-also a:hover { color: var(--text-primary); text-decoration: none; }
.news-also .news-glyph { font-size: .6rem; }
.news-glyph.is-bull { color: var(--positive); } .news-glyph.is-bear { color: var(--negative); } .news-glyph.is-unclear { color: var(--text-secondary); }
.news-why { margin: 7px 0 0; font-size: .84rem; line-height: 1.55; color: var(--text-secondary); text-wrap: pretty; }
.news-row-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; flex-wrap: wrap; gap: 6px 10px; font-family: var(--font-mono); font-size: .72rem; }
.news-tone { white-space: nowrap; cursor: help; }
.news-tone.is-bull { color: var(--positive); } .news-tone.is-bear { color: var(--negative); } .news-tone.is-unclear { color: var(--text-secondary); }
.news-moved { padding: 3px 9px; border-radius: 100px; white-space: nowrap; background: color-mix(in srgb, var(--green-primary) 13%, transparent); color: var(--positive); }
.news-moved.is-down { background: color-mix(in srgb, var(--negative) 14%, transparent); color: var(--negative); }
.news-xn { color: var(--text-muted); font-size: .66rem; white-space: nowrap; }
/* Footer: 7-day toggle (the .hip3-csv-btn look) + All news, then the tools row */
.news-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }
.news-toggle { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: .72rem; padding: 7px 13px; border-radius: var(--r-md);
               border: 1px solid var(--border-accent); background: transparent; color: var(--green-primary); cursor: pointer; }
.news-toggle:hover { background: var(--glow-green); }
.news-toggle:focus-visible, .news-tool:focus-visible, .news-railrow:focus-visible { outline: 2px solid var(--green-primary); outline-offset: 2px; }
.news-all { margin-left: auto; font-family: var(--font-mono); font-size: .72rem; color: var(--green-primary); text-decoration: none; }
.news-all:hover { text-decoration: underline; }
.news-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.news-tools-lbl { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-right: 4px; }
.news-tools-btns { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; min-width: 0; }
.news-tool { display: inline-flex; align-items: center; gap: 7px; height: 32px; white-space: nowrap; line-height: 1.2; min-width: 0; padding: 0 12px; border-radius: var(--r-md);
             border: 1px solid var(--line-btn); background: transparent; color: var(--text-primary); font-size: .78rem; text-decoration: none; }
.news-tool .lu { flex: 0 0 auto; color: var(--green-primary); }
.news-tool:hover { border-color: var(--green-primary); color: var(--text-primary); text-decoration: none; }
.news-tool.is-primary { border-color: var(--border-accent); background: var(--glow-green); color: var(--green-primary); font-weight: 600; }
.news-legal { margin: 12px 0 0; font-size: .76rem; line-height: 1.6; color: var(--text-muted); text-wrap: pretty; }
/* Rail row: News 24h · 3 · ▲ moved ↓ at the foot of a rail card */
.news-railrow { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: baseline; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border);
                font-family: var(--font-mono); font-size: .76rem; text-decoration: none; }
.news-railrow:hover { text-decoration: none; opacity: .85; }
.news-railrow-k { color: var(--text-muted); }
.news-railrow-v { text-align: right; color: var(--text-primary); white-space: nowrap; }
.news-railrow-tail.is-moved { color: var(--green-primary); } .news-railrow-tail.is-big { color: var(--amber); } .news-railrow-tail.is-quiet { color: var(--text-muted); }
.news-railrow-arrow { color: var(--green-primary); }
@media (max-width: 767.98px) {
  .news-row { padding: 14px; }
  .news-row-side { flex-direction: row; align-items: center; }
  .news-tools-btns { display: grid; grid-template-columns: 1fr 1fr; flex: 1 1 100%; }
  .news-tool { height: 44px; white-space: normal; }
  .news-toggle { min-height: 44px; }
}