/* Pre-Market board — inherits shell + tokens from screener.css. */

.pm-updated {
    text-align: right;
    color: var(--faint);
    font-size: 0.78rem;
    font-family: "JetBrains Mono", monospace;
    margin: 6px 0 12px;
}

/* headline GIFT Nifty card */
.pm-hero-card {
    display: grid;
    grid-template-columns: minmax(200px, 280px) 1fr;
    gap: 24px;
    background: var(--card);
    border: 1px solid var(--card-brd);
    border-radius: var(--radius);
    padding: 24px 26px;
    margin-bottom: 18px;
}
.pm-loading { color: var(--muted); padding: 20px 4px; }
.pm-loading.down { color: var(--down); }

.pm-gift-l { border-right: 1px solid var(--card-brd); padding-right: 22px; }
.pm-gift-lbl {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}
.pm-gift-exp {
    text-transform: none;
    letter-spacing: 0;
    color: var(--faint);
    font-weight: 500;
    margin-left: 4px;
}
.pm-gift-px {
    font-size: 2.6rem;
    font-weight: 800;
    font-family: "JetBrains Mono", monospace;
    line-height: 1.1;
    margin-top: 8px;
    letter-spacing: -0.02em;
}
.pm-gift-px.up { color: var(--up); }
.pm-gift-px.down { color: var(--down); }
.pm-gift-chg {
    font-family: "JetBrains Mono", monospace;
    font-weight: 700;
    margin-top: 6px;
}
.pm-gift-chg.up { color: var(--up); }
.pm-gift-chg.down { color: var(--down); }
.pm-gift-time { color: var(--faint); font-size: 0.72rem; margin-top: 8px; }

.pm-gift-r { display: flex; flex-direction: column; justify-content: center; }
.pm-gap-verdict {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--txt);
}
.pm-gap-verdict.up { color: var(--up); }
.pm-gap-verdict.down { color: var(--down); }
.pm-gap-detail {
    margin-top: 10px;
    color: var(--muted);
    line-height: 1.6;
    font-size: 0.92rem;
}
.pm-gap-detail b { color: var(--txt); font-family: "JetBrains Mono", monospace; }
.pm-gap-detail .up { color: var(--up); }
.pm-gap-detail .down { color: var(--down); }
.pm-gap-vol {
    margin-top: 8px;
    font-size: 0.76rem;
    color: var(--faint);
    font-family: "JetBrains Mono", monospace;
}

/* supporting stats */
.pm-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}
.pm-stat {
    background: var(--card);
    border: 1px solid var(--card-brd);
    border-radius: 14px;
    padding: 14px 16px;
}
.pm-stat-k {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    font-weight: 700;
}
.pm-stat-v {
    font-size: 1.5rem;
    font-weight: 800;
    font-family: "JetBrains Mono", monospace;
    margin-top: 6px;
}
.pm-stat-v.up { color: var(--up); }
.pm-stat-v.down { color: var(--down); }
.pm-stat-s { font-size: 0.76rem; color: var(--faint); margin-top: 4px; }

/* market pulse */
.pm-sec { margin-bottom: 22px; }
.pm-h { font-size: 1.05rem; font-weight: 700; margin: 0 0 12px; }
.pm-h-sub {
    font-size: 0.84rem;
    color: var(--muted);
    line-height: 1.55;
    margin: -6px 0 14px;
    max-width: 720px;
}
.pm-h-sub b { color: var(--txt); }

