body { overflow-x: clip; }

        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background:
                radial-gradient(1200px 800px at -10% -10%, rgba(201, 176, 55, 0.16), transparent 55%),
                linear-gradient(160deg, rgba(5, 8, 16, 0.95) 25%, rgba(8, 12, 22, 0.99) 70%);
            pointer-events: none;
            z-index: -2;
        }
        body::after {
            content: '';
            position: fixed;
            inset: 0;
            background: repeating-linear-gradient(135deg,
                rgba(255,255,255,0.025) 0px,
                rgba(255,255,255,0.025) 2px,
                transparent 2px,
                transparent 6px);
            opacity: 0.55;
            pointer-events: none;
            z-index: -1;
            mix-blend-mode: lighten;
        }

        /* ================================================================
           SHELL — one measure for the whole page.
           Every section aligns to the same left and right edge so the page
           reads as a single column of content, not four stacked widths.
        ================================================================ */
        .tr-shell {
            max-width: 1560px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        /* ================================================================
           HERO — split masthead.
           Left: the claim and how it is measured. Right: the numbers.
           Side by side, the proof lands without a scroll.
        ================================================================ */
        .tr-hero {
            padding: 7.5rem 0 2.5rem;
            position: relative;
        }
        .tr-hero::before {
            content: '';
            position: absolute;
            top: 4rem; left: 26%; transform: translateX(-50%);
            width: 820px; height: 480px;
            background: radial-gradient(ellipse at center, rgba(201,176,55,0.10) 0%, transparent 65%);
            pointer-events: none;
            z-index: 0;
        }
        /* Wrapped Flower 2 — same art and offsets as the footer's bottom edge
           (.bcs-footer .ff-floral in global.css), flipped on Y so it hangs from
           the top instead of rising from the bottom. translateY(-48%) parks
           half the art above the page edge so it reads cut off, mirroring the
           footer's 48%. Desktop only — below the rail breakpoint it crowds the
           nav pill and the masthead. */
        .tr-top-floral {
            position: absolute;
            left: 50%;
            top: 0;
            z-index: 0;
            width: min(1400px, 160%);
            transform: translate(-50%, -48%) scaleY(-1);
            pointer-events: none;
            user-select: none;
        }
        .tr-top-floral img {
            display: block;
            width: 100%;
            height: auto;
            max-width: none;
            opacity: 0.21;
        }

        .tr-hero-grid {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
            gap: clamp(2.5rem, 4.5vw, 5rem);
            align-items: start;
        }

        .tr-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            font-size: 0.68rem;
            font-weight: 800;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--primary-gold);
            padding: 0.4rem 0.95rem;
            border: 1px solid rgba(201, 176, 55, 0.32);
            border-radius: 999px;
            background: rgba(201, 176, 55, 0.04);
            margin-bottom: 1.4rem;
        }
        .tr-eyebrow .tre-dot {
            width: 6px; height: 6px;
            border-radius: 50%;
            background: var(--primary-gold);
            box-shadow: 0 0 8px rgba(201,176,55,0.7);
            animation: trDotPulse 2.4s ease-in-out infinite;
        }
        @keyframes trDotPulse {
            0%, 100% { opacity: 1; transform: scale(1); }
            50%      { opacity: 0.45; transform: scale(0.85); }
        }

        .tr-hero h1 {
            font-size: clamp(2.2rem, 3.6vw, 3.4rem);
            font-weight: 900;
            line-height: 1.08;
            letter-spacing: -0.03em;
            color: var(--light-text);
            margin: 0 0 1rem;
        }
        .tr-hero h1 em {
            font-style: italic;
            display: inline-block;
            padding-bottom: 0.12em;
            padding-right: 0.12em;
            margin-right: -0.12em;
            background: linear-gradient(135deg, var(--primary-gold) 20%, var(--secondary-gold) 80%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .tr-hero-desc {
            font-size: 1rem;
            color: var(--gray-text);
            max-width: 52ch;
            margin: 0 0 1.4rem;
            line-height: 1.6;
        }
        .tr-hero-disclaimer {
            display: inline-block;
            font-size: 0.74rem;
            color: rgba(255,255,255,0.45);
            padding: 0.45rem 0.95rem;
            border: 1px dashed rgba(201,176,55,0.22);
            border-radius: 8px;
            font-style: italic;
        }
        .tr-hero-disclaimer i {
            color: var(--primary-gold);
            margin-right: 0.35rem;
        }

        /* ================================================================
           SCOREBOARD — the right column of the masthead.
           Headline count on a baseline row with its label, then the edge
           metrics, then the supporting detail. Hairlines do the zoning.
        ================================================================ */
        .tr-scoreboard {
            padding-top: 0.6rem;
        }
        .tr-summary-hero {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 0.65rem;
            margin-bottom: 1.8rem;
        }
        .tr-summary-hero-value {
            font-size: clamp(3.4rem, 6.5vw, 6rem);
            font-weight: 900;
            line-height: 0.95;
            letter-spacing: -0.05em;
            font-variant-numeric: tabular-nums;
            background: linear-gradient(135deg, var(--primary-gold) 25%, var(--secondary-gold) 75%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 4px 32px rgba(201,176,55,0.18);
        }
        .tr-summary-hero-label {
            font-size: 0.78rem;
            color: rgba(255,255,255,0.5);
            letter-spacing: 0.18em;
            text-transform: uppercase;
            font-weight: 600;
            line-height: 1.6;
        }
        .tr-summary-hero-label strong {
            display: block;
            color: var(--light-text);
            font-weight: 800;
        }

        /* Shared figure-row treatment: even columns with hairline dividers. */
        .tr-figure-row {
            display: grid;
            gap: 0;
            padding-top: 1.35rem;
            border-top: 1px solid rgba(201,176,55,0.15);
        }
        .tr-summary-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        /* Every column centers on its own share of the row, so the figures
           line up with the centered headline count above them. Padding stays
           symmetric or the centering drifts. */
        .tr-stat {
            position: relative;
            padding: 0 1.4rem;
            text-align: center;
        }
        .tr-stat + .tr-stat::before {
            content: '';
            position: absolute;
            left: 0;
            top: 8%; bottom: 8%;
            width: 1px;
            background: rgba(201,176,55,0.15);
        }
        .tr-stat-value {
            font-size: clamp(1.6rem, 2.4vw, 2.1rem);
            font-weight: 900;
            line-height: 1;
            letter-spacing: -0.03em;
            font-variant-numeric: tabular-nums;
            color: var(--light-text);
            margin-bottom: 0.5rem;
        }
        .tr-stat-value.gold { color: var(--primary-gold); }
        .tr-stat-label {
            font-size: 0.66rem;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.42);
        }

        /* Secondary detail strip — Win Rate / TP1 / Avg Winner / Avg Loser
           sit on the same column rhythm as the edge metrics above. */
        .tr-detail-strip {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            margin-top: 1.6rem;
            padding-top: 1.2rem;
            border-top: 1px dashed rgba(201,176,55,0.18);
        }
        .tr-detail-strip .ds-item {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 0.4rem;
            padding: 0 1.4rem;
        }
        .tr-detail-strip .ds-item + .ds-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 4%; bottom: 4%;
            width: 1px;
            background: rgba(255,255,255,0.07);
        }
        .tr-detail-strip .ds-label {
            order: 2;
            font-size: 0.58rem;
            font-weight: 800;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.4);
        }
        .tr-detail-strip .ds-value {
            order: 1;
            font-size: 1.1rem;
            font-weight: 800;
            font-variant-numeric: tabular-nums;
            line-height: 1;
            color: rgba(255,255,255,0.92);
        }
        .tr-detail-strip .ds-value.gold { color: var(--primary-gold); }
        .tr-detail-strip .ds-value.win  { color: #7adf85; }
        .tr-detail-strip .ds-value.loss { color: #ff8a8a; }

        /* ================================================================
           FOOTNOTE — methodology + disclaimer, a band under the masthead
           on the same two-column rhythm as the hero above it.
        ================================================================ */
        .tr-footnote {
            display: grid;
            grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
            gap: clamp(2.5rem, 4.5vw, 5rem);
            align-items: start;
            margin-top: 2.75rem;
            padding-top: 1.5rem;
            border-top: 1px solid rgba(255,255,255,0.06);
        }
        .tr-fn-notes { display: flex; flex-direction: column; gap: 0.7rem; }
        .tr-fn-method {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.5rem 0.75rem;
            margin-bottom: 0.85rem;
        }
        .tr-fn-label {
            font-size: 0.6rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.3);
        }
        .tr-fn-pill {
            display: inline-flex;
            align-items: baseline;
            gap: 0.3rem;
            padding: 0.2rem 0.55rem;
            border-radius: 5px;
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.06);
        }
        .tr-fn-pill.win  { border-color: rgba(122,223,133,0.14); }
        .tr-fn-pill.loss { border-color: rgba(255,138,138,0.14); }
        .tr-fn-pill-name {
            font-size: 0.5rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.35);
        }
        .tr-fn-pill-val {
            font-size: 0.72rem;
            font-weight: 700;
        }
        .tr-fn-pill.win  .tr-fn-pill-val { color: rgba(122,223,133,0.75); }
        .tr-fn-pill.loss .tr-fn-pill-val { color: rgba(255,138,138,0.75); }
        .tr-fn-ratchet {
            font-size: 0.68rem;
            color: rgba(255,255,255,0.32);
            font-style: italic;
            margin: 0 0 1rem;
        }
        .tr-fn-disclaimer {
            font-size: 0.7rem;
            color: rgba(255,255,255,0.28);
            font-style: italic;
            line-height: 1.6;
            max-width: 88ch;
            margin: 0;
        }
        .tr-fn-disclaimer i { margin-right: 0.3rem; color: rgba(255,255,255,0.22); }
        .tr-fn-disclaimer a { color: rgba(201,176,55,0.5); text-decoration: none; border-bottom: 1px solid rgba(201,176,55,0.2); }

        /* Methodology disclosure: collapses the stock→contract map + ratchet
           note behind a tap target so the proof reaches the visitor sooner. */
        .tr-method {
            margin: 0;
            border: 1px solid rgba(255,255,255,0.07);
            border-radius: 10px;
            background: rgba(255,255,255,0.015);
        }
        .tr-method[open] { background: rgba(255,255,255,0.025); }
        .tr-method-summary {
            list-style: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.45rem;
            padding: 0.6rem 0.9rem;
            font-size: 0.64rem;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.5);
        }
        .tr-method-summary::-webkit-details-marker { display: none; }
        .tr-method-summary i { color: var(--primary-gold); }
        .tr-method-summary::after {
            content: '\f078';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            margin-left: auto;
            font-size: 0.58rem;
            color: rgba(255,255,255,0.35);
            transition: transform 0.2s ease;
        }
        .tr-method[open] .tr-method-summary::after { transform: rotate(180deg); }
        .tr-method-body { padding: 0 0.9rem 0.85rem; }
        .tr-method .tr-fn-ratchet { margin: 0 0 0.5rem; }
        .tr-method .tr-fn-ratchet:last-child { margin-bottom: 0; }

        /* ================================================================
           PERFORMANCE BY TICKER — one card per name, one row across.
           Six names side by side is the comparison; stacking them into two
           rows of three hid the point and burned vertical space.
           ================================================================ */
        .tr-byticker-wrap { margin-top: 2.5rem; }
        .tr-byticker-head {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 1.5rem 2.5rem;
            flex-wrap: wrap;
            margin-bottom: 1.1rem;
            padding-bottom: 0.9rem;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }
        .tr-byticker-title {
            font-size: clamp(1.25rem, 2vw, 1.6rem);
            font-weight: 800;
            letter-spacing: -0.01em;
            color: #fff;
            margin: 0;
        }
        .tr-byticker-sub {
            font-size: 0.82rem;
            color: rgba(255,255,255,0.5);
            max-width: 58ch;
            margin: 0;
            line-height: 1.5;
            text-align: right;
        }
        .tr-byticker-grid {
            display: grid;
            grid-template-columns: repeat(6, minmax(0, 1fr));
            gap: 0.7rem;
        }
        .tr-bt-card {
            background: var(--field-bg, rgba(26,31,46,0.7));
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 14px;
            padding: 0.95rem 0.9rem 1rem;
            transition: border-color 0.2s ease, transform 0.2s ease;
        }
        .tr-bt-card:hover {
            border-color: rgba(201,176,55,0.45);
            transform: translateY(-2px);
        }
        .tr-bt-top {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 0.5rem;
            margin-bottom: 0.75rem;
        }
        .tr-bt-sym {
            font-size: 1.05rem;
            font-weight: 800;
            letter-spacing: 0.02em;
            color: var(--primary-gold);
        }
        .tr-bt-count {
            font-size: 0.6rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.45);
            white-space: nowrap;
        }
        /* Win Rate is the card's only figure, so it carries the weight and
           sits centered in the card under the ticker row. */
        .tr-bt-metric { text-align: center; }
        .tr-bt-mval {
            font-size: 1.85rem;
            font-weight: 800;
            letter-spacing: -0.02em;
            font-variant-numeric: tabular-nums;
            color: rgba(255,255,255,0.95);
            line-height: 1;
        }
        .tr-bt-mval.gold { color: var(--primary-gold); }
        .tr-bt-mval.win  { color: #7adf85; }
        .tr-bt-mval.loss { color: #ff8a8a; }
        .tr-bt-mlabel {
            font-size: 0.56rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.45);
            margin-top: 0.4rem;
        }
        .tr-bt-empty {
            grid-column: 1 / -1;
            text-align: center;
            color: rgba(255,255,255,0.4);
            font-size: 0.85rem;
            padding: 1.5rem 0;
        }

        /* ================================================================
           WORK AREA — filter rail beside the ledger.
           The controls stay pinned in the left margin while a 700-row
           ledger scrolls past, so filtering to one name is a click, not a
           scroll back to the top.
        ================================================================ */
        .tr-work-wrap { margin: 2.5rem auto 3rem; }
        .tr-work {
            display: grid;
            grid-template-columns: 288px minmax(0, 1fr);
            gap: 1.5rem;
            align-items: start;
        }
        .tr-rail {
            position: sticky;
            top: 6.5rem;
            display: flex;
            flex-direction: column;
            gap: 0.9rem;
            max-height: calc(100vh - 8rem);
            overflow-y: auto;
            scrollbar-width: thin;
        }
        .tr-rail-panel {
            background: rgba(10,14,22,0.55);
            border: 1px solid rgba(255,255,255,0.07);
            border-radius: 14px;
            padding: 1.15rem 1.15rem 1.25rem;
        }
        .tr-rail-head {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 0.75rem;
            padding-bottom: 0.9rem;
            margin-bottom: 1.15rem;
            border-bottom: 1px solid rgba(255,255,255,0.07);
        }
        .tr-rail-groups { display: flex; flex-direction: column; gap: 1.5rem; }

        .tr-fgroup { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
        .tr-flabel {
            font-size: 0.5rem; font-weight: 800; letter-spacing: 0.2em;
            text-transform: uppercase; color: rgba(255,255,255,0.3);
        }

        /* Filter selects — native control, branded closed state. The option
           list stays OS-rendered (free keyboard + mobile picker); color-scheme
           and the option background keep that popup dark on every platform. */
        .tr-select-wrap { position: relative; }
        .tr-select-wrap::after {
            content: '\f078';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            position: absolute;
            right: 0.8rem;
            top: 50%;
            transform: translateY(-50%);
            font-size: 0.58rem;
            color: rgba(201,176,55,0.75);
            pointer-events: none;
        }
        .tr-select {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            padding: 0.55rem 2.1rem 0.55rem 0.8rem;
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 9px;
            background: rgba(8,11,15,0.75);
            color: var(--light-text);
            font-family: inherit;
            font-size: 0.82rem;
            font-weight: 600;
            line-height: 1.35;
            color-scheme: dark;
            cursor: pointer;
            outline: none;
            transition: border-color 0.22s ease, box-shadow 0.22s ease;
        }
        .tr-select:hover { border-color: rgba(201,176,55,0.35); }
        .tr-select:focus-visible {
            border-color: rgba(201,176,55,0.55);
            box-shadow: 0 0 0 2px rgba(201,176,55,0.1);
        }
        .tr-select option { background: #0d111a; color: rgba(255,255,255,0.9); }
        .tr-results {
            font-size: 0.74rem; color: rgba(255,255,255,0.4); white-space: nowrap;
        }
        .tr-results b { color: var(--primary-gold); font-weight: 800; font-variant-numeric: tabular-nums; }
        .tr-results .tr-results-of { opacity: 0.6; }

        /* return panel — label · slider · modeled figure, stacked in the rail */
        .tr-ret-lead { display: flex; flex-direction: column; gap: 0.16rem; }
        .tr-ret-lead .tr-flabel { color: rgba(201,176,55,0.62); }
        .tr-ret-sub { font-size: 0.78rem; color: rgba(255,255,255,0.58); font-weight: 600; }

        /* slider — custom handle/fill/value glide on the site curve */
        .tr-slider { position: relative; min-width: 0; padding-top: 2.1rem; }
        .tr-slider-track { position: relative; height: 4px; border-radius: 999px; background: rgba(255,255,255,0.09); }
        .tr-slider-fill {
            position: absolute; top: 0; left: 0; width: 0; height: 100%;
            border-radius: 999px; background: var(--primary-gold);
            transition: width 0.36s cubic-bezier(0.12,1,0.28,1);
        }
        .tr-slider-handle {
            position: absolute; top: 50%; left: 0; width: 15px; height: 15px;
            border-radius: 50%; background: var(--primary-gold); border: 2px solid #0c0f16;
            box-shadow: 0 1px 3px rgba(0,0,0,0.55); transform: translate(-50%,-50%);
            transition: left 0.36s cubic-bezier(0.12,1,0.28,1);
        }
        .tr-slider-val {
            position: absolute; top: 0; left: 0; transform: translateX(-50%);
            font-size: 0.8rem; font-weight: 800; font-variant-numeric: tabular-nums;
            color: var(--light-text); white-space: nowrap;
            transition: left 0.36s cubic-bezier(0.12,1,0.28,1);
        }
        .tr-slider-ends {
            display: flex; justify-content: space-between; margin-top: 0.7rem;
            font-size: 0.54rem; color: rgba(255,255,255,0.26); font-variant-numeric: tabular-nums;
        }
        .tr-slider input[type=range] {
            position: absolute; top: 1.8rem; left: -8px; width: calc(100% + 16px);
            margin: 0; height: 18px; cursor: pointer;
            -webkit-appearance: none; appearance: none; background: transparent;
        }
        .tr-slider input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none; width: 22px; height: 22px; opacity: 0; cursor: grab;
        }
        .tr-slider input[type=range]::-moz-range-thumb {
            width: 22px; height: 22px; opacity: 0; border: none; cursor: grab;
        }

        /* modeled readout — engine portfolio total, fenced as modeled */
        .tr-modeled-readout {
            margin-top: 1.35rem;
            padding-top: 1.1rem;
            border-top: 1px solid rgba(255,255,255,0.07);
        }
        .tr-modeled-flag {
            display: inline-block;
            font-size: 0.5rem; font-weight: 800; letter-spacing: 0.14em;
            text-transform: uppercase; color: rgba(201,176,55,0.7);
            border: 1px solid rgba(201,176,55,0.28);
            border-radius: 4px;
            padding: 0.14rem 0.4rem;
            margin-bottom: 0.55rem;
        }
        .tr-modeled-amt {
            font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums;
            line-height: 1; color: #7adf85;
        }
        .tr-modeled-amt.loss { color: #ff8a8a; }
        .tr-modeled-cap { font-size: 0.62rem; color: rgba(255,255,255,0.42); margin-top: 0.35rem; letter-spacing: 0.04em; }

        @media (prefers-reduced-motion: reduce) {
            .tr-slider-fill, .tr-slider-handle, .tr-slider-val { transition: none; }
        }

        /* ================================================================
           TABLE
        ================================================================ */
        .tr-ledger { min-width: 0; position: relative; }
        .tr-table-shell {
            background: rgba(10,14,22,0.65);
            border: 1px solid rgba(201,176,55,0.18);
            border-radius: 16px;
            overflow-x: auto;
            overflow-y: hidden;
            position: relative;
            -webkit-overflow-scrolling: touch;
        }
        .tr-table-shell::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--primary-gold), var(--secondary-gold), var(--primary-gold), transparent);
        }
        .tr-table {
            width: 100%;
            min-width: 680px;
            border-collapse: collapse;
            font-size: 0.85rem;
        }
        .tr-table thead th {
            text-align: left;
            font-size: 0.62rem;
            font-weight: 800;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.45);
            padding: 1rem 1.1rem;
            background: rgba(8,11,15,0.6);
            border-bottom: 1px solid rgba(201,176,55,0.12);
            white-space: nowrap;
        }
        .tr-table thead th.right { text-align: right; }
        .tr-table tbody td {
            padding: 0.9rem 1.1rem;
            border-bottom: 1px solid rgba(255,255,255,0.04);
            color: rgba(255,255,255,0.85);
            vertical-align: middle;
        }
        .tr-table tbody tr:last-child td { border-bottom: none; }
        .tr-table tbody tr:hover { background: rgba(201,176,55,0.04); }
        .tr-table .col-right { text-align: right; }

        .tr-ticker {
            font-weight: 800;
            letter-spacing: 0.04em;
            color: var(--light-text);
        }
        .tr-dir-pill {
            display: inline-block;
            padding: 0.15rem 0.5rem;
            border-radius: 4px;
            font-size: 0.65rem;
            font-weight: 800;
            letter-spacing: 0.1em;
        }
        .tr-dir-pill.call { background: rgba(76,175,80,0.13); color: #7adf85; }
        .tr-dir-pill.put  { background: rgba(248,113,113,0.13); color: #ff9a9a; }
        .tr-pnl {
            font-weight: 800;
            letter-spacing: -0.01em;
        }
        .tr-pnl.win  { color: #7adf85; }
        .tr-pnl.loss { color: #ff8a8a; }
        .tr-exit-reason {
            font-size: 0.74rem;
            color: rgba(255,255,255,0.55);
        }
        .tr-closed-time {
            font-size: 0.74rem;
            color: rgba(255,255,255,0.42);
        }

        /* Merged Trade identity cell — ticker + direction on top, strike/expiry below */
        .tr-trade-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
        .tr-trade-sub {
            font-size: 0.68rem;
            color: rgba(255,255,255,0.42);
            margin-top: 0.25rem;
            font-variant-numeric: tabular-nums;
        }
        /* Stock-move entry → exit subtext under the measured P/L */
        .tr-pnl-sub {
            display: block;
            font-size: 0.62rem;
            font-weight: 600;
            color: rgba(255,255,255,0.4);
            margin-top: 0.15rem;
            font-variant-numeric: tabular-nums;
        }
        /* Why a red percent can sit under the Wins filter: TP1 was reached
           before the exit gave the move back */
        .tr-pnl-tpnote {
            color: rgba(179,161,125,0.85);
            letter-spacing: 0.04em;
            text-transform: uppercase;
            font-size: 0.56rem;
        }
        /* Fence the modeled column off from the measured ones */
        .tr-table thead th.tr-modeled-col { border-left: 1px solid rgba(201,176,55,0.22); }
        .tr-table tbody td.tr-modeled {
            border-left: 1px solid rgba(201,176,55,0.22);
            background: rgba(201,176,55,0.035);
        }
        .tr-modeled-tag {
            display: block;
            font-size: 0.5rem;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgba(201,176,55,0.6);
            margin-top: 0.25rem;
        }

        .tr-state {
            text-align: center;
            padding: 3rem 1rem !important;
            color: rgba(255,255,255,0.45);
            font-style: italic;
        }
        .tr-state i {
            color: var(--primary-gold);
            margin-right: 0.4rem;
        }
        .tr-state.error i { color: #ff8a8a; }

        .tr-load-more {
            display: block;
            margin: 1.5rem auto 0;
            font-family: inherit;
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            padding: 0.75rem 1.6rem;
            border-radius: 999px;
            border: 1px solid rgba(201,176,55,0.4);
            background: rgba(10,14,22,0.6);
            color: var(--primary-gold);
            cursor: pointer;
            transition: all 0.22s ease;
        }
        .tr-load-more:hover {
            background: rgba(201,176,55,0.1);
            border-color: var(--primary-gold);
        }
        .tr-load-more:disabled { opacity: 0.4; cursor: not-allowed; }

        /* ================================================================
           RESPONSIVE
        ================================================================ */
        /* Between 1400 and 1080 the six ticker cards get cramped; go to three. */
        @media (max-width: 1400px) {
            .tr-byticker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        }

        /* Rail collapses into a horizontal control band above the ledger. */
        @media (max-width: 1080px) {
            .tr-top-floral { display: none; }
            .tr-shell { padding: 0 1.5rem; }
            .tr-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
            .tr-footnote { grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2.25rem; }
            .tr-hero::before { left: 50%; }
            .tr-scoreboard { padding-top: 0; }
            .tr-byticker-sub { text-align: left; }
            .tr-work { grid-template-columns: 1fr; gap: 1.25rem; }
            .tr-rail {
                position: static;
                max-height: none;
                overflow: visible;
                flex-direction: row;
                flex-wrap: wrap;
                gap: 1rem;
            }
            .tr-rail-panel { flex: 1 1 320px; }
            .tr-rail-groups {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 1rem;
            }
            .tr-rail-return { display: flex; flex-direction: column; justify-content: center; }
            .tr-modeled-readout { margin-top: 1.1rem; }
        }

        @media (max-width: 900px) {
            .tr-summary-row { gap: 1.25rem 0.5rem; }
            .tr-stat { padding: 0 1rem; }
            .tr-detail-strip .ds-item { padding: 0 1rem; }
            .tr-table thead th,
            .tr-table tbody td { padding: 0.7rem 0.65rem; font-size: 0.78rem; }
        }

        @media (max-width: 760px) {
            .tr-byticker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .tr-detail-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.1rem; }
            .tr-detail-strip .ds-item:nth-child(odd)::before { display: none; }
        }

        @media (max-width: 640px) {
            .tr-shell { padding: 0 1.25rem; }
            .tr-hero { padding: 6.5rem 0 2rem; }
            .tr-summary-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
            .tr-stat { padding: 0 0.7rem; }
            .tr-stat + .tr-stat::before { display: none; }
            .tr-rail-panel { flex-basis: 100%; padding: 1rem; }
            /* One row of three circular selects (mirrors the homepage
               Take It / Wait / Skip circles), label under each circle. */
            .tr-rail-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
            .tr-rail-groups .tr-fgroup {
                display: flex;
                flex-direction: column-reverse;
                align-items: center;
                gap: 0.55rem;
            }
            .tr-select-wrap { width: 4.6rem; }
            .tr-select-wrap::after {
                top: auto;
                bottom: 0.7rem;
                right: 50%;
                transform: translateX(50%);
                font-size: 0.5rem;
            }
            .tr-select {
                aspect-ratio: 1;
                border-radius: 50%;
                padding: 0 0 0.9rem;
                text-align: center;
                text-align-last: center;
                font-size: 0.78rem;
                border-color: rgba(201,176,55,0.35);
            }
            /* Badge stays left; amount rides the right edge. The scope caption
               moves to the card's top-right corner, opposite the panel title. */
            .tr-modeled-readout {
                display: grid;
                grid-template-columns: auto minmax(0, 1fr);
                align-items: center;
            }
            .tr-modeled-amt { grid-column: 2; text-align: right; }
            .tr-rail-return { position: relative; }
            .tr-modeled-cap {
                position: absolute;
                top: 1rem;
                right: 1rem;
                margin-top: 0;
                text-align: right;
            }
            .tr-flabel { font-size: 0.48rem; letter-spacing: 0.16em; line-height: 1.2; }
            .tr-dir-pill {
                padding: 0.14rem 0.4rem;
                font-size: 0.6rem;
                letter-spacing: 0.08em;
            }

            /* ----------------------------------------------------------------
               TABLE → STACKED CARDS (mobile)
               Each closed trade becomes a self-contained card. The measured
               Stock Move is the hero line; the modeled Potential Return is
               demoted to a paired supporting figure. No horizontal squeeze.
               ---------------------------------------------------------------- */
            .tr-table-shell {
                overflow: visible;
                background: none;
                border: none;
                border-radius: 0;
            }
            .tr-table-shell::before { display: none; }
            .tr-table { min-width: 0; width: 100%; font-size: 0.85rem; }
            /* Visually hide the header row; labels move onto each cell */
            .tr-table thead {
                position: absolute;
                width: 1px; height: 1px;
                margin: -1px; padding: 0; border: 0;
                overflow: clip; clip: rect(0 0 0 0); white-space: nowrap;
            }
            .tr-table, .tr-table tbody { display: block; width: 100%; }
            /* Card as a trade statement: identity reads down the left edge,
               the money reads down the right edge. Two clean alignment columns,
               no empty space. Outcome is the top-right hero. */
            .tr-table tbody tr {
                display: grid;
                grid-template-columns: 1fr auto;
                column-gap: 1.25rem;
                row-gap: 0.95rem;
                padding: 1.1rem 1.2rem;
                margin-bottom: 0.7rem;
                background: rgba(10,14,22,0.6);
                border: 1px solid rgba(201,176,55,0.18);
                border-radius: 14px;
                box-shadow: 0 10px 28px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.03);
            }
            .tr-table tbody tr:hover { background: rgba(10,14,22,0.6); }
            .tr-table tbody td {
                display: block;
                padding: 0 !important;
                border: none !important;
                background: none !important;
                white-space: normal;
                min-width: 0;
            }
            .tr-table tbody td[data-label]::before {
                content: attr(data-label);
                display: block;
                font-size: 0.5rem;
                font-weight: 800;
                letter-spacing: 0.16em;
                text-transform: uppercase;
                color: rgba(255,255,255,0.36);
                margin-bottom: 0.32rem;
            }
            /* Left column reads down: identity, contract, exit */
            .tr-table td.tr-trade       { order: 0; grid-column: 1; text-align: left !important; }
            .tr-table td.tr-pr:not(.tr-modeled) { order: 2; grid-column: 1; text-align: left !important; }
            .tr-table td.tr-exit-reason { order: 4; grid-column: 1; text-align: left !important; }
            /* Right column reads down, edge-aligned: outcome, modeled, closed */
            .tr-table td.tr-pnl         { order: 1; grid-column: 2; text-align: right !important; }
            .tr-table td.tr-modeled     { order: 3; grid-column: 2; text-align: right !important; }
            .tr-table td.tr-closed-time { order: 5; grid-column: 2; text-align: right !important; }
            /* Row 1 — identity + outcome headline. No labels here; the ticker
               and the colored % speak for themselves. Three type treatments do
               the zoning, so no divider lines are needed. */
            .tr-table tbody td.tr-pnl::before { content: none; }
            .tr-table td.tr-trade .tr-ticker { font-size: 1.02rem; }
            .tr-table td.tr-trade .tr-trade-sub { font-size: 0.7rem; margin-top: 0.4rem; color: rgba(255,255,255,0.45); }
            .tr-table td.tr-pnl {
                font-size: 1.45rem;
                font-weight: 800;
                line-height: 1.05;
                white-space: nowrap;
            }
            .tr-table td.tr-pnl .tr-pnl-sub {
                display: block;
                font-size: 0.62rem;
                font-weight: 600;
                margin-top: 0.42rem;
                color: rgba(255,255,255,0.4);
            }
            /* Row 2: contract + modeled values. Modeled label is gold-tinted,
               the single cue that fences it. */
            .tr-table td.tr-pr:not(.tr-modeled),
            .tr-table td.tr-modeled { font-size: 1rem; font-weight: 800; white-space: nowrap; }
            .tr-table td.tr-modeled[data-label]::before { color: rgba(201,176,55,0.62); }
            .tr-table td .tr-pr-sub { font-size: 0.58rem; margin-top: 0.2rem; color: rgba(255,255,255,0.4); font-weight: 600; }
            /* Row 3: quiet meta */
            .tr-table td.tr-exit-reason { font-size: 0.72rem; color: rgba(255,255,255,0.5); }
            .tr-table td.tr-closed-time { font-size: 0.72rem; color: rgba(255,255,255,0.42); white-space: nowrap; }
            /* Loading / empty / error rows stay full-width, not cards */
            .tr-table tbody tr:has(td.tr-state) {
                display: block;
                border: none;
                background: none;
                box-shadow: none;
                padding: 0;
                margin: 0;
            }
            .tr-table td.tr-state { grid-column: 1 / -1; text-align: center !important; }
            /* Hero count: a touch tighter so a trade is reachable sooner */
            .tr-summary-hero-value { font-size: clamp(3.2rem, 14vw, 5rem); }
        }

        /* Stay two-up all the way down — six names read as three quick pairs
           instead of a six-card scroll. Tighten the type so the ticker and
           its closed count still share one line at 360px. */
        @media (max-width: 460px) {
            .tr-byticker-grid { gap: 0.55rem; }
            .tr-bt-card { padding: 0.85rem 0.7rem 0.9rem; }
            .tr-bt-top { gap: 0.35rem; margin-bottom: 0.6rem; }
            .tr-bt-sym { font-size: 0.95rem; }
            .tr-bt-count { font-size: 0.54rem; letter-spacing: 0.03em; }
            .tr-bt-mval { font-size: 1.6rem; }
        }

        @media (max-width: 360px) {
            .tr-table tbody tr { padding: 0.95rem 1rem; column-gap: 0.9rem; row-gap: 0.85rem; }
            .tr-table td.tr-pnl { font-size: 1.2rem; }
            .tr-table td.tr-pr:not(.tr-modeled),
            .tr-table td.tr-modeled { font-size: 0.92rem; }
            .tr-dir-pill {
                padding: 0.12rem 0.32rem;
                font-size: 0.55rem;
            }
        }

        /* ================================================================
           POTENTIAL RETURN — table cell (the control lives in the rail)
        ================================================================ */
        .tr-pr { font-variant-numeric: tabular-nums; font-weight: 800; white-space: nowrap; }
        .tr-pr.win  { color: #7adf85; }
        .tr-pr.loss { color: #ff8a8a; }
        .tr-pr-sub {
            display: block; font-size: 0.62rem; font-weight: 600;
            color: rgba(255,255,255,0.4); margin-top: 0.15rem;
        }
        .tr-pr-na   { color: rgba(255,255,255,0.3); font-weight: 700; }
        .tr-pr-skip { color: rgba(255,255,255,0.55); font-weight: 700; font-size: 0.82rem; }