:root {
    --header-h: 150px; /* updated at runtime to the real header height */

    /* Screener-matched dark palette. Names kept (--card/--bg/--border/--ink/
     --muted/--accent) because chart-modal.css consumes them. */
    --bg: #0a0b14;
    --bg2: #0f1120;
    --card: rgba(22, 24, 40, 0.72);
    --card-solid: #16182a;
    --border: rgba(255, 255, 255, 0.08);
    --ink: #e8eaf2;
    --muted: #8a8fa3;
    --faint: #5a5f72;

    --accent: #16d195; /* up / green */
    --accent-dark: #11b07e;
    --up: #16d195;
    --up-soft: rgba(22, 209, 149, 0.13);
    --down: #ff5d6c;
    --down-soft: rgba(255, 93, 108, 0.13);
    --indigo: #6366f1;
    --violet: #8b5cf6;
    --amber: #f5b651;
    --radius: 16px;
}

* {
    box-sizing: border-box;
}

/* Scale the whole page up. Everything below is sized in rem, so a single root
   bump enlarges all text and icons uniformly. */
html {
    font-size: 80%;
}

/* ---------- Page ---------- */
body {
    background: var(--bg);
    color: var(--ink);
    font-family:
        "Inter",
        system-ui,
        -apple-system,
        "Segoe UI",
        Roboto,
        sans-serif;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.mono {
    font-family: "JetBrains Mono", monospace;
}

/* Ambient background glow (matches screener) */
.aurora {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(
            50% 40% at 15% 0%,
            rgba(99, 102, 241, 0.22),
            transparent 70%
        ),
        radial-gradient(
            45% 40% at 90% 5%,
            rgba(139, 92, 246, 0.18),
            transparent 70%
        ),
        radial-gradient(
            60% 50% at 80% 100%,
            rgba(22, 209, 149, 0.1),
            transparent 70%
        );
    filter: blur(10px);
}

/* ---------- Sticky header ---------- */
.app-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(10, 11, 20, 0.72);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.app-header-inner {
    position: relative;
    z-index: 1;
    max-width: 100%;
    padding: 16px 24px 14px;
}

.header-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* Brand (mirrors the screener) */
.brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-decoration: none;
}
.brand b {
    font-weight: 800;
    color: var(--violet);
}
.brand-mark {
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, var(--indigo), var(--violet));
    box-shadow: 0 4px 18px rgba(124, 92, 246, 0.5);
}
.brand-tag {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 0.18rem 0.55rem;
}

/* Nav links group, pinned to the right of the header row */
.header-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
}

.picks-link {
    padding: 0.5rem 0.95rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--ink);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.8125rem;
    white-space: nowrap;
    transition:
        transform 0.15s,
        border-color 0.15s;
}
.picks-link:hover {
    transform: translateY(-1px);
    border-color: var(--violet);
    color: #fff;
    text-decoration: none;
}

.screener-link {
    padding: 0.5rem 0.95rem;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--indigo), var(--violet));
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.8125rem;
    white-space: nowrap;
    box-shadow: 0 6px 18px rgba(124, 92, 246, 0.35);
    transition:
        transform 0.15s,
        box-shadow 0.15s;
}
.screener-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(124, 92, 246, 0.5);
    color: #fff;
    text-decoration: none;
}

.clock {
    font-family: "JetBrains Mono", monospace;
    font-size: 1rem;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.02em;
    color: var(--muted);
    white-space: nowrap;
    padding-left: 0.9rem;
    margin-left: 2px;
    border-left: 1px solid var(--border);
}

/* ---------- Underlying price ---------- */
.underlying-display {
    margin: 14px 0 0;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}

.underlying-display strong {
    font-size: 1.7rem;
    color: var(--accent);
    font-weight: 800;
    font-family: "JetBrains Mono", monospace;
    letter-spacing: -0.01em;
    text-transform: none;
    margin-left: 4px;
}

.underlying-display small {
    color: var(--faint);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 6px;
}

/* ---------- Controls ---------- */
.controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 14px;
    padding: 14px 16px;
    background: var(--card);
    backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: 14px;
}

.control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.control label {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.control select {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(0, 0, 0, 0.25)
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238a8fa3' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>")
        no-repeat right 0.7rem center;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.6rem 2.1rem 0.6rem 0.9rem;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--ink);
    cursor: pointer;
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
}