.pm-pulse {
    background: var(--card);
    border: 1px solid var(--card-brd);
    border-radius: var(--radius);
    padding: 20px 22px;
}
.pm-pulse-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.pm-pulse-bias { font-size: 1.3rem; font-weight: 800; }
.pm-pulse-bias.up { color: var(--up); }
.pm-pulse-bias.down { color: var(--down); }
.pm-pulse-tilt {
    font-family: "JetBrains Mono", monospace;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.pm-pulse-tilt.up { color: var(--up); }
.pm-pulse-tilt.down { color: var(--down); }

.pm-meter { margin: 14px 0 4px; }
.pm-meter-track {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--down) 0%,
        #b9791f 50%,
        var(--up) 100%
    );
    opacity: 0.85;
}
.pm-meter-needle {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--txt);
    border: 2px solid var(--card);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 1px var(--card-brd);
    transition: left 0.5s ease;
}
.pm-meter-ends {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 0.68rem;
    color: var(--faint);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pm-sigs { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.pm-sig {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--muted);
}
.pm-sig b { color: var(--txt); }
.pm-sig-i { font-size: 0.78rem; line-height: 1.7; color: var(--faint); flex: none; }
.pm-sig.up .pm-sig-i { color: var(--up); }
.pm-sig.down .pm-sig-i { color: var(--down); }
.pm-pulse-note {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--card-brd);
    font-size: 0.74rem;
    color: var(--faint);
    line-height: 1.5;
}

/* global cues */
.pm-cue-groups { display: grid; gap: 16px; }
.pm-cue-glabel {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--faint);
    margin-bottom: 8px;
}
.pm-cues {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}
.pm-cue {
    position: relative;
    background: var(--card);
    border: 1px solid var(--card-brd);
    border-radius: 12px;
    padding: 12px 14px;
}
.pm-cue.expandable { cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.pm-cue.expandable:hover { border-color: color-mix(in srgb, var(--txt) 22%, var(--card-brd)); }
.pm-cue.expandable:focus-visible { outline: 2px solid color-mix(in srgb, var(--txt) 40%, transparent); outline-offset: 2px; }
.pm-cue-hd { display: flex; align-items: center; gap: 6px; }
.pm-cue-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--faint);
    flex: none;
}
.pm-cue-dot.good { background: var(--up); box-shadow: 0 0 6px color-mix(in srgb, var(--up) 60%, transparent); }
.pm-cue-dot.bad { background: var(--down); box-shadow: 0 0 6px color-mix(in srgb, var(--down) 60%, transparent); }
.pm-cue-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--muted);
    font-weight: 600;
    flex: 1 1 auto;
    min-width: 0;
}
.pm-cue-flag { width: 16px; height: 11px; object-fit: cover; border-radius: 2px; flex: none; }
.pm-state {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 2px 5px;
    border-radius: 5px;
    flex: none;
    white-space: nowrap;
}
.pm-state.live { color: var(--up); background: color-mix(in srgb, var(--up) 16%, transparent); }
.pm-state.pre { color: #b9791f; background: color-mix(in srgb, #b9791f 18%, transparent); }
.pm-state.closed { color: var(--faint); background: color-mix(in srgb, var(--faint) 16%, transparent); }
.pm-cue-caret {
    font-size: 0.7rem;
    color: var(--faint);
    margin-left: auto;
    transition: transform 0.2s;
}
.pm-cue.open .pm-cue-caret { transform: rotate(180deg); }

/* expandable detail panel */
.pm-cue-detail {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.25s ease;
}
.pm-cue.open .pm-cue-detail {
    max-height: 340px;
    opacity: 1;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--card-brd);
}
.pm-cd-why { font-size: 0.76rem; color: var(--muted); line-height: 1.5; margin-bottom: 10px; }
.pm-cd-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.pm-cd-lbl {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--faint);
    width: 40px;
    flex: none;
}
.pm-rb { flex: 1 1 auto; }
.pm-rb-track {
    position: relative;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--txt) 12%, transparent);
    margin: 6px 0 3px;
}
.pm-rb-dot {
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--txt);
    transform: translate(-50%, -50%);
}
.pm-rb-tick {
    position: absolute;
    top: 50%;
    width: 2px;
    height: 10px;
    background: var(--faint);
    transform: translate(-50%, -50%);
}
.pm-rb-ends {
    display: flex;
    justify-content: space-between;
    font-size: 0.64rem;
    color: var(--faint);
    font-family: "JetBrains Mono", monospace;
}
.pm-cd-meta {
    font-size: 0.66rem;
    color: var(--faint);
    font-family: "JetBrains Mono", monospace;
    margin: 2px 0 10px;
}
.pm-cd-hint { font-family: "Inter", sans-serif; opacity: 0.8; }
.pm-cd-rets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pm-ret {
    font-size: 0.66rem;
    font-weight: 700;
    font-family: "JetBrains Mono", monospace;
    padding: 3px 7px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--txt) 6%, transparent);
    color: var(--muted);
    display: inline-flex;
    gap: 5px;
}
.pm-ret.up { color: var(--up); }
.pm-ret.down { color: var(--down); }
.pm-ret-k { color: var(--faint); font-weight: 600; }
.pm-cd-rating { margin-top: 10px; font-size: 0.72rem; color: var(--muted); }
.pm-rating {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--txt) 10%, transparent);
    color: var(--txt);
}
.pm-rating.up { color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent); }
.pm-rating.down { color: var(--down); background: color-mix(in srgb, var(--down) 14%, transparent); }

