/* Legend AI Scanner — fintech dark dashboard */

:root {
    /* Deep navy base — Legend AI brand */
    --bg: #0a0e1a;
    --bg2: #0f1420;
    --bg3: #171c2e;
    --bg-elev: #131828;
    --border: #1e2640;
    --border-soft: #131828;
    --text: #e8edf5;
    --text-muted: #a8b1bd;
    --text-dim: #6e7a94;
    /* Antique gold accent — unified "legendary" brand identity */
    --accent: #d4a857;
    --accent-hover: #e0b96b;
    --accent-deep: #b5821a;
    --accent-dim: rgba(212, 168, 87, 0.14);
    --accent-ring: rgba(212, 168, 87, 0.32);
    --accent-soft: rgba(212, 168, 87, 0.06);
    --green: #3fb950;
    --green-dim: rgba(63, 185, 80, 0.15);
    --yellow: #d29922;
    --yellow-dim: rgba(210, 153, 34, 0.15);
    --red: #f85149;
    --red-dim: rgba(248, 81, 73, 0.15);
    --purple: #a371f7;

    /* Standardized radii */
    --radius: 8px;
    --radius-sm: 6px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);

    --font-mono: 'SF Mono', ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace;
    /* Display serif — editorial voice for legend names, hero headings, pull quotes */
    --font-display: 'Crimson Pro', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
    --transition: all 180ms ease;

    /* Type scale: 11 / 12 / 14 / 16 / 20 / 24 / 32 */
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-base: 14px;
    --fs-md: 16px;
    --fs-lg: 20px;
    --fs-xl: 24px;
    --fs-xxl: 32px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    font-size: var(--fs-base);
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
}

body {
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(212, 168, 87, 0.05), transparent 60%),
        radial-gradient(900px 500px at 90% 0%,  rgba(212, 168, 87, 0.025), transparent 60%),
        var(--bg);
    min-height: 100vh;
}

/* Global resets for links + inheritance */
a { color: var(--accent); text-decoration: none; transition: color 150ms ease; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

button { color: inherit; font-family: inherit; }

/* Skip link for a11y */
.skip-link {
    position: absolute;
    left: 16px;
    top: 0;
    transform: translateY(-150%);
    background: var(--accent);
    color: #0b1420;
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    z-index: 1000;
}
.skip-link:focus {
    top: 12px;
    transform: translateY(0);
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Screen-reader-only utility — content crawlable + accessible but visually hidden */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Global focus ring */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Numbers use tabular figures for alignment */
.num, .score, .score-ring-value, td.num, th.num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* Generic data table — used by industries ETF ranked table and similar */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.data-table th {
    text-align: left;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.data-table th.num { text-align: right; }
.data-table td {
    padding: 7px 10px;
    border-bottom: 1px solid rgba(48,54,61,.5);
    vertical-align: middle;
}
.data-table td.num { text-align: right; }
.data-table tbody tr:hover { background: var(--bg3); }

/* Global ticker link — accent color, no decoration */
.ticker-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}
.ticker-link:hover { text-decoration: underline; }

/* ── Navbar ────────────────────────────────────────────────────────── */
.navbar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 24px;
    height: 56px;
    background: rgba(22, 27, 34, 0.85);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-brand a {
    color: var(--text);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    line-height: 1;
}
.nav-brand a:hover { text-decoration: none; color: var(--text); }
.nav-brand .brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px rgba(212, 168, 87, 0.35));
}
.nav-brand .brand-wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1;
}
.nav-brand .brand-legend {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 19px;
    letter-spacing: -0.005em;
    color: var(--text);
}
.nav-brand .brand-ai {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    padding: 2px 5px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-ring);
    border-radius: 3px;
    transform: translateY(-1px);
}
/* Legacy logo-dot kept as a hidden no-op — older templates may still ref it */
.nav-brand .logo-dot { display: none; }

.nav-toggle-input { display: none; }
.nav-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 10px;
    background: transparent;
    border: none;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    align-items: center;
}
.nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle-input:checked ~ .nav-hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.nav-toggle-input:checked ~ .nav-hamburger span:nth-child(2) {
    opacity: 0;
}
.nav-toggle-input:checked ~ .nav-hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.nav-links {
    display: flex;
    gap: 2px;
    height: 100%;
    align-items: stretch;
}
.nav-links a {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    font-size: var(--fs-base);
    font-weight: 500;
    padding: 0 14px;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    transition: var(--transition);
    text-decoration: none;
}
.nav-links a:hover { color: var(--text); text-decoration: none; background: rgba(255,255,255,0.02); }
.nav-links a.active {
    color: var(--text);
    border-bottom-color: var(--accent);
    background: rgba(230, 168, 23, 0.06);
}

.nav-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* ── Mentor chips (top-right navbar — portraits linking to /ask) ──────
   IMPORTANT: This is .mentor-chip NOT .legend-chip — the latter is taken
   by the in-row 16px badges on /scans table rows (see line ~1280). */
.mentor-chips {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 4px;
}
.mentor-chip {
    position: relative;
    display: inline-flex;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--border);
    background: var(--bg3);
    transition: var(--transition);
    text-decoration: none;
    flex-shrink: 0;
}
.mentor-chip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    display: block;
}
/* Per-legend framing — handle off-center subjects */
.mentor-chip[href*="weinstein"] img,
.mentor-chip[href*="wyckoff"] img { object-position: 65% 28%; }
.mentor-chip[href*="darvas"] img  { object-position: 55% 22%; }
.mentor-chip[href*="livermore"] img { object-position: center 16%; }
.mentor-chip:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 0 0 2px var(--accent-ring), 0 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 1;
}
.mentor-chip.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-ring), 0 0 14px -2px var(--accent);
}
.mentor-chip-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    border: 1.5px solid var(--bg);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 1500px) {
    .mentor-chips { display: none; }
}

.nav-search {
    position: relative;
    display: flex;
    align-items: center;
}
.nav-search-icon {
    position: absolute;
    left: 8px;
    color: var(--text-dim);
    pointer-events: none;
}
.nav-search input {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    padding: 5px 10px 5px 28px;
    width: 120px;
    transition: width 200ms ease, border-color 150ms ease;
    text-transform: uppercase;
}
.nav-search input::placeholder { text-transform: none; color: var(--text-dim); }
.nav-search input:focus {
    outline: none;
    border-color: var(--accent-ring);
    width: 160px;
}

/* ── Nav More Dropdown ─────────────────────────────────────────────── */
.nav-more {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    min-width: 0;
}
.nav-more-btn {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    color: var(--text-muted);
    font-size: var(--fs-base);
    font-weight: 500;
    padding: 0 14px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    transition: var(--transition);
    white-space: nowrap;
}
.nav-user .nav-more-btn {
    min-width: 0;
}
.nav-user-name {
    display: inline-block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
@media (max-width: 1400px) and (min-width: 769px) {
    .nav-actions-admin .nav-search {
        display: none;
    }
    .nav-actions-admin .nav-user .nav-more-btn {
        max-width: 150px;
    }
    .nav-actions-admin .nav-user-name {
        max-width: 82px;
    }
}
.nav-more-btn:hover { color: var(--text); background: rgba(255,255,255,0.02); }
.nav-more-btn.active {
    color: var(--text);
    border-bottom-color: var(--accent);
    background: rgba(230, 168, 23, 0.06);
}
.nav-more-menu {
    display: none;
    position: absolute;
    top: calc(100% + 1px);
    right: 0;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.4rem 0;
    min-width: 148px;
    z-index: 200;
    list-style: none;
    margin: 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.nav-more.open .nav-more-menu { display: block; }
.nav-more-menu .nav-link {
    display: block;
    padding: 0.4rem 1rem;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: var(--fs-base);
    font-weight: 500;
    text-decoration: none;
    transition: var(--transition);
}
.nav-more-menu .nav-link:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.nav-more-menu .nav-link.active { color: var(--accent); }
/* Section structure inside dropdowns */
.nav-more-menu .nav-section-label {
    padding: 0.55rem 1rem 0.2rem;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    pointer-events: none;
}
.nav-more-menu .nav-section-divider {
    height: 1px;
    background: var(--border-soft);
    margin: 0.35rem 0;
}

/* ── Container ─────────────────────────────────────────────────────── */
.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 24px;
}
.container:focus { outline: none; }

/* ── Page Header ───────────────────────────────────────────────────── */
.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-soft);
}
.page-header-title h1 { margin: 0; }

/* Editorial page title — display serif, slight letter-spacing, sentence-style trailing period.
   Use on flagship/brand pages (e.g. /legends) where you want curatorial voice over utility. */
.page-title-editorial {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(28px, 3.2vw, 40px);
    letter-spacing: -0.015em;
    line-height: 1.05;
    color: var(--text);
    margin: 0;
}
.page-title-editorial::after {
    content: '.';
    color: var(--accent);
    margin-left: 1px;
}
.page-title-editorial .accent {
    color: var(--accent);
    font-style: italic;
    font-weight: 500;
}
.page-header-sub {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    margin-top: 4px;
}

/* ── Typography ─────────────────────────────────────────────────────── */
h1 {
    font-size: var(--fs-xl);
    font-weight: 700;
    letter-spacing: -0.01em;
}
h2 {
    font-size: var(--fs-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 28px 0 12px;
}
h3 { font-size: var(--fs-md); font-weight: 600; }

/* Display serif — editorial voice for legend names, hero quotes, brand pages.
   Applied opt-in via .display-serif rather than to all h1/h2 to keep dashboards utilitarian. */
.display-serif {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.005em;
    font-feature-settings: 'liga', 'kern';
}
.display-serif-italic {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
}

/* ── Buttons ──────────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg3);
    color: var(--text);
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: 500;
    font-family: inherit;
    transition: var(--transition);
    white-space: nowrap;
    text-decoration: none;
}
.btn:hover { background: var(--border); border-color: var(--text-dim); text-decoration: none; color: var(--text); }
.btn-primary {
    background: linear-gradient(180deg, var(--accent-hover) 0%, var(--accent) 100%);
    color: #0b1420;
    border-color: transparent;
    font-weight: 600;
}
.btn-primary:hover { filter: brightness(1.05); box-shadow: 0 0 0 1px var(--accent-ring), 0 2px 10px rgba(212, 168, 87, 0.28); color: #0b1420; }
.btn-primary[disabled] { opacity: 0.6; cursor: not-allowed; }

.btn-secondary {
    background: transparent;
    border-color: var(--border);
    color: var(--text);
}
.btn-secondary:hover { background: var(--bg3); border-color: var(--accent-ring); }

.btn-sm { padding: 6px 12px; font-size: var(--fs-sm); }
.btn-xs { padding: 2px 7px; font-size: 11px; }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--bg3); color: var(--text); border-color: var(--border); }

/* Icon button for row actions */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg3);
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition);
}
.btn-icon:hover { color: var(--text); background: var(--border); }
.btn-icon-danger:hover { color: var(--red); border-color: rgba(248, 81, 73, 0.4); background: var(--red-dim); }
.btn-icon-success:hover { color: var(--green); border-color: rgba(63, 185, 80, 0.4); background: rgba(63, 185, 80, 0.08); }
.btn-icon-debrief { color: var(--accent); }
.btn-icon-debrief:hover { color: var(--accent); border-color: var(--accent-ring); background: var(--accent-soft); }
.btn-icon-debrief:disabled { opacity: 0.5; cursor: not-allowed; }
.row-actions { display: inline-flex; gap: 6px; }

/* ── Trade Debrief (upgraded: slide-over panel) ──────────────────────── */
.debrief-panel-wrap {
    position: fixed; inset: 0; z-index: 1100;
    display: flex; justify-content: flex-end; align-items: stretch;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(2px);
}
.debrief-panel-aside {
    position: relative;
    width: min(480px, 100vw);
    background: var(--bg2);
    border-left: 1px solid var(--border);
    overflow-y: auto;
    padding: 1.5rem;
    display: flex; flex-direction: column; gap: 0;
}
.debrief-panel-close {
    position: absolute; top: 12px; right: 12px;
}
.debrief-spinner-bar {
    position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%);
    background: var(--bg3); border: 1px solid var(--border);
    border-radius: 20px; padding: 6px 16px; font-size: 13px;
    color: var(--accent); z-index: 1200;
    display: none;   /* shown only when htmx-indicator class active */
}
.htmx-request .debrief-spinner-bar,
.htmx-request.debrief-spinner-bar { display: block; }

/* Debrief card (inside the panel) */
.debrief-card { display: flex; flex-direction: column; gap: 0; }
.debrief-header { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 1rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.debrief-header-left { display: flex; gap: 12px; flex: 1; min-width: 0; }
.debrief-portrait { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.debrief-title-name { font-size: 15px; font-weight: 600; margin: 0 0 2px; }
.debrief-meta { font-size: 12px; color: var(--text-muted); margin: 0; }
.debrief-grade {
    flex-shrink: 0; width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px; font-size: 20px; font-weight: 700;
}
.grade-A { background: rgba(63,185,80,0.15); color: var(--green); }
.grade-B { background: rgba(63,185,80,0.08); color: var(--green); }
.grade-C { background: rgba(210,153,34,0.12); color: var(--yellow); }
.grade-D { background: rgba(248,81,73,0.08); color: var(--red); }
.grade-F { background: rgba(248,81,73,0.15); color: var(--red); }
.debrief-section { padding: 10px 0; border-bottom: 1px solid var(--border); }
.debrief-section:last-of-type { border-bottom: none; }
.debrief-section-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 0 0 4px; }
.debrief-section p { font-size: 13px; line-height: 1.65; margin: 0; }
.debrief-next .debrief-section-label { color: var(--accent); }
.debrief-footer { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; }
.debrief-footer-actions { display: flex; gap: 6px; align-items: center; }
.debrief-other-legends summary { list-style: none; cursor: pointer; }
.debrief-legend-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.debrief-upsell { padding: 1.5rem; text-align: center; }
/* Legacy inline debrief (kept for backwards compat, now hidden by panel) */
.debrief-row td { padding: 0 !important; border-top: none !important; }

/* ── Journal chip (ask.html) ──────────────────────────────────────────── */
.journal-chip { min-height: 20px; font-size: 12px; color: var(--accent); margin-bottom: 4px; }
.journal-chip-inner { background: rgba(88,166,255,0.08); border: 1px solid rgba(88,166,255,0.2); border-radius: 20px; padding: 2px 10px; }

/* ── Chat disclaimer (ask.html) ──────────────────────────────────────── */
.chat-disclaimer { font-size: 12px; color: var(--text-muted); opacity: 0.6; text-align: center; padding: 4px 0 8px; line-height: 1.4; }

/* ── ctx-toggle (journal toggle in ask.html) ─────────────────────────── */
.ctx-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.ctx-toggle input[type=checkbox] { accent-color: var(--accent); width: 14px; height: 14px; }
.ctx-toggle input:disabled { opacity: 0.4; }
@media (max-width: 768px) {
    .ctx-toggle input[type=checkbox] { width: 20px; height: 20px; }
}
.pro-badge { background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent-ring); border-radius: 4px; font-size: 10px; padding: 1px 5px; font-weight: 600; letter-spacing: 0.04em; }

/* ── Academy ──────────────────────────────────────────────────────────── */
.academy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 2rem; }
.academy-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: border-color 0.2s, box-shadow 0.2s; }
.academy-card:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.academy-portrait { height: 180px; overflow: hidden; background: var(--bg3); }
.academy-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: grayscale(0.3); transition: filter 0.25s; }
.academy-card:hover .academy-portrait img { filter: none; }
.academy-card-body { padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.academy-card-title { font-size: 15px; font-weight: 600; color: var(--text); margin: 0; }
.academy-card-sub { font-size: 13px; color: var(--text-muted); margin: 0; }
.academy-progress-bar { height: 4px; background: var(--bg3); border-radius: 2px; overflow: hidden; }
.academy-progress-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.4s; }
.academy-progress-text { font-size: 11px; color: var(--text-muted); margin: 0; }
.academy-cta { margin-top: 2rem; padding: 1.5rem; background: var(--bg2); border-radius: 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* Academy path page */
.academy-path-hero { display: flex; gap: 1.5rem; align-items: flex-start; }
.academy-path-portrait img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: top; }
.academy-path-desc { font-size: 14px; color: var(--text-muted); margin: 0.5rem 0 0; max-width: 60ch; }
.academy-session-list { display: flex; flex-direction: column; gap: 0; margin-top: 1.5rem; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.academy-session-row { display: grid; grid-template-columns: 2rem 1fr auto; gap: 1rem; align-items: center; padding: 1rem 1.25rem; background: var(--bg2); border-bottom: 1px solid var(--border); transition: background 0.15s; }
.academy-session-row:last-child { border-bottom: none; }
.academy-session-row:hover { background: var(--bg3); }
.academy-session-row.session-done { background: rgba(63,185,80,0.04); }
.academy-session-row.session-locked { opacity: 0.7; }
.session-number { font-size: 13px; color: var(--text-muted); font-weight: 600; text-align: center; }
.session-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.session-title { font-size: 14px; font-weight: 600; color: var(--text); text-decoration: none; }
a.session-title:hover { color: var(--accent); }
.session-summary { font-size: 13px; color: var(--text-muted); margin: 4px 0 0; }
.session-meta { margin: 2px 0 0; }
.session-badge { font-size: 10px; border-radius: 4px; padding: 2px 7px; font-weight: 600; }
.session-badge-done { background: rgba(63,185,80,0.15); color: var(--green); }
.session-badge-progress { background: var(--accent-dim); color: var(--accent); }
.session-badge-free { background: rgba(63,185,80,0.08); color: var(--green); border: 1px solid rgba(63,185,80,0.2); }
.lock-icon { font-size: 16px; color: var(--text-muted); }
.academy-upgrade-callout { margin-top: 1.5rem; padding: 1rem 1.25rem; background: var(--accent-soft); border: 1px solid var(--accent-ring); border-radius: 8px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* Academy quiz result */
.quiz-result { padding: 1rem; border-radius: 8px; }
.quiz-perfect { background: rgba(63,185,80,0.08); border: 1px solid rgba(63,185,80,0.2); }
.quiz-good    { background: rgba(210,153,34,0.06); border: 1px solid rgba(210,153,34,0.2); }
.quiz-retry   { background: rgba(248,81,73,0.06);  border: 1px solid rgba(248,81,73,0.2); }
.quiz-score-line { font-weight: 600; margin-bottom: 1rem; }
.quiz-explain-item { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.quiz-explain-item:last-child { border-bottom: none; margin-bottom: 0; }
.quiz-q-text { font-size: 13px; display: flex; gap: 6px; margin-bottom: 4px; }
.q-icon { font-weight: 700; flex-shrink: 0; }
.q-correct .q-icon { color: var(--green); }
.q-wrong   .q-icon { color: var(--red); }
.quiz-answer-line { font-size: 12px; margin-bottom: 4px; }
.quiz-explain-text { font-size: 12px; color: var(--text-muted); font-style: italic; margin: 0; }

/* ── Stats Grid ─────────────────────────────────────────────────────── */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 16px 0;
}
.stats-grid-3 { grid-template-columns: repeat(3, 1fr); }
.stats-grid-4 { grid-template-columns: repeat(4, 1fr); }
.stats-grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) {
    .stats-grid-3, .stats-grid-4, .stats-grid-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .stats-grid-3, .stats-grid-4, .stats-grid-5 { grid-template-columns: 1fr; }
}

.stat-card {
    position: relative;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    transition: var(--transition);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--accent);
    opacity: 0.35;
}
.stat-card.stat-card-green::before { background: var(--green); }
.stat-card.stat-card-yellow::before { background: var(--yellow); }
.stat-card.stat-card-red::before { background: var(--red); }
.stat-card.stat-card-muted::before { background: var(--text-dim); opacity: 0.5; }

/* Hover: keep the always-on top stripe + border highlight + subtle lift.
   Dropped the gradient bg fill (was 4 simultaneous effects → busy). */
.stat-card:hover {
    border-color: var(--accent-ring);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm), 0 0 0 1px var(--accent-ring);
}
.stat-card:hover::before { opacity: 0.7; }
.stat-label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.stat-value {
    font-size: var(--fs-xl);
    font-weight: 700;
    margin-top: 6px;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
.stat-value.highlight { color: var(--green); }
.stat-sub { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }

/* ── Horizontal metric row patterns ──────────────────────────────────
   We have THREE patterns serving similar purposes. Use this guide:

   .metrics-strip   ← CANONICAL for new code
       Edge-to-edge bordered container, vertical dividers between cells,
       hover lifts cell background. Use for primary dashboard KPI rows.

   .summary-row     ← Legacy. Tighter padding, gap-divided grid cells,
       used on mid-page summaries. Acceptable for inline contexts.

   .stats-grid      ← Legacy. Auto-fit grid of detached cards (each with
       its own border + hover). Use only when each metric needs to stand
       alone visually (e.g., "Setup of the Day" lower stats).

   When refactoring, prefer .metrics-strip. Don't introduce new patterns. */

/* ── Metrics Strip (CANONICAL — use this for new dashboard KPI rows) ─── */
.metrics-strip {
    display: flex;
    align-items: stretch;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin: 0 0 28px;
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
}
.metric-card {
    flex: 1;
    min-width: 120px;
    padding: 14px 18px;
    transition: background 150ms ease;
}
.metric-card:hover { background: var(--bg-elev); }
.metric-divider {
    width: 1px;
    background: var(--border-soft);
    align-self: stretch;
    flex-shrink: 0;
}
.metric-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-dim);
    margin-bottom: 4px;
}
.metric-value {
    font-size: var(--fs-xl);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--text);
}
.metric-value.metric-sm { font-size: var(--fs-md); font-weight: 700; }
.metric-value.metric-green  { color: var(--green); }
.metric-value.metric-yellow { color: var(--yellow); }
.metric-value.metric-red    { color: var(--red); }
.metric-value.metric-accent { color: var(--accent); }
.metric-sub {
    font-size: var(--fs-xs);
    color: var(--text-dim);
    margin-top: 4px;
}
.metric-sub.metric-ok  { color: var(--green); }
.metric-sub.metric-err { color: var(--red);   }
@media (max-width: 768px) {
    .metric-card { min-width: 50%; }
    .metric-divider { display: none; }
}

/* ── Summary row ────────────────────────────────────────────────── */
.summary-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin: 12px 0 24px;
    background: var(--border-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.summary-item {
    padding: 12px 16px;
    background: var(--bg2);
    transition: var(--transition);
}
.summary-item:hover { background: var(--bg-elev); }
.summary-label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.summary-value {
    font-size: var(--fs-lg);
    font-weight: 700;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
.summary-highlight { color: var(--accent); }
.summary-actionable { color: var(--green); }
@media (max-width: 768px) { .summary-row { grid-template-columns: repeat(2, 1fr); } }

/* ── Score Ring (SVG-free, conic gradient proportional fill) ────────── */
.score-ring {
    --ring-size: 44px;
    --ring-track: var(--bg3);
    --ring-fill: var(--text-dim);
    --score-pct: 0;
    width: var(--ring-size);
    height: var(--ring-size);
    border-radius: 50%;
    background: conic-gradient(var(--ring-fill) calc(var(--score-pct) * 1%), var(--ring-track) 0);
    display: inline-grid;
    place-items: center;
    position: relative;
    flex-shrink: 0;
}
.score-ring::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--bg2);
}
.score-ring-value {
    position: relative;
    z-index: 1;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.score-ring.ring-sm { --ring-size: 34px; }
.score-ring.ring-sm .score-ring-value { font-size: var(--fs-xs); }
.score-ring.ring-lg { --ring-size: 64px; }
.score-ring.ring-lg .score-ring-value { font-size: var(--fs-md); }
/* Color modifier classes — set --ring-fill for JS-free fallback */
.score-ring-green  { --ring-fill: var(--green); }
.score-ring-yellow { --ring-fill: var(--yellow); }
.score-ring-red    { --ring-fill: var(--red); }
.score-ring-muted  { --ring-fill: var(--text-dim); }

/* ── Tables ────────────────────────────────────────────────────────── */
.table-wrap {
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin: 12px 0 24px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    max-height: 78vh;
    box-shadow: var(--shadow-sm);
}
table {
    width: 100%;
    min-width: 600px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-base);
}
thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    text-align: left;
    padding: 10px 14px;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    white-space: nowrap;
}
td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: middle;
    font-size: var(--fs-sm);
}
tbody tr { transition: background 120ms ease; }
tbody tr:hover td { background: var(--accent-soft); }
tbody tr:last-child td { border-bottom: none; }

td .ticker { font-weight: 700; color: var(--text); font-size: var(--fs-base); }
td a:has(.ticker):hover { text-decoration: none; }
td a:has(.ticker):hover .ticker { color: var(--accent); }

