/* ── Escape the 1080px max-width constraint from MainLayout ─ */
    .sg-main-inner:has(.ts-page) {
        max-width: none !important;
        padding: 0 !important;
    }

    /* ── Page layout ────────────────────────────────────────── */
    .ts-page {
        display: flex;
        flex-direction: column;
        gap: 18px;
        padding: 24px 28px;
        min-height: 100vh;
    }

    /* Adaptive axes — one self-describing CARD per participant axis (no shared table headers to lose). */
    .ts-axes { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sg-border); }
    .ts-axes-head { display: flex; gap: 10px 24px; margin-bottom: 12px; font-size: 13px; color: var(--sg-text); flex-wrap: wrap; }
    .ts-axes-head .ts-updated { color: var(--sg-muted); font-variant-numeric: tabular-nums; }
    .ts-axes-dim { color: var(--sg-muted); }

    .ts-axes-sub { font-size: 11px; color: var(--sg-muted); margin: -4px 0 10px; cursor: help; }
    .ts-ax-cards { display: flex; flex-direction: column; gap: 10px; }
    .ts-ax-card { border: 1px solid var(--sg-border); border-radius: 10px; padding: 11px 12px; background: rgba(255,255,255,.015); }
    .ts-ax-hdr { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
    .ts-ax-name { color: var(--sg-text); font-weight: 600; font-size: 13.5px; }
    /* "Filter similar" — ghost pill at the right edge of the axis header. Adds this axis to the advanced
       filters (AlphaSearch wires the callback; the /token page renders no button — no delegate). */
    .ts-ax-similar {
        margin-left: auto; flex: 0 0 auto;
        background: none; border: 1px solid rgba(167,139,250,.35); border-radius: 999px;
        color: #c4b5fd; cursor: pointer; font-size: 11px; font-weight: 600; letter-spacing: .02em;
        line-height: 1; padding: 5px 10px; white-space: nowrap;
        transition: background-color .15s, border-color .15s, color .15s;
    }
    .ts-ax-similar:hover { background: rgba(167,139,250,.12); border-color: rgba(167,139,250,.6); color: #ddd6fe; }
    .ts-ax-similar:focus-visible { outline: 2px solid rgba(167,139,250,.6); outline-offset: 2px; }

    /* CATEGORY / FLOW badge — part of the header; explanation lives in its tooltip (tap on mobile), not permanent text. */
    .ts-tag { font-style: normal; font-size: 9px; text-transform: uppercase; letter-spacing: .07em; font-weight: 800;
        padding: 2px 7px; border-radius: 5px; border: 1px solid transparent; cursor: help; background: none; }
    .ts-tag--category { color: #c4b5fd; background: rgba(167,139,250,.12); border-color: rgba(167,139,250,.3); }
    .ts-tag--flow { color: #c79bff; background: rgba(150,90,255,.14); border-color: rgba(150,90,255,.32); }
    .ts-tag--internal { color: #9aa4b2; background: rgba(154,164,178,.12); border-color: rgba(154,164,178,.3); }

    /* Metric grid: label · level · value on one row — one block per Volume / Transactions / Wallets.
       Labels and values never lose their pairing. */
    .ts-ax-metrics { display: flex; flex-direction: column; gap: 8px; }
    .ts-ax-metric { display: grid; grid-template-columns: 92px auto 1fr; column-gap: 8px; align-items: baseline; font-size: 12.5px; }
    .ts-ax-mlabel { grid-column: 1; grid-row: 1; color: var(--sg-muted); font-size: 11px; }
    .ts-ax-mval { grid-column: 3; grid-row: 1; color: var(--sg-text); text-align: right;
        font-variant-numeric: tabular-nums; font-family: var(--flt-mono, ui-monospace, monospace); }
    .ts-ax-level { grid-column: 2; grid-row: 1; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
        padding: 1px 7px; border-radius: 5px; justify-self: start; }
    .ts-ax-level--low { color: var(--sg-muted); background: rgba(255,255,255,.06); }
    .ts-ax-level--mod { color: #6ec5ff; background: rgba(60,180,255,.14); }
    .ts-ax-level--high { color: #ffd232; background: rgba(255,210,50,.14); }
    .ts-ax-level--extreme { color: #ff7a45; background: rgba(255,122,69,.16); }

    /* Direction — arrow + colour + the numbers it's based on. */
    .ts-ax-dir-block { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--flt-line, rgba(255,255,255,.07));
        display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
    .ts-ax-dir { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
    .ts-ax-dir--in { color: #3fc878; }
    .ts-ax-dir--out { color: #ff5d6c; }
    .ts-ax-dir--neutral { color: var(--sg-muted); }
    .ts-ax-dir--flow { color: #c79bff; }
    .ts-ax-dir--na { color: rgba(255,255,255,.3); }
    .ts-ax-dir-nums { flex: 1 1 100%; font-size: 11px; color: rgba(255,255,255,.55);
        font-variant-numeric: tabular-nums; font-family: var(--flt-mono, ui-monospace, monospace); }
    /* Two-leg corridor direction: verb · group-arrow · USD per leg, then the net/total line. */
    .ts-ax-legs { flex: 1 1 100%; display: flex; flex-direction: column; gap: 5px; margin-top: 2px; }
    .ts-ax-leg { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 8px; }
    .ts-ax-leg-usd { font-size: 12.5px; color: var(--sg-text); text-align: right;
        font-variant-numeric: tabular-nums; font-family: var(--flt-mono, ui-monospace, monospace); }
    .ts-ax-leg-sum { font-size: 11px; color: rgba(255,255,255,.55); padding-top: 3px;
        border-top: 1px dashed var(--flt-line, rgba(255,255,255,.07));
        font-variant-numeric: tabular-nums; font-family: var(--flt-mono, ui-monospace, monospace); }
    .ts-detail-na { color: var(--sg-muted); font-style: italic; cursor: help; }
    .ts-dexscreener { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px;
        font-weight: 600; color: #c4b5fd; text-decoration: none; padding: 6px 12px; border-radius: 7px;
        border: 1px solid rgba(167,139,250,.28); background: rgba(167,139,250,.1); }
    .ts-dexscreener:hover { background: rgba(167,139,250,.18); }
    /* Lighter link — reuses the DexScreener chip shape with a distinct (violet) accent + small left gap. */
    .ts-lighter { margin-left: 8px; color: #c4b5fd; border-color: rgba(124,92,255,.32); background: rgba(124,92,255,.12); }
    .ts-lighter:hover { background: rgba(124,92,255,.22); }
    /* The in-detail Swap is mobile-only (desktop keeps Swap in the row's action column). */
    .ts-detail-swap { display: none; }
    .ts-axes-showall { background: none; border: none; color: #c4b5fd; cursor: pointer; font-size: 12px; padding: 6px 0; }

    /* ── Zone header for the basic filters, so the flat list of groups reads as a titled block ── */
    .ts-filters-head { flex: 1 1 100%; width: 100%; display: flex; align-items: baseline; gap: 10px;
        padding-bottom: 6px; margin-bottom: 2px; }
    .ts-filters-head-title { font-family: var(--flt-mono, inherit); text-transform: uppercase; letter-spacing: .12em;
        font-size: 13px; font-weight: 700; color: var(--sg-text); }
    .ts-filters-head-sub { font-family: var(--flt-mono, inherit); text-transform: uppercase; letter-spacing: .12em;
        font-size: 10px; color: var(--flt-accent-strong, #c4b5fd); opacity: .8; }

    /* ── Modules: Advanced + Save become distinct nested cards so the eye finds structure ── */
    .ts-mod { flex: 1 1 100%; width: 100%; margin-top: 8px;
        border: 1px solid var(--flt-line, rgba(255,255,255,.08)); border-radius: 11px;
        background: rgba(255,255,255,0.02); overflow: hidden;
        box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset; }
    .ts-mod--accent { border-left: 2px solid rgba(167,139,250,.35); }
    .ts-mod--accent.is-applied { border-left-color: var(--flt-accent, #a78bfa);
        box-shadow: 0 0 0 1px rgba(167,139,250,.14), 0 8px 30px rgba(0,0,0,.35); }

    /* Module header row (shared by Advanced bar + Save head) */
    .ts-mod-head, .ts-adv-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 11px 13px; background: rgba(255,255,255,0.022); }
    .ts-mod--accent .ts-adv-bar { background: rgba(167,139,250,.05); }
    .ts-mod-title { font-family: var(--flt-mono, inherit); text-transform: uppercase; letter-spacing: .08em;
        font-size: 12.5px; font-weight: 700; color: var(--sg-text); }
    .ts-mod-sub { font-family: var(--flt-mono, inherit); text-transform: uppercase; letter-spacing: .12em;
        font-size: 9.5px; color: var(--sg-muted); opacity: .7; margin-left: auto; }
    .ts-mod-head .ts-mod-sub { margin-left: 8px; }
    .ts-mod-body { padding: 13px; display: flex; flex-direction: column; gap: 9px;
        border-top: 1px solid var(--flt-line, rgba(255,255,255,.07)); background: rgba(0,0,0,.16); }

    .ts-adv-expand { background: none; border: none; color: var(--sg-text); cursor: pointer; padding: 0;
        display: inline-flex; align-items: center; gap: 8px; }
    .ts-adv-expand .ts-mod-sub { margin-left: 0; }
    .ts-adv-expand > .bi { color: var(--flt-accent-strong, #c4b5fd); font-size: 12px; }
    .ts-adv-expand:disabled { opacity: .4; cursor: not-allowed; }

    /* apply toggle reads as a state switch: dim "apply" → lit "applied" */
    .ts-adv-apply { display: inline-flex; align-items: center; gap: 6px; color: var(--sg-muted); font-size: 11px;
        cursor: pointer; text-transform: uppercase; letter-spacing: .08em; padding: 3px 8px; border-radius: 999px;
        border: 1px solid transparent; }
    .ts-adv-apply.is-on { color: var(--flt-accent-strong, #c4b5fd); border-color: var(--flt-accent-line, rgba(167,139,250,.5));
        background: var(--flt-accent-soft, rgba(167,139,250,.13)); }

    .ts-adv-panel { padding: 13px; border-top: 1px solid var(--flt-line, rgba(255,255,255,.07)); background: rgba(0,0,0,.22); }

    .ts-save-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
    .ts-save-row .sg-input { flex: 1 1 auto; min-width: 0; }
    .ts-save-name { min-width: 0; }
    .ts-subscribe-btn { align-self: flex-start; border-color: var(--flt-accent-line, rgba(167,139,250,.6));
        color: var(--flt-accent-strong, #c4b5fd); }
    .ts-save-status { color: var(--sg-muted); font-size: 12px; margin: 2px 0 0; }
    .ts-connect-agent { margin-top: 8px; }
    .ts-agent-note { color: var(--sg-muted); font-size: 12px; margin: 6px 0 0; }
    .ts-agent-note a { color: #c4b5fd; text-decoration: none; }
    .ts-agent-note a:hover { text-decoration: underline; }
    .ts-save-note { color: var(--sg-muted); font-size: 11px; line-height: 1.4; margin: 0 0 2px; opacity: .85; }

    /* "Only on Lighter" basic toggle */
    .ts-lighter-toggle { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 12.5px;
        padding: 7px 11px; border-radius: 9px; border: 1px solid var(--sg-border, rgba(255,255,255,.12));
        color: var(--sg-muted); user-select: none; }
    .ts-lighter-toggle input { accent-color: #7c5cff; }
    .ts-lighter-toggle .bi { color: #c4b5fd; }
    .ts-lighter-toggle.is-on { border-color: rgba(124,92,255,.5); color: var(--sg-text, #e7eefc); background: rgba(124,92,255,.1); }

    /* holder-mix + expected-move gates, relocated inside Advanced (divider from the adaptive builder) */
    .ts-adv-basics { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px;
        padding-bottom: 12px; border-bottom: 1px dashed var(--sg-border, rgba(255,255,255,.1)); }

    /* Saved-filter rows — tidy rounded pills, NOT full width */
    .ts-saved-list { display: flex; flex-direction: column; gap: 7px; margin: 8px 0; }
    .ts-saved-item { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; max-width: 100%;
        padding: 5px 7px 5px 13px; border-radius: 999px; font-size: 12.5px;
        border: 1px solid var(--sg-border, rgba(255,255,255,.14)); background: var(--sg-surface-2, rgba(255,255,255,.03)); }
    .ts-saved-name { font-weight: 600; color: var(--sg-text, #e7eefc); overflow: hidden; text-overflow: ellipsis;
        white-space: nowrap; max-width: 190px; }
    .ts-saved-actions { display: inline-flex; align-items: center; gap: 4px; }
    .ts-saved-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
        border-radius: 50%; border: 1px solid transparent; background: rgba(255,255,255,.05); color: var(--sg-muted);
        cursor: pointer; font-size: 12px; padding: 0; }
    .ts-saved-btn:hover { background: rgba(255,255,255,.12); color: #e7eefc; }
    .ts-saved-btn.ts-del:hover { background: rgba(255,107,107,.18); color: #ff8c8c; }
    .ts-saved-btn.ts-bell.is-on { color: #36d399; background: rgba(54,211,153,.14); }

    /* Subscribed row: brighter border + a shimmer that flows AROUND the perimeter only (active-process cue).
       A linear-gradient highlight masked to the 1px border ring; its background-position animates so the glow
       sweeps along the edge. Uses only mask + background-position — no @property (which Razor can't parse). */
    .ts-saved-item.is-live { border-color: rgba(54,211,153,.6); position: relative; }
    .ts-saved-item.is-live::after {
        content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
        background: linear-gradient(90deg, transparent 0%, #36d399 35%, #a78bfa 50%, #36d399 65%, transparent 100%);
        background-size: 250% 100%;
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor; mask-composite: exclude;
        animation: tsRingSweep 2.6s linear infinite;
    }
    @keyframes tsRingSweep { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

    .ts-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
    }
    .ts-header-left  { display: flex; align-items: center; gap: 10px; }
    /* Top-align so the bell and the Active Search button sit level; the hint hangs BELOW the button (in its
       column) instead of vertically re-centering the button and shoving it above the bell. */
    .ts-header-right { display: flex; align-items: flex-start; gap: 8px; }
    .ts-header-ico   { font-size: 22px; color: #6ec5ff; }
    .ts-header-title { font-size: 22px; font-weight: 600; color: var(--sg-text); }

    .ts-new-badge {
        background: rgba(60,200,120,.18);
        border: 1px solid rgba(60,200,120,.35);
        color: #3fc878;
        border-radius: 999px;
        padding: 2px 10px;
        font-size: 12px;
        font-weight: 600;
        animation: ts-pulse 1.4s ease-in-out infinite;
    }
    @keyframes ts-pulse {
        0%, 100% { opacity: 1; }
        50%       { opacity: .55; }
    }

    /* Live button */
    .ts-live-btn, .ts-live-btn--active {
        display: inline-flex; align-items: center; gap: 7px;
        border-radius: 12px; padding: 7px 14px; cursor: pointer;
        border: 1px solid var(--sg-border);
        background: rgba(255,255,255,.04);
        color: var(--sg-text);
        transition: background .15s, border-color .15s;
    }
    .ts-live-btn--active {
        border-color: rgba(60,200,120,.45);
        background: rgba(60,200,120,.12);
        color: #3fc878;
    }
    .ts-live-dot {
        width: 8px; height: 8px; border-radius: 50%;
        background: var(--sg-muted);
        transition: background .3s;
    }
    .ts-live-dot--on {
        background: #3fc878;
        box-shadow: 0 0 6px #3fc878;
        animation: ts-dot-blink 1.2s ease-in-out infinite;
    }
    @keyframes ts-dot-blink {
        0%,100% { opacity: 1; }
        50%      { opacity: .3; }
    }

    /* ── Body: sidebar + results ─────────────────────────────── */
    .ts-body {
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }

    /* ── Filters: a PINNED TOP BAR (was a 260px sidebar) ──────
       Filters now sit above the results and stick to the top while the list scrolls, so the table gets
       the full page width and the controls stay reachable. Groups flow horizontally and wrap. */
    .ts-filters {
        width: 100%;
        flex-shrink: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 12px 16px;
        position: sticky;
        top: 0;
        z-index: 5;
        max-height: none;
        overflow: visible;
    }
    .ts-filters .ts-filter-group { min-width: 150px; }
    .ts-filters .ts-search-btn,
    .ts-filters .ts-reset-btn { width: auto; min-width: 96px; }
    .ts-filter-group   { display: flex; flex-direction: column; gap: 6px; }
    .ts-filter-label   { font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--sg-muted); }

    .ts-chips { display: flex; flex-wrap: wrap; gap: 5px; }
    .ts-chip {
        padding: 4px 10px; border-radius: 999px; font-size: 12px;
        border: 1px solid var(--sg-border); background: rgba(255,255,255,.04);
        color: var(--sg-muted); cursor: pointer;
        transition: background .12s, border-color .12s, color .12s;
    }
    .ts-chip:hover    { border-color: rgba(255,255,255,.22); color: var(--sg-text); }
    .ts-chip--on      { border-color: rgba(167,139,250,.55); background: rgba(167,139,250,.16); color: #c4b5fd; }
    .ts-chip:disabled {
        opacity: 0.35;
        cursor: not-allowed;
        pointer-events: none;
    }

    /* Phase chip colors when active */
    .ts-chip--phase-pre-growth.ts-chip--on   { border-color: rgba(60,180,255,.55); background: rgba(60,180,255,.12); color: #6ec5ff; }
    .ts-chip--phase-growth.ts-chip--on       { border-color: rgba(60,200,120,.55); background: rgba(60,200,120,.12); color: #3fc878; }
    .ts-chip--phase-peak.ts-chip--on         { border-color: rgba(255,210,50,.55); background: rgba(255,210,50,.12); color: #ffd232; }
    .ts-chip--phase-pre-bearish.ts-chip--on  { border-color: rgba(255,140,50,.55); background: rgba(255,140,50,.12); color: #ff9c42; }
    .ts-chip--phase-bearish.ts-chip--on      { border-color: rgba(255,70,70,.55);  background: rgba(255,70,70,.12);  color: #ff5555; }

    /* Numeric range pair */
    .ts-range { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

    .ts-search-btn { width: 100%; justify-content: center; }
    .ts-reset-btn  { width: 100%; justify-content: center; }

    /* Disabled inputs inside filter panel */
    .ts-filters .sg-input:disabled {
        opacity: 0.35;
        cursor: not-allowed;
    }

    /* Lock note shown when Active Search is running */
    .ts-lock-note {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        margin: 0;
        font-size: 11px;
        color: rgba(60, 200, 120, 0.65);
        text-align: center;
        line-height: 1.4;
    }
    .ts-lock-note .bi { font-size: 10px; }

    /* ── Token multi-select ──────────────────────────────────── */
    .ts-token-multi {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 5px;
        padding: 4px 6px;
        border-radius: 10px;
        border: 1px solid var(--sg-border);
        background: rgba(255,255,255,.04);
        min-height: 36px;
        transition: border-color .15s;
    }
    .ts-token-multi:focus-within { border-color: rgba(167,139,250,.45); }
    .ts-token-multi.is-disabled  { opacity: .35; pointer-events: none; }

    .ts-token-multi-input {
        flex: 1 1 100px;
        min-width: 80px;
        background: transparent;
        border: none;
        outline: none;
        color: var(--sg-text);
        font-size: 13px;
        padding: 4px 2px;
    }
    .ts-token-multi-input::placeholder { color: var(--sg-muted); }

    .ts-token-chip {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 3px 4px 3px 6px;
        border-radius: 8px;
        background: rgba(167,139,250,.15);
        border: 1px solid rgba(167,139,250,.35);
        color: #a0c4ff;
        font-size: 12px;
        font-weight: 600;
        line-height: 1;
    }
    .ts-token-chip-label { white-space: nowrap; }
    .ts-token-chip-x {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: transparent;
        color: rgba(255,255,255,.55);
        cursor: pointer;
        padding: 0 2px;
        border-radius: 4px;
        font-size: 14px;
        line-height: 1;
    }
    .ts-token-chip-x:hover    { color: #ff8585; background: rgba(255,255,255,.08); }
    .ts-token-chip-x:disabled { opacity: .4; cursor: not-allowed; }

    .ts-token-logo--xs {
        width: 16px; height: 16px; border-radius: 50%;
        object-fit: cover; flex-shrink: 0;
        border: 1px solid var(--sg-border);
    }

    /* ── Token autocomplete ──────────────────────────────────── */
    .ts-autocomplete { position: relative; }
    .ts-autocomplete-list {
        position: absolute;
        top: calc(100% + 4px);
        left: 0; right: 0;
        z-index: 30;
        max-height: 320px;
        overflow-y: auto;
        border-radius: 10px;
        border: 1px solid var(--sg-border);
        background: #1a1f2e;
        box-shadow: 0 8px 24px rgba(0,0,0,.35);
        padding: 4px;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .ts-autocomplete-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 8px;
        border-radius: 8px;
        border: none;
        background: transparent;
        color: var(--sg-text);
        cursor: pointer;
        text-align: left;
    }
    .ts-autocomplete-item:hover { background: rgba(255,255,255,.06); }
    .ts-autocomplete-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
    /* Wider than the row cap but never uncapped — a spam token's long NAME must not stretch the dropdown. */
    .ts-autocomplete-text .ts-token-name { max-width: 32ch; }

    /* ── Results panel ───────────────────────────────────────── */
    .ts-results { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

    /* Drop the outer .sg-table-wrap frame (border + bg + radius) — the rows carry their own separation,
       so the shared frame around the whole list just looks boxy/cheap (manager). Flat like the rest. */
    .ts-table-wrap { overflow-x: auto; border: none !important; background: none !important; border-radius: 0 !important; }

    .ts-empty {
        display: flex; flex-direction: column; align-items: center; gap: 14px;
        padding: 64px 0; color: var(--sg-muted);
    }
    .ts-empty-ico { font-size: 40px; }

    /* ── Table cells ─────────────────────────────────────────── */
    .ts-table td { vertical-align: middle; }

    .ts-cell-token { min-width: 150px; }
    .ts-cell-phase { white-space: nowrap; }
    .ts-cell-date  { white-space: nowrap; font-size: 13px; color: var(--sg-muted); }
    .ts-cell-num   { white-space: nowrap; font-size: 13px; text-align: center; color: rgba(255,255,255,.82); font-variant-numeric: tabular-nums; }
    /* Header must match the centered numeric cells. The shared sg.css rule
       `table.sg-table thead th { text-align:left }` otherwise left-aligns these headers while their
       values stay centered, so the numbers sit to the right of their labels. Higher specificity wins. */
    table.sg-table thead th.ts-cell-num { text-align: center; }
    /* Same mismatch, same fix, for the "Price 24h" header — its cells (.ts-cell-action below) are
       right-aligned so the mini-chart sits flush with the row edge, but the shared left-align rule left
       the header label behind, one column to the left of its own values. */
    table.sg-table thead th.ts-cell-action { text-align: right; }

    /* Per-row Swap action cell. Compact pill button, disabled state for live-event
       rows that lack a resolved contract address. */
    .ts-cell-action { white-space: nowrap; text-align: right; padding-right: 12px; }
    .ts-row-swap {
        background: linear-gradient(180deg, #4a5fd1 0%, #3a4cb8 100%);
        border: none;
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        padding: 5px 12px;
        border-radius: 6px;
        cursor: pointer;
    }
    .ts-row-swap:hover:not(:disabled) { filter: brightness(1.1); }

    /* ── Row detail expander ─────────────────────────────────── */
    .ts-row-main { cursor: pointer; }
    .ts-row-main:hover > td { background: rgba(255,255,255,0.035); }

    .ts-row-expand {
        background: none;
        border: 1px solid rgba(255,255,255,0.14);
        color: rgba(255,255,255,0.7);
        border-radius: 6px;
        padding: 4px 7px;
        margin-right: 6px;
        cursor: pointer;
        line-height: 1;
    }
    .ts-row-expand:hover { border-color: rgba(255,255,255,0.35); color: #fff; }
    .ts-row-expand i { display: inline-block; font-size: 12px; transition: transform .15s ease; }
    .ts-row-expand.is-open i { transform: rotate(180deg); }

    .ts-detail-row > td {
        background: rgba(255,255,255,0.03);
        padding: 12px 14px;
    }
    .ts-detail-status { color: rgba(255,255,255,0.55); font-size: 13px; }
    /* Fixed grid, NOT flex-wrap: a long price/mcap must never push the chart to its own line. */
    .ts-detail {
        display: grid;
        /* Give the price chart real estate — it's the most information-dense element; it used to sit in a
           tiny 220px sliver while the 4-colour bars ate the rest of the row. */
        grid-template-columns: minmax(260px, 1fr) minmax(0, 1fr);
        gap: 24px;
        align-items: start;
    }
    .ts-detail-data { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
    .ts-detail-k {
        display: block;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: rgba(255,255,255,0.45);
        margin-bottom: 3px;
    }
    .ts-detail-v {
        font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.92);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    /* "· global" qualifier on the market-cap label — clarifies the figure is the asset's cross-chain cap. */
    .ts-detail-note {
        text-transform: none;
        letter-spacing: 0;
        color: rgba(167,139,250,0.75);
        font-weight: 600;
    }
    .ts-detail-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
    .ts-detail-bars { min-width: 0; }
    .ts-detail-bars .ts-detail-k { margin-top: 8px; }
    .ts-detail-bars .ts-detail-k:first-child { margin-top: 0; }
    .ts-bar {
        display: flex;
        height: 8px;
        border-radius: 4px;
        overflow: hidden;
        background: rgba(255,255,255,0.06);
    }
    .ts-bar span { display: block; height: 100%; }
    .ts-detail-legend {
        display: flex;
        gap: 12px;
        margin-top: 8px;
        font-size: 11px;
        color: rgba(255,255,255,0.5);
        flex-wrap: wrap;
    }
    .ts-detail-legend span { display: inline-flex; align-items: center; gap: 4px; }
    .ts-detail-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
    .ts-detail-addrs { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--sg-border); width: 100%; }
    .ts-addr-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
    .ts-addr-copy { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
        background: rgba(255,255,255,.03); border: 1px solid var(--sg-border); border-radius: 8px; padding: 4px 8px;
        color: rgba(255,255,255,0.82); font: inherit; transition: border-color .12s, background .12s; }
    .ts-addr-copy:hover { border-color: rgba(167,139,250,.5); background: rgba(167,139,250,.08); }
    .ts-addr-copy.is-copied { border-color: rgba(63,200,120,.55); background: rgba(63,200,120,.10); }
    .ts-addr-chain { font-size: 11px; color: #c4b5fd; background: rgba(167,139,250,.12); border: 1px solid rgba(167,139,250,.3); border-radius: 6px; padding: 1px 8px; text-align: center; }
    .ts-addr-short { font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: rgba(255,255,255,0.75); }
    .ts-addr-ico { font-size: 11px; color: rgba(255,255,255,0.5); }
    .ts-addr-copy.is-copied .ts-addr-ico { color: #3fc878; }
    .ts-detail-chart { min-width: 0; }
    .spk { width: 100%; height: 110px; display: block; }
    .spk-empty { font-size: 12px; color: rgba(255,255,255,0.4); }
    .spk-delta { font-size: 12px; font-weight: 600; }
    .spk-delta.up { color: #3fc878; }
    .spk-delta.down { color: #ff5d7a; }
    .ts-row-swap:disabled { opacity: 0.4; cursor: not-allowed; }

    /* Debug diagnose button (only rendered for DebugAccess users). */
    .ts-row-dbg {
        background: transparent;
        border: 1px solid var(--sg-border, #2a2e39);
        color: var(--sg-muted, #8b92a3);
        font-size: 12px;
        padding: 4px 8px;
        border-radius: 6px;
        cursor: pointer;
        margin-right: 6px;
    }
    .ts-row-dbg:hover { color: #f0823c; border-color: #f0823c; }

    /* Snapshot freshness indicator under the days-in-phase value. */
    .ts-freshness { display: block; font-size: 10.5px; color: var(--sg-muted, #6b7280); margin-top: 2px; }
    .ts-freshness--stale { color: #f0823c; }

    /* Token cell. The td MUST stay a real table-cell (display:table-cell) — making it
       display:flex drops it out of the table's column model and progressively misaligns every
       row below it (the "rows shift after column 2" bug). The flex layout lives on an inner div. */
    .ts-token-cell { display: flex; align-items: center; gap: 10px; }
    .ts-token-logo {
        width: 32px; height: 32px; border-radius: 50%;
        object-fit: cover; flex-shrink: 0;
        border: 1px solid var(--sg-border);
    }
    .ts-token-logo--sm { width: 22px; height: 22px; }
    .ts-token-logo--placeholder {
        display: inline-flex; align-items: center; justify-content: center;
        background: rgba(167,139,250,.18); color: #c4b5fd;
        font-weight: 700; font-size: 13px;
    }
    .ts-token-info  { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .ts-token-symline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .ts-token-symbol { font-weight: 600; font-size: 14px; color: var(--sg-text); }
    .ts-token-name   { font-size: 11px; color: var(--sg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
    .ts-token-signal-age {
        display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
        font-size: 10px; font-weight: 600; letter-spacing: .02em;
        padding: 1px 7px; border-radius: 999px; white-space: nowrap;
        color: #c4b5fd; background: rgba(167,139,250,.12); border: 1px solid rgba(167,139,250,.28);
    }
    .ts-token-signal-age i { font-size: 10px; }
    .ts-chain-badge  {
        font-size: 10px; padding: 1px 6px; border-radius: 999px;
        border: 1px solid var(--sg-border); background: rgba(255,255,255,.05);
        color: var(--sg-muted); align-self: flex-start;
    }

    /* Phase badge */
    .ts-phase-badge {
        display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px;
        border: 1px solid var(--sg-border); background: rgba(255,255,255,.05);
        color: var(--sg-muted);
    }
    .ts-phase--pre-growth  { border-color: rgba(60,180,255,.45); background: rgba(60,180,255,.10); color: #6ec5ff; }
    .ts-phase--growth      { border-color: rgba(60,200,120,.45); background: rgba(60,200,120,.10); color: #3fc878; }
    .ts-phase--peak        { border-color: rgba(255,210,50,.45); background: rgba(255,210,50,.10); color: #ffd232; }
    .ts-phase--pre-bearish { border-color: rgba(255,140,50,.45); background: rgba(255,140,50,.10); color: #ff9c42; }
    .ts-phase--bearish     { border-color: rgba(255,70,70,.45);  background: rgba(255,70,70,.10);  color: #ff5555; }

    .ts-confidence { display: block; font-size: 11px; color: var(--sg-muted); margin-top: 3px; }

    /* New row highlight (animated) */
    .ts-row-new td { animation: ts-new-row 4s ease-out forwards; }
    @keyframes ts-new-row {
        0%   { background: rgba(60,200,120,.18); }
        100% { background: transparent; }
    }

    /* Load more */
    .ts-load-more { width: 100%; justify-content: center; margin-top: 4px; }

    /* Spinner */
    .ts-spinner {
        display: inline-block; width: 14px; height: 14px;
        border: 2px solid rgba(255,255,255,.2);
        border-top-color: rgba(255,255,255,.8);
        border-radius: 50%;
        animation: ts-spin .7s linear infinite;
    }
    .ts-spinner--lg { width: 32px; height: 32px; border-width: 3px; }
    @keyframes ts-spin { to { transform: rotate(360deg); } }

    /* Mobile */
    @media (max-width: 768px) {
        .ts-body { flex-direction: column; }
        .ts-filters {
            width: 100%; position: static; max-height: none;
        }

        /* ── Results as cards ──────────────────────────────────────
           A 7-column table can't be read on a phone, and horizontal scroll makes it
           unusable. Re-flow each row into a self-contained card: the token is the header,
           every metric becomes a labelled field (label from the td's data-label), and Swap
           is a full-width action. No horizontal scroll, everything legible at a glance. */
        .ts-table-wrap { overflow-x: visible; }
        .ts-table { border: none; background: transparent; width: 100%; }
        .ts-table thead { display: none; }
        .ts-table tbody { display: flex; flex-direction: column; gap: 10px; }

        .ts-table tr {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px 14px;
            padding: 14px;
            border: 1px solid var(--sg-border);
            border-radius: 12px;
            background: rgba(255,255,255,.025);
        }

        .ts-table td {
            display: block;
            padding: 0;
            border: none;
            white-space: normal;
        }

        /* Token = full-width card header with a divider under it. */
        .ts-cell-token {
            grid-column: 1 / -1;
            min-width: 0;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--sg-border);
        }
        .ts-token-symbol { font-size: 16px; }
        .ts-token-name   { max-width: none; font-size: 12px; }

        /* Labelled metric fields. */
        .ts-table td[data-label] {
            text-align: left;
        }
        .ts-table td[data-label]::before {
            content: attr(data-label);
            display: block;
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: .04em;
            color: var(--sg-muted);
            margin-bottom: 3px;
        }
        .ts-cell-num { font-size: 15px; }
        .ts-cell-date { font-size: 14px; }
        .ts-confidence { margin-top: 4px; }

        /* Swap = full-width action at the foot of the card. */
        .ts-cell-action {
            grid-column: 1 / -1;
            text-align: left;
            padding-right: 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .ts-row-expand { padding: 9px 12px; margin-right: 0; }

        /* Detail panel becomes its own full-width card under the row's card: chart stacks above the data. */
        .ts-detail-row > td { grid-column: 1 / -1; padding: 0; background: none; }
        .ts-detail { grid-template-columns: minmax(0, 1fr); gap: 16px; }
        .ts-detail-stats { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 12px; }
        .ts-detail-chart { min-width: 0; }
        .spk { width: 100%; }
        .ts-addr-list { gap: 6px; }
        .ts-row-swap {
            width: 100%;
            padding: 11px;
            font-size: 15px;
        }

        /* When a card is expanded on mobile, its own metric + Swap cells DUPLICATE the detail below — hide them
           so the expanded view is one clean card (chart + base data + the repositioned Swap). */
        .ts-row-main.is-expanded .ts-cell-num,
        .ts-row-main.is-expanded .ts-cell-action { display: none; }
        .ts-detail-swap { display: block; width: 100%; padding: 12px; font-size: 15px; margin-top: 4px; }

        /* Keep the new-row highlight on the whole card, not a single cell. */
        .ts-row-new { animation: ts-new-row 4s ease-out forwards; }
        .ts-row-new td { animation: none; }
    }

    /* ── Active Search (live) — make it obvious what's running and on which filters ─────────────── */
    .ts-live-wrap { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; }
    .ts-live-hint { font-size: 10.5px; line-height: 1.2; color: var(--sg-muted, rgba(231,238,252,.55)); max-width: 230px; text-align: right; }
    .ts-live-hint--on { color: #36d399; font-weight: 600; }
    .ts-live-hint .bi { margin-right: 2px; }

    /* The basic-filter panel glows/breathes green while live is streaming. */
    .ts-filters.ts-live-on {
        border-color: rgba(54,211,153,.55) !important;
        animation: tsLiveGlow 2.6s ease-in-out infinite;
    }
    @keyframes tsLiveGlow {
        0%, 100% { box-shadow: 0 0 0 1px rgba(54,211,153,.30), 0 0 16px rgba(54,211,153,.14); }
        50%      { box-shadow: 0 0 0 1px rgba(54,211,153,.75), 0 0 30px rgba(54,211,153,.42); }
    }

    /* Live status banner at the top of the (active) basic filters. */
    .ts-live-banner {
        display: flex; align-items: center; gap: 8px; margin: 4px 0 12px;
        padding: 8px 11px; border-radius: 9px; font-size: 12px; line-height: 1.35;
        color: #baf7dd; border: 1px solid rgba(54,211,153,.35);
        background: linear-gradient(100deg, rgba(54,211,153,.16), rgba(54,211,153,.05) 55%, rgba(54,211,153,.16));
        background-size: 200% 100%; animation: tsLiveSheen 3.2s linear infinite;
    }
    .ts-live-banner b { color: #eafff5; }
    @keyframes tsLiveSheen { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
    .ts-live-pulse { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #36d399; box-shadow: 0 0 0 0 rgba(54,211,153,.6); animation: tsLivePulse 1.5s ease-out infinite; }
    @keyframes tsLivePulse {
        0%   { box-shadow: 0 0 0 0 rgba(54,211,153,.55); }
        70%  { box-shadow: 0 0 0 8px rgba(54,211,153,0); }
        100% { box-shadow: 0 0 0 0 rgba(54,211,153,0); }
    }

    /* Sections that DON'T drive the live match (presets / advanced / save) fade out + go inert while live. */
    .ts-section-off { opacity: .38; filter: grayscale(.65); pointer-events: none; transition: opacity .2s ease; }

    /* ═══════════════════════════════════════════════════════════════════════════════════════
       REFERENCE RESTYLE (v6) — appended LAST so it wins within this stylesheet. Brings the
       filters (and, below, the card) to the Stargazer_AlphaSearch_OGBoard_v6 design system:
       flat hairline surfaces, lavender-only accent, NO green/red, quiet pill controls, white
       pill CTA. Visual overrides only — no markup/behaviour touched. Uses toned.css tokens
       (--accent lavender, --border hairline, --faint, --blue, --text, --muted).
       ═══════════════════════════════════════════════════════════════════════════════════════ */

    /* ── filter panel: drop the card chrome, become a flat hairline column ── */
    .ts-filters.sg-card {
        background: none !important; border: none !important; box-shadow: none !important;
        padding: 6px 4px !important;
    }
    .ts-filters-head { display: none; }   /* drop the "Filters / basic" self-label (manager) */

    .ts-filter-group { margin-bottom: 22px; }
    .ts-filter-label {
        display: block; font-size: 11px; font-weight: 600; letter-spacing: .05em;
        text-transform: uppercase; color: var(--faint); margin-bottom: 10px;
    }

    /* chips → reference quiet pills; active = solid white */
    .ts-chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .ts-chip {
        background: rgba(240,241,247,.04); border: 1px solid var(--border); border-radius: 100px;
        padding: 8px 15px; font-size: 13px; font-weight: 500; color: var(--muted);
        transition: .16s; line-height: 1;
    }
    .ts-chip:hover:not(:disabled) { color: var(--text); border-color: rgba(240,241,247,.30); }
    .ts-chip--on { background: var(--text); color: #0B0B12; border-color: var(--text); font-weight: 600; }

    /* "Show hidden" checkbox chips — chip look with an inline checkbox. */
    .ts-showtoggle {
        display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
        background: rgba(240,241,247,.04); border: 1px solid var(--border); border-radius: 100px;
        padding: 7px 14px; font-size: 13px; font-weight: 500; color: var(--muted); transition: .16s; line-height: 1;
    }
    .ts-showtoggle:hover { color: var(--text); border-color: rgba(240,241,247,.30); }
    .ts-showtoggle.ts-chip--on { background: rgba(167,139,250,.16); color: #c4b5fd; border-color: rgba(167,139,250,.55); font-weight: 600; }
    .ts-showtoggle input { accent-color: var(--accent); margin: 0; cursor: pointer; }

    /* "Forming" placeholder for a too-shallow volatility corridor — quiet muted text, NOT a pill: it is a
       normal young-token state, not a warning. */
    .ts-range-forming { color: var(--sg-muted); font-size: 13px; font-style: italic; }

    /* ETAP-1 reason badge — a flagged row shows WHY it's normally hidden, in place of the expected-move.
       Lavender outline pill (Stargazer v6: no red/green), same family as the show-toggle chips. */
    .ts-flag-badge {
        display: inline-flex; align-items: center; white-space: nowrap;
        background: rgba(167,139,250,.10); border: 1px solid rgba(167,139,250,.45); border-radius: 100px;
        padding: 4px 11px; font-size: 12px; font-weight: 600; color: #c4b5fd; line-height: 1;
    }
    /* Narrow mobile card cells: let the badge wrap instead of pushing the 2-col card past the viewport. */
    @media (max-width: 768px) {
        .ts-flag-badge { white-space: normal; line-height: 1.3; }
    }

    /* v0.91 §4.4 attribute chips (new_token / breakout) — quiet lavender hairline, smaller than the badges. */
    .ts-attr-chip {
        display: inline-flex; align-items: center; white-space: nowrap; margin-left: 6px;
        border: 1px solid rgba(167,139,250,.35); border-radius: 100px;
        padding: 1.5px 8px; font-size: 10.5px; font-weight: 600; color: #b9a8ee; line-height: 1.3;
    }
    /* (The .ts-attr-line block is gone — chips + "Updated" removed from all card surfaces, Sep 17 evening.) */

    /* Overflow armour for the token column (owner, Sep 17): the ticker is clipped server-side to 10 glyphs,
       but keep a hard CSS backstop so NO long field (symbol, name) can ever inflate the token cell — that
       spam token's 200-char symbol pushed the desktop table's value columns clean off the viewport. */
    .ts-cell-token, .ts-token-cell, .ts-token-info { min-width: 0; }
    .ts-token-symbol { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ts-token-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 32ch; }

    /* On-expand live-refresh corner loader */
    .ts-detail-row td { position: relative; }
    .ts-refresh-badge { position: absolute; top: 8px; right: 12px; display: inline-flex; align-items: center; gap: 6px;
        font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); z-index: 3; pointer-events: none; }

    /* token search → clean underline */
    .ts-token-multi {
        background: none !important; border: none !important;
        border-bottom: 1px solid var(--border) !important; border-radius: 0 !important;
        padding: 6px 2px 10px !important;
    }
    .ts-token-multi:focus-within { border-bottom-color: var(--accent) !important; }
    .ts-token-multi-input { font-size: 15px; }
    .ts-autocomplete-list { border-color: var(--border) !important; }

    /* Lighter toggle → quiet */
    .ts-lighter-toggle { font-size: 13px; color: var(--muted); }
    .ts-lighter-toggle.is-on { color: var(--text); }
    .ts-lighter-toggle.is-on i { color: var(--accent); }

    /* disclosures (Advanced · Save & alerts) → hairline + quiet, no box */
    .ts-filter-adv, .ts-filter-save {
        border: none !important; background: none !important; border-radius: 0 !important;
        border-top: 1px solid var(--border) !important; margin-top: 20px; padding-top: 6px;
    }
    .ts-adv-bar { padding: 6px 0; }
    .ts-adv-expand { color: var(--muted); font-weight: 600; font-size: 13.5px; gap: 10px; padding: 4px 2px; }
    .ts-adv-expand:hover { color: var(--text); }
    .ts-mod-title { font-weight: 600; }
    .ts-mod-sub { display: none; }   /* drop APPLIED / optional / 🔔 alerts-on status chrome (manager) */

    /* Find alpha → white pill CTA; hover fills lavender */
    .ts-search-btn.sg-btn-primary {
        background: var(--text) !important; color: #0B0B12 !important; border: none !important;
        border-radius: 100px !important; font-weight: 700 !important; padding: 13px 28px !important;
        box-shadow: none !important;
    }
    .ts-search-btn.sg-btn-primary:hover:not(:disabled) {
        background: var(--accent) !important; color: #140A24 !important;
        box-shadow: 0 0 26px rgba(167,139,250,.35) !important;
    }

    /* three equal-size action pills (manager): Search (white) · Active Search (outline) · Reset (outline) */
    .ts-actions { display: flex; gap: 8px; margin: 16px 0 4px; }
    .ts-actions > .sg-btn {
        flex: 1 1 0; min-width: 0; justify-content: center; gap: 7px;
        padding: 12px 8px !important; border-radius: 100px !important; font-size: 13.5px; font-weight: 600;
    }
    .ts-actions .ts-live-btn { background: none !important; border: 1px solid var(--border) !important; color: var(--muted) !important; box-shadow: none !important; }
    .ts-actions .ts-live-btn:hover:not(:disabled) { color: var(--text) !important; border-color: rgba(240,241,247,.3) !important; }
    .ts-actions .ts-reset-btn { background: none !important; border: 1px solid var(--border) !important; color: var(--muted) !important; box-shadow: none !important; }
    .ts-actions .ts-reset-btn:hover:not(:disabled) { color: var(--text) !important; border-color: rgba(240,241,247,.3) !important; }

    /* ── kill GREEN/RED in the filter area → lavender / neutral ── */
    .ts-live-hint--on { color: var(--accent) !important; }
    .ts-filters.ts-live-on { border-color: rgba(167,139,250,.5) !important; animation: none !important; box-shadow: 0 0 0 1px rgba(167,139,250,.35) !important; }
    .ts-live-banner { color: var(--muted) !important; border-color: var(--border) !important; background: rgba(167,139,250,.06) !important; animation: none !important; }
    .ts-live-banner b { color: var(--text) !important; }
    .ts-live-pulse { background: var(--accent) !important; box-shadow: none !important; animation: none !important; }
    .ts-saved-btn.ts-bell.is-on { color: var(--accent) !important; background: rgba(167,139,250,.14) !important; }
    .ts-saved-item.is-live { border-color: rgba(167,139,250,.45) !important; }
    .ts-new-badge { background: rgba(167,139,250,.16) !important; color: var(--accent) !important; border-color: rgba(167,139,250,.35) !important; }
    .ts-live-btn--active { border-color: rgba(167,139,250,.45) !important; background: rgba(167,139,250,.12) !important; color: var(--accent) !important; }
    .ts-live-dot--on { background: var(--accent) !important; box-shadow: 0 0 6px rgba(167,139,250,.6) !important; }
    .ts-lock-note { color: var(--muted) !important; }

    /* ── card: hero expected-move (the reference lead) — big lavender number + degree word ── */
    .ts-hero { margin: 4px 0 22px; }
    .ts-hero-k { display: block; font-size: 12.5px; font-weight: 500; color: var(--faint); }
    .ts-hero-v {
        display: inline-block; font-size: 38px; font-weight: 800; letter-spacing: -.03em;
        color: var(--accent); line-height: 1.1; margin-top: 4px; text-shadow: 0 0 30px rgba(167,139,250,.30);
    }
    .ts-hero-deg {
        display: inline-block; vertical-align: middle; margin-left: 12px; font-size: 11px; font-weight: 700;
        letter-spacing: .06em; text-transform: uppercase; color: var(--accent);
        border: 1px solid rgba(167,139,250,.40); border-radius: 100px; padding: 3px 11px;
    }
    @media (max-width: 640px) { .ts-hero-v { font-size: 30px; } }

    /* card price-chart 24h / 7D toggle (reference underline segment) */
    .ts-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
    .ts-cseg { display: flex; gap: 14px; }
    .ts-cseg button {
        background: none; border: none; font-size: 12px; font-weight: 600; color: var(--faint);
        border-bottom: 1.5px solid transparent; padding: 2px 0; font-family: inherit; cursor: pointer; border-radius: 0;
    }
    .ts-cseg button:hover { color: var(--muted); }
    .ts-cseg button.on { color: var(--text); border-bottom-color: var(--accent); }

    /* "?" help marker explaining the RARE/MODERATE rarity (manager: "unclear what rare means") */
    .ts-ax-cap { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
    .ts-help {
        display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px;
        border-radius: 50%; border: 1px solid var(--border); color: var(--muted); font-size: 10px; font-weight: 700;
        cursor: help; text-transform: none; letter-spacing: 0;
    }
    .ts-help:hover { color: var(--text); border-color: rgba(240,241,247,.3); }

    /* ── compact axis cards (manager: cards waste space) — 2-col grid, borderless, tight, lavender levels ── */
    .ts-ax-cards { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 28px; }
    .ts-ax-card {
        border: none !important; background: none !important; border-radius: 0 !important;
        padding: 13px 0 12px !important; border-top: 1px dashed rgba(240,241,247,.07) !important;
    }
    .ts-ax-cards > .ts-ax-card:nth-child(-n+2) { border-top: none !important; }   /* clean top row */
    .ts-ax-hdr { margin-bottom: 8px !important; }
    .ts-ax-metrics { gap: 6px !important; }
    .ts-ax-metric { font-size: 12px !important; }
    .ts-ax-dir-block { margin-top: 8px !important; padding-top: 8px !important; border-top-style: dashed !important; }

    /* level badges → reference outline pills: lavender for RARE/Extreme, muted otherwise (no yellow/orange) */
    .ts-ax-level { border: 1px solid var(--border) !important; background: none !important; border-radius: 100px; padding: 2px 8px; }
    .ts-ax-level--extreme, .ts-ax-level--high { color: var(--accent) !important; border-color: rgba(167,139,250,.45) !important; }
    .ts-ax-level--mod { color: var(--muted) !important; }
    .ts-ax-level--low { color: var(--faint) !important; }

    /* kind tag (CATEGORY / FLOW / INTERNAL) → quiet muted outline (was colored) */
    .ts-tag--category, .ts-tag--flow, .ts-tag--internal {
        color: var(--faint) !important; background: none !important; border-color: var(--border) !important;
    }

    @media (max-width: 760px) { .ts-ax-cards { grid-template-columns: 1fr !important; } .ts-ax-cards > .ts-ax-card:nth-child(2) { border-top: 1px dashed rgba(240,241,247,.07) !important; } }

    /* ── kill GREEN/RED on the card → neutral / lavender (direction is the sign, not colour) ── */
    .spk-delta.up, .spk-delta.down { color: var(--muted) !important; }
    .ts-ax-dir--in { color: var(--accent) !important; }
    .ts-ax-dir--out { color: var(--muted) !important; }
    .ts-addr-copy.is-copied { border-color: rgba(167,139,250,.55) !important; background: rgba(167,139,250,.10) !important; }
    .ts-addr-copy.is-copied .ts-addr-ico { color: var(--accent) !important; }
    .ts-phase--growth, .ts-chip--phase-growth.ts-chip--on { background: rgba(167,139,250,.14) !important; color: var(--accent) !important; }
    .ts-new-row-flash { background: rgba(167,139,250,.14) !important; }

    /* quiet the DexScreener / Lighter links to the reference "quiet link" look */
    .ts-dexscreener { color: var(--muted) !important; border-color: var(--border) !important; }
    .ts-dexscreener:hover { color: var(--text) !important; border-color: rgba(240,241,247,.3) !important; }
    .ts-detail-k { color: var(--faint) !important; }

    /* Swap now lives in the card on ALL breakpoints (moved out of the row) — reference white pill */
    .ts-detail-swap { display: inline-flex !important; }
    .ts-detail-swap.sg-btn-primary {
        background: var(--text) !important; color: #0B0B12 !important; border: none !important;
        border-radius: 100px !important; font-weight: 700 !important; box-shadow: none !important;
        min-width: 180px; margin-top: 6px;
    }
    .ts-detail-swap.sg-btn-primary:hover:not(:disabled) { background: var(--accent) !important; color: #140A24 !important; }
    .ts-detail-swap.sg-btn-primary:disabled { opacity: .5; }

    /* whole row is the click target now that the chevron is gone — light hover affordance */
    .ts-row-main { cursor: pointer; }
    .ts-row-main:hover .ts-token-symbol { color: var(--accent); }

    /* row mini-chart + 24h change (in the old Swap column) */
    .ts-cell-action { text-align: right; }
    /* Chart STACKED above the 24h label, centred under each other (was a right-packed row where the line sat far
       right and the number far left). */
    .ts-row-spark { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; justify-content: center; }
    /* Match the row mini's box ratio to the SVG viewBox (200×40 = 5:1) so preserveAspectRatio="none" no longer
       vertically squashes it (was 62×20 = 3.1:1 → a flatter-looking line than the 5:1 detail chart). Now the mini
       is a true scaled-down copy of the daily chart. Height derives from width via aspect-ratio. */
    .ts-row-spark .spk { width: 62px !important; aspect-ratio: 200 / 40; height: auto !important; display: block; flex: none; }
    .ts-row-24h { font-size: 12.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 0; text-align: center; }
    /* Owner ask (Sep 29 2026): the row mini + its 24h number carry direction as colour — muted green/red from the
       existing palette (.sg-badge-ok / --sg-danger), sign source = RowSpark.Change24hPct for both. */
    .ts-row-24h.up { color: rgb(60,200,120); }
    .ts-row-24h.down { color: #ff4d5e; }

    /* ═══════════ Aug-31 mobile + flatten pass (manager screenshots A / B) ═══════════ */

    /* A1 — flatten: the expanded detail shares the row background (no inner fill); one section highlights on hover */
    .ts-detail-row > td { background: none !important; }
    .ts-ax-card { transition: background .15s ease; }
    .ts-ax-card:hover { background: rgba(255,255,255,.02); }

    /* Kill the grey SQUARE tap-highlight flash on touch — it shows behind rounded tiles / the Advanced & Save rows
       and clashes with the rounded UI (manager: "квадрати при ховері плитки і у рядках advanced/save"). */
    .ts-page, .ts-page * { -webkit-tap-highlight-color: transparent; }

    /* A3 — distribution % rendered as REAL text in the legend (touch-friendly; no hover needed) */
    .ts-detail-legend { gap: 12px 16px; margin: 8px 0 4px; }
    .ts-detail-legend b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; margin-left: 4px; }

    /* A3 — "?" is a tappable button (title tooltips don't work on touch) that reveals an inline note */
    .ts-help { background: none; font-family: inherit; padding: 0; cursor: pointer; }
    .ts-help:hover { color: var(--text); border-color: rgba(240,241,247,.3); }
    .ts-help-note { margin: 2px 0 14px; font-size: 12px; font-weight: 500; color: var(--muted); max-width: 62ch; }

    /* B1 — fewer lines: search underline only on focus; drop the disclosure divider lines (header accent stays) */
    .ts-token-multi { border-bottom-color: transparent !important; }
    .ts-token-multi:focus-within { border-bottom-color: var(--accent) !important; }
    .ts-filter-adv, .ts-filter-save { border-top: none !important; }

    /* B2 — the three action buttons never wrap and stay centered/coherent */
    .ts-actions > .sg-btn { white-space: nowrap; align-items: center; }

    @media (max-width: 768px) {
        /* A2 — taller mobile chart so it isn't a flat sliver; roomier 24h/7D control */
        .ts-detail-chart .spk { height: 140px !important; }
        .ts-chart-head { margin-bottom: 8px; }
        .ts-cseg { gap: 18px; }
        .ts-cseg button { padding: 5px 2px; font-size: 13px; }

        /* B2 — let each button size to its LABEL (Active Search is longer) so text never overflows the pill;
           drop the live-dot to save width. Content-fit + grow keeps the row coherent and full-width. */
        .ts-actions > .sg-btn { flex: 1 1 auto !important; font-size: 12px; padding: 11px 12px !important; gap: 5px; }
        .ts-actions .ts-live-dot { display: none; }

        /* no square per-cell hover flash on the mobile result cards — the rounded card is the surface */
        .ts-table tbody tr:hover td { background: none; }

        /* collapsed-row mini-chart: fill the full card width, taller, label on top — was a tiny 62px on the right */
        .ts-cell-action { flex-direction: column; align-items: stretch; gap: 6px; }
        .ts-row-spark { width: 100%; gap: 4px; }
        /* Mobile row spark keeps its own fluid box (full-width × 42px) — drop the desktop aspect-ratio lock. */
        .ts-row-spark .spk { width: 100% !important; aspect-ratio: auto; height: 42px !important; flex: none; }
        .ts-row-24h { min-width: 0; }
    }

    /* ═══════════════════════════════════════════════════════════════════════════════════════════
       UI feedback batch (manager, Sep 2026): action-pill fit · on-brand Swap · right-aligned links ·
       always-underlined search + lowered label · borderless mobile cards + transparent disclosures
       ═══════════════════════════════════════════════════════════════════════════════════════════ */

    /* #2 — desktop: size each pill to its LABEL (equal 1/3 pills are too narrow for "Active Search" → nowrap text
       spilled out the right). flex:1 1 auto lets "Active Search" take the room it needs; text never overflows. */
    .ts-actions { gap: 6px; }
    .ts-actions > .sg-btn { flex: 1 1 auto !important; font-size: 12.5px !important; padding: 12px 12px !important; letter-spacing: -.01em; white-space: nowrap; }
    .ts-live-btn, .ts-live-btn--active { gap: 6px; }

    /* #3 — Swap CTA styled on-brand (lavender pill), placed directly UNDER the chart (desktop + mobile) with
       breathing room above it so it's not overlooked (manager: "didn't notice it immediately"). */
    .ts-detail-swap.sg-btn-primary {
        display: block; width: 100%; margin: 16px 0 2px !important; padding: 12px 20px !important;
        background: var(--accent) !important; color: #140A24 !important; border: none !important;
        border-radius: 100px !important; font-weight: 700 !important; box-shadow: none !important; letter-spacing: .02em;
    }
    .ts-detail-swap.sg-btn-primary:hover:not(:disabled) { background: var(--text) !important; color: #0B0B12 !important; }
    .ts-detail-swap.sg-btn-primary:disabled { opacity: .5; }

    /* #4 — DexScreener/Lighter links right-aligned (under the contracts) on desktop */
    .ts-detail-links { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 12px; }
    .ts-detail-links .ts-dexscreener { margin-top: 0; }
    .ts-detail-links .ts-lighter { margin-left: 0; }

    /* #8 — token search ALWAYS underlined (not only on focus); drop the label down onto the line */
    .ts-token-multi {
        border-bottom-color: var(--border) !important;
        align-items: flex-end !important;
        padding: 16px 2px 5px !important;
    }
    .ts-token-multi:focus-within { border-bottom-color: var(--accent) !important; }

    /* #7 (desktop + mobile) — Advanced Signals + Save & Alerts fully TRANSPARENT: no outer box, no inner head/body
       fills, no applied-glow, no accent border — just the title + controls on the page background. */
    .ts-mod, .ts-mod--accent, .ts-mod--accent.is-applied,
    .ts-mod-head, .ts-adv-bar, .ts-mod--accent .ts-adv-bar, .ts-mod-body {
        background: none !important; box-shadow: none !important;
    }
    .ts-mod, .ts-mod--accent, .ts-mod--accent.is-applied { border: none !important; border-radius: 0 !important; }
    .ts-mod-body { border-top: none !important; padding: 10px 2px !important; }
    .ts-mod-head, .ts-adv-bar { padding-left: 2px !important; padding-right: 2px !important; }

    @media (max-width: 768px) {
        /* #4 — links full-width, stacked, on mobile */
        .ts-detail-links { flex-direction: column; justify-content: stretch; }
        .ts-detail-links .ts-dexscreener { width: 100%; justify-content: center; }

        /* #1 — kill the GRAY hover rectangles on touch (sticky :hover on mobile). The row-level highlight
           (.ts-row-main:hover > td) and any cell/detail hover fill are removed; on touch there's no hover affordance. */
        .ts-row-main:hover > td,
        .ts-table tbody tr:hover td,
        .ts-table tbody tr:hover > td,
        .ts-detail-row:hover > td { background: none !important; }

        /* #6 — token cards: NO frame — a clean hairline-separated list, no rectangle/background/radius */
        .ts-table tbody { gap: 0 !important; }
        .ts-table tr {
            border: none !important; border-radius: 0 !important; background: none !important;
            padding: 16px 0 !important; border-bottom: 1px solid var(--border) !important;
        }
        .ts-table tbody tr:last-child { border-bottom: none !important; }
    }