.pm-cue-px {
    font-size: 1.15rem;
    font-weight: 800;
    font-family: "JetBrains Mono", monospace;
    margin-top: 6px;
}
.pm-cue-chg {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: "JetBrains Mono", monospace;
    font-weight: 700;
    font-size: 0.85rem;
    margin-top: 2px;
    color: var(--muted);
}
.pm-cue-chg.up { color: var(--up); }
.pm-cue-chg.down { color: var(--down); }
.pm-cue-note {
    grid-column: 1 / -1;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.5;
    padding: 14px 16px;
    background: var(--card);
    border: 1px dashed var(--card-brd);
    border-radius: 12px;
}

@media (max-width: 640px) {
    .pm-hero-card { grid-template-columns: 1fr; }
    .pm-gift-l { border-right: none; border-bottom: 1px solid var(--card-brd); padding-right: 0; padding-bottom: 16px; }
}

/* ---------------------------------------------------------------------------
   Market Outlook — the post-market half.
   ---------------------------------------------------------------------------
   The pre-market rules above are untouched; everything below is the after-the-
   bell view and the switch between the two.

   Colour discipline, because this page makes claims: violet is the measured
   past (the tape, the projection ground), green and red are only ever support
   and resistance in their literal trading sense, and amber is the session's own
   VWAP. Nothing is coloured for decoration — if it has a hue here, the hue
   means something.
--------------------------------------------------------------------------- */

/* ---- the switch ---- */
.ol-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 26px 0 22px;
}
.ol-tab {
    flex: 1 1 260px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    text-align: left;
    border-radius: 14px;
    border: 1px solid var(--card-brd);
    background: var(--card);
    color: var(--txt);
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s, transform 0.18s;
}
.ol-tab:hover { transform: translateY(-1px); border-color: rgba(139, 92, 246, 0.45); }
.ol-tab.on {
    border-color: rgba(139, 92, 246, 0.65);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.16), rgba(139, 92, 246, 0.1));
    box-shadow: 0 8px 26px -14px rgba(99, 102, 241, 0.9);
}
/* While NSE is trading, the second tab is a live view and says so — a red
   edge and a breathing dot, the two things people already read as "live". */
.ol-tab.is-live {
    border-color: rgba(255, 93, 108, 0.5);
}
.ol-tab.is-live.on {
    border-color: rgba(255, 93, 108, 0.8);
    background: linear-gradient(135deg, rgba(255, 93, 108, 0.16), rgba(255, 93, 108, 0.05));
    box-shadow: 0 8px 26px -14px rgba(255, 93, 108, 0.9);
}
.ol-tab.is-live:hover { border-color: rgba(255, 93, 108, 0.7); }
.ol-tab.is-live .ol-tab-ico {
    animation: olLivePulse 2s ease-in-out infinite;
}
@keyframes olLivePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
    .ol-tab.is-live .ol-tab-ico { animation: none; }
}

.ol-tab-ico { font-size: 20px; flex: 0 0 auto; }
.ol-tab b { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; }
.ol-tab i {
    display: block;
    font-style: normal;
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 2px;
}
.ol-phase {
    font-family: "JetBrains Mono", monospace;
    font-size: 11.5px;
    color: var(--muted);
    white-space: nowrap;
    padding: 0 4px;
}