/* ── Badges ────────────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text-muted);
    letter-spacing: 0.2px;
    line-height: 1.6;
}
.badge-ok { color: var(--green); border-color: rgba(63, 185, 80, 0.4); background: var(--green-dim); }
.badge-running { color: var(--accent); border-color: var(--accent-ring); background: var(--accent-dim); }
.badge-warn { color: var(--yellow); border-color: rgba(210, 153, 34, 0.4); background: var(--yellow-dim); }
.badge-err { color: var(--red); border-color: rgba(248, 81, 73, 0.4); background: var(--red-dim); }
.badge-pattern { color: var(--accent); border-color: var(--accent-ring); background: var(--accent-dim); font-family: inherit; }
.section-badge { display: inline-block; background: var(--bg3); color: var(--text-muted); border-radius: 999px; padding: 0.1rem 0.5rem; font-size: 0.75rem; font-weight: 400; margin-left: 0.5rem; }
.badge-new  { color: #3fb950; border-color: rgba(63,185,80,0.4); background: rgba(63,185,80,0.1); font-weight: 700; letter-spacing: .04em; }
.badge-rs-nh { color: #a371f7; border-color: rgba(163,113,247,0.4); background: rgba(163,113,247,0.1); font-size: 10px; font-weight: 700; letter-spacing: .06em; vertical-align: middle; margin-left: 3px; white-space: nowrap; }
.badge-weekly { color: #d29922; border-color: rgba(210,153,34,0.4); background: rgba(210,153,34,0.1); font-size: 10px; font-weight: 700; letter-spacing: .06em; vertical-align: middle; margin-left: 3px; white-space: nowrap; }
.badge-vdu { color: #58a6ff; border-color: rgba(88,166,255,0.35); background: rgba(88,166,255,0.08); font-size: 10px; font-weight: 700; letter-spacing: .06em; vertical-align: middle; margin-left: 3px; white-space: nowrap; }
.badge-pt { color: var(--accent); border-color: var(--accent-ring); background: var(--accent-soft); font-size: 10px; padding: 1px 5px; margin-left: 2px; white-space: nowrap; }
.badge-bluedot { color: var(--accent); border-color: var(--accent-ring); background: var(--accent-dim); font-size: 10px; padding: 1px 5px; margin-left: 2px; white-space: nowrap; }
.badge-ftd-confirmed { color: var(--green); border-color: rgba(63,185,80,0.35); background: rgba(63,185,80,0.08); font-size: 10px; padding: 1px 5px; }
.badge-ftd-watch { color: var(--yellow); border-color: rgba(210,153,34,0.35); background: rgba(210,153,34,0.08); font-size: 10px; padding: 1px 5px; }
.badge-ftd-failed { color: var(--red); border-color: rgba(248,81,73,0.35); background: rgba(248,81,73,0.08); font-size: 10px; padding: 1px 5px; }
.badge-gap   { color: #f0883e; border-color: rgba(240,136,62,0.4); background: rgba(240,136,62,0.1); font-size: 10px; font-weight: 700; letter-spacing: .06em; vertical-align: middle; margin-left: 3px; }
.badge-tight { color: #a371f7; border-color: rgba(163,113,247,0.35); background: rgba(163,113,247,0.08); font-size: 10px; font-weight: 700; letter-spacing: .06em; vertical-align: middle; margin-left: 3px; }
.badge-est { font-size: 0.7rem; padding: 0.1rem 0.3rem; border-radius: 3px; background: rgba(248,81,73,0.15); color: var(--red); margin-left: 3px; vertical-align: middle; }
.badge-invalidated { display: inline-block; background: rgba(248,81,73,0.2); color: var(--red); border: 1px solid rgba(248,81,73,0.4); border-radius: 3px; font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.35rem; margin-left: 4px; vertical-align: middle; text-transform: uppercase; letter-spacing: 0.03em; }
/* Insider buying badge — SEC EDGAR Form 4 net purchase signal */
.badge-insider { color: #f0883e; border-color: rgba(240,136,62,0.40); background: rgba(240,136,62,0.10); font-size: 10px; font-weight: 700; letter-spacing: .06em; vertical-align: middle; margin-left: 3px; }
.badge-earnings { font-size: 10px; font-weight: 700; letter-spacing: .05em; vertical-align: middle; margin-left: 3px; }
.badge-earnings-danger { color: #f85149; border-color: rgba(248,81,73,0.45); background: rgba(248,81,73,0.12); box-shadow: 0 0 0 1px rgba(248,81,73,0.25); animation: earnings-pulse 2.4s ease-in-out infinite; }
.badge-earnings-warn   { color: #d29922; border-color: rgba(210,153,34,0.4);  background: rgba(210,153,34,0.1); }
.badge-earnings-ok     { color: #8b949e; border-color: rgba(139,148,158,0.3); background: transparent; }
.badge-earn { background: rgba(210,153,34,0.15); color: #d29922; border: 1px solid rgba(210,153,34,0.3); font-size: 10px; padding: 1px 5px; border-radius: 4px; font-weight: 600; letter-spacing: .3px; vertical-align: middle; margin-left: 4px; }
.badge-wd { background: rgba(63,185,80,.2); color: var(--green); border: 1px solid rgba(63,185,80,.4); font-size: 10px; padding: 1px 6px; border-radius: 4px; font-weight: 700; letter-spacing: .3px; vertical-align: middle; margin-left: 3px; }
.badge-climax { background: rgba(248,81,73,.12); color: var(--red); border: 1px solid rgba(248,81,73,.3); font-size: 10px; padding: 1px 5px; border-radius: 4px; font-weight: 600; vertical-align: middle; margin-left: 4px; }
.badge-conviction-a { background: rgba(63,185,80,.2); color: var(--green); border: 1px solid rgba(63,185,80,.4); font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 700; }
.badge-conviction-b { background: rgba(88,166,255,.15); color: var(--accent); border: 1px solid rgba(88,166,255,.3); font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 700; }
.badge-conviction-c { background: rgba(210,153,34,.15); color: var(--yellow); border: 1px solid rgba(210,153,34,.3); font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 700; }
.badge-conviction-d, .badge-conviction-f { background: rgba(248,81,73,.1); color: var(--red); border: 1px solid rgba(248,81,73,.3); font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 700; }
/* Subtle ring pulse — replaces opacity blink which flickered in dense tables */
@keyframes earnings-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(248,81,73,0.25); }
  50%      { box-shadow: 0 0 0 2px rgba(248,81,73,0.45); }
}
.entry-dist { font-size: 10px; font-family: var(--font-mono); margin-left: 5px; opacity: .85; }
.entry-near     { color: #3fb950; }
.entry-mid      { color: #d29922; }
.entry-far      { color: #8b949e; }
.entry-approach { color: #58a6ff; }
.entry-zone-badge {
  display: inline-block; margin-left: 5px; padding: 1px 6px;
  font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #0d1117; background: #3fb950; border-radius: 4px;
  box-shadow: 0 0 6px rgba(63,185,80,0.5);
  animation: zone-pulse 2s ease-in-out infinite;
}
@keyframes zone-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(63,185,80,0.5); }
  50%       { box-shadow: 0 0 12px rgba(63,185,80,0.9); }
}
tr.row-near-entry { background: rgba(63,185,80,0.04); border-left: 3px solid rgba(63,185,80,0.4); }
.stage-badge { font-weight: 700; letter-spacing: .04em; }
.stage-2 { color: #3fb950; border-color: rgba(63,185,80,0.45); background: rgba(63,185,80,0.12); }
.stage-1 { color: #58a6ff; border-color: rgba(88,166,255,0.35); background: rgba(88,166,255,0.08); }
.stage-3 { color: #d29922; border-color: rgba(210,153,34,0.4); background: rgba(210,153,34,0.1); }
.stage-4 { color: #f85149; border-color: rgba(248,81,73,0.4); background: rgba(248,81,73,0.1); }
.badge-stock { color: var(--text-muted); }
.badge-etf { color: var(--yellow); border-color: rgba(210, 153, 34, 0.4); background: var(--yellow-dim); }
.badge-crypto { color: #a371f7; border-color: rgba(163,113,247,0.4); background: rgba(163,113,247,0.1); }
.badge-win { color: var(--green); border-color: rgba(63, 185, 80, 0.4); background: var(--green-dim); }
.badge-loss, .badge-stopped { color: var(--red); border-color: rgba(248, 81, 73, 0.4); background: var(--red-dim); }
.badge-open { color: var(--text-muted); }

/* Readiness dot + label */
.readiness {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.readiness-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-dim);
    box-shadow: 0 0 0 2px rgba(110, 118, 129, 0.15);
}
.readiness-dot.dot-green {
    background: var(--green);
    box-shadow: 0 0 0 2px rgba(63, 185, 80, 0.2), 0 0 6px rgba(63, 185, 80, 0.5);
}
.readiness-dot.dot-yellow {
    background: var(--yellow);
    box-shadow: 0 0 0 2px rgba(210, 153, 34, 0.2);
}
.readiness-dot.dot-red {
    background: var(--red);
    box-shadow: 0 0 0 2px rgba(248, 81, 73, 0.2);
}
.readiness .readiness-label { color: var(--text); font-weight: 500; }

/* ── Scores (inline text variant) ──────────────────────────────────── */
.score {
    font-weight: 700;
    font-size: var(--fs-base);
    font-variant-numeric: tabular-nums;
}
.score-high { color: var(--green); }
.score-mid { color: var(--yellow); }
.score-low { color: var(--text-muted); }

/* Progress bar variant */
.score-bar {
    position: relative;
    width: 80px;
    height: 6px;
    background: var(--bg3);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.score-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: var(--accent);
    border-radius: var(--radius-pill);
    transition: width 300ms ease;
}
.score-bar-fill.fill-green { background: var(--green); }
.score-bar-fill.fill-yellow { background: var(--yellow); }
.score-bar-fill.fill-red { background: var(--red); }

/* ── Filter Bar ────────────────────────────────────────────────────── */
.filter-bar {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 16px 0;
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
}
.filter-bar-stacked { display: flex; flex-direction: column; gap: 0; }
.filter-bar .filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}
.filter-bar .filter-row + .filter-row { margin-top: 12px; }
.filter-divider {
    height: 1px;
    background: var(--border-soft);
    margin: 14px -16px;
}

.filter-field { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.filter-field-num { min-width: 110px; }
.filter-field-num input { width: 100%; }
.filter-label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.filter-bar select,
.filter-bar input[type="number"],
.filter-bar input[type="text"] {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    font-size: var(--fs-sm);
    font-family: inherit;
    transition: var(--transition);
    min-width: 0;
}
.filter-bar select:focus,
.filter-bar input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 0;
    border-color: var(--accent);
}
.filter-bar input[type="checkbox"] {
    accent-color: var(--accent);
    width: 16px; height: 16px;
    cursor: pointer;
}

.filter-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    flex: 1;
}
.check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    color: var(--text);
    cursor: pointer;
}

.filter-actions {
    margin-left: auto;
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

/* Tooltip */
.tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    color: var(--text-dim);
    cursor: help;
    font-style: normal;
    font-size: 10px;
    position: relative;
}
.tip:hover, .tip:focus { color: var(--accent); outline: none; }
.tip .tip-bubble {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    white-space: normal;
    width: 220px;
    background: #0b1220;
    color: var(--text);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font-size: var(--fs-xs);
    line-height: 1.4;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
    box-shadow: var(--shadow);
    z-index: 300;
}
.tip:hover .tip-bubble, .tip:focus .tip-bubble { display: block; opacity: 1; }
@media (hover: none) {
  .tip:focus .tip-bubble {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ── Results bar (scans page) ──────────────────────────────────── */
.results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 8px 0;
}
.results-count { font-size: var(--fs-sm); color: var(--text-muted); display: flex; align-items: baseline; gap: 4px; }
.results-count strong { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 700; }
.results-count span { font-weight: 400; color: var(--text-muted); }

/* ── Sector Grid ───────────────────────────────────────────────────── */
.sector-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 24px;
}
.sector-chip {
    padding: 7px 14px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
    color: var(--text);
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.sector-chip:hover {
    border-color: var(--accent);
    background: var(--accent-dim);
    color: var(--text);
    text-decoration: none;
    transform: translateY(-1px);
}
.chip-count {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    background: var(--bg3);
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
}

/* ── Setup Cards (overview top setups) ─────────────────────────────── */
.setup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin: 12px 0 24px;
}
.setup-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: var(--transition);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}
.setup-card:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: var(--text);
}
.setup-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.setup-card-left { flex: 1; min-width: 0; }
.setup-card-right { flex-shrink: 0; }
.setup-card-ticker {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 1px;
}
.setup-card-ticker .ticker { font-size: var(--fs-md); font-weight: 700; letter-spacing: -0.01em; }
.setup-card-pct { font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.setup-card-pct.up   { color: var(--green); }
.setup-card-pct.down { color: var(--red); }
.setup-card-pct.flat { color: var(--text-muted); }
.setup-card-sector { font-size: var(--fs-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.setup-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.setup-card-meta .badge { font-size: 10px; padding: 1px 8px; }
.setup-card-chart { margin: 0 -2px; opacity: 0.85; }
.setup-card-chart svg { display: block; width: 100%; }
.setup-card-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 4px;
    border-top: 1px solid var(--border-soft);
}
.setup-card-stat { font-size: var(--fs-xs); color: var(--text-muted); }
.setup-card-stat strong { color: var(--text); }
.setup-card-stat.card-risk strong { color: var(--yellow); }
.readiness-pill {
    margin-left: auto;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: capitalize;
}
.readiness-actionable { background: rgba(63,185,80,0.15); color: var(--green); }
.readiness-developing { background: rgba(210,153,34,0.15); color: var(--yellow); }
.readiness-extended   { background: rgba(248,81,73,0.15);  color: var(--red); }

/* ── Screener preset pills ───────────────────────────────────────────── */
.preset-strip {
    display: flex;
    gap: 6px;
    margin: 0 0 16px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
    flex-wrap: nowrap;
    align-items: center;
}
.preset-strip::-webkit-scrollbar { display: none; }
.preset-pill {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 500;
    padding: 5px 14px;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
    font-family: inherit;
}
.preset-pill:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.preset-pill.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* ── Legend filter strip ─────────────────────────────────────────── */
.legend-preset-strip {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 0 0 12px;
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
    padding-bottom: 2px;
}
.legend-preset-strip::-webkit-scrollbar { display: none; }
.legend-strip-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
    margin-right: 2px;
}
.legend-pill { font-weight: 600; }
.legend-pill-minervini { border-color: rgba(88,166,255,0.4);  color: #58a6ff; }
.legend-pill-minervini:hover,
.legend-pill-minervini.active { background: rgba(88,166,255,0.12); border-color: #58a6ff; color: #58a6ff; }
.legend-pill-oneil     { border-color: rgba(63,185,80,0.4);   color: #3fb950; }
.legend-pill-oneil:hover,
.legend-pill-oneil.active { background: rgba(63,185,80,0.12); border-color: #3fb950; color: #3fb950; }
.legend-pill-livermore { border-color: rgba(210,153,34,0.4);  color: #d29922; }
.legend-pill-livermore:hover,
.legend-pill-livermore.active { background: rgba(210,153,34,0.12); border-color: #d29922; color: #d29922; }
.legend-pill-darvas    { border-color: rgba(240,136,62,0.4);  color: #f0883e; }
.legend-pill-darvas:hover,
.legend-pill-darvas.active { background: rgba(240,136,62,0.12); border-color: #f0883e; color: #f0883e; }
.legend-pill-weinstein { border-color: rgba(163,113,247,0.4); color: #a371f7; }
.legend-pill-weinstein:hover,
.legend-pill-weinstein.active { background: rgba(163,113,247,0.12); border-color: #a371f7; color: #a371f7; }
.legend-pill-wyckoff   { border-color: rgba(57,211,83,0.4);   color: #39d353; }
.legend-pill-wyckoff:hover,
.legend-pill-wyckoff.active { background: rgba(57,211,83,0.12); border-color: #39d353; color: #39d353; }

/* ── Legend Chips (scan table badges) ──────────────────────────────── */
.legend-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    letter-spacing: 0;
    border: 1px solid transparent;
}
.legend-chip:hover { opacity: 1 !important; transform: scale(1.15); }
/* Confidence levels */
.legend-chip-high    { opacity: 1; }
.legend-chip-medium  { opacity: 0.7; }
.legend-chip-partial { opacity: 0.45; }
/* Per-legend colors */
.legend-chip-minervini { background: rgba(88,166,255,0.18); color: #58a6ff; border-color: rgba(88,166,255,0.35); }
.legend-chip-oneil     { background: rgba(63,185,80,0.18);  color: #3fb950; border-color: rgba(63,185,80,0.35); }
.legend-chip-livermore { background: rgba(210,153,34,0.18); color: #d29922; border-color: rgba(210,153,34,0.35); }
.legend-chip-darvas    { background: rgba(240,136,62,0.18); color: #f0883e; border-color: rgba(240,136,62,0.35); }
.legend-chip-weinstein { background: rgba(163,113,247,0.18);color: #a371f7; border-color: rgba(163,113,247,0.35);}

/* /scans ticker-cell de-crowding — aggressive badge compaction.
   Goal: ticker stays the focal point; badges are reference info only. */
td .badge-stage-badge,
td .badge-streak,
td .badge-leader,
td .badge-earnings,
td .ad-scans-badge,
td .badge[title*="Power Trend"],
td .badge-new,
td .badge-vol-up,
td .badge-vol-surge,
td .badge-base-late,
td .badge-base-1,
td .badge-base-2 {
    font-size: 8px !important;
    padding: 0 3px !important;
    line-height: 13px !important;
    letter-spacing: 0 !important;
    border-radius: 2px !important;
}
/* In-row legend chip pills — mini Minervini/O'Neil/etc. squares */
td .legend-chip {
    width: 13px !important;
    height: 13px !important;
    font-size: 8.5px !important;
    border-radius: 2px !important;
}
/* Scan row mini-badges row spacing */
td > div[style*="flex-wrap"] {
    row-gap: 2px !important;
    column-gap: 2px !important;
}
/* Hide action icons (log-trade, calculator) on table rows by default — show on hover */
td .log-trade-btn { opacity: 0.35; transition: opacity 150ms ease; }
tbody tr:hover td .log-trade-btn { opacity: 1; }
/* Collapse the secondary badges below the ticker into a smaller stack */
td .stage-badge,
td .badge-pp {
    margin-top: 2px !important;
    display: inline-block;
}

/* ── Symbol Detail ─────────────────────────────────────────────────── */
.symbol-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-soft);
}
.symbol-header-main { flex: 1; }
.symbol-title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.symbol-title h1 {
    font-size: var(--fs-xxl);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
}
.symbol-title .symbol-name {
    font-size: var(--fs-md);
    color: var(--text-muted);
    font-weight: 400;
}
.symbol-meta {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.chart-container {
    margin: 20px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg2);
    box-shadow: var(--shadow-sm);
    height: clamp(300px, 45vh, 480px);
}
.chart-img { max-width: 100%; display: block; }

/* ── Pattern Cards ─────────────────────────────────────────────────── */
.pattern-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 14px;
    margin: 12px 0 24px;
}
.pattern-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}
.pattern-card:hover { border-color: var(--text-dim); }
.pattern-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(180deg, var(--bg-elev) 0%, var(--bg2) 100%);
    border-bottom: 1px solid var(--border);
    gap: 12px;
}
.pattern-card-body {
    padding: 12px 16px;
    font-size: var(--fs-base);
    display: grid;
    gap: 6px;
}
.pattern-card-body .kv {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
}
.pattern-card-body .kv-label {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}
.pattern-card-body .kv-value {
    color: var(--text);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.pattern-card-body .explanation {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    line-height: 1.55;
}

/* ── Form Cards ────────────────────────────────────────────────── */
.card-form {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 22px;
    margin: 12px 0 24px;
    box-shadow: var(--shadow-sm);
}
.card-form-compact { padding: 16px 18px; }

.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 20px;
}
.form-grid-inline {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: 12px 16px;
    align-items: end;
}
@media (max-width: 768px) {
    .form-grid-2, .form-grid-inline { grid-template-columns: 1fr; }
}
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field-wide { grid-column: 1 / -1; }

.form-field label {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.form-field .req { color: var(--red); font-weight: 700; }

.form-field input,
.form-field select,
.form-field textarea {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    font-size: var(--fs-base);
    font-family: inherit;
    transition: var(--transition);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 0;
    border-color: var(--accent);
}
.form-field input:disabled { color: var(--text-muted); background: var(--bg3); }
.form-field .field-error {
    border-color: var(--red);
    box-shadow: 0 0 0 2px rgba(248, 81, 73, 0.18);
}
@keyframes fieldShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}
.form-field .field-shake { animation: fieldShake 400ms ease; }

.form-actions {
    margin-top: 14px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.form-error {
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background: var(--red-dim);
    color: var(--red);
    border: 1px solid rgba(248, 81, 73, 0.4);
    font-size: var(--fs-sm);
}

/* ── Modal ─────────────────────────────────────────────────── */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.modal[hidden] { display: none; }
.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
}
.modal-panel {
    position: relative;
    width: 100%;
    max-width: 640px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-height: 90vh;
    overflow: auto;
}
.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-soft);
}
.modal-head h3 { margin: 0; font-size: var(--fs-md); }
.modal-panel form { padding: 18px 20px; }

/* ── Utilities ──────────────────────────────────────────────────────── */
.text-muted { color: var(--text-muted); }
.text-dim { color: var(--text-dim); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 16px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── Empty State ───────────────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 56px 24px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: rgba(22, 27, 34, 0.4);
    margin: 16px 0;
}
.empty-state .empty-icon {
    color: var(--text-dim);
    margin-bottom: 12px;
    display: inline-flex;
    opacity: 0.75;
}
.empty-state h3 {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}
.empty-state p {
    color: var(--text-muted);
    font-size: var(--fs-base);
    margin-bottom: 4px;
}
.empty-filter-context {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-muted);
}
.filter-pill-badge {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    color: var(--text);
}

/* ── Footer ────────────────────────────────────────────────────────── */
.footer {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 24px 24px;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    border-top: 1px solid var(--border);
    margin-top: 64px;
    letter-spacing: 0.3px;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}
.footer-left, .footer-right { opacity: 0.75; }
.footer-row { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.footer-row-links { gap: 56px; }
.footer-row-meta {
    align-items: center;
    justify-content: space-between;
    padding-top: 18px;
    border-top: 1px solid var(--border-soft);
}
.footer-col { display: flex; flex-direction: column; gap: 8px; min-width: 110px; }
.footer-col-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-dim);
    margin-bottom: 2px;
}
.footer-col a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 12px;
    line-height: 1.6;
    transition: color 120ms ease;
}
.footer-col a:hover { color: var(--accent); text-decoration: none; }
.footer-mentor-strip { display: flex; gap: 6px; flex-wrap: wrap; }
.footer-mentor {
    display: inline-flex;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--border);
    transition: var(--transition);
}
.footer-mentor img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
.footer-mentor:hover { border-color: var(--accent); transform: translateY(-1px); }
.footer-mark-mini {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.1em;
    margin-right: 6px;
}
.footer-row-meta em {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--text-dim);
    font-weight: 400;
}
@media (max-width: 768px) {
    .footer-row-links { gap: 24px; }
    .footer-col { min-width: 45%; }
}

/* ── Dashboard insight row (wisdom + gauge side-by-side) ─────────────── */
.dashboard-insight-row {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 18px;
    margin: 4px 0 22px;
}
@media (max-width: 900px) {
    .dashboard-insight-row { grid-template-columns: 1fr; }
}

/* ── Sentiment Gauge ─────────────────────────────────────────────────── */
.sentiment-gauge {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px 16px;
    box-shadow: var(--shadow-sm);
}
.sentiment-gauge-head { margin-bottom: 4px; }
.sentiment-gauge-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-family: var(--font-mono);
}
.sentiment-gauge-body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 6px;
}
.sentiment-gauge-body svg { display: block; max-width: 220px; }
.sentiment-gauge-readout {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding-top: 6px;
    border-top: 1px solid var(--border-soft);
    width: 80%;
}
.sentiment-gauge-score {
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 28px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.sentiment-gauge-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.sentiment-gauge-note {
    margin: 8px 0 0;
    font-size: 11px;
    color: var(--text-dim);
    text-align: center;
    font-family: var(--font-display);
    font-style: italic;
    line-height: 1.4;
}

/* ── Wisdom Panel (rotating legend pull-quote) ───────────────────────── */
.wisdom-panel {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 18px 20px 20px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    position: relative;
}
.wisdom-head { margin-bottom: 6px; }
.wisdom-eyebrow {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent);
    font-family: var(--font-mono);
}
.wisdom-body { position: relative; padding-top: 8px; }
.wisdom-qmark {
    position: absolute;
    top: -4px;
    left: -4px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 56px;
    line-height: 1;
    color: var(--accent);
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
}
.wisdom-text {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 17px;
    line-height: 1.5;
    color: var(--text);
    margin: 0 0 12px;
    padding-left: 22px;
    letter-spacing: 0.005em;
}
.wisdom-attr {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
    padding-left: 22px;
}
.wisdom-panel-compact { padding: 12px 14px 14px; }
.wisdom-panel-compact .wisdom-text { font-size: 14px; padding-left: 18px; }
.wisdom-panel-compact .wisdom-qmark { font-size: 38px; top: -2px; }
.wisdom-panel-compact .wisdom-attr { font-size: 10px; padding-left: 18px; }

/* ── Sector ETF table sort affordance ───────────────────────────────── */
.set-sort {
    cursor: pointer;
    user-select: none;
    transition: color 120ms ease;
    position: relative;
}
.set-sort:hover { color: var(--text); }
.set-sort.set-sort-active { color: var(--accent); }
.set-sort.set-sort-active.set-sort-asc::after  { content: ' ▲'; font-size: 8px; color: var(--accent); }
.set-sort.set-sort-active.set-sort-desc::after { content: ' ▼'; font-size: 8px; color: var(--accent); }

/* ── Sortable Headers ──────────────────────────────────────────────── */
.sortable {
    cursor: pointer;
    user-select: none;
    transition: color 120ms ease;
    position: relative;
}
.sortable:hover { color: var(--text); }
.sortable.sort-asc::after { content: ' ▲'; color: var(--accent); }
.sortable.sort-desc::after { content: ' ▼'; color: var(--accent); }

/* ── RS Line SVG Card (symbol page) ────────────────────────────── */
.rs-svg-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px 10px;
    margin-bottom: 16px;
    overflow: hidden;
}
.rs-svg-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.rs-svg-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.rs-svg-body svg {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Correlation Heatmap Table (/watchlist) ─────────────────────── */
.corr-table {
    font-size: 11px;
    width: 100%;
    border-collapse: collapse;
}
.corr-table td,
.corr-table th {
    padding: 4px 8px;
    text-align: center;
    border: 1px solid var(--border);
}
.corr-table th {
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg2);
}

/* ── A/D Heatmap Card (symbol page) ────────────────────────────── */
.ad-heatmap-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px 10px;
    margin-bottom: 16px;
    overflow: hidden;
}
.ad-heatmap-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.ad-heatmap-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.ad-heatmap-body svg {
    width: 100%;
    height: auto;
    display: block;
}
.ad-rating-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid currentColor;
}
.ad-rating-badge.green  { color: var(--green); border-color: rgba(63,185,80,0.35); }
.ad-rating-badge.yellow { color: var(--yellow); border-color: rgba(210,153,34,0.35); }
.ad-rating-badge.red    { color: var(--red); border-color: rgba(248,81,73,0.35); }

/* A/D badge in scans table ticker cell — smaller, inline */
.ad-scans-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    border: 1px solid var(--border);
    color: var(--text-muted);
    margin-left: 2px;
    vertical-align: middle;
}
.ad-scans-badge.green  { color: var(--green);  border-color: rgba(63,185,80,0.3);  background: rgba(63,185,80,0.06); }
.ad-scans-badge.yellow { color: var(--yellow); border-color: rgba(210,153,34,0.3); background: rgba(210,153,34,0.06); }
.ad-scans-badge.red    { color: var(--red);    border-color: rgba(248,81,73,0.3);  background: rgba(248,81,73,0.06); }

/* ── Weekly Bar Chart Card (symbol page) ───────────────────────── */
.weekly-chart-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px 10px;
    margin-bottom: 16px;
    overflow: hidden;
}
.weekly-chart-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.weekly-chart-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.weekly-chart-body svg {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Scan Status (navbar) ───────────────────────────────────────── */
.scan-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}
.scan-status:empty { display: none; }
.scan-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-dim);
    border: 1px solid var(--accent-ring);
    letter-spacing: 0.02em;
}
/* Mobile readability — bump tiny utility-strip fonts so the active-scan
   indicator and nav search are legible on phones (was 11px / --fs-xs). */
