.dash-period-select {
            background: transparent;
            border: none;
            color: #34d399;
            font-size: 0.75rem;
            font-weight: 900;
            padding: 0 0.1rem;
            cursor: pointer;
            max-width: 4.6rem;
            color-scheme: dark;
        }
        .dash-period-select:focus {
            outline: none;
        }
        .dash-period-select option {
            background: #0f172a;
            color: #e2e8f0;
        }
        #dash-pick-year.dash-period-select {
            max-width: 3.6rem;
        }
        #dash-pick-day.dash-period-select {
            max-width: 2.8rem;
        }
        #period-picker-container {
            flex-wrap: nowrap;
        }
        .sticky-col-shadow { box-shadow: 4px 0 6px -1px rgba(0, 0, 0, 0.3); }
        .sticky-mtd-shadow { box-shadow: -4px 0 6px -1px rgba(0, 0, 0, 0.3); }
        #matrix-thead .matrix-mtd,
        #matrix-tbody .matrix-mtd,
        #matrix-tfoot .matrix-totals-mtd {
            position: sticky;
            right: 0;
        }
        #matrix-tbody tr:hover .matrix-mtd {
            background: #1e293b;
        }

        /* Revenue Matrix: full-width tables; metric col hugs labels; values take the rest. */
        #view-revenue #revenue-day-table,
        #view-revenue #revenue-hist-table {
            width: 100% !important;
            table-layout: auto !important;
        }
        #view-revenue #revenue-day-table th:first-child,
        #view-revenue #revenue-day-table td:first-child,
        #view-revenue #revenue-hist-table th:first-child,
        #view-revenue #revenue-hist-table td:first-child,
        #view-revenue .rev-metric-label {
            width: 1% !important;
            max-width: none !important;
            white-space: nowrap !important;
            text-align: left !important;
            line-height: 1.25;
            vertical-align: middle;
            padding-left: 0.75rem !important;
            padding-right: 1.1rem !important;
            letter-spacing: 0.05em;
        }
        #view-revenue #revenue-day-table th:not(:first-child),
        #view-revenue #revenue-day-table td:not(:first-child),
        #view-revenue #revenue-hist-table th:not(:first-child),
        #view-revenue #revenue-hist-table td:not(:first-child) {
            white-space: nowrap;
            text-align: center;
            padding-left: 0.85rem !important;
            padding-right: 0.85rem !important;
        }
        body { background-color: #0f172a; color: #f1f5f9; font-family: sans-serif; }

        #revenue-grain-toggle:not(.hidden) {
            display: flex;
            align-items: center;
            gap: 0.15rem;
        }
        #revenue-grain-toggle.hidden { display: none !important; }

        .display-only.hidden { display: none !important; }
        body.display-mode .interactive-only { display: none !important; }
        body.display-mode .display-only:not(.hidden) { display: flex !important; }

        #wash-logo.wash-logo {
            height: 6.25rem;
            max-height: 6.25rem;
            width: auto;
            background-color: #1e293b;
            padding: 0;
        }

        /* Cap Rate — red flash <18%, amber flash 18.0–19.9% */
        #daily-top-grid .kpi-tile.kpi-cap-alert {
            background: #450a0a !important;
            animation: cap-alert-pulse 1.15s ease-in-out infinite;
        }
        #daily-top-grid .kpi-tile.kpi-cap-alert > h3 {
            color: #fecaca !important;
            text-shadow: 0 0 12px rgba(248, 113, 113, 0.85);
        }
        @keyframes cap-alert-pulse {
            0%, 100% { filter: brightness(1); box-shadow: inset 0 0 0 1px rgba(244, 63, 94, 0.45), 0 0 10px rgba(185, 28, 28, 0.4); }
            50% { filter: brightness(1.12); box-shadow: inset 0 0 0 2px rgba(248, 113, 113, 0.85), 0 0 28px rgba(239, 68, 68, 0.85); }
        }

        #daily-top-grid .kpi-tile.kpi-cap-warn {
            animation: cap-amber-blink 0.85s ease-in-out infinite;
        }
        #daily-top-grid .kpi-tile.kpi-cap-warn > h3 {
            color: #fde68a !important;
            text-shadow: 0 0 10px rgba(251, 191, 36, 0.85);
        }
        @keyframes cap-amber-blink {
            0%, 100% { filter: brightness(1); box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.35); }
            50% { filter: brightness(1.25); box-shadow: inset 0 0 0 2px rgba(251, 191, 36, 0.95), 0 0 22px rgba(245, 158, 11, 0.7); }
        }

        /* Display / TV shell — fluid rem scale for 720p / 1080p / 1440p / 4K.
           Everything stays on one screen; KPIs + headers lead, chart is capped. */
        html.wm-display {
            /* ~20px @1080p, ~13px @720p, ~36px @4K — readable across common monitors */
            font-size: clamp(12px, min(1.85vh, 1.04vw), 36px);
            overflow: hidden;
            height: 100%;
            width: 100%;
        }
        /* Demo wall on a PC monitor: lock a 16:9 / 1080p stage so it matches a TV. */
        html.wm-tv-preview {
            background: #020617;
            overflow: hidden;
            height: 100%;
            width: 100%;
        }
        html.wm-tv-preview.wm-display {
            font-size: 20px;
        }
        html.wm-tv-preview body.display-mode {
            width: 1920px !important;
            height: 1080px !important;
            max-height: 1080px !important;
            overflow: hidden;
        }
        body.display-mode {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100dvh;
            max-height: 100dvh;
            overflow: hidden;
            transform: none;
        }
        body.display-mode .dash-header {
            flex-shrink: 0;
            padding: 0.55rem 1.1rem;
        }
        body.display-mode .header-inner {
            /* Equal side rails so the clock sits on the true header midpoint */
            display: grid;
            /* Bias clock/weather left of true center */
            grid-template-columns: minmax(0, 0.72fr) auto minmax(0, 1.28fr);
            align-items: center;
            gap: 0.65rem 1rem;
            width: 100%;
            max-width: none;
        }
        body.display-mode .header-brand {
            justify-self: start;
            min-width: 0;
            align-items: center;
        }
        body.display-mode .header-brand-text {
            display: none;
        }
        body.display-mode #display-clock-row {
            grid-column: 2;
            justify-self: center;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.2rem;
            text-align: center;
            /* Extra nudge left toward the logo */
            transform: translateX(-1.75rem);
        }
        body.display-mode .header-controls {
            grid-column: 3;
            justify-self: end;
            justify-content: flex-end;
            min-width: 0;
        }
        body.display-mode #wash-logo.wash-logo {
            height: 7.25rem;
            max-height: 7.25rem;
            width: auto;
            background-color: #1e293b;
        }
        body.display-mode #display-date {
            font-size: 1.55rem;
            letter-spacing: 0.04em;
            font-weight: 900;
        }
        body.display-mode #display-time {
            font-size: 2.55rem;
            line-height: 1;
            font-weight: 900;
        }
        body.display-mode #display-weather {
            font-size: 1.2rem;
            font-weight: 800;
        }
        body.display-mode #display-weather .wx-label {
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: #7dd3fc;
            opacity: 0.85;
        }
        body.display-mode #display-weather .wx-sep {
            opacity: 0.55;
            font-weight: 600;
        }
        body.display-mode #display-weather .wx-aqi-good { color: #4ade80; }
        body.display-mode #display-weather .wx-aqi-mod { color: #facc15; }
        body.display-mode #display-weather .wx-aqi-usg { color: #fb923c; }
        body.display-mode #display-weather .wx-aqi-bad { color: #f87171; }
        body.display-mode #countdown-shield-box {
            height: auto;
            min-height: 3.35rem;
            padding: 0.45rem 1rem;
        }
        body.display-mode #timer-title-text {
            font-size: 0.95rem;
        }
        body.display-mode #sync-countdown {
            font-size: 1.85rem;
        }
        body.display-mode .last-sync-wrap {
            font-size: 1rem;
        }
        body.display-mode #clean-sync {
            font-size: 1.2rem;
        }
        body.display-mode .dash-main {
            max-width: none;
            padding: 0.55rem 1rem 0.45rem;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: 0.55rem;
            min-height: 0;
            flex: 1 1 auto;
            width: 100%;
        }
        body.display-mode .dash-main > .space-y-6 { gap: 0.55rem; }
        body.display-mode #view-daily,
        body.display-mode #view-month {
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
            gap: 0.55rem;
            overflow: hidden;
            /* Kill Tailwind space-y margins so hidden notes don't push KPIs down */
            align-items: stretch;
        }
        body.display-mode #view-daily.space-y-6 > *,
        body.display-mode #view-month.space-y-6 > * {
            margin-top: 0 !important;
            margin-bottom: 0 !important;
        }
        body.display-mode #view-daily.hidden,
        body.display-mode #view-month.hidden {
            display: none !important;
        }
        body.display-mode #daily-top-grid,
        body.display-mode #month-mtd-grid {
            flex-shrink: 0;
            width: 100%;
            order: 0;
        }
        /* Wall Month Matrix: classic MTD KPIs + table only (no MoM/YoY stats strip) */
        body.display-mode #month-stats-grid,
        body.display-mode #month-stats-pace-note,
        body.display-mode #month-stats-pace-approx,
        body.display-mode #month-archive-note {
            display: none !important;
        }
        /* Display KPIs — large wall-readable values (daily + month share style) */
        body.display-mode #daily-top-grid.daily-kpi-row,
        body.display-mode #month-mtd-grid.daily-kpi-row {
            display: flex !important;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: stretch;
            gap: 0.45rem;
            width: 100%;
            max-width: 100%;
            margin-inline: 0;
            overflow-x: hidden;
            grid-template-columns: none !important;
        }
        body.display-mode #daily-top-grid .kpi-tile,
        body.display-mode #month-mtd-grid.daily-kpi-row .kpi-tile {
            flex: 1 1 0;
            min-width: 0;
            min-height: 5.1rem;
            padding: 0.55rem 0.7rem 0.5rem 0.8rem;
        }
        body.display-mode #month-mtd-grid .kpi-tile.hidden {
            display: none !important;
        }
        body.display-mode #daily-top-grid .kpi-tile > p,
        body.display-mode #month-mtd-grid.daily-kpi-row .kpi-tile > p {
            font-size: 0.92rem !important;
            font-weight: 900 !important;
            letter-spacing: 0.04em !important;
            line-height: 1.1 !important;
            color: #cbd5e1 !important;
            font-family: inherit !important;
            text-transform: uppercase;
            white-space: normal;
            overflow: visible;
            word-break: break-word;
        }
        body.display-mode #daily-top-grid .kpi-tile h3,
        body.display-mode #month-mtd-grid.daily-kpi-row .kpi-tile h3 {
            font-size: 2.35rem !important;
            font-weight: 900 !important;
            line-height: 1.02 !important;
            font-family: inherit !important;
            margin-top: 0.2rem;
            color: var(--kpi-accent) !important;
        }
        body.display-mode #chart-title,
        body.display-mode #csa-rankings-panel h2 {
            font-size: 1.55rem !important;
            font-family: inherit !important;
            font-weight: 900 !important;
            line-height: 1.15 !important;
        }
        body.display-mode #chart-desc {
            font-size: 1rem !important;
            font-family: inherit !important;
            margin-bottom: 0 !important;
        }
        body.display-mode #chart-legend {
            font-size: 0.95rem !important;
            gap: 0.65rem 1rem !important;
            padding: 0.25rem 0 0.45rem !important;
            flex-shrink: 0;
        }
        body.display-mode #chart-legend .chart-legend-item {
            font-size: 0.95rem !important;
            font-weight: 800 !important;
        }
        body.display-mode #leaderboard-list {
            font-family: inherit !important;
        }
        body.display-mode #leaderboard-list .text-sm {
            font-size: 1.15rem !important;
        }
        body.display-mode #leaderboard-list .text-xs {
            font-size: 0.95rem !important;
        }
        body.display-mode #leaderboard-list .text-\[11px\] {
            font-size: 0.95rem !important;
        }
        body.display-mode #leaderboard-list .text-\[9px\] {
            font-size: 0.75rem !important;
        }
        /* Month matrix: JS scales table to fit remaining panel */
        body.display-mode #view-month {
            align-items: stretch;
        }
        body.display-mode #month-matrix-panel {
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            max-width: 100%;
            margin-inline: auto;
            align-self: stretch;
            overflow: hidden;
        }
        body.display-mode #month-matrix-scroll {
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
            position: relative;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        body.display-mode #month-matrix-scale-wrap {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            transform-origin: top center;
        }
        body.display-mode #month-matrix-table {
            width: max-content !important;
            max-width: none !important;
            min-width: 0 !important;
            font-family: inherit !important;
            table-layout: fixed;
            margin-inline: auto;
        }
        body.display-mode #view-month #matrix-thead th.matrix-name,
        body.display-mode #view-month #matrix-tbody .matrix-name,
        body.display-mode #view-month #matrix-tfoot .matrix-totals-label {
            width: 7.5rem;
            max-width: 7.5rem;
            min-width: 7.5rem;
            font-size: 1rem !important;
            font-weight: 800 !important;
            font-family: inherit !important;
            line-height: 1.2 !important;
            padding: 0.55rem 0.45rem !important;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        body.display-mode #view-month #matrix-tfoot .matrix-totals-label {
            white-space: normal;
            line-height: 1.15 !important;
            font-size: 0.85rem !important;
            letter-spacing: 0.03em !important;
        }
        body.display-mode #view-month #matrix-thead th.matrix-cell,
        body.display-mode #view-month #matrix-tbody .matrix-cell,
        body.display-mode #view-month #matrix-tfoot .matrix-totals-cell {
            font-size: 1.15rem !important;
            font-weight: 800 !important;
            font-family: inherit !important;
            line-height: 1.2 !important;
            padding: 0.5rem 0.55rem !important;
            white-space: nowrap;
        }
        body.display-mode #view-month #matrix-tbody .matrix-mtd,
        body.display-mode #view-month #matrix-tfoot .matrix-totals-mtd {
            font-size: 1.25rem !important;
            font-weight: 900 !important;
            font-family: inherit !important;
            padding: 0.5rem 0.65rem !important;
            white-space: nowrap;
        }
        body.display-mode #view-month #matrix-tbody .matrix-sub {
            font-size: 0.75em !important;
            font-family: inherit !important;
        }
        body.display-mode #display-date,
        body.display-mode #display-weather,
        body.display-mode #timer-title-text,
        body.display-mode .last-sync-wrap,
        body.display-mode .dash-footer-product {
            font-family: inherit !important;
        }
        body.display-mode #display-time,
        body.display-mode #sync-countdown,
        body.display-mode #clean-sync {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
        }
        /* Chart takes remaining width; rankings box is narrower and sits on the right.
           ARM stays right-justified inside the box; left edge of the box moves inward
           (less empty mid-gap than a full 0.9fr column, but wider than max-content rows). */
        body.display-mode #daily-chart-rank-row {
            flex: 1 1 auto;
            min-height: 0;
            align-items: stretch;
            width: 100%;
            gap: 0.65rem !important;
            grid-template-columns: minmax(0, 1fr) auto !important;
        }
        body.display-mode #daily-chart-rank-row .chart-panel,
        body.display-mode #csa-rankings-panel {
            display: flex;
            flex-direction: column;
            min-height: 0;
            height: 100%;
            max-height: 100%;
            padding: 0.7rem 0.85rem;
        }
        body.display-mode #csa-rankings-panel {
            /* Relaxed vs crowded pass; still right-docked and tighter than old 0.9fr */
            width: clamp(18.5rem, 24vw, 23.5rem);
            max-width: 100%;
            justify-self: end;
        }
        body.display-mode #daily-chart-rank-row.rankings-fs #csa-rankings-panel {
            width: clamp(21.5rem, 28vw, 27.5rem);
        }
        body.display-mode #chart-viewport-box {
            height: auto !important;
            min-height: 0 !important;
            max-height: 100%;
            flex: 1 1 auto;
        }
        body.display-mode #scroll-wrapper-track {
            flex: 1 1 auto;
            min-height: 0;
            max-height: 100%;
            display: flex;
            flex-direction: column;
            overflow: hidden; /* wall TV — no scrollbars */
        }
        body.display-mode #leaderboard-list {
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden; /* wall TV — no scrollbars */
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
            justify-content: flex-start;
        }
        body.display-mode #leaderboard-list > div {
            padding-top: 0.4rem !important;
            padding-bottom: 0.4rem !important;
            flex: 0 1 auto;
            min-height: 0;
        }
        body.display-mode .dash-footer {
            flex-shrink: 0;
            flex-wrap: nowrap;
            align-items: center;
            padding-top: 0.4rem;
            padding-bottom: 0.4rem;
        }
        body.display-mode .dash-footer-brand {
            align-items: center;
            gap: 0.45rem;
        }
        body.display-mode .dash-footer-brand .gs-powered {
            font-size: 0.85rem;
        }
        body.display-mode .dash-footer-brand .gs-brand-name {
            font-size: 1.15rem !important;
            font-weight: 900;
            letter-spacing: 0.02em;
        }
        body.display-mode .dash-footer-product {
            gap: 0.4rem;
        }
        body.display-mode .dash-footer-product span {
            font-size: 0.95rem !important;
            font-weight: 800;
        }
        body.display-mode #geekstrength-logo {
            height: 1.85rem !important;
            width: 1.85rem !important;
        }
        body.display-mode #trend-selector-wrap,
        body.display-mode #contrib-selector-wrap,
        body.display-mode #chart-toggles,
        body.display-mode #ranking-toggles,
        body.display-mode #btn-trend,
        body.display-mode #btn-contrib {
            display: none !important;
        }
        body.display-mode #daily-chart-rank-row .chart-panel > .chart-panel-head {
            flex-shrink: 0;
            padding-bottom: 0.35rem;
            margin-bottom: 0.25rem;
            gap: 0.35rem !important;
        }

        /* Shorter TVs (720p): tighten KPIs / header so chart+rank still fit */
        @media (max-height: 800px) {
            body.display-mode #daily-top-grid .kpi-tile {
                min-height: 4.25rem;
                padding: 0.4rem 0.55rem;
            }
            body.display-mode #daily-top-grid .kpi-tile h3 {
                font-size: 1.85rem !important;
            }
            body.display-mode #daily-top-grid .kpi-tile > p {
                font-size: 0.78rem !important;
            }
            body.display-mode #display-time {
                font-size: 2rem;
            }
            body.display-mode #wash-logo.wash-logo {
                height: 5.75rem;
                max-height: 5.75rem;
            }
        }

        /* Interactive shell: header (and footer) stay put; all views scroll in main. */
        html:not(.wm-display) {
            height: 100%;
            overflow: hidden;
        }
        body:not(.display-mode) {
            height: min(100dvh, 100svh);
            max-height: min(100dvh, 100svh);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        body:not(.display-mode) .dash-header {
            flex-shrink: 0;
            z-index: 40;
        }
        body:not(.display-mode) .dash-main {
            flex: 1 1 auto;
            min-height: 0;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        /* Footer lives at the bottom of scrollable main (not pinned to viewport). */
        .dash-footer {
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            width: 100%;
            box-sizing: border-box;
        }
        body:not(.display-mode) .dash-footer {
            margin-top: 1.75rem;
            padding-top: 1rem;
            padding-bottom: 0.5rem;
            background: transparent;
        }
        .dash-footer-brand {
            display: inline-flex;
            flex-wrap: nowrap;
            align-items: center;
            line-height: 1;
            text-decoration: none;
            color: inherit;
            transition: opacity 0.15s ease;
        }
        .dash-footer-brand:hover {
            opacity: 0.88;
        }
        .dash-footer-brand:hover .gs-brand-name {
            color: #86efac;
        }
        .dash-footer-brand > * {
            line-height: 1;
            vertical-align: middle;
        }

        /* WhatsApp KPI pulse — compact square on all layouts */
        .wa-pulse-btn {
            width: 2.65rem;
            height: 2.65rem;
            min-width: 2.65rem;
            padding: 0;
            line-height: 1;
            gap: 0.05rem;
        }
        .wa-pulse-btn .wa-pulse-icon {
            width: 1.15rem;
            height: 1.15rem;
            display: block;
        }
        .wa-pulse-btn .wa-pulse-label {
            font-size: 0.55rem;
            font-weight: 900;
            letter-spacing: 0.04em;
            line-height: 1;
        }
        .header-nav .nav-short { display: none; }

        /* Mid-width desktop (windowed, not maximized): keep one header row.
           Default flex-wrap + long "Month Matrix"/"Revenue Matrix" labels stack
           awkwardly between ~900–1500px. */
        @media (orientation: landscape) and (max-width: 1500px) {
            body:not(.display-mode) .dash-header {
                padding-top: 0.4rem;
                padding-bottom: 0.4rem;
            }
            body:not(.display-mode) .header-inner {
                flex-wrap: nowrap !important;
                align-items: center !important;
                gap: 0.55rem !important;
            }
            body:not(.display-mode) .header-brand {
                flex: 0 1 auto;
                min-width: 0;
                gap: 0.45rem !important;
            }
            body:not(.display-mode) #wash-logo.wash-logo,
            body:not(.display-mode) .header-brand #wash-logo {
                height: 3.5rem !important;
                max-height: 3.5rem !important;
                max-width: 6.5rem !important;
                flex-shrink: 0;
            }
            body:not(.display-mode) .header-brand-text {
                flex: 0 1 auto;
                min-width: 0;
            }
            body:not(.display-mode) .header-nav {
                flex-wrap: nowrap !important;
                gap: 0.3rem !important;
                margin-top: 0 !important;
            }
            body:not(.display-mode) .header-nav .nav-pipe { display: none !important; }
            body:not(.display-mode) .header-nav .nav-long { display: none !important; }
            body:not(.display-mode) .header-nav .nav-short { display: inline !important; }
            body:not(.display-mode) #nav-daily,
            body:not(.display-mode) #nav-month,
            body:not(.display-mode) #nav-revenue,
            body:not(.display-mode) #nav-multi {
                padding: 0.35rem 0.55rem !important;
                font-size: 0.65rem !important;
                white-space: nowrap;
                line-height: 1.1 !important;
            }
            body:not(.display-mode) #btn-autocycle {
                display: none !important;
            }
            body:not(.display-mode) #btn-sign-out {
                height: 2.15rem !important;
                padding: 0 0.55rem !important;
                font-size: 0.6rem !important;
                white-space: nowrap;
            }
            body:not(.display-mode) .header-controls {
                flex: 1 1 auto;
                flex-wrap: nowrap !important;
                justify-content: flex-end !important;
                gap: 0.4rem !important;
                min-width: 0;
            }
            body:not(.display-mode) .controls-pickers {
                flex-wrap: nowrap !important;
                gap: 0.35rem !important;
                min-width: 0;
                overflow-x: auto;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: thin;
            }
            body:not(.display-mode) #site-selector {
                max-width: 9.5rem;
            }
            body:not(.display-mode) #period-picker-container .date-label {
                display: none;
            }
            body:not(.display-mode) #countdown-shield-box {
                height: 2.35rem !important;
                padding-left: 0.75rem !important;
                padding-right: 0.75rem !important;
                gap: 0.35rem;
                flex-shrink: 0;
            }
            body:not(.display-mode) #countdown-shield-box #timer-title-text {
                font-size: 0.6rem !important;
            }
            body:not(.display-mode) #countdown-shield-box #sync-countdown {
                font-size: 0.85rem !important;
            }
            body:not(.display-mode) #countdown-shield-box .last-sync-wrap {
                font-size: 0.65rem !important;
            }
        }

        @media (orientation: landscape) and (max-width: 1180px) {
            body:not(.display-mode) #wash-logo.wash-logo,
            body:not(.display-mode) .header-brand #wash-logo {
                height: 2.85rem !important;
                max-height: 2.85rem !important;
                max-width: 5.25rem !important;
            }
            body:not(.display-mode) #countdown-shield-box .sync-pipe,
            body:not(.display-mode) #countdown-shield-box .last-sync-wrap {
                display: none !important;
            }
        }

        /* Chart + rankings stay within main/KPI width; wide charts scroll inside. */
        #daily-chart-rank-row {
            width: 100%;
            max-width: 100%;
        }
        #daily-chart-rank-row > * {
            min-width: 0;
        }
        #daily-chart-rank-row .chart-panel {
            overflow: hidden;
        }
        #daily-chart-rank-row .chart-scroll-track {
            width: 100%;
            max-width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
        }
        /* Fixed above the scroll track so it stays centered while the chart slides */
        .chart-legend-bar {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 0.45rem 1.1rem;
            width: 100%;
            min-height: 1.35rem;
            margin-bottom: 0.55rem;
            padding: 0 0.25rem;
        }
        .chart-legend-bar:empty {
            display: none;
        }
        .chart-axis-shell {
            display: flex;
            align-items: stretch;
            width: 100%;
            min-width: 0;
            gap: 0;
        }
        .chart-axis-shell > .chart-scroll-track {
            flex: 1 1 auto;
            min-width: 0;
        }
        .trend-axis-rail {
            display: none;
            flex: 0 0 auto;
            flex-direction: column;
            justify-content: space-between;
            box-sizing: border-box;
            pointer-events: none;
            user-select: none;
            line-height: 1;
            font-weight: 700;
            font-size: 0.65rem;
        }
        .trend-axis-rail span {
            display: block;
            white-space: nowrap;
            text-align: right;
        }
        .trend-axis-left {
            width: 2rem;
            color: #94a3b8;
            padding-right: 0.25rem;
        }
        .trend-axis-right {
            width: 2.35rem;
            color: #f59e0b;
            padding-left: 0.25rem;
        }
        .trend-axis-right span {
            text-align: left;
        }
        .chart-axis-shell.sticky-axes-on .trend-axis-rail {
            display: flex;
        }
        .chart-legend-item {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            font-size: 0.7rem;
            font-weight: 700;
            color: #94a3b8;
            white-space: nowrap;
        }
        .chart-legend-swatch {
            width: 0.7rem;
            height: 0.7rem;
            border-radius: 2px;
            flex-shrink: 0;
        }
        .chart-legend-swatch.line {
            height: 3px;
            border-radius: 1px;
        }
        #csa-rankings-panel {
            max-width: 100%;
        }
        sup.arm-best {
            font-size: 0.72em;
            font-weight: 800;
            line-height: 1;
            margin-right: 0.12em;
            color: #fbbf24;
            cursor: help;
            vertical-align: super;
            position: relative;
            top: -0.35em;
            text-shadow: 0 1px 2px rgb(0 0 0 / 0.45);
        }
        sup.arm-best.is-record {
            color: #fde047;
        }
        #leaderboard-list .lb-arm-main sup.arm-best {
            font-size: 0.68em;
        }
        #leaderboard-list .grid.items-center sup.arm-best {
            font-size: 0.65em;
            top: -0.3em;
        }
        #leaderboard-list .lb-nxt-sub {
            display: block;
            margin-top: 0.12rem;
            font-size: 0.58rem;
            line-height: 1.35;
            color: rgb(148 163 184 / 0.9);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        #leaderboard-list .lb-nxt-sub .lbl {
            font-style: italic;
            font-weight: 500;
            font-size: 0.54rem;
            letter-spacing: 0.03em;
            color: rgb(148 163 184 / 0.75);
        }
        #leaderboard-list .lb-nxt-sub em {
            font-style: italic;
            font-weight: 700;
            font-size: 0.68rem;
            color: rgb(251 191 36 / 0.92);
        }
        #leaderboard-list .lb-nxt-sep {
            margin: 0 0.28rem;
            font-style: normal;
            font-size: 0.5rem;
            color: rgb(100 116 139 / 0.7);
        }
        body.display-mode #leaderboard-list .lb-nxt-sub {
            font-size: 0.54rem;
        }
        body.display-mode #leaderboard-list .lb-nxt-sub em {
            font-size: 0.62rem;
        }
        /* CSA Rankings: FS needs room for 3 metrics; express is name+ARM only → narrower */
        @media (min-width: 1024px) {
            #daily-chart-rank-row.rankings-fs {
                grid-template-columns: minmax(0, 1fr) minmax(14rem, 26%);
            }
            #daily-chart-rank-row.rankings-express {
                grid-template-columns: minmax(0, 1fr) minmax(11rem, 18%);
            }
        }

        #countdown-shield-box.sync-urgent {
            border-color: #f43f5e;
            box-shadow: 0 0 16px rgba(244, 63, 94, 0.35);
            animation: sync-urgent-flash 1s ease-in-out infinite;
        }
        #countdown-shield-box.sync-urgent #timer-title-text,
        #countdown-shield-box.sync-urgent #sync-countdown {
            color: #fb7185;
        }
        @keyframes sync-urgent-flash {
            0%, 100% { background-color: #0f172a; box-shadow: 0 0 12px rgba(244, 63, 94, 0.25); }
            50% { background-color: #3f1219; box-shadow: 0 0 22px rgba(244, 63, 94, 0.55); }
        }

        /* Daily + Month KPI row: one compact line, parallelogram (diagonal) tiles */
        #daily-top-grid.daily-kpi-row,
        #month-mtd-grid.daily-kpi-row {
            display: flex;
            flex-wrap: nowrap;
            align-items: stretch;
            gap: 0.4rem;
            width: 100%;
            overflow-x: auto;
            padding-bottom: 0.15rem;
        }
        #daily-top-grid .kpi-tile,
        #month-mtd-grid.daily-kpi-row .kpi-tile {
            --kpi-slant: 12px;
            --kpi-accent: #38bdf8;
            position: relative;
            display: flex;
            flex: 1 1 0;
            flex-direction: column;
            justify-content: space-between;
            min-width: 4.75rem;
            min-height: 4.35rem;
            padding: 0.55rem 0.85rem 0.5rem 1rem;
            background:
                linear-gradient(135deg, color-mix(in srgb, var(--kpi-accent) 18%, transparent) 0%, transparent 42%),
                #1e293b;
            clip-path: polygon(
                var(--kpi-slant) 0,
                100% 0,
                calc(100% - var(--kpi-slant)) 100%,
                0 100%
            );
            border: none;
            border-radius: 0;
            box-shadow: inset 0 0 0 1px rgba(51, 65, 85, 0.85);
        }
        #daily-top-grid .kpi-tile::before,
        #month-mtd-grid.daily-kpi-row .kpi-tile::before {
            content: "";
            position: absolute;
            left: 4px;
            top: 12%;
            bottom: 12%;
            width: 3px;
            background: var(--kpi-accent);
            transform: skewX(-14deg);
            border-radius: 1px;
            opacity: 0.95;
        }
        #daily-top-grid .kpi-tile > p,
        #month-mtd-grid.daily-kpi-row .kpi-tile > p {
            margin: 0;
            font-size: 0.58rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: #94a3b8;
            line-height: 1.15;
            padding-left: 0.15rem;
            white-space: normal;
            overflow-wrap: break-word;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        #daily-top-grid .kpi-tile h3,
        #month-mtd-grid.daily-kpi-row .kpi-tile h3 {
            margin: 0.2rem 0 0;
            margin-top: auto;
            font-size: clamp(1.05rem, 1.35vw, 1.55rem);
            font-weight: 900;
            line-height: 1.05;
            color: var(--kpi-accent);
            padding-left: 0.15rem;
            white-space: nowrap;
        }
        #daily-top-grid .kpi-sky,
        #month-mtd-grid .kpi-sky { --kpi-accent: #38bdf8; }
        #daily-top-grid .kpi-indigo,
        #month-mtd-grid .kpi-indigo { --kpi-accent: #818cf8; }
        #daily-top-grid .kpi-emerald,
        #month-mtd-grid .kpi-emerald { --kpi-accent: #34d399; }
        #daily-top-grid .kpi-pink,
        #month-mtd-grid .kpi-pink { --kpi-accent: #f472b6; }
        #daily-top-grid .kpi-rose,
        #month-mtd-grid .kpi-rose { --kpi-accent: #fb7185; }
        #daily-top-grid .kpi-amber,
        #month-mtd-grid .kpi-amber { --kpi-accent: #fbbf24; }
        #daily-top-grid .kpi-lime,
        #month-mtd-grid .kpi-lime { --kpi-accent: #a3e635; }
        #daily-top-grid .kpi-purple,
        #month-mtd-grid .kpi-purple { --kpi-accent: #c084fc; }
        #daily-top-grid .kpi-orange,
        #month-mtd-grid .kpi-orange { --kpi-accent: #fb923c; }
        #daily-top-grid .kpi-orange-soft,
        #month-mtd-grid .kpi-orange-soft { --kpi-accent: #fdba74; }

        /* Generic KPI tiles (revenue, etc.) keep the original card look */
        .kpi-tile {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 5.75rem;
        }
        .kpi-tile > h3 {
            margin-top: auto;
            line-height: 1.1;
        }
        #month-mtd-grid.daily-kpi-row .kpi-tile {
            min-height: 4.35rem;
        }
        .mtd-label-short { display: none; }
        .mtd-label-long { display: inline; }

        /* Month / desktop — same slanted KPI row as daily (full width) */
        @media (min-width: 1024px) {
            body:not(.display-mode) #view-month {
                align-items: stretch;
            }
            body:not(.display-mode) #month-mtd-grid.daily-kpi-row {
                display: flex;
                flex-wrap: nowrap;
                justify-content: flex-start;
                gap: 0.4rem;
                width: 100%;
                max-width: 100%;
                margin-inline: 0;
            }
            body:not(.display-mode) #month-mtd-grid.daily-kpi-row .kpi-tile {
                width: auto;
                flex: 1 1 0;
                min-width: 0;
            }
            body:not(.display-mode) #month-matrix-panel {
                width: 100%;
                max-width: 100%;
                margin-inline: 0;
                align-self: stretch;
            }
            body:not(.display-mode) #month-matrix-scroll {
                display: block;
                overflow-x: auto;
            }
            body:not(.display-mode) #month-matrix-scale-wrap {
                width: 100%;
                min-width: 100%;
            }
            body:not(.display-mode) #month-matrix-table {
                width: max-content;
                min-width: 100%;
                margin-inline: 0;
                table-layout: auto;
            }
            body:not(.display-mode) #view-month #matrix-thead th.matrix-name,
            body:not(.display-mode) #matrix-tbody .matrix-name,
            body:not(.display-mode) #matrix-tfoot .matrix-totals-label {
                width: 6.75rem;
                max-width: 6.75rem;
                min-width: 6.75rem;
                padding-left: 0.5rem;
                padding-right: 0.5rem;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            body:not(.display-mode) #matrix-tfoot .matrix-totals-label {
                white-space: normal;
                line-height: 1.15;
                font-size: 0.68rem;
                letter-spacing: 0.03em;
            }
            body:not(.display-mode) #view-month #matrix-thead th.matrix-cell {
                font-size: 0.9rem;
            }
            body:not(.display-mode) #view-revenue #rev-day-thead th.rev-day-num {
                font-size: 0.9rem;
            }
        }

        /* Month matrix — shared legible sizing for CSA body + totals footer */
        #view-month #matrix-thead th,
        #matrix-tbody .matrix-name,
        #matrix-tfoot .matrix-totals-label {
            font-size: 0.8rem;
            letter-spacing: 0.04em;
            line-height: 1.2;
        }
        #view-month #matrix-thead th.matrix-cell {
            font-weight: 800;
            cursor: help;
        }
        #view-revenue #rev-day-thead th.rev-day-num {
            font-size: 0.8rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: none;
            cursor: help;
        }
        #matrix-tfoot .matrix-totals-label {
            letter-spacing: 0.06em;
            white-space: nowrap;
            text-transform: uppercase;
        }
        #matrix-tbody .matrix-cell,
        #matrix-tfoot .matrix-totals-cell {
            font-size: 0.95rem;
            line-height: 1.2;
        }
        #matrix-tbody .matrix-mtd,
        #matrix-tfoot .matrix-totals-mtd {
            font-size: 1.05rem;
            line-height: 1.2;
        }
        #matrix-tbody .matrix-sub {
            font-size: 0.75em;
        }

        .nav-short { display: none; }
        .nav-long { display: inline; }

        /* ------------------------------------------------------------------ */
        /* Portrait = mobile app layout (true device width, large type).      */
        /* Landscape / desktop keep the compact slanted KPI row above.        */
        /* ------------------------------------------------------------------ */
        /* Portrait phones/tablets — including large Pixels that report ~430–480 CSS px
           (and more if "Desktop site" / high DPR inflates width). TV/display-mode stays desktop. */
        @media (orientation: portrait) and (max-width: 1400px) {
            html {
                /* Portrait app scale: readable on iPhone and Pixel without ballooning rem sizes. */
                font-size: clamp(14px, 3.8vw, 17px);
            }
            html, body {
                width: 100% !important;
                max-width: 100% !important;
                height: min(100dvh, 100svh) !important;
                max-height: min(100dvh, 100svh) !important;
                overflow: hidden !important;
                background: #0f172a !important;
                position: relative;
            }
            body {
                min-width: 0 !important;
            }

            header {
                display: flex !important;
                flex-direction: column !important;
                align-items: stretch !important;
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
                padding: 0.4rem 0.45rem !important;
                gap: 0.4rem !important;
                overflow: hidden;
            }
            .header-inner {
                display: flex !important;
                flex-direction: column !important;
                align-items: stretch !important;
                width: 100% !important;
                gap: 0.4rem !important;
            }
            .header-brand {
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                width: 100%;
                min-width: 0;
                gap: 0.5rem !important;
            }
            .header-brand #wash-logo {
                height: 3.25rem !important;
                width: auto !important;
                max-width: 5.5rem !important;
                flex-shrink: 0;
                padding: 0 !important;
                background-color: #1e293b !important;
            }
            .header-brand-text {
                min-width: 0;
                flex: 1;
            }
            #header-title {
                display: none !important;
            }
            .header-subtitle { display: none !important; }
            .header-nav {
                gap: 0.35rem !important;
                margin-top: 0.3rem !important;
            }
            .header-nav .nav-pipe { display: none !important; }
            .header-nav .nav-long { display: none !important; }
            .header-nav .nav-short { display: inline !important; }
            #nav-daily,
            #nav-month,
            #nav-revenue,
            #btn-autocycle {
                font-size: 0.82rem !important;
                padding: 0.45rem 0.65rem !important;
                line-height: 1.1 !important;
            }
            #autocycle-text {
                display: none !important;
            }
            /* Sign Out stays top-right beside brand */
            #btn-sign-out {
                width: auto !important;
                max-width: none !important;
                flex: none !important;
                align-self: center !important;
                margin-left: auto !important;
                height: 2.15rem !important;
                padding: 0 0.65rem !important;
                justify-content: center !important;
                font-size: 0.72rem !important;
                white-space: nowrap;
            }

            .header-controls,
            header > div:last-child {
                display: flex !important;
                flex-direction: column !important;
                flex-wrap: nowrap !important;
                align-items: stretch !important;
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                gap: 0.45rem !important;
            }
            .header-controls > *,
            header > div:last-child > * {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                box-sizing: border-box !important;
                flex: none !important;
            }
            /* Site + date compact row, big square WA button */
            .controls-pickers {
                display: flex !important;
                flex-direction: row !important;
                flex-wrap: nowrap !important;
                align-items: stretch !important;
                gap: 0.4rem !important;
                width: 100% !important;
            }
            .controls-pickers > * {
                width: auto !important;
                max-width: none !important;
                flex: none !important;
            }
            #site-selector {
                flex: 1 1 0 !important;
                min-width: 0 !important;
                width: auto !important;
                height: 2.75rem !important;
                font-size: 0.88rem !important;
                padding-left: 0.55rem !important;
                padding-right: 0.35rem !important;
            }
            /* Never force the hidden month picker open in Daily view */
            #date-picker-container:not(.hidden),
            #month-picker-container:not(.hidden),
            #period-picker-container {
                flex: 1 1 0 !important;
                min-width: 0 !important;
                width: auto !important;
                height: 2.75rem !important;
                display: flex !important;
                align-items: center;
                padding-left: 0.45rem !important;
                padding-right: 0.45rem !important;
            }
            #period-picker-container .dash-period-select {
                font-size: 0.7rem !important;
            }
            #revenue-grain-toggle:not(.hidden) {
                flex: 0 0 auto !important;
                height: 2.75rem !important;
                display: flex !important;
                align-items: center;
                padding-left: 0.25rem !important;
                padding-right: 0.25rem !important;
            }
            #month-picker-container.hidden,
            #date-picker-container.hidden,
            #revenue-grain-toggle.hidden {
                display: none !important;
            }
            #date-picker-container input,
            #month-picker-container input {
                flex: 1;
                min-width: 0 !important;
                width: 100% !important;
                max-width: 100% !important;
                font-size: 0.88rem !important;
            }
            .date-label {
                display: none !important;
            }
            #btn-whatsapp-pulse,
            .wa-pulse-btn {
                width: 2.75rem !important;
                height: 2.75rem !important;
                min-width: 2.75rem !important;
                max-width: 2.75rem !important;
                flex: 0 0 2.75rem !important;
                border-radius: 0.75rem !important;
                gap: 0.1rem;
            }
            .wa-pulse-btn .wa-pulse-icon {
                width: 1.15rem !important;
                height: 1.15rem !important;
            }
            .wa-pulse-btn .wa-pulse-label {
                font-size: 0.55rem !important;
            }
            #countdown-shield-box {
                height: auto !important;
                min-height: 2.75rem;
                padding: 0.5rem 0.7rem !important;
                justify-content: center !important;
                align-items: center !important;
                gap: 0.35rem 0.85rem !important;
                flex-wrap: wrap;
                text-align: center;
            }
            #countdown-shield-box #timer-title-text {
                font-size: 0.82rem !important;
            }
            #countdown-shield-box #sync-countdown {
                font-size: 1.15rem !important;
            }
            #countdown-shield-box .last-sync-wrap {
                font-size: 0.82rem !important;
            }
            #countdown-shield-box .sync-pipe {
                display: none;
            }

            main {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                padding: 0.45rem 0.45rem calc(1rem + var(--wm-mobile-chrome-bottom, 3.5rem)) !important;
                overflow-x: hidden !important;
                box-sizing: border-box !important;
            }
            #view-daily,
            #view-month {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                overflow-x: hidden !important;
                row-gap: 0.75rem;
            }
            #view-month .month-heading {
                border-bottom-width: 1px;
                padding-bottom: 0.35rem !important;
                margin: 0;
            }
            #view-month .month-heading h2 {
                font-size: 1.15rem !important;
                line-height: 1.2 !important;
                letter-spacing: 0.04em;
                text-transform: uppercase;
            }

            /* Month MTD KPIs — match Daily portrait card style */
            #month-mtd-grid.daily-kpi-row {
                display: grid !important;
                grid-template-columns: 1fr 1fr !important;
                gap: 0.55rem !important;
                width: 100% !important;
                max-width: 100% !important;
                overflow: visible !important;
                padding-bottom: 0 !important;
            }
            #month-mtd-grid.daily-kpi-row .kpi-tile {
                --kpi-slant: 0px;
                display: flex !important;
                flex: none !important;
                flex-direction: column !important;
                justify-content: space-between !important;
                align-items: flex-start !important;
                min-width: 0 !important;
                min-height: 5.1rem !important;
                height: auto !important;
                padding: 0.65rem 0.55rem 0.6rem !important;
                clip-path: none !important;
                border-radius: 0.75rem !important;
                border: 1px solid #1e293b !important;
                box-shadow: none !important;
                box-sizing: border-box !important;
                background:
                    linear-gradient(135deg, color-mix(in srgb, var(--kpi-accent) 14%, transparent) 0%, transparent 55%),
                    #1e293b !important;
            }
            #month-mtd-grid.daily-kpi-row .kpi-tile::before {
                left: 0 !important;
                top: 0 !important;
                bottom: 0 !important;
                width: 4px !important;
                transform: none !important;
                border-radius: 0.75rem 0 0 0.75rem !important;
            }
            /* Express sites: never force FS-only MTD tiles visible */
            #month-mtd-grid .kpi-tile.hidden {
                display: none !important;
            }
            #month-mtd-grid.daily-kpi-row .kpi-tile > p {
                font-size: 0.72rem !important;
                line-height: 1.15 !important;
                letter-spacing: 0.04em !important;
                color: #94a3b8 !important;
                margin: 0 !important;
                width: 100%;
                padding-left: 0.3rem !important;
                -webkit-line-clamp: 2;
            }
            #month-mtd-grid.daily-kpi-row .kpi-tile > h3 {
                font-size: 1.85rem !important;
                line-height: 1 !important;
                margin-top: 0.3rem !important;
                width: 100%;
                padding-left: 0.3rem !important;
                color: var(--kpi-accent) !important;
                word-break: break-word;
            }
            #month-mtd-grid .mtd-label-long { display: none !important; }
            #month-mtd-grid .mtd-label-short { display: inline !important; }

            #view-daily.space-y-6 > :not([hidden]) ~ :not([hidden]),
            #view-daily {
                row-gap: 0.75rem;
            }

            /* Big mobile KPI cards */
            #daily-top-grid.daily-kpi-row {
                display: grid !important;
                grid-template-columns: 1fr 1fr;
                gap: 0.55rem;
                width: 100%;
                max-width: 100%;
                overflow: visible;
                padding-bottom: 0;
            }
            #daily-top-grid .kpi-tile {
                --kpi-slant: 0px;
                flex: none;
                min-width: 0;
                min-height: 5.1rem;
                padding: 0.65rem 0.55rem 0.6rem;
                clip-path: none;
                border-radius: 0.75rem;
                border: 1px solid #1e293b;
                box-shadow: none;
                background:
                    linear-gradient(135deg, color-mix(in srgb, var(--kpi-accent) 14%, transparent) 0%, transparent 55%),
                    #1e293b;
            }
            #daily-top-grid .kpi-tile::before {
                left: 0;
                top: 0;
                bottom: 0;
                width: 4px;
                transform: none;
                border-radius: 0.75rem 0 0 0.75rem;
            }
            #daily-top-grid .kpi-tile > p {
                font-size: 0.72rem;
                letter-spacing: 0.04em;
                color: #94a3b8;
                -webkit-line-clamp: 2;
                padding-left: 0.3rem;
            }
            #daily-top-grid .kpi-tile h3 {
                font-size: 1.85rem;
                margin-top: 0.3rem;
                padding-left: 0.3rem;
                line-height: 1;
            }

            /* Chart first, rankings below */
            #daily-chart-rank-row {
                display: flex !important;
                flex-direction: column;
                gap: 0.7rem;
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                overflow: hidden !important;
            }
            #daily-chart-rank-row .chart-panel {
                order: 1;
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                padding: 0.7rem !important;
                border-radius: 1rem;
                box-sizing: border-box;
                overflow: hidden !important;
                background: #1e293b;
                contain: inline-size;
            }
            #csa-rankings-panel {
                order: 2;
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                padding: 0.85rem !important;
                border-radius: 1rem;
                box-sizing: border-box;
            }
            #csa-rankings-panel > div:first-child h2 {
                font-size: 1.15rem !important;
            }
            #csa-rankings-panel #ranking-toggles {
                font-size: 0.78rem !important;
            }

            #chart-title { font-size: 1rem !important; }
            /* Desc + short interval on one row (saves a full stacked selector row). */
            #daily-chart-rank-row .chart-panel-head {
                gap: 0.55rem !important;
                padding-bottom: 0.55rem !important;
                margin-bottom: 0.55rem !important;
            }
            #daily-chart-rank-row .chart-desc-row {
                display: flex !important;
                flex-wrap: nowrap !important;
                align-items: center !important;
                gap: 0.45rem !important;
                margin-top: 0.2rem !important;
                margin-bottom: 0.35rem !important;
            }
            #chart-desc {
                display: block !important;
                margin: 0 !important;
                font-size: 0.7rem !important;
                line-height: 1.25 !important;
                flex: 1 1 auto;
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            #daily-chart-rank-row .chart-interval-wrap,
            #trend-selector-wrap,
            #contrib-selector-wrap {
                flex-shrink: 0;
                padding: 0.1rem 0.35rem !important;
            }
            #tab-trend-interval,
            #tab-contrib-interval {
                font-size: 0.7rem !important;
                max-width: 5.25rem;
            }
            #chart-toggles {
                flex-wrap: wrap;
                gap: 0.35rem 0.7rem !important;
                font-size: 0.78rem !important;
                margin-top: 0.15rem !important;
            }
            #daily-chart-rank-row .chart-scroll-track {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                overflow-x: auto !important;
                overflow-y: hidden !important;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior-x: contain;
                touch-action: pan-x;
            }
            #chart-axis-shell.sticky-axes-on {
                gap: 0.15rem;
            }
            #chart-axis-shell.sticky-axes-on .trend-axis-rail {
                font-size: 0.72rem;
            }
            #chart-axis-shell.sticky-axes-on .trend-axis-left {
                width: 2.15rem;
            }
            #chart-axis-shell.sticky-axes-on .trend-axis-right {
                width: 2.5rem;
            }
            #chart-viewport-box {
                height: 8rem !important;
                max-width: none !important;
                padding-right: 12px;
                box-sizing: content-box;
            }
            #chart-viewport-box,
            #dashboardChart {
                background: #1e293b !important;
            }
            .chart-legend-bar {
                justify-content: flex-start;
                gap: 0.3rem 0.6rem;
                margin-bottom: 0.3rem;
            }
            .chart-legend-item { font-size: 0.85rem; }

            #view-month .overflow-x-auto {
                max-width: 100%;
                min-width: 0;
                overflow-x: auto;
            }
            #view-month table {
                font-size: 0.85rem !important;
            }
            #view-month #matrix-thead th,
            #view-month #matrix-tbody .matrix-name,
            #view-month #matrix-tfoot .matrix-totals-label {
                font-size: 0.95rem !important;
                padding-top: 0.7rem !important;
                padding-bottom: 0.7rem !important;
            }
            #view-month #matrix-tbody .matrix-cell,
            #view-month #matrix-tfoot .matrix-totals-cell {
                font-size: 1.15rem !important;
                padding-top: 0.65rem !important;
                padding-bottom: 0.65rem !important;
            }
            #view-month #matrix-tbody .matrix-mtd,
            #view-month #matrix-tfoot .matrix-totals-mtd {
                font-size: 1.25rem !important;
                padding-top: 0.7rem !important;
                padding-bottom: 0.7rem !important;
            }
            #view-month #matrix-tbody .matrix-sub {
                font-size: 0.8em !important;
            }

            .dash-footer {
                gap: 0.45rem 0.75rem !important;
                padding-top: 0.85rem !important;
                padding-bottom: 0.35rem !important;
            }
            .dash-footer .dash-footer-sep { display: none !important; }
            #btn-feedback,
            #btn-user-guide {
                font-size: 0.85rem !important;
                padding: 0.35rem 0.2rem;
            }
            #geekstrength-logo {
                height: 2rem !important;
                width: 2rem !important;
            }

            /* Stacked CSA rows — compact portrait layout (FS sites 12/19/28) */
            #leaderboard-list.space-y-3 > :not([hidden]) ~ :not([hidden]) {
                margin-top: 0.35rem !important;
            }
            #csa-rankings-panel {
                padding: 0.65rem 0.7rem !important;
            }
            #csa-rankings-panel > div:first-child {
                margin-bottom: 0.45rem !important;
                gap: 0.35rem !important;
            }
            #leaderboard-list .lb-row-portrait {
                display: flex;
                flex-direction: column;
                align-items: stretch;
                gap: 0.28rem;
                padding: 0.5rem 0.55rem;
                max-width: 100%;
                box-sizing: border-box;
                overflow: hidden;
            }
            #leaderboard-list .lb-row-portrait .lb-top {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto;
                align-items: start;
                gap: 0.4rem;
                min-width: 0;
            }
            #leaderboard-list .lb-row-portrait .lb-name-row {
                display: flex;
                align-items: baseline;
                gap: 0.3rem;
                min-width: 0;
            }
            #leaderboard-list .lb-row-portrait .lb-rank {
                flex-shrink: 0;
                width: 1rem;
                font-size: 0.62rem;
                font-weight: 800;
                color: #64748b;
                line-height: 1.2;
            }
            #leaderboard-list .lb-row-portrait .lb-name {
                font-size: 0.86rem;
                font-weight: 700;
                line-height: 1.15;
                min-width: 0;
            }
            #leaderboard-list .lb-row-portrait .lb-meta {
                padding-left: 1.3rem;
                min-width: 0;
            }
            #leaderboard-list .lb-row-portrait .lb-meta:empty {
                display: none;
            }
            #leaderboard-list .lb-row-portrait .lb-share {
                display: block;
                font-size: 0.72rem;
                color: #cbd5e1;
                font-weight: 600;
                margin-top: 0;
                line-height: 1.2;
            }
            #leaderboard-list .lb-row-portrait .lb-nxt-sub {
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                gap: 0.08rem 0.32rem;
                margin-top: 0;
                font-size: 0.6rem;
                line-height: 1.25;
                white-space: normal;
                overflow: visible;
                text-overflow: unset;
            }
            #leaderboard-list .lb-row-portrait .lb-nxt-bit {
                white-space: nowrap;
            }
            #leaderboard-list .lb-row-portrait .lb-arm-main {
                text-align: right;
                flex-shrink: 0;
                min-width: 2.75rem;
            }
            #leaderboard-list .lb-row-portrait .lb-arm-main .val,
            #leaderboard-list .lb-row-portrait .lb-arm-main .lb-arm-val {
                display: block;
                font-size: 1.4rem;
                font-weight: 900;
                line-height: 1;
            }
            #leaderboard-list .lb-row-portrait.lb-row-fs .lb-arm-main .val,
            #leaderboard-list .lb-row-portrait.lb-row-fs .lb-arm-main .lb-arm-val {
                font-size: 1.25rem;
            }
            #leaderboard-list .lb-row-portrait .lb-arm-main .lbl {
                display: block;
                font-size: 0.58rem;
                font-weight: 800;
                letter-spacing: 0.06em;
                text-transform: uppercase;
                color: #64748b;
                margin-top: 0.08rem;
            }
            #leaderboard-list .lb-row-portrait .lb-submetrics {
                padding-left: 1.3rem;
                padding-top: 0.22rem;
                margin-top: 0.05rem;
                border-top: 1px solid rgba(51, 65, 85, 0.45);
            }
            #leaderboard-list .lb-row-portrait .lb-submetrics-grid {
                display: grid;
                gap: 0.2rem 0.45rem;
            }
            #leaderboard-list .lb-row-portrait .lb-submetrics .sm {
                display: flex;
                align-items: baseline;
                gap: 0.28rem;
                font-size: 0.78rem;
                font-weight: 800;
                line-height: 1.15;
                min-width: 0;
                white-space: nowrap;
            }
            #leaderboard-list .lb-row-portrait .lb-submetrics .sm span.lbl {
                display: inline;
                font-size: 0.55rem;
                font-weight: 800;
                letter-spacing: 0.05em;
                text-transform: uppercase;
                color: #64748b;
                flex-shrink: 0;
            }
        }

        /* Phone landscape: short + often 667–900px wide. Width-only "mobile"
           stacking (flex-col until Tailwind md) makes a tall messy header. */
        @media (orientation: landscape) and (max-height: 540px) {
            body:not(.display-mode) .dash-header {
                padding: 0.2rem 0.55rem !important;
            }
            body:not(.display-mode) .header-inner {
                display: flex !important;
                flex-direction: row !important;
                flex-wrap: nowrap !important;
                align-items: center !important;
                justify-content: space-between !important;
                gap: 0.45rem !important;
                width: 100%;
            }
            body:not(.display-mode) .header-brand {
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                width: auto !important;
                min-width: 0;
                flex: 1 1 auto;
                gap: 0.4rem !important;
            }
            body:not(.display-mode) .header-brand #wash-logo,
            body:not(.display-mode) #wash-logo.wash-logo {
                height: 2.35rem !important;
                max-height: 2.35rem !important;
                max-width: 4.25rem !important;
                flex-shrink: 0;
            }
            body:not(.display-mode) .header-brand-text {
                min-width: 0;
                flex: 1 1 auto;
            }
            body:not(.display-mode) .header-brand-text > div:first-child {
                flex-wrap: nowrap;
                gap: 0.35rem;
            }
            body:not(.display-mode) #header-title {
                font-size: 0.8rem !important;
                line-height: 1.1 !important;
                white-space: nowrap;
            }
            body:not(.display-mode) .header-subtitle {
                display: none !important;
            }
            body:not(.display-mode) .header-nav {
                margin-top: 0 !important;
                flex-wrap: nowrap !important;
                gap: 0.25rem !important;
            }
            body:not(.display-mode) .header-nav .nav-pipe { display: none !important; }
            body:not(.display-mode) .header-nav .nav-long { display: none !important; }
            body:not(.display-mode) .header-nav .nav-short { display: inline !important; }
            body:not(.display-mode) #nav-daily,
            body:not(.display-mode) #nav-month,
            body:not(.display-mode) #nav-revenue,
            body:not(.display-mode) #nav-multi {
                padding: 0.2rem 0.45rem !important;
                font-size: 0.6rem !important;
                line-height: 1.1 !important;
                white-space: nowrap;
            }
            body:not(.display-mode) #btn-autocycle {
                display: none !important;
            }
            body:not(.display-mode) #btn-sign-out {
                align-self: center !important;
                height: 2rem !important;
                padding: 0 0.5rem !important;
                font-size: 0.55rem !important;
                white-space: nowrap;
            }
            body:not(.display-mode) .header-controls {
                display: flex !important;
                flex-wrap: nowrap !important;
                align-items: center !important;
                justify-content: flex-end !important;
                gap: 0.35rem !important;
                width: auto !important;
                flex: 0 1 auto;
                min-width: 0;
            }
            body:not(.display-mode) .controls-pickers {
                display: flex !important;
                flex-wrap: nowrap !important;
                align-items: center !important;
                gap: 0.3rem !important;
                min-width: 0;
            }
            body:not(.display-mode) #site-selector,
            body:not(.display-mode) #period-picker-container,
            body:not(.display-mode) #date-picker-container:not(.hidden),
            body:not(.display-mode) #month-picker-container:not(.hidden),
            body:not(.display-mode) #revenue-grain-toggle:not(.hidden) {
                height: 2rem !important;
                padding-top: 0 !important;
                padding-bottom: 0 !important;
                padding-left: 0.4rem !important;
                padding-right: 0.4rem !important;
                font-size: 0.65rem !important;
            }
            body:not(.display-mode) .date-label {
                display: none !important;
            }
            body:not(.display-mode) #period-picker-container .dash-period-select,
            body:not(.display-mode) #date-picker-container input,
            body:not(.display-mode) #month-picker-container input {
                font-size: 0.65rem !important;
            }
            body:not(.display-mode) .wa-pulse-btn,
            body:not(.display-mode) #btn-whatsapp-pulse {
                width: 2rem !important;
                height: 2rem !important;
                min-width: 2rem !important;
                padding: 0 !important;
                border-radius: 0.45rem !important;
            }
            body:not(.display-mode) .wa-pulse-btn .wa-pulse-icon {
                width: 0.95rem !important;
                height: 0.95rem !important;
            }
            body:not(.display-mode) .wa-pulse-btn .wa-pulse-label {
                font-size: 0.45rem !important;
            }
            body:not(.display-mode) #countdown-shield-box {
                height: 2rem !important;
                min-height: 2rem !important;
                padding: 0 0.55rem !important;
                gap: 0.35rem !important;
            }
            body:not(.display-mode) #countdown-shield-box #timer-title-text {
                font-size: 0.55rem !important;
            }
            body:not(.display-mode) #countdown-shield-box #sync-countdown {
                font-size: 0.75rem !important;
            }
            body:not(.display-mode) #countdown-shield-box .last-sync-wrap {
                font-size: 0.6rem !important;
            }
            body:not(.display-mode) .dash-main {
                padding: 0.45rem 0.65rem calc(0.7rem + var(--wm-mobile-chrome-bottom, 4.5rem)) !important;
            }
            body:not(.display-mode) .dash-footer {
                padding-bottom: 0.35rem !important;
            }
            /* Compact chart chrome — same idea as portrait: desc + interval share a row. */
            body:not(.display-mode) #daily-chart-rank-row .chart-panel-head {
                gap: 0.4rem !important;
                padding-bottom: 0.4rem !important;
                margin-bottom: 0.4rem !important;
            }
            body:not(.display-mode) #daily-chart-rank-row .chart-desc-row {
                display: flex !important;
                flex-wrap: nowrap !important;
                align-items: center !important;
                gap: 0.4rem !important;
                margin-top: 0.1rem !important;
                margin-bottom: 0.25rem !important;
            }
            body:not(.display-mode) #chart-title {
                font-size: 0.9rem !important;
                line-height: 1.15 !important;
            }
            body:not(.display-mode) #chart-desc {
                display: block !important;
                margin: 0 !important;
                font-size: 0.65rem !important;
                line-height: 1.2 !important;
                flex: 1 1 auto;
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            body:not(.display-mode) #trend-selector-wrap,
            body:not(.display-mode) #contrib-selector-wrap {
                padding: 0.05rem 0.3rem !important;
            }
            body:not(.display-mode) #tab-trend-interval,
            body:not(.display-mode) #tab-contrib-interval {
                font-size: 0.65rem !important;
                max-width: 5rem;
            }
            body:not(.display-mode) #chart-toggles {
                margin-top: 0.1rem !important;
                font-size: 0.65rem !important;
                gap: 0.25rem 0.55rem !important;
            }
            body:not(.display-mode) #btn-trend,
            body:not(.display-mode) #btn-contrib {
                padding: 0.3rem 0.55rem !important;
                font-size: 0.65rem !important;
            }
            body:not(.display-mode) #chart-viewport-box {
                height: clamp(10.5rem, 42vh, 13.5rem) !important;
                min-height: 10.5rem !important;
            }
            body:not(.display-mode) #chart-axis-shell.sticky-axes-on .trend-axis-rail {
                font-size: 0.62rem !important;
            }
            body:not(.display-mode) #chart-axis-shell.sticky-axes-on .trend-axis-left {
                width: 1.85rem !important;
            }
            body:not(.display-mode) #chart-axis-shell.sticky-axes-on .trend-axis-right {
                width: 2.1rem !important;
            }
            body:not(.display-mode) #leaderboard-list.space-y-3 > :not([hidden]) ~ :not([hidden]) {
                margin-top: 0.3rem !important;
            }
            body:not(.display-mode) #csa-rankings-panel {
                padding: 0.55rem 0.65rem !important;
            }
            body:not(.display-mode) #csa-rankings-panel > div:first-child h2 {
                font-size: 0.9rem !important;
            }
            body:not(.display-mode) #leaderboard-list .grid.items-center {
                font-size: 0.72rem;
            }
            body:not(.display-mode) #leaderboard-list .grid.items-center .text-sm {
                font-size: 0.78rem !important;
            }
            body:not(.display-mode) #leaderboard-list .grid.items-center .lb-arm-val {
                font-size: 1.05rem !important;
                line-height: 1.1;
            }
            body:not(.display-mode) #leaderboard-list .grid.items-center span.block.text-slate-500 {
                font-size: 0.55rem !important;
            }
            body:not(.display-mode) .dash-footer {
                flex-direction: row !important;
                flex-wrap: wrap !important;
                justify-content: center !important;
                align-items: center !important;
                column-gap: 0.65rem !important;
                row-gap: 0.25rem !important;
                padding-top: 0.55rem !important;
                padding-bottom: 0.35rem !important;
            }
            body:not(.display-mode) .dash-footer .dash-footer-sep {
                display: inline !important;
            }
        }

        @media (orientation: landscape) and (max-height: 540px) and (max-width: 820px) {
            body:not(.display-mode) .header-inner {
                flex-wrap: wrap !important;
                row-gap: 0.3rem !important;
            }
            body:not(.display-mode) .header-brand,
            body:not(.display-mode) .header-controls {
                width: 100% !important;
                flex: 1 0 100% !important;
                justify-content: space-between !important;
            }
            body:not(.display-mode) .header-controls {
                justify-content: flex-start !important;
            }
            body:not(.display-mode) #header-title {
                display: none !important;
            }
        }

        /* Mobile interactive: pad scroll area + footer above browser bottom toolbar. */
        @media (max-width: 1400px) {
            body:not(.display-mode) {
                --wm-mobile-chrome-bottom: calc(env(safe-area-inset-bottom, 0px) + 4.5rem);
            }
            html:not(.wm-display),
            body:not(.display-mode) {
                height: var(--wm-app-height, 100svh) !important;
                max-height: var(--wm-app-height, 100svh) !important;
            }
            body:not(.display-mode) .dash-main {
                scroll-padding-bottom: var(--wm-mobile-chrome-bottom);
                padding-bottom: calc(0.75rem + var(--wm-mobile-chrome-bottom)) !important;
            }
            body:not(.display-mode) .dash-footer {
                flex-direction: column !important;
                align-items: center !important;
                row-gap: 0.65rem !important;
                margin-top: 1.25rem !important;
                padding-top: 0.85rem !important;
                padding-bottom: 0.35rem !important;
            }
            body:not(.display-mode) .dash-footer .dash-footer-sep {
                display: none !important;
            }
            body:not(.display-mode) .dash-footer-brand .gs-powered,
            body:not(.display-mode) .dash-footer-brand .gs-brand-name,
            body:not(.display-mode) #btn-user-guide,
            body:not(.display-mode) #btn-feedback {
                font-size: 0.8rem !important;
            }
            body:not(.display-mode) #geekstrength-logo {
                height: 1.75rem !important;
                width: 1.75rem !important;
            }

            /* Portrait-only CSA row tuning (landscape uses compact grid rows in JS). */
            @media (orientation: portrait) {
                #leaderboard-list .lb-row-portrait {
                    gap: 0.28rem;
                    padding: 0.5rem 0.55rem;
        }
    }
}