/* ---- index picker ---- */
.ol-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.ol-idx { display: flex; flex-wrap: wrap; gap: 6px; }
.ol-idx button {
    padding: 7px 13px;
    border-radius: 10px;
    border: 1px solid var(--card-brd);
    background: rgba(255, 255, 255, 0.03);
    color: var(--muted);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: 0.18s;
}
.ol-idx button:hover { color: var(--txt); border-color: rgba(139, 92, 246, 0.4); }
.ol-idx button.on {
    color: #fff;
    background: linear-gradient(135deg, var(--indigo), var(--violet));
    border-color: transparent;
}
.ol-asof {
    margin-left: auto;
    font-family: "JetBrains Mono", monospace;
    font-size: 11.5px;
    color: var(--faint);
}

/* ---- verdict ---- */
.ol-verdict {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 22px;
    padding: 22px;
    border-radius: 18px;
    border: 1px solid var(--card-brd);
    background: var(--card);
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}
/* One hairline of colour states the lean before a word is read. */
.ol-verdict::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--muted);
}
.ol-verdict.is-bull::before { background: var(--up); }
.ol-verdict.is-bear::before { background: var(--down); }
.ol-eyebrow {
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--violet);
    margin-bottom: 10px;
}
.ol-v-line {
    margin: 0 0 18px;
    font-size: clamp(15px, 1.9vw, 18px);
    line-height: 1.6;
    color: var(--txt);
}
.ol-v-line b { font-weight: 700; }
/* The written read, under the meter it summarises: three short paragraphs at
   most, set slightly quieter than the headline sentence above them. */
.ol-v-story {
    margin-top: 18px;
    display: grid;
    gap: 10px;
    max-width: 68ch;
}
.ol-v-story p {
    margin: 0;
    font-size: 14px;
    line-height: 1.68;
    color: var(--muted);
}
.ol-v-story p:first-child { color: var(--txt); }
.ol-v-track {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg,
        rgba(255, 93, 108, 0.55), rgba(138, 143, 163, 0.3), rgba(22, 209, 149, 0.55));
}
.ol-v-mid {
    position: absolute;
    left: 50%;
    top: -3px;
    bottom: -3px;
    width: 1px;
    background: rgba(255, 255, 255, 0.25);
}
.ol-v-mark {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: var(--txt);
    border: 2px solid var(--bg2);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.ol-v-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--faint);
}
.ol-v-side { display: flex; flex-direction: column; gap: 14px; min-width: 190px; }
.ol-v-badge {
    text-align: center;
    padding: 12px;
    border-radius: 13px;
    border: 1px solid var(--card-brd);
    background: rgba(255, 255, 255, 0.03);
}
.ol-v-badge b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.ol-v-badge i {
    font-style: normal;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--faint);
}
.is-bull .ol-v-badge b { color: var(--up); }
.is-bear .ol-v-badge b { color: var(--down); }
.ol-v-kv { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; }
.ol-v-kv dt { font-size: 12.5px; color: var(--muted); }
.ol-v-kv dd {
    margin: 0;
    font-family: "JetBrains Mono", monospace;
    font-size: 12.5px;
    font-weight: 700;
    text-align: right;
}

/* ---- stat row ---- */
.ol-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.ol-stat {
    padding: 13px 15px;
    border-radius: 14px;
    border: 1px solid var(--card-brd);
    background: var(--card);
}
.ol-stat-l {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--faint);
}
.ol-stat-v {
    display: block;
    margin-top: 6px;
    font-family: "JetBrains Mono", monospace;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.ol-stat-v.up { color: var(--up); }
.ol-stat-v.dn { color: var(--down); }
.ol-stat-s { display: block; margin-top: 3px; font-style: normal; font-size: 11.5px; color: var(--muted); }

/* ---- cards ---- */
.ol-card {
    padding: 20px;
    border-radius: 18px;
    border: 1px solid var(--card-brd);
    background: var(--card);
    margin-bottom: 16px;
}
.ol-card-head { margin-bottom: 16px; }
.ol-card-head h2 { margin: 0 0 5px; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; }
.ol-card-head p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); max-width: 72ch; }