@media (max-width: 768px) {
    .scan-pill { font-size: 12px; padding: 5px 10px; }
    .nav-search input { font-size: 14px; }
}
.scan-pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 rgba(212, 168, 87, 0.7);
    animation: pulseDot 1.4s ease-out infinite;
}
@keyframes pulseDot {
    0%   { box-shadow: 0 0 0 0 rgba(212, 168, 87, 0.7); }
    70%  { box-shadow: 0 0 0 8px rgba(212, 168, 87, 0); }
    100% { box-shadow: 0 0 0 0 rgba(212, 168, 87, 0); }
}

/* ── Progress panel (overview) ─────────────────────────────────── */
.progress-panel {
    background: var(--bg2);
    border: 1px solid var(--accent-ring);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin: 8px 0 20px;
    box-shadow: var(--shadow-sm);
}
.progress-panel-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}
.progress-panel-title {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text);
}
.progress-panel-sub { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }
.progress-panel-pct {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.progress-bar {
    height: 8px;
    background: var(--bg3);
    border-radius: var(--radius-pill);
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-hover));
    transition: width 400ms ease;
    border-radius: var(--radius-pill);
}

/* ── Loading skeleton shimmer ─────────────────────────────────── */
@keyframes shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.skeleton {
    display: block;
    background: linear-gradient(90deg, var(--bg2) 0%, var(--bg3) 50%, var(--bg2) 100%);
    background-size: 800px 100%;
    animation: shimmer 1.4s linear infinite;
    border-radius: var(--radius-sm);
    min-height: 12px;
}

/* ── Position Sizing Box ───────────────────────────────────────────── */
.sizing-box {
    background: var(--green-dim);
    border: 1px solid rgba(63, 185, 80, 0.3);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sizing-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.sizing-label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.sizing-value {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--green);
    font-family: var(--font-mono);
}

/* ── Pagination ─────────────────────────────────────────────────────── */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 16px 0;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.pagination .page-info {
    font-variant-numeric: tabular-nums;
}

/* ── Key Levels Card ────────────────────────────────────────────────── */
.key-levels-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin: 12px 0 24px;
    box-shadow: var(--shadow-sm);
}
.key-levels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    margin-top: 10px;
}
.kl-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.kl-label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
}
.kl-value {
    font-size: var(--fs-base);
    font-weight: 700;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.kl-value.kl-pivot { color: var(--accent); }
.kl-value.kl-stop  { color: var(--red); }
.kl-value.kl-target { color: var(--green); }

/* ── Horizontal scroll row utility (mobile overflow) ──────────────── */
.scroll-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-right: 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: relative;
}
.scroll-row::-webkit-scrollbar { display: none; }
.scroll-row > * { scroll-snap-align: start; flex-shrink: 0; }
.scroll-row::after {
    content: "";
    position: sticky;
    right: 0;
    width: 24px;
    background: linear-gradient(to right, transparent, var(--bg));
    pointer-events: none;
    flex-shrink: 0;
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .container { padding: 16px; }
    .navbar { padding: 0 14px; gap: 10px; position: relative; flex-wrap: nowrap; height: 56px; min-height: 56px; }
    /* Brand stays far left; actions + hamburger group together on the far right
       (no wrap to a second line, no large dead gap mid-bar). */
    .nav-hamburger { display: flex; order: 10; margin-left: 2px; flex-shrink: 0; }
    .nav-brand { flex-shrink: 0; }
    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 101;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        height: auto;
        background: var(--bg2);
        border-bottom: 1px solid var(--border);
        padding: 4px 0;
        box-shadow: var(--shadow);
        max-height: 0;
        overflow: hidden;
        transition: max-height 200ms ease;
    }
    .nav-toggle-input:checked ~ .nav-links {
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: none;
        height: calc(100dvh - 56px);
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--bg2);
        z-index: 101;
    }
    .nav-links a {
        padding: 12px 18px;
        border-bottom: 1px solid var(--border-soft);
    }
    .nav-links a.active {
        border-bottom-color: var(--border-soft);
        background: var(--accent-dim);
    }
    .nav-actions { margin-left: auto; gap: 8px; }
    .nav-search input { width: 110px; }
    .nav-search input:focus { width: 150px; }
    /* More dropdown on mobile: inline expand, not flyout */
    .nav-more {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .nav-more-btn {
        padding: 12px 18px;
        border-bottom: 1px solid var(--border-soft);
        border-left: none;
        border-right: none;
        border-top: none;
        border-bottom-color: var(--border-soft);
        justify-content: flex-start;
        height: auto;
        width: 100%;
    }
    .nav-more-menu {
        position: static;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: var(--bg3);
        padding: 0;
        min-width: 0;
    }
    .nav-more.open .nav-more-menu { display: block; }
    .nav-more-menu .nav-link {
        padding: 10px 28px;
        border-bottom: 1px solid var(--border-soft);
    }
    .page-header { flex-direction: column; align-items: flex-start; gap: 8px; }
    .symbol-header { flex-direction: column; }
    .symbol-title h1 { font-size: var(--fs-xl); }
    .filter-actions { margin-left: 0; width: 100%; justify-content: flex-end; }
    .stats-bar { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    .sector-heatmap { grid-template-columns: repeat(3, 1fr); }
    .metrics-strip { flex-wrap: wrap; gap: 8px; }
    .metric-card { min-width: 0; flex: 1 1 40%; }
    .metric-divider { display: none; }
    .pos-sizer-grid { grid-template-columns: 1fr 1fr; }
    .setup-grid { grid-template-columns: repeat(2, 1fr); }
    /* Nav mobile-only links — visible only in drawer */
    .nav-mobile-only { display: flex; }
}
/* Nav mobile-only links — hidden on desktop */
.nav-mobile-only { display: none; }
@media (max-width: 480px) {
    .nav-search { display: none; }
    .sector-heatmap { grid-template-columns: repeat(2, 1fr); }
    .setup-grid { grid-template-columns: 1fr; }
    .market-strip { gap: 8px; }
    .market-card { min-width: 130px; }
}
/* Prevent iOS Safari auto-zoom on input focus.
   iOS zooms the viewport whenever a focused input has font-size < 16px.
   This is a pure cosmetic override — layout and desktop rendering are unaffected. */
@media (max-width: 768px) {
    .form-field input,
    .form-field select,
    .form-field textarea {
        font-size: 16px;
    }
}

/* ── Sparkline cells ──────────────────────────────────────── */
.sparkline-cell {
    padding: 4px 8px;
    width: 132px;
    min-width: 132px;
}
.sparkline-cell svg {
    display: block;
    opacity: 0.9;
}

/* ── Inter font loaded async via base.html preload link ──────────────── */
html, body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.mono, td.mono, .kv2-val.mono, .stat-pill-val.mono, .kl-chip-val.mono {
    font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
    font-size: 0.92em;
    letter-spacing: -0.01em;
}

/* ── Color utilities ─────────────────────────────────────────────────── */
.green  { color: var(--green); }
.red    { color: var(--red); }
.yellow { color: var(--yellow); }

/* ── Symbol header ───────────────────────────────────────────────────── */
.symbol-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-soft);
}
.symbol-header-main {
    display: flex;
    flex: 1 1 260px;
    flex-direction: column;
    gap: 8px;
    min-width: 240px;
}
.symbol-title { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.symbol-title h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
.symbol-name { font-size: var(--fs-base); color: var(--text-muted); font-weight: 400; }
.symbol-bio { margin: 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--text-muted); max-width: 62ch; }
.symbol-meta { display: flex; gap: 6px; flex-wrap: wrap; }
#live-quote-bar {
    flex: 0 1 180px;
}
.trade-thesis-box {
    flex: 1 1 420px;
    min-width: 300px;
}
.symbol-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

@media (max-width: 640px) {
    .symbol-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .symbol-header-main,
    #live-quote-bar,
    .trade-thesis-box,
    .symbol-actions {
        width: 100%;
        min-width: 0;
        /* Reset the row-oriented flex-basis (260/180/420px) — in a column it
           becomes a phantom HEIGHT and opens large empty gaps. Size to content. */
        flex: 0 0 auto;
    }
    .symbol-actions {
        flex-wrap: wrap;
        align-items: stretch;
    }
    .symbol-actions .btn,
    .symbol-actions .ask-legend-dropdown {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
    }
    .symbol-actions .ask-legend-dropdown .btn {
        width: 100%;
    }
}

/* ── Stats bar ───────────────────────────────────────────────────────── */
.stats-bar {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 0;
    margin-bottom: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    box-shadow: var(--shadow-sm);
    flex-wrap: nowrap;
    position: sticky;
    top: 56px;
    z-index: 10;
    -webkit-overflow-scrolling: touch;
}
.stats-bar::-webkit-scrollbar { display: none; }
.stats-bar::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    background: linear-gradient(to right, transparent, var(--bg2));
    pointer-events: none;
    border-radius: 0 var(--radius) var(--radius) 0;
}
.stat-pill {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 18px;
    white-space: nowrap;
    flex-shrink: 0;
}
.stat-pill-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    font-weight: 600;
}
.stat-pill-val {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text);
    line-height: 1;
}
.stat-pill-sub {
    font-size: 10px;
    font-weight: 500;
}
.stat-pill-divider {
    width: 1px;
    height: 36px;
    background: var(--border-soft);
    flex-shrink: 0;
}

/* ── 52W Range Bar ───────────────────────────────────────────────────── */
.range-bar-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0 8px;
    font-size: 11px;
}
.range-bar-label { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.range-bar-track {
    position: relative;
    flex: 1;
    height: 4px;
    background: var(--bg3);
    border-radius: 2px;
    max-width: 300px;
}
.range-bar-fill {
    height: 100%;
    background: linear-gradient(to right, var(--red), var(--yellow), var(--green));
    border-radius: 2px;
}
.range-bar-dot {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: var(--text);
    border: 1.5px solid var(--bg2);
    border-radius: 50%;
}
.range-bar-pct { min-width: 28px; }

/* ── Buy-zone banner ─────────────────────────────────────────────────── */
.buy-zone-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    border-radius: var(--radius);
    margin-bottom: 12px;
    border: 1px solid;
}
.bz-status-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.bz-detail {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 11px;
}
.bz-in  { background: rgba(63,185,80,0.07);  border-color: rgba(63,185,80,0.30); }
.bz-in  .bz-status-label { color: var(--green); }
.bz-extended { background: rgba(210,153,34,0.07); border-color: rgba(210,153,34,0.30); }
.bz-extended .bz-status-label { color: var(--yellow); }
.bz-chasing  { background: rgba(248,81,73,0.07);  border-color: rgba(248,81,73,0.28); }
.bz-chasing  .bz-status-label { color: var(--red); }
.bz-watch    { background: rgba(139,148,158,0.05); border-color: var(--border); }
.bz-watch    .bz-status-label { color: var(--text-muted); }

/* ── Chart wrap ──────────────────────────────────────────────────────── */
.chart-wrap {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
}
.chart-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg-elev);
    flex-wrap: wrap;
}
.chart-ticker-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}
.chart-legend {
    flex: 1;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chart-ma-toggles {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.ma-toggle {
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--text-dim);
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
}
.ma-toggle.active { color: var(--text); background: var(--bg3); border-color: var(--text-dim); }
.ma-toggle:hover { border-color: var(--accent-ring); color: var(--text); }
.chart-divider { color: var(--border); user-select: none; }
.rs-label { font-size: var(--fs-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; padding: 2px 0 2px 4px; margin-top: 4px; }
/* Indicator panel overlay label — sits inside the chart panel, top-left corner */
.ind-label {
    position: absolute;
    top: 5px;
    left: 6px;
    font-size: 9px;
    color: rgba(139,148,158,0.9);
    text-transform: uppercase;
    letter-spacing: .06em;
    z-index: 10;
    pointer-events: none;
    background: rgba(13,17,23,0.72);
    padding: 1px 5px;
    border-radius: 3px;
    line-height: 1.4;
    font-family: var(--font-mono);
}
/* Drawing tool buttons */
.draw-tool { background: none; border: 1px solid var(--border); border-radius: 4px; color: var(--text-muted); cursor: pointer; font-size: 11px; padding: 2px 7px; transition: border-color .15s, background .15s; }
.draw-tool.active { background: rgba(88,166,255,0.15); border-color: var(--accent); color: var(--accent); }
.draw-tool:hover:not(.active) { border-color: var(--accent-ring); color: var(--text); }

/* ── Chart toolbar: compact on mobile ── */
@media (max-width: 640px) {
    .chart-toolbar {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding: 5px 10px;
        gap: 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .chart-toolbar::-webkit-scrollbar { display: none; }
    .chart-ma-toggles {
        flex-shrink: 0;
        white-space: nowrap;
    }
    .chart-legend { max-width: 100px; }
}

/* ── Key levels strip ────────────────────────────────────────────────── */
.key-levels-strip {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.kl-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}
.kl-chip-pivot  { border-left: 3px solid var(--accent); }
.kl-chip-entry  { border-left: 3px solid var(--yellow); }
.kl-chip-stop   { border-left: 3px solid var(--red); }
.kl-chip-target { border-left: 3px solid var(--green); }
.kl-chip-risk   { border-left: 3px solid var(--yellow); }
.kl-chip-rr     { border-left: 3px solid var(--purple); }
.kl-chip-label  { font-size: var(--fs-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.kl-chip-val    { font-size: var(--fs-base); font-weight: 700; color: var(--text); }

/* ── Price ladder ─────────────────────────────────────────────────────── */
.price-ladder-wrap {
    margin-top: 10px;
    margin-bottom: 4px;
    padding: 2px 0;
    overflow: visible;
}

/* ── Section helpers ─────────────────────────────────────────────────── */
.section-row { display: flex; align-items: center; justify-content: space-between; }
.section-title-sm {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    margin: 16px 0 8px;
}

/* ── Pattern cards (redesigned) ──────────────────────────────────────── */
.pattern-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}
.pattern-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}
.pattern-card:hover { border-color: var(--accent-ring); }
.pattern-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
}
.pattern-card-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.pattern-score-display {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    flex-shrink: 0;
}
.pattern-score-num {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.pattern-score-num.score-high { color: var(--green); }
.pattern-score-num.score-mid  { color: var(--yellow); }
.pattern-score-num.score-low  { color: var(--text-dim); }
.pattern-score-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.pattern-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    margin-bottom: 10px;
}
.kv2 { display: flex; flex-direction: column; gap: 2px; }
.kv2-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); font-weight: 600; }
.kv2-val { font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.pattern-explanation {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: 1.6;
    padding-top: 10px;
    border-top: 1px solid var(--border-soft);
}
/* Pattern card two-column layout: metrics left, explanation right */
.pattern-card-body-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 10px;
}
.pattern-card-left {
    flex: 0 0 auto;
    min-width: 200px;
    max-width: 320px;
}
.pattern-card-right {
    flex: 1;
    min-width: 220px;
}
@media (max-width: 640px) {
    .pattern-card-left,
    .pattern-card-right { max-width: 100%; min-width: 0; flex: 1 1 100%; }
}

/* ── Scans table improvements ────────────────────────────────────────── */
#scan-results-table td { padding: 8px 12px; }
#scan-results-table th { padding: 9px 12px; box-shadow: 0 1px 0 var(--border), 0 2px 8px rgba(0,0,0,0.5); }
.sparkline-cell { padding: 4px 8px; width: 134px; min-width: 134px; }
.sparkline-cell svg { display: block; }

/* ── Score in table ──────────────────────────────────────────────────── */
.score-bar { height: 3px; width: 52px; background: var(--bg3); border-radius: 2px; flex-shrink: 0; }
.score-bar-fill { height: 100%; border-radius: 2px; transition: width 300ms ease; }
.fill-green { background: var(--green); }
.fill-yellow { background: var(--yellow); }
.fill-red { background: var(--red); }
.score.score-high { color: var(--green); font-weight: 700; }
.score.score-mid  { color: var(--yellow); font-weight: 700; }
.score.score-low  { color: var(--text-dim); }

/* ── Readiness ───────────────────────────────────────────────────────── */
.readiness { display: inline-flex; align-items: center; gap: 6px; }
.readiness-dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
    box-shadow: 0 0 5px currentColor;
}
.dot-green  { background: var(--green); color: var(--green); }
.dot-yellow { background: var(--yellow); color: var(--yellow); box-shadow: none; }
.dot-red    { background: var(--red); color: var(--red); }
.readiness-label { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 500; }

/* ── Free-Tier Upsell Banner ─────────────────────────────────────────── */
.upsell-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    margin: 0 0 16px;
    background: linear-gradient(135deg, rgba(88,166,255,0.08) 0%, rgba(88,166,255,0.04) 100%);
    border: 1px solid rgba(88,166,255,0.25);
    border-radius: var(--radius);
    font-size: 13px;
}
.upsell-banner-icon { font-size: 16px; flex-shrink: 0; }
.upsell-banner-text { flex: 1; color: var(--text-muted); }
.upsell-banner-text strong { color: var(--text); }
.upsell-banner-cta {
    display: inline-block;
    padding: 6px 14px;
    background: var(--accent);
    color: #fff;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.upsell-banner-cta:hover { background: #79b8ff; }
.upsell-banner-dismiss {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
    padding: 0 4px;
    flex-shrink: 0;
    line-height: 1;
}
@media (max-width: 600px) {
    .upsell-banner { flex-wrap: wrap; }
    .upsell-banner-text { min-width: 0; }
}

/* ── Market Context Strip ────────────────────────────────────────────── */
.market-strip {
    display: flex;
    gap: 10px;
    margin: 0 0 24px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}
.market-strip::-webkit-scrollbar { display: none; }
.market-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 180px;
    flex: 1;
    text-decoration: none;
    color: var(--text);
    transition: var(--transition);
}
.market-card:hover { border-color: var(--border-soft); background: var(--bg3); text-decoration: none; color: var(--text); }
.market-card-info { flex: 1; min-width: 0; }
.market-card-ticker { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; color: var(--text-dim); text-transform: uppercase; }
.market-card-price { font-size: var(--fs-md); font-weight: 700; font-variant-numeric: tabular-nums; margin: 3px 0 2px; font-family: var(--font-mono); }
.market-card-chg { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; font-weight: 600; }
.market-card-chg.up { color: var(--green); }
.market-card-chg.down { color: var(--red); }
.market-card-chg.flat { color: var(--text-muted); }
.market-card-week { font-weight: 400; }
.market-card-spark { flex-shrink: 0; opacity: 0.9; }
.market-card-dist { font-size: 10px; color: var(--text-muted); margin-top: 3px; }
.market-card-dist.dist-caution { color: var(--yellow); }
.market-card-dist.dist-warn    { color: var(--red); font-weight: 600; }
@media (max-width: 600px) { .market-card { min-width: 140px; } }
@media (max-width: 640px) { .market-card-spark { display: none; } }
.regime-badge {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    vertical-align: middle;
}
.regime-up    { background: var(--green-dim); color: var(--green); }
.regime-down  { background: var(--red-dim);   color: var(--red);   }
.regime-mixed { background: var(--yellow-dim); color: var(--yellow); }

/* ── Regime Banner (overview + scans pages) ─────────────────────────── */
.regime-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: var(--radius);
    border: 1px solid;
    margin-bottom: 16px;
    font-size: 13px;
    position: relative;
}
.regime-banner-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.regime-banner-label { font-weight: 700; }
.regime-banner-sub   { color: var(--text-muted); font-size: 12px; margin-left: auto; }
.regime-banner-up   { background: var(--green-dim); border-color: rgba(63,185,80,0.3); color: var(--green); }
.regime-banner-up   .regime-banner-dot { background: var(--green); animation: uptrend-pulse 2s ease-in-out infinite; }
.regime-banner-warning-text { font-size: 12px; color: var(--yellow); opacity: .88; margin-left: auto; }
.regime-banner-down { background: var(--red-dim); border-color: rgba(248,81,73,0.3); color: var(--red); }
.regime-banner-down .regime-banner-dot { background: var(--red); }
.regime-banner-mixed { background: var(--yellow-dim); border-color: rgba(210,153,34,0.3); color: var(--yellow); }
.regime-banner-mixed .regime-banner-dot { background: var(--yellow); }
.regime-banner-text { flex: 1; }
.regime-banner-ok   { font-size: 12px; color: var(--green); opacity: .85; margin-left: auto; }
.regime-banner-dismiss {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.5;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 2px;
    flex-shrink: 0;
    transition: opacity 0.15s;
}
.regime-banner-dismiss:hover { opacity: 1; }
.regime-banner-unavailable { background: var(--bg3); border-color: var(--border); color: var(--text-muted); opacity: 0.75; }
@media (max-width: 640px) {
    .regime-banner { flex-wrap: wrap; }
    .regime-banner-text { min-width: 0; flex: 1 1 auto; }
    .regime-banner-market-data { display: none; }
}
.regime-banner-unavailable .regime-banner-dot { background: var(--text-muted); }

/* ── Slim market-regime context banner (/scans + /market) ───────────── */
.market-regime-context-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: var(--radius);
    background: var(--bg2);
    color: var(--text);
    font-size: 12px;
    line-height: 1.35;
    margin-bottom: 14px;
    min-height: 34px;
}
.mrcb-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--text-muted);
}
.mrcb-kicker {
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 10px;
}
.mrcb-state {
    font-size: 13px;
    white-space: nowrap;
}
.mrcb-summary {
    color: var(--text-muted);
    min-width: 0;
}
.mrcb-chip,
.mrcb-date,
.mrcb-disclaimer {
    color: var(--text-muted);
    border-left: 1px solid var(--border);
    padding-left: 8px;
    white-space: nowrap;
}
.mrcb-disclaimer {
    margin-left: auto;
    font-size: 11px;
}
.market-regime-risk-on {
    border-color: rgba(63,185,80,0.32);
    background: rgba(63,185,80,0.06);
}
.market-regime-risk-on .mrcb-dot {
    background: var(--green);
}
.market-regime-risk-on .mrcb-state {
    color: var(--green);
}
.market-regime-neutral {
    border-color: rgba(210,153,34,0.32);
    background: rgba(210,153,34,0.06);
}
.market-regime-neutral .mrcb-dot {
    background: var(--yellow);
}
.market-regime-neutral .mrcb-state {
    color: var(--yellow);
}
.market-regime-risk-off {
    border-color: rgba(248,81,73,0.32);
    background: rgba(248,81,73,0.06);
}
.market-regime-risk-off .mrcb-dot {
    background: var(--red);
}
.market-regime-risk-off .mrcb-state {
    color: var(--red);
}
.market-regime-unavailable {
    opacity: 0.82;
}
@media (max-width: 760px) {
    .market-regime-context-banner {
        align-items: flex-start;
        flex-wrap: wrap;
        gap: 6px 8px;
    }
    .mrcb-summary {
        flex-basis: 100%;
        order: 2;
    }
    .mrcb-chip,
    .mrcb-date,
    .mrcb-disclaimer {
        border-left: 0;
        padding-left: 0;
        white-space: normal;
    }
    .mrcb-disclaimer {
        margin-left: 0;
        order: 3;
        flex-basis: 100%;
    }
}

/* ── Generic Alert Banners ───────────────────────────────────────────── */
.alert-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius);
    font-size: 0.85rem;
    line-height: 1.5;
}
.alert-danger {
    background: rgba(248,81,73,0.1);
    border: 1px solid rgba(248,81,73,0.35);
    color: var(--text);
}
.alert-danger strong { color: var(--red); }

/* ── Watchlist Alert Banner ──────────────────────────────────────────── */
.wl-alert-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 20px;
    background: rgba(210,153,34,0.08);
    border: 1px solid rgba(210,153,34,0.3);
    border-radius: var(--radius);
    color: var(--yellow);
}
.wl-alert-icon { display: flex; align-items: center; color: var(--yellow); flex-shrink: 0; }
.wl-alert-label { font-weight: 700; font-size: 13px; }
.wl-alert-chips { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; margin-top: 4px; }
.wl-alert-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text);
    font-size: 12px;
    transition: border-color 0.15s;
}
.wl-alert-chip:hover { border-color: var(--accent-ring); }

/* ── Equity Curve ────────────────────────────────────────────────────── */
.equity-curve-wrap {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 24px;
    overflow: hidden;
}
.equity-curve-wrap svg { width: 100%; height: auto; }