.control select option {
    background: var(--card-solid);
    color: var(--ink);
}

.control select:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.control select:focus {
    outline: none;
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}

.refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, var(--indigo), var(--violet));
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 11px 20px;
    font-size: 0.95rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(124, 92, 246, 0.35);
    transition:
        transform 0.08s,
        box-shadow 0.15s,
        filter 0.15s;
}

.refresh-btn:hover {
    filter: brightness(1.08);
    box-shadow: 0 8px 22px rgba(124, 92, 246, 0.5);
}
.refresh-btn:active {
    transform: translateY(1px);
}
.refresh-icon {
    font-size: 1.05rem;
    line-height: 1;
}

/* ---------- NSE ⇄ BSE exchange toggle ---------- */
.exchange-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--muted);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    transition:
        border-color 0.15s,
        background 0.15s,
        color 0.15s;
}
.exchange-toggle:hover {
    border-color: var(--accent);
    background: rgba(22, 209, 149, 0.08);
    color: var(--ink);
    text-decoration: none;
}
.exchange-toggle .exch-cur {
    color: var(--ink);
}
.exchange-toggle .exch-arrow {
    color: var(--faint);
    font-weight: 400;
}
.exchange-toggle .exch-alt {
    color: var(--accent);
}

/* ---------- "Expiry today" flashing badge ---------- */
.expiry-today-badge {
    display: none;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--amber);
    background: rgba(245, 182, 81, 0.12);
    border: 1px solid rgba(245, 182, 81, 0.45);
    white-space: nowrap;
}
.expiry-today-badge.show {
    display: inline-flex;
}
/* Calm "live" pulse on the dot only — no whole-badge opacity flicker. */
.expiry-today-badge .et-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--amber);
    box-shadow: 0 0 0 0 rgba(245, 182, 81, 0.6);
    /*animation: expiry-pulse 1.8s ease-out infinite;*/
}
@keyframes expiry-pulse {
    0% { box-shadow: 0 0 0 0 rgba(245, 182, 81, 0.55); }
    70% { box-shadow: 0 0 0 8px rgba(245, 182, 81, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 182, 81, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .expiry-today-badge .et-dot {
        animation: none;
    }
}
/* Highlight the dropdown itself when today is expiry */
.control select.expiry-today {
    border-color: var(--amber);
    box-shadow: 0 0 0 3px rgba(245, 182, 81, 0.18);
    color: #ffe9c2;
}

.last-updated {
    font-size: 0.82rem;
    color: var(--muted);
    margin-left: auto;
    font-family: "JetBrains Mono", monospace;
}

/* ---------- Main / table ---------- */
.app-main {
    position: relative;
    z-index: 1;
    padding: 20px 24px 48px;
}

/* ---------- Options Insights panel ---------- */
.options-insights {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
.options-insights.hide {
    display: none;
}
.oi-card {
    position: relative;
    background: var(--card);
    backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    overflow: hidden;
}
.oi-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--muted);
}
.oi-card.amber::before { background: var(--amber); }
.oi-card.violet::before { background: var(--violet); }
.oi-card.green::before { background: var(--up); }
.oi-card.red::before { background: var(--down); }
.oi-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}
.oi-value {
    margin-top: 6px;
    font-size: 1.5rem;
    font-weight: 800;
    font-family: "JetBrains Mono", monospace;
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.oi-value.up { color: var(--up); }
.oi-value.down { color: var(--down); }
.oi-sub {
    margin-top: 5px;
    font-size: 0.78rem;
    color: var(--muted);
    font-family: "JetBrains Mono", monospace;
}
.oi-sub .up { color: var(--up); }
.oi-sub .down { color: var(--down); }

/* ---------- Expected-move (±1σ) range band ---------- */
.exp-band {
    background: var(--card);
    backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 18px 16px;
    margin-bottom: 18px;
}
.exp-band.hide {
    display: none;
}
.xb-head {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin-bottom: 16px;
}
.xb-head span {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    opacity: 0.75;
}
.xb-track {
    position: relative;
    height: 8px;
    border-radius: 6px;
    /* Symmetric: red at the break-evens fading to amber in the middle. */
    background: linear-gradient(
        90deg,
        rgba(255, 93, 108, 0.55) 0%,
        rgba(245, 176, 65, 0.4) 50%,
        rgba(255, 93, 108, 0.55) 100%
    );
}
.xb-fill {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px var(--border);
}
.xb-spot {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.xb-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--text, #e8eaf2);
    border: 2px solid var(--violet);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25);
}
.xb-spot-lbl {
    position: absolute;
    top: 16px;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--violet);
    white-space: nowrap;
}
.xb-labels {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 28px;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.8rem;
}
.xb-lo {
    color: var(--down);
    font-weight: 700;
}
.xb-hi {
    color: var(--up);
    font-weight: 700;
}
.xb-mid {
    color: var(--muted);
    font-weight: 600;
}