.demo-chrome {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem 1.15rem;
    padding: 0.55rem 1.15rem 0.6rem;
    background: #0b1220;
    border-bottom: 1px solid #1e293b;
}
body.display-mode .demo-chrome { display: none !important; }
.demo-csa-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.18rem;
    text-decoration: none;
    color: #cbd5e1;
    flex-shrink: 0;
}
.demo-csa-qr img {
    width: 5rem;
    height: 5rem;
    background: #f8fafc;
    border-radius: 0.45rem;
    padding: 0.2rem;
    border: 1px solid #334155;
}
.demo-csa-qr span {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}
.demo-chrome-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}
.demo-tag-rotator {
    position: relative;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    background: transparent;
    overflow: hidden;
}
.demo-tag-line {
    position: absolute;
    inset: 0;
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.4;
    font-weight: 600;
    color: #e2e8f0;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    pointer-events: none;
}
.demo-tag-line.is-active {
    opacity: 1;
    pointer-events: auto;
}
.demo-hint {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    text-align: left;
    color: #94a3b8;
    font-size: 0.72rem;
    line-height: 1.4;
}
.demo-hint strong { color: #a7f3d0; }
.demo-hint em { font-style: italic; color: #cbd5e1; }
.demo-hint-zoom {
    display: block;
    margin-top: 0.12rem;
    color: #fde68a;
    font-weight: 700;
}
.demo-wall-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-width: 5.75rem;
    padding: 0.45rem 0.9rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0.65rem;
    background: #052e16;
    color: #86efac;
    border: 1px solid #166534;
}
.demo-wall-link:hover {
    border-color: #4ade80;
    color: #bbf7d0;
    background: #14532d;
}
.demo-wall-kicker {
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    color: #6ee7b7;
    font-weight: 700;
}
@media (max-width: 900px) {
    .demo-chrome {
        grid-template-columns: auto 1fr;
    }
    .demo-wall-link {
        justify-self: end;
        min-height: 5rem;
    }
    .demo-chrome-copy {
        grid-column: 1 / -1;
    }
}

        @media (max-width: 1400px) and (orientation: landscape) {
            body:not(.display-mode) #btn-autocycle {
                display: none !important;
            }
            body:not(.display-mode) #chart-viewport-box {
                height: clamp(10rem, 40vh, 13rem) !important;
                min-height: 10rem !important;
            }
            body:not(.display-mode) .dash-footer {
                flex-direction: row !important;
                flex-wrap: wrap !important;
                justify-content: center !important;
                align-items: center !important;
                column-gap: 0.65rem !important;
                row-gap: 0.25rem !important;
            }
            body:not(.display-mode) .dash-footer .dash-footer-sep {
                display: inline !important;
            }
            #leaderboard-list.space-y-3 > :not([hidden]) ~ :not([hidden]) {
                margin-top: 0.3rem !important;
            }
            #leaderboard-list .lb-row-portrait {
                padding: 0.55rem 0.65rem;
            }
            #leaderboard-list .lb-row-portrait .lb-name {
                font-size: 0.95rem;
            }
            #leaderboard-list .lb-row-portrait .lb-arm-main .val,
            #leaderboard-list .lb-row-portrait .lb-arm-main .lb-arm-val {
                font-size: 1.45rem;
            }
            body:not(.display-mode) #leaderboard-list .grid.items-center .lb-arm-val {
                font-size: 1.1rem !important;
            }
            body:not(.display-mode) #leaderboard-list .grid.items-center .text-sm {
                font-size: 0.78rem !important;
            }
            body:not(.display-mode) #leaderboard-list .grid.items-center span.block.text-slate-500 {
                font-size: 0.55rem !important;
            }
        }

        /* Mobile header — equal-width tab row (Day / MON / REV / MULT) */
        @media (max-width: 1400px) {
            body:not(.display-mode) .header-brand-text {
                flex: 1 1 auto !important;
                min-width: 0 !important;
            }
            body:not(.display-mode) .header-nav {
                width: 100% !important;
                flex-wrap: nowrap !important;
                gap: 0.22rem !important;
            }
            body:not(.display-mode) .header-tab-btn {
                flex: 1 1 0 !important;
                min-width: 0 !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                padding: 0.38rem 0.18rem !important;
                font-size: clamp(0.58rem, 2.6vw, 0.72rem) !important;
                letter-spacing: 0.05em !important;
                line-height: 1.1 !important;
                white-space: nowrap !important;
            }
            body:not(.display-mode) #btn-autocycle {
                flex: 0 0 2rem !important;
                min-width: 2rem !important;
                padding: 0.38rem 0.25rem !important;
            }
            body:not(.display-mode) .header-sign-out,
            body:not(.display-mode) #btn-sign-out {
                flex: 0 0 auto !important;
                height: 1.75rem !important;
                padding: 0 0.38rem !important;
                font-size: 0.52rem !important;
                letter-spacing: 0.04em !important;
            }
        }

#dash-float-tip {
    position: fixed;
    z-index: 80;
    max-width: min(22rem, calc(100vw - 1.5rem));
    padding: 0.6rem 0.75rem;
    background: #0b1220;
    color: #e2e8f0;
    border: 1px solid #38bdf8;
    border-radius: 0.55rem;
    font-size: 0.78rem;
    line-height: 1.45;
    font-weight: 600;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}