/* ── Sector Heatmap ──────────────────────────────────────────────────── */
/* ── Scan Trend Chart ─────────────────────────────────────────────────── */
.scan-trend-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 80px;
    margin: 12px 0 28px;
    padding: 0 4px;
}
.scan-trend-bar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
    height: 100%;
    justify-content: flex-end;
}
.scan-trend-bar {
    width: 100%;
    min-height: 3px;
    background: var(--accent-dim);
    border-top: 2px solid var(--accent);
    border-radius: 2px 2px 0 0;
    transition: background 0.15s, opacity 0.15s;
}
/* Color tiers: gold = strong, mid = moderate, low = weak */
.scan-trend-bar--gold {
    background: rgba(230, 168, 23, 0.25);
    border-top-color: var(--accent);
}
.scan-trend-bar--mid {
    background: rgba(63, 185, 80, 0.15);
    border-top-color: var(--green);
}
.scan-trend-bar--low {
    background: rgba(157, 167, 178, 0.1);
    border-top-color: var(--text-dim);
}
.scan-trend-bar-wrap:hover .scan-trend-bar { opacity: 0.7; }
.scan-trend-label { font-size: 10px; color: var(--text-muted); white-space: nowrap; }
.scan-trend-time  { font-size: 10px; color: var(--text-dim); white-space: nowrap; }
.scan-trend-val   { font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.scan-trend-empty {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    font-size: 12px;
    color: var(--text-muted);
    border-left: 2px solid var(--border);
    padding-left: 10px;
    margin: 8px 0 20px;
}

.sector-heatmap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 8px;
    margin: 12px 0 28px;
}
.sector-heat-cell {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    text-decoration: none;
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}
.sector-heat-cell::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
}
.sector-heat-cell:hover { border-color: var(--heat-color, var(--accent)); text-decoration: none; color: var(--text); }
.sector-heat-cell.heat-hot  { --heat-color: var(--green);  }
.sector-heat-cell.heat-warm { --heat-color: #7ee787;       }
.sector-heat-cell.heat-cool { --heat-color: var(--yellow); }
.sector-heat-cell.heat-cold { --heat-color: var(--red);    }
.sector-heat-cell::after { background: var(--heat-color, var(--text-dim)); }
.sector-heat-name { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sector-heat-score { font-size: var(--fs-lg); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--heat-color, var(--text)); line-height: 1.1; }
.sector-heat-count { font-size: var(--fs-xs); color: var(--text-dim); }
.sector-heat-leader { font-size: var(--fs-xs); font-weight: 700; font-family: var(--font-mono); color: var(--heat-color, var(--accent)); margin-top: 2px; }

/* ── Watchlist alert strip ───────────────────────────────────────────── */
.wl-alert-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 14px; background: rgba(63,185,80,0.07); border: 1px solid rgba(63,185,80,0.25); border-radius: var(--radius); margin-bottom: 16px; }
.wl-alert-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #3fb950; text-transform: uppercase; margin-right: 4px; white-space: nowrap; }
.wl-alert-chip { display: flex; align-items: center; gap: 5px; background: var(--bg2); border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; text-decoration: none; transition: border-color .15s; }
.wl-alert-chip:hover { border-color: #3fb950; }
.wl-alert-ticker { font-size: 13px; font-weight: 700; }
.wl-alert-pat { color: var(--text-muted); }
.wl-alert-entry { font-size: 12px; }
.wl-alert-more { margin-left: auto; white-space: nowrap; }

/* ── Watchlist buy-zone callout ──────────────────────────────────────── */
.wl-buy-zone-section {
    background: rgba(63,185,80,0.06);
    border: 1px solid rgba(63,185,80,0.28);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: 14px;
}
.wl-buy-zone-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--green);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
}
.wl-buy-zone-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.wl-bz-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg2);
    border: 1px solid rgba(63,185,80,0.30);
    border-radius: 6px;
    padding: 5px 10px;
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.wl-bz-chip:hover { background: var(--bg3); border-color: rgba(63,185,80,0.55); }
.wl-bz-ticker { font-size: 13px; font-weight: 700; color: var(--text); }
.wl-bz-dist { font-size: 11px; font-family: var(--font-mono); font-weight: 600; }
.wl-bz-risk { font-size: 10px; }
.wl-bz-earn { font-size: 10px; font-weight: 700; }
.wl-bz-danger { border-color: rgba(248,81,73,0.35) !important; background: rgba(248,81,73,0.06) !important; }
.wl-bz-danger:hover { border-color: rgba(248,81,73,0.55) !important; }

/* ── Watchlist approaching-zone callout ──────────────────────────────── */
.wl-approaching-section {
    background: rgba(210,153,34,0.05);
    border: 1px solid rgba(210,153,34,0.25);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: 10px;
}
.wl-approaching-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--yellow);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
}
.wl-approach-chip {
    border-color: rgba(210,153,34,0.30) !important;
}
.wl-approach-chip:hover {
    border-color: rgba(210,153,34,0.55) !important;
    background: var(--bg3) !important;
}

/* ── Stale data warning ─────────────────────────────────────────────── */
.stale-warning { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: rgba(210,153,34,0.1); border: 1px solid rgba(210,153,34,0.35); border-radius: var(--radius); margin-bottom: 12px; font-size: 12px; color: var(--yellow); }
@keyframes stale-pulse {
    0%, 100% { border-color: rgba(248,81,73,0.5); box-shadow: 0 0 0 0 rgba(248,81,73,0.0); }
    50%       { border-color: rgba(248,81,73,0.9); box-shadow: 0 0 8px 2px rgba(248,81,73,0.2); }
}
.stale-warning.stale-critical {
    background: rgba(248,81,73,0.08);
    border-color: rgba(248,81,73,0.5);
    color: var(--red);
    animation: stale-pulse 2s ease-in-out infinite;
}

/* ── Staleness banner ───────────────────────────────────────────────── */
.staleness-banner {
  font-size: 0.8rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.staleness-ok { border-color: var(--border); }
.staleness-warn { border-color: var(--yellow); color: var(--yellow); }
.staleness-stale { border-color: var(--red); color: var(--red); }
.wl-staleness-warn { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(210,153,34,.08); border: 1px solid rgba(210,153,34,.25); border-radius: 6px; font-size: 12px; color: var(--yellow); margin-bottom: 12px; }
.staleness-link { color: var(--accent); text-decoration: underline; margin-left: 4px; }

/* ── Scan delta bar ─────────────────────────────────────────────────── */
.scan-delta-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 8px 14px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; font-size: 12px; }
.scan-delta-label { font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; font-size: 11px; margin-right: 4px; white-space: nowrap; }
.scan-delta-added { font-weight: 700; color: var(--green); white-space: nowrap; }
.scan-delta-dropped { font-weight: 700; color: var(--red); white-space: nowrap; margin-left: 8px; }
.scan-delta-chip { display: inline-block; padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 700; text-decoration: none; border: 1px solid; transition: opacity .15s; }
.scan-delta-chip:hover { opacity: .8; }
.scan-delta-chip-new { color: var(--green); border-color: rgba(63,185,80,0.35); background: rgba(63,185,80,0.08); }
.scan-delta-chip-drop { color: var(--red); border-color: rgba(248,81,73,0.35); background: rgba(248,81,73,0.07); }

/* ── Earnings this week banner ───────────────────────────────────────── */
.earnings-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 9px 14px; background: rgba(210,153,34,0.07); border: 1px solid rgba(210,153,34,0.3); border-radius: var(--radius); margin-bottom: 12px; font-size: 12px; color: var(--yellow); }
.earnings-banner svg { color: var(--yellow); }
.earnings-banner-label { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 11px; white-space: nowrap; }
.earnings-banner-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.earnings-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 700; text-decoration: none; color: var(--yellow); border: 1px solid rgba(210,153,34,0.4); background: rgba(210,153,34,0.1); transition: background .15s; }
.earnings-chip:hover { background: rgba(210,153,34,0.18); }
.earnings-chip-days { font-size: 10px; opacity: .75; font-weight: 500; }
.earnings-banner-note { font-size: 11px; color: var(--text-muted); margin-left: auto; white-space: nowrap; }
@media (max-width:768px) { .earnings-banner-note { display: none; } }

/* ── Volume surge strip ──────────────────────────────────────────────── */
.vol-surge-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.vol-surge-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 110px;
    flex: 1 1 110px;
    max-width: 160px;
    text-decoration: none;
    color: var(--text);
    transition: border-color 150ms ease, background 150ms ease;
}
.vol-surge-card:hover { border-color: var(--accent-ring); background: var(--accent-dim); text-decoration: none; }
.vol-surge-ticker { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-md); }
.vol-surge-ratio { font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.vol-surge-meta { flex: 1; }
.vol-surge-score { font-size: var(--fs-xs); font-weight: 700; color: var(--text-dim); text-align: right; }

/* ── Scan history timeline ────────────────────────────────────────────── */
.scan-history { display: flex; flex-direction: column; gap: 6px; margin-bottom: 28px; }
.scan-hist-item { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); }
.scan-hist-current { border-color: var(--accent-ring); background: var(--accent-dim); }
.scan-hist-date { font-size: var(--fs-xs); font-family: var(--font-mono); color: var(--text-muted); min-width: 44px; }
.scan-hist-body { flex: 1; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.scan-hist-score { font-size: var(--fs-sm); font-weight: 700; min-width: 30px; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.scan-hist-fwd { font-size: 10px; font-family: var(--font-mono); font-weight: 600; }
.fwd-up   { color: var(--green); }
.fwd-down { color: var(--red); }

/* ── Scans: price cell + watchlist star ──────────────────────────────── */
.price-cell { white-space: nowrap; min-width: 80px; }
.pct-chg { font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.pct-chg.up   { color: var(--green); }
.pct-chg.down { color: var(--red);   }
.pct-chg.flat { color: var(--text-muted); }

.watch-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-dim);
    padding: 4px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 150ms ease, transform 150ms ease;
    line-height: 1;
}
.watch-btn svg { width: 14px; height: 14px; }
.watch-btn:hover { color: var(--yellow); transform: scale(1.15); }
.watch-btn.active { color: var(--yellow); }
.watch-btn.active svg { fill: var(--yellow); }

/* ── Tap-target enlargement for small interactive elements ─────────────
   Visual size stays the same; ::after adds an invisible 44×44 hit area
   on coarse-pointer (touch) devices without affecting desktop layout.  */
.legend-chip { min-width: 28px; min-height: 28px; padding: 4px; }
.watch-btn, .tv-link, .regime-banner-dismiss, .sdw-close {
    min-width: 32px; min-height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
}
@media (pointer: coarse) {
    .legend-chip, .watch-btn, .tv-link, .regime-banner-dismiss, .sdw-close, .mentor-chip {
        position: relative;
    }
    .legend-chip::after, .watch-btn::after, .tv-link::after,
    .regime-banner-dismiss::after, .sdw-close::after, .mentor-chip::after {
        content: "";
        position: absolute;
        inset: -6px;
    }
}

/* ── Log Trade quick-action button (scans table) ─────────────────────── */
.log-trade-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(63,185,80,0.15);
    border: 1px solid rgba(63,185,80,0.35);
    color: var(--green);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    transition: background 150ms ease, transform 150ms ease;
}
.log-trade-btn:hover {
    background: rgba(63,185,80,0.28);
    transform: scale(1.15);
    color: var(--green);
    text-decoration: none;
}

/* ── Overview CTA row ────────────────────────────────────────────────── */
.overview-cta-row {
    display: flex;
    gap: 10px;
    margin: 0 0 32px;
    flex-wrap: wrap;
}

/* ── Setup of the Day hero card ──────────────────────────────────────── */
.sotd-card {
    border: 1px solid var(--accent-ring);
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--accent-soft) 0%, var(--bg2) 60%);
    margin: 0 0 28px;
    overflow: hidden;
}
.sotd-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--accent-soft);
}
.sotd-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--accent);
}
.sotd-body {
    display: flex;
    gap: 0;
    align-items: stretch;
}
.sotd-left {
    flex: 1;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sotd-right {
    width: 160px;
    flex-shrink: 0;
    padding: 18px 20px;
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(0,0,0,0.15);
}
.sotd-ticker-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sotd-ticker { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.sotd-pct { font-size: 13px; font-weight: 600; }
.sotd-name { font-size: 13px; color: var(--text-muted); margin-top: -4px; }
.sotd-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sotd-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 14px;
    background: rgba(0,0,0,0.2);
    border-radius: 6px;
    border: 1px solid var(--border);
}
.sotd-stat { display: flex; flex-direction: column; gap: 2px; }
.sotd-stat-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.sotd-stat-val { font-size: 15px; font-weight: 700; }
.sotd-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sotd-spark { width: 120px; }
.sotd-spark svg { width: 100%; height: auto; }
/* SEPA grade badges */
.badge-sepa { font-weight: 700; font-size: 10px; }
.badge-sepa-a { color: var(--green); border-color: rgba(63,185,80,0.4); background: rgba(63,185,80,0.1); }
.badge-sepa-b { color: var(--accent); border-color: var(--accent-ring); background: var(--accent-dim); }
.badge-sepa-c { color: var(--yellow); border-color: rgba(210,153,34,0.3); background: rgba(210,153,34,0.07); }
.badge-sepa-d, .badge-sepa-f { color: var(--red); border-color: rgba(248,81,73,0.3); background: rgba(248,81,73,0.07); }
@media (max-width: 600px) {
    .sotd-body { flex-direction: column; }
    .sotd-right { width: auto; border-left: none; border-top: 1px solid var(--border); flex-direction: row; justify-content: flex-start; padding: 14px 18px; }
    .sotd-ticker { font-size: 22px; }
}

/* ── Today's Playbook card ───────────────────────────────────────────── */
.playbook-card {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin: 0 0 20px;
    overflow: hidden;
}
.playbook-bullish  { border-left: 4px solid var(--green); background: rgba(63,185,80,0.04); }
.playbook-caution  { border-left: 4px solid var(--yellow); background: rgba(210,153,34,0.04); }
.playbook-defensive { border-left: 4px solid var(--red); background: rgba(248,81,73,0.04); }
.playbook-neutral  { border-left: 4px solid var(--text-dim); background: var(--bg2); }
.playbook-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--border-soft);
}
.playbook-header-left { display: flex; flex-direction: column; gap: 1px; }
.playbook-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.playbook-regime { font-size: 15px; font-weight: 700; color: var(--text); }
.playbook-stance {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .10em;
    padding: 3px 10px;
    border-radius: 20px;
}
.playbook-bullish  .playbook-stance { color: var(--green); background: rgba(63,185,80,0.12); border: 1px solid rgba(63,185,80,0.3); }
.playbook-caution  .playbook-stance { color: var(--yellow); background: rgba(210,153,34,0.12); border: 1px solid rgba(210,153,34,0.3); }
.playbook-defensive .playbook-stance { color: var(--red); background: rgba(248,81,73,0.12); border: 1px solid rgba(248,81,73,0.3); }
.playbook-neutral  .playbook-stance { color: var(--text-muted); background: var(--bg3); border: 1px solid var(--border); }
.playbook-bullets {
    margin: 0;
    padding: 10px 16px 10px 32px;
    list-style: disc;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.playbook-bullets li { font-size: 13px; color: var(--text); line-height: 1.5; }
.playbook-action {
    margin: 0;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    border-top: 1px solid var(--border-soft);
    color: var(--text-muted);
}
.playbook-bullish  .playbook-action { color: var(--green); }
.playbook-caution  .playbook-action { color: var(--yellow); }
.playbook-defensive .playbook-action { color: var(--red); }

/* ── Collapsible data providers ──────────────────────────────────────── */
.provider-details {
    margin: 24px 0 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.provider-summary {
    padding: 10px 16px;
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg2);
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
.provider-summary::-webkit-details-marker { display: none; }
.provider-summary::before { content: '▶'; font-size: 9px; transition: transform 200ms; }
.provider-details[open] .provider-summary::before { transform: rotate(90deg); }
.provider-summary:hover { color: var(--text); background: var(--bg3); }
.provider-details .table-wrap { margin: 0; border: none; border-radius: 0; border-top: 1px solid var(--border); }

/* ── Breakout candidates table ───────────────────────────────────────── */
.breakout-table-wrap { overflow-x: auto; margin: 0 0 28px; border: 1px solid var(--border); border-radius: var(--radius); }
.breakout-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.breakout-table th { padding: 8px 12px; text-align: left; color: var(--text-dim); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--border); background: var(--bg2); }
.breakout-table th.num { text-align: right; }
.breakout-table td { padding: 9px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.breakout-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.breakout-table tbody tr:last-child td { border-bottom: none; }
.breakout-table tbody tr:hover { background: var(--bg3); }

/* ── 52W high distance ───────────────────────────────────────────────── */
.dist-52h { font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.dist-52h.near-ath { color: var(--green); }
.dist-52h.mid-ath  { color: var(--yellow); }
.dist-52h.far-ath  { color: var(--text-dim); }

/* ── Stat chips (leaderboard / summary bars) ─────────────────────────── */
.stat-chip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 16px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-width: 100px;
}
.stat-chip-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
}
.stat-chip-val {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* ── Toggle switch (notification prefs) ─────────────────────────────── */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 24px;
    transition: background 200ms, border-color 200ms;
}
.toggle-slider::before {
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--text-muted);
    border-radius: 50%;
    transition: transform 200ms, background 200ms;
}
.toggle-switch input:checked + .toggle-slider {
    background: rgba(63,185,80,0.20);
    border-color: rgba(63,185,80,0.50);
}
.toggle-switch input:checked + .toggle-slider::before {
    transform: translate(18px, -50%);
    background: var(--green);
}
.toggle-switch input:focus-visible + .toggle-slider {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ── Volume ratio ────────────────────────────────────────────────────── */
.vol-ratio { font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.vol-high  { color: var(--green); }
.vol-norm  { color: var(--text-muted); }
.vol-low   { color: var(--text-dim); }

/* ── Keyboard-active row highlight ──────────────────────────────────── */
#scan-results-table tbody tr.row-active { background: var(--accent-dim); outline: 1px solid var(--accent); outline-offset: -1px; }

/* ── Frozen first two columns on horizontal scroll ───────────────────── */
#scan-results-table thead th:nth-child(1),
#scan-results-table tbody td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--bg);
    box-shadow: 1px 0 0 var(--border);
}
#scan-results-table thead th:nth-child(2),
#scan-results-table tbody td:nth-child(2) {
    position: sticky;
    left: 36px;
    z-index: 3;
    background: var(--bg);
    box-shadow: 2px 0 6px rgba(0,0,0,0.35);
}
#scan-results-table tbody tr:hover td:nth-child(1),
#scan-results-table tbody tr:hover td:nth-child(2) {
    background: rgba(230,168,23,0.05);
}
tr.row-near-entry td:nth-child(1),
tr.row-near-entry td:nth-child(2) {
    background: rgba(63,185,80,0.05);
}

/* ── Secondary column de-emphasis ───────────────────────────────────── */
.col-secondary {
    color: var(--text-muted);
    font-size: 0.72rem;
}
.col-secondary strong {
    color: var(--text-muted);
}
/* Hide explanation column on narrower viewports */
@media (max-width: 1400px) {
    .col-explanation { display: none; }
}
/* Hide all secondary columns on narrow viewports */
@media (max-width: 1100px) {
    .col-secondary { display: none; }
}
/* Show a compact daily mini-chart on mobile so price action is visible at a glance */
@media (max-width: 768px) {
    .sparkline-cell { width: 92px; min-width: 92px; padding: 4px 6px; }
    .sparkline-cell svg { width: 84px; height: auto; }
}
@media (max-width: 480px) {
    .sparkline-cell { width: 76px; min-width: 76px; padding: 4px 4px; }
    .sparkline-cell svg { width: 70px; height: auto; }
}
/* On narrow screens, release the second frozen column so horizontal gutter doesn't trap users */
@media (max-width: 640px) {
    .col-secondary { display: none; }
    #scan-results-table thead th:nth-child(2),
    #scan-results-table tbody td:nth-child(2) {
        position: static;
        box-shadow: none;
    }
}

/* ── Mobile 5-column scan table (≤480px): WL · Ticker · Score · Pattern · Ready ── */
@media (max-width: 480px) {
    /* Hide: Price(3), RS(7), Trend(8), Risk%(14), Pivot(15), 52H%(16), Vol×(17), SEPA(21) */
    #scan-results-table thead th:nth-child(3),
    #scan-results-table thead th:nth-child(7),
    #scan-results-table thead th:nth-child(8),
    #scan-results-table thead th:nth-child(14),
    #scan-results-table thead th:nth-child(15),
    #scan-results-table thead th:nth-child(16),
    #scan-results-table thead th:nth-child(17),
    #scan-results-table thead th:nth-child(21),
    #scan-results-table tbody td:nth-child(3),
    #scan-results-table tbody td:nth-child(7),
    #scan-results-table tbody td:nth-child(8),
    #scan-results-table tbody td:nth-child(14),
    #scan-results-table tbody td:nth-child(15),
    #scan-results-table tbody td:nth-child(16),
    #scan-results-table tbody td:nth-child(17),
    #scan-results-table tbody td:nth-child(21) { display: none; }
    /* Loosen padding on remaining cells */
    #scan-results-table thead th,
    #scan-results-table tbody td { padding: 8px 6px; }
    /* Score bar is redundant at this width — hide the bar, keep the number */
    .score-bar { display: none; }
}

/* ── Sticky command bar ──────────────────────────────────────────────── */
.cmd-bar {
    position: sticky;
    top: 56px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 5px 14px;
    background: rgba(22,27,34,0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 0 0 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    font-size: 11px;
}
.cmd-bar.is-stuck {
    border-radius: 0;
    margin: 0 -24px;
    padding-left: 24px;
    padding-right: 24px;
    border-left: none;
    border-right: none;
    border-top: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    box-sizing: border-box;
    max-width: 100vw;
}
@media (max-width: 768px) {
    .cmd-bar.is-stuck {
        margin: 0;
        padding-left: 12px;
        padding-right: 12px;
    }
}
.cmd-bar-left  { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.cmd-bar-center { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.cmd-bar-right {
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
    opacity: 0.45; transition: opacity 150ms;
}
.cmd-bar:hover .cmd-bar-right { opacity: 0.8; }
.cmd-regime {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
}
.cmd-regime-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted);
    flex-shrink: 0;
}
.cmd-regime-uptrend   .cmd-regime-dot { background: var(--green); box-shadow: 0 0 5px rgba(63,185,80,0.6); animation: uptrend-pulse 2s ease-in-out infinite; }
.cmd-regime-downtrend .cmd-regime-dot { background: var(--red);   box-shadow: 0 0 5px rgba(248,81,73,0.5); }
.cmd-regime-mixed     .cmd-regime-dot { background: var(--yellow); }
.cmd-count { font-family: var(--font-mono); color: var(--text-muted); }
.cmd-count strong { color: var(--text); font-variant-numeric: tabular-nums; }
.cmd-divider { color: var(--border); }
.cmd-preset { font-weight: 600; color: var(--accent); }
.cmd-keys { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; color: var(--text-muted); }
.cmd-keys kbd {
    display: inline-block; padding: 1px 5px; border: 1px solid var(--border);
    border-radius: 3px; background: var(--bg3); font-family: var(--font-mono);
    font-size: 10px; color: var(--text-muted); line-height: 1.5;
}
@media (max-width: 768px) {
    .cmd-bar-right { display: none; }
    .cmd-bar-left  { display: none; }
    .cmd-bar { justify-content: center; }
}

/* ── Trend Template Checklist ────────────────────────────────────────── */
.trend-score-badge {
    font-size: var(--fs-sm);
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
}
.trend-checklist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 6px;
    margin: 10px 0 28px;
}
.trend-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-soft);
    background: var(--bg2);
}
.trend-pass { border-left: 3px solid var(--green); }
.trend-fail { border-left: 3px solid var(--red); opacity: 0.75; }
.trend-icon {
    font-size: var(--fs-base);
    font-weight: 800;
    width: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}
.trend-pass .trend-icon { color: var(--green); }
.trend-fail .trend-icon { color: var(--red); }
.trend-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trend-label { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.trend-detail { font-size: var(--fs-xs); color: var(--text-dim); font-family: var(--font-mono); }

/* ── Position Sizing Calculator ──────────────────────────────────────── */
.pos-sizer {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin: 10px 0 28px;
    overflow-x: hidden;
}
.pos-sizer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.pos-field { display: flex; flex-direction: column; gap: 5px; }
.pos-label { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
.pos-field input {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--fs-base);
    padding: 7px 10px;
    width: 100%;
}
.pos-field input:focus { border-color: var(--accent); outline: none; }
.pos-sizer-results { border-top: 1px solid var(--border-soft); padding-top: 14px; }
.ps-result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
}
.ps-result-item { display: flex; flex-direction: column; gap: 3px; }
.ps-result-label { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
.ps-result-val { font-size: var(--fs-md); font-weight: 700; font-variant-numeric: tabular-nums; font-family: var(--font-mono); color: var(--text); }
.ps-result-val.red    { color: var(--red); }
.ps-result-val.green  { color: var(--green); }
.ps-result-val.yellow { color: var(--yellow); }
.ps-warn { font-size: var(--fs-sm); color: var(--yellow); }

/* Fundamentals strip */
.fund-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}
.fund-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 16px;
    min-width: 90px;
    text-align: center;
}
.fund-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    margin-bottom: 4px;
}
.fund-val {
    font-size: var(--fs-md);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.fund-green { color: var(--green); }
.fund-yellow { color: var(--yellow); }
.fund-red { color: var(--red); }

/* Similar setups strip */
.similar-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 8px;
}
.similar-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    min-width: 120px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: border-color 0.15s;
}
.similar-card:hover { border-color: var(--accent); }
.similar-ticker { font-size: var(--fs-md); font-weight: 700; color: var(--accent); }
.similar-sector { margin-top: 1px; }
.similar-meta { margin-top: 2px; }
.similar-score {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

/* Pattern metrics chips (inside pattern cards) */
.pm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 4px;
}
.pm-chip {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--bg3);
    color: var(--text-muted);
    font-family: var(--font-mono);
    white-space: nowrap;
}
.pm-pass { color: var(--green); border-color: rgba(63,185,80,0.3); background: rgba(63,185,80,0.07); }
.pm-fail { color: var(--text-dim); border-color: var(--border); }
.quality-chip { font-weight: 600; }
.quality-mid { color: var(--yellow); border-color: rgba(210,153,34,0.3); background: rgba(210,153,34,0.07); }