@media (max-width: 1400px) {
    .options-insights {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 1100px) {
    .options-insights {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 680px) {
    .options-insights {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------- Advanced: OI profile + Greeks ---------- */
.oi-advanced {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 18px;
}
.oi-advanced.hide { display: none; }
/* Collapsible detail (OI Profile + Greeks) — hidden by default. */
.oi-adv-detail {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 14px;
}
.oi-adv-detail.hide { display: none; }
.oi-adv-bar { display: flex; }
.oi-adv-expand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--ink);
    border-radius: 12px;
    padding: 9px 16px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.oi-adv-expand:hover { border-color: var(--violet); }
.oi-adv-caret { transition: transform 0.18s ease; display: inline-block; }
.oi-adv-expand[aria-expanded="true"] .oi-adv-caret { transform: rotate(90deg); }
.oi-adv-card {
    background: var(--card);
    backdrop-filter: blur(14px);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px 18px;
}
.oi-adv-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.oi-adv-head h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
}
.oi-adv-head h3 small {
    font-weight: 500;
    color: var(--muted);
    font-size: 0.72rem;
    margin-left: 6px;
}
.oi-adv-sub {
    font-size: 0.74rem;
    color: var(--muted);
    font-family: "JetBrains Mono", monospace;
}
.oi-adv-sub .up { color: var(--up); }
.oi-adv-sub .down { color: var(--down); }
.oi-adv-toggle {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    color: var(--ink);
    border-radius: 8px;
    padding: 5px 14px;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}
.oi-adv-toggle:hover { border-color: var(--violet); }
.oi-profile-wrap { height: 360px; }

.greeks-wrap.hide { display: none; }
.greeks-tbl {
    width: 100%;
    border-collapse: collapse;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.78rem;
}
.greeks-tbl th, .greeks-tbl td {
    padding: 6px 6px;
    text-align: right;
}
.greeks-tbl thead th {
    color: var(--faint);
    font-weight: 700;
    border-bottom: 1px solid var(--border);
    font-size: 0.7rem;
}
.greeks-tbl th.ce { color: #ff8a95; }
.greeks-tbl th.pe { color: #5ce8b8; }
.greeks-tbl td.k {
    color: var(--ink);
    font-weight: 800;
    background: rgba(255, 255, 255, 0.04);
    text-align: center;
}
.greeks-tbl tbody td { color: var(--muted); }
.greeks-tbl tr.atm td { background: rgba(245, 182, 81, 0.08); }
.greeks-tbl tr.atm td.k { background: rgba(245, 182, 81, 0.22); color: #ffe9c2; }
.greeks-note {
    margin-top: 10px;
    font-size: 0.68rem;
    color: var(--faint);
    line-height: 1.4;
}

@media (max-width: 900px) {
    .oi-adv-detail { grid-template-columns: 1fr; }
}

/* Heatmap card spans the full advanced grid width. */
.oi-heatmap-card { grid-column: 1 / -1; }
.oi-heatmap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    gap: 6px;
}
.oi-heat-cell {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 6px 7px;
    text-align: center;
    font-family: "JetBrains Mono", monospace;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.oi-heat-cell:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }

/* Strike cell in the chain table opens that strike's chart popup. */
th.strike-cell { cursor: pointer; transition: color 0.12s ease; }
th.strike-cell:hover { color: var(--violet); text-decoration: underline; }
.oi-heat-cell .oi-heat-k { display: block; font-size: 0.72rem; font-weight: 700; color: #fff; }
.oi-heat-cell .oi-heat-v { display: block; font-size: 0.64rem; color: rgba(255, 255, 255, 0.78); margin-top: 2px; }
.oi-heat-cell.atm { outline: 1px dashed var(--amber); outline-offset: -3px; }
.oi-heat-cell.hot { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber), 0 0 14px rgba(245, 182, 81, 0.35); }
.oi-heat-cell .oi-heat-flag { position: absolute; top: 2px; right: 3px; font-size: 0.6rem; }

/* Top-5 highest-OI strikes — Call walls (resistance) red, Put walls (support)
   green; intensity by rank (#1 strongest). A left accent + ★ marks the #1. */
td.oi-cell { position: relative; }
td.oi-hot { font-weight: 700; }
td.oi-hot-ce.oi-hot-1 { background: rgba(255, 93, 108, 0.42) !important; }
td.oi-hot-ce.oi-hot-2 { background: rgba(255, 93, 108, 0.32) !important; }
td.oi-hot-ce.oi-hot-3 { background: rgba(255, 93, 108, 0.24) !important; }
td.oi-hot-ce.oi-hot-4 { background: rgba(255, 93, 108, 0.17) !important; }
td.oi-hot-ce.oi-hot-5 { background: rgba(255, 93, 108, 0.11) !important; }
td.oi-hot-pe.oi-hot-1 { background: rgba(22, 209, 149, 0.42) !important; }
td.oi-hot-pe.oi-hot-2 { background: rgba(22, 209, 149, 0.32) !important; }
td.oi-hot-pe.oi-hot-3 { background: rgba(22, 209, 149, 0.24) !important; }
td.oi-hot-pe.oi-hot-4 { background: rgba(22, 209, 149, 0.17) !important; }
td.oi-hot-pe.oi-hot-5 { background: rgba(22, 209, 149, 0.11) !important; }
/* Rank badge 1..5 on the left of each highlighted OI cell (mirrors the numbered
   badges on the OI Profile chart). #1 is amber to stand out. */
td.oi-hot::before {
    position: absolute;
    left: 3px; top: 50%;
    transform: translateY(-50%);
    min-width: 15px; height: 15px; line-height: 15px;
    padding: 0 2px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.6rem;
    font-weight: 700;
    text-align: center;
}
td.oi-hot-1::before { content: "1"; background: var(--amber); color: #1a1205; }
td.oi-hot-2::before { content: "2"; }
td.oi-hot-3::before { content: "3"; }
td.oi-hot-4::before { content: "4"; }
td.oi-hot-5::before { content: "5"; }

#content {
    background: var(--card);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
    /* No overflow:hidden — it makes #content a scroll container and breaks the
     sticky <thead> (it would offset by --header-h and float mid-table).
     Below 1024px that trade-off is inverted; see the media query further down. */
}


/* ---------- Option chain table (overrides Bootstrap 3 for dark theme) ---------- */
.table {
    margin-bottom: 0;
    font-size: 1rem;
    color: var(--ink);
    background: transparent;
}

.table > thead > tr > th,
.table > tbody > tr > td,
.table > tbody > tr > th {
    border-color: rgba(255, 255, 255, 0.06) !important;
}
.table-bordered,
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > thead > tr > th {
    border-color: rgba(255, 255, 255, 0.06) !important;
}

/* Sticky table header, parked right under the sticky page header */
#content table thead th {
    position: sticky;
    top: var(--header-h);
    z-index: 10;
    background: #171a2b;
    color: #d8dbe8;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    padding: 13px 10px;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.06);
}
#content table thead th:first-child {
    border-top-left-radius: var(--radius);
}
#content table thead th:last-child {
    border-top-right-radius: var(--radius);
}

/* ---------- The chain on narrow screens ----------
   The option chain is ~1300px of genuinely necessary columns (calls, strike,
   puts). Above ~1024px it fits and the sticky header is the thing worth having.
   Below that it does not fit, and because #content deliberately has no overflow
   the excess was simply being clipped by body{overflow-x:hidden} — the right-
   hand half of the chain, the entire put side, was unreachable on a phone.

   So under 1024px #content becomes a horizontal scroller. That necessarily
   costs the sticky <thead>: a scroll container becomes the containing block for
   sticky descendants, so `top: var(--header-h)` would pin the header to the top
   of #content (which scrolls away with the page) instead of the viewport. Being
   able to read the puts beats a header that follows you down the calls. */
@media (max-width: 1024px) {
    #content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* At the end of the table, don't hand the swipe to the page (or to
           Safari's back-navigation gesture). */
        overscroll-behavior-x: contain;
    }
    #content table thead th {
        position: static;
    }
    /* The table keeps its real width and scrolls inside #content. */
    #content table.table {
        min-width: 900px;
    }
    /* The caption is the scroll hint: it stays put while the table pans. */
    caption.oi-unit-note {
        position: sticky;
        left: 0;
        width: min(100%, 92vw);
    }
    #content::-webkit-scrollbar {
        height: 6px;
    }
    #content::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.18);
        border-radius: 999px;
    }
}

