/* ═══════════════════════════════════════════════════════════════
   Mobile video setup chrome — Jump, Side Jump + Reaction (handset)
   Tabs, setup sheet, view options, camera row, action buttons
   Side Jump reuses jump layout; violet accents in styles.css
   ═══════════════════════════════════════════════════════════════ */

.video-setup-sheet-controls {
    display: contents;
}

.video-setup-orient-btn__label {
    display: none;
}

@media (max-width: 768px), ((max-width: 1000px) and (hover: none) and (pointer: coarse)) {
    /* Setup overlay: see camera through panel; no backdrop blur */
    :root {
        --video-setup-dock-bg: rgba(8, 12, 24, 0.1);
        --video-setup-sheet-bg: transparent;
        --video-setup-controls-bg: rgba(6, 10, 22, 0.08);
        --video-setup-controls-bg-reaction: rgba(14, 10, 18, 0.09);
        --jump-chrome-panel-bg: rgba(8, 12, 24, 0.14);
        --jump-chrome-controls-bg: rgba(10, 16, 30, 0.12);
        --jump-chrome-cta-bg: rgba(10, 28, 38, 0.22);
    }

    .video-mobile-quick-guide,
    .video-mobile-jump-guide,
    .video-mobile-reaction-guide {
        display: none !important;
    }

    /* Right sidebar panel — phone uses video chrome + mobile toolbars only */
    #jumpSidebar.sidebar-right,
    body.app-mode-reaction #jumpSidebar.sidebar-right,
    body.app-mode-reaction #jumpSidebar:not(.reaction-sidebar-collapsed).sidebar-right,
    body.app-mode-jump #jumpSidebar,
    body.app-mode-sidejump #jumpSidebar,
    aside.sidebar-right {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        min-width: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        border: none !important;
    }

    body.app-mode-jump .main-content-layout,
    body.app-mode-sidejump .main-content-layout,
    body.app-mode-reaction .main-content-layout {
        grid-template-areas: "main" !important;
        grid-template-columns: 1fr !important;
    }

    /* Title bar — mobile video tests use in-frame console only */
    body.app-mode-jump .section-title-bar,
    body.app-mode-sidejump .section-title-bar,
    body.app-mode-reaction .section-title-bar {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        border: none !important;
    }

    body.app-mode-jump .video-mobile-test-host:not([hidden]),
    body.app-mode-sidejump .video-mobile-test-host:not([hidden]),
    body.app-mode-reaction .video-mobile-test-host:not([hidden]) {
        display: block;
        flex: none;
        flex-shrink: 0;
        width: 100%;
        box-sizing: border-box;
        order: 3;
    }

    body.app-mode-jump .reaction-cine-root,
    body.app-mode-sidejump .reaction-cine-root,
    body.app-mode-reaction .reaction-cine-root {
        order: 2;
    }

    /* Scroll chrome: see bottom block (app-wrapper scroll port) */

    body.app-mode-jump .main-content-layout, body.app-mode-sidejump .main-content-layout,
    body.app-mode-reaction .main-content-layout {
        flex: 1 1 auto;
        min-height: 0;
        overflow: visible;
    }

    body.app-mode-jump .content-main, body.app-mode-sidejump .content-main,
    body.app-mode-reaction .content-main {
        flex: 1 1 auto;
        min-height: 0;
        overflow: visible;
        display: flex;
        flex-direction: column;
    }

    body.app-mode-jump .section-video, body.app-mode-sidejump .section-video,
    body.app-mode-reaction .section-video {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        height: auto;
        overflow: visible !important;
    }

    body.app-mode-jump .reaction-cine-root, body.app-mode-sidejump .reaction-cine-root,
    body.app-mode-reaction .reaction-cine-root {
        flex: 1 1 auto;
        width: 100%;
        min-height: 0;
        max-height: none;
        height: auto;
        overflow: visible;
        display: flex;
        flex-direction: column;
    }

    body.app-mode-jump .title-bar-actions.title-bar-actions--video, body.app-mode-sidejump .title-bar-actions.title-bar-actions--video,
    body.app-mode-reaction .title-bar-actions.title-bar-actions--video {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow: visible;
        box-sizing: border-box;
    }

    /* ── Segmented Camera | Test tabs ── */
    body.app-mode-jump #videoMobileTabsNav, body.app-mode-sidejump #videoMobileTabsNav,
    body.app-mode-reaction #videoMobileTabsNav {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        width: 100%;
        gap: 2px;
        padding: 2px;
        margin: 0;
        border-radius: 10px;
        border: 1px solid rgba(148, 163, 184, 0.22);
        background: rgba(6, 10, 22, 0.95);
        box-sizing: border-box;
        flex-shrink: 0;
    }

    body.app-mode-jump #videoMobileTabsNav .video-mobile-tab, body.app-mode-sidejump #videoMobileTabsNav .video-mobile-tab,
    body.app-mode-reaction #videoMobileTabsNav .video-mobile-tab {
        -webkit-appearance: none;
        appearance: none;
        flex: 1 1 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        min-height: 34px;
        height: 34px;
        margin: 0;
        padding: 0 8px;
        box-sizing: border-box;
        border: 1px solid transparent;
        border-radius: 8px;
        background-color: transparent;
        background-image: none;
        color: rgba(148, 163, 184, 0.95);
        font-family: var(--font);
        font-size: 0.76rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        line-height: 1;
        text-align: center;
        white-space: nowrap;
        cursor: pointer;
        box-shadow: none;
        transition:
            background-color 0.2s var(--ease),
            border-color 0.2s var(--ease),
            color 0.2s var(--ease);
    }

    body.app-mode-jump #videoMobileTabsNav .video-mobile-tab:hover:not(:disabled):not(.is-active), body.app-mode-sidejump #videoMobileTabsNav .video-mobile-tab:hover:not(:disabled):not(.is-active),
    body.app-mode-reaction #videoMobileTabsNav .video-mobile-tab:hover:not(:disabled):not(.is-active) {
        background-color: rgba(255, 255, 255, 0.05);
        color: var(--text-secondary);
    }

    body.app-mode-jump #videoMobileTabsNav .video-mobile-tab.is-active, body.app-mode-sidejump #videoMobileTabsNav .video-mobile-tab.is-active {
        background-color: rgba(0, 217, 255, 0.18);
        border-color: rgba(0, 217, 255, 0.4);
        color: #e8f8ff;
        box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.08);
    }

    body.app-mode-reaction #videoMobileTabsNav .video-mobile-tab.is-active {
        background-color: rgba(255, 140, 90, 0.18);
        border-color: rgba(255, 140, 90, 0.42);
        color: #ffe8d8;
        box-shadow: 0 0 0 1px rgba(255, 140, 90, 0.1);
    }

    body.app-mode-jump #videoMobileTabsNav .video-mobile-tab:disabled, body.app-mode-sidejump #videoMobileTabsNav .video-mobile-tab:disabled,
    body.app-mode-reaction #videoMobileTabsNav .video-mobile-tab:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        background-color: rgba(0, 0, 0, 0.2);
        color: rgba(148, 163, 184, 0.55);
        border-color: transparent;
    }

    #videoPanelTest:not(.is-active) {
        display: none !important;
    }

    /* Title bar: setup panel only on desktop-width fallback (phone uses dock under video label) */
    body:not(.video-mobile-setup-in-chrome) #videoPanelSetup.video-mobile-setup-sheet:not(.is-active) {
        display: none !important;
    }

    body:not(.video-mobile-setup-in-chrome).app-mode-jump #videoPanelSetup.video-mobile-setup-sheet.is-active,
    body:not(.video-mobile-setup-in-chrome).app-mode-sidejump #videoPanelSetup.video-mobile-setup-sheet.is-active,
    body:not(.video-mobile-setup-in-chrome).app-mode-reaction #videoPanelSetup.video-mobile-setup-sheet.is-active {
        display: flex;
        flex-direction: column;
        gap: 6px;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 8px 10px 10px;
        box-sizing: border-box;
        border-radius: 10px;
        border: 1px solid rgba(148, 163, 184, 0.14);
        background: var(--video-setup-dock-bg);
        box-shadow: none;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body:not(.video-mobile-setup-in-chrome).app-mode-reaction #videoPanelSetup.video-mobile-setup-sheet.is-active {
        border-color: rgba(255, 140, 90, 0.12);
        background: var(--video-setup-dock-bg);
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.video-mobile-setup-in-chrome #videoMobileSetupHome {
        display: none !important;
    }

    /* ── In-frame camera console (label + settings inside video-raw-frame) ── */
    body.video-mobile-setup-in-chrome .video-raw-frame.video-merged-frame {
        --video-console-accent: rgba(0, 217, 255, 0.55);
        --video-console-accent-soft: rgba(0, 217, 255, 0.14);
    }

    body.app-mode-reaction.video-mobile-setup-in-chrome .video-raw-frame.video-merged-frame {
        --video-console-accent: rgba(255, 150, 90, 0.58);
        --video-console-accent-soft: rgba(255, 140, 90, 0.16);
    }

    body.video-mobile-setup-in-chrome .video-raw-frame.video-merged-frame > .video-placeholder {
        display: none !important;
    }

    body.video-mobile-setup-in-chrome .video-raw-frame .video-frame-bottom-chrome {
        position: absolute !important;
        inset: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        z-index: 20;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        pointer-events: none;
        align-items: stretch !important;
        gap: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Jump Test: timing + Start card pinned to bottom of the video frame */
    body.video-mobile-setup-in-chrome.app-mode-jump:not(.reaction-pseudo-stage-fs) .video-raw-frame .video-frame-bottom-chrome.video-frame-bottom-chrome--jump-cta,
    body.video-mobile-setup-in-chrome.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .video-raw-frame .video-frame-bottom-chrome.video-frame-bottom-chrome--jump-cta,
    body.video-mobile-setup-in-chrome.app-mode-jump:not(.reaction-pseudo-stage-fs) .video-raw-frame .video-frame-bottom-chrome.video-frame-bottom-chrome--jump-session,
    body.video-mobile-setup-in-chrome.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .video-raw-frame .video-frame-bottom-chrome.video-frame-bottom-chrome--jump-session {
        inset: auto !important;
        top: auto !important;
        left: max(12px, env(safe-area-inset-left, 0px)) !important;
        right: max(12px, env(safe-area-inset-right, 0px)) !important;
        bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: calc(100% - max(56px, env(safe-area-inset-top, 0px) + 44px));
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-end !important;
        pointer-events: auto !important;
        z-index: 18 !important;
        overflow: hidden;
    }

    body.video-mobile-setup-in-chrome.app-mode-jump .video-frame-bottom-chrome--jump-cta .jump-mobile-video-controls:not([hidden]),
    body.video-mobile-setup-in-chrome.app-mode-sidejump .video-frame-bottom-chrome--jump-cta .jump-mobile-video-controls:not([hidden]) {
        max-height: min(42vh, 260px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    body.video-mobile-setup-in-chrome.app-mode-jump:not(.reaction-pseudo-stage-fs) .video-raw-frame > .video-mobile-stage-chrome,
    body.video-mobile-setup-in-chrome.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .video-raw-frame > .video-mobile-stage-chrome,
    body.video-mobile-setup-in-chrome.app-mode-reaction:not(.reaction-pseudo-stage-fs) .video-raw-frame > .video-mobile-stage-chrome {
        position: absolute;
        inset: 0;
        z-index: 20;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    body.video-mobile-setup-in-chrome .video-raw-frame-console,
    body.video-mobile-setup-in-chrome .video-mobile-stage-chrome {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        pointer-events: none;
        box-sizing: border-box;
    }

    /* Top-left: settings (setup opens after connect; Test via Continue) */
    body.video-mobile-setup-in-chrome .video-raw-frame-console__topbar {
        position: absolute !important;
        top: max(10px, env(safe-area-inset-top, 0px)) !important;
        left: max(10px, env(safe-area-inset-left, 0px)) !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        z-index: 30;
        display: inline-flex !important;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        width: auto;
        max-width: calc(100% - 20px);
        min-height: 0;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        background: transparent;
        pointer-events: none;
    }

    body.video-mobile-setup-in-chrome #videoMobileTabsNav {
        display: none !important;
    }

    /* In-frame topbar: icon buttons only — no frame-label chip / cyan halo between controls */
    body.app-mode-jump.video-mobile-setup-in-chrome #rawFrameLabel,
    body.app-mode-sidejump.video-mobile-setup-in-chrome #rawFrameLabel,
    body.app-mode-reaction.video-mobile-setup-in-chrome #rawFrameLabel {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Reaction-only: zone edit (hidden in Jump / Side Jump) */
    body.video-mobile-setup-in-chrome .video-raw-frame-console__edit-zones-btn {
        display: none !important;
    }

    body.app-mode-reaction.video-mobile-setup-in-chrome .video-raw-frame-console__edit-zones-btn:not([hidden]) {
        display: inline-flex !important;
    }

    body.video-mobile-setup-in-chrome .video-raw-frame-console__topbar .video-raw-frame-console__icon-btn {
        position: relative;
        z-index: 31;
    }

    body.video-mobile-setup-in-chrome .video-raw-frame-console__icon-btn {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        margin: 0;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 12px;
        background: rgba(10, 14, 26, 0.92);
        color: rgba(226, 232, 240, 0.95);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        pointer-events: auto !important;
        touch-action: manipulation;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.38);
        transition:
            border-color 0.2s var(--ease),
            background 0.2s var(--ease),
            transform 0.15s var(--ease),
            box-shadow 0.2s var(--ease);
    }

    body.app-mode-reaction.video-mobile-setup-in-chrome #btnVideoMobileCameraSettings {
        border-color: rgba(255, 150, 90, 0.28);
        color: #ffe8d8;
    }

    body.app-mode-jump.video-mobile-setup-in-chrome #btnVideoMobileCameraSettings,
    body.app-mode-sidejump.video-mobile-setup-in-chrome #btnVideoMobileCameraSettings {
        border-color: rgba(255, 255, 255, 0.14);
        color: rgba(226, 232, 240, 0.95);
    }

    body.video-mobile-setup-in-chrome .video-raw-frame-console__settings-glow {
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1), transparent 55%);
        pointer-events: none;
    }

    body.video-mobile-setup-in-chrome .video-raw-frame-console__settings-icon,
    body.video-mobile-setup-in-chrome .video-raw-frame-console__edit-zones-icon:not([hidden]) {
        position: relative;
        z-index: 1;
        display: block;
    }

    body.video-mobile-setup-in-chrome .video-raw-frame-console__edit-zones-icon[hidden] {
        display: none !important;
    }

    body.video-mobile-setup-in-chrome .video-raw-frame-console__icon-btn:active {
        transform: scale(0.94);
    }

    body.video-mobile-setup-in-chrome #btnVideoMobileCameraSettings.is-expanded {
        border-color: rgba(255, 140, 90, 0.4);
        background: rgba(22, 14, 10, 0.96);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    }

    body.app-mode-jump.video-mobile-setup-in-chrome #btnVideoMobileCameraSettings.is-expanded,
    body.app-mode-sidejump.video-mobile-setup-in-chrome #btnVideoMobileCameraSettings.is-expanded {
        border-color: rgba(255, 255, 255, 0.22);
        background: rgba(14, 20, 34, 0.96);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
    }

    body.app-mode-jump.reaction-pseudo-stage-fs #btnVideoMobileCameraSettings,
    body.app-mode-sidejump.reaction-pseudo-stage-fs #btnVideoMobileCameraSettings,
    body.app-mode-jump.reaction-pseudo-stage-fs #btnVideoMobileReactionEditZones,
    body.app-mode-sidejump.reaction-pseudo-stage-fs #btnVideoMobileReactionEditZones,
    body.app-mode-jump.reaction-pseudo-stage-fs .video-raw-frame-console__settings-btn.video-mobile-chrome-only,
    body.app-mode-sidejump.reaction-pseudo-stage-fs .video-raw-frame-console__settings-btn.video-mobile-chrome-only,
    body.app-mode-jump.reaction-pseudo-stage-fs .video-raw-frame-console__edit-zones-btn.video-mobile-chrome-only,
    body.app-mode-sidejump.reaction-pseudo-stage-fs .video-raw-frame-console__edit-zones-btn.video-mobile-chrome-only,
    body.app-mode-jump .reaction-cine-root:fullscreen #btnVideoMobileCameraSettings,
    body.app-mode-sidejump .reaction-cine-root:fullscreen #btnVideoMobileCameraSettings,
    body.app-mode-jump .reaction-cine-root:fullscreen #btnVideoMobileReactionEditZones,
    body.app-mode-sidejump .reaction-cine-root:fullscreen #btnVideoMobileReactionEditZones,
    body.app-mode-jump .reaction-cine-root:-webkit-full-screen #btnVideoMobileCameraSettings,
    body.app-mode-sidejump .reaction-cine-root:-webkit-full-screen #btnVideoMobileCameraSettings,
    body.app-mode-jump .reaction-cine-root:-webkit-full-screen #btnVideoMobileReactionEditZones,
    body.app-mode-sidejump .reaction-cine-root:-webkit-full-screen #btnVideoMobileReactionEditZones,
    body.app-mode-jump .reaction-cine-root.reaction-cine-root--pseudo-fullscreen #btnVideoMobileCameraSettings,
    body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--pseudo-fullscreen #btnVideoMobileCameraSettings,
    body.app-mode-jump .reaction-cine-root.reaction-cine-root--pseudo-fullscreen #btnVideoMobileReactionEditZones,
    body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--pseudo-fullscreen #btnVideoMobileReactionEditZones {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.video-mobile-setup-in-chrome .video-desktop-frame-label-part,
    body.video-mobile-setup-in-chrome .video-mobile-stage-label__meta {
        display: none !important;
    }

    /* Bottom: Connect CTA + settings drawer */
    body.video-mobile-setup-in-chrome .video-raw-frame-console__shell {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        display: flex;
        flex-direction: column;
        width: 100%;
        border-radius: 0 0 14px 14px;
        overflow: visible;
        pointer-events: none;
        background: linear-gradient(
            180deg,
            rgba(6, 10, 22, 0) 0%,
            rgba(6, 10, 22, 0.06) 45%,
            rgba(6, 10, 22, 0.18) 100%
        );
        border-top: 1px solid rgba(148, 163, 184, 0.08);
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body.video-mobile-setup-in-chrome:has(.video-mobile-setup-dock--open) .video-raw-frame-console__shell {
        background: transparent;
        border-top-color: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body.video-mobile-setup-in-chrome.video-mobile-camera-disconnected .video-raw-frame-console__connect,
    body.video-mobile-setup-in-chrome.video-mobile-stage-connect-visible #btnVideoMobileStageConnect.video-raw-frame-console__connect.video-mobile-chrome-only {
        display: inline-flex !important;
        visibility: visible !important;
        align-items: center;
        justify-content: center;
        gap: 9px;
        position: relative;
        overflow: hidden;
        width: calc(100% - 16px);
        min-height: 44px;
        margin: 8px 8px 0;
        padding: 0 16px;
        border-radius: 12px;
        border: 1px solid var(--video-console-accent);
        background: linear-gradient(135deg, rgba(0, 180, 220, 0.96), rgba(0, 217, 255, 0.9));
        color: #001018;
        font-family: var(--font);
        font-size: 0.82rem;
        font-weight: 800;
        letter-spacing: 0.02em;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        pointer-events: auto;
        animation: video-mobile-stage-connect-pulse 2s ease-in-out infinite;
        box-shadow:
            0 0 0 0 rgba(0, 217, 255, 0.42),
            0 0 20px rgba(0, 217, 255, 0.22);
    }

    body.app-mode-reaction.video-mobile-setup-in-chrome.video-mobile-camera-disconnected .video-raw-frame-console__connect,
    body.app-mode-reaction.video-mobile-setup-in-chrome.video-mobile-stage-connect-visible #btnVideoMobileStageConnect.video-raw-frame-console__connect.video-mobile-chrome-only {
        background: linear-gradient(135deg, rgba(255, 130, 70, 0.96), rgba(255, 170, 110, 0.92));
        color: #2a1008;
        border-color: rgba(255, 150, 90, 0.55);
        box-shadow:
            0 0 0 0 rgba(255, 140, 90, 0.42),
            0 0 20px rgba(255, 120, 70, 0.24);
    }

    body.video-mobile-setup-in-chrome.video-mobile-camera-disconnected .video-raw-frame-console__connect:active {
        transform: scale(0.98);
    }

    body.video-mobile-setup-in-chrome .video-raw-frame-console__connect.btn-connect--loading {
        animation: none;
        cursor: wait;
        pointer-events: none;
    }

    body.video-mobile-setup-in-chrome .video-raw-frame-console__connect.btn-connect--loading:active {
        transform: none;
    }

    body.video-mobile-setup-in-chrome .video-raw-frame-console__connect .btn-connect__content {
        justify-content: center;
        width: 100%;
    }

    body.video-mobile-setup-in-chrome.video-mobile-camera-live .video-raw-frame-console__connect {
        display: none !important;
    }

    body.video-mobile-setup-in-chrome.video-mobile-camera-live .video-raw-frame-console__shell {
        background: linear-gradient(
            180deg,
            rgba(6, 10, 22, 0) 0%,
            rgba(6, 10, 22, 0.04) 55%,
            rgba(6, 10, 22, 0.12) 100%
        );
        border-top-color: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }


    @keyframes video-mobile-stage-connect-pulse {
        0%,
        100% {
            box-shadow:
                0 0 0 0 rgba(0, 217, 255, 0.38),
                0 0 16px rgba(0, 217, 255, 0.18);
        }
        50% {
            box-shadow:
                0 0 0 9px rgba(0, 217, 255, 0),
                0 0 26px rgba(0, 217, 255, 0.32);
        }
    }

    body.app-mode-reaction.video-mobile-setup-in-chrome.video-mobile-camera-disconnected .video-raw-frame-console__connect {
        animation-name: video-mobile-stage-connect-pulse-reaction;
    }

    @keyframes video-mobile-stage-connect-pulse-reaction {
        0%,
        100% {
            box-shadow:
                0 0 0 0 rgba(255, 140, 90, 0.38),
                0 0 16px rgba(255, 120, 70, 0.2);
        }
        50% {
            box-shadow:
                0 0 0 9px rgba(255, 140, 90, 0),
                0 0 26px rgba(255, 150, 90, 0.3);
        }
    }

    body.video-mobile-setup-in-chrome .video-raw-frame-console__drawer,
    body.video-mobile-setup-in-chrome .video-mobile-setup-dock {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        z-index: 24;
        display: block;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        transition:
            max-height 0.32s var(--ease),
            opacity 0.22s var(--ease);
        border-radius: 14px 14px 0 0;
        box-shadow: none;
    }

    body.video-mobile-setup-in-chrome .video-raw-frame-console__drawer--open,
    body.video-mobile-setup-in-chrome .video-mobile-setup-dock--open {
        height: auto;
        max-height: min(40vh, 240px);
        opacity: 1;
        pointer-events: auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        border: 1px solid rgba(148, 163, 184, 0.1);
        background: var(--video-setup-dock-bg) !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-sizing: border-box;
        box-shadow: none;
    }

    body.app-mode-reaction.video-mobile-setup-in-chrome .video-raw-frame-console__drawer--open,
    body.app-mode-reaction.video-mobile-setup-in-chrome .video-mobile-setup-dock--open {
        background: var(--video-setup-dock-bg) !important;
        border-color: rgba(255, 140, 90, 0.14);
    }

    body.video-mobile-setup-in-chrome .video-raw-frame-console__shell:has(.video-mobile-setup-dock--open) {
        z-index: 26;
    }

    body.video-mobile-setup-in-chrome:has(.video-mobile-setup-dock--open) .video-frame-bottom-chrome--jump-cta,
    body.video-mobile-setup-in-chrome:has(.video-mobile-setup-dock--open) .video-frame-bottom-chrome--jump-session,
    body.video-mobile-setup-dock-open .video-frame-bottom-chrome--jump-cta,
    body.video-mobile-setup-dock-open .video-frame-bottom-chrome--jump-session,
    body.video-mobile-setup-dock-open .jump-mobile-video-controls,
    body.video-mobile-setup-dock-open .jump-mobile-video-cta {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.video-mobile-setup-in-chrome .video-mobile-setup-dock--open #videoPanelSetup.video-mobile-setup-sheet {
        min-height: 0;
        box-sizing: border-box;
    }

    body.video-mobile-setup-in-chrome.video-mobile-camera-live #videoPanelSetup .video-mobile-setup-actions #btnStart {
        display: none !important;
    }

    body.video-mobile-setup-in-chrome.video-mobile-camera-disconnected #videoPanelSetup .video-mobile-setup-actions #btnStart {
        display: flex !important;
        grid-column: 1 / -1;
        width: 100%;
    }

    body.video-mobile-setup-in-chrome #videoPanelSetup.video-mobile-setup-sheet,
    body.video-mobile-setup-in-chrome #videoPanelSetup.video-tab-panel--setup.video-mobile-setup-sheet.is-active,
    body.app-mode-jump.video-mobile-setup-in-chrome #videoPanelSetup.video-mobile-setup-sheet.is-active,
    body.app-mode-sidejump.video-mobile-setup-in-chrome #videoPanelSetup.video-mobile-setup-sheet.is-active,
    body.app-mode-reaction.video-mobile-setup-in-chrome #videoPanelSetup.video-mobile-setup-sheet.is-active {
        display: flex;
        flex-direction: column;
        gap: 6px;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 6px 8px 8px;
        box-sizing: border-box;
        border: none;
        border-top: none;
        border-radius: 0;
        background: var(--video-setup-sheet-bg) !important;
        box-shadow: none;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.video-mobile-setup-in-chrome #videoPanelSetup .video-setup-sheet-controls {
        display: flex;
        flex-direction: column;
        gap: 6px;
        width: 100%;
        order: 1;
        margin: 0;
        padding: 6px;
        box-sizing: border-box;
        border-radius: 10px;
        border: 1px solid rgba(148, 163, 184, 0.08);
        background: var(--video-setup-controls-bg);
    }

    body.video-mobile-setup-in-chrome .video-mobile-setup-dock--open #videoPanelSetup .video-mobile-setup-hint {
        display: none !important;
    }

    body.video-mobile-setup-in-chrome.video-mobile-camera-live .video-mobile-setup-dock--open #videoPanelSetup .video-mobile-setup-actions .btn-connect#btnOpenVideo,
    body.video-mobile-setup-in-chrome.video-mobile-camera-live .video-mobile-setup-dock--open #videoPanelSetup .video-mobile-setup-actions .btn-connect#btnStart {
        display: none !important;
    }

    body.video-mobile-setup-in-chrome.video-mobile-camera-live .video-mobile-setup-dock--open #videoPanelSetup .video-mobile-setup-actions {
        grid-template-columns: 1fr;
    }

    body.video-mobile-setup-in-chrome #videoPanelSetup .video-setup-orient-btn__label {
        display: inline;
    }

    body.app-mode-reaction.video-mobile-setup-in-chrome #videoPanelSetup .video-setup-sheet-controls {
        border-color: rgba(255, 140, 90, 0.12);
        background: var(--video-setup-controls-bg-reaction);
    }

    body.video-mobile-setup-in-chrome .video-mobile-setup-dock--open #videoPanelSetup .video-mobile-setup-actions {
        background: transparent;
    }

    body.video-mobile-setup-in-chrome .video-mobile-setup-dock--open #videoPanelSetup .camera-select {
        background-color: rgba(2, 6, 16, 0.28);
        border-color: rgba(148, 163, 184, 0.12);
    }

    body.video-mobile-setup-in-chrome .video-mobile-setup-dock--open #videoPanelSetup .video-view-options .video-setup-orient-btn.video-tool-btn {
        background: rgba(4, 8, 18, 0.22) !important;
        border-color: rgba(148, 163, 184, 0.12) !important;
        height: 40px !important;
        min-height: 40px !important;
    }

    body.video-mobile-setup-in-chrome .video-mobile-setup-dock--open #videoPanelSetup .camera-select-label {
        font-size: 0.58rem;
    }

    body.video-mobile-setup-in-chrome .video-raw-frame-console__drawer:not(.video-mobile-setup-dock--open) #videoPanelSetup,
    body.video-mobile-setup-in-chrome .video-mobile-setup-dock:not(.video-mobile-setup-dock--open) #videoPanelSetup {
        display: none !important;
    }

    /* Chrome dock open: setup sheet matches Jump — beat styles.css title-bar order + display rules */
    body.video-mobile-setup-in-chrome .video-mobile-setup-dock--open #videoPanelSetup.video-tab-panel--setup.video-mobile-setup-sheet,
    body.video-mobile-setup-in-chrome .video-mobile-setup-dock--open #videoPanelSetup.video-mobile-setup-sheet.is-active {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 6px 8px 8px !important;
        box-sizing: border-box !important;
        border: none !important;
        border-radius: 0 !important;
        background: var(--video-setup-sheet-bg) !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    body.video-mobile-setup-in-chrome .video-mobile-setup-dock--open #videoPanelSetup .video-setup-sheet-controls {
        display: flex !important;
        flex-direction: column !important;
        order: 1 !important;
        gap: 6px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 6px !important;
        box-sizing: border-box !important;
    }

    body.video-mobile-setup-in-chrome .video-mobile-setup-dock--open #videoPanelSetup .camera-select-row {
        order: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-top: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    body.video-mobile-setup-in-chrome .video-mobile-setup-dock--open #videoPanelSetup .video-view-options--orient {
        order: 0 !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body.video-mobile-setup-in-chrome .video-mobile-setup-dock--open #videoPanelSetup .video-view-options .video-setup-orient-tools {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    }

    body.video-mobile-setup-in-chrome .video-mobile-setup-dock--open #videoPanelSetup .video-mobile-setup-actions {
        order: 2 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        width: 100% !important;
        margin: 0 !important;
    }

    body.video-mobile-setup-in-chrome .video-mobile-setup-dock--open #videoPanelSetup #btnVideoMobileNext {
        order: 3 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    body.video-mobile-setup-in-chrome.video-mobile-camera-disconnected .video-raw-frame-console__shell {
        z-index: 28;
        min-height: 52px;
        pointer-events: none;
        background: linear-gradient(
            180deg,
            rgba(6, 10, 22, 0.08) 0%,
            rgba(6, 10, 22, 0.72) 40%,
            rgba(6, 10, 22, 0.98) 100%
        );
    }

    body.video-mobile-setup-in-chrome.video-mobile-camera-disconnected .video-raw-frame-console__connect:not([hidden]) {
        flex-shrink: 0;
    }

    body.app-mode-reaction.video-mobile-setup-in-chrome.video-mobile-camera-disconnected:not(.reaction-pseudo-stage-fs) .video-raw-frame > .video-mobile-stage-chrome,
    body.app-mode-reaction.video-mobile-setup-in-chrome.video-mobile-camera-disconnected:not(.reaction-pseudo-stage-fs) .video-raw-frame .video-frame-bottom-chrome {
        z-index: 25 !important;
        pointer-events: none;
    }

    body.app-mode-reaction.video-mobile-setup-in-chrome.video-mobile-camera-disconnected:not(.reaction-pseudo-stage-fs) .video-raw-frame-console__connect,
    body.app-mode-reaction.video-mobile-setup-in-chrome.video-mobile-stage-connect-visible:not(.reaction-pseudo-stage-fs) #btnVideoMobileStageConnect {
        position: relative;
        z-index: 29;
        pointer-events: auto !important;
    }

    body.app-mode-jump #videoPanelSetup .video-mobile-setup-hint:not([hidden]), body.app-mode-sidejump #videoPanelSetup .video-mobile-setup-hint:not([hidden]),
    body.app-mode-reaction #videoPanelSetup .video-mobile-setup-hint:not([hidden]) {
        order: 0;
        margin: 0;
        padding: 4px 6px;
        font-size: 0.65rem;
        font-weight: 500;
        line-height: 1.3;
        color: rgba(148, 163, 184, 0.88);
        border-radius: 6px;
        background: rgba(15, 23, 42, 0.45);
        border: 1px solid rgba(148, 163, 184, 0.08);
    }

    body.video-mobile-setup-in-chrome #videoPanelSetup .video-tool-btns-label,
    body.video-mobile-setup-in-chrome #videoPanelSetup .video-tool-btns-label__sub {
        display: none !important;
    }

    /* Beat styles.css .video-view-options .video-tool-btn { 40×40 } — two equal columns */
    body.app-mode-jump #videoPanelSetup .video-view-options--orient,
    body.app-mode-sidejump #videoPanelSetup .video-view-options--orient,
    body.app-mode-reaction #videoPanelSetup .video-view-options--orient {
        order: 0;
        margin: 0;
        padding: 0;
        display: block !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body.app-mode-jump #videoPanelSetup .video-view-options .video-setup-orient-tools,
    body.app-mode-sidejump #videoPanelSetup .video-view-options .video-setup-orient-tools,
    body.app-mode-reaction #videoPanelSetup .video-view-options .video-setup-orient-tools {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        align-items: stretch !important;
        justify-content: stretch !important;
        justify-items: stretch !important;
    }

    body.app-mode-jump #videoPanelSetup .video-view-options .video-setup-orient-btn.video-tool-btn,
    body.app-mode-sidejump #videoPanelSetup .video-view-options .video-setup-orient-btn.video-tool-btn,
    body.app-mode-reaction #videoPanelSetup .video-view-options .video-setup-orient-btn.video-tool-btn {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        box-sizing: border-box !important;
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 44px !important;
        min-height: 44px !important;
        padding: 0 10px !important;
        margin: 0 !important;
        overflow: hidden;
        border-radius: 10px;
        border: 1px solid rgba(148, 163, 184, 0.22);
        background: rgba(4, 8, 18, 0.92);
        color: rgba(226, 232, 240, 0.95);
        font-family: var(--font);
        font-size: 0.76rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        -webkit-tap-highlight-color: transparent;
        transition:
            border-color 0.18s var(--ease),
            background 0.18s var(--ease),
            transform 0.12s var(--ease),
            box-shadow 0.18s var(--ease);
    }

    body.app-mode-jump #videoPanelSetup .video-view-options .video-setup-orient-btn.video-tool-btn:active,
    body.app-mode-sidejump #videoPanelSetup .video-view-options .video-setup-orient-btn.video-tool-btn:active,
    body.app-mode-reaction #videoPanelSetup .video-view-options .video-setup-orient-btn.video-tool-btn:active {
        transform: scale(0.98);
    }

    body.app-mode-jump #videoPanelSetup .video-view-options .video-setup-orient-btn .video-setup-orient-btn__icon,
    body.app-mode-sidejump #videoPanelSetup .video-view-options .video-setup-orient-btn .video-setup-orient-btn__icon,
    body.app-mode-reaction #videoPanelSetup .video-view-options .video-setup-orient-btn .video-setup-orient-btn__icon {
        flex: 0 0 18px;
        width: 18px !important;
        height: 18px !important;
        margin: 0 !important;
        opacity: 0.92;
    }

    body.app-mode-jump #videoPanelSetup .video-view-options .video-setup-orient-btn .video-setup-orient-btn__label,
    body.app-mode-sidejump #videoPanelSetup .video-view-options .video-setup-orient-btn .video-setup-orient-btn__label,
    body.app-mode-reaction #videoPanelSetup .video-view-options .video-setup-orient-btn .video-setup-orient-btn__label {
        flex: 1 1 auto;
        min-width: 0;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
    }

    body.app-mode-jump #videoPanelSetup .video-view-options .video-setup-orient-btn.video-tool-btn.active,
    body.app-mode-sidejump #videoPanelSetup .video-view-options .video-setup-orient-btn.video-tool-btn.active {
        border-color: rgba(0, 217, 255, 0.5);
        background: rgba(0, 217, 255, 0.12);
        color: #c8f6ff;
        box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.12);
    }

    body.app-mode-reaction #videoPanelSetup .video-view-options .video-setup-orient-btn.video-tool-btn.active {
        border-color: rgba(255, 140, 90, 0.52);
        background: rgba(255, 120, 70, 0.14);
        color: #ffe8d8;
        box-shadow: 0 0 0 1px rgba(255, 140, 90, 0.1);
    }

    body.app-mode-sidejump #videoPanelSetup .video-view-options .video-setup-orient-btn.video-tool-btn.active {
        border-color: rgba(192, 132, 252, 0.5);
        background: rgba(192, 132, 252, 0.12);
        color: #f3e8ff;
    }

    body.app-mode-jump #videoPanelSetup .video-view-options #btnJumpMergedView,
    body.app-mode-sidejump #videoPanelSetup .video-view-options #btnJumpMergedView,
    body.app-mode-reaction #videoPanelSetup .video-view-options #btnJumpMergedView,
    body.app-mode-jump #videoPanelSetup .video-view-options #btnReactionFullscreen,
    body.app-mode-sidejump #videoPanelSetup .video-view-options #btnReactionFullscreen,
    body.app-mode-reaction #videoPanelSetup .video-view-options #btnReactionFullscreen {
        display: none !important;
    }

    body.app-mode-jump #videoPanelSetup .camera-select-row,
    body.app-mode-sidejump #videoPanelSetup .camera-select-row,
    body.app-mode-reaction #videoPanelSetup .camera-select-row {
        order: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    body.app-mode-jump #videoPanelSetup .camera-select-label, body.app-mode-sidejump #videoPanelSetup .camera-select-label,
    body.app-mode-reaction #videoPanelSetup .camera-select-label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 0;
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: rgba(148, 163, 184, 0.82);
    }

    body.app-mode-jump #videoPanelSetup .camera-select-label__icon, body.app-mode-sidejump #videoPanelSetup .camera-select-label__icon,
    body.app-mode-reaction #videoPanelSetup .camera-select-label__icon {
        flex-shrink: 0;
        opacity: 0.85;
        color: rgba(148, 163, 184, 0.9);
    }

    body.app-mode-reaction #videoPanelSetup .camera-select-label__icon {
        color: rgba(255, 180, 140, 0.85);
    }

    body.app-mode-jump #videoPanelSetup .camera-select-wrapper, body.app-mode-sidejump #videoPanelSetup .camera-select-wrapper,
    body.app-mode-reaction #videoPanelSetup .camera-select-wrapper {
        position: relative;
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
    }

    body.app-mode-jump #videoPanelSetup .camera-select-wrapper::after, body.app-mode-sidejump #videoPanelSetup .camera-select-wrapper::after,
    body.app-mode-reaction #videoPanelSetup .camera-select-wrapper::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 14px;
        width: 8px;
        height: 8px;
        margin-top: -2px;
        border-right: 1.75px solid rgba(148, 163, 184, 0.65);
        border-bottom: 1.75px solid rgba(148, 163, 184, 0.65);
        transform: translateY(-65%) rotate(45deg);
        pointer-events: none;
    }

    body.app-mode-jump #videoPanelSetup .camera-select, body.app-mode-sidejump #videoPanelSetup .camera-select,
    body.app-mode-reaction #videoPanelSetup .camera-select {
        width: 100%;
        height: 42px;
        min-height: 42px;
        padding: 0 36px 0 11px;
        border-radius: 10px;
        border: 1px solid rgba(148, 163, 184, 0.2);
        background-color: rgba(2, 6, 16, 0.92);
        background-image: none;
        color: #e8edf5;
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
        transition:
            border-color 0.2s var(--ease),
            box-shadow 0.2s var(--ease),
            color 0.2s var(--ease);
    }

    body.app-mode-jump #videoPanelSetup .camera-select:hover, body.app-mode-sidejump #videoPanelSetup .camera-select:hover,
    body.app-mode-reaction #videoPanelSetup .camera-select:hover {
        border-color: rgba(148, 163, 184, 0.32);
        color: #f8fafc;
    }

    body.app-mode-jump #videoPanelSetup .camera-select:focus, body.app-mode-sidejump #videoPanelSetup .camera-select:focus,
    body.app-mode-reaction #videoPanelSetup .camera-select:focus {
        border-color: rgba(0, 217, 255, 0.45);
        box-shadow:
            inset 0 1px 2px rgba(0, 0, 0, 0.35),
            0 0 0 3px rgba(0, 217, 255, 0.12);
        color: #f8fafc;
        outline: none;
    }

    body.app-mode-sidejump #videoPanelSetup .camera-select:focus {
        border-color: rgba(192, 132, 252, 0.45);
        box-shadow:
            inset 0 1px 2px rgba(0, 0, 0, 0.35),
            0 0 0 3px rgba(192, 132, 252, 0.12);
    }

    body.app-mode-reaction #videoPanelSetup .camera-select:focus {
        border-color: rgba(255, 140, 90, 0.45);
        box-shadow:
            inset 0 1px 2px rgba(0, 0, 0, 0.35),
            0 0 0 3px rgba(255, 140, 90, 0.12);
    }

    body.app-mode-jump #videoPanelSetup .video-mobile-setup-actions,
    body.app-mode-sidejump #videoPanelSetup .video-mobile-setup-actions,
    body.app-mode-reaction #videoPanelSetup .video-mobile-setup-actions {
        order: 2;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        width: 100%;
        margin: 0;
    }

    /* Primary CTA — Continue to Test (tinted, matches dark chrome; not a second neon Connect) */
    body.app-mode-jump #videoPanelSetup #btnVideoMobileNext, body.app-mode-sidejump #videoPanelSetup #btnVideoMobileNext,
    body.app-mode-reaction #videoPanelSetup #btnVideoMobileNext {
        order: 3;
        position: relative;
        width: 100%;
        min-height: 40px;
        height: 40px;
        margin: 0;
        padding: 0 12px 0 14px;
        box-sizing: border-box;
        -webkit-appearance: none;
        appearance: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0;
        font-family: var(--font);
        font-size: 0.76rem;
        font-weight: 800;
        letter-spacing: 0.03em;
        line-height: 1;
        text-transform: none;
        border-radius: 9px;
        border: 1px solid rgba(0, 217, 255, 0.38);
        background: linear-gradient(
            180deg,
            rgba(0, 217, 255, 0.16) 0%,
            rgba(0, 217, 255, 0.08) 100%
        );
        color: #e8f8ff;
        cursor: pointer;
        box-shadow: inset 0 1px 0 rgba(0, 217, 255, 0.1);
        transition:
            background 0.2s var(--ease),
            border-color 0.2s var(--ease),
            color 0.2s var(--ease);
    }

    body.app-mode-sidejump #videoPanelSetup #btnVideoMobileNext {
        border-color: rgba(192, 132, 252, 0.38);
        background: linear-gradient(
            180deg,
            rgba(192, 132, 252, 0.16) 0%,
            rgba(192, 132, 252, 0.07) 100%
        );
        color: #ede9fe;
        box-shadow: inset 0 1px 0 rgba(192, 132, 252, 0.1);
    }

    body.app-mode-reaction #videoPanelSetup #btnVideoMobileNext {
        border-color: rgba(255, 140, 90, 0.36);
        background: linear-gradient(
            180deg,
            rgba(255, 140, 90, 0.14) 0%,
            rgba(255, 140, 90, 0.06) 100%
        );
        color: #ffe8d8;
        box-shadow: inset 0 1px 0 rgba(255, 140, 90, 0.1);
    }

    /* Continue: soft outline · Retry: solid amber (matches summary “Test again”) */
    body.app-mode-reaction #videoPanelSetup #btnVideoMobileNext.btn-video-mobile-next--continue {
        border-color: rgba(0, 217, 255, 0.42);
        background: linear-gradient(
            180deg,
            rgba(0, 217, 255, 0.14) 0%,
            rgba(0, 217, 255, 0.06) 100%
        );
        color: #e8f8ff;
        box-shadow: inset 0 1px 0 rgba(0, 217, 255, 0.12);
    }

    body.app-mode-reaction #videoPanelSetup #btnVideoMobileNext.btn-video-mobile-next--retry {
        border-color: transparent;
        background: linear-gradient(135deg, #ff9f5a 0%, #ff7a2e 100%);
        color: #1a1008;
        box-shadow:
            0 2px 10px rgba(255, 122, 46, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }

    body.app-mode-jump #videoPanelSetup .video-mobile-setup-actions + #btnVideoMobileNext:not([hidden]),
    body.app-mode-sidejump #videoPanelSetup .video-mobile-setup-actions + #btnVideoMobileNext:not([hidden]),
    body.app-mode-reaction #videoPanelSetup .video-mobile-setup-actions + #btnVideoMobileNext:not([hidden]) {
        margin-top: 8px;
    }

    body.app-mode-jump #videoPanelSetup .video-mobile-setup-actions + #btnVideoMobileNext:not([hidden])::before,
    body.app-mode-sidejump #videoPanelSetup .video-mobile-setup-actions + #btnVideoMobileNext:not([hidden])::before,
    body.app-mode-reaction #videoPanelSetup .video-mobile-setup-actions + #btnVideoMobileNext:not([hidden])::before {
        content: "";
        position: absolute;
        top: -5px;
        left: 0;
        right: 0;
        height: 1px;
        background: rgba(148, 163, 184, 0.12);
        pointer-events: none;
    }

    body.app-mode-reaction #videoPanelSetup .video-mobile-setup-actions + #btnVideoMobileNext:not([hidden])::before {
        background: rgba(255, 140, 90, 0.14);
    }

    body.app-mode-jump #videoPanelSetup #btnVideoMobileNext:not([hidden]), body.app-mode-sidejump #videoPanelSetup #btnVideoMobileNext:not([hidden]),
    body.app-mode-reaction #videoPanelSetup #btnVideoMobileNext:not([hidden]) {
        display: flex;
    }

    body.video-mobile-test-gated #videoPanelSetup #btnVideoMobileNext.btn-video-mobile-next--gate:not(:disabled) {
        border-color: rgba(0, 217, 255, 0.55);
        background: linear-gradient(
            180deg,
            rgba(0, 217, 255, 0.28) 0%,
            rgba(0, 217, 255, 0.14) 100%
        );
        color: #f4feff;
        box-shadow:
            0 0 0 1px rgba(0, 217, 255, 0.2),
            0 0 18px rgba(0, 217, 255, 0.22);
        animation: video-mobile-test-gate-pulse 2s ease-in-out infinite;
    }

    body.video-mobile-test-gated.app-mode-reaction #videoPanelSetup #btnVideoMobileNext.btn-video-mobile-next--gate:not(:disabled) {
        border-color: rgba(255, 140, 90, 0.5);
        background: linear-gradient(
            180deg,
            rgba(255, 140, 90, 0.24) 0%,
            rgba(255, 140, 90, 0.1) 100%
        );
        color: #fff4eb;
        box-shadow:
            0 0 0 1px rgba(255, 140, 90, 0.18),
            0 0 16px rgba(255, 140, 90, 0.2);
        animation-name: video-mobile-test-gate-pulse-reaction;
    }

    @keyframes video-mobile-test-gate-pulse {
        0%, 100% { box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.15), 0 0 12px rgba(0, 217, 255, 0.15); }
        50%      { box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.35), 0 0 22px rgba(0, 217, 255, 0.32); }
    }

    @keyframes video-mobile-test-gate-pulse-reaction {
        0%, 100% { box-shadow: 0 0 0 1px rgba(255, 140, 90, 0.12), 0 0 10px rgba(255, 140, 90, 0.12); }
        50%      { box-shadow: 0 0 0 1px rgba(255, 140, 90, 0.32), 0 0 20px rgba(255, 140, 90, 0.28); }
    }

    body.app-mode-jump #videoPanelSetup #btnVideoMobileNext:hover:not(:disabled), body.app-mode-sidejump #videoPanelSetup #btnVideoMobileNext:hover:not(:disabled),
    body.app-mode-reaction #videoPanelSetup #btnVideoMobileNext:hover:not(:disabled) {
        border-color: rgba(0, 217, 255, 0.52);
        background: linear-gradient(
            180deg,
            rgba(0, 217, 255, 0.22) 0%,
            rgba(0, 217, 255, 0.12) 100%
        );
        color: #f4feff;
    }

    body.app-mode-sidejump #videoPanelSetup #btnVideoMobileNext:hover:not(:disabled) {
        border-color: rgba(192, 132, 252, 0.52);
        background: linear-gradient(
            180deg,
            rgba(192, 132, 252, 0.22) 0%,
            rgba(192, 132, 252, 0.11) 100%
        );
        color: #f5f3ff;
    }

    body.app-mode-reaction #videoPanelSetup #btnVideoMobileNext:hover:not(:disabled) {
        border-color: rgba(255, 140, 90, 0.5);
        background: linear-gradient(
            180deg,
            rgba(255, 140, 90, 0.2) 0%,
            rgba(255, 140, 90, 0.1) 100%
        );
        color: #fff4eb;
    }

    body.app-mode-reaction
        #videoPanelSetup
        #btnVideoMobileNext.btn-video-mobile-next--continue:hover:not(:disabled) {
        border-color: rgba(0, 217, 255, 0.58);
        background: linear-gradient(
            180deg,
            rgba(0, 217, 255, 0.22) 0%,
            rgba(0, 217, 255, 0.1) 100%
        );
        color: #f4feff;
    }

    body.app-mode-reaction
        #videoPanelSetup
        #btnVideoMobileNext.btn-video-mobile-next--retry:hover:not(:disabled) {
        border-color: transparent;
        background: linear-gradient(135deg, #ffb06a 0%, #ff8a42 100%);
        color: #1a1008;
        box-shadow:
            0 4px 14px rgba(255, 122, 46, 0.45),
            inset 0 1px 0 rgba(255, 255, 255, 0.28);
    }

    body.app-mode-jump #videoPanelSetup #btnVideoMobileNext:active:not(:disabled), body.app-mode-sidejump #videoPanelSetup #btnVideoMobileNext:active:not(:disabled),
    body.app-mode-reaction #videoPanelSetup #btnVideoMobileNext:active:not(:disabled) {
        background: rgba(0, 217, 255, 0.1);
    }

    body.app-mode-sidejump #videoPanelSetup #btnVideoMobileNext:active:not(:disabled) {
        background: rgba(192, 132, 252, 0.1);
    }

    body.app-mode-reaction #videoPanelSetup #btnVideoMobileNext:active:not(:disabled) {
        background: rgba(255, 140, 90, 0.1);
    }

    body.app-mode-jump #videoPanelSetup #btnVideoMobileNext:disabled, body.app-mode-sidejump #videoPanelSetup #btnVideoMobileNext:disabled,
    body.app-mode-reaction #videoPanelSetup #btnVideoMobileNext:disabled {
        opacity: 0.42;
        cursor: not-allowed;
        color: rgba(148, 163, 184, 0.7);
        border-color: rgba(148, 163, 184, 0.16);
        background: rgba(10, 14, 26, 0.6);
        box-shadow: none;
    }

    /* ── Action buttons (Connect / Open video / Disconnect) ── */
    body.app-mode-jump .video-mobile-setup-actions .btn-connect, body.app-mode-sidejump .video-mobile-setup-actions .btn-connect,
    body.app-mode-jump .video-mobile-setup-actions .btn-disconnect, body.app-mode-sidejump .video-mobile-setup-actions .btn-disconnect,
    body.app-mode-reaction .video-mobile-setup-actions .btn-connect,
    body.app-mode-reaction .video-mobile-setup-actions .btn-disconnect,
    body.app-mode-reaction .video-mobile-setup-actions #btnRetryVideoTest {
        -webkit-appearance: none;
        appearance: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 34px;
        min-height: 34px;
        max-height: 34px;
        margin: 0;
        padding: 0 8px;
        box-sizing: border-box;
        font-family: var(--font);
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 0.02em;
        border-radius: 8px;
        gap: 5px;
        transform: none;
        box-shadow: none;
        cursor: pointer;
    }

    body.app-mode-jump .video-mobile-setup-actions .btn-connect::after, body.app-mode-sidejump .video-mobile-setup-actions .btn-connect::after,
    body.app-mode-reaction .video-mobile-setup-actions .btn-connect::after {
        display: none;
    }

    body.app-mode-jump .video-mobile-setup-actions .btn-connect#btnStart, body.app-mode-sidejump .video-mobile-setup-actions .btn-connect#btnStart,
    body.app-mode-reaction .video-mobile-setup-actions .btn-connect#btnStart {
        grid-column: 1;
        background-color: rgba(0, 217, 255, 0.92);
        border: 1px solid rgba(0, 217, 255, 0.6);
        color: #021018;
    }

    body.app-mode-jump .video-mobile-setup-actions .btn-connect#btnOpenVideo, body.app-mode-sidejump .video-mobile-setup-actions .btn-connect#btnOpenVideo,
    body.app-mode-reaction .video-mobile-setup-actions .btn-connect#btnOpenVideo {
        grid-column: 2;
        background: rgba(8, 14, 28, 0.95) !important;
        background-image: none !important;
        border: 1px solid rgba(0, 217, 255, 0.45) !important;
        color: #7ee8ff !important;
        font-weight: 700;
        box-shadow: none !important;
    }

    body.app-mode-jump .video-mobile-setup-actions .btn-connect#btnOpenVideo:hover, body.app-mode-sidejump .video-mobile-setup-actions .btn-connect#btnOpenVideo:hover,
    body.app-mode-reaction .video-mobile-setup-actions .btn-connect#btnOpenVideo:hover {
        background: rgba(12, 20, 38, 0.98) !important;
        background-image: none !important;
        color: #b8f4ff !important;
        transform: none;
        box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.2) !important;
    }

    body.app-mode-jump .video-mobile-setup-actions .btn-connect#btnOpenVideo .btn-connect-dot, body.app-mode-sidejump .video-mobile-setup-actions .btn-connect#btnOpenVideo .btn-connect-dot,
    body.app-mode-reaction .video-mobile-setup-actions .btn-connect#btnOpenVideo .btn-connect-dot {
        background: rgba(0, 217, 255, 0.85);
    }

    body.app-mode-reaction .video-mobile-setup-actions .btn-connect#btnOpenVideo {
        border-color: rgba(255, 140, 90, 0.45) !important;
        color: #ffc9a8 !important;
    }

    body.app-mode-reaction .video-mobile-setup-actions .btn-connect#btnOpenVideo:hover {
        color: #ffe0c8 !important;
        box-shadow: 0 0 0 1px rgba(255, 140, 90, 0.22) !important;
    }

    body.app-mode-reaction .video-mobile-setup-actions .btn-connect#btnOpenVideo .btn-connect-dot {
        background: rgba(255, 160, 100, 0.9);
    }

    body.app-mode-jump .video-mobile-setup-actions .btn-disconnect, body.app-mode-sidejump .video-mobile-setup-actions .btn-disconnect,
    body.app-mode-reaction .video-mobile-setup-actions .btn-disconnect {
        grid-column: 1 / -1;
        gap: 8px;
        min-height: 44px;
        height: 44px;
        max-height: none;
        padding: 0 16px;
        border-radius: 11px;
        border: 1px solid rgba(248, 113, 113, 0.32);
        background: linear-gradient(
            180deg,
            rgba(127, 29, 29, 0.28) 0%,
            rgba(69, 10, 10, 0.42) 100%
        );
        color: #fee2e2;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: none;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.07),
            0 2px 10px rgba(0, 0, 0, 0.25);
        transition:
            background 0.2s var(--ease),
            border-color 0.2s var(--ease),
            box-shadow 0.2s var(--ease),
            transform 0.15s var(--ease);
    }

    body.app-mode-jump .video-mobile-setup-actions .btn-disconnect:hover, body.app-mode-sidejump .video-mobile-setup-actions .btn-disconnect:hover,
    body.app-mode-reaction .video-mobile-setup-actions .btn-disconnect:hover {
        border-color: rgba(252, 165, 165, 0.45);
        background: linear-gradient(
            180deg,
            rgba(153, 27, 27, 0.38) 0%,
            rgba(91, 15, 15, 0.52) 100%
        );
        color: #fff5f5;
        transform: none;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.09),
            0 4px 14px rgba(127, 29, 29, 0.25);
    }

    body.app-mode-jump .video-mobile-setup-actions .btn-disconnect:active, body.app-mode-sidejump .video-mobile-setup-actions .btn-disconnect:active,
    body.app-mode-reaction .video-mobile-setup-actions .btn-disconnect:active {
        transform: scale(0.98);
    }

    body.app-mode-jump .video-mobile-setup-actions .btn-disconnect-dot, body.app-mode-sidejump .video-mobile-setup-actions .btn-disconnect-dot,
    body.app-mode-reaction .video-mobile-setup-actions .btn-disconnect-dot {
        display: none;
    }

    body.app-mode-jump .video-mobile-setup-actions .btn-disconnect__icon, body.app-mode-sidejump .video-mobile-setup-actions .btn-disconnect__icon,
    body.app-mode-reaction .video-mobile-setup-actions .btn-disconnect__icon {
        flex-shrink: 0;
        opacity: 0.92;
        color: #fca5a5;
    }

    body.app-mode-jump .video-mobile-setup-actions .btn-disconnect__text, body.app-mode-sidejump .video-mobile-setup-actions .btn-disconnect__text,
    body.app-mode-reaction .video-mobile-setup-actions .btn-disconnect__text {
        line-height: 1;
    }

    body.app-mode-jump .video-mobile-setup-actions .btn-connect-dot, body.app-mode-sidejump .video-mobile-setup-actions .btn-connect-dot,
    body.app-mode-reaction .video-mobile-setup-actions .btn-connect-dot {
        width: 5px;
        height: 5px;
    }

    body.app-mode-jump .video-mobile-setup-actions #btnRetryVideoTest, body.app-mode-sidejump .video-mobile-setup-actions #btnRetryVideoTest,
    body.app-mode-reaction .video-mobile-setup-actions #btnRetryVideoTest {
        grid-column: 1 / -1;
        background-color: rgba(8, 14, 28, 0.92);
        border: 1px solid rgba(0, 217, 255, 0.28);
        color: var(--primary-cyan);
        font-weight: 600;
    }

    /* Guest: no Open Video — Connect Camera uses full row width */
    body.app-role-guest .video-mobile-setup-actions {
        grid-template-columns: 1fr;
    }

    body.app-role-guest .video-mobile-setup-actions #btnOpenVideo {
        display: none !important;
    }

    body.app-role-guest .video-mobile-setup-actions .btn-connect#btnStart {
        grid-column: 1 / -1;
        width: 100%;
    }

    /* ── Stack order: tabs → quick guide → setup / test panels ── */
    body.app-mode-jump .title-bar-actions--video #videoMobileTabsNav, body.app-mode-sidejump .title-bar-actions--video #videoMobileTabsNav,
    body.app-mode-reaction .title-bar-actions--video #videoMobileTabsNav {
        order: 0;
    }

    body.app-mode-jump .title-bar-actions--video .video-mobile-jump-guide:not([hidden]), body.app-mode-sidejump .title-bar-actions--video .video-mobile-jump-guide:not([hidden]),
    body.app-mode-reaction .title-bar-actions--video .video-mobile-reaction-guide:not([hidden]) {
        order: 1;
        align-self: stretch;
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        box-sizing: border-box;
    }

    body.app-mode-jump .title-bar-actions--video #videoPanelSetup.is-active, body.app-mode-sidejump .title-bar-actions--video #videoPanelSetup.is-active,
    body.app-mode-jump .title-bar-actions--video #videoPanelTest.is-active, body.app-mode-sidejump .title-bar-actions--video #videoPanelTest.is-active,
    body.app-mode-reaction .title-bar-actions--video #videoPanelSetup.is-active,
    body.app-mode-reaction .title-bar-actions--video #videoPanelTest.is-active {
        order: 2;
    }

    body.app-mode-jump #videoPanelTest.is-active, body.app-mode-sidejump #videoPanelTest.is-active,
    body.app-mode-reaction #videoPanelTest.is-active {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* ── Quick test (2 steps) ── */
    body.app-mode-jump .video-mobile-jump-guide:not([hidden]), body.app-mode-sidejump .video-mobile-jump-guide:not([hidden]),
    body.app-mode-reaction .video-mobile-reaction-guide:not([hidden]) {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 0;
        padding: 10px 12px;
        box-sizing: border-box;
        border-radius: 12px;
    }

    body.app-mode-jump .video-mobile-jump-guide:not([hidden]), body.app-mode-sidejump .video-mobile-jump-guide:not([hidden]) {
        border: 1px solid rgba(0, 217, 255, 0.22);
        background: rgba(0, 217, 255, 0.06);
    }

    body.app-mode-reaction .video-mobile-reaction-guide:not([hidden]) {
        border: 1px solid rgba(255, 140, 90, 0.22);
        background: rgba(255, 120, 70, 0.06);
    }

    body.app-mode-jump .video-mobile-quick-guide__title, body.app-mode-sidejump .video-mobile-quick-guide__title,
    body.app-mode-reaction .video-mobile-quick-guide__title {
        margin: 0;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    body.app-mode-jump .video-mobile-quick-guide__title, body.app-mode-sidejump .video-mobile-quick-guide__title {
        color: #a5f3fc;
    }

    body.app-mode-reaction .video-mobile-quick-guide__title {
        color: #ffb88a;
    }

    body.app-mode-jump .video-mobile-quick-steps, body.app-mode-sidejump .video-mobile-quick-steps,
    body.app-mode-reaction .video-mobile-quick-steps {
        display: flex;
        align-items: stretch;
        gap: 6px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    body.app-mode-jump .video-mobile-quick-step, body.app-mode-sidejump .video-mobile-quick-step,
    body.app-mode-reaction .video-mobile-quick-step {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 6px 4px;
        border-radius: 10px;
        text-align: center;
    }

    body.app-mode-jump .video-mobile-quick-step, body.app-mode-sidejump .video-mobile-quick-step {
        background: rgba(8, 12, 24, 0.65);
        border: 1px solid rgba(148, 163, 184, 0.2);
    }

    body.app-mode-reaction .video-mobile-quick-step {
        background: rgba(0, 0, 0, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.06);
    }

    body.app-mode-jump .video-mobile-quick-step__badge, body.app-mode-sidejump .video-mobile-quick-step__badge,
    body.app-mode-reaction .video-mobile-quick-step__badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.35rem;
        height: 1.35rem;
        border-radius: 999px;
        font-size: 0.68rem;
        font-weight: 800;
    }

    body.app-mode-jump .video-mobile-quick-step__label, body.app-mode-sidejump .video-mobile-quick-step__label,
    body.app-mode-reaction .video-mobile-quick-step__label {
        font-size: 0.62rem;
        font-weight: 700;
        line-height: 1.25;
        letter-spacing: 0.02em;
    }

    body.app-mode-jump .video-mobile-quick-step.is-current, body.app-mode-sidejump .video-mobile-quick-step.is-current {
        border-color: rgba(0, 217, 255, 0.5);
        background: rgba(0, 217, 255, 0.1);
    }

    body.app-mode-jump .video-mobile-quick-step.is-current .video-mobile-quick-step__badge, body.app-mode-sidejump .video-mobile-quick-step.is-current .video-mobile-quick-step__badge {
        color: #021018;
        background: var(--primary-cyan);
        border: 1px solid rgba(0, 217, 255, 0.8);
    }

    body.app-mode-jump .video-mobile-quick-step.is-current .video-mobile-quick-step__label, body.app-mode-sidejump .video-mobile-quick-step.is-current .video-mobile-quick-step__label {
        color: #e8f8ff;
    }

    body.app-mode-reaction .video-mobile-quick-step.is-current {
        border-color: rgba(255, 140, 90, 0.45);
        background: rgba(255, 120, 70, 0.12);
        color: #ffe8d8;
    }

    body.app-mode-reaction .video-mobile-quick-step.is-current .video-mobile-quick-step__badge {
        background: rgba(255, 140, 90, 0.35);
        color: #fff;
    }

    body.app-mode-jump .video-mobile-quick-step.is-done, body.app-mode-sidejump .video-mobile-quick-step.is-done,
    body.app-mode-reaction .video-mobile-quick-step.is-done {
        opacity: 0.72;
    }

    body.app-mode-jump .video-mobile-quick-guide__hint, body.app-mode-sidejump .video-mobile-quick-guide__hint,
    body.app-mode-reaction .video-mobile-quick-guide__hint {
        margin: 0;
        font-size: 0.72rem;
        line-height: 1.4;
        color: var(--text-muted);
    }

    /* Jump: ensure quick test visible (reaction-mobile hides jump guide only in reaction mode) */
    body.app-mode-jump .video-mobile-jump-guide:not([hidden]), body.app-mode-sidejump .video-mobile-jump-guide:not([hidden]) {
        display: flex !important;
    }

    body.app-mode-jump .video-mobile-reaction-guide, body.app-mode-sidejump .video-mobile-reaction-guide {
        display: none !important;
    }

    body.app-mode-reaction .video-mobile-jump-guide {
        display: none !important;
    }

    body.app-mode-reaction .video-mobile-reaction-guide:not([hidden]) {
        display: flex !important;
    }

    /* ── Mobile scroll: lock viewport on body, scroll inside .app-wrapper (iOS-safe) ── */
    html {
        height: 100%;
    }

    body.app-mode-jump:not(.test-select-overlay-open), body.app-mode-sidejump:not(.test-select-overlay-open):not(.reaction-pseudo-stage-fs),
    body.app-mode-reaction:not(.test-select-overlay-open):not(.reaction-pseudo-stage-fs) {
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
        height: 100dvh !important;
        height: 100svh !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
        overscroll-behavior: none;
        --mobile-video-chrome-offset: calc(
            env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px) + 28px
        );
        --mobile-video-stage-max-h: min(
            calc(100dvh - var(--mobile-video-chrome-offset)),
            calc(100svh - var(--mobile-video-chrome-offset))
        );
        --mobile-video-raw-frame-h: var(--mobile-video-stage-max-h);
    }

    body.group-test-active.app-mode-jump:not(.test-select-overlay-open):not(.reaction-pseudo-stage-fs),
    body.group-test-active.app-mode-sidejump:not(.test-select-overlay-open):not(.reaction-pseudo-stage-fs),
    body.group-test-active.app-mode-reaction:not(.test-select-overlay-open):not(.reaction-pseudo-stage-fs) {
        --mobile-video-chrome-offset: calc(
            env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px) + 152px
        );
    }

    body.app-mode-jump:has(#videoMobileTestHost:not([hidden])):not(.test-select-overlay-open):not(.reaction-pseudo-stage-fs),
    body.app-mode-sidejump:has(#videoMobileTestHost:not([hidden])):not(.test-select-overlay-open):not(.reaction-pseudo-stage-fs),
    body.app-mode-reaction:has(#videoMobileTestHost:not([hidden])):not(.test-select-overlay-open):not(.reaction-pseudo-stage-fs) {
        --mobile-video-chrome-offset: calc(
            env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px) + 132px
        );
    }

    body.app-mode-jump:not(.test-select-overlay-open):not(.reaction-pseudo-stage-fs) .app-wrapper,
    body.app-mode-sidejump:not(.test-select-overlay-open):not(.reaction-pseudo-stage-fs) .app-wrapper,
    body.app-mode-reaction:not(.test-select-overlay-open):not(.reaction-pseudo-stage-fs) .app-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 2200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
        flex: 1 1 0 !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: hidden !important;
        overscroll-behavior: none;
        touch-action: manipulation;
        padding-bottom: max(2px, env(safe-area-inset-bottom, 0px)) !important;
        gap: 4px !important;
    }

    /* Desktop-only reaction flex fill — must not apply on phone */
    body.app-mode-reaction:not(.test-select-overlay-open):not(.reaction-pseudo-stage-fs) .app-wrapper {
        min-height: 0 !important;
    }

    body.app-mode-jump:not(.reaction-pseudo-stage-fs) .main-content-layout, body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .main-content-layout,
    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .main-content-layout {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
    }

    body.app-mode-jump:not(.reaction-pseudo-stage-fs) .content-main, body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .content-main,
    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .content-main {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
    }

    body.app-mode-jump:not(.reaction-pseudo-stage-fs) .section-video, body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .section-video,
    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .section-video {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
    }

    /* Video stage: fill viewport below header (Jump + Reaction same tall box) */
    body.app-mode-jump:not(.reaction-pseudo-stage-fs) .reaction-cine-root, body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .reaction-cine-root,
    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .reaction-cine-root,
    body.app-mode-reaction.reaction-sidebar-collapsed:not(.reaction-pseudo-stage-fs) .reaction-cine-root {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }

    body.app-mode-jump:not(.reaction-pseudo-stage-fs) .video-merged-container, body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .video-merged-container,
    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .video-merged-container {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        padding: 6px !important;
    }

    body.app-mode-jump:not(.reaction-pseudo-stage-fs) .video-dual-layout, body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .video-dual-layout,
    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .video-dual-layout,
    body.app-mode-reaction.reaction-sidebar-collapsed:not(.reaction-pseudo-stage-fs) .video-dual-layout {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }

    body.app-mode-jump:not(.reaction-pseudo-stage-fs) .video-merged-frame:not(.video-raw-frame), body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .video-merged-frame:not(.video-raw-frame),
    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .video-merged-frame:not(.video-raw-frame) {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        height: auto !important;
        overflow: hidden !important;
        box-sizing: border-box;
    }

    /*
     * Mobile stage: full width, height from stream aspect (Safari / real handset).
     * Avoid narrow width = height×aspect (pillarboxing inside the frame on 1280×720 tags).
     */
    body.app-mode-jump:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame, body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame,
    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame,
    body.app-mode-jump:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame.video-stage--intrinsic-aspect,
    body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame.video-stage--intrinsic-aspect,
    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame.video-stage--intrinsic-aspect,
    body.video-mobile-setup-in-chrome .video-raw-frame.video-merged-frame,
    body.video-mobile-setup-in-chrome.video-mobile-camera-live .video-raw-frame.video-merged-frame,
    body.video-mobile-setup-in-chrome.video-mobile-camera-live .video-raw-frame.video-merged-frame.video-stage--intrinsic-aspect {
        flex: 0 0 auto !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: var(--mobile-video-raw-frame-h, var(--mobile-video-stage-max-h)) !important;
        height: var(--mobile-video-raw-frame-h, var(--mobile-video-stage-max-h)) !important;
        max-height: var(--mobile-video-raw-frame-h, var(--mobile-video-stage-max-h)) !important;
        aspect-ratio: unset !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        position: relative !important;
        inset: auto !important;
    }

    /*
     * Reaction mobile: cancel desktop absolute-fill (styles.css @media min-width 769px).
     * Stage height/sizing: same shared rules as Jump / Side Jump above — no reaction-only heights.
     */
    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .reaction-cine-root {
        border-radius: 0 0 16px 16px;
        overflow: visible !important;
    }

    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) #videoDualLayout.video-dual-layout--merged,
    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .video-dual-layout.video-dual-layout--merged {
        position: relative !important;
        inset: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: unset !important;
    }

    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .video-dual-layout--merged .video-raw-frame,
    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) #videoDualLayout.video-dual-layout--merged .video-raw-frame {
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
    }

    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .video-skeleton-frame {
        display: none !important;
    }

    body.jump-mobile-dock-below-video:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame {
        margin-bottom: 0 !important;
    }

    body.jump-mobile-dock-below-video .video-raw-frame .video-frame-bottom-chrome.video-frame-bottom-chrome--jump-cta,
    body.jump-mobile-dock-below-video .video-raw-frame .video-frame-bottom-chrome.video-frame-bottom-chrome--jump-session,
    body.video-mobile-setup-in-chrome.jump-mobile-dock-below-video.app-mode-jump:not(.reaction-pseudo-stage-fs) .video-raw-frame .video-frame-bottom-chrome.video-frame-bottom-chrome--jump-cta,
    body.video-mobile-setup-in-chrome.jump-mobile-dock-below-video.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .video-raw-frame .video-frame-bottom-chrome.video-frame-bottom-chrome--jump-cta {
        position: static !important;
        inset: auto !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        pointer-events: none !important;
    }

    body.jump-mobile-dock-below-video .jump-mobile-test-dock {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 8px 0 0;
        border-radius: 14px;
        overflow: hidden;
        border: 1px solid var(--jump-chrome-accent-border, rgba(0, 217, 255, 0.28));
        background: linear-gradient(180deg, #0e1528 0%, #080d18 100%);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
        box-sizing: border-box;
        pointer-events: auto;
    }

    body.app-mode-sidejump.jump-mobile-dock-below-video .jump-mobile-test-dock {
        border-color: rgba(192, 132, 252, 0.32);
    }

    body.jump-mobile-dock-below-video .jump-mobile-test-dock[hidden] {
        display: none !important;
    }

    /* Test tab: controls in #videoMobileTestHost — frame chrome is overlay-only (no card on video). */
    body.jump-mobile-dock-below-video.video-mobile-setup-in-chrome.app-mode-jump:not(.reaction-pseudo-stage-fs) .video-raw-frame > .video-frame-bottom-chrome,
    body.jump-mobile-dock-below-video.video-mobile-setup-in-chrome.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .video-raw-frame > .video-frame-bottom-chrome {
        position: absolute !important;
        inset: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        overflow: visible !important;
        pointer-events: none !important;
        z-index: 16;
    }

    body.jump-mobile-dock-below-video .video-frame-bottom-chrome > .jump-mobile-video-controls,
    body.jump-mobile-dock-below-video .video-frame-bottom-chrome > .jump-mobile-video-cta {
        display: none !important;
    }

    body.jump-mobile-dock-below-video.video-mobile-setup-in-chrome.app-mode-jump #rawFrameLabel:not([hidden]),
    body.jump-mobile-dock-below-video.video-mobile-setup-in-chrome.app-mode-sidejump #rawFrameLabel:not([hidden]) {
        display: inline-flex !important;
    }

    body.jump-mobile-dock-below-video.app-mode-jump:not(.reaction-pseudo-stage-fs) .reaction-cine-root,
    body.jump-mobile-dock-below-video.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .reaction-cine-root {
        border-radius: 0;
        background: rgba(8, 12, 24, 0.5);
    }

    body.jump-mobile-dock-below-video.app-mode-jump .video-mobile-test-host:not([hidden]),
    body.jump-mobile-dock-below-video.app-mode-sidejump .video-mobile-test-host:not([hidden]) {
        padding: 8px 10px 10px;
        background: rgba(8, 12, 24, 0.5);
        border-radius: 0 0 16px 16px;
    }

    body.jump-mobile-dock-below-video.app-mode-jump .jump-mobile-test-dock .jump-timing-panel,
    body.jump-mobile-dock-below-video.app-mode-sidejump .jump-mobile-test-dock .jump-timing-panel {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    body.jump-mobile-dock-below-video.app-mode-jump .jump-mobile-test-dock .jump-timing-row--fields,
    body.jump-mobile-dock-below-video.app-mode-sidejump .jump-mobile-test-dock .jump-timing-row--fields {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    body.jump-mobile-dock-below-video.app-mode-jump .jump-mobile-test-dock .jump-timing-row--fields .jump-timing-field,
    body.jump-mobile-dock-below-video.app-mode-sidejump .jump-mobile-test-dock .jump-timing-row--fields .jump-timing-field {
        flex: 1 1 calc(50% - 4px);
        min-width: 120px;
    }

    body.jump-mobile-dock-below-video .jump-mobile-test-dock--session:not(:has(.jump-mobile-video-controls:not([hidden]))) .jump-mobile-video-cta .btn-toggle-jump,
    body.jump-mobile-dock-below-video .jump-mobile-test-dock--session .jump-mobile-video-cta .btn-toggle-jump {
        border-radius: 0 0 13px 13px !important;
        border-top: none !important;
    }

    body.jump-mobile-dock-below-video.app-mode-jump:not(.reaction-pseudo-stage-fs) .video-frame-bottom-chrome,
    body.jump-mobile-dock-below-video.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .video-frame-bottom-chrome {
        bottom: auto !important;
    }

    /* Kill desktop intrinsic-aspect narrow width on real phones (pillarboxing). */
    .video-merged-frame.video-stage--intrinsic-aspect[data-stream-tall="1"]:not(.video-stage--portrait-stream),
    .video-dual-layout--merged .video-raw-frame.video-stage--intrinsic-aspect[data-stream-tall="1"]:not(.video-stage--portrait-stream),
    body.app-mode-jump .video-merged-frame.video-stage--intrinsic-aspect[data-stream-sideways="1"]:not(.video-stage--portrait-stream),
    body.app-mode-sidejump .video-merged-frame.video-stage--intrinsic-aspect[data-stream-sideways="1"]:not(.video-stage--portrait-stream) {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: unset !important;
    }

    body.app-mode-jump:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame.rot-90, body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame.rot-90,
    body.app-mode-jump:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame.rot-270, body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame.rot-270,
    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame.rot-90,
    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame.rot-270 {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-height: var(--mobile-video-raw-frame-h, var(--mobile-video-stage-max-h)) !important;
        height: var(--mobile-video-raw-frame-h, var(--mobile-video-stage-max-h)) !important;
        max-height: var(--mobile-video-raw-frame-h, var(--mobile-video-stage-max-h)) !important;
        aspect-ratio: unset !important;
    }

    body.app-mode-jump:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame, body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame,
    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame {
        position: relative;
        overflow: hidden !important;
        border-radius: 14px;
        padding-bottom: 0 !important;
        box-sizing: border-box;
    }

    /* Mobile: fill stage box (stream aspect on container; no letterboxed px sizing) */
    body.app-mode-jump:not(.reaction-pseudo-stage-fs) .video-raw-frame #webcamVideo, body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .video-raw-frame #webcamVideo,
    body.app-mode-jump:not(.reaction-pseudo-stage-fs) .video-raw-frame #outputCanvas, body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .video-raw-frame #outputCanvas,
    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .video-raw-frame #webcamVideo,
    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .video-raw-frame #outputCanvas,
    body.video-mobile-setup-in-chrome .video-raw-frame #webcamVideo,
    body.video-mobile-setup-in-chrome .video-raw-frame #outputCanvas {
        position: absolute !important;
        inset: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        object-fit: contain !important;
        transform-origin: center center !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }

    body.app-mode-jump:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame.rot-90 #webcamVideo,
    body.app-mode-jump:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame.rot-90 #outputCanvas,
    body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame.rot-90 #webcamVideo,
    body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame.rot-90 #outputCanvas,
    body.app-mode-jump:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame.rot-270 #webcamVideo,
    body.app-mode-jump:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame.rot-270 #outputCanvas,
    body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame.rot-270 #webcamVideo,
    body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame.rot-270 #outputCanvas,
    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame.rot-90 #webcamVideo,
    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame.rot-90 #outputCanvas,
    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame.rot-270 #webcamVideo,
    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame.rot-270 #outputCanvas {
        inset: auto !important;
        width: auto !important;
        height: auto !important;
    }

    /* Overlays / placeholder: full bleed (video + canvas sized in app.js) */
    body.app-mode-jump:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame > .smart-dark-overlay, body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame > .smart-dark-overlay,
    body.app-mode-jump:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame > .video-placeholder, body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame > .video-placeholder,
    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame > .smart-dark-overlay,
    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame > .test-countdown-overlay,
    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame > .video-placeholder {
        inset: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: unset !important;
    }

    body.app-mode-jump:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame.rot-90 > .smart-dark-overlay, body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame.rot-90 > .smart-dark-overlay,
    body.app-mode-jump:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame.rot-270 > .smart-dark-overlay, body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame.rot-270 > .smart-dark-overlay,
    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame.rot-90 > .smart-dark-overlay,
    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame.rot-270 > .smart-dark-overlay {
        inset: 0 !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: unset !important;
    }

    body.app-mode-jump:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame > .test-countdown-overlay,
    body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame > .test-countdown-overlay {
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: unset !important;
    }

    body.app-mode-jump:not(.reaction-pseudo-stage-fs) .video-frame-bottom-chrome, body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .video-frame-bottom-chrome,
    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .video-frame-bottom-chrome {
        bottom: 10px !important;
        z-index: 12;
        pointer-events: none;
    }

    body.app-mode-jump:not(.reaction-pseudo-stage-fs) .video-frame-bottom-chrome.video-frame-bottom-chrome--jump-cta,
    body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .video-frame-bottom-chrome.video-frame-bottom-chrome--jump-cta,
    body.app-mode-jump:not(.reaction-pseudo-stage-fs) .video-frame-bottom-chrome.video-frame-bottom-chrome--jump-session,
    body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .video-frame-bottom-chrome.video-frame-bottom-chrome--jump-session {
        --jump-chrome-r-shell: 16px;
        --jump-chrome-r-card: 11px;
        --jump-chrome-r-field: 10px;
        bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
        left: max(12px, env(safe-area-inset-left, 0px)) !important;
        right: max(12px, env(safe-area-inset-right, 0px)) !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
        pointer-events: auto !important;
        gap: 0 !important;
        align-items: stretch !important;
        box-sizing: border-box;
        overflow: hidden;
        border-radius: var(--jump-chrome-r-shell);
        border: 1px solid rgba(0, 217, 255, 0.14);
        background: var(--jump-chrome-panel-bg);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        isolation: isolate;
    }

    body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .video-frame-bottom-chrome.video-frame-bottom-chrome--jump-cta,
    body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .video-frame-bottom-chrome.video-frame-bottom-chrome--jump-session {
        border-color: rgba(192, 132, 252, 0.18);
    }

    body.app-mode-jump .video-frame-bottom-chrome--jump-cta .reaction-sidebar-expand-video-dock,
    body.app-mode-sidejump .video-frame-bottom-chrome--jump-cta .reaction-sidebar-expand-video-dock {
        display: none !important;
    }

    body.app-mode-jump .video-merged-container.video-stage--portrait-stream .video-frame-bottom-chrome--jump-cta, body.app-mode-sidejump .video-merged-container.video-stage--portrait-stream .video-frame-bottom-chrome--jump-cta,
    body.app-mode-jump .video-merged-container.video-stage--intrinsic-aspect .video-frame-bottom-chrome--jump-cta, body.app-mode-sidejump .video-merged-container.video-stage--intrinsic-aspect .video-frame-bottom-chrome--jump-cta,
    body.app-mode-jump #videoDualLayout.video-stage--portrait-stream .video-frame-bottom-chrome--jump-cta, body.app-mode-sidejump #videoDualLayout.video-stage--portrait-stream .video-frame-bottom-chrome--jump-cta {
        filter: none;
    }

    body.app-mode-jump .video-frame-bottom-chrome--jump-cta #rawFrameLabel .video-desktop-frame-label-part,
    body.app-mode-sidejump .video-frame-bottom-chrome--jump-cta #rawFrameLabel .video-desktop-frame-label-part,
    body.app-mode-jump .video-frame-bottom-chrome--jump-cta #rawFrameLabel .video-mobile-stage-label__meta,
    body.app-mode-sidejump .video-frame-bottom-chrome--jump-cta #rawFrameLabel .video-mobile-stage-label__meta,
    body.video-mobile-setup-in-chrome .video-mobile-stage-label--jump-controls-active .video-desktop-frame-label-part,
    body.video-mobile-setup-in-chrome .video-mobile-stage-label--jump-controls-active .video-mobile-stage-label__meta {
        display: none !important;
    }

    body.video-mobile-setup-in-chrome .video-mobile-stage-label--jump-controls-active .video-raw-frame-console__settings-btn,
    body.video-mobile-setup-in-chrome .video-mobile-stage-label--jump-controls-active .video-raw-frame-console__edit-zones-btn:not([hidden]) {
        display: inline-flex !important;
    }

    body.app-mode-jump .video-frame-bottom-chrome--jump-cta,
    body.app-mode-sidejump .video-frame-bottom-chrome--jump-cta {
        --jump-chrome-accent: rgba(0, 217, 255, 1);
        --jump-chrome-accent-soft: rgba(0, 217, 255, 0.12);
        --jump-chrome-accent-border: rgba(0, 217, 255, 0.28);
    }

    body.app-mode-sidejump .video-frame-bottom-chrome--jump-cta {
        --jump-chrome-accent: #d8b4fe;
        --jump-chrome-accent-soft: rgba(192, 132, 252, 0.14);
        --jump-chrome-accent-border: rgba(192, 132, 252, 0.32);
    }

    body.app-mode-jump .jump-mobile-video-controls,
    body.app-mode-sidejump .jump-mobile-video-controls {
        --jump-chrome-accent: rgba(0, 217, 255, 1);
        --jump-chrome-accent-soft: rgba(0, 217, 255, 0.12);
        --jump-chrome-accent-border: rgba(0, 217, 255, 0.28);
        display: none;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        align-self: stretch;
        flex: 0 0 auto;
        pointer-events: auto;
        padding: 10px 10px 8px;
        margin: 0;
        border: none;
        border-radius: 0;
        border-bottom: 1px solid rgba(148, 163, 184, 0.1);
        background: var(--jump-chrome-controls-bg);
        box-sizing: border-box;
        isolation: isolate;
    }

    body.app-mode-sidejump .jump-mobile-video-controls {
        --jump-chrome-accent: #d8b4fe;
        --jump-chrome-accent-soft: rgba(192, 132, 252, 0.14);
        --jump-chrome-accent-border: rgba(192, 132, 252, 0.32);
    }

    body.app-mode-jump .jump-mobile-video-controls:not([hidden]),
    body.app-mode-sidejump .jump-mobile-video-controls:not([hidden]) {
        display: block;
    }

    body.app-mode-jump .jump-mobile-video-controls .jump-timing-panel,
    body.app-mode-sidejump .jump-mobile-video-controls .jump-timing-panel {
        gap: 8px;
    }

    body.app-mode-jump .jump-mobile-video-controls .jump-timing-row--fields,
    body.app-mode-sidejump .jump-mobile-video-controls .jump-timing-row--fields {
        gap: 8px;
    }

    body.app-mode-jump .jump-mobile-video-controls .jump-timing-field,
    body.app-mode-sidejump .jump-mobile-video-controls .jump-timing-field {
        gap: 4px;
    }

    body.app-mode-jump .jump-mobile-video-controls .jump-timing-label,
    body.app-mode-sidejump .jump-mobile-video-controls .jump-timing-label {
        font-size: 0.58rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        color: rgba(148, 163, 184, 0.9);
    }

    body.app-mode-jump .jump-mobile-video-controls .jump-timing-input,
    body.app-mode-sidejump .jump-mobile-video-controls .jump-timing-input {
        min-height: 40px;
        height: 40px;
        font-size: 0.92rem;
        border-radius: var(--jump-chrome-r-field, 10px);
        border-color: rgba(148, 163, 184, 0.18);
        background: rgba(6, 10, 20, 0.28);
        color: #f1f5f9;
        box-shadow: none;
    }

    body.app-mode-jump .jump-mobile-video-controls .jump-timing-input:focus,
    body.app-mode-sidejump .jump-mobile-video-controls .jump-timing-input:focus {
        border-color: var(--jump-chrome-accent-border);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.04),
            0 0 0 2px var(--jump-chrome-accent-soft);
        color: var(--jump-chrome-accent);
    }

    body.app-mode-jump .jump-mobile-video-controls .jump-timing-input-wrap .jump-timing-unit,
    body.app-mode-sidejump .jump-mobile-video-controls .jump-timing-input-wrap .jump-timing-unit {
        right: 10px;
        font-size: 0.74rem;
    }

    body.app-mode-jump .jump-mobile-video-controls .jump-timing-toggle-card,
    body.app-mode-sidejump .jump-mobile-video-controls .jump-timing-toggle-card {
        padding: 8px 10px;
        border-radius: var(--jump-chrome-r-card, 11px);
        border: 1px solid rgba(148, 163, 184, 0.12);
        background: rgba(6, 10, 20, 0.2);
        box-shadow: none;
    }

    body.app-mode-jump .jump-mobile-video-controls .jump-timing-toggle-head .jump-timing-label,
    body.app-mode-sidejump .jump-mobile-video-controls .jump-timing-toggle-head .jump-timing-label {
        font-size: 0.72rem;
        letter-spacing: 0.02em;
        text-transform: none;
        max-width: calc(100% - 52px);
        color: var(--text-primary);
    }

    body.app-mode-jump .jump-mobile-video-controls .jump-timing-toggle-hint,
    body.app-mode-sidejump .jump-mobile-video-controls .jump-timing-toggle-hint {
        margin-top: 5px;
        font-size: 0.68rem;
        line-height: 1.35;
    }

    body.app-mode-jump .jump-mobile-video-controls .toggle-switch,
    body.app-mode-sidejump .jump-mobile-video-controls .toggle-switch {
        width: 36px;
        height: 20px;
        border-radius: 999px;
        border: 1px solid rgba(148, 163, 184, 0.2);
    }

    body.app-mode-jump .jump-mobile-video-controls .toggle-label input:checked + .toggle-switch,
    body.app-mode-sidejump .jump-mobile-video-controls .toggle-label input:checked + .toggle-switch {
        border-color: var(--jump-chrome-accent-border);
        background: var(--jump-chrome-accent-soft);
    }

    body.app-mode-jump .jump-mobile-video-controls .toggle-label input:checked + .toggle-switch::after,
    body.app-mode-sidejump .jump-mobile-video-controls .toggle-label input:checked + .toggle-switch::after {
        box-shadow: 0 0 6px var(--jump-chrome-accent-soft);
    }

    body.app-mode-jump .jump-mobile-video-cta,
    body.app-mode-sidejump .jump-mobile-video-cta {
        display: none;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        align-self: stretch;
        flex: 0 0 auto;
        pointer-events: auto;
        box-sizing: border-box;
    }

    body.app-mode-jump .jump-mobile-video-cta:not([hidden]),
    body.app-mode-sidejump .jump-mobile-video-cta:not([hidden]) {
        display: block;
    }

    body.app-mode-jump .jump-mobile-video-cta .btn-toggle-jump,
    body.app-mode-sidejump .jump-mobile-video-cta .btn-toggle-jump {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        min-height: 46px;
        height: auto;
        margin: 0 !important;
        padding: 11px 14px;
        box-sizing: border-box;
        border-radius: 0 0 calc(var(--jump-chrome-r-shell, 16px) - 1px) calc(var(--jump-chrome-r-shell, 16px) - 1px) !important;
        border: none !important;
        border-top: 1px solid rgba(0, 217, 255, 0.14) !important;
        font-size: 0.8rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #e8f8ff;
        background: var(--jump-chrome-cta-bg) !important;
        box-shadow: none !important;
        transition:
            background 0.2s var(--ease),
            color 0.2s var(--ease),
            box-shadow 0.2s var(--ease);
    }

    body.app-mode-sidejump .jump-mobile-video-cta .btn-toggle-jump {
        color: #f3e8ff;
        border-top-color: rgba(192, 132, 252, 0.14) !important;
        background: rgba(22, 16, 34, 0.22) !important;
        box-shadow: none !important;
    }

    body.app-mode-jump .jump-mobile-video-cta .btn-toggle-jump:active:not(:disabled),
    body.app-mode-sidejump .jump-mobile-video-cta .btn-toggle-jump:active:not(:disabled) {
        transform: scale(0.98);
    }

    body.app-mode-jump .jump-mobile-video-cta .btn-toggle-jump.active,
    body.app-mode-sidejump .jump-mobile-video-cta .btn-toggle-jump.active {
        background: linear-gradient(180deg, rgba(255, 82, 82, 0.22) 0%, rgba(255, 82, 82, 0.1) 100%) !important;
        border: none !important;
        border-top: 1px solid rgba(255, 82, 82, 0.28) !important;
        color: #fff5f5 !important;
        box-shadow: inset 0 1px 0 rgba(255, 120, 120, 0.12) !important;
    }

    /* After Start Test: timing panel hidden — full-width stop button only */
    body.app-mode-jump .video-frame-bottom-chrome--jump-session .jump-mobile-video-cta .btn-toggle-jump,
    body.app-mode-sidejump .video-frame-bottom-chrome--jump-session .jump-mobile-video-cta .btn-toggle-jump {
        border-radius: var(--jump-chrome-r-shell, 16px) !important;
        border-top: none !important;
    }

    body.app-mode-jump .video-frame-bottom-chrome--jump-session:not(:has(.jump-mobile-video-controls:not([hidden]))),
    body.app-mode-sidejump .video-frame-bottom-chrome--jump-session:not(:has(.jump-mobile-video-controls:not([hidden]))) {
        border: 1px solid var(--jump-chrome-accent-border, rgba(0, 217, 255, 0.28));
    }

    body.app-mode-jump .video-frame-bottom-chrome--jump-session .jump-mobile-video-cta .btn-toggle-jump.active,
    body.app-mode-sidejump .video-frame-bottom-chrome--jump-session .jump-mobile-video-cta .btn-toggle-jump.active {
        border-top-color: rgba(255, 82, 82, 0.55) !important;
    }

    body.app-mode-jump .jump-mobile-video-cta .btn-toggle-jump:disabled,
    body.app-mode-sidejump .jump-mobile-video-cta .btn-toggle-jump:disabled {
        opacity: 0.42;
    }

    /* Swipes on the preview scroll .app-wrapper, not trapped in the stage */
    body.app-mode-jump:not(.reaction-pseudo-stage-fs) .section-video,
    body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .section-video,
    body.app-mode-jump:not(.reaction-pseudo-stage-fs) .reaction-cine-root,
    body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .reaction-cine-root,
    body.app-mode-jump:not(.reaction-pseudo-stage-fs) .video-merged-container,
    body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .video-merged-container,
    body.app-mode-jump:not(.reaction-pseudo-stage-fs) .video-merged-frame,
    body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .video-merged-frame,
    body.app-mode-jump:not(.reaction-pseudo-stage-fs) .video-raw-frame,
    body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .video-raw-frame,
    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .section-video,
    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .reaction-cine-root,
    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .video-merged-container,
    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .video-merged-frame,
    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .video-raw-frame {
        touch-action: pan-y;
    }

    body.app-mode-jump:not(.reaction-pseudo-stage-fs) .section-video::after,
    body.app-mode-sidejump:not(.reaction-pseudo-stage-fs) .section-video::after,
    body.app-mode-reaction:not(.reaction-pseudo-stage-fs) .section-video::after {
        content: '';
        display: block;
        height: max(12px, env(safe-area-inset-bottom, 0px));
        flex: none;
    }

    body.app-mode-jump #videoMobileTestJumpHint, body.app-mode-sidejump #videoMobileTestJumpHint {
        display: none !important;
    }

    /* Jump mobile: mesh-preview dim only (syncSmartDarkOverlayForSession) */
    body.app-mode-jump .smart-dark-overlay, body.app-mode-sidejump .smart-dark-overlay {
        display: block !important;
        visibility: visible !important;
        pointer-events: none !important;
        opacity: 0;
    }

    body.app-mode-jump .smart-dark-overlay.active, body.app-mode-sidejump .smart-dark-overlay.active {
        opacity: 1 !important;
        background: rgba(0, 0, 0, 0.2) !important;
    }

    /* Jump video label: solid chip only — backdrop-filter can paint a full-frame black veil on Android. */
    body.app-mode-jump .video-frame-bottom-chrome:not(.video-frame-bottom-chrome--jump-cta),
    body.app-mode-sidejump .video-frame-bottom-chrome:not(.video-frame-bottom-chrome--jump-cta),
    body.app-mode-jump .video-frame-bottom-chrome:not(.video-frame-bottom-chrome--jump-cta) .frame-label,
    body.app-mode-sidejump .video-frame-bottom-chrome:not(.video-frame-bottom-chrome--jump-cta) .frame-label {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(10, 14, 26, 0.88) !important;
        box-shadow: none !important;
        isolation: isolate;
    }

    body.app-mode-jump #jumpToggleJumpHome:empty, body.app-mode-sidejump #jumpToggleJumpHome:empty {
        display: none;
        margin: 0;
    }

    /* Minimal GPU path: inference only — no skeleton canvas / dim / on-video chips */
    body.video-graphics-minimal #outputCanvas,
    body.video-graphics-minimal .video-skeleton-frame canvas {
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.video-graphics-minimal .smart-dark-overlay {
        display: none !important;
        opacity: 0 !important;
    }

    body.video-graphics-minimal #mobileJumpCountBadge,
    body.video-graphics-minimal #mobileTestTimeBadge,
    body.video-graphics-minimal #mpInferenceBadge {
        display: none !important;
        visibility: hidden !important;
    }

    body.video-graphics-minimal #fpsBadgeOverlay {
        display: flex !important;
        visibility: visible !important;
    }

    body.video-graphics-minimal .video-placeholder#placeholderSkeleton {
        display: none !important;
    }

    body.video-graphics-minimal.video-graphics-landmarks-on #outputCanvas,
    body.video-graphics-minimal.video-graphics-landmarks-on .video-skeleton-frame canvas {
        visibility: visible !important;
        pointer-events: none !important;
    }

    body.app-mode-reaction.reaction-zone-edit-active #outputCanvas,
    body.app-mode-reaction.reaction-zone-edit-active.video-graphics-landmarks-on #outputCanvas {
        pointer-events: auto !important;
        touch-action: none !important;
        z-index: 20;
    }

    body.video-graphics-minimal.video-graphics-landmarks-on .video-placeholder#placeholderSkeleton {
        display: none !important;
    }

    /* ── Compact header on phone test modes → taller camera stage ── */
    body.app-mode-jump .app-header,
    body.app-mode-sidejump .app-header,
    body.app-mode-reaction .app-header {
        padding: 5px 8px 5px !important;
        gap: 5px !important;
        border-radius: 10px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    }

    body.app-mode-jump .header-brand,
    body.app-mode-sidejump .header-brand,
    body.app-mode-reaction .header-brand {
        gap: 7px;
        padding-bottom: 4px !important;
    }

    body.app-mode-jump .brand-glow-ring,
    body.app-mode-sidejump .brand-glow-ring,
    body.app-mode-reaction .brand-glow-ring {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    body.app-mode-jump .brand-logo--header,
    body.app-mode-sidejump .brand-logo--header,
    body.app-mode-reaction .brand-logo--header {
        width: 22px;
        height: 22px;
    }

    body.app-mode-jump .brand-text h1,
    body.app-mode-sidejump .brand-text h1,
    body.app-mode-reaction .brand-text h1 {
        font-size: 0.9rem;
        line-height: 1.15;
    }

    body.app-mode-jump .brand-version,
    body.app-mode-sidejump .brand-version,
    body.app-mode-reaction .brand-version {
        display: none;
    }

    body.app-mode-jump .brand-role-badge,
    body.app-mode-sidejump .brand-role-badge,
    body.app-mode-reaction .brand-role-badge {
        font-size: 0.5rem;
        padding: 2px 5px;
        border-radius: 5px;
    }

    body.app-mode-jump .header-chips,
    body.app-mode-sidejump .header-chips,
    body.app-mode-reaction .header-chips {
        gap: 5px !important;
    }

    body.app-mode-jump.platform-handset .header-chips > .chip:not(.chip-action),
    body.app-mode-sidejump.platform-handset .header-chips > .chip:not(.chip-action),
    body.app-mode-reaction.platform-handset .header-chips > .chip:not(.chip-action) {
        min-height: 32px !important;
        padding: 4px 10px !important;
        padding-inline-end: 2.25rem !important;
        border-radius: 8px;
        gap: 4px 6px;
    }

    body.app-mode-jump.platform-handset .header-chips > .chip:not(.chip-action) .chip-label,
    body.app-mode-sidejump.platform-handset .header-chips > .chip:not(.chip-action) .chip-label,
    body.app-mode-reaction.platform-handset .header-chips > .chip:not(.chip-action) .chip-label {
        font-size: 0.66rem;
    }

    body.app-mode-jump.platform-handset .header-chips > .chip:not(.chip-action) .chip-value,
    body.app-mode-sidejump.platform-handset .header-chips > .chip:not(.chip-action) .chip-value,
    body.app-mode-reaction.platform-handset .header-chips > .chip:not(.chip-action) .chip-value {
        font-size: 0.7rem;
    }

    body.app-mode-jump.platform-handset .header-chips > .chip:not(.chip-action) .chip-inference-badge,
    body.app-mode-sidejump.platform-handset .header-chips > .chip:not(.chip-action) .chip-inference-badge,
    body.app-mode-reaction.platform-handset .header-chips > .chip:not(.chip-action) .chip-inference-badge {
        font-size: 0.6rem;
        padding: 0.08rem 0.35rem;
    }

    body.app-mode-jump.platform-handset .header-chips > .chip:not(.chip-action) .chip-pose-info-btn,
    body.app-mode-sidejump.platform-handset .header-chips > .chip:not(.chip-action) .chip-pose-info-btn,
    body.app-mode-reaction.platform-handset .header-chips > .chip:not(.chip-action) .chip-pose-info-btn {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
        inset-inline-end: 6px;
    }

    body.app-mode-jump .chip-action,
    body.app-mode-sidejump .chip-action,
    body.app-mode-reaction .chip-action {
        min-height: 32px !important;
        padding: 5px 8px !important;
        border-radius: 8px;
        gap: 4px;
    }

    body.app-mode-jump .chip-action .chip-value,
    body.app-mode-sidejump .chip-action .chip-value,
    body.app-mode-reaction .chip-action .chip-value,
    body.app-mode-jump #btnCoachAthleteList .chip-value,
    body.app-mode-sidejump #btnCoachAthleteList .chip-value,
    body.app-mode-reaction #btnCoachAthleteList .chip-value {
        font-size: 0.7rem;
    }

    body.app-mode-jump .chip-action .chip-icon,
    body.app-mode-sidejump .chip-action .chip-icon,
    body.app-mode-reaction .chip-action .chip-icon {
        font-size: 0.82rem;
    }

    body.group-test-active.app-mode-jump .app-header,
    body.group-test-active.app-mode-sidejump .app-header,
    body.group-test-active.app-mode-reaction .app-header {
        padding: 5px 8px !important;
        gap: 5px !important;
    }

    body.group-test-active.app-mode-jump .header-brand,
    body.group-test-active.app-mode-sidejump .header-brand,
    body.group-test-active.app-mode-reaction .header-brand {
        padding-bottom: 4px !important;
    }

    body.group-test-active.app-mode-jump .group-test-bar,
    body.group-test-active.app-mode-sidejump .group-test-bar,
    body.group-test-active.app-mode-reaction .group-test-bar {
        padding: 7px 8px;
        border-radius: 10px;
    }

    body.group-test-active.app-mode-jump .group-test-bar__row--athlete,
    body.group-test-active.app-mode-sidejump .group-test-bar__row--athlete,
    body.group-test-active.app-mode-reaction .group-test-bar__row--athlete {
        margin-top: 6px;
        padding-top: 6px;
    }

    body.group-test-active.app-mode-jump .group-test-bar__counter,
    body.group-test-active.app-mode-sidejump .group-test-bar__counter,
    body.group-test-active.app-mode-reaction .group-test-bar__counter {
        padding: 5px 8px;
        font-size: 0.72rem;
        min-height: 0;
    }

    body.group-test-active.app-mode-jump .group-test-bar__nav-btn,
    body.group-test-active.app-mode-sidejump .group-test-bar__nav-btn,
    body.group-test-active.app-mode-reaction .group-test-bar__nav-btn {
        width: 30px;
        height: 30px;
        font-size: 0.9rem;
    }

    body.group-test-active.app-mode-jump .group-test-bar__roster-btn,
    body.group-test-active.app-mode-sidejump .group-test-bar__roster-btn,
    body.group-test-active.app-mode-reaction .group-test-bar__roster-btn {
        width: 28px;
        height: 28px;
    }

    body.group-test-active.app-mode-jump .group-test-bar__tag-name,
    body.group-test-active.app-mode-sidejump .group-test-bar__tag-name,
    body.group-test-active.app-mode-reaction .group-test-bar__tag-name {
        font-size: 0.74rem;
    }

    body.group-test-active.app-mode-jump .group-test-bar__field--athlete .group-test-bar__value,
    body.group-test-active.app-mode-sidejump .group-test-bar__field--athlete .group-test-bar__value,
    body.group-test-active.app-mode-reaction .group-test-bar__field--athlete .group-test-bar__value {
        font-size: 0.82rem;
        line-height: 1.25;
    }

    /* ── Viewport fill: camera stage + label use all space below header (no page scroll) ── */
    body.video-mobile-viewport-fill:not(.reaction-pseudo-stage-fs) .app-wrapper > .app-header,
    body.video-mobile-viewport-fill:not(.reaction-pseudo-stage-fs) .app-wrapper > .notice-banner {
        flex: 0 0 auto;
    }

    body.video-mobile-viewport-fill:not(.reaction-pseudo-stage-fs) .app-wrapper > .main-content-layout {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    body.video-mobile-viewport-fill:not(.reaction-pseudo-stage-fs) .main-content-layout,
    body.video-mobile-viewport-fill:not(.reaction-pseudo-stage-fs) .content-main,
    body.video-mobile-viewport-fill:not(.reaction-pseudo-stage-fs) .section-video {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        overflow: hidden !important;
    }

    body.video-mobile-viewport-fill .section-video::after {
        display: none !important;
        height: 0 !important;
        content: none !important;
    }

    body.video-mobile-viewport-fill:not(.reaction-pseudo-stage-fs) #reactionCineRoot {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        overflow: hidden !important;
    }

    body.video-mobile-viewport-fill:not(.reaction-pseudo-stage-fs) .video-merged-container,
    body.video-mobile-viewport-fill:not(.reaction-pseudo-stage-fs) .video-dual-layout {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        overflow: hidden !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    body.video-mobile-viewport-fill:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame,
    body.video-mobile-viewport-fill:not(.reaction-pseudo-stage-fs) .video-raw-frame.video-merged-frame.video-stage--intrinsic-aspect,
    body.video-mobile-viewport-fill:not(.reaction-pseudo-stage-fs).video-mobile-setup-in-chrome .video-raw-frame.video-merged-frame,
    body.video-mobile-viewport-fill:not(.reaction-pseudo-stage-fs).app-mode-jump .video-raw-frame.video-merged-frame,
    body.video-mobile-viewport-fill:not(.reaction-pseudo-stage-fs).app-mode-sidejump .video-raw-frame.video-merged-frame,
    body.video-mobile-viewport-fill:not(.reaction-pseudo-stage-fs).app-mode-reaction .video-raw-frame.video-merged-frame {
        flex: 1 1 0 !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: none !important;
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: unset !important;
        position: relative !important;
    }

    body.video-mobile-viewport-fill #videoMobileTestHost:not([hidden]) {
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        max-height: min(36vh, 260px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Reaction HOME / live test — hide nav chrome; keep settings + edit zones on video */
    body.app-mode-reaction.reaction-mobile-test-focus #videoMobileTabsNav,
    body.app-mode-reaction.reaction-mobile-test-focus .reaction-mobile-pretest-wizard,
    body.app-mode-reaction.reaction-mobile-test-focus .reaction-mobile-home-prompt,
    body.app-mode-reaction.reaction-mobile-test-focus #videoMobileTestHost,
    body.app-mode-reaction.reaction-mobile-test-focus #btnVideoMobileNext,
    body.app-mode-reaction.reaction-mobile-test-focus .video-mobile-reaction-guide {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.app-mode-reaction.reaction-mobile-test-focus #btnVideoMobileCameraSettings,
    body.app-mode-reaction.reaction-mobile-test-focus .video-raw-frame-console__settings-btn,
    body.app-mode-reaction.reaction-mobile-test-focus #btnVideoMobileReactionEditZones,
    body.app-mode-reaction.reaction-mobile-test-focus .video-raw-frame-console__edit-zones-btn {
        display: flex !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body.app-mode-reaction.reaction-mobile-test-focus #videoMobileStageChrome,
    body.app-mode-reaction.reaction-mobile-test-focus .video-frame-bottom-chrome {
        display: block !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body.app-mode-reaction.reaction-mobile-test-focus #rawFrameLabel .video-desktop-frame-label-part,
    body.app-mode-reaction.reaction-mobile-test-focus #rawFrameLabel .frame-label-text,
    body.app-mode-reaction.reaction-mobile-test-focus #rawFrameLabel .frame-label-dot,
    body.app-mode-reaction.reaction-mobile-test-focus #rawFrameLabel .frame-label-icon,
    body.app-mode-reaction.reaction-mobile-test-focus #rawFrameLabel .video-mobile-stage-label__meta {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.app-mode-reaction.reaction-mobile-test-focus #rawFrameLabel {
        display: flex !important;
        visibility: visible !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        position: absolute !important;
        inset: auto !important;
        top: max(8px, env(safe-area-inset-top, 0px)) !important;
        right: max(8px, env(safe-area-inset-right, 0px)) !important;
        left: auto !important;
        bottom: auto !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        pointer-events: none !important;
        z-index: 100003 !important;
    }

    body.app-mode-reaction.reaction-mobile-test-focus .video-mobile-setup-dock--open #videoPanelSetup,
    body.app-mode-reaction.reaction-mobile-test-focus .video-mobile-setup-dock--open #videoPanelSetup .camera-select-row,
    body.app-mode-reaction.reaction-mobile-test-focus .video-mobile-setup-dock--open #videoPanelSetup .camera-select,
    body.app-mode-reaction.reaction-mobile-test-focus .video-mobile-setup-dock--open #videoPanelSetup .video-setup-sheet-controls,
    body.app-mode-reaction.reaction-mobile-test-focus .video-mobile-setup-dock--open #videoPanelSetup .video-view-options,
    body.app-mode-reaction.reaction-mobile-test-focus .video-mobile-setup-dock--open #videoPanelSetup .video-view-options--orient,
    body.app-mode-reaction.reaction-mobile-test-focus .video-mobile-setup-dock--open #videoPanelSetup .video-setup-orient-tools {
        display: flex !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    body.reaction-pseudo-stage-fs.reaction-mobile-test-focus .btn-exit-mobile {
        display: flex !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* Live test focus — only Stop on video; hide setup chrome */
    body.jump-mobile-test-focus #videoMobileTabsNav,
    body.jump-mobile-test-focus #btnVideoMobileCameraSettings,
    body.jump-mobile-test-focus #videoMobileStageChrome,
    body.jump-mobile-test-focus #rawFrameLabel,
    body.jump-mobile-test-focus .jump-mobile-video-controls,
    body.jump-mobile-test-focus .video-mobile-jump-guide,
    body.jump-mobile-test-focus .video-mobile-quick-guide,
    body.jump-mobile-test-focus #btnVideoMobileNext {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.jump-mobile-test-focus .jump-mobile-video-cta {
        display: block !important;
        visibility: visible !important;
        pointer-events: auto !important;
        width: 100% !important;
    }

    body.jump-mobile-test-focus .jump-mobile-video-cta .btn-toggle-jump {
        display: flex !important;
        visibility: visible !important;
        pointer-events: auto !important;
        width: 100% !important;
    }

    body.jump-mobile-test-focus .video-frame-bottom-chrome--jump-session,
    body.jump-mobile-test-focus.video-mobile-setup-in-chrome .video-raw-frame > .video-frame-bottom-chrome--jump-session {
        inset: auto !important;
        top: auto !important;
        height: auto !important;
        justify-content: flex-end !important;
        align-items: stretch !important;
    }

    /*
     * Pseudo fullscreen (same path as Reaction): anchor Stop Test to bottom of camera frame.
     * Non-FS jump chrome rules use :not(.reaction-pseudo-stage-fs) — mirror them here.
     */
    body.reaction-pseudo-stage-fs.video-mobile-setup-in-chrome.app-mode-jump .video-raw-frame > .video-frame-bottom-chrome.video-frame-bottom-chrome--jump-cta,
    body.reaction-pseudo-stage-fs.video-mobile-setup-in-chrome.app-mode-sidejump .video-raw-frame > .video-frame-bottom-chrome.video-frame-bottom-chrome--jump-cta,
    body.reaction-pseudo-stage-fs.video-mobile-setup-in-chrome.app-mode-jump .video-raw-frame > .video-frame-bottom-chrome.video-frame-bottom-chrome--jump-session,
    body.reaction-pseudo-stage-fs.video-mobile-setup-in-chrome.app-mode-sidejump .video-raw-frame > .video-frame-bottom-chrome.video-frame-bottom-chrome--jump-session,
    body.reaction-pseudo-stage-fs.app-mode-jump .video-raw-frame > .video-frame-bottom-chrome.video-frame-bottom-chrome--jump-cta,
    body.reaction-pseudo-stage-fs.app-mode-sidejump .video-raw-frame > .video-frame-bottom-chrome.video-frame-bottom-chrome--jump-cta,
    body.reaction-pseudo-stage-fs.app-mode-jump .video-raw-frame > .video-frame-bottom-chrome.video-frame-bottom-chrome--jump-session,
    body.reaction-pseudo-stage-fs.app-mode-sidejump .video-raw-frame > .video-frame-bottom-chrome.video-frame-bottom-chrome--jump-session,
    body.reaction-pseudo-stage-fs.jump-mobile-test-focus.app-mode-jump .video-raw-frame > .video-frame-bottom-chrome.video-frame-bottom-chrome--jump-session,
    body.reaction-pseudo-stage-fs.jump-mobile-test-focus.app-mode-sidejump .video-raw-frame > .video-frame-bottom-chrome.video-frame-bottom-chrome--jump-session {
        --jump-chrome-r-shell: 16px;
        position: absolute !important;
        inset: auto !important;
        top: auto !important;
        bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
        left: max(12px, env(safe-area-inset-left, 0px)) !important;
        right: max(12px, env(safe-area-inset-right, 0px)) !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        transform: none !important;
        margin: 0 !important;
        gap: 0 !important;
        align-items: stretch !important;
        justify-content: flex-end !important;
        flex-direction: column !important;
        pointer-events: auto !important;
        box-sizing: border-box;
        overflow: hidden;
        border-radius: var(--jump-chrome-r-shell);
        border: 1px solid rgba(0, 217, 255, 0.14);
        background: var(--jump-chrome-panel-bg, rgba(8, 12, 24, 0.88));
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        isolation: isolate;
        z-index: 24;
    }

    body.reaction-pseudo-stage-fs.app-mode-sidejump .video-raw-frame > .video-frame-bottom-chrome.video-frame-bottom-chrome--jump-cta,
    body.reaction-pseudo-stage-fs.app-mode-sidejump .video-raw-frame > .video-frame-bottom-chrome.video-frame-bottom-chrome--jump-session {
        border-color: rgba(192, 132, 252, 0.18);
    }

    body.reaction-pseudo-stage-fs.app-mode-jump .video-raw-frame > .video-frame-bottom-chrome .jump-mobile-video-cta,
    body.reaction-pseudo-stage-fs.app-mode-sidejump .video-raw-frame > .video-frame-bottom-chrome .jump-mobile-video-cta {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        align-self: stretch !important;
    }

    body.reaction-pseudo-stage-fs.app-mode-jump .video-raw-frame > .video-frame-bottom-chrome .jump-mobile-video-cta .btn-toggle-jump,
    body.reaction-pseudo-stage-fs.app-mode-sidejump .video-raw-frame > .video-frame-bottom-chrome .jump-mobile-video-cta .btn-toggle-jump {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* Hide in-frame chrome during live test / pseudo-FS — keep Connect visible when camera is off */
    body.reaction-pseudo-stage-fs.video-mobile-camera-live #videoMobileStageChrome,
    body.reaction-pseudo-stage-fs.jump-mobile-test-focus #videoMobileStageChrome {
        display: none !important;
    }

    /* Jump post-start stand gate — calibrate then auto countdown */
    body.app-mode-jump .jump-mobile-ready-prompt,
    body.app-mode-sidejump .jump-mobile-ready-prompt {
        position: absolute;
        inset: 0;
        z-index: 21;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
        box-sizing: border-box;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    body.app-mode-jump .jump-mobile-ready-prompt.is-visible,
    body.app-mode-sidejump .jump-mobile-ready-prompt.is-visible {
        opacity: 1;
    }

    body.app-mode-jump .jump-mobile-ready-prompt[hidden],
    body.app-mode-sidejump .jump-mobile-ready-prompt[hidden] {
        display: none !important;
    }

    body.app-mode-jump .jump-mobile-ready-prompt__card,
    body.app-mode-sidejump .jump-mobile-ready-prompt__card {
        max-width: min(320px, 92%);
        padding: 14px 16px 16px;
        border-radius: 14px;
        text-align: center;
        border: 1px solid rgba(0, 217, 255, 0.42);
        background: rgba(8, 12, 24, 0.92);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
    }

    body.app-mode-jump .jump-mobile-ready-prompt--ready .jump-mobile-ready-prompt__card,
    body.app-mode-sidejump .jump-mobile-ready-prompt--ready .jump-mobile-ready-prompt__card,
    body.app-mode-jump .jump-mobile-ready-prompt--pause .jump-mobile-ready-prompt__card,
    body.app-mode-sidejump .jump-mobile-ready-prompt--pause .jump-mobile-ready-prompt__card,
    body.app-mode-jump .jump-mobile-ready-prompt--calibrating .jump-mobile-ready-prompt__card,
    body.app-mode-sidejump .jump-mobile-ready-prompt--calibrating .jump-mobile-ready-prompt__card {
        border-color: rgba(52, 211, 153, 0.55);
        box-shadow:
            0 12px 32px rgba(0, 0, 0, 0.55),
            0 0 0 1px rgba(52, 211, 153, 0.2);
    }

    body.app-mode-jump .jump-mobile-ready-prompt__tick,
    body.app-mode-sidejump .jump-mobile-ready-prompt__tick {
        display: block;
        width: 2.5rem;
        height: 2.5rem;
        margin: 0 auto 8px;
        border-radius: 50%;
        line-height: 2.5rem;
        font-size: 1.35rem;
        font-weight: 800;
        color: #052e1a;
        background: linear-gradient(135deg, #34d399, #6ee7b7);
        box-shadow: 0 0 18px rgba(52, 211, 153, 0.45);
    }

    body.app-mode-jump .jump-mobile-ready-prompt__tick[hidden],
    body.app-mode-sidejump .jump-mobile-ready-prompt__tick[hidden] {
        display: none !important;
    }

    body.app-mode-jump .jump-mobile-ready-prompt__badge,
    body.app-mode-sidejump .jump-mobile-ready-prompt__badge {
        display: inline-block;
        margin-bottom: 8px;
        padding: 3px 10px;
        border-radius: 999px;
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #7dd3fc;
        background: rgba(0, 217, 255, 0.12);
        border: 1px solid rgba(0, 217, 255, 0.28);
    }

    body.app-mode-jump .jump-mobile-ready-prompt--ready .jump-mobile-ready-prompt__badge,
    body.app-mode-sidejump .jump-mobile-ready-prompt--ready .jump-mobile-ready-prompt__badge,
    body.app-mode-jump .jump-mobile-ready-prompt--pause .jump-mobile-ready-prompt__badge,
    body.app-mode-sidejump .jump-mobile-ready-prompt--pause .jump-mobile-ready-prompt__badge {
        color: #6ee7b7;
        background: rgba(52, 211, 153, 0.12);
        border-color: rgba(52, 211, 153, 0.35);
    }

    body.app-mode-jump .jump-mobile-ready-prompt__title,
    body.app-mode-sidejump .jump-mobile-ready-prompt__title {
        margin: 0 0 6px;
        font-size: 1rem;
        font-weight: 800;
        color: #f8fafc;
    }

    body.app-mode-jump .jump-mobile-ready-prompt__hint,
    body.app-mode-sidejump .jump-mobile-ready-prompt__hint {
        margin: 0;
        font-size: 0.78rem;
        line-height: 1.45;
        color: rgba(226, 232, 240, 0.88);
    }

    body.app-mode-jump .jump-mobile-ready-prompt__meter,
    body.app-mode-sidejump .jump-mobile-ready-prompt__meter {
        margin-top: 12px;
        height: 8px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.12);
        overflow: hidden;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
    }

    body.app-mode-jump .jump-mobile-ready-prompt__meter-bar,
    body.app-mode-sidejump .jump-mobile-ready-prompt__meter-bar {
        display: block;
        height: 100%;
        width: 10%;
        border-radius: inherit;
        background: linear-gradient(90deg, #00d9ff 0%, #22d3ee 45%, #34d399 100%);
        background-size: 200% 100%;
        transition: width 0.32s cubic-bezier(0.22, 1, 0.36, 1);
        box-shadow: 0 0 10px rgba(0, 217, 255, 0.45);
        animation: jump-mobile-ready-meter-shimmer 1.6s ease-in-out infinite;
    }

    body.app-mode-jump .jump-mobile-ready-prompt--calibrating .jump-mobile-ready-prompt__meter-bar,
    body.app-mode-sidejump .jump-mobile-ready-prompt--calibrating .jump-mobile-ready-prompt__meter-bar {
        animation: jump-mobile-ready-meter-shimmer 1.2s ease-in-out infinite;
    }

    body.app-mode-jump .jump-mobile-ready-prompt__meter--done .jump-mobile-ready-prompt__meter-bar,
    body.app-mode-sidejump .jump-mobile-ready-prompt__meter--done .jump-mobile-ready-prompt__meter-bar {
        background: linear-gradient(90deg, #22c55e 0%, #4ade80 55%, #86efac 100%);
        background-size: 100% 100%;
        animation: none;
        box-shadow: 0 0 12px rgba(52, 211, 153, 0.55);
    }

    body.app-mode-jump .jump-mobile-ready-prompt__tick--done,
    body.app-mode-sidejump .jump-mobile-ready-prompt__tick--done {
        animation: jump-mobile-ready-tick-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    @keyframes jump-mobile-ready-meter-shimmer {
        0% { background-position: 100% 0; }
        100% { background-position: -100% 0; }
    }

    @keyframes jump-mobile-ready-tick-pop {
        0% {
            opacity: 0;
            transform: scale(0.55);
        }
        70% {
            transform: scale(1.08);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    }

    body.app-mode-jump .jump-mobile-video-cta .btn-toggle-jump--pretest-wait,
    body.app-mode-sidejump .jump-mobile-video-cta .btn-toggle-jump--pretest-wait {
        opacity: 0.55;
        cursor: not-allowed;
    }

}