/* Market Breadth Strip */
.breadth-strip {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}
.breadth-strip-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    flex-shrink: 0;
    min-width: 52px;
}
.breadth-metric {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 160px;
    min-width: 0;
}
.breadth-metric-label {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 82px;
}
.breadth-bar-track {
    flex: 1;
    height: 5px;
    background: var(--bg3);
    border-radius: 3px;
    overflow: hidden;
    min-width: 50px;
}
.breadth-bar-fill {
    height: 100%;
    border-radius: 3px;
}
.breadth-bar-green  { background: var(--green); }
.breadth-bar-yellow { background: var(--yellow); }
.breadth-bar-red    { background: var(--red); }
.breadth-metric-val {
    font-size: 12px;
    font-weight: 600;
    min-width: 36px;
    text-align: right;
}

/* Setup Quality Score Card */
.setup-quality-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin: 20px 0 16px;
}
.sq-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    min-width: 0;
}
.sq-title {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}
.sq-grade {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 10px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    flex-shrink: 0;
}
.sq-grade-aplus { color: var(--green); background: var(--green-dim); }
.sq-grade-a     { color: var(--green); background: var(--green-dim); }
.sq-grade-bplus { color: var(--purple); background: rgba(163,113,247,0.12); }
.sq-grade-b     { color: var(--accent); background: var(--accent-dim); }
.sq-grade-c     { color: var(--yellow); background: var(--yellow-dim); }
.sq-grade-d     { color: var(--red); background: var(--red-dim); }
.sq-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}
.sq-chip {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid;
    font-family: var(--font-mono);
    white-space: nowrap;
    font-weight: 500;
}
.sq-pass { color: var(--green); border-color: rgba(63,185,80,0.35); background: rgba(63,185,80,0.08); }
.sq-warn { color: var(--yellow); border-color: rgba(210,153,34,0.35); background: rgba(210,153,34,0.08); }
.sq-fail { color: var(--text-dim); border-color: var(--border); background: transparent; }
.sq-neutral { color: var(--text-muted); border-color: var(--border); background: transparent; font-style: italic; }
.sq-sparkline {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    max-width: 220px;
}
.sq-spark-label {
    font-size: 10px;
    color: var(--text-dim);
    white-space: nowrap;
}
/* Hide sparkline on very small screens — prevents overflow past card edge */
@media (max-width: 460px) {
    .sq-sparkline { display: none; }
}

/* Score Breakdown Card */
.score-breakdown-card {
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 18px; margin: 14px 0;
}
.sb-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sb-title { font-size: 13px; font-weight: 600; color: var(--text); }
.sb-rows { display: flex; flex-direction: column; gap: 6px; }
.sb-row { display: flex; align-items: center; gap: 8px; }
.sb-label { font-size: 11px; color: var(--text-dim); width: 120px; flex-shrink: 0; }
.sb-bar-wrap { flex: 1; height: 6px; background: var(--bg3); border-radius: 3px; overflow: hidden; }
.sb-bar { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.sb-val { font-size: 11px; font-family: var(--font-mono); color: var(--text); width: 32px; text-align: right; }
.sb-bonuses { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.sb-bonus-chip {
    font-size: 10px; font-weight: 700; padding: 2px 8px;
    border-radius: var(--radius-pill); letter-spacing: .05em;
    color: #3fb950; border: 1px solid rgba(63,185,80,0.3); background: rgba(63,185,80,0.08);
}

/* Position Size Calculator */
.pos-calc-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin: 16px 0;
}
.pos-calc-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 14px;
}
.pos-calc-title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
}
.pos-calc-body {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}
.pos-calc-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pos-calc-field label {
    font-size: var(--fs-xs);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.pos-calc-field input {
    width: 120px;
    padding: 6px 10px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
}
.pos-calc-field input:focus {
    outline: none;
    border-color: var(--accent);
}
.pc-result-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
}
.pc-kv {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pc-kv-label {
    font-size: var(--fs-xs);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.pc-kv-val {
    font-size: var(--fs-base);
    font-weight: 700;
}
.badge-streak { color: #a371f7; border-color: rgba(163,113,247,0.35); background: rgba(163,113,247,0.1); font-size: 10px; padding: 1px 5px; }
.badge-leader { color: #d29922; border-color: rgba(210,153,34,0.4); background: rgba(210,153,34,0.1); font-size: 10px; padding: 1px 5px; font-weight: 700; }
.score-delta { font-size: 10px; font-weight: 600; white-space: nowrap; }
.score-delta-up { color: var(--green); }
.score-delta-down { color: var(--red); }
.sector-heat-rsnh { font-size: 10px; font-weight: 600; margin-top: 2px; color: var(--text-muted); }
.rsnh-hot { color: var(--green); }
.rsnh-warm { color: var(--yellow); }
.ftd-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; margin-left: 10px; letter-spacing: 0.03em; }
.ftd-confirmed { background: rgba(63,185,80,0.15); color: var(--green); border: 1px solid rgba(63,185,80,0.4); }
.ftd-attempt { background: rgba(210,153,34,0.12); color: var(--yellow); border: 1px solid rgba(210,153,34,0.35); }
.ftd-invalid { background: rgba(248,81,73,0.1); color: var(--red); border: 1px solid rgba(248,81,73,0.3); }
.breadth-health { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0 16px; border-left:1px solid var(--border); min-width:72px; gap:1px; }
.breadth-health-score { font-size:22px; font-weight:800; line-height:1; font-family:var(--font-mono); }
.breadth-health-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; }
.health-bullish .breadth-health-score, .health-bullish .breadth-health-label { color: var(--green); }
.health-neutral .breadth-health-score, .health-neutral .breadth-health-label { color: var(--accent); }
.health-caution .breadth-health-score, .health-caution .breadth-health-label { color: var(--yellow); }
.health-bearish .breadth-health-score, .health-bearish .breadth-health-label { color: var(--red); }

/* VCP Contraction Sequence Visualization */
.vcp-seq {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    padding: 6px 0 10px;
    flex: 0 0 100%;
    width: 100%;
}
.vcp-c-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: default;
}
.vcp-c-bar {
    width: 26px;
    border-radius: 3px 3px 0 0;
    min-height: 10px;
    transition: opacity 0.15s;
}
.vcp-c-bar:hover { opacity: 1 !important; }
.vcp-ok   { background: var(--green); opacity: 0.75; }
.vcp-loose { background: var(--red);   opacity: 0.65; }
.vcp-c-num {
    font-size: 10px;
    color: var(--text-dim);
    font-weight: 600;
    letter-spacing: 0.03em;
}
.vcp-c-pct {
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-mono);
}
.vcp-arrow {
    align-self: center;
    color: var(--text-dim);
    font-size: 13px;
    padding-bottom: 28px;
    flex-shrink: 0;
}

/* SEPA Checklist Card */
.sepa-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin: 16px 0;
}
.sepa-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.sepa-title {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.sepa-sub { margin-left: auto; }
.sepa-score {
    font-size: 13px;
    font-weight: 800;
    font-family: var(--font-mono);
    padding: 2px 10px;
    border-radius: var(--radius-pill);
}
.sepa-a { color: var(--green); background: var(--green-dim); border: 1px solid rgba(63,185,80,0.35); }
.sepa-b { color: var(--accent); background: var(--accent-dim); border: 1px solid var(--accent-ring); }
.sepa-c { color: var(--yellow); background: var(--yellow-dim); border: 1px solid rgba(210,153,34,0.35); }
.sepa-d { color: var(--text-dim); background: var(--bg3); border: 1px solid var(--border); }
.sepa-grid {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.sepa-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    border-radius: var(--radius-sm);
    font-size: 12px;
}
.sepa-pass { background: rgba(63,185,80,0.06); }
.sepa-fail { background: transparent; }
.sepa-neutral { background: transparent; opacity: 0.6; }
.sepa-icon {
    width: 16px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.sepa-pass .sepa-icon { color: var(--green); }
.sepa-fail .sepa-icon { color: var(--text-dim); }
.sepa-label {
    flex: 1;
    color: var(--text-muted);
    font-size: 12px;
}
.sepa-pass .sepa-label { color: var(--text); }
.sepa-val {
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--text-dim);
    min-width: 40px;
    text-align: right;
}
.sepa-pass .sepa-val { color: var(--green); }

/* Industry Groups leaderboard page */
.ind-sector-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
.ind-sector-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--bg2);
    cursor: default;
}
.ind-sector-chip.green { border-color: rgba(63,185,80,0.3); background: rgba(63,185,80,0.06); }
.ind-sector-chip.yellow { border-color: rgba(210,153,34,0.3); background: rgba(210,153,34,0.06); }
.ind-sector-chip.red { border-color: rgba(248,81,73,0.2); background: rgba(248,81,73,0.04); }
.ind-sector-name { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.ind-sector-rs { font-size: 12px; font-weight: 800; }
.ind-sector-rs.green { color: var(--green); }
.ind-sector-rs.yellow { color: var(--yellow); }
.ind-sector-rs.red { color: var(--red); }

.ind-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 2px;
}
.ind-table { display: flex; flex-direction: column; gap: 1px; }
.ind-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: var(--bg2);
    transition: border-color 0.15s, background 0.15s;
}
.ind-row:hover { border-color: var(--border); background: var(--bg-elev); }
.ind-row-top { background: rgba(63,185,80,0.04); }
.ind-row-top:hover { background: rgba(63,185,80,0.08); border-color: rgba(63,185,80,0.2); }
.ind-rank {
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-dim);
    min-width: 28px;
    text-align: right;
}
.ind-rank-top { color: var(--green); }
.ind-rank-mid { color: var(--accent); }
.ind-names {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    min-width: 0;
}
.ind-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ind-sector-badge {
    font-size: 10px;
    padding: 1px 6px;
    flex-shrink: 0;
}
.ind-rs {
    font-size: 14px;
    font-weight: 800;
}
.ind-delta {
    font-size: 12px;
    font-weight: 700;
    font-family: var(--font-mono);
}
.ind-delta-up { color: var(--green); }
.ind-delta-dn { color: var(--red); }
.ind-top-ticker {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: var(--bg3);
    border: 1px solid var(--border);
    transition: border-color 0.15s;
}
.ind-top-ticker:hover { border-color: var(--accent); }

/* ── Trade history filter bar ───────────────────────────────────── */
.trade-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.trade-filter-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.trade-search-input {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: var(--fs-sm);
    font-family: inherit;
    padding: 6px 10px;
    width: 220px;
    transition: border-color 0.15s;
    outline: none;
}
.trade-search-input::placeholder { color: var(--text-dim); }
.trade-search-input:focus { border-color: var(--accent); }
.trade-status-select {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: var(--fs-sm);
    font-family: inherit;
    padding: 6px 10px;
    outline: none;
    transition: border-color 0.15s;
}
.trade-status-select:focus { border-color: var(--accent); }
@media (max-width: 640px) {
    .trade-search-input { width: 100%; }
    .trade-filter-controls { width: 100%; }
}

/* ── Win-rate bar (trades pattern breakdown) ────────────────────── */
.wr-bar-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 100px;
}
.wr-bar-fill {
    height: 6px;
    border-radius: 3px;
    flex-shrink: 0;
    min-width: 2px;
}
.wr-bar-green { background: var(--green); }
.wr-bar-red   { background: var(--red); }
.wr-bar-label { font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Glossary ───────────────────────────────────────────────────── */
.glossary-intro {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 24px;
    font-size: var(--fs-base);
    color: var(--text-muted);
    line-height: 1.6;
}
.glossary-intro strong { color: var(--text); }
.glossary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}
.glossary-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.15s;
}
.glossary-card:hover { border-color: var(--accent); }
.glossary-card:target { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(212,168,87,0.2); }
.glossary-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.glossary-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.glossary-name {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.glossary-full-name {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-top: -4px;
}
.glossary-difficulty {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    flex-shrink: 0;
}
.glossary-difficulty-beginner { background: rgba(63,185,80,0.15); color: var(--green); }
.glossary-difficulty-intermediate { background: rgba(210,153,34,0.15); color: var(--yellow); }
.glossary-difficulty-advanced { background: rgba(248,81,73,0.15); color: var(--red); }
.glossary-desc {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}
.glossary-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.glossary-section-label {
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.glossary-criteria ul {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.glossary-criteria li {
    font-size: var(--fs-sm);
    color: var(--text);
    line-height: 1.45;
}
.glossary-levels {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--bg3);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
}
.glossary-level {
    display: flex;
    gap: 10px;
    font-size: var(--fs-sm);
    line-height: 1.4;
}
.glossary-level-label {
    font-weight: 700;
    color: var(--text-muted);
    min-width: 44px;
    flex-shrink: 0;
}
.glossary-level-value { color: var(--text); }
.glossary-card-footer { margin-top: auto; padding-top: 4px; display: flex; flex-direction: column; gap: 8px; }
.glossary-live-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.glossary-live-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-xs);
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}
.chip-scan {
    background: var(--accent-dim);
    color: var(--accent);
    border: 1px solid var(--accent-ring);
    text-decoration: none;
}
.chip-scan:hover { background: rgba(212, 168, 87, 0.22); }
.chip-trades {
    background: var(--bg3);
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.glossary-disclaimer {
    font-size: var(--fs-xs);
    color: var(--text-dim);
    text-align: center;
    padding: 16px 0 32px;
    line-height: 1.5;
    max-width: 600px;
    margin: 0 auto;
}
@media (max-width: 640px) {
    .glossary-grid { grid-template-columns: 1fr; }
}

/* ── Filter bar mobile toggle ───────────────────────────────────── */
.filter-bar-header {
    display: none;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.filter-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 600;
    font-family: inherit;
    padding: 7px 14px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.filter-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }
.filter-toggle-btn[aria-expanded="true"] .filter-toggle-chevron {
    transform: rotate(180deg);
}
.filter-toggle-chevron { transition: transform 0.2s; flex-shrink: 0; }
.filter-clear-link {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}
.filter-clear-link:hover { color: var(--accent); text-decoration: underline; }

/* Filter accordion */
.filter-accordion {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.filter-accordion-group {
    border-bottom: 1px solid var(--border);
}
.filter-accordion-group:last-child {
    border-bottom: none;
}
.filter-accordion-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg2);
    user-select: none;
    list-style: none;
    transition: color 0.15s, background 0.15s;
}
.filter-accordion-summary::-webkit-details-marker { display: none; }
.filter-accordion-summary:hover {
    color: var(--text);
    background: var(--bg3);
}
.filter-accordion-group[open] > .filter-accordion-summary {
    color: var(--accent);
    background: var(--bg3);
    border-bottom: 1px solid var(--border);
}
.accordion-chevron {
    transition: transform 0.2s;
    flex-shrink: 0;
    color: var(--text-muted);
}
.filter-accordion-group[open] .accordion-chevron {
    transform: rotate(180deg);
}
.filter-accordion-group > .filter-row,
.filter-accordion-group > div {
    padding: 12px 14px 14px;
    background: var(--bg);
}

/* Active filter count badge */
.filter-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--accent);
    color: var(--bg);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    animation: filter-badge-pulse 2.5s ease-in-out infinite;
}
@keyframes filter-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212, 168, 87, 0.4); }
    50% { box-shadow: 0 0 0 3px rgba(212, 168, 87, 0); }
}
/* Section-level filter badge — smaller, no animation */
.filter-section-badge {
    min-width: 16px;
    height: 16px;
    font-size: 10px;
    margin-left: auto;
    margin-right: 6px;
    animation: none;
}

@media (max-width: 640px) {
    .container { overflow-x: hidden; }
    .results-bar {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .results-count {
        flex: 1 0 100%;
    }
    .filter-bar-header { display: flex; }
    .preset-strip,
    .legend-preset-strip {
        flex-wrap: nowrap;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        contain: paint;
    }
    .preset-strip { margin-bottom: 10px; }
    .preset-strip > *,
    .legend-preset-strip > * {
        flex: 0 0 auto;
    }
    .preset-pill { font-size: 12px; padding: 8px 14px; min-height: 36px; display: inline-flex; align-items: center; }
    .filter-bar { padding: 10px 12px; }
    .filter-bar .filter-row { gap: 8px; }
    .filter-field {
        min-width: calc(50% - 4px);
        flex: 1 1 calc(50% - 4px);
    }
    .filter-field-num {
        min-width: calc(50% - 4px);
        flex: 1 1 calc(50% - 4px);
    }
    .filter-checks { gap: 8px; }
    .check { font-size: var(--fs-xs); }
}

/* ── Watchlist inline notes ─────────────────────────────────────── */
.wl-notes-cell { min-width: 160px; max-width: 260px; }
.wl-notes-input {
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 4px);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-family: inherit;
    padding: 2px 6px;
    transition: border-color 0.15s, background 0.15s;
    outline: none;
    box-sizing: border-box;
}
@media (max-width: 640px) {
    .wl-notes-input { padding: 8px 10px; min-height: 40px; }
}
.wl-notes-input::placeholder { color: var(--text-dim, #484f58); }
.wl-notes-input:hover {
    border-color: var(--border);
    background: var(--bg3);
}
.wl-notes-input:focus {
    border-color: var(--accent);
    background: var(--bg3);
    color: var(--text);
}

/* ── Error Pages (404 / 500) ────────────────────────────────────── */
.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 60vh;
    gap: 16px;
    padding: 48px 24px;
}
.error-code {
    font-size: 80px;
    font-weight: 800;
    line-height: 1;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    letter-spacing: -2px;
    opacity: 0.9;
}
.error-code-red { color: var(--red); }
.error-icon { color: var(--text-muted); }
.error-icon-red { color: var(--red); opacity: 0.7; }
.error-title {
    font-size: var(--fs-xl, 22px);
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.error-body {
    font-size: var(--fs-base);
    color: var(--text-muted);
    max-width: 420px;
    line-height: 1.6;
    margin: 0;
}
.error-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
}
.ticker-code {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 7px;
    color: var(--accent);
}

/* ── Quick-Search Modal (press /) ────────────────────────────────── */
.qs-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
}
.qs-backdrop.is-open { display: flex; }
.qs-modal {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 480px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  overflow: hidden;
}
.qs-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.qs-icon { color: var(--text-muted); flex-shrink: 0; }
#qs-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: 1.05rem;
  color: var(--text);
  font-family: inherit;
  letter-spacing: .01em;
}
#qs-input::placeholder { color: var(--text-muted); }
.qs-esc-hint {
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 5px;
  flex-shrink: 0;
}
.qs-results {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  max-height: 320px;
  overflow-y: auto;
}
.qs-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 80ms;
}
.qs-item:hover, .qs-item.qs-active {
  background: var(--bg3);
}
.qs-ticker {
  font-weight: 700;
  font-size: .95rem;
  color: var(--accent);
  min-width: 56px;
  font-variant-numeric: tabular-nums;
}
.qs-name {
  font-size: .82rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qs-footer {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  padding: 6px 16px 8px;
  border-top: 1px solid var(--border);
  letter-spacing: .03em;
}

/* ── Keyboard Shortcuts Overlay ─────────────────────────────────── */
.kb-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
}
.kb-overlay.is-open { display: flex; }
.kb-modal {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 12px);
    padding: 24px 28px;
    min-width: 340px;
    max-width: 460px;
    width: 90vw;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.kb-modal-title {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--text);
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.kb-modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    border-radius: 4px;
    font-size: 18px;
}
.kb-modal-close:hover { color: var(--text); background: var(--bg3); }
.kb-section { margin-bottom: 16px; }
.kb-section:last-child { margin-bottom: 0; }
.kb-section-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.kb-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 0;
    font-size: var(--fs-sm);
}
.kb-keys { display: flex; gap: 4px; flex-shrink: 0; }
.kb-desc { color: var(--text-muted); flex: 1; }
kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 1px 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text);
    min-width: 22px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.6;
}
.ind-top-ticker .ticker { font-size: 12px; }

/* Scan run history selector */
.run-selector-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.run-selector-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.run-selector-select {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 12px;
    padding: 5px 10px;
    cursor: pointer;
    max-width: 220px;
}
.run-selector-select:focus { outline: none; border-color: var(--accent); }

/* Earnings Calendar page */
.earnings-rule-callout {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(210,153,34,0.08);
    border: 1px solid rgba(210,153,34,0.25);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: 18px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}
.earnings-rule-callout svg { color: var(--yellow); margin-top: 2px; }
.earnings-filter-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.earnings-filter-pills { display: flex; gap: 6px; }
.earnings-pill {
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg2);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}
.earnings-pill:hover { border-color: var(--accent); color: var(--accent); }
.earnings-pill.active { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }
.earnings-filter-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
}
.earnings-filter-toggle input { cursor: pointer; accent-color: var(--accent); }
.earnings-days-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-mono);
    min-width: 36px;
    text-align: center;
}
.earnings-danger { background: rgba(248,81,73,0.15); color: var(--red); border: 1px solid rgba(248,81,73,0.3); }
.earnings-warn   { background: rgba(210,153,34,0.12); color: var(--yellow); border: 1px solid rgba(210,153,34,0.25); }
.earnings-safe   { background: rgba(63,185,80,0.1); color: var(--green); border: 1px solid rgba(63,185,80,0.2); }
.earnings-row-danger { background: rgba(248,81,73,0.04); }
.earnings-row-danger:hover { background: rgba(248,81,73,0.08) !important; }
.earnings-past { background: rgba(139,148,158,0.10); color: var(--text-muted); border: 1px solid rgba(139,148,158,0.2); }
.earnings-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.earnings-month-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.earnings-month-title {
    min-width: 150px;
    text-align: center;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}
.earnings-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}
.earnings-month-input,
.earnings-search-input {
    background: var(--bg2);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    min-height: 34px;
    padding: 6px 10px;
    font-size: 13px;
}
.earnings-search-input { min-width: 230px; }
.earnings-month-input:focus,
.earnings-search-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(224,185,107,0.12);
}
.earnings-calendar {
    margin: 14px 0 24px;
}
.earnings-weekdays,
.earnings-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}
.earnings-weekdays {
    gap: 6px;
    margin-bottom: 6px;
}
.earnings-weekdays span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0 4px;
}
.earnings-calendar-grid {
    gap: 6px;
}
.earnings-day {
    min-height: 126px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 7px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
}
.earnings-day-muted {
    opacity: 0.45;
    background: rgba(139,148,158,0.04);
}
.earnings-day-today {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px rgba(224,185,107,0.25);
}
.earnings-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.earnings-day-num {
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
}
.earnings-day-count {
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent-ring);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 6px;
}
.earnings-day-events {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.earnings-event-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    border-radius: 4px;
    padding: 3px 6px;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    min-width: 0;
}
.earnings-event-ticker {
    color: currentColor;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.earnings-event-time {
    margin-left: auto;
    color: currentColor;
    opacity: 0.75;
    font-size: 9px;
    font-family: var(--font-mono);
}
.earnings-event-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 1px rgba(224,185,107,0.35);
    flex-shrink: 0;
}
.earnings-more {
    color: var(--text-muted);
    font-size: 10px;
    padding: 1px 2px;
}
.earnings-empty {
    min-height: 180px;
}
@media (max-width: 900px) {
    .earnings-toolbar { align-items: stretch; }
    .earnings-search-form { width: 100%; margin-left: 0; }
    .earnings-search-input { flex: 1; min-width: 170px; }
    .earnings-day { min-height: 112px; padding: 5px; }
    .earnings-weekdays span { font-size: 10px; }
}
@media (max-width: 680px) {
    .earnings-calendar-grid,
    .earnings-weekdays {
        gap: 4px;
    }
    .earnings-day {
        min-height: 86px;
        border-radius: 4px;
    }
    .earnings-event-chip {
        min-height: 21px;
        padding: 2px 4px;
        font-size: 10px;
    }
    .earnings-event-time,
    .earnings-event-dot { display: none; }
}
.badge-beat   { background: rgba(63,185,80,.15);  color: var(--green);      border: 1px solid rgba(63,185,80,.3);   padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; }
.badge-miss   { background: rgba(248,81,73,.12);  color: var(--red);        border: 1px solid rgba(248,81,73,.3);   padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; }
.badge-inline { background: rgba(139,148,158,.15); color: var(--text-muted); border: 1px solid var(--border);       padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; }
.days-chip { font-size: 11px; padding: 2px 7px; border-radius: 10px; background: var(--bg3); color: var(--text-muted); }
.days-chip.days-chip-urgent { background: rgba(248,81,73,.12); color: var(--red); }

/* ── Position Calculator ─────────────────────────────────────────────── */
.calc-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
    margin-top: 16px;
}
@media (max-width: 900px) {
    .calc-layout { grid-template-columns: 1fr; }
}

.calc-field-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}
.calc-price-group {
    grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 600px) {
    .calc-field-group { grid-template-columns: 1fr 1fr; }
    .calc-price-group { grid-template-columns: 1fr 1fr; }
}

.calc-field { display: flex; flex-direction: column; gap: 5px; }
.calc-label {
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.calc-required { color: var(--red); margin-left: 2px; }

.calc-input-wrap {
    display: flex;
    align-items: center;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color 150ms;
}
.calc-input-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-ring);
}
.calc-input-prefix, .calc-input-suffix {
    padding: 0 8px;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    background: var(--bg2);
    border-right: 1px solid var(--border);
    align-self: stretch;
    display: flex;
    align-items: center;
    user-select: none;
}
.calc-input-suffix {
    border-right: none;
    border-left: 1px solid var(--border);
}