/* Desktop, but not wide enough for the whole chain: a 1280px laptop with the
   sidebar open leaves ~980px for a ~1310px table, so the put columns were being
   clipped by the page's overflow-x and were simply unreachable. Here the sticky
   <thead> is worth keeping, so instead of making #content a scroll container we
   let the *page* scroll sideways — the viewport stays the sticky containing
   block, and nothing is hidden.

   `visible`, not `auto`: `auto` would make <body> itself the scroll container,
   which takes over the page's vertical scrolling and breaks sticky all over
   again. Leaving both boxes visible lets the overflow propagate to the viewport,
   where the browser's own scrollbar handles it.

   These plain `html, body` selectors deliberately outrank the zero-specificity
   `:where(html, body)` default in responsive.css. */
@media (min-width: 1025px) and (max-width: 1699px) {
    html,
    body {
        overflow-x: visible;
    }
}

.table > tbody > tr > td,
.table > tbody > tr > th {
    vertical-align: middle;
    padding: 10px;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

/* Numeric cells in mono for that trading-terminal feel */
.table > tbody > tr > td.text-right {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.95rem;
}

/* Narrow the two "Interpretation" columns (first & last). */
#content table tr > th:first-child,
#content table tr > th:last-child,
#content table tr > td:first-child,
#content table tr > td:last-child {
    width: 116px;
    max-width: 116px;
    white-space: normal;
    font-size: 0.78rem;
    line-height: 1.25;
    font-weight: 600;
}