/* ---- chart ---- */
.ol-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 10px; }
.ol-key {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--muted);
}
.ol-swatch { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.ol-sw-line { height: 3px; border-radius: 2px; }
.ol-sw-band { background: rgba(99, 102, 241, 0.35); }
/* The frame the chart is read through. `.ol-chart-box` stays put; the wrap
   inside it is the viewport that pans across a canvas which, with a previous
   session on it, is wider than the card. */
.ol-chart-box { position: relative; }
.ol-chart-wrap { position: relative; }
.ol-chart-wrap.is-2d {
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    /* Horizontal swipes pan; vertical ones still scroll the page. */
    touch-action: pan-x pan-y;
    /* One screen of travel — a permanent bar under the chart would read as a
       second axis. The hint carries the affordance instead. */
    scrollbar-width: none;
}
.ol-chart-wrap.is-2d::-webkit-scrollbar { display: none; }
.ol-chart-wrap.is-2d.is-panning { cursor: grabbing; }
/* responsive.css caps every svg at `max-width: 100%`; this canvas is
   deliberately wider than its box and already inside a scroller of its own. */
.ol-chart-wrap.is-2d svg { max-width: none; }
.ol-chart svg { display: block; overflow: visible; }
.ol-zone-prev { fill: #7c8296; }
.ol-panhint {
    position: absolute;
    left: 10px;
    top: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(11, 13, 24, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 10.5px;
    font-weight: 600;
    color: #7c8296;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.ol-panhint i {
    font-style: normal;
    color: #8b5cf6;
    animation: olPanNudge 1.9s ease-in-out infinite;
}
@keyframes olPanNudge {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-3px); }
}
.ol-panhint.is-gone { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .ol-panhint i { animation: none; }
}
.ol-ax { fill: #5a5f72; font-size: 10.5px; font-family: "JetBrains Mono", monospace; }
.ol-lvl { font-size: 10.5px; font-weight: 700; font-family: "JetBrains Mono", monospace; }
.ol-zone {
    fill: rgba(139, 92, 246, 0.75);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    font-family: "JetBrains Mono", monospace;
}
.ol-tip {
    position: absolute;
    pointer-events: none;
    z-index: 5;
    padding: 7px 10px;
    border-radius: 9px;
    border: 1px solid var(--card-brd);
    background: rgba(16, 18, 32, 0.96);
    box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.95);
    font-family: "JetBrains Mono", monospace;
    font-size: 11.5px;
    line-height: 1.5;
    white-space: nowrap;
}
.ol-tip b { display: block; color: var(--faint); font-weight: 700; font-size: 10px; letter-spacing: 0.1em; }
.ol-tip span { display: block; font-size: 14px; font-weight: 700; }
.ol-tip i { font-style: normal; }
.ol-tip i.up { color: var(--up); }
.ol-tip i.dn { color: var(--down); }

/* ---- scenarios ---- */
.ol-scen { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.ol-sc {
    padding: 15px;
    border-radius: 14px;
    border: 1px solid var(--card-brd);
    background: rgba(255, 255, 255, 0.02);
    border-top-width: 3px;
}
.ol-sc-bull { border-top-color: var(--up); }
.ol-sc-bear { border-top-color: var(--down); }
.ol-sc-base { border-top-color: var(--muted); }
.ol-sc h3 { margin: 0 0 8px; font-size: 14.5px; font-weight: 700; }
.ol-sc-trig {
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    color: var(--txt);
    padding: 6px 9px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    display: inline-block;
}
.ol-sc-tg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 10px 0;
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
}
.ol-sc-tg span {
    font-family: "Inter", sans-serif;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--faint);
}
.ol-sc-tg i { font-style: normal; color: var(--faint); }
.ol-sc-odds { display: flex; gap: 14px; margin: 10px 0; }
.ol-sc-odds span { font-size: 11.5px; color: var(--muted); }
.ol-sc-odds b { font-family: "JetBrains Mono", monospace; font-size: 14px; color: var(--txt); }
.ol-sc p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }

/* ---- levels table ---- */
/* The table scrolls inside its own box rather than compressing — five columns
   in 430px crushed the basis text into an unreadable vertical sliver, and a
   column of one-letter-per-line prose is worse than a column you have to swipe
   to. Same treatment the rest of the site gives wide content. */
.ol-tbl-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.ol-tbl { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 13px; }
.ol-tbl .lv-basis { min-width: 260px; }
.ol-tbl th {
    text-align: left;
    padding: 8px 10px;
    font-size: 10.5px;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--faint);
    border-bottom: 1px solid var(--card-brd);
    white-space: nowrap;
}
.ol-tbl td { padding: 9px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.045); }
.ol-tbl .num { text-align: right; }
.ol-tbl .mono { font-family: "JetBrains Mono", monospace; }
.ol-tbl td.up { color: var(--up); }
.ol-tbl td.dn { color: var(--down); }
.ol-tbl tbody tr:hover { background: rgba(255, 255, 255, 0.028); }
.lv-basis { color: var(--muted); font-size: 12px; }
.lv-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 8px;
    background: var(--muted);
    vertical-align: baseline;
}
.lv-resistance .lv-dot { background: var(--down); }
.lv-support .lv-dot { background: var(--up); }
.lv-band .lv-dot { background: var(--indigo); }
.lv-close { background: rgba(139, 92, 246, 0.1); }
.lv-close .lv-dot { background: var(--violet); }
.lv-close td { font-weight: 700; }

/* ---- factor breakdown ---- */
.ol-fac { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; }
.ol-f { padding: 13px 15px; border-radius: 13px; background: rgba(255, 255, 255, 0.025); }
.ol-f-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ol-f-top b { font-size: 13px; font-weight: 600; }
.ol-f-top span { font-size: 13px; font-weight: 700; }
.ol-f-top .up { color: var(--up); }
.ol-f-top .dn { color: var(--down); }
.ol-f-bar {
    position: relative;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
    margin: 9px 0 7px;
}
.ol-f-zero { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: rgba(255, 255, 255, 0.22); }
.ol-f-fill { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--muted); }
.ol-f-fill.up { background: var(--up); }
.ol-f-fill.dn { background: var(--down); }
.ol-f-val { font-size: 12px; color: var(--txt); }
.ol-f p { margin: 5px 0 0; font-size: 12px; line-height: 1.55; color: var(--muted); }

/* ---- what's ahead ---- */
.ol-ahead { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.ol-ahead h3 {
    margin: 0 0 10px;
    font-size: 11px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--faint);
}
.ol-ev, .ol-hl { list-style: none; margin: 0; padding: 0; }
.ol-ev li {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.045);
    font-size: 12.5px;
}
.ol-ev li b { min-width: 92px; }
.ol-ev li span { color: var(--muted); flex: 1; }
.ol-ev li i { font-style: normal; font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--faint); }
.ol-hl li { padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.045); font-size: 12.5px; }
.ol-hl a { color: var(--txt); text-decoration: none; line-height: 1.5; display: block; }
.ol-hl a:hover { color: var(--violet); }
.ol-hl i { font-style: normal; font-size: 11px; color: var(--faint); }

.ol-empty {
    padding: 40px 20px;
    text-align: center;
    border-radius: 18px;
    border: 1px dashed var(--card-brd);
    color: var(--muted);
}
.ol-empty b { display: block; color: var(--txt); margin-bottom: 6px; font-size: 15px; }
.ol-empty span { font-size: 13px; }