.calc-input {
    width: 100%;
    padding: 8px 10px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: var(--fs-base);
    font-family: inherit;
    transition: border-color 150ms;
    -moz-appearance: textfield;
}
.calc-input::-webkit-inner-spin-button,
.calc-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.calc-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-ring);
}
.calc-input-dollar {
    border: none;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}
.calc-input-dollar:focus {
    border: none;
    box-shadow: none;
    outline: none;
}

/* Result card */
.calc-result-card { padding: 20px; }
.calc-result-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    min-height: 28px;
}
.calc-result-ticker {
    font-size: var(--fs-md);
    font-weight: 700;
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
    color: var(--text);
}
.calc-result-status { color: var(--text-dim); }

.calc-result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--border-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.calc-result-item {
    padding: 12px 14px;
    background: var(--bg2);
}
.calc-result-item-primary { background: var(--bg-elev); }
.calc-result-label {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 600;
    margin-bottom: 4px;
}
.calc-result-value {
    font-size: var(--fs-md);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-family: var(--font-mono);
}

/* Scenario table active row */
.calc-scenario-active {
    background: var(--accent-soft) !important;
}
.calc-scenario-active:hover {
    background: var(--accent-dim) !important;
}

/* Rules list */
.calc-rules-card { padding: 16px 20px; }
.calc-rules-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: 1.5;
}
.calc-rules-list li::before {
    content: '→ ';
    color: var(--accent);
    font-weight: 600;
}
.calc-rules-list strong { color: var(--text); }

/* ── Portfolio ──────────────────────────────────────────────────────── */
.port-sector-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.port-sector-label {
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--text-muted);
    margin-right: 4px;
}
.port-sector-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: var(--fs-sm);
}
.port-sector-name { color: var(--text); font-weight: 500; }
.port-sector-count {
    color: var(--text-dim);
    font-size: 11px;
    background: var(--bg2);
    padding: 0 4px;
    border-radius: 4px;
}
.port-sector-pnl { font-size: 11px; font-weight: 600; font-family: var(--font-mono); }

/* Port table */
.port-table th, .port-table td { vertical-align: middle; }

/* Progress bar */
.port-progress-wrap { min-width: 100px; }
.port-progress-bar {
    position: relative;
    height: 6px;
    background: var(--bg3);
    border-radius: 3px;
    overflow: visible;
}
.port-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}
.port-prog-green { background: var(--green); }
.port-prog-yellow { background: var(--yellow); }
.port-prog-red { background: var(--red); }
.port-progress-cursor {
    position: absolute;
    top: -2px;
    width: 3px;
    height: 10px;
    background: var(--text);
    border-radius: 1px;
    transform: translateX(-50%);
    box-shadow: 0 0 4px rgba(0,0,0,0.6);
}
.port-progress-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
}

/* Row highlight classes */
.port-row-danger { background: rgba(248, 81, 73, 0.04); }
.port-row-danger:hover { background: rgba(248, 81, 73, 0.08) !important; }
.port-row-warn { background: rgba(210, 153, 34, 0.04); }
.port-row-warn:hover { background: rgba(210, 153, 34, 0.08) !important; }

/* Portfolio management hints */
.port-mgmt-hint { font-size: 10px; font-weight: 600; margin-top: 2px; letter-spacing: 0.02em; }
.port-mgmt-green { color: var(--green); }
.port-mgmt-yellow { color: var(--yellow); }
.port-mgmt-red { color: var(--red); }

/* Trade execution grade badge (A+/A/B/C/D/F) shown beside R-multiple */
.trade-r-grade {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-left: 4px;
    vertical-align: middle;
}

/* Callout banners */
.port-callout {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: var(--fs-sm);
    line-height: 1.4;
}
.port-callout-danger {
    background: rgba(248, 81, 73, 0.08);
    border: 1px solid rgba(248, 81, 73, 0.25);
    color: var(--red);
}
.port-callout-warn {
    background: rgba(210, 153, 34, 0.08);
    border: 1px solid rgba(210, 153, 34, 0.25);
    color: var(--yellow);
}

/* ── RS Leaders page ──────────────────────────────────────────────── */

/* Page header layout */
.page-header-left { display: flex; flex-direction: column; gap: 4px; }
.page-title { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.page-subtitle { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }

/* Large regime badge for page headers */
.regime-badge-lg {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: var(--radius);
    border: 1px solid;
    flex-shrink: 0;
}
.regime-badge-lg .regime-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background: currentColor;
    animation: regime-pulse 2s ease-in-out infinite;
}
.regime-badge-lg .regime-label { font-weight: 700; font-size: 14px; line-height: 1.2; }
.regime-badge-lg .regime-sub   { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.regime-up    { background: var(--green-dim);  border-color: rgba(63,185,80,0.3);   color: var(--green); }
.regime-down  { background: var(--red-dim);    border-color: rgba(248,81,73,0.3);   color: var(--red); }
.regime-caution { background: var(--yellow-dim); border-color: rgba(210,153,34,0.3); color: var(--yellow); }
.regime-unknown { background: var(--bg2); border-color: var(--border); color: var(--text-muted); }

@keyframes regime-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* Uptrend pulse — subtle glow expansion for confirmed uptrend indicator */
@keyframes uptrend-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(63, 185, 80, 0.5); }
    50% { box-shadow: 0 0 0 4px rgba(63, 185, 80, 0); }
}

/* Regime notes bar */
.regime-notes-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius);
    border: 1px solid;
    margin-bottom: 16px;
    font-size: 12px;
}
.regime-note::before { content: "• "; opacity: 0.6; }

/* Market strip items */
.market-strip-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    flex-shrink: 0;
    font-size: 13px;
}
.strip-ticker { font-weight: 700; min-width: 36px; }
.strip-price  { font-family: var(--font-mono); color: var(--text-muted); }
.strip-change { font-family: var(--font-mono); font-size: 12px; }
.strip-badges { display: flex; gap: 3px; align-items: center; }
.strip-perf   { font-size: 11px; color: var(--text-muted); }

/* XS badge variants for SMA indicators */
.badge-xs {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    display: inline-block;
    line-height: 1.4;
}
.badge-green  { background: rgba(63,185,80,0.15);  color: var(--green);  border: 1px solid rgba(63,185,80,0.3); }
.badge-red    { background: rgba(248,81,73,0.12);  color: var(--red);    border: 1px solid rgba(248,81,73,0.3); }
.badge-blue   { background: var(--accent-dim);     color: var(--accent); border: 1px solid var(--accent-ring); }
.badge-accent { background: var(--accent-dim);     color: var(--accent); border: 1px solid var(--accent-ring); }
.badge-yellow { background: rgba(210,153,34,0.12); color: var(--yellow); border: 1px solid rgba(210,153,34,0.3); }

/* SMA badge cluster */
.sma-badges { display: flex; gap: 3px; align-items: center; }

/* Filter bar left/right layout */
.filter-bar { flex-wrap: wrap; gap: 10px; }
.filter-bar-left  { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.filter-bar-right { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }

/* RS leaders table density */
.rs-leaders-table td, .rs-leaders-table th { padding: 7px 10px; }
.rs-leaders-table .ticker-link { font-weight: 700; color: var(--accent); text-decoration: none; }
.rs-leaders-table .ticker-link:hover { text-decoration: underline; }

/* Utility */
.text-sm    { font-size: var(--fs-sm); }
.font-mono  { font-family: var(--font-mono); }
.text-green { color: var(--green); }
.text-red   { color: var(--red); }
.text-yellow{ color: var(--yellow); }

/* Page footer note */
.page-footer-note { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-soft); }

/* Alert utility */
.alert { padding: 10px 14px; border-radius: var(--radius); font-size: 13px; margin-bottom: 16px; }
.alert-warning { background: var(--yellow-dim); border: 1px solid rgba(210,153,34,0.3); color: var(--yellow); }

/* ── Live Market Breadth Widget (HTMX) ───────────────────────────── */
.breadth-widget {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.breadth-loading { min-height: 52px; justify-content: center; align-items: center; }
.breadth-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.breadth-title { font-weight: 700; font-size: 13px; }
.breadth-meta  { font-size: 11px; }
.breadth-health { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); margin-left: auto; }
.health-bullish { background: var(--green-dim); color: var(--green); }
.health-neutral { background: var(--bg3); color: var(--text-muted); }
.health-caution { background: var(--yellow-dim); color: var(--yellow); }
.health-bearish { background: var(--red-dim); color: var(--red); }
.breadth-bars { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.breadth-bar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 200px;
    flex: 1;
}
.breadth-bar-label { font-size: 11px; color: var(--text-muted); width: 110px; flex-shrink: 0; }
.breadth-bar-track {
    flex: 1;
    height: 6px;
    background: var(--bg3);
    border-radius: 3px;
    overflow: hidden;
}
.breadth-bar-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.fill-green { background: var(--green); }
.fill-yellow { background: var(--yellow); }
.fill-red    { background: var(--red); }
.breadth-bar-pct { font-size: 11px; font-family: var(--font-mono); width: 36px; text-align: right; flex-shrink: 0; }
.breadth-sectors {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    padding-top: 4px;
    border-top: 1px solid var(--border-soft);
}
.breadth-sector-label { flex-shrink: 0; }
.breadth-sector-chip {
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    border: 1px solid;
    font-size: 11px;
}
.chip-green  { background: var(--green-dim);  border-color: rgba(63,185,80,0.3);   color: var(--green); }
.chip-yellow { background: var(--yellow-dim); border-color: rgba(210,153,34,0.3);  color: var(--yellow); }
.chip-red    { background: var(--red-dim);    border-color: rgba(248,81,73,0.3);   color: var(--red); }

@media (max-width: 600px) {
    .breadth-bar-item { min-width: 100%; }
}

/* ── Live Quote Bar (symbol page) ─────────────────────────────────── */
.live-quote-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    flex-wrap: wrap;
    font-size: 13px;
    margin-bottom: 8px;
}
.live-quote-loading {
    height: 40px;
    min-width: 280px;
    padding: 0;
    background: linear-gradient(
        90deg,
        var(--bg3) 25%,
        var(--bg2) 50%,
        var(--bg3) 75%
    );
    background-size: 200% 100%;
    animation: lq-shimmer 1.4s ease-in-out infinite;
}
@keyframes lq-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.lq-price  { font-family: var(--font-mono); font-weight: 700; font-size: 15px; }
.lq-change { font-family: var(--font-mono); font-weight: 600; }
.lq-stat   { display: flex; align-items: center; gap: 4px; }
.lq-label  { font-size: 11px; color: var(--text-muted); }
.lq-source { font-size: 10px; margin-left: auto; opacity: 0.5; }

/* ── Market Internals Page (/market) ─────────────────────────────── */
.page-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.page-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 4px;
}

/* Regime banner for market page */
.market-regime-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-radius: var(--radius);
    border-left: 4px solid;
    margin-bottom: 6px;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
}
.market-regime-banner.regime-up      { background: rgba(63,185,80,0.08);   border-color: var(--green); }
.market-regime-banner.regime-caution { background: rgba(210,153,34,0.08); border-color: var(--yellow); }
.market-regime-banner.regime-down    { background: rgba(248,81,73,0.08);  border-color: var(--red); }
.market-regime-banner.regime-unknown { background: var(--bg2);            border-color: var(--border); }
.mrb-left  { display: flex; align-items: center; gap: 8px; }
.mrb-right { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 13px; }
.mrb-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.mrb-dot.regime-up      { background: var(--green); box-shadow: 0 0 6px var(--green); }
.mrb-dot.regime-caution { background: var(--yellow); }
.mrb-dot.regime-down    { background: var(--red); box-shadow: 0 0 6px var(--red); }
.mrb-dot.regime-unknown { background: var(--text-muted); }
.mrb-label { font-weight: 600; font-size: 15px; }

/* Index cards grid */
.market-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin: 16px 0;
}
.market-index-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.market-index-card.mic-empty {
    opacity: 0.5;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    text-align: center;
}
.mic-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mic-ticker {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 16px;
    color: var(--accent);
}
.mic-price {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}
.mic-change {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 14px;
}
.mic-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 10px;
    margin-top: 4px;
}
.mic-stat {
    display: flex;
    align-items: center;
    gap: 6px;
}
.mic-stat-label { font-size: 11px; color: var(--text-muted); width: 32px; flex-shrink: 0; }
.mic-stat-val   { font-family: var(--font-mono); font-size: 13px; }
.mic-smas {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.sma-pip {
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-weight: 600;
}
.sma-pip.green  { background: var(--green-dim);  color: var(--green); }
.sma-pip.yellow { background: var(--yellow-dim); color: var(--yellow); }
.sma-pip.red    { background: var(--red-dim);    color: var(--red); }
.mic-dd  { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.mic-ftd { font-size: 11px; margin-top: 2px; }

/* Distribution day progress */
.dd-progress {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 12px;
}
.dd-slot {
    width: 28px;
    height: 12px;
    border-radius: 3px;
}
.dd-filled { background: var(--red); opacity: 0.85; }
.dd-empty  { background: var(--bg3); border: 1px solid var(--border); }
.dd-threshold { font-size: 11px; color: var(--text-muted); margin-left: 8px; }
.dd-table-wrap { max-height: 200px; overflow-y: auto; margin-top: 8px; }

/* Market sections */
.market-section {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 16px;
}
.market-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.market-section-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}
.market-section-reference { background: var(--bg); }

/* Sector rotation */
.sector-rotation-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sector-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sector-name {
    font-size: 12px;
    width: 180px;
    flex-shrink: 0;
}
.sector-bar-wrap {
    flex: 1;
    height: 8px;
    background: var(--bg3);
    border-radius: 4px;
    overflow: hidden;
}
.sector-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}
.sector-rs   { font-family: var(--font-mono); font-size: 12px; width: 38px; text-align: right; }
.sector-count { font-size: 11px; width: 30px; text-align: right; }

/* Playbook */
.playbook-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 600px) { .playbook-grid { grid-template-columns: 1fr; } }
.playbook-heading {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}
.playbook-col .green { color: var(--green); }
.playbook-col .yellow { color: var(--yellow); }
.playbook-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.playbook-list li {
    font-size: 13px;
    padding-left: 16px;
    position: relative;
    line-height: 1.5;
}
.playbook-list li::before {
    content: '›';
    position: absolute;
    left: 0;
    color: var(--text-muted);
}

/* Run timeline */
.run-timeline {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.run-timeline-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg3);
    border-radius: var(--radius-sm);
}
.rt-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.rt-dot.regime-up      { background: var(--green); }
.rt-dot.regime-caution { background: var(--yellow); }
.rt-dot.regime-down    { background: var(--red); }
.rt-dot.regime-unknown { background: var(--text-muted); }
.rt-body { flex: 1; }
.rt-date { margin-bottom: 2px; }
.rt-stats { display: flex; align-items: center; gap: 8px; font-size: 12px; flex-wrap: wrap; }
.rt-link { font-size: 12px; flex-shrink: 0; }

/* Regime reference cards */
.regime-ref-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.regime-ref-card {
    padding: 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.regime-ref-card.regime-up      { border-color: rgba(63,185,80,0.3);  background: rgba(63,185,80,0.05); }
.regime-ref-card.regime-caution { border-color: rgba(210,153,34,0.3); background: rgba(210,153,34,0.05); }
.regime-ref-card.regime-down    { border-color: rgba(248,81,73,0.3);  background: rgba(248,81,73,0.05); }
.rrc-label { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.rrc-desc  { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

/* Utility extras */
.ml-1 { margin-left: 4px; }
.bold  { font-weight: 700; }

/* ── Base Count Badges ────────────────────────────────────────────── */
.badge-base-count {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    font-family: var(--font-mono);
}
.badge-base-1 { background: var(--green-dim);  color: var(--green);  border: 1px solid rgba(63,185,80,0.3); }
.badge-base-2 { background: var(--yellow-dim); color: var(--yellow); border: 1px solid rgba(210,153,34,0.3); }
.badge-base-3 { background: var(--red-dim);    color: var(--red);    border: 1px solid rgba(248,81,73,0.3); }
.badge-base-4,
.badge-base-5,
.badge-base-6,
.badge-base-7,
.badge-base-8,
.badge-base-9 { background: var(--red-dim); color: var(--red); border: 1px solid rgba(248,81,73,0.3); opacity: 0.75; }

/* ── Stage Warning Badge (Stg 3+) ─────────────────────────────────── */
.badge-stage-warn {
  background: rgba(248,81,73,0.12);
  color: var(--red);
  border: 1px solid rgba(248,81,73,0.28);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
}

/* ── Base Quality Grade Badges (A/B/C) ────────────────────────────── */
.badge-base-a { background: rgba(63,185,80,.15);  color: var(--green);  border: 1px solid rgba(63,185,80,.3);  font-size: 10px; padding: 1px 6px; border-radius: 4px; font-weight: 600; }
.badge-base-b { background: rgba(88,166,255,.12); color: var(--accent); border: 1px solid rgba(88,166,255,.3); font-size: 10px; padding: 1px 6px; border-radius: 4px; font-weight: 600; }
.badge-base-c { background: rgba(248,81,73,.10);  color: var(--red);    border: 1px solid rgba(248,81,73,.3);  font-size: 10px; padding: 1px 6px; border-radius: 4px; font-weight: 600; }

/* ── Trade Thesis Box (symbol page) ──────────────────────────────── */
.trade-thesis-box {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(90deg, var(--accent-soft) 0%, rgba(212,168,87,0.02) 100%);
    border: 1px solid var(--accent-ring);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.55;
}
.trade-thesis-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 2px;
    width: 38px;
}
.trade-thesis-text {
    color: var(--text);
    flex: 1;
}

/* ── Daily Playbook Page (/playbook) ─────────────────────────────── */
.pb-regime-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    margin-bottom: 16px;
    align-items: stretch;
}
@media (max-width: 700px) { .pb-regime-row { grid-template-columns: 1fr; } }

.pb-regime-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    border-left: 4px solid;
}
.pb-regime-card.regime-up      { border-color: var(--green); background: rgba(63,185,80,0.06); }
.pb-regime-card.regime-caution { border-color: var(--yellow); background: rgba(210,153,34,0.06); }
.pb-regime-card.regime-down    { border-color: var(--red); background: rgba(248,81,73,0.06); }
.pb-regime-card.regime-unknown { border-color: var(--border); background: var(--bg2); }
.pb-regime-dot {
    width: 12px; height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
.pb-regime-dot.regime-up      { background: var(--green); box-shadow: 0 0 8px rgba(63,185,80,0.5); }
.pb-regime-dot.regime-caution { background: var(--yellow); }
.pb-regime-dot.regime-down    { background: var(--red); box-shadow: 0 0 8px rgba(248,81,73,0.5); }
.pb-regime-dot.regime-unknown { background: var(--text-muted); }
.pb-regime-body { flex: 1; }
.pb-regime-label { font-weight: 600; font-size: 15px; }
.pb-regime-note  { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pb-regime-spy   { font-size: 13px; display: flex; align-items: center; gap: 6px; }

.pb-exposure-card {
    padding: 12px 16px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.pb-exp-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.pb-exp-val   { font-family: var(--font-mono); font-size: 20px; font-weight: 700; }
.pb-exp-val.green  { color: var(--green); }
.pb-exp-val.yellow { color: var(--yellow); }
.pb-exp-val.red    { color: var(--red); }
.pb-exp-link { font-size: 11px; color: var(--accent); text-decoration: none; }

.pb-scan-card {
    padding: 12px 16px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-width: 150px;
}
.pb-scan-card.pb-scan-stale { border-color: rgba(210,153,34,0.4); }
.pb-scan-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.pb-scan-val   { font-family: var(--font-mono); font-size: 14px; font-weight: 600; }
.pb-scan-sub   { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Sections */
.pb-section {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 20px;
    margin-bottom: 16px;
}
.pb-section-alert { border-color: rgba(63,185,80,0.3); }
.pb-section-quality { background: var(--bg); }
.pb-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.pb-section-title { font-size: 15px; font-weight: 600; margin: 0; }

/* Alert grid: watchlist buy zone */
.pb-alert-grid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.pb-alert-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    background: var(--bg3);
    border: 1px solid rgba(63,185,80,0.3);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text);
    min-width: 130px;
    transition: var(--transition);
}
.pb-alert-card:hover { border-color: var(--green); background: rgba(63,185,80,0.06); }
.pb-alert-ticker { font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: var(--accent); }
.pb-alert-price  { font-family: var(--font-mono); font-size: 14px; font-weight: 600; }
.pb-alert-dist   { font-family: var(--font-mono); font-size: 12px; }

/* Approaching list */
.pb-approach-list { display: flex; flex-direction: column; gap: 6px; }
.pb-approach-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg3);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text);
    font-size: 13px;
    transition: var(--transition);
}
.pb-approach-item:hover { background: var(--bg-elev); }
.pb-approach-ticker { font-family: var(--font-mono); font-weight: 700; color: var(--accent); width: 60px; }

/* Setup cards grid */
.pb-setups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}
.pb-setup-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 16px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--text);
    transition: var(--transition);
}
.pb-setup-card:hover { border-color: var(--accent); background: var(--bg-elev); }
.pb-setup-actionable { border-color: rgba(63,185,80,0.4); background: rgba(63,185,80,0.04); }
.pb-setup-actionable:hover { border-color: var(--green); }
.pb-setup-header {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.pb-setup-ticker { font-family: var(--font-mono); font-weight: 700; font-size: 16px; color: var(--accent); }
.pb-setup-pattern { font-size: 12px; }
.pb-setup-scores { display: flex; align-items: baseline; gap: 4px; }
.pb-score { font-family: var(--font-mono); font-size: 18px; font-weight: 700; }
.pb-rs    { font-family: var(--font-mono); font-size: 15px; font-weight: 600; margin-left: 8px; }
.pb-setup-signals { display: flex; gap: 4px; flex-wrap: wrap; }
.pb-setup-levels { font-size: 12px; }
.pb-setup-thesis { color: var(--text-dim); }

/* Earnings list */
.pb-earnings-list { display: flex; flex-direction: column; gap: 6px; }
.pb-earn-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg3);
    border-radius: var(--radius-sm);
    font-size: 13px;
    border-left: 3px solid transparent;
}
.pb-earn-danger { border-left-color: var(--red);    background: rgba(248,81,73,0.05); }
.pb-earn-warn   { border-left-color: var(--yellow); background: rgba(210,153,34,0.05); }
.pb-earn-ticker { font-family: var(--font-mono); font-weight: 700; color: var(--accent); text-decoration: none; width: 60px; }

/* Scan quality bars */
.pb-quality-bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 80px;
    padding-bottom: 20px;
    position: relative;
}
.pb-quality-bar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    height: 100%;
}
.pb-quality-bar {
    width: 100%;
    border-radius: 2px 2px 0 0;
    min-height: 4px;
    transition: height 0.3s ease;
}
.pb-quality-label {
    font-size: 9px;
    margin-top: 4px;
    text-align: center;
}

/* Empty state */
.pb-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}
.pb-empty-icon  { font-size: 40px; margin-bottom: 12px; }
.pb-empty-title { font-size: 18px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.pb-empty-sub   { font-size: 14px; margin-bottom: 20px; }

/* =========================================================
   ANALYZE PAGE — /analyze and /analyze/{ticker}
   ========================================================= */
.analyze-search-form {
    max-width: 640px;
    margin: 0 0 24px;
}
.analyze-search-wrap {
    display: flex;
    gap: 8px;
}
.analyze-search-input {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: 16px;
    font-family: inherit;
}
.analyze-search-input:focus {
    outline: none;
    border-color: var(--accent);
}

/* Header */
.analyze-header {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 16px;
    background: var(--bg2);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
.analyze-ticker-block { display: flex; align-items: center; gap: 8px; }
.analyze-ticker {
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.5px;
}
.analyze-price-block { display: flex; flex-direction: column; gap: 2px; }
.analyze-price { font-size: 20px; font-weight: 600; }
.analyze-score-block { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-left: auto; }
.analyze-score-ring {
    --ring-fill: var(--text-dim);
    --score-pct: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: conic-gradient(var(--ring-fill) calc(var(--score-pct) * 1%), var(--bg3) 0);
    box-shadow: inset 0 0 0 5px var(--bg2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    position: relative;
}
.analyze-score-ring.score-high { --ring-fill: var(--green); color: var(--green); }
.analyze-score-ring.score-mid  { --ring-fill: var(--yellow); color: var(--yellow); }
.analyze-score-ring.score-low  { color: var(--text-muted); }
.analyze-actions { display: flex; gap: 8px; }
.analyze-error {
    padding: 16px;
    background: rgba(248,81,73,0.08);
    border: 1px solid rgba(248,81,73,0.3);
    border-radius: var(--radius);
    color: var(--red);
    margin-bottom: 16px;
}

/* Layout grids */
.analyze-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 12px;
}
.analyze-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (max-width: 900px) {
    .analyze-grid-3 { grid-template-columns: 1fr; }
    .analyze-grid-2 { grid-template-columns: 1fr; }
}

/* Trend Template criteria */
.tt-criteria-list { display: flex; flex-direction: column; gap: 4px; padding: 4px 0; }
.tt-criterion {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
    border-radius: 4px;
    font-size: 12px;
}
.tt-pass { color: var(--green); }
.tt-fail { color: var(--red); }
.tt-dot  { font-size: 11px; flex-shrink: 0; }
.tt-label { flex: 1; }
.tt-value { color: var(--text-muted); }

/* Pattern list */
.analyze-pattern-list { display: flex; flex-direction: column; gap: 8px; }
.analyze-pattern-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.analyze-pattern-top .analyze-pattern-name { color: var(--text); font-weight: 600; }
.analyze-pattern-name { color: var(--text-muted); }
.analyze-pattern-conf-bar {
    flex: 1;
    height: 4px;
    background: var(--bg3);
    border-radius: 2px;
    overflow: hidden;
}
.analyze-pattern-conf-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
}
.analyze-pattern-top .analyze-pattern-conf-fill { background: var(--green); }

/* Key levels */
.analyze-levels { display: flex; flex-direction: column; gap: 4px; }
.kl-row { display: flex; justify-content: space-between; font-size: 12px; }
.kl-label { color: var(--text-muted); }
.kl-val   { font-weight: 500; }

/* Features grid */
.analyze-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
}
.analyze-feat { display: flex; flex-direction: column; gap: 1px; }
.analyze-feat-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.analyze-feat-val   { font-size: 13px; font-weight: 500; }