/* Zebra striping + hover (dark) */
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.018);
}
.table-striped > tbody > tr:nth-of-type(even) {
    background-color: transparent;
}
.table-hover > tbody > tr:hover {
    background-color: rgba(139, 92, 246, 0.1) !important;
}

/* Strike column emphasis */
.table > tbody > tr > th.text-center {
    background: rgba(255, 255, 255, 0.05);
    color: var(--ink);
    font-weight: 800;
    font-family: "JetBrains Mono", monospace;
    font-size: 1.02rem;
}

/* Bootstrap utility overrides: green = bullish, red = bearish, dark-friendly */
.bg-success,
.table > tbody > tr > td.bg-success {
    background-color: var(--up-soft) !important;
}
.bg-danger,
.table > tbody > tr > td.bg-danger {
    background-color: var(--down-soft) !important;
}
.text-success {
    color: #5ce8b8 !important;
}
.text-danger {
    color: #ff8a95 !important;
}

/* The glyphicon arrows inherit text color above */
.glyphicon {
    font-size: 0.72rem;
}

/* ---------- ATM row highlight ---------- */
.atm-row td,
.atm-row th {
    border-top: 1px solid var(--amber) !important;
    border-bottom: 1px solid var(--amber) !important;
    font-weight: 700;
    background-color: rgba(245, 182, 81, 0.06) !important;
}

.atm-row th.text-center {
    background-color: rgba(245, 182, 81, 0.22) !important;
    color: #ffe9c2 !important;
}

/* ---------- Loading / error text in #content ---------- */
#content:not(:has(table)) {
    padding: 40px 24px;
    text-align: center;
    color: var(--muted);
    font-size: 0.95rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
    .app-header-inner {
        padding: 14px 16px;
    }
    .app-main {
        padding: 16px 14px 40px;
    }
    .last-updated {
        margin-left: 0;
        width: 100%;
    }
    .underlying-display strong {
        font-size: 1.35rem;
    }
    .screener-link {
        order: 3;
        margin-left: 0;
    }
    .clock {
        width: 100%;
    }
}

/* Caption clarifying that OI/Volume columns are in shares (× lot), L/Cr. */
caption.oi-unit-note {
    caption-side: top;
    text-align: left;
    padding: 6px 2px 10px;
    font-size: 12px;
    color: #8a90a6;
}
caption.oi-unit-note b {
    color: #c7ccd9;
    font-weight: 600;
}