@media (max-width: 760px) {
    .ol-verdict { grid-template-columns: 1fr; }
    .ol-v-side { min-width: 0; }
    .ol-asof { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .ol-tab:hover { transform: none; }
}

/* The level's value under its name: a taller chart is only worth the space if
   you can read a line without looking down at the table for its number. */
.ol-lvl-v {
    fill: #8a8fa3;
    font-size: 9.5px;
    font-family: "JetBrains Mono", monospace;
}

/* Confidence caveats sit with the confidence they qualify. */
.ol-v-warn { display: grid; gap: 6px; }
.ol-v-warn span {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--amber);
    padding: 7px 9px;
    border-radius: 9px;
    background: rgba(245, 182, 81, 0.1);
    border: 1px solid rgba(245, 182, 81, 0.28);
}
.ol-rg b {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.16);
    border: 1px solid rgba(99, 102, 241, 0.4);
    color: #c7cbff;
    margin-bottom: 10px;
}
.ol-rg p { margin: 0 0 8px; font-size: 13px; line-height: 1.65; color: var(--muted); max-width: 78ch; }
.ol-rg p:last-child { margin-bottom: 0; }
.ol-sw-cpr { background: rgba(138, 143, 163, 0.42); }

/* Timeframe control. Sits with the chart, not with the index picker, because it
   changes only what the chart draws — the analysis is a function of the
   session. The note beside it says so, since "which timeframe changes the
   signal?" is the reasonable first assumption. */
.ol-chart-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 12px;
}
.ol-tf { display: inline-flex; gap: 3px; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
.ol-tf button {
    padding: 5px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.15s;
}
.ol-tf button:hover { color: var(--txt); }
.ol-tf button.on { background: rgba(139, 92, 246, 0.22); color: #d9d2ff; }
.ol-tf-note { font-size: 11.5px; color: var(--faint); line-height: 1.5; flex: 1 1 200px; }

/* Zoom. Built in the same segmented language as the timeframe beside it, so the
   bar reads as one row of controls rather than two conventions sharing a line.
   The reading in the middle is what makes the reset button obvious: a chart you
   can get lost inside needs the way back more than it needs the way in. */
.ol-zoom {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 11px;
    border: 1px solid var(--card-brd);
    background: rgba(255, 255, 255, 0.04);
}
.ol-zoom.is-on { border-color: rgba(139, 92, 246, 0.4); }
.ol-zoom-ax {
    padding: 0 5px 0 7px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--faint);
}
.ol-zoom button {
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: 0.15s;
}
.ol-zoom button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); color: var(--txt); }
.ol-zoom button:disabled { opacity: 0.35; cursor: default; }
.ol-zoom-lbl {
    min-width: 92px;
    padding: 0 6px;
    text-align: center;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--faint);
}
.ol-zoom.is-on .ol-zoom-lbl { color: #d9d2ff; }
.ol-zoom-rst { font-size: 15px; }
@media (max-width: 700px) {
    .ol-zoom-lbl { min-width: 0; }
    .ol-tf-note { display: none; }
    /* Bigger targets on a touch screen. 24px is a comfortable mouse target and
       a miss with a thumb. */
    .ol-zoom button { width: 34px; height: 34px; font-size: 16px; }
    .ol-zoom-rst { font-size: 17px; }
}

/* How old the line is, and the button that fixes that. Sits at the far end of
   the chart bar so it reads as being about the chart, not about the page. */
.ol-freshness {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    white-space: nowrap;
}
.ol-fresh-txt {
    font-family: "JetBrains Mono", monospace;
    font-size: 11.5px;
    color: var(--faint);
}
.ol-fresh-txt:empty { display: none; }
.ol-freshness.is-stale .ol-fresh-txt { color: var(--amber, #f5b651); }
.ol-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: 0.15s;
}
.ol-refresh:hover {
    color: #d9d2ff;
    border-color: rgba(139, 92, 246, 0.55);
    background: rgba(139, 92, 246, 0.14);
}
.ol-refresh.is-busy {
    animation: ol-spin 0.7s linear infinite;
    pointer-events: none;
}
@keyframes ol-spin {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .ol-refresh.is-busy { animation: none; opacity: 0.6; }
}

/* Level prices on the price axis. Mono and tabular so the digits line up
   column-wise down the left edge — a ragged number column reads as noise. */
.ol-lvl-px {
    font-size: 10px;
    font-weight: 700;
    font-family: "JetBrains Mono", monospace;
    font-variant-numeric: tabular-nums;
}
.ol-lvl-close { font-size: 11.5px; }