/* SEPA */
.sepa-criteria-list { display: flex; flex-direction: column; gap: 4px; padding: 4px 0; }
.sepa-criterion     { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.sepa-pass { color: var(--green); }
.sepa-fail { color: var(--red); }
.sepa-dot  { font-size: 11px; }
.sepa-label { flex: 1; }

/* Action summary */
.analyze-action-summary { padding: 4px 0; }
.analyze-action-line    { font-size: 13px; line-height: 1.5; }

/* Landing state cards */
.analyze-landing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 24px;
}
.analyze-landing-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 16px;
    text-align: center;
}
.analyze-landing-icon  { font-size: 28px; margin-bottom: 8px; }
.analyze-landing-title { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.analyze-landing-desc  { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
@media (max-width: 700px) {
    .analyze-landing-grid { grid-template-columns: 1fr 1fr; }
}

/* =========================================================
   MARKET PAGE — Breadth History Chart
   ========================================================= */
.breadth-history-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 16px 0 4px;
    min-height: 100px;
}
.bh-bar-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 1;
    cursor: default;
}
.bh-bar {
    width: 100%;
    min-height: 4px;
    border-radius: 3px 3px 0 0;
    transition: opacity 0.15s;
}
.bh-bar-wrap:hover .bh-bar { opacity: 0.75; }
.bh-pct  { font-size: 10px; font-weight: 600; }
.bh-date { font-size: 9px; }
.bh-legend {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 4px 0 0;
    font-size: 11px;
    flex-wrap: wrap;
}

/* =========================================================
   SCAN DIFF WIDGET — "What's New" strip on /scans
   ========================================================= */
.scan-diff-widget {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 13px;
}
.sdw-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.sdw-title   { font-weight: 600; color: var(--text); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.sdw-close   { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; }
.sdw-close:hover { color: var(--text); }
.sdw-body    { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.sdw-group   { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sdw-group-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; }
.sdw-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.sdw-pill-new      { background: rgba(63,185,80,0.12); color: var(--green); border: 1px solid rgba(63,185,80,0.25); }
.sdw-pill-new:hover { background: rgba(63,185,80,0.2); }
.sdw-pill-improved { background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent-ring); }
.sdw-pill-improved:hover { background: rgba(212, 168, 87, 0.22); }
.sdw-pill-exit     { background: var(--bg3); border: 1px solid var(--border); }
.sdw-gate  { font-size: 9px; background: rgba(63,185,80,0.2); color: var(--green); padding: 0 3px; border-radius: 3px; }
.sdw-score { font-size: 10px; color: var(--text-muted); }
.sdw-delta { font-size: 10px; font-weight: 700; }

/* =========================================================
   WATCHLIST — Price Alerts
   ========================================================= */
.pa-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
}
.pa-input {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 13px;
    padding: 5px 10px;
    outline: none;
    transition: border-color 0.15s;
}
.pa-input:focus { border-color: var(--accent); }
.pa-select { cursor: pointer; }
.pa-form-msg { min-width: 80px; }

.pa-group-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent);
    padding: 4px 0 2px;
}
.pa-list-inner {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.pa-row {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: 13px;
}
.pa-row-triggered { opacity: 0.55; }
.pa-ticker { font-weight: 700; min-width: 48px; }
.pa-ticker a { color: var(--accent); text-decoration: none; }
.pa-dir  { min-width: 50px; font-size: 11px; }
.pa-price { min-width: 60px; font-variant-numeric: tabular-nums; }
.pa-note { flex: 1; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-del {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
    margin-left: auto;
}
.pa-del:hover { color: var(--red); }
.btn-icon { background: none; border: none; cursor: pointer; }

/* =========================================================
   MARKET PAGE — Sector ETF Rotation Table
   ========================================================= */
.sector-etf-table {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 8px;
}
.set-header-row,
.set-row {
    display: grid;
    grid-template-columns: 140px 1fr 52px 52px 60px 52px 28px;
    align-items: center;
    gap: 4px;
    padding: 5px 8px;
    border-radius: 5px;
}
.set-header-row {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.set-row {
    font-size: 13px;
    background: var(--bg2);
    transition: background 0.12s;
}
.set-row:hover { background: var(--bg3); }

.set-col-name {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.set-ticker {
    font-weight: 700;
    font-size: 13px;
    color: var(--accent);
    text-decoration: none;
}
.set-ticker:hover { text-decoration: underline; }
.set-sector-name { font-size: 10px; }

.set-col-bar { padding: 0 4px; }
.set-bar-track {
    position: relative;
    height: 6px;
    background: var(--bg3);
    border-radius: 3px;
    overflow: hidden;
}
.set-bar-center {
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 100%;
    background: var(--border);
}
.set-bar-fill {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 2px;
}
.set-bar-pos { background: var(--green); opacity: 0.7; }
.set-bar-neg { background: var(--red);   opacity: 0.7; }

.set-col-stat { text-align: right; font-size: 12px; }
.set-col-sma  { display: flex; align-items: center; justify-content: center; }
.sma-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.sma-dot.green { background: var(--green); }
.sma-dot.red   { background: var(--red); }

.set-legend {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 6px 0 0;
    font-size: 11px;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .set-header-row,
    .set-row {
        grid-template-columns: 110px 1fr 44px 44px 50px;
    }
    .set-header-row .set-col-stat:nth-child(5),
    .set-row .set-col-stat:nth-child(5),
    .set-header-row .set-col-sma,
    .set-row .set-col-sma { display: none; }
}

/* ── Pre-Market Dashboard ─────────────────────────────────────────── */
.row-watchlist {
    background: rgba(210, 153, 34, 0.05);
}
.row-watchlist:hover {
    background: rgba(210, 153, 34, 0.10) !important;
}
.pm-refresh-badge {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--text-dim);
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 8px;
    vertical-align: middle;
}

/* ── A05: Sector rotation 4-week RS slope ─────────────────────────── */
.rs-delta-up { color: var(--green); }
.rs-delta-dn { color: var(--red); }
.trend-arrow-up { color: var(--green); font-weight: 700; }
.trend-arrow-dn { color: var(--red); font-weight: 700; }

/* ── D06: Visited-row highlight after back-navigation ─────────────── */
.row-visited { border-left: 2px solid var(--accent); background: var(--accent-soft); }

/* ── A07: Weinstein Stage badges ─────────────────────────────────── */
.badge-w1 { background: rgba(88,166,255,0.1); color: #58a6ff; border: 1px solid rgba(88,166,255,0.3); font-size:0.68rem; padding:1px 5px; border-radius:3px; font-weight:600; }
.badge-w2 { background: rgba(63,185,80,0.15); color: #3fb950; border: 1px solid rgba(63,185,80,0.4); font-size:0.68rem; padding:1px 5px; border-radius:3px; font-weight:600; }
.badge-w3 { background: rgba(210,153,34,0.15); color: #d29922; border: 1px solid rgba(210,153,34,0.4); font-size:0.68rem; padding:1px 5px; border-radius:3px; font-weight:600; }
.badge-w4 { background: rgba(248,81,73,0.1); color: #f85149; border: 1px solid rgba(248,81,73,0.3); font-size:0.68rem; padding:1px 5px; border-radius:3px; font-weight:600; }

/* ── A08: A/D Rating badges ──────────────────────────────────────── */
.badge-ad-a { background: rgba(63,185,80,0.15); color: #3fb950; border: 1px solid rgba(63,185,80,0.4); font-size:0.68rem; padding:1px 5px; border-radius:3px; }
.badge-ad-b { background: rgba(88,166,255,0.1); color: #58a6ff; border: 1px solid rgba(88,166,255,0.3); font-size:0.68rem; padding:1px 5px; border-radius:3px; }
.badge-ad-c { color: #8b949e; font-size:0.68rem; }
.badge-ad-de { background: rgba(248,81,73,0.1); color: #f85149; border: 1px solid rgba(248,81,73,0.3); font-size:0.68rem; padding:1px 5px; border-radius:3px; }
.badge-dist-days { color: #f85149; font-size:0.68rem; font-weight:700; margin-left:2px; }

/* ── D07: HTMX loading state for scans results ───────────────────── */
#results-section.htmx-request { opacity: 0.45; pointer-events: none; transition: opacity 120ms ease; }

/* ── D08: Column density ─────────────────────────────────────────── */
.col-tertiary { color: var(--text-muted); font-size: 0.72rem; }
@media (max-width: 1280px) { .col-tertiary { display: none; } }
#scan-results-table.dense .col-tertiary,
#scan-results-table.dense .col-secondary { display: table-cell !important; }

/* Column group separators — visual grouping when dense mode is active */
#scan-results-table.dense th:nth-child(7),
#scan-results-table.dense td:nth-child(7),
#scan-results-table.dense th:nth-child(13),
#scan-results-table.dense td:nth-child(13),
#scan-results-table.dense th:nth-child(18),
#scan-results-table.dense td:nth-child(18) {
    border-left: 1px solid var(--border);
    padding-left: 10px;
}

/* ── D09: Chart loading skeleton ─────────────────────────────────── */
#lw-chart:empty,
#lw-volume:empty,
#lw-rs:empty,
#lw-rsi-ind:empty,
#lw-macd:empty {
    background: linear-gradient(
        90deg,
        var(--bg2) 0%,
        var(--bg3) 40%,
        rgba(30,38,64,0.8) 50%,
        var(--bg3) 60%,
        var(--bg2) 100%
    );
    background-size: 800px 100%;
    animation: shimmer 1.6s linear infinite;
    border-radius: 0;
}

/* Q14 — SPY data missing RS badge */
.badge-spy-na { color: var(--text-muted); font-style: italic; font-size: 0.75rem; }

/* A10 — Industry signal cluster chip (PP/RS-NH/VCP count badge) */
.sector-signal-chip {
    display: inline-block;
    background: rgba(230,168,23,0.1);
    color: var(--accent);
    border: 1px solid rgba(230,168,23,0.3);
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 1px 5px;
    text-decoration: none;
    white-space: nowrap;
}
.sector-signal-chip:hover { background: rgba(230,168,23,0.2); }

/* A11 — Failed Breakout badge */
.badge-failed-bo {
  background: rgba(248,81,73,0.18);
  color: var(--red);
  border: 1px solid rgba(248,81,73,0.35);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.03em;
}

/* A12 — Pivot Health Card */
.pivot-health-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
    margin: 14px 0;
}
.pivot-health-card .card-header {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}
.pivot-health-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    padding: 0.75rem 0 0;
}
.ph-stat { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.ph-label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ph-value { font-size: 1.1rem; font-weight: 600; }
@media (max-width: 600px) { .pivot-health-grid { grid-template-columns: repeat(2, 1fr); } }

.badge-synthetic-rs {
  font-size: 0.65rem;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 4px;
  vertical-align: middle;
  font-style: italic;
  margin-left: 3px;
}

/* ── Preset overflow disclosure (D13) ───────────────────────────────────── */
.preset-overflow {
  display: inline-flex;
  align-items: center;
}
.preset-overflow > summary {
  font-size: 0.8rem;
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
  padding: 4px 8px;
  list-style: none;
}
.preset-overflow > summary::-webkit-details-marker { display: none; }
.preset-overflow[open] .preset-strip-overflow {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.preset-strip-overflow { display: none; }

/* ── Scan-age inline tag (D15) ──────────────────────────────────────────── */
.scan-age-tag {
  font-size: 0.72rem;
  padding: 2px 7px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 0.5rem;
}
.scan-age-ok { background: rgba(63,185,80,0.12); color: var(--green); }
.scan-age-warn { background: rgba(210,153,34,0.15); color: var(--yellow); }
.scan-age-stale { background: rgba(248,81,73,0.15); color: var(--red); }

/* ── A13: Weekly signal badges (scans table) ────────────────────────────── */
.badge-weekly-g { background: rgba(63,185,80,0.15); color: var(--green); border: 1px solid rgba(63,185,80,0.3); font-size: 0.7rem; font-weight: 700; padding: 1px 5px; border-radius: 3px; }
.badge-weekly-r { background: rgba(248,81,73,0.15); color: var(--red); border: 1px solid rgba(248,81,73,0.3); font-size: 0.7rem; font-weight: 700; padding: 1px 5px; border-radius: 3px; }
.badge-weekly-y { background: rgba(210,153,34,0.12); color: var(--yellow); border: 1px solid rgba(210,153,34,0.3); font-size: 0.7rem; font-weight: 700; padding: 1px 5px; border-radius: 3px; }

/* ── A13: Weekly Structure card (symbol page) ───────────────────────────── */
.card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; margin: 14px 0; }
.card-header { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.weekly-analysis-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; padding: 0.75rem 0 0; }
.wa-stat { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
.wa-label { font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.wa-value { font-size: 1rem; font-weight: 600; }

/* ── Q22: Zero-results differentiation (scans empty state) ─────────────── */
.empty-title { font-size: 1.05rem; font-weight: 600; color: var(--text); margin: 0.5rem 0 0.25rem; }
.empty-sub { font-size: 0.875rem; color: var(--text-muted); max-width: 480px; margin: 0 auto 0.5rem; line-height: 1.5; }

/* ── D17: Watchlist rows with no scan data — visual communication ──────── */
tr[data-no-scan="1"] td { opacity: 0.45; }
tr[data-no-scan="1"]:hover td { opacity: 0.65; }

/* ── D18: Symbol stats bar — group dividers ────────────────────────────── */
.stat-group-break {
  width: 1px;
  height: 28px;
  background: var(--border);
  margin: 0 8px;
  flex-shrink: 0;
  opacity: 0.6;
  align-self: center;
}

/* ── Q25: Results truncation disclosure ────────────────────────────────── */
.truncation-notice {
  font-size: 0.75rem;
  color: var(--yellow);
  margin-left: 0.5rem;
  cursor: help;
}
.skip-notice { font-size: 0.73rem; color: var(--text-muted); margin-left: 0.5rem; }
.skip-notice-warn { color: var(--yellow); }

/* ── Q28: Stale data hard wall (>24h on /scans) + readiness caveat (>48h on /symbol) ── */
.stale-data-wall {
  background: rgba(248,81,73,0.1);
  border: 1px solid rgba(248,81,73,0.4);
  border-radius: var(--radius);
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  color: var(--text);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.stale-wall-icon { font-size: 1.2rem; }
.stale-wall-trigger {
  margin-left: auto;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.stale-wall-trigger:hover { text-decoration: underline; }
.badge-stale-data {
  background: rgba(248,81,73,0.12);
  color: var(--red);
  border: 1px solid rgba(248,81,73,0.3);
  font-size: 0.65rem;
  padding: 1px 5px;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 4px;
}

/* A17: Vol Pace badges */
.badge-vol-pace-high {
  background: rgba(63, 185, 80, 0.15);
  color: #3fb950;
  border: 1px solid rgba(63, 185, 80, 0.4);
  font-weight: 600;
}
.badge-vol-pace-mid {
  background: rgba(210, 153, 34, 0.12);
  color: #d29922;
  border: 1px solid rgba(210, 153, 34, 0.3);
}
.badge-vol-pace-low {
  background: rgba(248, 81, 73, 0.12);
  color: #f85149;
  border: 1px solid rgba(248, 81, 73, 0.3);
}
.badge-vol-pace-na {
  background: rgba(139, 148, 158, 0.1);
  color: #8b949e;
  border: 1px solid rgba(139, 148, 158, 0.2);
}

/* A16: Setup Age badges */
.badge-age-ok {
  background: rgba(88, 166, 255, 0.12);
  color: #58a6ff;
  border: 1px solid rgba(88, 166, 255, 0.3);
}
.badge-age-warn {
  background: rgba(210, 153, 34, 0.15);
  color: #d29922;
  border: 1px solid rgba(210, 153, 34, 0.4);
  font-weight: 600;
}
.badge-age-stale {
  background: rgba(248, 81, 73, 0.12);
  color: #f85149;
  border: 1px solid rgba(248, 81, 73, 0.3);
  font-weight: 600;
}

/* Phase 11: RS new-high streak badge */
.badge-rs-streak {
  background: rgba(63, 185, 80, 0.22);
  color: var(--green);
  border: 1px solid rgba(63, 185, 80, 0.5);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.03em;
  vertical-align: middle;
  margin-left: 3px;
}
.badge-rs-streak-2 {
  background: rgba(63, 185, 80, 0.12);
  border-color: rgba(63, 185, 80, 0.3);
  opacity: 0.8;
}

/* Phase 11: Multi-timeframe confluence badge */
.badge-confluence {
  background: rgba(63, 185, 80, 0.18);
  color: var(--green);
  border: 1px solid rgba(63, 185, 80, 0.4);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  vertical-align: middle;
  margin-left: 3px;
}

/* Phase 13: Base count badges */
.badge-base-1 {
  background: rgba(63, 185, 80, 0.15);
  color: var(--green);
  border: 1px solid rgba(63, 185, 80, 0.4);
  font-size: 0.68rem; font-weight: 700;
  padding: 1px 6px; border-radius: 4px; vertical-align: middle;
}
.badge-base-2 {
  background: rgba(210, 153, 34, 0.15);
  color: var(--yellow);
  border: 1px solid rgba(210, 153, 34, 0.35);
  font-size: 0.68rem; font-weight: 700;
  padding: 1px 6px; border-radius: 4px; vertical-align: middle;
}
.badge-base-late {
  background: rgba(248, 81, 73, 0.12);
  color: var(--red);
  border: 1px solid rgba(248, 81, 73, 0.35);
  font-size: 0.68rem; font-weight: 700;
  padding: 1px 6px; border-radius: 4px; vertical-align: middle;
}

/* Phase 13: Volume surge badges */
.badge-vol-surge {
  background: rgba(212, 168, 87, 0.22);
  color: var(--accent);
  border: 1px solid rgba(212, 168, 87, 0.5);
  font-size: 0.68rem; font-weight: 700;
  padding: 1px 6px; border-radius: 4px;
  letter-spacing: 0.04em; vertical-align: middle;
}
.badge-vol-up {
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid var(--accent-ring);
  font-size: 0.68rem; font-weight: 600;
  padding: 1px 6px; border-radius: 4px;
  letter-spacing: 0.04em; vertical-align: middle;
  opacity: 0.85;
}
.badge-pp {
  background: rgba(210, 153, 34, 0.18);
  color: var(--yellow);
  border: 1px solid rgba(210, 153, 34, 0.4);
  font-size: 0.68rem; font-weight: 700;
  padding: 1px 6px; border-radius: 4px;
  letter-spacing: 0.04em; vertical-align: middle;
}

/* Phase 12: Historical result banner on /symbol */
.hist-result-banner {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: rgba(210,153,34,.08); border: 1px solid rgba(210,153,34,.3);
  border-radius: var(--radius); padding: 9px 14px;
  font-size: 12px; color: var(--text-muted); margin-bottom: 12px;
}
.hist-result-banner svg { color: var(--yellow); flex-shrink: 0; }
.hist-result-banner strong { color: var(--yellow); }
.hist-result-link {
  margin-left: auto; color: var(--accent); font-weight: 600;
  text-decoration: none; white-space: nowrap;
}
.hist-result-link:hover { text-decoration: underline; }

/* Phase 12: Setup conviction score pill */
.conviction-pill {
  display: inline-block;
  font-size: 0.67rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.03em;
  vertical-align: middle;
  line-height: 1.4;
  white-space: nowrap;
  cursor: default;
}
.conviction-high {
  background: rgba(63, 185, 80, 0.18);
  color: var(--green);
  border: 1px solid rgba(63, 185, 80, 0.45);
}
.conviction-mid {
  background: rgba(210, 153, 34, 0.16);
  color: var(--yellow);
  border: 1px solid rgba(210, 153, 34, 0.35);
}
.conviction-low {
  background: rgba(139, 148, 158, 0.12);
  color: var(--text-muted);
  border: 1px solid rgba(139, 148, 158, 0.2);
}

/* Q33: Failed scan notice */
.failed-scan-notice {
  background: rgba(248, 81, 73, 0.08);
  border: 1px solid rgba(248, 81, 73, 0.35);
  border-radius: var(--radius);
  padding: 10px 16px;
  color: var(--text);
  font-size: var(--fs-sm);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.failed-scan-trigger {
  margin-left: auto;
  color: var(--accent);
  white-space: nowrap;
}

/* A18: Distribution Day Regime Gate */
.dist-gate-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: var(--radius);
  margin-bottom: 12px;
  font-size: var(--fs-sm);
  font-weight: 500;
}
.dist-gate-warn {
  background: rgba(210, 153, 34, 0.12);
  border: 1px solid rgba(210, 153, 34, 0.4);
  color: var(--text);
}
.dist-gate-restrict {
  background: rgba(248, 81, 73, 0.1);
  border: 1px solid rgba(248, 81, 73, 0.4);
  color: var(--text);
}
.dist-gate-icon {
  font-weight: 700;
  font-size: var(--fs-base);
  flex-shrink: 0;
}
.dist-gate-msg {
  flex: 1;
}
.dist-gate-dismiss {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0 4px;
  flex-shrink: 0;
}
.dist-gate-dismiss:hover { color: var(--text); }

/* Timestamp precision styling */
.staleness-abs {
  font-weight: 600;
  text-decoration: underline dotted rgba(139, 148, 158, 0.5);
  cursor: help;
}
.staleness-rel {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* D21: Mobile card layout for scans table at 480px */
@media (max-width: 480px) {
    .table-wrap {
        overflow-x: visible;
        border: none;
        background: transparent;
        border-radius: 0;
        max-height: none;
    }
    #scan-results-table {
        min-width: unset;
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 6px;
    }
    #scan-results-table thead {
        display: none;
    }
    #scan-results-table tbody tr {
        display: grid;
        grid-template-columns: 26px 1fr 124px;
        grid-template-rows: auto auto auto;
        gap: 3px 10px;
        background: var(--bg2);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        padding: 10px 12px;
        margin-bottom: 6px;
    }
    /* Star/watchlist cell: col 1, spans all rows */
    #scan-results-table tbody tr td:nth-child(1) {
        grid-row: 1 / 4;
        grid-column: 1;
        align-self: center;
        padding: 0;
        border: none;
        text-align: center;
    }
    /* Ticker cell: row 1 col 2 */
    #scan-results-table tbody tr td:nth-child(2) {
        grid-row: 1;
        grid-column: 2;
        padding: 0;
        border: none;
        font-weight: 600;
        font-size: var(--fs-base);
        text-align: left;
    }
    /* Score cell (6th column): row 2 col 2 */
    #scan-results-table tbody tr td:nth-child(6) {
        grid-row: 2;
        grid-column: 2;
        padding: 0;
        border: none;
        text-align: left;
    }
    /* Pattern cell (10th column): row 3 col 2 */
    #scan-results-table tbody tr td:nth-child(10) {
        grid-row: 3;
        grid-column: 2;
        padding: 0;
        border: none;
        font-size: var(--fs-xs);
        color: var(--text-muted);
        text-align: left;
    }
    /* Ready/readiness cell (12th column): row 3 col 3 (under chart) */
    #scan-results-table tbody tr td:nth-child(12) {
        grid-row: 3;
        grid-column: 3;
        padding: 0;
        border: none;
        font-size: var(--fs-xs);
        text-align: right;
        align-self: center;
    }
    /* Chart/sparkline cell (11th column): col 3 spanning rows 1-2 — where the
       old gold score box used to be. The candlestick mini-chart now lives here. */
    #scan-results-table tbody tr td:nth-child(11) {
        display: block;
        grid-row: 1 / 3;
        grid-column: 3;
        padding: 0;
        border: none;
        align-self: center;
        justify-self: end;
        width: 124px;
        min-width: 124px;
    }
    #scan-results-table tbody tr td:nth-child(11) svg {
        display: block;
        width: 124px;
        height: 46px;
    }
    /* Daily mini-chart (11th column): full-width row below the card body */
    #scan-results-table tbody tr td:nth-child(11) {
        grid-row: 3;
        grid-column: 1 / -1;
        display: block;
        width: 100%;
        padding: 6px 0 0;
        margin-top: 4px;
        border: none;
        border-top: 1px solid var(--border-soft);
        text-align: center;
    }
    #scan-results-table tbody tr td:nth-child(11) svg {
        width: 100%;
        max-width: 280px;
        height: 40px;
        display: inline-block;
    }
    /* Hide all other cells */
    #scan-results-table tbody tr td:nth-child(3),
    #scan-results-table tbody tr td:nth-child(4),
    #scan-results-table tbody tr td:nth-child(5),
    #scan-results-table tbody tr td:nth-child(7),
    #scan-results-table tbody tr td:nth-child(8),
    #scan-results-table tbody tr td:nth-child(9),
    #scan-results-table tbody tr td:nth-child(13),
    #scan-results-table tbody tr td:nth-child(14),
    #scan-results-table tbody tr td:nth-child(15),
    #scan-results-table tbody tr td:nth-child(16),
    #scan-results-table tbody tr td:nth-child(17),
    #scan-results-table tbody tr td:nth-child(18),
    #scan-results-table tbody tr td:nth-child(19),
    #scan-results-table tbody tr td:nth-child(20),
    #scan-results-table tbody tr td:nth-child(21),
    #scan-results-table tbody tr td:nth-child(22) {
        display: none;
    }
    /* Kill the heatmap inline background (JS sets it inline) on mobile cards */
    #scan-results-table tbody tr td {
        position: static !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    #scan-results-table tbody tr:hover td,
    #scan-results-table tbody tr:hover td:nth-child(1),
    #scan-results-table tbody tr:hover td:nth-child(2) {
        background: transparent;
    }
    /* Score ring: shrink on mobile */
    #scan-results-table .score-ring {
        width: 32px;
        height: 32px;
        font-size: 10px;
    }
}

/* A15: Volume Profile card */
.vol-profile-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 16px;
}
.vol-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin-top: 12px;
}
.vp-stat { display: flex; flex-direction: column; gap: 4px; }
.vp-label { font-size: var(--fs-xs); color: var(--text-muted); }

/* N04: Pyramid Add Signal badges */
.badge-add-zone {
  font-size: 0.68rem;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
}
.badge-add-high {
  background: rgba(63, 185, 80, 0.15);
  color: #3fb950;
  border: 1px solid rgba(63, 185, 80, 0.4);
  font-weight: 700;
}
.badge-add-medium {
  background: rgba(210, 153, 34, 0.12);
  color: #d29922;
  border: 1px solid rgba(210, 153, 34, 0.3);
}
.vp-value { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }

/* N03: Breakout Health card */
.bo-health-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 16px;
}
.bo-health-grid {
    display: flex;
    gap: 24px;
    margin-top: 12px;
    flex-wrap: wrap;
}
.boh-stat { display: flex; flex-direction: column; gap: 4px; }
.boh-label { font-size: var(--fs-xs); color: var(--text-muted); }
.boh-value { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.bo-health-working {
    background: rgba(63, 185, 80, 0.15);
    color: #3fb950;
    border: 1px solid rgba(63, 185, 80, 0.4);
}
.bo-health-weakening {
    background: rgba(210, 153, 34, 0.15);
    color: #d29922;
    border: 1px solid rgba(210, 153, 34, 0.4);
}
.bo-health-failed {
    background: rgba(248, 81, 73, 0.12);
    color: #f85149;
    border: 1px solid rgba(248, 81, 73, 0.3);
}
.bo-health-too_early {
    background: rgba(88, 166, 255, 0.12);
    color: #58a6ff;
    border: 1px solid rgba(88, 166, 255, 0.3);
}

/* ── Auth Pages (login/signup/account) ────────────────────────────────── */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 60vh;
    padding: 40px 16px;
}
.auth-card {
    background:
      radial-gradient(600px 200px at 50% 0%, rgba(212,168,87,0.06), transparent 70%),
      var(--bg2);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) * 1.5);
    padding: 36px 32px 32px;
    width: 100%;
    max-width: 480px;
    box-shadow: var(--shadow-lg);
}
.auth-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    text-align: center;
}
.auth-mentor-strip {
    display: inline-flex;
    gap: 6px;
    margin-bottom: 8px;
}
.auth-mentor-portrait {
    display: inline-flex;
    width: 32px; height: 32px;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid var(--accent-ring);
    background: var(--bg3);
    box-shadow: 0 0 0 1px rgba(212,168,87,0.1);
}
.auth-mentor-portrait img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 22%;
    display: block;
}
/* Legacy logo-dot-lg kept (no longer used after hero strip update) */
.logo-dot-lg { display: none; }
.auth-title {
    font-size: clamp(28px, 4vw, 36px);
    margin: 0;
    line-height: 1.1;
}
.auth-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    font-family: var(--font-display);
    font-style: italic;
    line-height: 1.55;
    max-width: 360px;
    margin: 0 auto;
}
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--text-muted);
}
.form-input {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: var(--fs-base);
    padding: 10px 12px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 120ms;
    font-family: inherit;
}
.form-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.form-input::placeholder { color: var(--text-dim); }
.form-hint { font-size: var(--fs-xs); color: var(--text-dim); }
.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-dim);
    font-size: var(--fs-xs);
    margin: 4px 0;
}
.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}
.auth-footer {
    margin-top: 20px;
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.auth-footer a { color: var(--accent); }
.auth-footer a:hover { color: var(--accent-hover); }
.auth-link { color: var(--accent); font-weight: 600; }
.auth-link:hover { color: var(--accent-hover); }
.auth-terms {
    font-size: var(--fs-xs);
    color: var(--text-dim);
    text-align: center;
    line-height: 1.5;
    margin-top: 4px;
}
.btn-block {
    width: 100%;
    justify-content: center;
    padding: 12px;
    font-size: var(--fs-base);
}
/* Overlapping avatar stack for auth portrait strip */
.auth-mentor-strip {
    display: inline-flex;
    gap: 0;
}
.auth-mentor-portrait {
    margin-left: -8px;
    transition: transform 0.2s ease;
    box-shadow: 0 0 0 2px var(--bg2);
}
.auth-mentor-portrait:first-child { margin-left: 0; }
.auth-mentor-portrait:hover { transform: translateY(-3px) scale(1.1); z-index: 2; }
.alert {
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: var(--fs-sm);
    margin-bottom: 8px;
}
.alert-error {
    background: rgba(248, 81, 73, 0.12);
    color: var(--red);
    border: 1px solid rgba(248, 81, 73, 0.3);
}
.alert-success {
    background: rgba(63, 185, 80, 0.12);
    color: var(--green);
    border: 1px solid rgba(63, 185, 80, 0.3);
}
.btn-full { width: 100%; text-align: center; }

/* ── Account / Subscription Page ─────────────────────────────────────── */
.account-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}
@media (max-width: 640px) {
    .account-grid { grid-template-columns: 1fr; }
}
.account-section {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
}
.account-section-title {
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--text);
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-soft);
}
.kv-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: var(--fs-sm);
}
.kv-row:last-child { border-bottom: none; }
.kv-label { color: var(--text-muted); }
.kv-value { color: var(--text); font-weight: 500; }

/* ── Tier Badges ─────────────────────────────────────────────────────── */
.badge-tier {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 3px;
    text-transform: uppercase;
}
.badge-tier-pro {
    background: rgba(230, 168, 23, 0.18);
    color: var(--accent);
    border: 1px solid rgba(230, 168, 23, 0.45);
}
.badge-tier-free {
    background: var(--bg3);
    color: var(--text-dim);
    border: 1px solid var(--border);
}
.nav-pro-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 1px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    background: rgba(230, 168, 23, 0.18);
    color: var(--accent);
    border: 1px solid rgba(230, 168, 23, 0.4);
    margin-left: 4px;
    vertical-align: middle;
}
.badge-green {
    background: rgba(63, 185, 80, 0.15);
    color: var(--green);
    border: 1px solid rgba(63, 185, 80, 0.4);
}
.badge-muted {
    background: var(--bg3);
    color: var(--text-dim);
    border: 1px solid var(--border);
}

/* ── Pricing / Subscribe Page ─────────────────────────────────────────── */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 24px;
}
.pricing-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) * 1.5);
    padding: 28px;
}
.pricing-card.pricing-featured {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(230, 168, 23, 0.2), 0 8px 32px rgba(0,0,0,0.4);
}
.pricing-price {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--text);
}
.pricing-price sup { font-size: 20px; vertical-align: top; margin-top: 8px; }
.pricing-period { font-size: var(--fs-sm); color: var(--text-muted); }
.pricing-features { margin: 20px 0; list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pricing-features li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-sm); color: var(--text-muted); }
.pricing-features li::before { content: '✓'; color: var(--green); flex-shrink: 0; }

/* ── Growth / Conversion ───────────────────────────────────────────── */
.free-tier-notice {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-soft);
    border: 1px solid var(--accent-ring);
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
    cursor: help;
}

.paywall-peek {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
  position: relative;
}
.paywall-peek::after {
  content: 'Upgrade to unlock';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: .05em;
  text-transform: uppercase;
  pointer-events: none;
}
.paywall-peek-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 12px;
  filter: blur(4px);
  user-select: none;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
}
.paywall-peek-row:last-child { border-bottom: none; }
.ppk-lock { font-size: 10px; }
.ppk-ticker { font-weight: 700; color: var(--text); font-family: var(--font-mono); min-width: 52px; }
.ppk-pattern { color: var(--text-muted); flex: 1; }
.ppk-score { font-family: var(--font-mono); color: var(--accent); }
.ppk-more { font-size: 10px; color: var(--text-muted); margin-left: auto; display: none; }
.paywall-peek-row:last-child .ppk-more { display: block; }

.paywall-teaser {
    margin: 24px 0;
    padding: 40px 24px;
    background: linear-gradient(135deg, var(--bg2) 0%, var(--bg3) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.paywall-teaser::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center, var(--accent-soft) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0.5;
}

.paywall-teaser-content {
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 0 auto;
}

.paywall-teaser-title {
    font-size: var(--fs-xl);
    font-weight: 800;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

.paywall-teaser-sub {
    font-size: var(--fs-md);
    color: var(--text-muted);
    margin-bottom: 24px;
    line-height: 1.6;
}

.paywall-teaser-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .paywall-teaser { padding: 32px 16px; }
    .paywall-teaser-title { font-size: var(--fs-lg); }
    .paywall-teaser-sub { font-size: var(--fs-base); }
}

/* ── Paywall & Blurring (GROWTH) ── */
.gated-content {
    position: relative;
    overflow: hidden;
}
.gated-blur {
    filter: blur(8px);
    pointer-events: none;
    user-select: none;
    opacity: 0.6;
    transition: filter 0.3s ease;
}
.paywall-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, transparent, var(--bg2) 85%);
    z-index: 100;
    padding: 24px;
    text-align: center;
}
.paywall-overlay-compact {
    background: rgba(15, 20, 32, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.paywall-overlay-compact .paywall-cta {
    padding: 10px 14px;
    max-width: 320px;
}
.paywall-overlay-compact .paywall-cta p {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.35;
}
.paywall-cta {
    background: var(--bg3);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    padding: 20px 24px;
    box-shadow: var(--shadow-lg);
    max-width: 360px;
    animation: fadeIn 0.4s ease-out;
}
.paywall-cta h4 {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--accent);
    margin-bottom: 8px;
}
.paywall-cta p {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 16px;
    line-height: 1.4;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Legend Context Bar (scans page, when filtered by legend) ──────────── */
.legend-context-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
    background: linear-gradient(135deg, var(--bg2) 0%, rgba(255,255,255,.015) 100%);
    border: 1px solid var(--border);
    border-left: 3px solid var(--lc-color, var(--accent));
    border-radius: var(--radius);
    margin-bottom: 16px;
    animation: fadeIn 0.3s ease-out;
}
.lc-portrait {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 15%;
    border: 2px solid var(--lc-color, var(--border));
    flex-shrink: 0;
}
.lc-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}
.lc-nick {
    font-size: 12px;
    font-weight: 700;
    color: var(--lc-color, var(--accent));
    font-family: var(--font-display);
    font-style: italic;
}
.lc-method {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lc-link, .lc-chat {
    font-size: 11px;
    font-weight: 600;
    color: var(--lc-color, var(--accent));
    text-decoration: none;
    padding: 5px 10px;
    border: 1px solid currentColor;
    border-radius: 5px;
    opacity: 0.7;
    transition: opacity 0.15s, background 0.15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.lc-link:hover, .lc-chat:hover {
    opacity: 1;
    background: rgba(255,255,255,.04);
    text-decoration: none;
}
@media (max-width: 640px) {
    .legend-context-bar { flex-wrap: wrap; }
    .lc-method { white-space: normal; }
}

/* ── Portrait Hero (landing page grayscale→color cards) ────────────────── */
/* (Styles are inlined in landing.html for standalone page — no changes needed) */

/* ── Settings Page ──────────────────────────────────────────────────────── */
.settings-add-row {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    align-items: flex-end;
}
.settings-stats-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.settings-stat-card {
    flex: 1;
    min-width: 130px;
    text-align: center;
    padding: 1rem;
}
.settings-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}
.settings-stat-label {
    font-size: .8rem;
    color: var(--text-muted);
    margin-top: .35rem;
}
.settings-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .75rem;
    flex-wrap: wrap;
    gap: .5rem;
}
.settings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .87rem;
}
.settings-table th {
    text-align: left;
    padding: .5rem .75rem .5rem 0;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.settings-table td {
    padding: .45rem .75rem .45rem 0;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.settings-table tr:last-child td { border-bottom: none; }

/* ── Filter summary line (scans.html) ─────────────────── */
.filter-summary-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--text-muted);
}
.filter-summary-tag {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 7px;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}
.filter-summary-sep {
    color: var(--border);
    font-size: 10px;
}

/* ── Destructive button ────────────────────────────────── */
.btn-danger {
    background: rgba(248, 81, 73, 0.12);
    border: 1px solid rgba(248, 81, 73, 0.35);
    color: var(--red);
}
.btn-danger:hover {
    background: rgba(248, 81, 73, 0.22);
    border-color: var(--red);
    color: var(--red);
}

/* ── Regime banner — inline distribution days tag ─────── */
.regime-dist-tag {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 3px;
    letter-spacing: .04em;
    font-family: var(--font-mono);
    white-space: nowrap;
    margin-left: 6px;
    vertical-align: middle;
}
.regime-dist-warn {
    background: rgba(210,153,34,.18);
    color: var(--yellow);
    border: 1px solid rgba(210,153,34,.4);
}
.regime-dist-restrict {
    background: rgba(248,81,73,.18);
    color: var(--red);
    border: 1px solid rgba(248,81,73,.4);
}

/* ── Inline glossary tooltips (.gl-term) ───────────────── */
/*
  Usage: <span class="gl-term" data-tip="definition text">TERM</span>
  Pure CSS — no JS. Tooltip appears above on hover.
*/
.gl-term {
    border-bottom: 1px dashed var(--accent);
    cursor: help;
    position: relative;
    display: inline;
    white-space: nowrap;
}
.gl-term::after {
    content: attr(data-tip);
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text);
    width: min(260px, calc(100vw - 24px));
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 9999;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.gl-term:hover::after,
.gl-term:focus-visible::after {
    display: block;
    opacity: 1;
}
/* Prevent tooltip clipping at page edges */
.gl-term.gl-tip-left::after  { left: 0;   transform: none; }
.gl-term.gl-tip-right::after { left: auto; right: 0; transform: none; }

/* =========================================================
   MOBILE OVERFLOW FIXES (session 6 — 2026-05-12)
   ========================================================= */

/* ── Academy portrait: Wyckoff face cut off ──────────────── */
.legend-wyckoff .academy-portrait img {
    object-position: center 15%;
}

/* ── Regime banner: wrap on narrow screens ───────────────── */
@media (max-width: 600px) {
    .regime-banner {
        flex-wrap: wrap;
        gap: 6px;
    }
    /* Hide SPY/QQQ price sub-line on tiny screens — it overflows */
    .regime-banner > .regime-banner-sub {
        display: none;
    }
    .regime-dist-tag {
        font-size: 9px;
        padding: 1px 5px;
    }
}

/* ── Market Health Trend bars: horizontal scroll ─────────── */
@media (max-width: 640px) {
    .breadth-history-chart {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .bh-bar-wrap {
        flex: 0 0 26px;
        min-width: 26px;
    }
    .scan-trend-chart {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .scan-trend-bar-wrap {
        flex: 0 0 26px;
        min-width: 26px;
    }
}

/* ── Admin cards: collapse 2-column grid to single column ─── */
.admin-2col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 640px) {
    .admin-2col-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Mobile scan card: hide secondary badges in ticker cell ── */
@media (max-width: 480px) {
    /* In the ticker cell (col 2), hide low-priority signal badges.
       NOTE: the A/D accumulation badge (.ad-scans-badge) is kept visible —
       it's a core Base-Finder "accumulation/distribution" signal. */
    #scan-results-table tbody tr td:nth-child(2) .stage-badge,
    #scan-results-table tbody tr td:nth-child(2) .badge-pt,
    #scan-results-table tbody tr td:nth-child(2) .badge-bluedot,
    #scan-results-table tbody tr td:nth-child(2) .badge-leader {
        display: none;
    }
    /* In pattern cell (col 10), hide only the least actionable badges.
       Vol↑ (HVF high-volume) and D+W confluence are Base-Finder signals and
       stay visible on mobile. */
    #scan-results-table tbody tr td:nth-child(10) .badge-age-ok,
    #scan-results-table tbody tr td:nth-child(10) .badge-vcp {
        display: none;
    }
    /* Tighten ticker cell flex gap */
    #scan-results-table tbody tr td:nth-child(2) > div:first-child {
        gap: 4px;
    }
}

/* ── Expert audit fixes (2026-05-12) ─────────────────────────────────────── */

/* Mentor chips: reserve the signed-in nav width for search and account controls. */
@media (max-width: 1100px) and (min-width: 769px) {
    .mentor-chips { display: none; }
}
@media (max-width: 768px) {
    .mentor-chips { display: none; }
}

/* Watchlist table: preserve horizontal scroll on tablet/mobile */
@media (max-width: 768px) {
    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Touch targets: ensure btn-sm meets 44px minimum on mobile */
@media (max-width: 768px) {
    .btn-sm {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        padding: 10px 14px;
    }
    /* Price alert form: full width on mobile */
    #price-alert-form {
        max-width: 100% !important;
    }
    #price-alert-form #alert-price,
    #price-alert-form #alert-note {
        width: 100% !important;
    }
    #price-alert-form > div:nth-child(2) {
        flex-direction: column;
    }
}

/* Game Plan card mobile: add spacing when stacked */
@media (max-width: 640px) {
    .gp-setup-box {
        margin-top: 12px;
    }
}

/* Mobile touch targets: .btn-xs and .btn-icon are under 44px — fix for touch devices */
@media (max-width: 768px) {
    .btn-xs {
        padding: 6px 10px;
        font-size: 12px;
        min-height: 32px;
    }
    .btn-icon {
        min-width: 36px;
        min-height: 36px;
        width: 36px;
        height: 36px;
    }
    /* Sticky symbol-page stat pills: bump touch height to WCAG-AA 44px so the
       horizontal scroll strip is comfortable on phones (Mobile audit 2026-05-16). */
    .stat-pill {
        min-height: 44px;
        padding: 8px 14px;
        justify-content: center;
    }
}

/* Small-phone pattern card overflow: stack to single column under 480px so
   the 320/340px minmax grid doesn't force horizontal scroll on iPhone SE / 12 mini.
   (Mobile audit 2026-05-16) */
@media (max-width: 480px) {
    .pattern-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ── Suppress duplicate TradingView attribution on multi-pane charts ── */
.chart-pane:not(:first-of-type) .tv-attribution,
.chart-pane:not(:first-child) .tv-attribution { display: none; }

/* ════════════════════════════════════════════════════════════════════════
   MOBILE POLISH — 2026-05-15
   All rules in this block are mobile-only (@media) or safe to add globally.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Form inputs: prevent iOS Safari auto-zoom (requires font-size ≥16px)
        and enforce 48px touch targets ── */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="search"],
    input[type="tel"],
    select,
    textarea {
        font-size: 16px !important;
        min-height: 48px;
        padding: 12px 14px;
    }
    select { padding: 12px 10px; }
    textarea { min-height: 80px; }
}

/* ── 2. Tap targets: raise commonly under-44px interactive elements ── */
@media (max-width: 768px) {
    .btn:not(.btn-icon) { min-height: 44px; }
    .preset-chip,
    .legend-tab,
    .filter-chip,
    .pill,
    .faq-q,
    summary { min-height: 44px; display: inline-flex; align-items: center; }
    /* Footer links */
    .footer-col a { min-height: 44px; display: inline-flex; align-items: center; }
    /* Watchlist star on scan rows */
    .wl-toggle { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ── 2b. Badge readability: 10px is too small on mobile — bump to 12px ── */
@media (max-width: 768px) {
    .pro-badge,
    .session-badge,
    .score-delta { font-size: 12px; }
}

/* ── 3. Sparkline column header: hide on mobile when sparkline cell is hidden ── */
@media (max-width: 768px) {
    th[title*="sparkline"],
    th[title*="mini-chart"] { display: none; }
}

/* ── 4. Mobile bottom tab bar ── */
.mobile-tabs { display: none; }
@media (max-width: 768px) {
    .mobile-tabs {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--bg2);
        border-top: 1px solid var(--border);
        padding: 6px 0 max(6px, env(safe-area-inset-bottom));
        justify-content: space-around;
        z-index: 100;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    .mobile-tabs a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        font-size: 10px;
        min-width: 52px;
        min-height: 52px;
        color: var(--text-muted);
        text-decoration: none;
        padding: 5px 4px;
        border-radius: 8px;
        transition: color 0.15s;
        justify-content: center;
    }
    .mobile-tabs .mt-icon { font-size: 17px; line-height: 1.2; }
    .mobile-tabs a.active { color: var(--accent); }
    .mobile-tabs a:hover { color: var(--text); }
    /* Prevent content from hiding under tab bar */
    body { padding-bottom: 72px; }
    body.auth-page { padding-bottom: 0; }
}

/* ── 5. Auth pages: compact footer on mobile ── */
@media (max-width: 768px) {
    body.auth-page .footer-row.footer-row-links { display: none; }
    body.auth-page footer { padding: 12px 16px; }
}

/* ── 6. Pricing: feature matrix scroll affordance ── */
.feature-matrix-scroll {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.feature-matrix-scroll::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 32px;
    background: linear-gradient(90deg, transparent, var(--bg));
    pointer-events: none;
    border-radius: 0 var(--radius) var(--radius) 0;
}
@media (max-width: 480px) {
    .feature-matrix-scroll::before {
        content: "← swipe to compare →";
        display: block;
        font-size: 11px;
        color: var(--text-muted);
        text-align: center;
        margin-bottom: 6px;
        font-style: italic;
    }
}

/* ── 7. Calendar grid: single column on mobile (class added in template) ── */
@media (max-width: 720px) {
    .cal-grid { grid-template-columns: 1fr !important; }
}

/* ── Table scroll wrapper (used on scans candidates table and similar) ── */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius);
}

/* ── 8. Body overflow guard: prevent any single element from causing horizontal page scroll ── */
@media (max-width: 768px) {
    body { overflow-x: hidden; }
}

/* ── 9. Scans: preset-strip + legend-strip scroll fade affordance ──
        The strips already scroll (overflow-x:auto) but have no visual cue.
        mask-image fades the right edge to signal "more content →"            ── */
@media (max-width: 768px) {
    .preset-strip,
    .legend-preset-strip {
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 44px), transparent 100%);
        mask-image: linear-gradient(to right, black calc(100% - 44px), transparent 100%);
    }
    /* When scrolled to the end, remove the fade */
    .preset-strip.at-end,
    .legend-preset-strip.at-end {
        -webkit-mask-image: none;
        mask-image: none;
    }
    /* Bump preset-pill tap target to 44px on mobile */
    .preset-pill { min-height: 44px; }
}

/* ── 10. Symbol page: sticky header on mobile ──
         Keeps ticker + price + watchlist toggle visible as user scrolls      ── */
@media (max-width: 768px) {
    .symbol-header {
        position: sticky;
        /* navbar is position:relative on mobile (scrolls away), so stick to the
           viewport top. top:56px left a 56px dead gap above the header at rest. */
        top: 0;
        z-index: 20;
        background: var(--bg);
        border-bottom: 1px solid var(--border);
        margin: 0 -16px;
        padding: 10px 16px 12px;
    }
}

/* ── 11. Symbol page: compact paywall overlays on mobile ──
         5+ stacked paywall cards overwhelm the page; compress them on mobile  ── */
@media (max-width: 768px) {
    /* Shrink descriptive paragraph text — keep title and CTA button visible */
    .paywall-overlay .paywall-cta p {
        font-size: 11px;
        margin-bottom: 6px;
        color: var(--text-muted);
        line-height: 1.35;
    }
    .paywall-overlay-compact .paywall-cta p {
        display: none;
    }
    .paywall-cta h4 {
        font-size: 13px;
        margin-bottom: 6px;
    }
    /* gated sections: limit height so they don't dominate mobile scroll */
    .gated-content {
        max-height: 120px;
        overflow: hidden;
    }
    /* Allow the overlay itself to still be fully visible */
    .gated-content .paywall-overlay {
        position: static;
        background: transparent;
        border-top: 1px solid var(--border);
        padding: 8px 0;
    }
    .gated-content .paywall-overlay .paywall-cta {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0;
    }
    .gated-content .paywall-overlay .paywall-cta p { display: none; }
    .gated-content .paywall-overlay .paywall-cta h4 {
        flex: 1;
        font-size: 12px;
        margin: 0;
        color: var(--text-muted);
    }
    .gated-content .paywall-overlay .paywall-cta .btn {
        flex-shrink: 0;
        font-size: 11px;
        padding: 5px 12px;
        min-height: 36px;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   VISUAL AUDIT FIXES — 2026-05-27
   Full-site visual polish: overflow, sizing, pattern diagrams, mobile.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Table: allow natural width on phones instead of forcing 600px ── */
@media (max-width: 768px) {
    table {
        min-width: unset;
    }
}

/* ── Pattern card: SVG thumbnail preview ─────────────────────────── */
.pattern-card-preview {
    width: 100%;
    background: #0d1117;
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 10px;
    border: 1px solid rgba(212,168,87,0.1);
    line-height: 0; /* remove inline-block gap */
}
.pattern-card-preview svg {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Pattern detail: diagram hero in sidebar ─────────────────────── */
.pattern-diagram-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    margin-bottom: 16px;
    overflow: hidden;
}
.pattern-diagram-card svg {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}
.pattern-diagram-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-muted);
    margin-bottom: 10px;
}

/* ── Glossary page: row hover should not clip overflow ─────────────── */
.glossary-list dt { overflow: visible; }

/* ── Page header row: avoid truncation of title + action buttons ─── */
@media (max-width: 640px) {
    .page-header-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .page-header-right {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ── Pattern detail: entry/stop grid stacks on mobile ─────────────── */
@media (max-width: 640px) {
    .entry-stop-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── Paywall overlay backdrop blur on supported browsers ──────────── */
.paywall-overlay {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* ── Badge gap: prevent badge-gap from wrapping ─────────────────── */
.badge-gap, .badge-tight, .badge-ftd-confirmed, .badge-ftd-watch, .badge-ftd-failed {
    white-space: nowrap;
}

/* ── Accessibility: respect prefers-reduced-motion (added 2026-06-05) ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}