/* ═══════════════════════════════════════════════════
   Sportify AI — Ai Tests v1.0
   🎨 Cyan / Electric Blue — Centered Futuristic UI
   Single Merged Video + Smart Dark Overlay
   ═══════════════════════════════════════════════════ */

/* ═══ Variables ═══ */
:root {
    --primary-cyan: #00D9FF;
    --primary-cyan-dark: #00B8D4;
    --electric-blue: #0066FF;
    --electric-blue-dark: #0052CC;
    --dark-bg: #0a0e1a;
    --dark-bg-light: #141824;
    --dark-bg-lighter: #1a1f2e;
    --dark-bg-card: #111627;
    --text-primary: #e8ecf0;
    --text-secondary: #a0a8b8;
    --text-muted: #6b7280;
    --test-select-muted: #94a3b8;
    --border-color: rgba(0, 217, 255, 0.2);
    --border-subtle: rgba(255, 255, 255, 0.06);
    --glow-cyan: rgba(0, 217, 255, 0.4);
    --glow-blue: rgba(0, 102, 255, 0.4);
    --success: #00e676;
    --success-dim: rgba(0, 230, 118, 0.1);
    --warning: #ffab40;
    --warning-dim: rgba(255, 171, 64, 0.1);
    --error: #ff5252;
    --error-dim: rgba(255, 82, 82, 0.1);
    --info: #42a5f5;
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 20px;
    --font: 'Inter', system-ui, -apple-system, sans-serif;
    --mono: 'JetBrains Mono', 'Fira Code', monospace;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    /* Video stage caps — bump here for taller camera/analysis widgets */
    --video-stage-vh-dual: 92vh;
    --video-stage-px-dual: 880px;
    --video-stage-vh-jump: 88vh;
    --video-stage-px-jump: 840px;
    --video-stage-vh-land: 88vh;
    --video-stage-px-land: 1040px;
    --video-stage-vh-portrait: 94vh;
    --video-stage-px-portrait: 1080px;
    --video-stage-vh-compact: 84vh;
    --video-stage-px-compact: 780px;
    --video-stage-vh-wide: 86vh;
    --video-stage-px-wide: 1040px;
}

/* ═══ Reset ═══ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: var(--font);
    background: var(--dark-bg);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* Test picker open: stop page behind overlay from stealing touch scroll (mobile) */
body.test-select-overlay-open {
    overflow: hidden;
    overscroll-behavior: none;
}

/* Narrow viewports: keep form controls at 16px so iOS/Android don’t auto-zoom on focus while typing. */
@media (max-width: 768px) {
    input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='color']):not([type='file']):not([type='hidden']):not([type='button']):not([type='submit']):not([type='reset']),
    textarea,
    select {
        font-size: 16px !important;
    }

    [contenteditable='true'] {
        font-size: 16px !important;
    }
}


/* ── Grid Background — Futuristic Grid Pattern ── */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgb(7, 36, 50) 3px, transparent 3px),
        linear-gradient(90deg,rgb(7, 36, 50)  3px, transparent 3px),
        linear-gradient(rgb(7, 36, 50) 3px, transparent 3px),
        linear-gradient(90deg, rgb(7, 36, 50) 3px , transparent 3px);
    background-size:
        200px 200px,
        200px 200px,
        50px 50px,
        50px 50px;
    pointer-events: none;
    z-index: 0;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.25) 50%, transparent 80%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.25) 50%, transparent 80%);
    animation: gridShimmer 12s ease-in-out infinite alternate;
}

@keyframes gridShimmer {
    0%   { opacity: 0.5; }
    50%  { opacity: 0.85; }
    100% { opacity: 0.6; }
}



/* ═══════════════════════════════════════════
   TEST SELECTION OVERLAY (First Load)
   ═══════════════════════════════════════════ */

.test-select-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
    touch-action: pan-y;
    transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), visibility 0.45s var(--ease);
    opacity: 1;
    visibility: visible;
}

.test-select-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    transform: scale(1.02);
    pointer-events: none;
}

/* Blur on a non-scrolling layer — iOS Safari often blocks scroll on backdrop-filter parents */
.test-select-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 20% 0%, rgba(0, 217, 255, 0.14), transparent 55%),
                radial-gradient(circle at 80% 100%, rgba(0, 102, 255, 0.20), transparent 55%),
                rgba(3, 6, 18, 0.88);
    backdrop-filter: blur(22px) saturate(1.4);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
}

.test-select-scroll {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    height: 100%;
    max-height: 100dvh;
    max-height: 100vh;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    padding: 24px;
    padding-top: max(24px, env(safe-area-inset-top, 0px));
    padding-bottom: max(32px, env(safe-area-inset-bottom, 0px));
    padding-left: max(24px, env(safe-area-inset-left, 0px));
    padding-right: max(24px, env(safe-area-inset-right, 0px));
}

.test-select-panel {
    width: 100%;
    max-width: min(960px, calc(100vw - 12px));
    margin: 0 auto;
    background: rgba(13, 16, 32, 0.96);
    border-radius: 24px;
    border: 1px solid rgba(0, 217, 255, 0.25);
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.8),
        0 0 60px rgba(0, 217, 255, 0.2);
    padding: 26px 28px 26px;
    position: relative;
    overflow: hidden;
}

.test-select-panel::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: radial-gradient(circle at 0% 0%, rgba(0, 217, 255, 0.16), transparent 55%);
    opacity: 0.7;
    pointer-events: none;
}

.test-select-header {
    position: relative;
    z-index: 1;
    margin-bottom: 14px;
}

.test-select-panel.test-select-wizard-step-1 .test-select-header,
.test-select-panel.test-select-wizard-step-2 .test-select-header,
.test-select-panel.test-select-wizard-step-3 .test-select-header {
    margin-bottom: 10px;
}

.test-select-brand-row,
.test-select-brand-lockup {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

.test-select-brand-mark {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(0, 217, 255, 0.28);
    box-shadow: 0 0 16px rgba(0, 217, 255, 0.1);
}

.brand-logo {
    display: block;
    width: 32px;
    height: 32px;
    object-fit: contain;
    object-position: center;
}

.test-select-brand-mark .brand-logo {
    width: 30px;
    height: 30px;
}

.test-select-brand-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.test-select-brand-wordmark {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--text-primary);
    text-transform: none;
    background: none;
    border: none;
    padding: 0;
}

.test-select-brand-ai {
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary-cyan), var(--electric-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.test-select-brand-tagline {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--test-select-muted);
    letter-spacing: 0.02em;
}

.test-select-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    background: rgba(0, 217, 255, 0.1);
    border: 1px solid rgba(0, 217, 255, 0.4);
    color: var(--primary-cyan);
    flex-shrink: 0;
}

/* Never hide brand when mode panels are open */
.test-select-panel.has-reaction-modes-open .test-select-brand-lockup,
.test-select-panel.has-jump-modes-open .test-select-brand-lockup,
.test-select-panel.has-sidejump-modes-open .test-select-brand-lockup,
.test-select-panel.has-reaction-modes-open .test-select-kicker,
.test-select-panel.has-jump-modes-open .test-select-kicker,
.test-select-panel.has-sidejump-modes-open .test-select-kicker {
    display: flex !important;
    visibility: visible;
}

.test-select-panel.has-reaction-modes-open .test-select-brand-row,
.test-select-panel.has-jump-modes-open .test-select-brand-row,
.test-select-panel.has-sidejump-modes-open .test-select-brand-row {
    display: flex !important;
    visibility: visible;
}

.test-select-panel.has-reaction-modes-open .test-select-title,
.test-select-panel.has-jump-modes-open .test-select-title,
.test-select-panel.has-sidejump-modes-open .test-select-title {
    display: none;
}

.test-select-version {
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.7);
    align-self: flex-start;
    margin-top: 2px;
}

.test-select-title {
    margin-top: 14px;
    font-size: clamp(1.45rem, 4vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--text-primary);
    background: none;
    -webkit-text-fill-color: currentColor;
}

.test-select-subtitle {
    margin-top: 8px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--test-select-muted);
    max-width: 36em;
}

.test-select-session-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid rgba(74, 222, 128, 0.28);
    background: rgba(34, 197, 94, 0.1);
    color: #86efac;
    flex-shrink: 0;
    max-width: 9rem;
}

.test-select-session-status-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.test-select-session-status[hidden] {
    display: none !important;
}

.test-select-session-status--coach {
    border-color: rgba(0, 217, 255, 0.28);
    background: rgba(0, 217, 255, 0.08);
    color: #a5f3fc;
}

.test-select-session-status--guest {
    border-color: rgba(74, 222, 128, 0.28);
    background: rgba(34, 197, 94, 0.1);
    color: #86efac;
}

.test-select-session-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
    flex-shrink: 0;
}

.test-select-session-status--coach .test-select-session-status-dot {
    animation: session-status-pulse 2s ease-in-out infinite;
}

@keyframes session-status-pulse {
    0%, 100% { opacity: 0.65; }
    50%      { opacity: 1; }
}

.test-select-flow {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 4px;
}

/* ── Entry wizard — calm, one clear instruction ── */
.test-select-wizard-step-label {
    display: inline-block;
    margin: 12px 0 0;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary-cyan);
    background: rgba(0, 217, 255, 0.08);
    border: 1px solid rgba(0, 217, 255, 0.22);
}

.test-select-wizard-guide {
    margin: 6px 0 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-secondary);
    max-width: 28em;
}

.test-select-panel.test-select-wizard-step-2 .test-select-title,
.test-select-panel.test-select-wizard-step-3 .test-select-title {
    margin-top: 4px;
}

.test-select-wizard {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

.test-select-wizard .test-select-block {
    border: none;
    background: transparent;
    padding: 0;
    box-shadow: none;
}

.test-select-wizard .test-select-block--tests {
    border: none;
    background: transparent;
}

.test-select-wizard-panes {
    position: relative;
    overflow: hidden;
}

.test-select-panel.test-select-wizard-step-2 .test-select-wizard-panes,
.test-select-panel.test-select-wizard-step-3 .test-select-wizard-panes {
    overflow: visible;
}

.test-select-panel.test-select-wizard-step-3 .test-select-block-body--tests {
    padding-top: 10px;
}

.test-select-block-body--athlete {
    padding-top: 8px;
}

/* ── Wizard step 2: compact role + tappable athlete row ── */
.wizard-athlete-step {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wizard-athlete-role-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(10, 14, 32, 0.75);
}

.wizard-athlete-role-bar--guest {
    border-left: 3px solid rgba(0, 217, 255, 0.65);
}

.wizard-athlete-role-bar--coach {
    border-left: 3px solid rgba(56, 189, 248, 0.75);
}

.wizard-athlete-role-bar--sti {
    border-left: 3px solid rgba(167, 139, 250, 0.8);
}

.wizard-athlete-role-bar__text {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--test-select-muted, #94a3b8);
}

.wizard-athlete-role-bar__pill {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: var(--text-secondary);
    background: rgba(15, 23, 42, 0.65);
}

.wizard-athlete-role-bar--guest .wizard-athlete-role-bar__pill {
    color: #a5f3fc;
    border-color: rgba(0, 217, 255, 0.35);
    background: rgba(0, 217, 255, 0.1);
}

.wizard-athlete-role-bar--coach .wizard-athlete-role-bar__pill {
    color: #bae6fd;
    border-color: rgba(56, 189, 248, 0.35);
    background: rgba(56, 189, 248, 0.12);
}

.wizard-athlete-role-bar--sti .wizard-athlete-role-bar__pill {
    color: #ddd6fe;
    border-color: rgba(167, 139, 250, 0.4);
    background: rgba(124, 58, 237, 0.18);
}

.wizard-athlete-pick {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 14px 44px 13px 15px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: radial-gradient(circle at 0% 0%, rgba(0, 217, 255, 0.06), rgba(10, 13, 32, 0.98));
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        border-color 0.22s var(--ease),
        background 0.22s var(--ease),
        box-shadow 0.22s var(--ease),
        transform 0.2s var(--ease);
}

.wizard-athlete-pick:hover {
    transform: translateY(-1px);
    border-color: rgba(0, 217, 255, 0.42);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.wizard-athlete-pick:focus-visible {
    outline: 2px solid rgba(0, 217, 255, 0.5);
    outline-offset: 2px;
}

/* Required — no athlete yet (replaces guide copy) */
.wizard-athlete-pick--needs-athlete {
    border-color: rgba(248, 113, 113, 0.72);
    background: radial-gradient(circle at 0% 0%, rgba(248, 113, 113, 0.1), rgba(10, 13, 32, 0.98));
    box-shadow:
        0 0 0 1px rgba(248, 113, 113, 0.22),
        0 0 22px rgba(248, 113, 113, 0.1);
    animation: wizard-athlete-needs-glow 2.4s ease-in-out infinite;
}

@keyframes wizard-athlete-needs-glow {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(248, 113, 113, 0.22),
            0 0 18px rgba(248, 113, 113, 0.08);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(248, 113, 113, 0.35),
            0 0 28px rgba(248, 113, 113, 0.18);
    }
}

.wizard-athlete-pick--needs-athlete:hover {
    border-color: rgba(252, 165, 165, 0.85);
    box-shadow:
        0 0 0 1px rgba(248, 113, 113, 0.28),
        0 8px 24px rgba(248, 113, 113, 0.12);
}

.wizard-athlete-pick--error-flash {
    animation: wizard-athlete-pick-shake 0.45s var(--ease) !important;
    border-color: rgba(239, 68, 68, 0.95) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.35) !important;
}

@keyframes wizard-athlete-pick-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

/* Selected — matches Sportify test-card chrome */
.wizard-athlete-pick--selected {
    border-color: rgba(0, 217, 255, 0.45);
    background: radial-gradient(circle at 0% 0%, rgba(0, 217, 255, 0.14), rgba(10, 13, 32, 0.98));
    box-shadow: 0 0 18px rgba(0, 217, 255, 0.14);
}

.wizard-athlete-pick--selected:hover {
    border-color: rgba(0, 217, 255, 0.58);
    box-shadow: 0 0 22px rgba(0, 217, 255, 0.2);
}

body.app-role-sti .wizard-athlete-pick--selected {
    border-color: rgba(167, 139, 250, 0.52);
    background: radial-gradient(circle at 0% 0%, rgba(124, 58, 237, 0.16), rgba(10, 13, 32, 0.98));
    box-shadow: 0 0 18px rgba(124, 58, 237, 0.16);
}

body.app-role-sti .wizard-athlete-pick--selected:hover {
    border-color: rgba(196, 181, 253, 0.65);
}

.wizard-athlete-pick__main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.wizard-athlete-pick__initials-badge {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 217, 255, 0.5);
    background: linear-gradient(145deg, rgba(0, 217, 255, 0.35), rgba(0, 148, 180, 0.25));
    box-shadow: 0 0 16px rgba(0, 217, 255, 0.28);
}

.wizard-athlete-pick__initials {
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #ecfeff;
}

body.app-role-sti .wizard-athlete-pick__initials-badge {
    border-color: rgba(167, 139, 250, 0.55);
    background: linear-gradient(145deg, rgba(167, 139, 250, 0.4), rgba(124, 58, 237, 0.28));
    box-shadow: 0 0 16px rgba(124, 58, 237, 0.28);
}

body.app-role-sti .wizard-athlete-pick__initials {
    color: #f5f3ff;
}

.wizard-athlete-pick__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wizard-athlete-pick__kicker {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--test-select-muted, #94a3b8);
}

.wizard-athlete-pick__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    word-break: break-word;
}

.wizard-athlete-pick__title--placeholder {
    color: #fca5a5;
    font-weight: 600;
}

.wizard-athlete-pick--selected .wizard-athlete-pick__title--placeholder,
.wizard-athlete-pick--selected .wizard-athlete-pick__title {
    color: var(--text-primary);
    font-weight: 800;
}

.wizard-athlete-pick__meta {
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--text-secondary);
}

.wizard-athlete-pick__action {
    position: absolute;
    top: 50%;
    right: 11px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    background: rgba(8, 12, 28, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.32);
    pointer-events: none;
}

.wizard-athlete-pick--selected .wizard-athlete-pick__action {
    color: var(--primary-cyan, #00d9ff);
    border-color: rgba(0, 217, 255, 0.4);
    background: rgba(0, 217, 255, 0.1);
}

body.app-role-sti .wizard-athlete-pick--selected .wizard-athlete-pick__action {
    color: #c4b5fd;
    border-color: rgba(167, 139, 250, 0.45);
    background: rgba(124, 58, 237, 0.14);
}

.test-select-wizard-step-2 .test-select-wizard-guide:empty {
    display: none;
}

/* Guest — typed name only; staff — roster pick only */
body.app-role-guest .wizard-athlete-pick,
body.app-role-guest .wizard-athlete-role-bar,
body.app-role-guest #coachLoginPanel,
body.app-role-guest #stiLoginPanel {
    display: none !important;
}

/* Coach / STI roster pick — wizard step 2 only, after unlock */
.test-select-panel:not(.test-select-wizard-step-2) #btnWizardChooseAthlete {
    display: none !important;
}

body.app-role-coach .wizard-guest-name-only,
body.app-role-sti .wizard-guest-name-only {
    display: none !important;
}

.wizard-guest-name-only {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.wizard-athlete-guest-card {
    padding: 10px 12px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(8, 12, 28, 0.72);
    transition:
        border-color 0.22s var(--ease),
        box-shadow 0.22s var(--ease),
        background 0.22s var(--ease);
}

.wizard-athlete-guest-card--needs-name {
    border-color: rgba(248, 113, 113, 0.72);
    background: radial-gradient(circle at 0% 0%, rgba(248, 113, 113, 0.08), rgba(8, 12, 28, 0.92));
    box-shadow:
        0 0 0 1px rgba(248, 113, 113, 0.22),
        0 0 20px rgba(248, 113, 113, 0.1);
    animation: wizard-athlete-needs-glow 2.4s ease-in-out infinite;
}

.wizard-athlete-guest-card--has-name {
    border-color: rgba(0, 217, 255, 0.4);
    background: radial-gradient(circle at 0% 0%, rgba(0, 217, 255, 0.1), rgba(8, 12, 28, 0.92));
    box-shadow: 0 0 16px rgba(0, 217, 255, 0.12);
}

.wizard-athlete-guest-card--needs-name .guest-name-label {
    color: #fca5a5;
}

.wizard-athlete-guest-card--error-flash {
    animation: wizard-athlete-pick-shake 0.45s var(--ease);
    border-color: rgba(239, 68, 68, 0.95) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.35) !important;
}

.wizard-athlete-guest-card .guest-name-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wizard-athlete-guest-card .guest-name-label {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.wizard-athlete-guest-card .guest-name-input-wrap {
    display: block;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.32);
    background: rgba(8, 12, 28, 0.9);
}

.wizard-athlete-guest-card .guest-name-input-wrap:focus-within {
    border-color: rgba(0, 217, 255, 0.55);
    box-shadow: 0 0 0 2px rgba(0, 217, 255, 0.1);
}

.wizard-athlete-guest-card .guest-name-input-wrap input {
    display: block;
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.92rem;
    font-weight: 500;
    outline: none;
}

.test-select-wizard-pane[hidden] {
    display: none !important;
}

/* Wizard step transition (Continue / Back) */
@keyframes wizard-pane-exit-left {
    to {
        opacity: 0;
        transform: translateX(-28px);
    }
}

@keyframes wizard-pane-enter-right {
    from {
        opacity: 0;
        transform: translateX(28px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes wizard-pane-exit-right {
    to {
        opacity: 0;
        transform: translateX(28px);
    }
}

@keyframes wizard-pane-enter-left {
    from {
        opacity: 0;
        transform: translateX(-28px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes wizard-header-pop-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes wizard-test-card-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.test-select-wizard--exit-1 .test-select-wizard-pane[data-wizard-pane="1"] {
    animation: wizard-pane-exit-left 0.32s var(--ease) forwards;
    pointer-events: none;
}

.test-select-wizard--enter-2 .test-select-wizard-pane[data-wizard-pane="2"] {
    animation: wizard-pane-enter-right 0.34s var(--ease) forwards;
}

.test-select-wizard--exit-2 .test-select-wizard-pane[data-wizard-pane="2"] {
    animation: wizard-pane-exit-right 0.32s var(--ease) forwards;
    pointer-events: none;
}

.test-select-wizard--enter-1 .test-select-wizard-pane[data-wizard-pane="1"] {
    animation: wizard-pane-enter-left 0.34s var(--ease) forwards;
}

.test-select-wizard--exit-3 .test-select-wizard-pane[data-wizard-pane="3"] {
    animation: wizard-pane-exit-right 0.32s var(--ease) forwards;
    pointer-events: none;
}

.test-select-wizard--enter-3 .test-select-wizard-pane[data-wizard-pane="3"] {
    animation: wizard-pane-enter-right 0.34s var(--ease) forwards;
}

.test-select-header--pop .test-select-wizard-step-label,
.test-select-header--pop .test-select-title,
.test-select-header--pop .test-select-wizard-guide {
    animation: wizard-header-pop-in 0.36s var(--ease) backwards;
}

.test-select-header--pop .test-select-title {
    animation-delay: 0.04s;
}

.test-select-header--pop .test-select-wizard-guide {
    animation-delay: 0.08s;
}

.test-select-wizard--enter-3 .test-select-grid > .jump-select-stack {
    animation: wizard-test-card-in 0.38s var(--ease) 0.06s backwards;
}

.test-select-wizard--enter-3 .test-select-grid > .reaction-select-stack {
    animation: wizard-test-card-in 0.38s var(--ease) 0.12s backwards;
}

.test-select-wizard--enter-3 .test-select-grid > .sidejump-select-stack {
    animation: wizard-test-card-in 0.38s var(--ease) 0.18s backwards;
}

.test-select-wizard--enter-3 .test-select-grid > .desk-reaction-select-stack {
    animation: wizard-test-card-in 0.38s var(--ease) 0.24s backwards;
}

.test-select-wizard-btn--continue.is-pressed {
    transform: scale(0.97);
    filter: brightness(0.95);
}

.test-select-wizard-btn--continue {
    transition: transform 0.15s var(--ease), filter 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

/* Step 3 — one test per row */
.test-select-panel.test-select-wizard-step-3 .test-select-grid,
.test-select-panel.test-select-wizard-step-3 .test-select-grid--pair {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    padding-top: 4px;
}

.test-select-panel.test-select-wizard-step-3 .jump-select-stack,
.test-select-panel.test-select-wizard-step-3 .reaction-select-stack,
.test-select-panel.test-select-wizard-step-3 .sidejump-select-stack,
.test-select-panel.test-select-wizard-step-3 .desk-reaction-select-stack {
    padding-top: 2px;
}

.test-select-panel.test-select-wizard-step-3 .test-select-grid--pair .jump-select-stack,
.test-select-panel.test-select-wizard-step-3 .test-select-grid--pair .reaction-select-stack,
.test-select-panel.test-select-wizard-step-3 .test-select-grid--pair .sidejump-select-stack {
    height: auto;
    min-height: 0;
}

.test-select-panel.test-select-wizard-step-3 .test-card--pick:not([aria-expanded="true"]) {
    min-height: 0;
}

.test-select-wizard-step-2 .coach-login-title,
.test-select-wizard-step-2 .coach-login-subtitle {
    display: block;
}

.test-select-block-body--who .coach-login-panel.visible {
    margin-top: 10px;
    margin-bottom: 0;
    padding: 10px 12px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(51, 65, 85, 0.5);
    box-shadow: none;
}

.test-select-block-body--who .coach-login-panel.visible .coach-login-title,
.test-select-block-body--who .coach-login-panel.visible .coach-login-subtitle {
    display: block;
}

.test-select-wizard-step-2 .coach-login-panel.visible {
    margin-top: 0;
    margin-bottom: 10px;
    padding: 10px 12px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(51, 65, 85, 0.5);
    box-shadow: none;
}

body.app-role-sti .sti-login-panel.coach-login-panel {
    display: none;
}

body.app-role-sti .sti-login-panel.coach-login-panel.visible {
    display: block;
}

body.app-role-sti .test-select-block-body--who .sti-login-panel.coach-login-panel.visible {
    background: rgba(30, 27, 75, 0.55);
    border: 1px solid rgba(124, 58, 237, 0.35);
}

.coach-athlete-panel.staff-athlete-panel {
    margin-top: 12px;
}

/* Step 1 — role choice: Guest, Coach, STI in one row (desktop) */
.test-select-wizard-step-1 .test-role-toggle--cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

/* Guest + Coach only — mobile / STI blocked */
body.sti-mobile-blocked .test-select-wizard-step-1 .test-role-toggle--cards,
.test-select-wizard-step-1 .test-role-toggle--cards.test-role-toggle--two-roles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.test-select-wizard-step-1 .test-role-pill {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    min-height: 64px;
    padding: 10px 8px 12px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(12, 16, 34, 0.85);
}

.test-select-wizard-step-1 .test-role-pill-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.test-select-wizard-step-1 .test-role-label {
    font-size: 0.98rem;
    font-weight: 700;
}

.test-select-wizard-step-1 .test-role-sublabel {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.test-select-wizard-step-1 .test-role-pill.active .test-role-sublabel {
    color: rgba(165, 230, 255, 0.75);
}

.test-select-wizard-step-1 .test-role-check {
    top: 8px;
    right: 8px;
}

.test-select-wizard-step-1 .test-role-pill.active {
    border-color: rgba(0, 217, 255, 0.5);
    background: rgba(0, 217, 255, 0.06);
    box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.1);
}

/* Step 2 — athlete name field */
.test-select-wizard-step-2 .guest-name-panel {
    margin-top: 2px;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.test-select-wizard-step-2 .guest-name-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: text;
}

.test-select-wizard-step-2 .guest-name-label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--text-secondary);
}

.test-select-wizard-step-2 .guest-name-input-wrap {
    display: block;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(8, 12, 28, 0.9);
    transition:
        border-color 0.2s var(--ease),
        box-shadow 0.2s var(--ease),
        background 0.2s var(--ease);
}

.test-select-wizard-step-2 .guest-name-input-wrap--needs-name {
    border-color: rgba(248, 113, 113, 0.72);
    background: rgba(12, 8, 16, 0.95);
    box-shadow:
        0 0 0 1px rgba(248, 113, 113, 0.2),
        0 0 18px rgba(248, 113, 113, 0.1);
    animation: wizard-athlete-needs-glow 2.4s ease-in-out infinite;
}

.test-select-wizard-step-2 .guest-name-input-wrap--has-name {
    border-color: rgba(0, 217, 255, 0.45);
    box-shadow: 0 0 14px rgba(0, 217, 255, 0.1);
}

.test-select-wizard-step-2 .guest-name-label--needs-name {
    color: #fca5a5;
}

.test-select-wizard-step-2 .guest-name-input-wrap--error-flash {
    animation: wizard-athlete-pick-shake 0.45s var(--ease);
    border-color: rgba(239, 68, 68, 0.95) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.35) !important;
}

.test-select-wizard-step-2 .guest-name-input-wrap:focus-within {
    border-color: rgba(0, 217, 255, 0.65);
    background: rgba(6, 14, 28, 0.98);
    box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.12);
}

.test-select-wizard-step-2 .guest-name-input-wrap input {
    display: block;
    width: 100%;
    min-height: 50px;
    padding: 14px 16px;
    border: none;
    border-radius: 14px;
    background: transparent;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.35;
    outline: none;
    box-shadow: none;
}

.test-select-wizard-step-2 .guest-name-input-wrap input::placeholder {
    color: rgba(148, 163, 184, 0.55);
    font-weight: 400;
}

.test-select-wizard-step-2 .guest-name-input-wrap input:focus {
    border: none;
    box-shadow: none;
}

.test-select-wizard-footer {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.test-select-wizard-hint {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #fbbf24;
    text-align: center;
}

.test-select-wizard-hint:empty {
    display: none;
}

.test-select-wizard-hint.is-error {
    color: #fca5a5;
}

.test-select-wizard-actions {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.test-select-wizard-btn {
    flex: 1;
    min-height: 46px;
    padding: 11px 16px;
    border-radius: 12px;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.18s var(--ease), border-color 0.18s var(--ease);
}

.test-select-wizard-btn--back {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    color: var(--text-primary);
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.38);
}

.test-select-wizard-btn--back:hover {
    border-color: rgba(0, 217, 255, 0.45);
    background: rgba(12, 18, 36, 0.95);
}

.test-select-wizard-btn-icon {
    flex-shrink: 0;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1;
    color: var(--primary-cyan);
}

.test-select-wizard-btn-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    text-align: left;
}

.test-select-wizard-btn-label {
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
}

.test-select-wizard-btn-sublabel {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--test-select-muted);
    line-height: 1.2;
}

.test-select-wizard-btn--continue {
    color: #020617;
    border: none;
    background: linear-gradient(180deg, #2ee8ff 0%, var(--primary-cyan) 55%, #00b8d9 100%);
    box-shadow: 0 4px 20px rgba(0, 217, 255, 0.28);
    letter-spacing: 0.03em;
}

.test-select-wizard-btn--continue:hover {
    filter: brightness(1.05);
    box-shadow: 0 6px 24px rgba(0, 217, 255, 0.38);
}

.test-select-panel.test-select-wizard-step-1 .test-select-wizard-btn--continue::after,
.test-select-panel.test-select-wizard-step-2 .test-select-wizard-btn--continue::after {
    content: ' →';
    font-weight: 800;
}

.test-select-wizard-btn:focus-visible {
    outline: 2px solid rgba(0, 217, 255, 0.55);
    outline-offset: 2px;
}

.test-select-panel.test-select-wizard-step-1 .test-select-wizard-btn--back {
    display: none !important;
}

.test-select-panel.test-select-wizard-step-3 .test-select-wizard-footer {
    display: none;
}

.test-select-step2-toolbar {
    margin-bottom: 14px;
}

.test-select-identity-bar {
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 12px 10px 14px;
    border-radius: 8px;
    text-align: left;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.72);
}

.test-select-identity-bar:hover {
    border-color: rgba(0, 217, 255, 0.32);
    background: rgba(12, 18, 36, 0.88);
}

.test-select-identity-bar__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

.test-select-identity-bar__chev {
    flex-shrink: 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    color: var(--primary-cyan);
    opacity: 0.85;
}

.test-select-identity-bar .test-select-session-status {
    margin-left: auto;
    margin-right: 2px;
}

.test-select-identity-bar--has-badge .test-select-wizard-btn-sublabel {
    display: none;
}

.test-select-identity-bar--has-badge .test-select-session-status {
    max-width: 8.5rem;
}

.test-select-identity-bar .test-select-wizard-btn-label {
    font-size: 0.88rem;
}

.test-select-identity-bar .test-select-wizard-btn-sublabel {
    font-size: 0.7rem;
}

.test-select-panel.test-select-wizard-step-1 .test-select-step2-toolbar,
.test-select-panel.test-select-wizard-step-2 .test-select-step2-toolbar {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .test-select-wizard--exit-1 .test-select-wizard-pane[data-wizard-pane="1"],
    .test-select-wizard--enter-2 .test-select-wizard-pane[data-wizard-pane="2"],
    .test-select-wizard--exit-2 .test-select-wizard-pane[data-wizard-pane="2"],
    .test-select-wizard--enter-1 .test-select-wizard-pane[data-wizard-pane="1"],
    .test-select-header--pop .test-select-wizard-step-label,
    .test-select-header--pop .test-select-title,
    .test-select-header--pop .test-select-wizard-guide,
    .test-select-wizard--exit-3 .test-select-wizard-pane[data-wizard-pane="3"],
    .test-select-wizard--enter-3 .test-select-wizard-pane[data-wizard-pane="3"],
    .test-select-wizard--enter-3 .test-select-grid > .jump-select-stack,
    .test-select-wizard--enter-3 .test-select-grid > .reaction-select-stack,
    .test-select-wizard--enter-3 .test-select-grid > .sidejump-select-stack {
        animation: none;
    }
}

.test-select-block {
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(8, 12, 28, 0.55);
    padding: 14px 16px 16px;
}

.test-select-block--tests {
    border-color: rgba(0, 217, 255, 0.18);
    background: rgba(6, 10, 24, 0.65);
}

.test-select-block-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.test-select-block-step {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 800;
    color: #020617;
    background: linear-gradient(135deg, var(--primary-cyan), var(--electric-blue));
    box-shadow: 0 0 14px rgba(0, 217, 255, 0.35);
}

.test-select-block-title {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--text-primary);
}

.test-select-block-hint {
    margin: 4px 0 0;
    font-size: 0.82rem;
    color: var(--test-select-muted);
    line-height: 1.4;
}

.test-select-block-body--who {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.test-select-block-body--who .test-role-toggle {
    margin-top: 0;
    align-self: stretch;
    width: 100%;
}

/* Guest / Coach — flat segmented cards (matches test picker) */
.test-role-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    box-sizing: border-box;
}

.test-role-pill {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    min-height: 56px;
    padding: 12px 38px 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(10, 13, 32, 0.98);
    color: var(--text-secondary);
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        border-color 0.2s var(--ease),
        background 0.2s var(--ease),
        color 0.2s var(--ease),
        box-shadow 0.2s var(--ease);
}

.test-role-pill:hover {
    border-color: rgba(148, 163, 184, 0.45);
    background: rgba(12, 16, 34, 0.98);
}

.test-role-pill:focus-visible {
    outline: 2px solid rgba(0, 217, 255, 0.55);
    outline-offset: 2px;
}

.test-role-pill.active {
    border: 2px solid rgba(0, 217, 255, 0.55);
    background: rgba(0, 217, 255, 0.08);
    color: var(--text-primary);
    box-shadow: none;
    transform: none;
}

.test-role-pill.active:hover {
    border-color: rgba(0, 217, 255, 0.75);
    background: rgba(0, 217, 255, 0.1);
}

.test-role-check {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    color: #020617;
    background: linear-gradient(135deg, var(--primary-cyan), var(--electric-blue));
    box-shadow: 0 0 10px rgba(0, 217, 255, 0.45);
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
    pointer-events: none;
}

.test-role-pill.active .test-role-check {
    opacity: 1;
    transform: scale(1);
}

.test-role-label {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.25;
    text-transform: none;
    color: inherit;
}

.test-role-pill.active .test-role-label {
    color: #e8f8ff;
}

.test-role-sublabel {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-muted);
}

.test-role-pill.active .test-role-sublabel {
    color: rgba(165, 230, 255, 0.82);
}

.coach-login-panel {
    display: none;
    padding: 10px 12px;
    border-radius: 16px;
    background: radial-gradient(circle at 0% 0%, rgba(0, 217, 255, 0.14), rgba(10, 13, 32, 0.98));
    border: 1px solid rgba(0, 217, 255, 0.45);
    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.85),
        0 0 0 1px rgba(15, 23, 42, 0.9);
}

.coach-login-panel.visible {
    display: block;
}

.coach-login-title {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.coach-login-subtitle {
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.coach-login-message {
    display: none;
    margin-top: 8px;
    font-size: 0.76rem;
    line-height: 1.4;
    padding: 8px 10px;
    border-radius: 10px;
    font-weight: 500;
}

.coach-login-message.is-visible {
    display: block;
}

.coach-login-message--info {
    color: rgba(226, 232, 240, 0.95);
    background: rgba(30, 41, 59, 0.85);
    border: 1px solid rgba(100, 116, 139, 0.55);
}

.coach-login-message--success {
    color: rgba(220, 252, 231, 0.98);
    background: rgba(22, 101, 52, 0.35);
    border: 1px solid rgba(74, 222, 128, 0.55);
}

.coach-login-message--warn {
    color: rgba(254, 243, 199, 0.98);
    background: rgba(120, 53, 15, 0.35);
    border: 1px solid rgba(251, 191, 36, 0.45);
}

.coach-login-message--error {
    color: rgba(254, 226, 226, 0.98);
    background: rgba(127, 29, 29, 0.35);
    border: 1px solid rgba(248, 113, 113, 0.55);
}

.guest-name-panel {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(51, 65, 85, 0.65);
}

.guest-name-title {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.guest-name-grid {
    display: flex;
    gap: 6px;
}

.guest-name-grid input {
    flex: 1;
    width: 100%;
    min-height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.55);
    background: rgba(15, 23, 42, 0.95);
    color: var(--text-primary);
    padding: 10px 14px;
    font-size: 0.88rem;
    outline: none;
}

.guest-name-grid input::placeholder {
    color: rgba(148, 163, 184, 0.7);
}

.guest-name-grid input:focus {
    border-color: var(--primary-cyan);
    box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.4);
}

.coach-login-grid {
    margin-top: 10px;
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.2fr);
    gap: 8px;
    align-items: flex-end;
}

.coach-login-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.coach-login-field label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

.coach-login-field input {
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.6);
    background: rgba(15, 23, 42, 0.95);
    color: var(--text-primary);
    padding: 6px 10px;
    font-size: 0.8rem;
    outline: none;
}

.coach-login-key-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.coach-login-key-row .coach-key-input {
    flex: 1;
    min-width: 0;
}

.coach-key-valid-mark {
    display: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1;
    color: #4ade80;
    background: rgba(34, 197, 94, 0.18);
    border: 1px solid rgba(74, 222, 128, 0.85);
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.25);
}

.coach-key-valid-mark.is-visible {
    display: inline-flex;
}

.coach-login-panel--success {
    border-color: rgba(74, 222, 128, 0.65);
    box-shadow:
        0 0 0 1px rgba(74, 222, 128, 0.28),
        0 24px 60px rgba(15, 23, 42, 0.85);
}

.coach-login-panel--error {
    border-color: rgba(248, 113, 113, 0.55);
}

.coach-key-input.coach-key-input--success {
    border-color: rgba(74, 222, 128, 0.92) !important;
    box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.35);
}

.coach-key-input.coach-key-input--error {
    border-color: rgba(248, 113, 113, 0.9) !important;
    box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.35);
}

.coach-key-input.coach-key-input--success:focus {
    border-color: rgba(74, 222, 128, 0.95) !important;
    box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.45);
}

.coach-login-field input::placeholder {
    color: rgba(148, 163, 184, 0.7);
}

.coach-login-field input:focus {
    border-color: var(--primary-cyan);
    box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.4);
}

.coach-login-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 0;
}

.coach-login-btn {
    border-radius: 999px;
    border: none;
    outline: none;
    padding: 7px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    background: linear-gradient(135deg, var(--primary-cyan), var(--electric-blue));
    color: #020617;
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.9),
        0 0 18px rgba(0, 217, 255, 0.55);
    transition:
        transform 0.1s var(--ease),
        box-shadow 0.18s var(--ease),
        filter 0.18s var(--ease);
}

.coach-login-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.9),
        0 0 24px rgba(0, 217, 255, 0.75);
}

.coach-login-btn:active {
    transform: translateY(0);
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.9),
        0 0 14px rgba(0, 217, 255, 0.5);
}

.coach-login-btn span {
    white-space: nowrap;
}

.test-select-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 0;
    align-items: stretch;
}

.test-select-grid--pair .jump-select-stack,
.test-select-grid--pair .reaction-select-stack,
.test-select-grid--pair .sidejump-select-stack {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    height: 100%;
}

@media (max-width: 640px) {
    .test-select-grid--pair {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .test-select-grid--pair .jump-select-stack,
    .test-select-grid--pair .reaction-select-stack,
    .test-select-grid--pair .sidejump-select-stack {
        height: auto;
        min-height: 0;
    }
}

.test-card {
    position: relative;
    border-radius: 16px;
    padding: 16px 16px 14px;
    background: radial-gradient(circle at 0% 0%, rgba(0, 217, 255, 0.16), rgba(10, 13, 32, 0.98));
    border: 1px solid rgba(0, 217, 255, 0.35);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
    cursor: pointer;
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
    text-align: left;
    color: inherit;
    width: 100%;
}

/* Test picker — compact row cards (equal height in grid) */
.test-card--pick {
    position: relative;
    padding: 14px 48px 13px 15px;
    gap: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    height: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 0.2s var(--ease),
        border-color 0.2s var(--ease),
        box-shadow 0.2s var(--ease),
        background 0.2s var(--ease);
}

/* Expand / collapse control (replaces checkmark on open) */
.test-card-action {
    position: absolute;
    top: 11px;
    right: 11px;
    z-index: 3;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    background: rgba(8, 12, 28, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.32);
    pointer-events: none;
    transition:
        color 0.2s var(--ease),
        border-color 0.2s var(--ease),
        background 0.2s var(--ease),
        transform 0.2s var(--ease);
}

.test-card-action::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    margin-top: -2px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.22s var(--ease);
}

.test-card--pick[aria-expanded="true"] .test-card-action {
    color: var(--primary-cyan);
    border-color: rgba(0, 217, 255, 0.45);
    background: rgba(0, 217, 255, 0.1);
}

.test-card--pick[aria-expanded="true"] .test-card-action::before {
    margin-top: 2px;
    transform: rotate(-135deg);
}

.test-card-reaction.test-card--pick[aria-expanded="true"] .test-card-action {
    color: #ffb48a;
    border-color: rgba(255, 152, 88, 0.45);
    background: rgba(255, 120, 60, 0.1);
}

.test-card-sidejump.test-card--pick[aria-expanded="true"] .test-card-action {
    color: #d8b4fe;
    border-color: rgba(192, 132, 252, 0.45);
    background: rgba(156, 39, 176, 0.12);
}

.test-card-check {
    display: none !important;
}

.test-card--pick .test-card-main {
    display: flex;
    align-items: center;
    width: 100%;
    flex: 1 1 auto;
    gap: 11px;
}

.test-card-start-cta {
    flex-shrink: 0;
    margin-left: auto;
    align-self: center;
    padding-left: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--primary-cyan);
    white-space: nowrap;
}

.test-card-reaction.test-card--pick .test-card-start-cta {
    color: #ffb48a;
}

.test-card-sidejump.test-card--pick .test-card-start-cta {
    color: #d8b4fe;
}

.test-card--pick[aria-expanded="true"] .test-card-start-cta {
    display: none;
}

.test-card--pick .test-card-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

/* Vertical Jump — brand cyan / blue (flat, no glow) */
.test-card-jump.test-card--pick {
    background: rgba(10, 13, 32, 0.98);
    border: 2px solid rgba(0, 217, 255, 0.5);
    box-shadow: none;
}

.test-card-jump.test-card--pick:hover,
.test-card-jump.test-card--pick:focus-visible {
    transform: none;
    border-color: rgba(0, 217, 255, 0.75);
    background: rgba(12, 18, 36, 0.98);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}

.test-card-jump.test-card--pick:hover .test-card-action,
.test-card-jump.test-card--pick:focus-visible .test-card-action {
    color: var(--primary-cyan);
    border-color: rgba(0, 217, 255, 0.4);
}

.test-card-jump.test-card--pick:active {
    transform: scale(0.995);
}

.test-card-jump.test-card--pick .test-card-icon {
    width: 58px;
    height: 58px;
    font-size: 1.72rem;
    box-shadow: none;
    background: rgba(0, 217, 255, 0.08);
    border: 1px solid rgba(0, 217, 255, 0.28);
}

.test-card-jump .test-card-tag {
    background: rgba(0, 217, 255, 0.14);
    border-color: rgba(0, 217, 255, 0.45);
    color: var(--primary-cyan);
}

/* Reaction Time — warm orange (flat, no glow) */
.test-card-reaction.test-card--pick {
    background: rgba(12, 10, 24, 0.98);
    border: 2px solid rgba(255, 140, 90, 0.5);
    box-shadow: none;
}

.test-card-reaction.test-card--pick:hover,
.test-card-reaction.test-card--pick:focus-visible {
    transform: none;
    border-color: rgba(255, 180, 120, 0.75);
    background: rgba(18, 12, 22, 0.98);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}

.test-card-reaction.test-card--pick:hover .test-card-action,
.test-card-reaction.test-card--pick:focus-visible .test-card-action {
    color: #ffb48a;
    border-color: rgba(255, 152, 88, 0.4);
}

.test-card-reaction.test-card--pick:active {
    transform: scale(0.995);
}

.test-card-reaction.test-card--pick .test-card-icon,
.test-card-reaction.test-card--pick .test-card-icon-reaction {
    width: 58px;
    height: 58px;
    font-size: 1.72rem;
    box-shadow: none !important;
    background: rgba(255, 120, 80, 0.08) !important;
    border: 1px solid rgba(255, 140, 90, 0.28) !important;
}

.test-card-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.test-card-title-row h3 {
    margin: 0;
    font-size: 1.02rem;
}

.test-card--pick .test-card-title-row h3 {
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--text-primary);
}

.test-card-modes {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    overflow: hidden;
}

.test-card-tag {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: rgba(0, 217, 255, 0.14);
    border: 1px solid rgba(0, 217, 255, 0.35);
    color: var(--primary-cyan);
}

.test-card--pick .test-card-modes {
    margin-top: 6px;
}

.test-card-tag--reaction {
    background: rgba(255, 120, 80, 0.14);
    border-color: rgba(255, 140, 90, 0.4);
    color: #ffb48a;
}

/* Side Jump — violet (same card / panel language as vertical & reaction) */
.test-card-sidejump.test-card--pick {
    background: rgba(14, 10, 28, 0.98);
    border: 2px solid rgba(192, 132, 252, 0.5);
    box-shadow: none;
}

.test-card-sidejump.test-card--pick:hover,
.test-card-sidejump.test-card--pick:focus-visible {
    transform: none;
    border-color: rgba(216, 180, 254, 0.75);
    background: rgba(18, 12, 32, 0.98);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}

.test-card-sidejump.test-card--pick:hover .test-card-action,
.test-card-sidejump.test-card--pick:focus-visible .test-card-action {
    color: #d8b4fe;
    border-color: rgba(192, 132, 252, 0.4);
}

.test-card-sidejump.test-card--pick:active {
    transform: scale(0.995);
}

.test-card-sidejump.test-card--pick .test-card-icon,
.test-card-sidejump.test-card--pick .test-card-icon-sidejump {
    width: 58px;
    height: 58px;
    font-size: 1.72rem;
    box-shadow: none;
    background: rgba(192, 132, 252, 0.08);
    border: 1px solid rgba(192, 132, 252, 0.28);
}

.test-card-sidejump .test-card-tag,
.test-card-tag--sidejump {
    background: rgba(192, 132, 252, 0.14);
    border-color: rgba(192, 132, 252, 0.45);
    color: #e9d5ff;
    font-size: 0.62rem;
    padding: 3px 7px;
    letter-spacing: 0.05em;
}

.test-card-sidejump.test-card--pick .test-card-title-row h3 {
    font-size: 1.12rem;
    font-weight: 800;
}

.test-card-sidejump.test-card--pick .test-card-desc-line {
    color: rgba(233, 213, 255, 0.88);
    font-size: 0.78rem;
    line-height: 1.45;
}

.test-card-sidejump.test-card--pick .test-card-chevron {
    font-size: 0.75rem;
}

.test-card-sidejump.test-card--pick:hover .test-card-chevron,
.test-card-sidejump.test-card--pick:focus-visible .test-card-chevron {
    color: #d8b4fe;
    opacity: 0.95;
}

.test-card-sidejump.test-card--pick[aria-expanded="true"] .test-card-collapse-hint {
    color: #d8b4fe;
}

.test-card-sidejump.test-card--pick[aria-expanded="true"] {
    background: rgba(18, 12, 32, 0.98);
    border-color: rgba(216, 180, 254, 0.72);
}

.sidejump-select-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    grid-column: 1 / -1;
    width: 100%;
}

/* Hand Reaction (mobile touch) — same pick-card language as Reaction Time */
.desk-reaction-select-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    grid-column: 1 / -1;
    width: 100%;
}

.test-card-hand-reaction.test-card--pick {
    background: rgba(12, 10, 24, 0.98);
    border: 2px solid rgba(255, 140, 90, 0.5);
    box-shadow: none;
}

.test-card-hand-reaction.test-card--pick:hover,
.test-card-hand-reaction.test-card--pick:focus-visible {
    transform: none;
    border-color: rgba(255, 180, 120, 0.75);
    background: rgba(18, 12, 22, 0.98);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}

.test-card-hand-reaction.test-card--pick:active {
    transform: scale(0.995);
}

.test-card-hand-reaction.test-card--pick .test-card-action {
    display: none;
}

.test-card-hand-reaction.test-card--pick .test-card-icon,
.test-card-hand-reaction.test-card--pick .test-card-icon-hand-reaction {
    width: 58px;
    height: 58px;
    font-size: 1.72rem;
    border-radius: 50%;
    box-shadow: none !important;
    background: rgba(255, 120, 80, 0.08) !important;
    border: 1px solid rgba(255, 140, 90, 0.28) !important;
}

.test-card-hand-reaction.test-card--pick .test-card-desc-line {
    color: rgba(255, 210, 185, 0.9);
    font-size: 0.78rem;
    line-height: 1.45;
}

.test-card-hand-reaction.test-card--pick .test-card-start-cta {
    color: #ffb48a;
}

.test-card-hand-reaction .test-card-tag,
.test-card-tag--hand-touch {
    background: rgba(255, 120, 80, 0.14);
    border-color: rgba(255, 140, 90, 0.45);
    color: #ffb48a;
    font-size: 0.62rem;
    padding: 3px 7px;
    letter-spacing: 0.05em;
}

.sidejump-select-stack--open .test-card-sidejump {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}

.sidejump-overlay-tiles-panel {
    padding: 10px 12px 12px;
    border-radius: 0 0 16px 16px;
    border: 2px solid rgba(192, 132, 252, 0.5);
    border-top: none;
    background: rgba(12, 8, 26, 0.98);
    box-shadow: none;
}

.sidejump-mode-tiles-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

.sidejump-mode-tiles-grid.sidejump-mode-tiles-grid--single {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 640px) {
    .sidejump-mode-tiles-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.sidejump-overlay-tiles-panel .reaction-mode-tile {
    border-color: rgba(192, 132, 252, 0.32);
    background: rgba(14, 10, 28, 0.98);
}

.sidejump-overlay-tiles-panel .reaction-mode-tile:hover,
.sidejump-overlay-tiles-panel .reaction-mode-tile:focus-visible {
    border-color: rgba(216, 180, 254, 0.85);
    background: rgba(18, 12, 32, 0.98);
}

.sidejump-overlay-tiles-panel .reaction-mode-tile-icon {
    background: rgba(192, 132, 252, 0.08);
    border-color: rgba(192, 132, 252, 0.28);
}

.sidejump-overlay-tiles-panel .reaction-mode-tile-badge {
    background: rgba(192, 132, 252, 0.14);
    border-color: rgba(192, 132, 252, 0.45);
    color: #e9d5ff;
}

.sidejump-overlay-tiles-panel .reaction-mode-tile-text p {
    color: rgba(233, 213, 255, 0.88);
}

.sidejump-overlay-tiles-panel .reaction-mode-tile-footer {
    color: #d8b4fe;
    font-size: 0.76rem;
}

.sidejump-overlay-tiles-panel .reaction-mode-tile-text h4 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.sidejump-overlay-tiles-panel .reaction-mode-tile-badge {
    font-size: 0.62rem;
    padding: 3px 8px;
}

.sidejump-overlay-tiles-panel .reaction-mode-tile-text p {
    font-size: 0.78rem;
    line-height: 1.45;
}

.sidejump-overlay-tiles-panel .reaction-mode-tile-icon {
    width: 46px;
    height: 46px;
    font-size: 1.3rem;
}

.sidejump-overlay-tiles-panel .sidejump-mode-tile--both {
    border-left: 3px solid rgba(192, 132, 252, 0.72);
}

.sidejump-overlay-tiles-panel .sidejump-mode-tile--left {
    border-left: 3px solid rgba(96, 165, 250, 0.65);
}

.sidejump-overlay-tiles-panel .sidejump-mode-tile--right {
    border-left: 3px solid rgba(52, 211, 153, 0.65);
}

.test-select-panel.has-sidejump-modes-open .test-select-grid--pair {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
}

.test-select-panel.has-jump-modes-open .sidejump-select-stack,
.test-select-panel.has-reaction-modes-open .sidejump-select-stack,
.test-select-panel.has-sidejump-modes-open .jump-select-stack,
.test-select-panel.has-sidejump-modes-open .reaction-select-stack {
    display: none;
}

.test-select-panel.has-sidejump-modes-open .sidejump-select-stack {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-column: 1 / -1;
}

.test-select-panel.has-sidejump-modes-open .sidejump-mode-tiles-grid,
.test-select-panel.has-sidejump-modes-open .reaction-mode-tiles-grid {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}

/* Side jump session — sidebar & stage accents */
body.app-mode-sidejump #jumpSidebarCard {
    border-color: rgba(192, 132, 252, 0.45);
}

body.app-mode-sidejump #jumpSidebarCard .sidebar-card-icon {
    filter: none;
}

body.app-mode-sidejump .jump-big-number {
    color: #d8b4fe;
}

body.app-mode-sidejump .btn-toggle-jump:not(:disabled) {
    border-color: rgba(192, 132, 252, 0.55);
    background: rgba(192, 132, 252, 0.12);
}

body.app-mode-sidejump .jump-sidebar-title__mode {
    color: #d8b4fe;
    font-weight: 700;
    font-size: 0.82rem;
}

.test-card--pick .test-card-desc-line {
    margin: 4px 0 0;
    font-size: 0.76rem;
    line-height: 1.4;
    color: var(--text-secondary);
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    min-height: calc(2 * 1.4em);
    max-height: calc(2 * 1.4em);
}

.test-card--pick .test-card-icon,
.test-card-reaction.test-card--pick .test-card-icon-reaction {
    border-radius: 12px;
}

.test-card-jump.test-card--pick .test-card-desc-line {
    color: rgba(165, 230, 255, 0.88);
}

.test-card-reaction.test-card--pick .test-card-desc-line {
    color: rgba(255, 210, 185, 0.9);
}

.test-card-chevron {
    display: none;
}

.test-card-collapse-hint {
    display: none;
    margin: 3px 0 0;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

.test-card--pick[aria-expanded="true"] .test-card-collapse-hint {
    display: block;
}

.test-card--pick[aria-expanded="true"] .test-card-desc-line,
.test-card--pick[aria-expanded="true"] .test-card-modes {
    display: none;
}

.test-card-jump.test-card--pick[aria-expanded="true"] .test-card-collapse-hint {
    color: rgba(0, 217, 255, 0.92);
}

.test-card-reaction.test-card--pick[aria-expanded="true"] .test-card-collapse-hint {
    color: #ffb48a;
}

.test-card--pick[aria-expanded="true"] {
    cursor: pointer;
}

.test-card-jump.test-card--pick[aria-expanded="true"] {
    background: rgba(12, 18, 36, 0.98);
    border-color: rgba(0, 217, 255, 0.72);
}

.test-card-reaction.test-card--pick[aria-expanded="true"] {
    background: rgba(18, 12, 22, 0.98);
    border-color: rgba(255, 180, 120, 0.72);
}

.jump-select-stack--open .test-card--pick,
.reaction-select-stack--open .test-card--pick,
.sidejump-select-stack--open .test-card--pick {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}

.test-card-secondary {
    background: radial-gradient(circle at 0% 0%, rgba(103, 58, 183, 0.25), rgba(10, 13, 32, 0.98));
    border-color: rgba(156, 39, 176, 0.45);
}

.test-card:not(.test-card--pick):hover {
    transform: translateY(-3px);
    box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.8),
        0 0 40px rgba(0, 217, 255, 0.25);
    border-color: rgba(0, 217, 255, 0.8);
}

/* Touch: pressed state when hover is unavailable */
@media (hover: none) {
    .test-card-jump.test-card--pick:active {
        border-color: rgba(0, 217, 255, 0.85);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    }

    .test-card-reaction.test-card--pick:active {
        border-color: rgba(255, 190, 130, 0.85);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    }

    .test-card-sidejump.test-card--pick:active {
        border-color: rgba(216, 180, 254, 0.85);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    }
}

.test-card-secondary:hover {
    box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.8),
        0 0 40px rgba(156, 39, 176, 0.4);
    border-color: rgba(186, 104, 200, 0.9);
}

/* Reaction Time — distinct warm / electric palette (not purple secondary) */
.test-select-grid--pair {
    align-items: start;
}

.test-select-grid--single {
    grid-template-columns: minmax(0, 1fr);
}

/* Mode picker open: one column + full-width stack (avoids empty half-column on phone) */
.test-select-panel.has-reaction-modes-open .test-select-grid--pair,
.test-select-panel.has-jump-modes-open .test-select-grid--pair {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
}

.test-select-panel.has-jump-modes-open .reaction-select-stack {
    display: none;
}

.test-select-panel.has-reaction-modes-open .jump-select-stack {
    display: none;
}

.test-select-panel.has-jump-modes-open .jump-select-stack,
.test-select-panel.has-reaction-modes-open .reaction-select-stack {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-column: 1 / -1;
}

.test-select-panel.has-jump-modes-open .jump-mode-tiles-grid,
.test-select-panel.has-reaction-modes-open .reaction-mode-tiles-grid {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}

.jump-select-stack--open .test-card--pick,
.reaction-select-stack--open .test-card--pick,
.sidejump-select-stack--open .test-card--pick,
.jump-select-stack--open .jump-overlay-tiles-panel,
.reaction-select-stack--open .reaction-overlay-tiles-panel,
.sidejump-select-stack--open .sidejump-overlay-tiles-panel {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.reaction-mode-tile-text {
    flex: 1 1 auto;
    min-width: 0;
}

.reaction-select-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.jump-select-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.jump-select-stack--open .test-card-jump {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}

.test-card-jump .test-card-cta-jump {
    color: #9fd8ff;
}

/* Mode panels — expand / collapse under test card */
.test-mode-panel {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-10px);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top-width: 0 !important;
    transition:
        max-height 0.38s var(--ease),
        opacity 0.3s var(--ease),
        transform 0.34s var(--ease),
        padding 0.34s var(--ease),
        border-width 0.2s var(--ease);
}

.jump-select-stack--open .jump-overlay-tiles-panel,
.reaction-select-stack--open .reaction-overlay-tiles-panel,
.sidejump-select-stack--open .sidejump-overlay-tiles-panel {
    max-height: 1600px;
    opacity: 1;
    transform: translateY(0);
}

.jump-select-stack--open .jump-overlay-tiles-panel {
    padding: 10px 12px 12px !important;
    border-top-width: 0 !important;
}

.reaction-select-stack--open .reaction-overlay-tiles-panel {
    padding: 10px 12px 12px !important;
    border-top-width: 0 !important;
}

.sidejump-select-stack--open .sidejump-overlay-tiles-panel {
    padding: 10px 12px 12px !important;
    border-top-width: 0 !important;
}

@keyframes test-mode-tile-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.jump-select-stack--open .jump-overlay-tiles-panel .reaction-mode-tile {
    animation: test-mode-tile-in 0.34s var(--ease) backwards;
}

.jump-select-stack--open .jump-mode-tile:nth-child(1) {
    animation-delay: 0.05s;
}

.jump-select-stack--open .jump-mode-tile:nth-child(2) {
    animation-delay: 0.11s;
}

.reaction-select-stack--open .reaction-overlay-tiles-panel .reaction-mode-tile {
    animation: test-mode-tile-in 0.34s var(--ease) backwards;
}

.reaction-select-stack--open .reaction-overlay-tiles-panel .reaction-mode-tile:nth-child(1) {
    animation-delay: 0.05s;
}

.reaction-select-stack--open .reaction-overlay-tiles-panel .reaction-mode-tile:nth-child(2) {
    animation-delay: 0.1s;
}

.reaction-select-stack--open .reaction-overlay-tiles-panel .reaction-mode-tile:nth-child(3) {
    animation-delay: 0.15s;
}

.reaction-select-stack--open .reaction-overlay-tiles-panel .reaction-mode-tile:nth-child(4) {
    animation-delay: 0.2s;
}

.sidejump-select-stack--open .sidejump-overlay-tiles-panel .reaction-mode-tile {
    animation: test-mode-tile-in 0.34s var(--ease) backwards;
}

.sidejump-select-stack--open .sidejump-overlay-tiles-panel .reaction-mode-tile:nth-child(1) {
    animation-delay: 0.05s;
}

.sidejump-select-stack--open .sidejump-overlay-tiles-panel .reaction-mode-tile:nth-child(2) {
    animation-delay: 0.1s;
}

.sidejump-select-stack--open .sidejump-overlay-tiles-panel .reaction-mode-tile:nth-child(3) {
    animation-delay: 0.15s;
}

@media (prefers-reduced-motion: reduce) {
    .test-mode-panel {
        transition: none;
    }

    .jump-select-stack--open .jump-overlay-tiles-panel .reaction-mode-tile,
    .reaction-select-stack--open .reaction-overlay-tiles-panel .reaction-mode-tile,
    .sidejump-select-stack--open .sidejump-overlay-tiles-panel .reaction-mode-tile {
        animation: none;
    }
}

.jump-overlay-tiles-panel {
    padding: 10px 12px 12px;
    border-radius: 0 0 16px 16px;
    border: 2px solid rgba(0, 217, 255, 0.5);
    border-top: none;
    background: rgba(8, 12, 28, 0.98);
    box-shadow: none;
}

.jump-mode-tiles-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

.jump-mode-tiles-grid.jump-mode-tiles-grid--single {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 640px) {
    .jump-mode-tiles-grid {
        grid-template-columns: 1fr;
    }
}

.jump-mode-tile--hop:disabled,
.jump-mode-tile--hop[disabled] {
    opacity: 0.42;
    cursor: not-allowed;
    filter: grayscale(0.35);
}

.jump-mode-tile--hop:disabled:hover,
.jump-mode-tile--hop[disabled]:hover {
    transform: none;
    border-color: rgba(0, 217, 255, 0.28);
    box-shadow: none;
}

.reaction-select-stack--open .test-card-reaction {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}

.test-card-reaction {
    width: 100%;
    background: radial-gradient(120% 80% at 10% 0%, rgba(255, 94, 58, 0.35), rgba(18, 8, 32, 0.98));
    border: 1px solid rgba(255, 138, 80, 0.55);
    box-shadow: 0 0 28px rgba(255, 100, 60, 0.12);
}

.test-card-reaction:hover {
    border-color: rgba(255, 180, 120, 0.95);
    box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.8),
        0 0 48px rgba(255, 120, 70, 0.35);
}

.test-card-badge-reaction {
    background: rgba(255, 87, 120, 0.2);
    border-color: rgba(255, 120, 140, 0.75);
    color: #ffd4dc;
    letter-spacing: 0.1em;
}

.test-card-icon-reaction {
    background: radial-gradient(circle, rgba(255, 120, 80, 0.45), rgba(40, 12, 40, 0.98)) !important;
    box-shadow: 0 0 22px rgba(255, 100, 90, 0.55) !important;
}

.test-card-reaction .test-card-cta-reaction {
    color: #ffb48a;
}

.reaction-overlay-tiles-panel {
    padding: 10px 12px 12px;
    border-radius: 0 0 16px 16px;
    border: 2px solid rgba(255, 140, 90, 0.5);
    border-top: none;
    background: rgba(10, 8, 22, 0.98);
    box-shadow: none;
}

.reaction-overlay-tiles-kicker {
    margin: 0 0 12px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(0, 217, 255, 0.75);
}

.reaction-mode-tiles-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
}

@media (max-width: 480px) {
    .reaction-mode-tiles-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Mode sub-cards — same language as .test-card--pick (flat, bordered, minimal icons) */
.reaction-mode-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 13px 14px 11px;
    border-radius: 14px;
    text-align: left;
    cursor: pointer;
    color: inherit;
    font: inherit;
    border: 1px solid rgba(0, 217, 255, 0.35);
    background: rgba(10, 13, 32, 0.98);
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 0.2s var(--ease),
        border-color 0.2s var(--ease),
        box-shadow 0.2s var(--ease),
        background 0.2s var(--ease);
}

.reaction-mode-tile:hover,
.reaction-mode-tile:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(0, 217, 255, 0.8);
    background: rgba(12, 18, 36, 0.98);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.reaction-mode-tile:active {
    transform: translateY(-1px);
}

/* Jump stack — cyan family */
.jump-overlay-tiles-panel .reaction-mode-tile {
    border-color: rgba(0, 217, 255, 0.32);
    background: rgba(10, 13, 32, 0.98);
}

.jump-overlay-tiles-panel .reaction-mode-tile:hover,
.jump-overlay-tiles-panel .reaction-mode-tile:focus-visible {
    border-color: rgba(0, 217, 255, 0.8);
    background: rgba(12, 18, 36, 0.98);
}

.jump-overlay-tiles-panel .reaction-mode-tile-icon {
    background: rgba(0, 217, 255, 0.08);
    border-color: rgba(0, 217, 255, 0.28);
}

.jump-overlay-tiles-panel .reaction-mode-tile-badge {
    background: rgba(0, 217, 255, 0.14);
    border-color: rgba(0, 217, 255, 0.45);
    color: var(--primary-cyan);
}

.jump-overlay-tiles-panel .reaction-mode-tile-text p {
    color: rgba(165, 230, 255, 0.88);
}

.jump-overlay-tiles-panel .reaction-mode-tile-footer {
    color: var(--primary-cyan);
}

/* Reaction stack — warm orange family */
.reaction-overlay-tiles-panel .reaction-mode-tile {
    border-color: rgba(255, 140, 90, 0.32);
    background: rgba(12, 10, 24, 0.98);
}

.reaction-overlay-tiles-panel .reaction-mode-tile:hover,
.reaction-overlay-tiles-panel .reaction-mode-tile:focus-visible {
    border-color: rgba(255, 180, 120, 0.85);
    background: rgba(18, 12, 22, 0.98);
}

.reaction-overlay-tiles-panel .reaction-mode-tile-icon {
    background: rgba(255, 120, 80, 0.08);
    border-color: rgba(255, 140, 90, 0.28);
}

.reaction-overlay-tiles-panel .reaction-mode-tile-badge {
    background: rgba(255, 120, 80, 0.14);
    border-color: rgba(255, 140, 90, 0.4);
    color: #ffb48a;
}

.reaction-overlay-tiles-panel .reaction-mode-tile-text p {
    color: rgba(255, 210, 185, 0.9);
}

.reaction-overlay-tiles-panel .reaction-mode-tile-footer {
    color: #ffb48a;
}

.reaction-mode-tile-main {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    width: 100%;
}

.reaction-mode-tile-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.25rem;
    box-shadow: none;
    border: 1px solid rgba(0, 217, 255, 0.28);
    background: rgba(0, 217, 255, 0.08);
    grid-row: 1;
    align-self: center;
}

.reaction-mode-tile-text {
    flex: 1 1 auto;
    min-width: 0;
}

.reaction-mode-tile-text h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
}

.reaction-mode-tile-badge {
    display: inline-flex;
    margin-top: 5px;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(0, 217, 255, 0.14);
    border: 1px solid rgba(0, 217, 255, 0.35);
    color: var(--primary-cyan);
}

.reaction-mode-tile-text p {
    margin: 6px 0 0;
    font-size: 0.76rem;
    line-height: 1.45;
    color: var(--text-secondary);
    white-space: normal;
}

.reaction-mode-tile-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 2px;
    padding-top: 9px;
    border-top: 1px solid rgba(148, 163, 184, 0.16);
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--primary-cyan);
}

.reaction-mode-tile-cta {
    letter-spacing: 0.04em;
}

.reaction-mode-tile-arrow {
    opacity: 0.7;
    font-size: 0.85rem;
    transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}

.reaction-mode-tile:hover .reaction-mode-tile-arrow,
.reaction-mode-tile:focus-visible .reaction-mode-tile-arrow {
    opacity: 1;
    transform: translateX(2px);
}

@media (hover: none) {
    .jump-overlay-tiles-panel .reaction-mode-tile:active {
        border-color: rgba(0, 217, 255, 0.75);
    }
}

.reaction-sidebar-mode-line {
    font-size: 12px;
    opacity: 0.9;
    margin-bottom: 12px;
    line-height: 1.45;
}

.reaction-sidebar-mode-line strong {
    color: #ffb48a;
}

.reaction-sidebar-mode-hint {
    opacity: 0.65;
    font-weight: 400;
}

.sidebar-main-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1 1 auto;
    min-height: 0;
}

@media (max-width: 1024px) {
    .sidebar-main-stack {
        display: contents;
    }
}

.reaction-minimize-btn {
    margin-left: auto;
    width: auto;
    min-width: 94px;
    height: 34px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(248, 250, 252, 0.92);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
}

.reaction-minimize-btn:hover {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(0, 217, 255, 0.35);
}

/* Reaction sidebar — title with mode + icon tool row */
.reaction-sidebar-card-header {
    flex-wrap: wrap;
    gap: 8px 10px;
}

.reaction-sidebar-card-header .sidebar-card-icon {
    flex-shrink: 0;
}

.reaction-sidebar-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35em 0.45em;
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.25;
    min-width: 0;
    flex: 1 1 auto;
}

.reaction-sidebar-title__main {
    color: var(--text-primary);
}

.reaction-sidebar-title__sep {
    color: rgba(255, 140, 90, 0.5);
    font-weight: 500;
    user-select: none;
}

.reaction-sidebar-title__mode {
    color: #ffb88a;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.jump-sidebar-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35em 0.45em;
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.25;
    min-width: 0;
    flex: 1 1 auto;
}

.jump-sidebar-title__sep {
    color: rgba(192, 132, 252, 0.5);
    font-weight: 500;
    user-select: none;
}

.reaction-tool-icons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: 8px;
    margin: 10px 0 8px;
}

.reaction-tool-icons--mobile-compact .reaction-tool-icon:not(#btnReactionIconLandmarks) {
    display: none;
}

.reaction-tool-icons--mobile-compact #btnReactionIconLandmarks {
    flex: 1 1 auto;
    max-width: 100%;
}

.reaction-tool-icon {
    min-width: 0;
    min-height: 76px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 8px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(12, 16, 28, 0.65);
    color: rgba(148, 163, 184, 0.95);
    font-family: var(--font);
    cursor: pointer;
    transition:
        background 0.2s var(--ease),
        border-color 0.2s var(--ease),
        color 0.2s var(--ease),
        box-shadow 0.2s var(--ease),
        transform 0.12s var(--ease);
}

.reaction-tool-icon:hover {
    border-color: rgba(255, 140, 90, 0.35);
    background: rgba(255, 140, 90, 0.08);
    color: #e2e8f0;
}

.reaction-tool-icon:focus-visible {
    outline: 2px solid rgba(255, 140, 90, 0.65);
    outline-offset: 2px;
}

.reaction-tool-icon:active {
    transform: scale(0.97);
}

.reaction-tool-icon.is-active {
    border-color: rgba(255, 140, 90, 0.55);
    background: linear-gradient(
        165deg,
        rgba(255, 120, 70, 0.22) 0%,
        rgba(255, 140, 90, 0.1) 100%
    );
    color: #ffe8d8;
    box-shadow:
        0 0 0 1px rgba(255, 140, 90, 0.2),
        0 6px 20px rgba(255, 100, 50, 0.12);
}

.reaction-tool-icon.is-active .reaction-tool-icon__svg {
    filter: drop-shadow(0 0 6px rgba(255, 160, 100, 0.35));
}

.reaction-tool-icon.is-active--save {
    border-color: rgba(52, 211, 153, 0.65);
    background: linear-gradient(
        165deg,
        rgba(16, 120, 90, 0.35) 0%,
        rgba(52, 211, 153, 0.12) 100%
    );
    color: #a7f3d0;
    box-shadow:
        0 0 0 1px rgba(52, 211, 153, 0.25),
        0 6px 20px rgba(52, 211, 153, 0.15);
}

.reaction-tool-icon.is-active--save .reaction-tool-icon__svg {
    filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.4));
}

.reaction-tool-icon__svg {
    display: block;
    flex-shrink: 0;
}

.reaction-tool-icon__svg[hidden] {
    display: none !important;
}

.reaction-tool-icon__label {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.1;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reaction-tool-sr-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.app-mode-reaction .reaction-zone-editor-dock:not([hidden]) {
    display: block;
    margin-top: 4px;
}

body.app-mode-reaction .reaction-zone-editor-dock[hidden] {
    display: none !important;
}

/* Reaction sidebar — rounds / time limit */
.reaction-timing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 10px 0 12px;
}

.reaction-timing-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 140, 90, 0.2);
    background: rgba(8, 12, 22, 0.75);
    cursor: pointer;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.reaction-timing-field:focus-within {
    border-color: rgba(255, 140, 90, 0.5);
    box-shadow: 0 0 0 1px rgba(255, 140, 90, 0.15);
}

.reaction-timing-field__label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 180, 130, 0.85);
}

.reaction-timing-field__control {
    display: flex;
    align-items: center;
    gap: 6px;
}

.reaction-timing-field__input {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.35);
    color: #f8fafc;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 1.15rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    outline: none;
    transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}

.reaction-timing-field__input:focus {
    border-color: rgba(255, 140, 90, 0.55);
    background: rgba(0, 0, 0, 0.5);
}

.reaction-timing-field__input::-webkit-outer-spin-button,
.reaction-timing-field__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.reaction-timing-field__input[type='number'] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.reaction-timing-field__unit {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: lowercase;
}

/* Reaction — edit zones panel (desktop sidebar) */
.reaction-zone-edit-panel {
    margin: 8px 0 6px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 140, 90, 0.28);
    background: rgba(255, 120, 70, 0.06);
}

.reaction-zone-edit-panel[hidden] {
    display: none !important;
}

.reaction-zone-edit-panel__hint {
    margin: 0 0 10px;
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.reaction-zone-edit-panel__hint strong {
    color: #ffd4b8;
    font-weight: 700;
}

.reaction-zone-edit-panel .btn-reaction-zones-reset {
    width: 100%;
    min-height: 40px;
    border-color: rgba(255, 140, 90, 0.4);
    background: rgba(255, 140, 90, 0.1);
    color: #ffe8d8;
    font-size: 0.8rem;
}

.reaction-zone-edit-panel .btn-reaction-zones-reset:hover {
    background: rgba(255, 140, 90, 0.18);
    border-color: rgba(255, 180, 120, 0.65);
}

.reaction-zone-edit-panel__done {
    margin: 8px 0 0;
    font-size: 0.68rem;
    line-height: 1.4;
    color: var(--text-muted);
    text-align: center;
}

.reaction-zone-edit-panel__done strong {
    color: #a7f3d0;
    font-weight: 700;
}

.reaction-zone-edit-commit--legacy {
    display: none !important;
}

.btn-reaction-zones-reset--mobile {
    width: 100%;
    min-height: 44px;
    margin: 8px 0 4px;
    font-size: 0.82rem;
}

.btn-reaction-zones-reset--mobile[hidden] {
    display: none !important;
}

.reaction-checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 14px;
    font-size: 13px;
    cursor: pointer;
    color: rgba(248, 250, 252, 0.92);
    user-select: none;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 140, 90, 0.22);
}

.reaction-checkbox-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(0, 0, 0, 0.25);
    position: relative;
    display: inline-block;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.reaction-checkbox-row input[type="checkbox"]:checked {
    background: linear-gradient(135deg, rgba(0, 217, 255, 0.95), rgba(0, 230, 118, 0.55));
    border-color: rgba(0, 217, 255, 0.55);
}

.reaction-checkbox-row input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid #020617;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

#btnReactionSidebarExpand {
    display: none;
}

body.app-mode-reaction #jumpSidebar.reaction-sidebar-collapsed #sidebarMainStack {
    display: none;
}

body.app-mode-reaction #jumpSidebar.reaction-sidebar-collapsed {
    width: auto;
    max-width: none;
    max-height: none;
    overflow: visible;
    padding: 10px 12px;
    gap: 0;
}

body.app-mode-reaction.reaction-sidebar-collapsed #btnReactionSidebarExpand {
    display: inline-flex;
}

.reaction-sidebar-expand-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 48px;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 140, 90, 0.45);
    background: rgba(255, 140, 90, 0.12);
    color: rgba(255, 200, 170, 0.95);
    font-family: var(--font);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.reaction-sidebar-expand-fab__icon,
.reaction-sidebar-expand-fab__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.reaction-sidebar-expand-fab__chev {
    font-size: 1.1rem;
    line-height: 1;
}

.reaction-sidebar-expand-fab:hover {
    background: rgba(255, 140, 90, 0.22);
    border-color: rgba(255, 180, 130, 0.65);
}

.reaction-sidebar-expand-sidebar-dock {
    display: contents;
}

.reaction-sidebar-expand-video-dock {
    display: flex;
    justify-content: center;
    width: 100%;
}

.reaction-sidebar-expand-video-dock:empty {
    display: none;
}

.reaction-zone-editor {
    margin: 8px 0 14px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 140, 90, 0.22);
}

.reaction-zone-editor-summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    color: rgba(255, 200, 170, 0.95);
    list-style: none;
}

.reaction-zone-editor-summary::-webkit-details-marker {
    display: none;
}

.reaction-zone-editor-hint {
    font-size: 11px;
    opacity: 0.78;
    margin: 8px 0 10px;
    line-height: 1.45;
}

.reaction-zone-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.reaction-zone-row {
    display: grid;
    grid-template-columns: 56px 1fr 1fr 1fr;
    gap: 6px;
    align-items: center;
    font-size: 12px;
}

.reaction-zone-row-head {
    font-weight: 600;
    opacity: 0.75;
    font-size: 11px;
}

.reaction-zone-input {
    width: 100%;
    min-width: 0;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(3, 8, 20, 0.85);
    color: #e8f4ff;
    font-size: 12px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

.reaction-zone-edit-commit {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(52, 211, 153, 0.35);
}

.reaction-zone-edit-commit[hidden] {
    display: none !important;
}

.btn-reaction-zones-save,
.btn-reaction-zones-discard {
    flex: 1 1 120px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid transparent;
}

.btn-reaction-zones-save {
    background: rgba(52, 211, 153, 0.22);
    border-color: rgba(52, 211, 153, 0.75);
    color: #6ee7b7;
}

.btn-reaction-zones-save:hover {
    background: rgba(52, 211, 153, 0.34);
}

.btn-reaction-zones-save-icon {
    font-size: 16px;
    line-height: 1;
    font-weight: 800;
}

.btn-reaction-zones-discard {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.22);
    color: rgba(248, 250, 252, 0.88);
}

.btn-reaction-zones-discard:hover {
    background: rgba(255, 80, 80, 0.14);
    border-color: rgba(248, 113, 113, 0.45);
    color: #fecaca;
}

.reaction-zone-editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.btn-reaction-zones-apply,
.btn-reaction-zones-reset {
    flex: 1 1 auto;
    min-width: 120px;
    padding: 8px 12px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid rgba(0, 217, 255, 0.45);
    background: rgba(0, 217, 255, 0.12);
    color: #c8fbff;
}

.btn-reaction-zones-reset {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(248, 250, 252, 0.9);
}

.btn-reaction-zones-apply:hover {
    background: rgba(0, 217, 255, 0.22);
}

.btn-reaction-zones-reset:hover {
    background: rgba(255, 255, 255, 0.1);
}

.test-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: rgba(0, 230, 118, 0.08);
    border: 1px solid rgba(0, 230, 118, 0.4);
    color: #9effc4;
}

.test-card-badge.badge-secondary {
    background: rgba(156, 39, 176, 0.16);
    border-color: rgba(186, 104, 200, 0.65);
    color: #f3e5f5;
}

.test-card-main {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.test-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(0, 217, 255, 0.22), rgba(3, 6, 18, 0.98));
    box-shadow: 0 0 18px rgba(0, 217, 255, 0.35);
    font-size: 1.4rem;
    flex-shrink: 0;
}

/* Font Awesome — test picker, mode tiles, wizard chrome */
.test-picker-fa.fa-solid {
    display: inline-block;
    line-height: 1;
    font-style: normal;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.test-picker-fa--sm {
    font-size: 0.82em;
}

.test-card-icon .test-picker-fa {
    font-size: 1.45rem;
}

.test-card-jump.test-card--pick .test-card-icon .test-picker-fa {
    color: var(--primary-cyan);
}

.test-card-reaction.test-card--pick .test-card-icon .test-picker-fa,
.test-picker-fa--reaction {
    color: #ffb48a;
}

.test-card-sidejump.test-card--pick .test-card-icon .test-picker-fa,
.test-picker-fa--sidejump {
    color: #d8b4fe;
}

.test-card-hand-reaction.test-card--pick .test-card-icon .test-picker-fa,
.test-picker-fa--hand-reaction {
    color: #ffb48a;
}

.reaction-mode-tile-icon .test-picker-fa {
    font-size: 1.12rem;
}

.jump-overlay-tiles-panel .reaction-mode-tile-icon .test-picker-fa {
    color: var(--primary-cyan);
}

.reaction-overlay-tiles-panel .reaction-mode-tile-icon .test-picker-fa {
    color: #ffb48a;
}

.reaction-overlay-tiles-panel .reaction-mode-tile--hand .reaction-mode-tile-icon .test-picker-fa {
    color: #ffb48a;
}

.sidejump-overlay-tiles-panel .reaction-mode-tile-icon .test-picker-fa {
    color: #d8b4fe;
}

.sidejump-overlay-tiles-panel .sidejump-mode-tile--left .reaction-mode-tile-icon .test-picker-fa {
    color: #93c5fd;
}

.sidejump-overlay-tiles-panel .sidejump-mode-tile--right .reaction-mode-tile-icon .test-picker-fa {
    color: #c4b5fd;
}

.reaction-mode-tile-arrow .test-picker-fa {
    opacity: 0.92;
}

.test-select-wizard-btn-icon .fa-solid,
.test-select-identity-bar__chev .fa-solid {
    font-size: 0.92rem;
}

.test-select-identity-bar__chev .fa-solid {
    opacity: 0.75;
}

.test-role-check .fa-solid {
    font-size: 0.62rem;
}

.coach-key-valid-mark .fa-solid {
    font-size: 0.72rem;
}

#jumpSidebarCard .sidebar-card-icon .test-picker-fa {
    color: var(--primary-cyan);
}

body.app-mode-sidejump #jumpSidebarCard .sidebar-card-icon .test-picker-fa {
    color: #d8b4fe;
}

.test-card-secondary .test-card-icon {
    background: radial-gradient(circle, rgba(186, 104, 200, 0.3), rgba(3, 6, 18, 0.98));
    box-shadow: 0 0 18px rgba(186, 104, 200, 0.45);
}

.test-card-text {
    flex: 1;
    min-width: 0;
}

.test-card-text h3 {
    font-size: 1.02rem;
    font-weight: 700;
    margin-bottom: 6px;
    line-height: 1.2;
}

.test-card-text p {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.test-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(148, 163, 184, 0.15);
    font-size: 0.76rem;
    color: var(--primary-cyan);
}

.test-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.test-card-arrow {
    font-size: 0.9rem;
    opacity: 0.8;
    transition: transform 0.18s var(--ease);
}

.test-card:hover .test-card-arrow {
    transform: translateX(4px);
}

/* Sidebar footer */
.sidebar-footer {
    margin-top: 18px;
    padding-top: 10px;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
    text-align: center;
}

.sidebar-footer-text {
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    opacity: 0.9;
    font-size: 0.72rem;
    font-weight: 600;
}

/* Test Summary Modal */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at top, rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.96));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s var(--ease);
    z-index: 1200;
}

.modal-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.modal-card {
    width: min(480px, 92vw);
    max-height: min(600px, 88vh);
    background: radial-gradient(circle at 0% 0%, rgba(0, 217, 255, 0.12), rgba(15, 23, 42, 0.98));
    border-radius: 20px;
    box-shadow:
        0 22px 80px rgba(15, 23, 42, 0.9),
        0 0 0 1px rgba(148, 163, 184, 0.25);
    padding: 16px 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.modal-title {
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.modal-close-btn {
    border: none;
    outline: none;
    background: rgba(15, 23, 42, 0.85);
    color: var(--text-secondary);
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.16s var(--ease), color 0.16s var(--ease), transform 0.12s var(--ease);
}

.modal-close-btn:hover {
    background: rgba(30, 64, 175, 0.95);
    color: #e5f2ff;
    transform: translateY(-1px);
}

.modal-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

.modal-summary-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.modal-jump-list-wrapper {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(148, 163, 184, 0.35);
    max-height: 280px;
    overflow: auto;
    flex-shrink: 1;
}

.modal-jump-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.modal-jump-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.8rem;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.7);
}

.modal-jump-label {
    font-weight: 600;
    color: var(--text-primary);
}

.modal-jump-metrics {
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

/* ═══ Athlete dashboard modal (coach list) ═══ */
.modal-backdrop--athletes.open {
    padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px))
        max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
}

@media (max-width: 640px) {
    .modal-backdrop--athletes.open {
        align-items: flex-end;
        padding: 0;
    }
}

.modal-card--athlete-dashboard {
    width: min(100%, 560px);
    max-width: 100%;
    max-height: min(88vh, 720px);
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .modal-card--athlete-dashboard {
        width: min(760px, 92vw);
        max-height: min(82vh, 680px);
        border-radius: 18px;
    }
}

@media (max-width: 640px) {
    .modal-card--athlete-dashboard {
        width: 100%;
        max-height: min(92dvh, 900px);
        border-radius: 18px 18px 0 0;
        margin-top: auto;
    }
}

.modal-header--athletes {
    padding: 16px 16px 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    flex-shrink: 0;
}

.modal-header__titles {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.modal-header--athletes .modal-title {
    font-size: 1rem;
    letter-spacing: 0.1em;
    margin: 0;
}

.modal-subtitle {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

.modal-body--athletes {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.athlete-dashboard-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    flex-shrink: 0;
    background: rgba(8, 14, 28, 0.45);
}

.athlete-dashboard-filters {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: end;
}

@media (min-width: 520px) {
    .athlete-dashboard-filters {
        grid-template-columns: 1fr auto;
        gap: 12px;
    }
}

.athlete-filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.athlete-filter-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.athlete-group-select {
    width: 100%;
    min-height: 44px;
    padding: 10px 36px 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 42, 0.92);
    color: var(--text-primary);
    font-size: 0.88rem;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.athlete-group-select:focus {
    border-color: var(--primary-cyan);
    box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.18);
}

.athlete-group-run-btn {
    width: 100%;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 12px;
    border: 1px solid rgba(34, 197, 94, 0.55);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.22), rgba(15, 23, 42, 0.95));
    color: #bbf7d0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.12s var(--ease), box-shadow 0.15s var(--ease), border-color 0.15s var(--ease);
}

@media (min-width: 520px) {
    .athlete-group-run-btn {
        width: auto;
        white-space: nowrap;
        align-self: end;
    }
}

.athlete-group-run-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.28);
    border-color: rgba(34, 197, 94, 0.85);
}

.athlete-group-run-btn:active {
    transform: translateY(0);
}

.athlete-search-wrap {
    position: relative;
}

.athlete-dashboard-search {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(15, 23, 42, 0.92);
    color: var(--text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.athlete-dashboard-search::placeholder {
    color: var(--text-muted);
}

.athlete-dashboard-search:focus {
    border-color: var(--primary-cyan);
    box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.18);
}

.athlete-dashboard-hint {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.athlete-dashboard-selected {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-secondary);
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px dashed rgba(148, 163, 184, 0.28);
}

.athlete-dashboard-selected.has-selection {
    color: #a5f3fc;
    font-weight: 600;
    border-color: rgba(0, 217, 255, 0.45);
    background: rgba(0, 217, 255, 0.08);
}

.athlete-list-panel {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-card--athlete-dashboard .modal-jump-list-wrapper.athlete-dashboard-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    margin-top: 0;
    padding: 10px 12px max(14px, env(safe-area-inset-bottom, 0px));
    border-top: none;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.modal-card--athlete-dashboard .modal-athlete-list {
    gap: 8px;
}

.modal-card--athlete-dashboard .modal-jump-list li.athlete-list-item {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    padding: 12px 14px;
    min-height: 52px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(12, 20, 36, 0.72);
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.modal-card--athlete-dashboard .modal-jump-list li.athlete-list-item:hover {
    background: rgba(0, 217, 255, 0.08);
    border-color: rgba(0, 217, 255, 0.35);
}

.modal-card--athlete-dashboard .modal-jump-list li.athlete-list-item.selected {
    background: rgba(0, 217, 255, 0.14);
    border-color: rgba(0, 217, 255, 0.65);
    box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.2);
}

.athlete-list-item__name,
.modal-athlete-list .modal-jump-label {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
    word-break: break-word;
}

.athlete-list-item__meta,
.modal-athlete-list .athlete-row-meta {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--text-secondary);
    word-break: break-word;
}

.athlete-list-item__tags,
.modal-athlete-list .athlete-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}

.athlete-tag {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    color: var(--text-secondary);
    background: rgba(15, 23, 42, 0.85);
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.athlete-tag--group {
    border-color: rgba(96, 165, 250, 0.55);
    color: #bfdbfe;
    background: rgba(30, 64, 175, 0.35);
}

.athlete-tag--group.athlete-tag--clickable {
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.athlete-tag--group.athlete-tag--clickable:hover {
    background: rgba(59, 130, 246, 0.45);
    border-color: rgba(147, 197, 253, 0.85);
}

.athlete-tag--id {
    border-color: rgba(148, 163, 184, 0.5);
    color: rgba(209, 213, 219, 0.95);
}

/* Legacy row layout (group roster etc.) */
.athlete-row-main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.athlete-list-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 16px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.athlete-list-api-hint {
    margin: 0;
    padding: 16px 14px;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.modal-options-row {
    margin-top: 6px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.modal-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.modal-checkbox-label input[type="checkbox"] {
    width: 14px;
    height: 14px;
    border-radius: 4px;
}

.modal-footer {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.send-to-server-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.send-to-server-block .modal-footer-status .athlete-list-spinner {
    width: 18px;
    height: 18px;
    border-width: 2px;
    flex-shrink: 0;
}

.modal-footer-status {
    width: 100%;
    font-size: 0.8rem;
    text-align: right;
    min-height: 2em;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 6px 12px;
    border-radius: 10px;
    transition: background 0.2s ease, color 0.2s ease;
}

.modal-footer-status--loading {
    color: var(--primary-cyan);
    background: rgba(6, 182, 212, 0.08);
    border: 1px solid rgba(6, 182, 212, 0.25);
}

.modal-footer-status--success {
    color: #22c55e;
    font-weight: 600;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.35);
}

.modal-footer-status--success::before {
    content: '✓';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    height: 1.25em;
    border-radius: 50%;
    background: rgba(34, 197, 94, 0.25);
    color: #22c55e;
    font-size: 0.9em;
    font-weight: 700;
}

.modal-footer-status--error {
    color: #f87171;
    font-weight: 500;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.modal-footer-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.modal-footer-btn-wrap {
    display: inline-flex;
}

.modal-export-btn {
    border: 1px solid rgba(148, 163, 184, 0.5);
    background: radial-gradient(circle at 0% 0%, rgba(0, 217, 255, 0.18), rgba(15, 23, 42, 0.98));
    color: var(--text-primary);
    border-radius: 999px;
    padding: 6px 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.9);
    transition:
        box-shadow 0.18s var(--ease),
        transform 0.16s var(--ease),
        background 0.18s var(--ease);
}

.modal-export-btn:hover {
    box-shadow:
        0 0 0 1px rgba(0, 217, 255, 0.9),
        0 0 18px rgba(0, 217, 255, 0.6);
    transform: translateY(-1px);
}

.modal-export-btn--secondary {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(30, 64, 175, 0.15));
    border-color: rgba(59, 130, 246, 0.55);
    letter-spacing: 0.02em;
}

.modal-export-btn--secondary:hover {
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.85), 0 0 16px rgba(59, 130, 246, 0.35);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.28), rgba(30, 64, 175, 0.2));
}

.modal-export-btn.loading {
    opacity: 0.8;
    pointer-events: none;
}

.modal-export-icon {
    font-size: 0.9rem;
}

.modal-export-label {
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    /* Single scroll surface on phone (nested panel scroll often blocks touch) */
    .test-select-scroll {
        padding: 6px;
        padding-top: max(6px, env(safe-area-inset-top, 0px));
        padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
        padding-left: max(6px, env(safe-area-inset-left, 0px));
        padding-right: max(6px, env(safe-area-inset-right, 0px));
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        touch-action: pan-y;
        pointer-events: auto;
    }

    .test-select-panel {
        width: 100%;
        max-width: none;
        height: auto;
        max-height: none;
        min-height: 0;
        display: block;
        overflow: visible;
        padding: 14px 10px 22px;
        padding-bottom: max(22px, calc(env(safe-area-inset-bottom, 0px) + 14px));
        border-radius: 16px;
    }

    .test-select-scroll.test-select-scroll--modes-open .test-select-wizard,
    .test-select-scroll.test-select-scroll--modes-open .test-select-wizard-panes,
    .test-select-scroll.test-select-scroll--modes-open .test-select-block-body--tests {
        display: flex;
        flex-direction: column;
        flex: none;
        min-height: 0;
        width: 100%;
        min-width: 0;
    }

    .test-select-scroll.test-select-scroll--modes-open .test-select-grid--pair {
        display: flex;
        flex-direction: column;
        flex: none;
        min-height: 0;
        width: 100%;
        min-width: 0;
    }

    .test-select-scroll.test-select-scroll--modes-open .reaction-select-stack--open,
    .test-select-scroll.test-select-scroll--modes-open .jump-select-stack--open,
    .test-select-scroll.test-select-scroll--modes-open .sidejump-select-stack--open {
        display: flex;
        flex-direction: column;
        flex: none;
        min-height: 0;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .test-select-header {
        flex-shrink: 0;
    }

    .test-select-wizard {
        flex: 1 1 auto;
        min-height: 0;
        gap: 12px;
    }

    .test-select-panel.has-reaction-modes-open .test-select-wizard,
    .test-select-panel.has-jump-modes-open .test-select-wizard,
    .test-select-panel.has-sidejump-modes-open .test-select-wizard {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .test-select-block {
        padding: 12px 10px 14px;
    }

    /* Reaction / Jump / Side Jump open: mode list uses remaining height */
    .test-select-panel.has-reaction-modes-open .test-select-grid--pair,
    .test-select-panel.has-jump-modes-open .test-select-grid--pair,
    .test-select-panel.has-sidejump-modes-open .test-select-grid--pair {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .reaction-select-stack--open,
    .jump-select-stack--open,
    .sidejump-select-stack--open {
        flex: 0 0 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    /* Mode panels — no nested scroll; whole .test-select-panel scrolls */
    .reaction-select-stack--open .reaction-overlay-tiles-panel,
    .jump-select-stack--open .jump-overlay-tiles-panel,
    .sidejump-select-stack--open .sidejump-overlay-tiles-panel {
        flex: 0 0 auto;
        overflow: visible;
        padding: 10px 10px 12px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .test-select-panel.has-jump-modes-open .jump-mode-tile,
    .test-select-panel.has-sidejump-modes-open .sidejump-mode-tile,
    .test-select-panel.has-reaction-modes-open .reaction-mode-tile {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .test-select-panel.has-reaction-modes-open,
    .test-select-panel.has-jump-modes-open,
    .test-select-panel.has-sidejump-modes-open {
        padding-bottom: max(28px, env(safe-area-inset-bottom, 0px));
    }

    #reactionOverlayModePanel.reaction-overlay-tiles-panel,
    #sideJumpOverlayModePanel.sidejump-overlay-tiles-panel {
        padding-bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 12px));
    }

    /* Free vertical space while picking a mode */
    .test-select-panel.has-reaction-modes-open .test-select-wizard-step-label,
    .test-select-panel.has-jump-modes-open .test-select-wizard-step-label,
    .test-select-panel.has-sidejump-modes-open .test-select-wizard-step-label,
    .test-select-panel.has-reaction-modes-open .test-select-wizard-guide,
    .test-select-panel.has-jump-modes-open .test-select-wizard-guide,
    .test-select-panel.has-sidejump-modes-open .test-select-wizard-guide,
    .test-select-panel.has-reaction-modes-open .test-select-block--who,
    .test-select-panel.has-jump-modes-open .test-select-block--who,
    .test-select-panel.has-sidejump-modes-open .test-select-block--who,
    .test-select-panel.has-reaction-modes-open .test-select-title,
    .test-select-panel.has-jump-modes-open .test-select-title,
    .test-select-panel.has-sidejump-modes-open .test-select-title,
    .test-select-panel.has-reaction-modes-open .test-select-block--tests .test-select-block-head,
    .test-select-panel.has-jump-modes-open .test-select-block--tests .test-select-block-head,
    .test-select-panel.has-sidejump-modes-open .test-select-block--tests .test-select-block-head {
        display: none;
    }

    .test-select-panel.has-reaction-modes-open .test-select-block--tests,
    .test-select-panel.has-jump-modes-open .test-select-block--tests,
    .test-select-panel.has-sidejump-modes-open .test-select-block--tests {
        border: none;
        background: transparent;
        padding: 0;
    }

    .test-select-panel.has-reaction-modes-open .test-select-header,
    .test-select-panel.has-jump-modes-open .test-select-header,
    .test-select-panel.has-sidejump-modes-open .test-select-header {
        margin-bottom: 8px;
    }

    /* Keep Sportify AI visible while choosing a mode */
    .test-select-panel.has-reaction-modes-open .test-select-brand-row,
    .test-select-panel.has-jump-modes-open .test-select-brand-row,
    .test-select-panel.has-sidejump-modes-open .test-select-brand-row {
        display: flex;
    }

    .test-select-panel.has-reaction-modes-open .test-select-brand-lockup,
    .test-select-panel.has-jump-modes-open .test-select-brand-lockup,
    .test-select-panel.has-sidejump-modes-open .test-select-brand-lockup {
        display: flex !important;
        visibility: visible;
    }

    .test-select-panel.has-reaction-modes-open .test-select-brand-tagline,
    .test-select-panel.has-jump-modes-open .test-select-brand-tagline,
    .test-select-panel.has-sidejump-modes-open .test-select-brand-tagline,
    .test-select-panel.has-reaction-modes-open .test-select-version,
    .test-select-panel.has-jump-modes-open .test-select-version,
    .test-select-panel.has-sidejump-modes-open .test-select-version {
        display: none;
    }

    .test-select-panel.has-reaction-modes-open .test-card-reaction,
    .test-select-panel.has-jump-modes-open .test-card-jump,
    .test-select-panel.has-sidejump-modes-open .test-card-sidejump {
        flex-shrink: 0;
        padding: 10px 12px 8px;
        gap: 6px;
    }

    .test-select-panel.has-reaction-modes-open .test-card-reaction .test-card-desc-line,
    .test-select-panel.has-jump-modes-open .test-card-jump .test-card-desc-line,
    .test-select-panel.has-sidejump-modes-open .test-card-sidejump .test-card-desc-line,
    .test-select-panel.has-reaction-modes-open .test-card-reaction .test-card-modes,
    .test-select-panel.has-jump-modes-open .test-card-jump .test-card-modes,
    .test-select-panel.has-sidejump-modes-open .test-card-sidejump .test-card-modes {
        display: none;
    }

    .test-select-panel.has-reaction-modes-open .test-card-reaction .test-card-collapse-hint,
    .test-select-panel.has-jump-modes-open .test-card-jump .test-card-collapse-hint,
    .test-select-panel.has-sidejump-modes-open .test-card-sidejump .test-card-collapse-hint {
        display: block;
        margin-top: 2px;
        font-size: 0.72rem;
    }

    .test-select-panel.has-reaction-modes-open .test-card-reaction .test-card-icon,
    .test-select-panel.has-sidejump-modes-open .test-card-sidejump .test-card-icon,
    .test-select-panel.has-sidejump-modes-open .test-card-icon-sidejump {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
    }

    .test-select-panel.has-jump-modes-open .test-card-jump .test-card-icon {
        width: 36px;
        height: 36px;
        font-size: 1.1rem;
    }

    .test-select-panel.has-reaction-modes-open .test-card-reaction .test-card-text h3,
    .test-select-panel.has-sidejump-modes-open .test-card-sidejump .test-card-text h3 {
        font-size: 0.9rem;
    }

    .test-select-panel.has-jump-modes-open .test-card-jump .test-card-text h3 {
        font-size: 0.9rem;
    }

    .test-select-panel.has-reaction-modes-open .reaction-mode-tiles-grid,
    .test-select-panel.has-jump-modes-open .jump-mode-tiles-grid,
    .test-select-panel.has-sidejump-modes-open .sidejump-mode-tiles-grid {
        gap: 8px;
    }

    .test-select-panel.has-reaction-modes-open .reaction-mode-tile,
    .test-select-panel.has-jump-modes-open .jump-mode-tile,
    .test-select-panel.has-sidejump-modes-open .sidejump-mode-tile {
        padding: 13px 14px 11px;
        gap: 10px;
        min-height: 0;
    }

    .test-select-panel.has-reaction-modes-open .reaction-mode-tile-main,
    .test-select-panel.has-jump-modes-open .reaction-mode-tile-main,
    .test-select-panel.has-sidejump-modes-open .reaction-mode-tile-main {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 10px;
    }

    .test-select-panel.has-reaction-modes-open .reaction-mode-tile-icon,
    .test-select-panel.has-jump-modes-open .reaction-mode-tile-icon,
    .test-select-panel.has-sidejump-modes-open .reaction-mode-tile-icon {
        width: 42px;
        height: 42px;
        font-size: 1.15rem;
        border-radius: 12px;
    }

    .test-select-panel.has-reaction-modes-open .reaction-mode-tile-text h4,
    .test-select-panel.has-jump-modes-open .reaction-mode-tile-text h4,
    .test-select-panel.has-sidejump-modes-open .reaction-mode-tile-text h4 {
        font-size: 0.92rem;
    }

    .test-select-panel.has-reaction-modes-open .reaction-mode-tile-text p,
    .test-select-panel.has-jump-modes-open .reaction-mode-tile-text p,
    .test-select-panel.has-sidejump-modes-open .reaction-mode-tile-text p {
        font-size: 0.76rem;
        line-height: 1.45;
    }

    .test-select-panel.has-reaction-modes-open .reaction-mode-tile-badge,
    .test-select-panel.has-jump-modes-open .reaction-mode-tile-badge,
    .test-select-panel.has-sidejump-modes-open .reaction-mode-tile-badge {
        font-size: 0.58rem;
        padding: 3px 7px;
    }

    .test-select-panel.has-reaction-modes-open .reaction-mode-tile-footer,
    .test-select-panel.has-jump-modes-open .reaction-mode-tile-footer,
    .test-select-panel.has-sidejump-modes-open .reaction-mode-tile-footer {
        font-size: 0.72rem;
        padding-top: 8px;
        min-height: 0;
    }

    /* Side Jump — same mobile picker, subtle violet accent on tiles */
    .test-select-panel.has-sidejump-modes-open .test-card-sidejump {
        border-color: rgba(192, 132, 252, 0.62);
    }

    .test-select-panel.has-sidejump-modes-open .test-card-sidejump .test-card-collapse-hint {
        color: #d8b4fe;
    }

    .test-select-panel.has-sidejump-modes-open .sidejump-mode-tile--both {
        border-left: 3px solid rgba(192, 132, 252, 0.72);
    }

    .test-select-panel.has-sidejump-modes-open .sidejump-mode-tile--left {
        border-left: 3px solid rgba(96, 165, 250, 0.65);
    }

    .test-select-panel.has-sidejump-modes-open .sidejump-mode-tile--right {
        border-left: 3px solid rgba(52, 211, 153, 0.65);
    }

    .test-select-title {
        font-size: 1.2rem;
        margin-top: 8px;
        line-height: 1.28;
    }

    .test-select-subtitle {
        font-size: 0.82rem;
        line-height: 1.5;
    }

    .test-select-header {
        margin-bottom: 14px;
    }

    .test-select-identity-bar {
        padding: 9px 10px 9px 12px;
        border-radius: 7px;
        gap: 8px;
    }

    .test-select-identity-bar--has-badge .test-select-session-status {
        max-width: 6.5rem;
        font-size: 0.64rem;
        padding: 4px 8px;
        border-radius: 5px;
    }

    .test-select-identity-bar .test-select-wizard-btn-label {
        font-size: 0.8rem;
    }

    .test-select-block-head {
        margin-bottom: 14px;
        gap: 10px;
    }

    .test-select-block-body--who {
        gap: 14px;
    }

    /* Wizard step 1 — Guest + Coach side by side (STI hidden on phone) */
    .test-select-wizard-step-1 .test-role-toggle--cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .test-select-wizard-step-1 .test-role-pill {
        min-height: 68px;
        padding: 12px 10px 14px;
        border-radius: 14px;
    }

    .test-select-wizard-step-1 .test-role-label {
        font-size: 1rem;
    }

    .test-select-wizard-step-1 .test-role-sublabel {
        font-size: 0.72rem;
    }

    .test-select-wizard-step-1 .test-role-pill--coach.active {
        border-color: rgba(56, 189, 248, 0.62);
        background: rgba(56, 189, 248, 0.1);
        box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.12);
    }

    .test-select-wizard-step-1 .test-role-pill--guest.active {
        border-color: rgba(0, 217, 255, 0.55);
        background: rgba(0, 217, 255, 0.08);
        box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.1);
    }

    .test-select-wizard-guide {
        font-size: 0.88rem;
    }

    .test-select-wizard-footer {
        margin-top: 12px;
        padding-top: 12px;
        position: sticky;
        bottom: 0;
        z-index: 2;
        background: linear-gradient(
            180deg,
            rgba(13, 16, 32, 0) 0%,
            rgba(13, 16, 32, 0.92) 28%,
            rgba(13, 16, 32, 0.98) 100%
        );
        padding-bottom: 4px;
    }

    .test-select-wizard-btn {
        min-height: 46px;
        font-size: 0.9rem;
    }

    .test-select-brand-mark {
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }

    .test-select-brand-mark .brand-logo {
        width: 28px;
        height: 28px;
    }

    .test-select-brand-wordmark {
        font-size: 1.05rem;
    }

    .test-select-wizard-step-2 .guest-name-input-wrap input {
        min-height: 48px;
        padding: 12px 14px;
        font-size: 0.95rem;
    }

    .test-role-toggle {
        gap: 8px;
    }

    .test-role-pill {
        min-height: 58px;
        padding: 13px 14px;
        border-radius: 12px;
    }

    .test-role-label {
        font-size: 0.95rem;
    }

    .test-role-sublabel {
        font-size: 0.72rem;
    }

    .guest-name-panel {
        margin-top: 0;
        padding: 14px;
    }

    .guest-name-title {
        margin-bottom: 10px;
    }

    .test-select-block-body--tests {
        width: 100%;
        min-width: 0;
    }

    .test-select-panel {
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.72);
    }

    .test-select-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        align-items: stretch;
    }

    .test-select-grid--pair .jump-select-stack,
    .test-select-grid--pair .reaction-select-stack,
    .test-select-grid--pair .sidejump-select-stack {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    /* Collapsed picker cards: equal height on mobile (wizard step 2 = one per row, natural height) */
    .test-select-grid--pair .test-card--pick:not([aria-expanded="true"]) {
        flex: 1 1 auto;
        min-height: 7.35rem;
        box-sizing: border-box;
    }

    .test-select-panel.test-select-wizard-step-3 .test-select-grid--pair .test-card--pick:not([aria-expanded="true"]) {
        flex: 0 0 auto;
        min-height: 0;
    }

    .test-card--pick {
        padding: 14px 14px 13px;
    }

    .test-card--pick .test-card-main {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr) auto;
        grid-template-rows: auto;
        align-items: center;
        column-gap: 12px;
        row-gap: 0;
        min-height: 100%;
    }

    .test-card--pick .test-card-icon,
    .test-card-jump.test-card--pick .test-card-icon,
    .test-card-reaction.test-card--pick .test-card-icon,
    .test-card-reaction.test-card--pick .test-card-icon-reaction,
    .test-card-sidejump.test-card--pick .test-card-icon,
    .test-card-sidejump.test-card--pick .test-card-icon-sidejump {
        width: 48px;
        height: 48px;
        font-size: 1.4rem;
        border-radius: 12px;
        grid-column: 1;
        grid-row: 1;
        align-self: center;
    }

    .test-card--pick .test-card-text {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
    }

    .test-card--pick .test-card-start-cta {
        grid-column: 3;
        grid-row: 1;
        align-self: center;
        justify-self: end;
        margin-left: 0;
        padding-left: 4px;
        font-size: 0.8rem;
    }

    .test-card--pick .test-card-title-row h3 {
        font-size: 0.98rem;
        line-height: 1.3;
    }

    .test-card--pick .test-card-desc-line {
        font-size: 0.78rem;
        line-height: 1.45;
        margin-top: 3px;
        min-height: calc(2 * 1.45em);
        max-height: calc(2 * 1.45em);
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .test-card--pick .test-card-modes {
        flex-wrap: nowrap;
        margin-top: 5px;
        gap: 3px;
        min-height: 1.125rem;
        align-items: center;
    }

    .test-card--pick .test-card-tag {
        font-size: 0.54rem;
        padding: 2px 5px;
        letter-spacing: 0.04em;
    }

    .test-card-sidejump.test-card--pick .test-card-title-row h3 {
        font-size: 0.98rem;
    }

    .test-card-sidejump.test-card--pick .test-card-desc-line {
        font-size: 0.78rem;
        color: rgba(233, 213, 255, 0.9);
    }

    .test-card-sidejump .test-card-tag,
    .test-card-tag--sidejump {
        font-size: 0.56rem;
        padding: 2px 6px;
    }

    .test-card-sidejump.test-card--pick:hover .test-card-chevron,
    .test-card-sidejump.test-card--pick:focus-visible .test-card-chevron {
        color: #d8b4fe;
    }

    /* Coach access: one column, full-width compact button (no cramped side-by-side) */
    .coach-login-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        align-items: stretch;
    }

    .coach-login-actions {
        width: 100%;
    }

    .coach-login-btn {
        width: 100%;
        max-width: 100%;
        padding: 10px 14px;
        font-size: 0.72rem;
        letter-spacing: 0.05em;
        box-shadow:
            0 0 0 1px rgba(15, 23, 42, 0.9),
            0 0 12px rgba(0, 217, 255, 0.38);
    }

    .coach-login-panel {
        padding: 10px 10px 12px;
    }

    .coach-key-valid-mark {
        width: 28px;
        height: 28px;
        font-size: 0.88rem;
    }

    /* Sliders / horizontal drags: fewer compositor fights with vertical page scroll on phones */
    .jump-tune-row input[type='range'],
    #jumpSensitivity,
    .reaction-zone-input[type='number'] {
        touch-action: pan-x;
    }

    /* Jump sidebar: cheaper paint / compositing on phones */
    .jump-history-bars {
        height: 56px;
        padding: 4px 0;
        gap: 2px;
    }

    .history-bar {
        transition: none;
        min-width: 4px;
        max-width: 12px;
    }

    .history-bar:hover {
        transform: none;
        opacity: 0.85;
    }

    .history-bar.latest {
        box-shadow: none;
    }

    .jump-timing-input {
        touch-action: manipulation;
    }
}

@media (max-width: 380px) {
    .test-card--pick .test-card-tag {
        font-size: 0.5rem;
        padding: 2px 4px;
    }

    .test-card-sidejump .test-card-tag,
    .test-card-tag--sidejump {
        font-size: 0.48rem;
        padding: 2px 5px;
    }

    .test-card--pick .test-card-modes {
        gap: 2px;
    }
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0, 217, 255, 0.12); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 217, 255, 0.25); }


/* ═══════════════════════════════════════════
   ANIMATED BACKGROUND ORBS
   ═══════════════════════════════════════════ */

.bg-orbs {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.12;
    animation: orb-float 20s ease-in-out infinite alternate;
}

.orb-1 {
    width: 500px; height: 500px;
    background: var(--primary-cyan);
    top: -10%; left: -5%;
    animation-duration: 22s;
}

.orb-2 {
    width: 400px; height: 400px;
    background: var(--electric-blue);
    bottom: -10%; right: -5%;
    animation-duration: 18s;
    animation-delay: -5s;
}

.orb-3 {
    width: 300px; height: 300px;
    background: linear-gradient(135deg, var(--primary-cyan), var(--electric-blue));
    top: 40%; left: 50%;
    transform: translateX(-50%);
    animation-duration: 25s;
    animation-delay: -10s;
    opacity: 0.06;
}

@keyframes orb-float {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(40px, -30px) scale(1.05); }
    66%  { transform: translate(-20px, 20px) scale(0.95); }
    100% { transform: translate(30px, -10px) scale(1.02); }
}


/* ═══════════════════════════════════════════
   APP WRAPPER — Centered Column
   ═══════════════════════════════════════════ */

.app-wrapper {
    position: relative;
    z-index: 1;
    width: 95%;
    max-width: 2200px;
    margin: 0 auto;
    padding: 24px 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.app-wrapper.blurred {
    filter: blur(18px);
    transform: scale(0.99);
    transform-origin: center top;
    pointer-events: none;
    transition: filter 0.4s var(--ease), transform 0.4s var(--ease);
}

.app-wrapper > * {
    width: 100%;
}


/* ═══════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════ */

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 18px 28px;
    background: rgba(20, 24, 36, 0.75);
    backdrop-filter: blur(24px) saturate(1.5);
    -webkit-backdrop-filter: blur(24px) saturate(1.5);
    border-radius: var(--r-xl);
    border: 1px solid var(--border-color);
    box-shadow:
        0 0 30px rgba(0, 217, 255, 0.06),
        0 8px 32px rgba(0, 0, 0, 0.3);
    position: relative;
    /* visible: overflow:hidden + backdrop-filter clips gradient title / badge on mobile Safari */
    overflow: visible;
}

.app-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        var(--primary-cyan) 30%,
        var(--electric-blue) 70%,
        transparent);
    animation: header-glow 4s ease-in-out infinite;
}

@keyframes header-glow {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1; }
}

/* Brand */
.header-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.brand-glow-ring {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(0, 217, 255, 0.28);
    animation: ring-pulse 3s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes ring-pulse {
    0%, 100% { box-shadow: 0 0 15px rgba(0, 217, 255, 0.1); }
    50%      { box-shadow: 0 0 30px rgba(0, 217, 255, 0.2); }
}

.brand-logo--header {
    width: 34px;
    height: 34px;
}

.brand-main-row {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    row-gap: 6px;
    min-width: 0;
}

/* ── Group test session bar (header) — fixed column widths (names use …) ── */
.group-test-bar[hidden],
body:not(.group-test-active) .group-test-bar {
    display: none !important;
}

.group-test-bar {
    --gtb-tag-slot: 13rem;
    --gtb-athlete-slot: 9.5rem;
    --gtb-counter-slot: 4.75rem;
    --gtb-nav-slot: 4.25rem;
    --gtb-gap: 0.75rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--gtb-gap);
    flex: 0 0 auto;
    width: max-content;
    max-width: 100%;
    padding: 8px 12px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(8, 16, 32, 0.96), rgba(12, 22, 42, 0.92));
    border: 1px solid rgba(0, 217, 255, 0.28);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.35) inset,
        0 4px 20px rgba(0, 0, 0, 0.25);
}

/* Flatten rows on desktop so tag | athlete | counter | nav stay one line */
.group-test-bar__row--top,
.group-test-bar__row--athlete,
.group-test-bar__aside {
    display: contents;
}

.group-test-bar__tag {
    order: 1;
}

.group-test-bar__fields {
    order: 2;
}

.group-test-bar__counter {
    order: 3;
}

.group-test-bar__nav {
    order: 4;
}

.group-test-bar__tag {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 var(--gtb-tag-slot);
    width: var(--gtb-tag-slot);
    min-width: var(--gtb-tag-slot);
    max-width: var(--gtb-tag-slot);
    padding-right: 10px;
    border-right: 1px solid rgba(148, 163, 184, 0.25);
    overflow: hidden;
    box-sizing: border-box;
}

.group-test-bar__roster-btn {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 8px;
    border: 1px solid rgba(0, 217, 255, 0.45);
    background: rgba(0, 217, 255, 0.1);
    color: var(--primary-cyan);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s;
}

.group-test-bar__roster-btn:hover {
    background: rgba(0, 217, 255, 0.2);
    border-color: var(--primary-cyan);
}

.group-test-bar__roster-btn:active {
    transform: scale(0.96);
}

.group-test-bar__roster-icon {
    display: block;
}

.group-test-bar__tag-name {
    display: block;
    flex: 1 1 0;
    width: 0;
    min-width: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #7dd3fc;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-test-bar__tag-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.85);
    animation: group-test-pulse 2s ease-in-out infinite;
}

@keyframes group-test-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.65; transform: scale(0.92); }
}

.group-test-bar__fields {
    flex: 0 0 var(--gtb-athlete-slot);
    width: var(--gtb-athlete-slot);
    min-width: var(--gtb-athlete-slot);
    max-width: var(--gtb-athlete-slot);
    overflow: hidden;
    box-sizing: border-box;
}

.group-test-bar__field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.group-test-bar__label {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1;
}

.group-test-bar__value {
    display: block;
    width: 100%;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-test-bar__field--athlete .group-test-bar__value {
    color: #86efac;
}

.group-test-bar__counter {
    flex: 0 0 var(--gtb-counter-slot);
    width: var(--gtb-counter-slot);
    min-width: var(--gtb-counter-slot);
    max-width: var(--gtb-counter-slot);
    box-sizing: border-box;
    font-size: 0.75rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: #e2e8f0;
    padding: 6px 8px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.3);
    white-space: nowrap;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.group-test-bar__nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 var(--gtb-nav-slot);
    width: var(--gtb-nav-slot);
    min-width: var(--gtb-nav-slot);
    max-width: var(--gtb-nav-slot);
    justify-content: flex-end;
}

.group-test-bar__nav-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    background: rgba(15, 23, 42, 0.95);
    color: #e2e8f0;
    font-size: 1.25rem;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.15s;
}

.group-test-bar__nav-btn:hover:not(:disabled) {
    border-color: var(--primary-cyan);
    color: var(--primary-cyan);
    background: rgba(0, 217, 255, 0.08);
}

.group-test-bar__nav-btn:active:not(:disabled) {
    transform: scale(0.96);
}

.group-test-bar__nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Group test bar — tablet / phone (stacked rows, counter + nav grouped) */
@media (max-width: 900px) {
    body.group-test-active .header-brand {
        max-width: none;
        width: 100%;
    }

    body.group-test-active .group-test-bar {
        flex: 1 1 100%;
        align-self: stretch;
    }

    .group-test-bar {
        --gtb-tag-slot: auto;
        --gtb-athlete-slot: auto;
        --gtb-counter-slot: auto;
        --gtb-nav-slot: auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        padding: 12px;
    }

    .group-test-bar__row--top,
    .group-test-bar__row--athlete,
    .group-test-bar__aside {
        display: flex;
    }

    .group-test-bar__row--top {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        min-width: 0;
        order: unset;
    }

    .group-test-bar__row--athlete {
        flex-direction: column;
        width: 100%;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid rgba(148, 163, 184, 0.22);
        order: unset;
    }

    .group-test-bar__tag {
        order: unset;
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        max-width: none;
        padding-right: 0;
        border-right: none;
    }

    .group-test-bar__aside {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        order: unset;
    }

    .group-test-bar__fields {
        order: unset;
        flex: none;
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .group-test-bar__field--athlete .group-test-bar__value {
        font-size: 0.95rem;
        line-height: 1.35;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
    }

    .group-test-bar__counter {
        order: unset;
        flex: 0 0 auto;
        width: auto;
        min-width: 3.5rem;
        max-width: none;
        padding: 8px 12px;
        font-size: 0.82rem;
    }

    .group-test-bar__nav {
        order: unset;
        flex: 0 0 auto;
        width: auto;
        min-width: auto;
        max-width: none;
        gap: 6px;
        justify-content: flex-end;
    }

    .group-test-bar__nav-btn {
        width: 40px;
        height: 40px;
    }

    .group-test-bar__tag-name {
        width: auto;
        flex: 1 1 auto;
        font-size: 0.84rem;
    }

    .group-test-bar__roster-btn {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }
}

/* Group roster modal */
.modal-card--group-roster {
    max-width: min(420px, 94vw);
}

.group-roster-summary {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
    line-height: 1.4;
}

.group-roster-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-bottom: 12px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.group-roster-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.group-roster-legend__item::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.group-roster-legend__item--done::before {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
}

.group-roster-legend__item--pending::before {
    background: rgba(148, 163, 184, 0.5);
}

.group-roster-legend__item--current::before {
    background: var(--primary-cyan);
}

.group-roster-legend__item--done { color: #86efac; }
.group-roster-legend__item--pending { color: var(--text-muted); }
.group-roster-legend__item--current { color: #7dd3fc; }

.group-roster-list-wrap {
    max-height: min(52vh, 380px);
    overflow-y: auto;
}

.group-roster-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.group-roster-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.6);
    margin-bottom: 6px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.group-roster-row:hover {
    border-color: rgba(0, 217, 255, 0.45);
    background: rgba(0, 217, 255, 0.06);
}

.group-roster-row--current {
    border-color: rgba(0, 217, 255, 0.55);
    background: rgba(0, 217, 255, 0.1);
    box-shadow: 0 0 12px rgba(0, 217, 255, 0.12);
}

.group-roster-row__status {
    flex: 0 0 1.25rem;
    font-size: 0.85rem;
    font-weight: 800;
    text-align: center;
}

.group-roster-row--done .group-roster-row__status {
    color: #4ade80;
}

.group-roster-row--pending .group-roster-row__status {
    color: rgba(148, 163, 184, 0.7);
}

.group-roster-row__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: #e2e8f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.group-roster-row__badge {
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 7px;
    border-radius: 6px;
}

.group-roster-row--done .group-roster-row__badge {
    color: #86efac;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(74, 222, 128, 0.35);
}

.group-roster-row--pending .group-roster-row__badge {
    color: var(--text-muted);
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.brand-text h1 {
    font-size: 1.56rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    background: linear-gradient(135deg, var(--primary-cyan), var(--electric-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.35;
    padding-block: 2px;
}

.brand-role-badge {
    display: none;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(34, 197, 94, 0.16);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.5);
}

.brand-role-badge--coach {
    background: rgba(0, 217, 255, 0.12);
    color: #a5f3fc;
    border-color: rgba(0, 217, 255, 0.45);
}

.brand-role-badge--guest {
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 600;
    background: rgba(34, 197, 94, 0.14);
    color: #86efac;
    border-color: rgba(74, 222, 128, 0.45);
}

/* Group test: brand stays compact; bar sits between brand and chips */
body.group-test-active .app-header {
    align-items: center;
    gap: 12px 16px;
}

body.group-test-active .header-brand {
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(220px, 38vw);
}

body.group-test-active .brand-main-row .brand-role-badge {
    display: none !important;
}

body.group-test-active .group-test-bar {
    flex: 0 0 auto;
}

body.group-test-active .header-chips {
    flex: 0 0 auto;
}

.brand-version {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Chips */
.header-chips {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.chip {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    background: rgba(26, 31, 46, 0.8);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    font-size: 0.74rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s var(--ease);
}

.chip-action {
    cursor: pointer;
    background: linear-gradient(135deg, rgba(0, 217, 255, 0.16), rgba(0, 102, 255, 0.35));
    border-color: rgba(0, 217, 255, 0.7);
    box-shadow:
        0 0 18px rgba(0, 217, 255, 0.4),
        0 0 40px rgba(0, 102, 255, 0.25);
}

.chip-action .chip-icon {
    filter: drop-shadow(0 0 8px rgba(0, 217, 255, 0.6));
}

.chip-action .chip-value {
    color: var(--primary-cyan);
    font-weight: 800;
}

#btnCoachAthleteList .chip-value {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(226, 232, 240, 0.9);
}

.chip-action:hover {
    transform: translateY(-1px) scale(1.02);
    border-color: rgba(0, 217, 255, 1);
    box-shadow:
        0 0 26px rgba(0, 217, 255, 0.65),
        0 0 60px rgba(0, 102, 255, 0.4);
}

.chip:hover {
    border-color: var(--border-color);
    box-shadow: 0 0 12px rgba(0, 217, 255, 0.06);
}

.chip-icon { font-size: 0.9rem; line-height: 1; }
.chip-label { color: var(--text-muted); font-weight: 500; }
.chip-value { font-weight: 700; color: var(--text-secondary); }

.chip-inference-badge {
    display: inline-flex;
    align-items: center;
    margin-inline-start: 0.35rem;
    padding: 0.12rem 0.45rem;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: #94a3b8;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.28);
    vertical-align: middle;
}

.chip-inference-badge[data-delegate='GPU'] {
    color: #5eead4;
    border-color: rgba(45, 212, 191, 0.45);
    background: rgba(13, 148, 136, 0.15);
}

.chip-inference-badge[data-delegate='CPU'] {
    color: #fcd34d;
    border-color: rgba(251, 191, 36, 0.4);
    background: rgba(180, 83, 9, 0.12);
}

body.platform-handset .header-chips .chip:first-child {
    flex-wrap: wrap;
    row-gap: 0.2rem;
}

body.platform-handset .header-chips > .chip:not(.chip-action) {
    position: relative;
    padding-inline-end: 2.5rem;
}

.chip-pose-info-btn {
    flex-shrink: 0;
    margin-inline-start: auto;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(0, 217, 255, 0.45);
    background: rgba(0, 217, 255, 0.12);
    color: #7dd3fc;
    font-size: 0.85rem;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.chip-pose-info-btn:active {
    transform: scale(0.94);
    background: rgba(0, 217, 255, 0.22);
}

body.platform-handset .header-chips > .chip:not(.chip-action) .chip-pose-info-btn {
    position: absolute;
    inset-inline-end: 8px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}

body.platform-handset .header-chips > .chip:not(.chip-action) .chip-pose-info-btn:active {
    transform: translateY(-50%) scale(0.94);
}

.modal-card--pose-diag {
    width: min(420px, 94vw);
    max-height: min(82vh, 640px);
}

.modal-body--pose-diag {
    min-height: 0;
    overflow: hidden;
}

.pose-diag-engine-switch {
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(56, 189, 248, 0.35);
    background: rgba(8, 47, 73, 0.35);
}

.pose-diag-engine-switch__title {
    margin: 0 0 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #e2e8f0;
}

.pose-diag-engine-switch__hint {
    font-weight: 400;
    color: #94a3b8;
    font-size: 0.75rem;
}

.pose-diag-engine-switch__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pose-diag-engine-btn {
    flex: 1 1 140px;
    min-height: 36px;
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    background: rgba(15, 23, 42, 0.75);
    color: #e2e8f0;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.pose-diag-engine-btn.is-active {
    border-color: rgba(52, 211, 153, 0.65);
    background: rgba(6, 78, 59, 0.45);
    color: #6ee7b7;
}

.pose-diag-summary {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pose-diag-status {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    background: rgba(15, 23, 42, 0.6);
}

.pose-diag-status--ok {
    border-color: rgba(52, 211, 153, 0.45);
    background: rgba(6, 78, 59, 0.25);
}

.pose-diag-status--error {
    border-color: rgba(248, 113, 113, 0.45);
    background: rgba(127, 29, 29, 0.22);
}

.pose-diag-status--warn {
    border-color: rgba(251, 191, 36, 0.45);
    background: rgba(120, 53, 15, 0.22);
}

.pose-diag-status-head {
    font-size: 0.82rem;
    font-weight: 800;
    color: #e2e8f0;
}

.pose-diag-status-detail {
    margin: 6px 0 0;
    font-size: 0.74rem;
    line-height: 1.45;
    color: #94a3b8;
}

.pose-diag-kv-grid {
    display: grid;
    gap: 6px;
}

.pose-diag-kv {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.72rem;
}

.pose-diag-k {
    color: var(--text-muted);
}

.pose-diag-v {
    font-weight: 700;
    color: #cbd5e1;
    text-align: end;
}

.pose-diag-log-title {
    margin: 4px 0 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.pose-diag-log {
    flex: 1;
    min-height: 120px;
    max-height: 38vh;
    overflow: auto;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.2);
    font-size: 0.68rem;
    line-height: 1.45;
}

.pose-diag-log-line {
    margin-bottom: 4px;
    word-break: break-word;
}

.pose-diag-log-t {
    color: #64748b;
}

.pose-diag-log-empty {
    margin: 0;
    color: #94a3b8;
    font-size: 0.74rem;
}

.pose-diag-log .log-success { color: #34d399; }
.pose-diag-log .log-warning { color: #fbbf24; }
.pose-diag-log .log-error { color: #f87171; }
.pose-diag-log .log-info { color: #94a3b8; }

.modal-backdrop--pose-diag.open {
    z-index: 1250;
}

.mono-val {
    font-family: var(--mono);
    color: var(--primary-cyan);
    min-width: 18px;
    text-align: center;
}

.chip-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
    transition: all 0.4s var(--ease);
}

.chip-dot.active {
    background: var(--success);
    box-shadow: 0 0 8px var(--success);
    animation: dot-pulse 2s ease-in-out infinite;
}

@keyframes dot-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}


/* ═══════════════════════════════════════════
   NOTICE BANNER
   ═══════════════════════════════════════════ */

.notice-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 20px;
    background: var(--warning-dim);
    border: 1px solid rgba(255, 171, 64, 0.25);
    border-radius: var(--r-md);
    color: var(--warning);
    font-size: 0.82rem;
    backdrop-filter: blur(10px);
}

.notice-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
.notice-text strong { display: block; margin-bottom: 3px; }
.notice-text p { font-size: 0.78rem; opacity: 0.85; margin: 0; word-break: break-word; }

.notice-banner--error {
    background: rgba(220, 38, 38, 0.14);
    border-color: rgba(248, 113, 113, 0.45);
    color: #fecaca;
}

.chip-dot--error {
    background: #ef4444 !important;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.75);
}


/* ═══════════════════════════════════════════
   SECTION — Glass Card
   ═══════════════════════════════════════════ */

.section-video,
.section-log {
    background: rgba(20, 24, 36, 0.6);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-radius: var(--r-xl);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
    transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.section-video:hover,
.section-log:hover {
    border-color: rgba(0, 217, 255, 0.12);
    box-shadow: 0 0 40px rgba(0, 217, 255, 0.04);
}

/* Section title bar */
.section-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    border-bottom: 1px solid var(--border-subtle);
    background: rgba(0, 217, 255, 0.015);
    flex-wrap: wrap;
    gap: 12px;
}

.section-title-bar h2 {
    font-size: 0.9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sec-icon { font-size: 1.05rem; line-height: 1; }

.sec-icon--svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    color: var(--primary-cyan);
}

.sec-icon--svg .sec-icon__svg {
    display: block;
    width: 1.1rem;
    height: 1.1rem;
    filter: drop-shadow(0 0 6px rgba(0, 217, 255, 0.35));
}

.title-bar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Desktop: Real-Time Test toolbar stays one row (tab markup is flattened) */
@media (min-width: 769px) {
    #videoMobileTabsNav,
    #videoMobileSetupHint,
    #videoToolBtnsLabel {
        display: none !important;
    }

    #videoMobileStageChrome {
        display: contents;
    }

    /* Wrapper around setup panel (mobile dock moves panel out; desktop must flatten). */
    #videoMobileSetupHome,
    .video-mobile-setup-home {
        display: contents !important;
    }

    #videoMobileSetupDock,
    .video-mobile-chrome-only,
    .video-mobile-camera-settings-toggle,
    .video-mobile-stage-connect-pulse,
    .video-raw-frame-console__settings-btn,
    .video-raw-frame-console__connect,
    .video-raw-frame-console__shell {
        display: none !important;
    }

    .video-raw-frame-console__topbar {
        position: absolute;
        bottom: 12px;
        left: 50%;
        top: auto;
        transform: translateX(-50%);
        display: flex !important;
        align-items: center;
        gap: 7px;
        width: auto;
        padding: 6px 14px;
        border-radius: var(--r-full);
        background: rgba(10, 14, 26, 0.88);
        border: 1px solid rgba(148, 163, 184, 0.22);
        pointer-events: auto;
    }

    .video-desktop-frame-label-part {
        display: inline-flex;
    }

    #btnVideoMobileNext {
        display: none !important;
    }

    #videoPanelTest {
        display: none !important;
    }

    #videoPanelSetup,
    #videoPanelSetup.is-active,
    #videoPanelSetup:not(.is-active) {
        display: contents !important;
    }

    #videoPanelSetup .video-mobile-setup-hint {
        display: none !important;
    }

    .video-mobile-setup-actions {
        display: contents;
    }

    /* Flattened toolbar: camera → tools → connect (DOM order was changed for mobile) */
    .title-bar-actions.title-bar-actions--video {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }

    .title-bar-actions--video .camera-select-row {
        order: 1;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        width: auto;
    }

    .title-bar-actions--video .video-tool-btns {
        order: 2;
        width: auto;
        flex-wrap: nowrap;
    }

    .title-bar-actions--video #btnStart {
        order: 3;
        width: auto;
    }

    .title-bar-actions--video #btnOpenVideo {
        order: 4;
        width: auto;
    }

    .title-bar-actions--video #btnRetryVideoTest {
        order: 5;
        width: auto;
    }

    .title-bar-actions--video #btnStopAll {
        order: 6;
        width: auto;
    }

    body.app-mode-jump #videoPanelSetup .camera-select-row,
    body.app-mode-sidejump #videoPanelSetup .camera-select-row,
    body.app-mode-reaction #videoPanelSetup .camera-select-row,
    body.app-mode-jump #videoPanelSetup .video-view-options,
    body.app-mode-sidejump #videoPanelSetup .video-view-options,
    body.app-mode-reaction #videoPanelSetup .video-view-options,
    body.app-mode-jump #videoPanelSetup .video-tool-btns,
    body.app-mode-jump #videoPanelSetup .video-tool-btns-label,
    body.app-mode-sidejump #videoPanelSetup .video-tool-btns,
    body.app-mode-sidejump #videoPanelSetup .video-tool-btns-label,
    body.app-mode-reaction #videoPanelSetup .video-tool-btns,
    body.app-mode-reaction #videoPanelSetup .video-tool-btns-label,
    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,
    body.app-mode-jump #videoPanelSetup #btnVideoMobileNext,
    body.app-mode-sidejump #videoPanelSetup #btnVideoMobileNext,
    body.app-mode-reaction #videoPanelSetup #btnVideoMobileNext {
        order: unset;
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }

    body.app-mode-jump .title-bar-actions--video .btn-connect,
    body.app-mode-sidejump .title-bar-actions--video .btn-connect,
    body.app-mode-reaction .title-bar-actions--video .btn-connect,
    body.app-mode-jump .title-bar-actions--video .btn-disconnect,
    body.app-mode-sidejump .title-bar-actions--video .btn-disconnect,
    body.app-mode-reaction .title-bar-actions--video .btn-disconnect {
        width: auto;
        min-height: 0;
    }
}

/* Mobile: Camera | Test tabs above setup / test panels */
@media (max-width: 768px) {
    .title-bar-actions.title-bar-actions--video {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    #videoMobileTabsNav {
        display: flex;
        width: 100%;
        gap: 4px;
        padding: 4px;
        border-radius: var(--r-md);
        background: rgba(10, 14, 26, 0.5);
        border: 1px solid var(--border-subtle);
        box-sizing: border-box;
    }

    .video-mobile-tab {
        flex: 1;
        min-height: 40px;
        padding: 0 12px;
        border: none;
        border-radius: calc(var(--r-md) - 2px);
        background: transparent;
        color: var(--text-muted);
        font-family: var(--font);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        cursor: pointer;
        transition: background 0.2s var(--ease), color 0.2s var(--ease);
    }

    .video-mobile-tab:hover:not(:disabled) {
        color: var(--text-secondary);
        background: rgba(255, 255, 255, 0.04);
    }

    .video-mobile-tab.is-active {
        color: var(--text-primary);
        background: rgba(0, 217, 255, 0.1);
        box-shadow: inset 0 0 0 1px rgba(0, 217, 255, 0.22);
    }

    .video-mobile-tab:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

    #videoPanelSetup {
        display: none;
        flex-direction: column;
        gap: 10px;
    }

    #videoPanelSetup.is-active {
        display: flex;
    }

    #videoPanelTest {
        display: none;
        flex-direction: column;
        gap: 10px;
    }

    #videoPanelTest.is-active {
        display: flex;
    }

    .video-mobile-setup-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .btn-video-mobile-next {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 50px;
        padding: 0 16px;
        border-radius: var(--r-md);
        border: 1px solid rgba(0, 217, 255, 0.45);
        background: rgba(0, 217, 255, 0.12);
        color: var(--primary-cyan);
        font-family: var(--font);
        font-size: 0.82rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        cursor: pointer;
        transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
    }

    .btn-video-mobile-next:hover:not(:disabled) {
        background: rgba(0, 217, 255, 0.2);
        border-color: rgba(0, 217, 255, 0.65);
    }

    .btn-video-mobile-next:disabled {
        opacity: 0.38;
        cursor: not-allowed;
    }

    /* Reaction stage fullscreen: keep hidden on narrow viewports (layout / API issues on phones). */
    #btnReactionFullscreen {
        display: none !important;
    }

    .video-mobile-test-hint {
        margin: 0;
        font-size: 0.72rem;
        line-height: 1.45;
        color: var(--text-muted);
        font-weight: 500;
    }

    .video-mobile-test-hint strong {
        color: var(--text-secondary);
        font-weight: 700;
    }

    .jump-counter-mobile-host {
        display: none !important;
        width: 100%;
        min-width: 0;
    }

    /* Reaction Test tab: Edit zones (reaction only — never jump) */
    .video-mobile-reaction-tools[hidden] {
        display: none !important;
    }

    body.app-mode-jump .video-mobile-reaction-tools,
    body.app-mode-jump #btnReactionEditZonesMobile,
    body.app-mode-jump .reaction-zone-editor--mobile-test {
        display: none !important;
    }

    .video-mobile-reaction-tools:not([hidden]) {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        margin-bottom: 10px;
    }

    .btn-reaction-edit-zones-mobile {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-height: 48px;
        padding: 12px 16px;
        border-radius: var(--r-md);
        border: 1px solid rgba(255, 140, 90, 0.55);
        background: rgba(255, 120, 70, 0.14);
        color: #ffe8d8;
        font-family: var(--font);
        font-size: 0.88rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        cursor: pointer;
        transition: background 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.12s var(--ease);
    }

    .btn-reaction-edit-zones-mobile:hover {
        background: rgba(255, 140, 90, 0.22);
        border-color: rgba(255, 180, 120, 0.85);
    }

    .btn-reaction-edit-zones-mobile.is-active {
        background: rgba(0, 217, 255, 0.16);
        border-color: rgba(0, 217, 255, 0.55);
        color: #c8f6ff;
    }

    .btn-reaction-edit-zones-mobile-icon {
        font-size: 1.1rem;
        line-height: 1;
    }

    .video-mobile-reaction-zones-hint {
        margin: 0;
        font-size: 0.72rem;
        line-height: 1.45;
        color: var(--text-muted);
    }

    .video-mobile-reaction-zones-hint strong {
        color: var(--text-secondary);
        font-weight: 700;
    }

    .reaction-zone-edit-commit--mobile {
        margin: 0;
    }

    .reaction-zone-editor-mobile-host {
        width: 100%;
    }

    .reaction-zone-editor--mobile-test {
        margin: 0;
        width: 100%;
    }

    .reaction-zone-editor--mobile-test .reaction-zone-editor-summary {
        font-size: 0.82rem;
        margin-bottom: 4px;
    }

    .reaction-zone-editor--mobile-test .reaction-zone-editor-hint {
        font-size: 0.72rem;
        margin: 6px 0 10px;
    }

    .reaction-zone-editor--mobile-test .btn-reaction-zones-reset {
        width: 100%;
        min-height: 44px;
        font-size: 0.82rem;
    }

    body.app-mode-reaction .reaction-zone-edit-checkbox-row,
    body.app-mode-reaction .reaction-zone-editor-dock {
        display: none !important;
    }

    /* Jump Counter is only in Real-Time Test → Test tab (JS reparent). Hide sidebar dock so it never stacks under the video. */
    #jumpSidebarCardDock {
        display: none !important;
    }

    /* Jump Counter card when shown inside the Test tab (moved by JS) */
    #jumpCounterMobileHost #jumpSidebarCard {
        width: 100%;
        max-width: 100%;
        margin: 0;
        box-shadow:
            0 0 0 1px rgba(0, 217, 255, 0.12),
            0 8px 28px rgba(0, 0, 0, 0.35);
    }

    /* Lighter disconnect: less glow / paint than desktop red pill */
    .title-bar-actions--video .btn-disconnect {
        background: rgba(185, 28, 28, 0.2);
        color: #fecaca;
        border: 1px solid rgba(248, 113, 113, 0.4);
        box-shadow: none;
        font-weight: 600;
    }

    .title-bar-actions--video .btn-disconnect:hover {
        background: rgba(220, 38, 38, 0.28);
        box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.25);
        transform: none;
    }

    .title-bar-actions--video .btn-disconnect:active {
        transform: scale(0.98);
    }

    .title-bar-actions--video .btn-disconnect-dot {
        animation: none;
        opacity: 0.75;
        background: #fca5a5;
    }
}

/* ═══ Jump + Side Jump + Reaction — mobile handset (controls sheet on top, video below) ═══ */
@media (max-width: 768px), ((max-width: 1000px) and (hover: none) and (pointer: coarse)) {
    body.app-mode-jump .main-content-layout , body.app-mode-sidejump .main-content-layout,
    body.app-mode-reaction .main-content-layout {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

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

    body.app-mode-jump .content-main , body.app-mode-sidejump .content-main,
    body.app-mode-reaction .content-main {
        width: 100%;
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        height: auto;
        gap: 0;
        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;
        border-radius: 16px;
        border-color: rgba(0, 217, 255, 0.18);
        background: rgba(12, 16, 30, 0.92);
    }

    body.app-mode-reaction .section-video {
        border-color: rgba(255, 140, 90, 0.18);
    }

    /* Setup controls on top, live preview below (direct children: title-bar, reaction-cine-root) */
    body.app-mode-jump .section-title-bar , body.app-mode-sidejump .section-title-bar {
        order: 1 !important;
        flex-shrink: 0;
        padding: 12px 12px 14px;
        gap: 10px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.14);
        border-top: none;
        background: rgba(8, 12, 24, 0.55);
        border-radius: 16px 16px 0 0;
    }

    body.app-mode-jump .reaction-cine-root , body.app-mode-sidejump .reaction-cine-root,
    body.app-mode-reaction .reaction-cine-root {
        order: 2 !important;
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        height: auto;
        display: flex;
        flex-direction: column;
        border-radius: 0 0 16px 16px;
        overflow: visible;
    }

    body.app-mode-jump #sectionVideoTitle , body.app-mode-sidejump #sectionVideoTitle,
    body.app-mode-reaction #sectionVideoTitle {
        display: none;
    }

    body.app-mode-jump .video-merged-container , body.app-mode-sidejump .video-merged-container,
    body.app-mode-reaction .video-merged-container {
        order: unset;
        padding: 10px;
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        height: auto;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    body.app-mode-jump .video-dual-layout , body.app-mode-sidejump .video-dual-layout,
    body.app-mode-reaction .video-dual-layout {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        height: auto;
        gap: 0;
        display: flex;
        flex-direction: column;
    }

    body.app-mode-jump .video-merged-frame:not(.video-stage--portrait-stream):not(.video-stage--intrinsic-aspect):not(.rot-90):not(.rot-270) , body.app-mode-sidejump .video-merged-frame:not(.video-stage--portrait-stream):not(.video-stage--intrinsic-aspect):not(.rot-90):not(.rot-270),
    body.app-mode-reaction .video-merged-frame:not(.video-stage--portrait-stream):not(.video-stage--intrinsic-aspect):not(.rot-90):not(.rot-270) {
        flex: 1 1 auto;
        width: 100%;
        min-height: var(--mobile-video-raw-frame-h, var(--mobile-video-stage-max-h));
        height: var(--mobile-video-raw-frame-h, var(--mobile-video-stage-max-h));
        max-height: var(--mobile-video-raw-frame-h, var(--mobile-video-stage-max-h));
        aspect-ratio: unset;
        margin-left: auto;
        margin-right: auto;
        border-radius: 14px;
        overflow: hidden;
        border: 1px solid rgba(0, 217, 255, 0.28);
        background: #050810;
    }

    body.app-mode-reaction .video-merged-frame:not(.video-stage--portrait-stream):not(.video-stage--intrinsic-aspect):not(.rot-90):not(.rot-270) {
        border-color: rgba(255, 140, 90, 0.28);
    }

    body.app-mode-jump .video-raw-frame.video-merged-frame.rot-90, body.app-mode-sidejump .video-raw-frame.video-merged-frame.rot-90,
    body.app-mode-jump .video-raw-frame.video-merged-frame.rot-270 , body.app-mode-sidejump .video-raw-frame.video-merged-frame.rot-270,
    body.app-mode-reaction .video-raw-frame.video-merged-frame.rot-90,
    body.app-mode-reaction .video-raw-frame.video-merged-frame.rot-270 {
        flex: 1 1 auto;
        width: 100%;
        min-height: var(--mobile-video-raw-frame-h, var(--mobile-video-stage-max-h));
        height: var(--mobile-video-raw-frame-h, var(--mobile-video-stage-max-h));
        max-height: var(--mobile-video-raw-frame-h, var(--mobile-video-stage-max-h));
        aspect-ratio: unset;
        border-radius: 14px;
        overflow: hidden;
        border: 1px solid rgba(0, 217, 255, 0.28);
        background: #050810;
    }

    body.app-mode-reaction .video-raw-frame.video-merged-frame.rot-90,
    body.app-mode-reaction .video-raw-frame.video-merged-frame.rot-270 {
        border-color: rgba(255, 140, 90, 0.28);
    }

    body.app-mode-jump .video-raw-frame.video-merged-frame, body.app-mode-sidejump .video-raw-frame.video-merged-frame,
    body.app-mode-jump .video-raw-frame.video-merged-frame.video-stage--intrinsic-aspect , body.app-mode-sidejump .video-raw-frame.video-merged-frame.video-stage--intrinsic-aspect,
    body.app-mode-reaction .video-raw-frame.video-merged-frame,
    body.app-mode-reaction .video-raw-frame.video-merged-frame.video-stage--intrinsic-aspect {
        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;
        margin-left: auto !important;
        margin-right: auto !important;
        position: relative !important;
        inset: auto !important;
    }

    body.app-mode-jump .video-placeholder , body.app-mode-sidejump .video-placeholder,
    body.app-mode-reaction .video-placeholder {
        border-radius: 14px;
    }

    body.app-mode-jump .video-placeholder .placeholder-content , body.app-mode-sidejump .video-placeholder .placeholder-content {
        gap: 10px;
        padding: 20px;
        text-align: center;
        font-size: 0.82rem;
        line-height: 1.45;
        color: var(--text-muted);
    }

    body.app-mode-jump .video-placeholder .placeholder-icon , body.app-mode-sidejump .video-placeholder .placeholder-icon {
        font-size: 2rem;
        opacity: 0.65;
    }

    body.app-mode-jump #videoMobileTabsNav , body.app-mode-sidejump #videoMobileTabsNav {
        min-height: 38px;
        padding: 4px;
        gap: 4px;
        border-radius: 10px;
        background: rgba(6, 10, 22, 0.85);
    }

    body.app-mode-jump .video-mobile-tab , body.app-mode-sidejump .video-mobile-tab {
        min-height: 34px;
        font-size: 0.76rem;
        border-radius: 8px;
    }

    body.app-mode-jump .video-mobile-tab.is-active , body.app-mode-sidejump .video-mobile-tab.is-active {
        background: rgba(0, 217, 255, 0.14);
        box-shadow: inset 0 0 0 1px rgba(0, 217, 255, 0.35);
        color: #e8f8ff;
    }

    body.app-mode-jump #videoPanelSetup.is-active, body.app-mode-sidejump #videoPanelSetup.is-active,
    body.app-mode-reaction #videoPanelSetup.is-active {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 0;
    }

    body.app-mode-jump #videoPanelSetup .video-view-options, body.app-mode-sidejump #videoPanelSetup .video-view-options,
    body.app-mode-reaction #videoPanelSetup .video-view-options {
        order: 1;
    }

    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: 3;
        margin-top: 4px;
        padding-top: 8px;
        border-top: 1px solid rgba(148, 163, 184, 0.16);
    }

    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: 4;
    }

    body.app-mode-jump #videoPanelSetup #btnVideoMobileNext, body.app-mode-sidejump #videoPanelSetup #btnVideoMobileNext,
    body.app-mode-reaction #videoPanelSetup #btnVideoMobileNext {
        order: 5;
    }

    /* Quick test + mobile chrome: styles-video-mobile.css */

    body.app-mode-jump .camera-select-row , body.app-mode-sidejump .camera-select-row {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    body.app-mode-jump .camera-select-label , body.app-mode-sidejump .camera-select-label {
        flex: 0 0 auto;
        margin: 0;
    }

    body.app-mode-jump .camera-select-wrapper , body.app-mode-sidejump .camera-select-wrapper {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
    }

    body.app-mode-jump .video-tool-btns-label:not([hidden]), body.app-mode-sidejump .video-tool-btns-label:not([hidden]),
    body.app-mode-reaction .video-tool-btns-label:not([hidden]) {
        display: block;
        margin-top: 2px;
    }

    body.app-mode-jump .camera-select , body.app-mode-sidejump .camera-select {
        min-height: 38px;
        height: 38px;
        font-size: 0.82rem;
        padding: 0 32px 0 10px;
        border-color: rgba(0, 217, 255, 0.28);
        background: rgba(8, 12, 24, 0.95);
    }

    body.app-mode-jump #videoPanelSetup .video-view-options, body.app-mode-sidejump #videoPanelSetup .video-view-options,
    body.app-mode-reaction #videoPanelSetup .video-view-options {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
    }

    body.app-mode-jump #videoPanelSetup .video-view-options .video-tool-btns-label:not([hidden]), body.app-mode-sidejump #videoPanelSetup .video-view-options .video-tool-btns-label:not([hidden]),
    body.app-mode-reaction #videoPanelSetup .video-view-options .video-tool-btns-label:not([hidden]) {
        margin: 0;
        flex: 1 1 auto;
        min-width: 0;
        font-size: 0.62rem;
        letter-spacing: 0.07em;
        color: rgba(148, 163, 184, 0.8);
    }

    body.app-mode-jump #videoPanelSetup .video-view-options .video-tool-btns, body.app-mode-sidejump #videoPanelSetup .video-view-options .video-tool-btns,
    body.app-mode-reaction #videoPanelSetup .video-view-options .video-tool-btns {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        gap: 8px;
        width: auto;
    }

    body.app-mode-jump #videoPanelSetup .video-view-options .video-tool-btn, body.app-mode-sidejump #videoPanelSetup .video-view-options .video-tool-btn,
    body.app-mode-reaction #videoPanelSetup .video-view-options .video-tool-btn {
        flex: 0 0 40px;
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        border: 1px solid rgba(148, 163, 184, 0.28);
        background: rgba(10, 14, 28, 0.92);
    }

    body.app-mode-jump #videoPanelSetup .video-view-options .video-tool-btn svg, body.app-mode-sidejump #videoPanelSetup .video-view-options .video-tool-btn svg,
    body.app-mode-reaction #videoPanelSetup .video-view-options .video-tool-btn svg {
        display: block;
        width: 18px;
        height: 18px;
        margin: 0;
        flex-shrink: 0;
    }

    body.app-mode-jump #videoPanelSetup .video-view-options .video-tool-btn:hover svg, body.app-mode-sidejump #videoPanelSetup .video-view-options .video-tool-btn:hover svg,
    body.app-mode-reaction #videoPanelSetup .video-view-options .video-tool-btn:hover svg {
        transform: none;
    }

    body.app-mode-jump #videoPanelSetup .video-view-options .video-tool-btn.active, body.app-mode-sidejump #videoPanelSetup .video-view-options .video-tool-btn.active,
    body.app-mode-reaction #videoPanelSetup .video-view-options .video-tool-btn.active {
        border-color: rgba(0, 217, 255, 0.45);
        background: rgba(0, 217, 255, 0.12);
        color: var(--primary-cyan);
    }

    body.app-mode-reaction #videoPanelSetup .video-view-options .video-tool-btn.active {
        border-color: rgba(255, 140, 90, 0.45);
        background: rgba(255, 140, 90, 0.12);
        color: #ffb088;
    }

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

    body.app-mode-jump #btnVideoMobileNext, body.app-mode-sidejump #btnVideoMobileNext,
    body.app-mode-reaction #btnVideoMobileNext {
        min-height: 52px;
        padding: 0 16px;
        font-size: 0.82rem;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: none;
        border-radius: 12px;
        box-sizing: border-box;
    }

    body.app-mode-jump #btnVideoMobileNext , body.app-mode-sidejump #btnVideoMobileNext {
        min-height: 54px;
        border-width: 1.5px;
        box-shadow: 0 4px 18px rgba(0, 217, 255, 0.12);
    }

    body.app-mode-jump .video-mobile-setup-actions , body.app-mode-sidejump .video-mobile-setup-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        margin-top: 0;
    }

    body.app-mode-jump .video-mobile-setup-actions .btn-connect#btnStart , body.app-mode-sidejump .video-mobile-setup-actions .btn-connect#btnStart {
        grid-column: 1;
        width: 100%;
        min-height: 36px;
        height: 36px;
        font-size: 0.76rem;
        font-weight: 700;
        border-radius: 10px;
        box-shadow: none;
        background: rgba(0, 217, 255, 0.92);
        border: 1px solid rgba(0, 217, 255, 0.65);
        color: #021018;
        gap: 6px;
        padding: 0 8px;
    }

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

    body.app-mode-jump .video-mobile-setup-actions .btn-connect#btnStart:hover , body.app-mode-sidejump .video-mobile-setup-actions .btn-connect#btnStart:hover {
        transform: none;
        background: rgba(0, 217, 255, 1);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    }

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

    body.app-mode-jump .video-mobile-setup-actions #btnOpenVideo::after , body.app-mode-sidejump .video-mobile-setup-actions #btnOpenVideo::after {
        display: none;
    }

    body.app-mode-jump .video-mobile-setup-actions .btn-disconnect , body.app-mode-sidejump .video-mobile-setup-actions .btn-disconnect {
        grid-column: 1 / -1;
        min-height: 36px;
        height: 36px;
        font-size: 0.78rem;
        border-radius: 10px;
    }

    body.app-mode-jump .video-mobile-setup-actions #btnRetryVideoTest , body.app-mode-sidejump .video-mobile-setup-actions #btnRetryVideoTest {
        grid-column: 1 / -1;
        min-height: 36px;
        height: 36px;
        font-size: 0.78rem;
    }


    body.app-mode-jump .app-wrapper , body.app-mode-sidejump .app-wrapper {
        padding-left: max(8px, env(safe-area-inset-left, 0px));
        padding-right: max(8px, env(safe-area-inset-right, 0px));
        gap: 12px;
    }

    /* Side Jump mobile session — same shell as jump, violet chrome */
    body.app-mode-sidejump .section-video {
        border-color: rgba(192, 132, 252, 0.22);
    }

    body.app-mode-sidejump .video-merged-frame:not(.video-stage--portrait-stream):not(.video-stage--intrinsic-aspect):not(.rot-90):not(.rot-270),
    body.app-mode-sidejump .video-raw-frame.video-merged-frame.rot-90,
    body.app-mode-sidejump .video-raw-frame.video-merged-frame.rot-270 {
        border-color: rgba(192, 132, 252, 0.32);
    }

    body.app-mode-sidejump .video-mobile-tab.is-active {
        border-color: rgba(192, 132, 252, 0.55);
        color: #e9d5ff;
    }

    body.app-mode-sidejump .jump-mobile-video-cta .btn-toggle-jump.active {
        border-color: rgba(192, 132, 252, 0.65);
        background: rgba(192, 132, 252, 0.18);
    }

    body.app-mode-sidejump .mobile-jump-count-badge {
        border-color: rgba(192, 132, 252, 0.32);
    }

    body.app-mode-sidejump .mobile-jump-count-badge-value {
        color: #d8b4fe;
        text-shadow: 0 0 12px rgba(192, 132, 252, 0.35);
    }
}

.video-mobile-jump-setup-hint {
    display: none;
}

.video-mobile-setup-hint {
    display: none;
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--text-muted);
    font-weight: 500;
}

@media (max-width: 768px) {
    .video-mobile-setup-hint:not([hidden]) {
        display: block;
    }
}

/* Jump test — mobile step guide */
.video-mobile-jump-guide {
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(0, 217, 255, 0.06);
    border: 1px solid rgba(0, 217, 255, 0.22);
}

.video-mobile-jump-guide:not([hidden]) {
    display: flex;
}

.video-mobile-jump-guide__title {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a5f3fc;
}

.video-mobile-jump-steps {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.video-mobile-jump-step {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 4px;
    border-radius: 10px;
    background: rgba(8, 12, 24, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.2);
    text-align: center;
}

.video-mobile-jump-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;
    color: var(--text-muted);
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.video-mobile-jump-step__label {
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

.video-mobile-jump-step.is-current {
    border-color: rgba(0, 217, 255, 0.5);
    background: rgba(0, 217, 255, 0.1);
    box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.15);
}

.video-mobile-jump-step.is-current .video-mobile-jump-step__badge {
    color: #021018;
    background: var(--primary-cyan);
    border-color: rgba(0, 217, 255, 0.8);
}

.video-mobile-jump-step.is-current .video-mobile-jump-step__label {
    color: #e8f8ff;
}

.video-mobile-jump-step.is-done {
    border-color: rgba(34, 197, 94, 0.35);
    opacity: 0.85;
}

.video-mobile-jump-step.is-done .video-mobile-jump-step__badge {
    color: #052e16;
    background: #86efac;
    border-color: rgba(34, 197, 94, 0.6);
}

body.app-mode-jump .video-mobile-jump-setup-hint , body.app-mode-sidejump .video-mobile-jump-setup-hint {
    display: block;
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

.camera-select-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.camera-select-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.video-tool-btns-label {
    display: none;
    margin: 0;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.video-tool-btns-label__sub {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(148, 163, 184, 0.85);
}

.video-mobile-test-hint--jump {
    display: none;
    margin: 0 0 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.28);
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.video-mobile-test-hint--jump:not([hidden]) {
    display: block;
}

.video-mobile-setup-hint {
    display: none;
}

@media (max-width: 768px) {
    .video-mobile-setup-hint {
        display: block;
        margin: 0;
        font-size: 0.72rem;
        line-height: 1.45;
        color: var(--text-muted);
        font-weight: 500;
    }

    body.app-mode-jump .video-mobile-setup-hint , body.app-mode-sidejump .video-mobile-setup-hint {
        display: none;
    }
}

/* Jump test — mobile step guide */
.video-mobile-jump-guide {
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(0, 217, 255, 0.06);
    border: 1px solid rgba(0, 217, 255, 0.22);
}

.video-mobile-jump-guide:not([hidden]) {
    display: flex;
}

.video-mobile-jump-guide__title {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a5f3fc;
}

.video-mobile-jump-steps {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.video-mobile-jump-step {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 4px;
    border-radius: 10px;
    background: rgba(8, 12, 24, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.2);
    text-align: center;
}

.video-mobile-jump-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;
    color: var(--text-muted);
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.video-mobile-jump-step__label {
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

.video-mobile-jump-step.is-current {
    border-color: rgba(0, 217, 255, 0.55);
    background: rgba(0, 217, 255, 0.1);
    box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.15);
}

.video-mobile-jump-step.is-current .video-mobile-jump-step__badge {
    color: #021018;
    background: rgba(0, 217, 255, 0.95);
    border-color: rgba(0, 217, 255, 0.8);
}

.video-mobile-jump-step.is-current .video-mobile-jump-step__label {
    color: #e8f8ff;
}

.video-mobile-jump-step.is-done {
    border-color: rgba(34, 197, 94, 0.35);
    opacity: 0.85;
}

.video-mobile-jump-step.is-done .video-mobile-jump-step__badge {
    color: #052e16;
    background: rgba(34, 197, 94, 0.85);
    border-color: rgba(34, 197, 94, 0.7);
}

body.app-mode-jump .video-mobile-jump-setup-hint , body.app-mode-sidejump .video-mobile-jump-setup-hint {
    display: block;
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--text-secondary);
    font-weight: 500;
}

.camera-select-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.camera-select-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.video-tool-btns-label {
    display: none;
    margin: 0;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.video-tool-btns-label__sub {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: rgba(148, 163, 184, 0.75);
}

.video-mobile-test-hint--jump {
    display: none;
    margin: 0 0 8px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--text-secondary);
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.video-mobile-test-hint--jump:not([hidden]) {
    display: block;
}

/* Camera select dropdown */
.camera-select-wrapper {
    position: relative;
    flex-shrink: 0;
    width: 180px;
}

.camera-select {
    width: 100%;
    height: 36px;
    padding: 0 28px 0 10px;
    border-radius: var(--r-md);
    border: 1px solid var(--border-subtle);
    background: rgba(10, 14, 26, 0.85);
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-family: var(--font);
    font-weight: 500;
    outline: none;
    cursor: pointer;
    transition: all 0.25s var(--ease);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 14px) center,
        calc(100% - 9px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.camera-select:hover,
.camera-select:focus {
    border-color: var(--border-color);
    color: var(--primary-cyan);
    box-shadow: 0 0 14px rgba(0, 217, 255, 0.1);
    background-image:
        linear-gradient(45deg, transparent 50%, var(--primary-cyan) 50%),
        linear-gradient(135deg, var(--primary-cyan) 50%, transparent 50%);
    background-position:
        calc(100% - 14px) center,
        calc(100% - 9px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.camera-select option {
    background: var(--dark-bg-card);
    color: var(--text-primary);
    padding: 6px 10px;
}

/* View options row: transparent on desktop; grouped on mobile Jump */
.video-view-options {
    display: contents;
}

/* Video tool buttons (Mirror / Rotate) */
.video-tool-btns {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.video-tool-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md);
    border: 1px solid var(--border-subtle);
    background: rgba(10, 14, 26, 0.85);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.25s var(--ease);
    padding: 0;
    flex-shrink: 0;
}

.video-tool-btn:hover {
    border-color: var(--border-color);
    color: var(--primary-cyan);
    background: rgba(0, 217, 255, 0.06);
    box-shadow: 0 0 14px rgba(0, 217, 255, 0.1);
    transform: translateY(-1px);
}

.video-tool-btn:active {
    transform: scale(0.92);
}

.video-tool-btn.active {
    color: var(--primary-cyan);
    border-color: rgba(0, 217, 255, 0.35);
    background: rgba(0, 217, 255, 0.1);
    box-shadow:
        0 0 12px rgba(0, 217, 255, 0.15),
        inset 0 0 8px rgba(0, 217, 255, 0.05);
}

.video-tool-btn svg {
    transition: transform 0.3s var(--ease);
}

.video-tool-btn:hover svg {
    transform: scale(1.1);
}

/* Ensure the HTML `hidden` attribute wins over `display: flex` above (used e.g. for jump-only tools in Reaction mode). */
.video-tool-btn[hidden] {
    display: none !important;
}


/* ═══════════════════════════════════════════
   CONNECT / DISCONNECT BUTTONS
   ═══════════════════════════════════════════ */

.btn-connect {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 36px;
    padding: 0 22px;
    background: linear-gradient(135deg, var(--primary-cyan-dark), var(--primary-cyan));
    color: #000;
    font-family: var(--font);
    font-size: 0.8rem;
    font-weight: 800;
    border: 1px solid var(--primary-cyan);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all 0.3s var(--ease);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow:
        0 0 16px rgba(0, 217, 255, 0.2),
        0 0 50px rgba(0, 217, 255, 0.06);
}

.btn-connect:hover {
    box-shadow:
        0 0 26px rgba(0, 217, 255, 0.35),
        0 0 70px rgba(0, 217, 255, 0.1);
    transform: translateY(-1px);
}

.btn-connect:active { transform: scale(0.96); }

.btn-connect::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.2));
    pointer-events: none;
    z-index: 2;
}

.btn-connect__content {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.btn-connect__progress {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    border-radius: inherit;
    background: rgba(0, 0, 0, 0.24);
    transition: width 0.28s var(--ease);
    z-index: 0;
    pointer-events: none;
}

.btn-connect--loading {
    cursor: wait;
    pointer-events: none;
}

.btn-connect--loading:hover {
    transform: none;
    box-shadow:
        0 0 16px rgba(0, 217, 255, 0.2),
        0 0 50px rgba(0, 217, 255, 0.06);
}

.btn-connect--loading:active {
    transform: none;
}

.btn-connect--loading .btn-connect-dot {
    animation: none;
    opacity: 0.9;
}

.btn-connect-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #003d00;
    flex-shrink: 0;
    animation: connect-dot-pulse 1.8s ease-in-out infinite;
}

@keyframes connect-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 60, 0, 0.3); }
    50%      { box-shadow: 0 0 6px 2px rgba(0, 60, 0, 0.5); }
}

.btn-disconnect {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 36px;
    padding: 0 22px;
    background: linear-gradient(135deg, #cc0000, var(--error));
    color: #fff;
    font-family: var(--font);
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid var(--error);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all 0.3s var(--ease);
    flex-shrink: 0;
    box-shadow:
        0 0 16px rgba(255, 82, 82, 0.18),
        0 0 50px rgba(255, 82, 82, 0.05);
}

.btn-disconnect:hover {
    box-shadow:
        0 0 26px rgba(255, 82, 82, 0.3),
        0 0 70px rgba(255, 82, 82, 0.08);
    transform: translateY(-1px);
}

.btn-disconnect:active { transform: scale(0.96); }

.btn-disconnect__icon {
    display: none;
    flex-shrink: 0;
}

.video-mobile-setup-actions .btn-disconnect__icon {
    display: block;
}

.btn-disconnect-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ff8a80;
    flex-shrink: 0;
    animation: disconnect-blink 1s ease-in-out infinite;
}

.video-mobile-setup-actions .btn-disconnect-dot {
    display: none;
}

@keyframes disconnect-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}


/* ═══════════════════════════════════════════
   TOGGLE JUMP DETECTION BUTTON
   ═══════════════════════════════════════════ */

.btn-toggle-jump {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 38px;
    margin-top: 12px;
    background: rgba(0, 217, 255, 0.06);
    color: var(--primary-cyan);
    font-family: var(--font);
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid rgba(0, 217, 255, 0.25);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all 0.25s var(--ease);
    letter-spacing: 0.5px;
}

.btn-toggle-jump:hover:not(:disabled) {
    background: rgba(0, 217, 255, 0.12);
    border-color: var(--primary-cyan);
    box-shadow: 0 0 16px rgba(0, 217, 255, 0.15);
    transform: translateY(-1px);
}

.btn-toggle-jump:active:not(:disabled) { transform: scale(0.97); }

.btn-toggle-jump:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.btn-toggle-jump.active {
    background: rgba(255, 82, 82, 0.08);
    color: var(--error);
    border-color: rgba(255, 82, 82, 0.35);
    box-shadow: 0 0 14px rgba(255, 82, 82, 0.1);
}

.btn-toggle-jump.active:hover:not(:disabled) {
    background: rgba(255, 82, 82, 0.14);
    border-color: var(--error);
    box-shadow: 0 0 20px rgba(255, 82, 82, 0.2);
}

.btn-toggle-jump-icon {
    font-style: normal;
    font-size: 0.85rem;
}

.btn-toggle-jump-copy {
    display: inline;
}

.btn-toggle-jump-copy__hint {
    display: none !important;
}


/* ═══════════════════════════════════════════
   JUMP TEST TIMING CONTROLS
   ═══════════════════════════════════════════ */

#jumpTimingControlsHome .jump-timing-panel {
    margin-top: 12px;
}

.jump-timing-panel {
    --jump-timing-accent: rgba(0, 217, 255, 1);
    --jump-timing-accent-soft: rgba(0, 217, 255, 0.14);
    --jump-timing-accent-border: rgba(0, 217, 255, 0.32);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body.app-mode-sidejump .jump-timing-panel {
    --jump-timing-accent: #d8b4fe;
    --jump-timing-accent-soft: rgba(192, 132, 252, 0.14);
    --jump-timing-accent-border: rgba(192, 132, 252, 0.38);
}

.jump-timing-row {
    display: flex;
    gap: 10px;
    margin-top: 0;
}

.jump-timing-row--fields {
    gap: 8px;
}

.jump-timing-item,
.jump-timing-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.jump-timing-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.jump-timing-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.jump-timing-controls--two-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
}

.jump-timing-input-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
}

.jump-timing-input-wrap .jump-timing-input {
    width: 100%;
    padding-right: 28px;
    text-align: left;
}

.jump-timing-input-wrap .jump-timing-unit {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    opacity: 0.85;
}

.jump-timing-input {
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    background: rgba(5, 9, 20, 0.92);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-family: var(--mono);
    font-weight: 600;
    outline: none;
    text-align: center;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), color 0.2s var(--ease);
}

.jump-timing-input:focus {
    border-color: var(--jump-timing-accent-border);
    box-shadow: 0 0 0 2px var(--jump-timing-accent-soft);
    color: var(--jump-timing-accent);
}

.jump-timing-input::-webkit-outer-spin-button,
.jump-timing-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.jump-timing-unit {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.jump-timing-toggle-card {
    flex: 1 1 auto;
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    background: rgba(6, 10, 22, 0.65);
}

.jump-timing-toggle-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.jump-timing-toggle-head .jump-timing-label {
    margin: 0;
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--text-secondary);
}

.jump-timing-toggle-hint {
    margin: 8px 0 0;
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--text-muted);
    font-weight: 500;
}

.toggle-label--timing {
    flex-shrink: 0;
    margin: 0;
}

body.app-mode-sidejump .toggle-label input:checked + .toggle-switch {
    background: rgba(192, 132, 252, 0.28);
    border-color: rgba(192, 132, 252, 0.45);
}

body.app-mode-sidejump .toggle-label input:checked + .toggle-switch::after {
    background: #d8b4fe;
    box-shadow: 0 0 8px rgba(192, 132, 252, 0.45);
}

.jump-timing-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* ── CMJ tuning panel (jump sidebar) ── */
.jump-tune-details {
    margin: 12px 0 10px;
    padding: 10px 12px;
    border-radius: var(--r-md, 10px);
    border: 1px solid rgba(0, 217, 255, 0.22);
    background: rgba(3, 8, 22, 0.55);
}

.jump-tune-summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--primary-cyan, #00d9ff);
    list-style: none;
}

.jump-tune-summary::-webkit-details-marker {
    display: none;
}

.jump-tune-summary::before {
    content: '▸ ';
    opacity: 0.75;
}

details.jump-tune-details[open] .jump-tune-summary::before {
    content: '▾ ';
}

.jump-tune-section-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin: 0.65rem 0 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.jump-tune-section-title:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.jump-tune-hint {
    margin: 8px 0 10px;
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--text-muted);
    opacity: 0.92;
}

.jump-tune-schematic-wrap {
    margin: 0 0 12px;
    padding: 10px 10px 8px;
    border-radius: var(--r-md, 10px);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.jump-tune-schematic-title {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(0, 229, 255, 0.85);
    margin-bottom: 6px;
}

.jump-tune-schematic-svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 132px;
}

.jump-tune-schematic-svg text {
    font-family: Inter, system-ui, sans-serif;
    font-size: 7px;
    fill: rgba(255, 255, 255, 0.78);
}

.jump-tune-schematic-svg .axis {
    stroke: rgba(255, 255, 255, 0.35);
    stroke-width: 1;
}

.jump-tune-schematic-svg .marker {
    stroke-width: 1.4;
    stroke-linecap: round;
}

.jump-tune-schematic-live {
    margin: 6px 0 0;
    font-size: 0.68rem;
    line-height: 1.4;
    color: rgba(226, 232, 240, 0.88);
    font-family: var(--mono, ui-monospace, monospace);
}

.jump-tune-scroll {
    max-height: min(58vh, 620px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
    margin-right: -4px;
    scrollbar-gutter: stable;
    scrollbar-color: rgba(0, 217, 255, 0.45) rgba(0, 0, 0, 0.22);
}

.jump-tune-scroll::-webkit-scrollbar {
    width: 7px;
}

.jump-tune-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
}

.jump-tune-scroll::-webkit-scrollbar-thumb {
    background: rgba(0, 217, 255, 0.35);
    border-radius: 6px;
}

.jump-tune-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 217, 255, 0.55);
}

.jump-tune-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.jump-tune-row {
    display: grid;
    grid-template-columns: 1fr minmax(120px, 1.3fr) 52px;
    gap: 8px;
    align-items: center;
    font-size: 0.72rem;
}

.jump-tune-row-label {
    color: var(--text-secondary);
    line-height: 1.35;
}

.jump-tune-row input[type='range'] {
    width: 100%;
    accent-color: var(--primary-cyan, #00d9ff);
}

.jump-tune-val {
    font-family: var(--mono);
    font-size: 0.68rem;
    color: #fef3c7;
    text-align: right;
}

.jump-tune-actions {
    margin-top: 12px;
}

.jump-tune-reset-btn {
    width: 100%;
    padding: 8px 12px;
    border-radius: var(--r-md, 10px);
    border: 1px solid rgba(251, 191, 36, 0.35);
    background: rgba(251, 191, 36, 0.08);
    color: #fcd34d;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.jump-tune-reset-btn:hover {
    background: rgba(251, 191, 36, 0.14);
}

#testStatusLabel {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

#testTimeRemainingLabel {
    font-family: var(--mono);
    font-weight: 800;
    font-size: 0.9rem;
    min-width: 44px;
    text-align: center;
    color: #020617;
    background: radial-gradient(circle at 30% 0%, var(--primary-cyan), var(--electric-blue));
    padding: 4px 12px;
    border-radius: 999px;
    box-shadow:
        0 0 0 1px rgba(15, 23, 42, 0.9),
        0 0 18px rgba(0, 217, 255, 0.55);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transform-origin: center;
}

#testTimeRemainingLabel:empty {
    padding: 0;
    min-width: 0;
    background: transparent;
    box-shadow: none;
}

/* ═══════════════════════════════════════════
   MERGED VIDEO FRAME — Single Big Frame
   Video + Smart Dark Overlay + Skeleton Canvas
   ═══════════════════════════════════════════ */

.video-merged-container {
    padding: 14px;
}

/* ── Two portrait frames side by side ── */
.video-dual-layout {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

/* Split view: don't stretch frames to a short row height (breaks aspect-ratio → pillarboxing). */
#videoDualLayout:not(.video-dual-layout--merged) {
    align-items: flex-start;
    justify-content: center;
}

/*
 * Split CAMERA + ANALYSIS: one shared aspect so panels stay the same height.
 * --dual-stage-aspect is set in app.js (matches stream / 9:16 for sideways 1280×720).
 */
#videoDualLayout.video-dual-layout--synced-panels:not(.video-dual-layout--merged) {
    align-items: stretch;
}

#videoDualLayout.video-dual-layout--synced-panels:not(.video-dual-layout--merged) .video-merged-frame {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    align-self: stretch !important;
    aspect-ratio: var(--dual-stage-aspect, 8 / 9) !important;
    width: min(calc(50% - 6px), calc(min(92vh, 880px) * var(--dual-stage-aspect, 0.8888888889))) !important;
    max-width: calc(50% - 6px) !important;
    height: auto !important;
    max-height: min(92vh, 880px) !important;
    min-height: min(54vh, 540px) !important;
}

body.app-mode-jump #videoDualLayout.video-dual-layout--synced-panels:not(.video-dual-layout--merged) .video-merged-frame {
    max-height: min(88vh, 840px) !important;
    min-height: min(52vh, 500px) !important;
}

/* Vertical jump: optional single frame (skeleton overlaid on camera via JS canvas parent) */
.video-dual-layout.video-dual-layout--merged {
    gap: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Center the stage when only one frame is visible (avoids a giant empty grid cell). */
.video-merged-container:has(.video-dual-layout--merged) {
    display: flex;
    justify-content: center;
}

.video-dual-layout--merged .video-skeleton-frame {
    display: none !important;
}

/*
 * Merged view: pick a stage aspect that matches how people hold the camera.
 * — Landscape viewport: wide 16:9 (keeps sidebar row balanced on desktop).
 * — Portrait / tall viewport: 9:16 so phone webcams are not squeezed or clipped.
 */
.video-dual-layout--merged .video-raw-frame {
    flex: 0 1 auto;
    margin: 0 auto;
    max-width: 100%;
}

@media (min-aspect-ratio: 1/1) {
    .video-dual-layout--merged .video-raw-frame:not(.video-stage--intrinsic-aspect):not(.video-stage--portrait-stream) {
        width: min(100%, calc(min(88vh, 1040px) * 16 / 9));
        aspect-ratio: 16 / 9;
    }
}

@media (max-aspect-ratio: 1/1) {
    .video-dual-layout.video-dual-layout--merged {
        align-items: stretch;
        width: 100%;
    }

    .video-dual-layout--merged .video-raw-frame:not(.video-stage--intrinsic-aspect):not(.video-stage--portrait-stream) {
        width: min(100%, calc(min(92vh, 1020px) * 9 / 16));
        aspect-ratio: 9 / 16;
    }
}

/*
 * Portrait stream at 0° (EMEET auto-rotate): tall 9:16 stage on a landscape monitor.
 * Do not force 16:9 — height drives sizing so the frame is not a tiny wide strip.
 */
.video-dual-layout--merged .video-raw-frame.video-stage--portrait-stream,
#videoDualLayout.video-stage--portrait-stream.video-dual-layout--merged .video-raw-frame,
.video-merged-frame.video-stage--portrait-stream {
    aspect-ratio: 9 / 16 !important;
    flex: 0 1 auto !important;
    width: min(100%, calc(min(96vh, 1120px) * 9 / 16)) !important;
    max-width: min(100%, 520px);
    max-height: min(96vh, 1120px) !important;
    height: auto !important;
    min-height: min(54vh, 540px) !important;
}

@media (min-aspect-ratio: 1/1) {
    .video-dual-layout--merged .video-raw-frame.video-stage--portrait-stream,
    #videoDualLayout.video-stage--portrait-stream.video-dual-layout--merged .video-raw-frame {
        width: min(100%, calc(min(96vh, 1120px) * 9 / 16)) !important;
        aspect-ratio: 9 / 16 !important;
        max-height: min(96vh, 1120px) !important;
    }
}

#videoDualLayout:not(.video-dual-layout--merged) .video-merged-frame.video-stage--portrait-stream {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: calc(50% - 6px);
    max-height: min(88vh, 900px) !important;
    min-height: min(44vh, 440px) !important;
    aspect-ratio: 9 / 16 !important;
}

/*
 * 0°/180°: stage box follows intrinsic stream size (EMEET auto-rotate → tall 9:16, etc.).
 * Overrides fixed 16:9 / 8:9 when JS sets --video-stage-aspect on the element.
 */
.video-merged-frame.video-stage--intrinsic-aspect,
.video-dual-layout--merged .video-raw-frame.video-stage--intrinsic-aspect {
    aspect-ratio: var(--video-stage-aspect) !important;
    flex: 0 1 auto !important;
    width: auto !important;
    height: auto !important;
    max-width: 100%;
}

.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) {
    max-height: min(96vh, 1120px);
    width: min(100%, calc(min(96vh, 1120px) * var(--video-stage-aspect))) !important;
    min-height: min(54vh, 540px) !important;
}

.video-merged-frame.video-stage--intrinsic-aspect[data-stream-tall="0"],
.video-dual-layout--merged .video-raw-frame.video-stage--intrinsic-aspect[data-stream-tall="0"] {
    max-height: min(88vh, 1040px);
    width: min(100%, calc(min(88vh, 1040px) * var(--video-stage-aspect))) !important;
}

@media (min-aspect-ratio: 1/1) {
    .video-dual-layout--merged .video-raw-frame.video-stage--intrinsic-aspect[data-stream-tall="1"] {
        width: min(100%, calc(min(92vh, 1020px) * var(--video-stage-aspect))) !important;
        aspect-ratio: var(--video-stage-aspect) !important;
    }
}

#videoDualLayout:not(.video-dual-layout--merged) .video-merged-frame.video-stage--intrinsic-aspect[data-stream-tall="1"] {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: calc(50% - 6px);
    max-height: min(92vh, 880px) !important;
}

#videoDualLayout:not(.video-dual-layout--merged) .video-merged-frame.video-stage--intrinsic-aspect[data-stream-tall="0"] {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-height: min(84vh, 780px) !important;
}

#videoDualLayout.video-dual-layout--synced-panels:not(.video-dual-layout--merged) .video-merged-frame.video-stage--intrinsic-aspect,
#videoDualLayout.video-dual-layout--synced-panels:not(.video-dual-layout--merged) .video-merged-frame.video-stage--portrait-stream {
    aspect-ratio: var(--dual-stage-aspect, 8 / 9) !important;
    width: min(calc(50% - 6px), calc(min(92vh, 880px) * var(--dual-stage-aspect, 0.8888888889))) !important;
    max-height: min(92vh, 880px) !important;
    min-height: min(54vh, 540px) !important;
}

body.app-mode-jump #videoDualLayout.video-dual-layout--synced-panels:not(.video-dual-layout--merged) .video-merged-frame.video-stage--intrinsic-aspect,
body.app-mode-jump #videoDualLayout.video-dual-layout--synced-panels:not(.video-dual-layout--merged) .video-merged-frame {
    max-height: min(88vh, 840px) !important;
    min-height: min(52vh, 500px) !important;
}

body.app-mode-jump .video-merged-frame.video-stage--intrinsic-aspect:not(.video-stage--portrait-stream) {
    aspect-ratio: var(--video-stage-aspect, 9 / 16) !important;
    max-height: min(86vh, 1040px);
}

body.app-mode-jump .video-merged-frame.video-stage--intrinsic-aspect[data-stream-sideways="1"]:not(.video-stage--portrait-stream),
body.app-mode-jump .video-merged-frame.video-stage--portrait-stream {
    aspect-ratio: 9 / 16 !important;
    width: min(calc(50% - 6px), calc(min(88vh, 840px) * 9 / 16)) !important;
    max-width: calc(50% - 6px) !important;
    max-height: min(88vh, 840px) !important;
}

body.app-mode-jump .video-merged-frame.video-stage--intrinsic-aspect[data-stream-tall="1"]:not(.video-stage--portrait-stream) {
    max-height: min(82vh, 1080px);
}

body.app-mode-jump .video-merged-frame.video-stage--portrait-stream,
body.app-mode-jump .video-dual-layout--merged .video-raw-frame.video-stage--portrait-stream {
    flex: 0 1 auto !important;
    width: min(100%, calc(min(92vh, 1020px) * 9 / 16)) !important;
    max-width: min(100%, 520px) !important;
    max-height: min(92vh, 1020px) !important;
    min-height: min(56vh, 560px) !important;
    aspect-ratio: 9 / 16 !important;
}

/*
 * Sideways camera (90°/270°): tall 9:16 stage for merged / single-panel only.
 * Dual side-by-side panels keep their normal flex row — forcing 9:16 + flex:0 broke the layout.
 */
#videoDualLayout.video-stage--quarter-turn.video-dual-layout--merged .video-merged-frame,
.video-dual-layout--merged .video-merged-frame.rot-90,
.video-dual-layout--merged .video-merged-frame.rot-270 {
    aspect-ratio: 9 / 16 !important;
    flex: 0 1 auto;
    max-height: min(96vh, 1120px);
    min-height: min(48vh, 520px);
}

/* Merged-only: quarter-turn camera stage sizing (split uses synced panels below) */
#videoDualLayout.video-stage--quarter-turn.video-dual-layout--merged .video-raw-frame.video-merged-frame.rot-90,
#videoDualLayout.video-stage--quarter-turn.video-dual-layout--merged .video-raw-frame.video-merged-frame.rot-270 {
    aspect-ratio: 9 / 16 !important;
    max-height: min(96vh, 1120px) !important;
    min-height: min(48vh, 520px) !important;
}

#videoDualLayout.video-stage--quarter-turn .video-raw-frame.video-merged-frame.rot-90 > video,
#videoDualLayout.video-stage--quarter-turn .video-raw-frame.video-merged-frame.rot-270 > video,
#videoDualLayout.video-stage--quarter-turn .video-raw-frame.video-merged-frame.rot-90 > canvas,
#videoDualLayout.video-stage--quarter-turn .video-raw-frame.video-merged-frame.rot-270 > canvas {
    /* inset:0 + top/left:50% stretches the layer and crops — JS centers with explicit px box */
    inset: auto !important;
    right: auto !important;
    bottom: auto !important;
    object-fit: contain !important;
}

/*
 * Split desktop 90°/270°: CAMERA + ANALYSIS share --dual-stage-aspect (same height).
 * Do not give .video-raw-frame a different ratio than .video-skeleton-frame.
 */
#videoDualLayout.video-dual-layout--synced-panels.video-stage--quarter-turn:not(.video-dual-layout--merged) {
    align-items: stretch !important;
}

#videoDualLayout.video-dual-layout--synced-panels.video-stage--quarter-turn:not(.video-dual-layout--merged) .video-merged-frame,
#videoDualLayout.video-stage--quarter-turn:not(.video-dual-layout--merged) .video-raw-frame.video-merged-frame,
#videoDualLayout.video-stage--quarter-turn:not(.video-dual-layout--merged) .video-skeleton-frame.video-merged-frame {
    aspect-ratio: var(--dual-stage-aspect, 9 / 16) !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    align-self: stretch !important;
    width: min(calc(50% - 6px), calc(min(92vh, 880px) * var(--dual-stage-aspect, 0.5625))) !important;
    max-width: calc(50% - 6px) !important;
    height: auto !important;
    max-height: min(92vh, 880px) !important;
    min-height: min(54vh, 540px) !important;
}

body.app-mode-jump #videoDualLayout.video-dual-layout--synced-panels.video-stage--quarter-turn:not(.video-dual-layout--merged) .video-merged-frame {
    max-height: min(88vh, 840px) !important;
    min-height: min(52vh, 500px) !important;
}

@media (min-aspect-ratio: 1/1) {
    .video-dual-layout--merged.video-stage--quarter-turn .video-raw-frame,
    #videoDualLayout.video-stage--quarter-turn.video-dual-layout--merged .video-raw-frame {
        width: min(100%, calc(min(96vh, 1120px) * 9 / 16)) !important;
        aspect-ratio: 9 / 16 !important;
        max-height: min(96vh, 1120px) !important;
        min-height: min(58vh, 620px) !important;
    }
}

body.app-mode-reaction #videoDualLayout.video-stage--quarter-turn.video-dual-layout--merged {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: unset !important;
    max-height: min(92vh, 1020px);
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 900px) {
    #videoDualLayout.video-stage--quarter-turn.video-dual-layout--merged .video-merged-frame,
    #videoDualLayout.video-stage--quarter-turn .video-raw-frame.video-merged-frame.rot-270,
    #videoDualLayout.video-stage--quarter-turn .video-raw-frame.video-merged-frame.rot-90 {
        max-height: min(92vh, 1020px);
        min-height: min(52vh, 540px);
    }
}

.reaction-cine-root:-webkit-full-screen .video-dual-layout.video-dual-layout--merged,
.reaction-cine-root:fullscreen .video-dual-layout.video-dual-layout--merged,
.reaction-cine-root.reaction-cine-root--pseudo-fullscreen .video-dual-layout.video-dual-layout--merged {
    align-items: stretch !important;
    justify-content: stretch !important;
    flex: 1 !important;
}

.reaction-cine-root:-webkit-full-screen .video-merged-frame,
.reaction-cine-root:fullscreen .video-merged-frame,
.reaction-cine-root.reaction-cine-root--pseudo-fullscreen .video-merged-frame {
    aspect-ratio: unset !important;
    border-radius: 0 !important;
    border: none !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    contain: paint;
}

.reaction-cine-root:-webkit-full-screen .video-merged-frame video,
.reaction-cine-root:fullscreen .video-merged-frame video,
.reaction-cine-root.reaction-cine-root--pseudo-fullscreen .video-merged-frame video,
.reaction-cine-root:-webkit-full-screen .video-merged-frame canvas,
.reaction-cine-root:fullscreen .video-merged-frame canvas,
.reaction-cine-root.reaction-cine-root--pseudo-fullscreen .video-merged-frame canvas,
.reaction-cine-root:-webkit-full-screen .video-raw-frame video,
.reaction-cine-root:fullscreen .video-raw-frame video,
.reaction-cine-root.reaction-cine-root--pseudo-fullscreen .video-raw-frame video,
.reaction-cine-root:-webkit-full-screen .video-raw-frame canvas,
.reaction-cine-root:fullscreen .video-raw-frame canvas,
.reaction-cine-root.reaction-cine-root--pseudo-fullscreen .video-raw-frame canvas {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    box-sizing: border-box !important;
    object-fit: cover !important;
}

/* Reaction Time fullscreen: contain (portrait tool + zones) — generic rule above uses cover */
body.app-mode-reaction .reaction-cine-root:-webkit-full-screen .video-raw-frame video,
body.app-mode-reaction .reaction-cine-root:fullscreen .video-raw-frame video,
body.app-mode-reaction .reaction-cine-root.reaction-cine-root--pseudo-fullscreen .video-raw-frame video,
body.app-mode-reaction .reaction-cine-root:-webkit-full-screen .video-raw-frame canvas,
body.app-mode-reaction .reaction-cine-root:fullscreen .video-raw-frame canvas,
body.app-mode-reaction .reaction-cine-root.reaction-cine-root--pseudo-fullscreen .video-raw-frame canvas,
body.app-mode-reaction .reaction-cine-root:-webkit-full-screen .video-merged-frame video,
body.app-mode-reaction .reaction-cine-root:fullscreen .video-merged-frame video,
body.app-mode-reaction .reaction-cine-root.reaction-cine-root--pseudo-fullscreen .video-merged-frame video,
body.app-mode-reaction .reaction-cine-root:-webkit-full-screen .video-merged-frame canvas,
body.app-mode-reaction .reaction-cine-root:fullscreen .video-merged-frame canvas,
body.app-mode-reaction .reaction-cine-root.reaction-cine-root--pseudo-fullscreen .video-merged-frame canvas {
    object-fit: contain !important;
}

/*
 * Jump test fullscreen: body.app-mode-jump / app-mode-sidejump portrait-stream caps
 * beat generic .reaction-cine-root:fullscreen rules — override with higher specificity.
 */
body.app-mode-jump .reaction-cine-root:-webkit-full-screen,
body.app-mode-sidejump .reaction-cine-root:-webkit-full-screen,
body.app-mode-jump .reaction-cine-root:fullscreen,
body.app-mode-sidejump .reaction-cine-root:fullscreen,
body.app-mode-jump .reaction-cine-root.reaction-cine-root--pseudo-fullscreen,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--pseudo-fullscreen {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    height: 100svh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    min-height: 100svh !important;
    min-height: -webkit-fill-available;
    flex: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: stretch !important;
    align-items: stretch !important;
}

body.app-mode-jump.reaction-pseudo-stage-fs .reaction-cine-root.reaction-cine-root--pseudo-fullscreen,
body.app-mode-sidejump.reaction-pseudo-stage-fs .reaction-cine-root.reaction-cine-root--pseudo-fullscreen,
body.app-mode-reaction.reaction-pseudo-stage-fs .reaction-cine-root.reaction-cine-root--pseudo-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100000;
}

body.app-mode-jump.reaction-pseudo-stage-fs .section-title-bar,
body.app-mode-sidejump.reaction-pseudo-stage-fs .section-title-bar,
body.app-mode-reaction.reaction-pseudo-stage-fs .section-title-bar,
body.app-mode-reaction.reaction-pseudo-stage-fs .group-test-bar,
body.app-mode-reaction.reaction-pseudo-stage-fs .notice-banner,
body.app-mode-jump.reaction-pseudo-stage-fs #videoMobileTabsNav,
body.app-mode-sidejump.reaction-pseudo-stage-fs #videoMobileTabsNav,
body.app-mode-jump.reaction-pseudo-stage-fs #jumpSidebar,
body.app-mode-sidejump.reaction-pseudo-stage-fs #jumpSidebar,
body.app-mode-jump.reaction-pseudo-stage-fs .sidebar-left,
body.app-mode-sidejump.reaction-pseudo-stage-fs .sidebar-left {
    display: none !important;
}

body.app-mode-jump.reaction-pseudo-stage-fs .app-wrapper,
body.app-mode-sidejump.reaction-pseudo-stage-fs .app-wrapper,
body.app-mode-jump.reaction-pseudo-stage-fs .main-content-layout,
body.app-mode-sidejump.reaction-pseudo-stage-fs .main-content-layout,
body.app-mode-jump.reaction-pseudo-stage-fs .content-main,
body.app-mode-sidejump.reaction-pseudo-stage-fs .content-main,
body.app-mode-jump.reaction-pseudo-stage-fs .section-video,
body.app-mode-sidejump.reaction-pseudo-stage-fs .section-video {
    overflow: hidden !important;
    max-height: none !important;
    height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.app-mode-jump .reaction-cine-root:-webkit-full-screen .video-merged-frame.video-stage--portrait-stream,
body.app-mode-sidejump .reaction-cine-root:-webkit-full-screen .video-merged-frame.video-stage--portrait-stream,
body.app-mode-jump .reaction-cine-root:fullscreen .video-merged-frame.video-stage--portrait-stream,
body.app-mode-sidejump .reaction-cine-root:fullscreen .video-merged-frame.video-stage--portrait-stream,
body.app-mode-jump .reaction-cine-root.reaction-cine-root--pseudo-fullscreen .video-merged-frame.video-stage--portrait-stream,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--pseudo-fullscreen .video-merged-frame.video-stage--portrait-stream,
body.app-mode-jump .reaction-cine-root:-webkit-full-screen .video-merged-frame.video-stage--intrinsic-aspect,
body.app-mode-sidejump .reaction-cine-root:-webkit-full-screen .video-merged-frame.video-stage--intrinsic-aspect,
body.app-mode-jump .reaction-cine-root:fullscreen .video-merged-frame.video-stage--intrinsic-aspect,
body.app-mode-sidejump .reaction-cine-root:fullscreen .video-merged-frame.video-stage--intrinsic-aspect,
body.app-mode-jump .reaction-cine-root.reaction-cine-root--pseudo-fullscreen .video-merged-frame.video-stage--intrinsic-aspect,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--pseudo-fullscreen .video-merged-frame.video-stage--intrinsic-aspect,
body.app-mode-jump .reaction-cine-root:-webkit-full-screen .video-dual-layout--merged .video-raw-frame.video-stage--portrait-stream,
body.app-mode-sidejump .reaction-cine-root:-webkit-full-screen .video-dual-layout--merged .video-raw-frame.video-stage--portrait-stream,
body.app-mode-jump .reaction-cine-root:fullscreen .video-dual-layout--merged .video-raw-frame.video-stage--portrait-stream,
body.app-mode-sidejump .reaction-cine-root:fullscreen .video-dual-layout--merged .video-raw-frame.video-stage--portrait-stream,
body.app-mode-jump .reaction-cine-root.reaction-cine-root--pseudo-fullscreen .video-dual-layout--merged .video-raw-frame.video-stage--portrait-stream,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--pseudo-fullscreen .video-dual-layout--merged .video-raw-frame.video-stage--portrait-stream,
body.app-mode-jump .reaction-cine-root:-webkit-full-screen .video-dual-layout--merged .video-raw-frame.video-stage--intrinsic-aspect,
body.app-mode-sidejump .reaction-cine-root:-webkit-full-screen .video-dual-layout--merged .video-raw-frame.video-stage--intrinsic-aspect,
body.app-mode-jump .reaction-cine-root:fullscreen .video-dual-layout--merged .video-raw-frame.video-stage--intrinsic-aspect,
body.app-mode-sidejump .reaction-cine-root:fullscreen .video-dual-layout--merged .video-raw-frame.video-stage--intrinsic-aspect,
body.app-mode-jump .reaction-cine-root.reaction-cine-root--pseudo-fullscreen .video-dual-layout--merged .video-raw-frame.video-stage--intrinsic-aspect,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--pseudo-fullscreen .video-dual-layout--merged .video-raw-frame.video-stage--intrinsic-aspect {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    aspect-ratio: unset !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    align-self: stretch !important;
}

body.app-mode-jump .reaction-cine-root:-webkit-full-screen #videoDualLayout.video-dual-layout--merged,
body.app-mode-sidejump .reaction-cine-root:-webkit-full-screen #videoDualLayout.video-dual-layout--merged,
body.app-mode-jump .reaction-cine-root:fullscreen #videoDualLayout.video-dual-layout--merged,
body.app-mode-sidejump .reaction-cine-root:fullscreen #videoDualLayout.video-dual-layout--merged,
body.app-mode-jump .reaction-cine-root.reaction-cine-root--pseudo-fullscreen #videoDualLayout.video-dual-layout--merged,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--pseudo-fullscreen #videoDualLayout.video-dual-layout--merged {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}

body.app-mode-jump .reaction-cine-root:-webkit-full-screen .btn-exit-mobile,
body.app-mode-sidejump .reaction-cine-root:-webkit-full-screen .btn-exit-mobile,
body.app-mode-jump .reaction-cine-root:fullscreen .btn-exit-mobile,
body.app-mode-sidejump .reaction-cine-root:fullscreen .btn-exit-mobile,
body.app-mode-jump .reaction-cine-root.reaction-cine-root--pseudo-fullscreen .btn-exit-mobile,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--pseudo-fullscreen .btn-exit-mobile {
    display: flex;
}

@media (max-width: 768px) {
    body.app-mode-jump .reaction-cine-root:-webkit-full-screen .video-dual-layout,
    body.app-mode-sidejump .reaction-cine-root:-webkit-full-screen .video-dual-layout,
    body.app-mode-jump .reaction-cine-root:fullscreen .video-dual-layout,
    body.app-mode-sidejump .reaction-cine-root:fullscreen .video-dual-layout,
    body.app-mode-jump .reaction-cine-root.reaction-cine-root--pseudo-fullscreen .video-dual-layout,
    body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--pseudo-fullscreen .video-dual-layout {
        min-height: 0 !important;
        flex: 1 1 auto !important;
    }
}

.video-merged-frame {
    position: relative;
    flex: 1;
    min-width: 0;
    aspect-ratio: 8 / 9;
    background: #030610;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    transition: all 0.35s var(--ease);
    box-shadow:
        0 0 0 1px rgba(0, 217, 255, 0.04),
        inset 0 0 60px rgba(0, 0, 0, 0.4);
}

.video-merged-frame:hover {
    border-color: rgba(0, 217, 255, 0.18);
    box-shadow:
        0 0 30px rgba(0, 217, 255, 0.08),
        0 0 80px rgba(0, 217, 255, 0.03),
        inset 0 0 60px rgba(0, 0, 0, 0.3);
}

/* ── Layer 1: Video = bottom ── */
.video-merged-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #030610;
    z-index: 1;
    transition: transform 0.35s var(--ease);
    transform-origin: center center;
}

/* ── Layer 2: Smart Dark Overlay — Cinematic Tint ── */
.smart-dark-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    /* Cinematic dark tint: darkens video so skeleton glows pop */
    background:
        /* Center vignette — keeps center brighter, edges darker */
        radial-gradient(
            ellipse 70% 65% at 50% 50%,
            rgba(0, 6, 20, 0.25) 0%,
            rgba(0, 6, 20, 0.50) 60%,
            rgba(0, 4, 14, 0.72) 100%
        ),
        /* Uniform tint layer */
        linear-gradient(
            180deg,
            rgba(0, 10, 30, 0.30) 0%,
            rgba(0, 8, 24, 0.35) 50%,
            rgba(0, 6, 18, 0.45) 100%
        );
    /* Very subtle cyan color grading to match theme */
    mix-blend-mode: normal;
    opacity: 0;
    transition: opacity 0.6s var(--ease);
}

/* Activate: uniform 20% darken so landmarks / mesh stay readable */
.smart-dark-overlay.active {
    opacity: 1;
    background: rgba(0, 0, 0, 0.2);
}

body.app-mode-reaction .smart-dark-overlay.active {
    background: rgba(0, 0, 0, 0.2);
}

body.app-mode-reaction .smart-dark-overlay.active::before,
body.app-mode-reaction .smart-dark-overlay.active::after {
    opacity: 0.45;
}

/* Jump: hide cinematic overlay during test / countdown; show during mesh preview */
body.app-mode-jump .smart-dark-overlay {
    display: block !important;
    visibility: visible !important;
    pointer-events: none !important;
    opacity: 0;
}

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

body.app-mode-jump .test-countdown-overlay.active ~ .smart-dark-overlay,
body.app-mode-jump .video-raw-frame:has(.test-countdown-overlay.active) .smart-dark-overlay {
    opacity: 0 !important;
}

/* Vertical jump — single merged stage; no Bosco in-frame Connect/Settings leak */
body.app-mode-jump:not(.app-mode-sti) .sti-bosco-view-chrome,
body.app-mode-jump:not(.app-mode-sti) .sti-bosco-view-settings-popover,
body.app-mode-jump:not(.app-mode-sti) .sti-bosco-panel-badge--front {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Vertical jump — no in-frame Connect / settings (title bar keeps camera setup) */
body.app-mode-jump .video-raw-frame-console__connect,
body.app-mode-jump .video-raw-frame-console__settings-btn,
body.app-mode-jump #rawFrameLabelIcon,
body.app-mode-jump .video-raw-frame-console__shell {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.app-mode-jump #videoDualLayout.video-dual-layout--merged .video-frame-bottom-chrome .video-raw-frame-console__topbar {
    display: none !important;
}

body.app-mode-jump .video-frame-bottom-chrome,
body.app-mode-jump .video-frame-bottom-chrome .frame-label,
body.app-mode-jump .video-raw-frame .frame-label,
body.app-mode-jump .video-skeleton-frame .frame-label,
body.app-mode-jump #rawFrameLabel {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    background: rgba(10, 14, 26, 0.88) !important;
    box-shadow: none !important;
    isolation: isolate;
    contain: layout style paint;
}

/* Jump desktop split: camera panel stays clean (no inset dim / veil on video). */
body.app-mode-jump #videoDualLayout:not(.video-dual-layout--merged) .video-raw-frame {
    box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.1) !important;
}

body.app-mode-jump #videoDualLayout:not(.video-dual-layout--merged) .video-raw-frame video {
    background: #050810;
}

body.app-mode-jump #videoDualLayout:not(.video-dual-layout--merged) .video-raw-frame:hover {
    box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.18) !important;
}

body.app-mode-jump .video-skeleton-frame.video-merged-frame {
    box-shadow:
        0 0 0 1px rgba(0, 217, 255, 0.1),
        inset 0 0 40px rgba(0, 0, 0, 0.25);
}

body.app-mode-jump .video-skeleton-frame canvas {
    background: #030610 !important;
}

/* Jump split: Analysis panel — simple skeleton on solid black */
body.app-mode-jump #videoDualLayout:not(.video-dual-layout--merged) .video-skeleton-frame.is-pose-live,
body.app-mode-jump #videoDualLayout:not(.video-dual-layout--merged) .video-skeleton-frame.is-pose-live canvas {
    background: #000000 !important;
}

/* Live pose: skeleton canvas above placeholder (placeholder was covering Analysis). */
body.app-mode-jump .video-skeleton-frame.is-pose-live #placeholderSkeleton {
    display: none !important;
    visibility: hidden !important;
}

body.app-mode-jump .video-skeleton-frame.is-pose-live canvas {
    z-index: 6 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 90°/270° split Analysis: layout + rotate come from syncVideoViewTransforms (match camera video). */
body.app-mode-jump #videoDualLayout.video-stage--quarter-turn:not(.video-dual-layout--merged) .video-skeleton-frame.is-pose-live canvas {
    position: absolute !important;
    margin: 0 !important;
    z-index: 6 !important;
}

/* ── Test countdown overlay (big numbers) ── */
.test-countdown-overlay {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: clamp(3.2rem, 6vw, 5rem);
    font-weight: 900;
    color: #ffffff;
    text-shadow:
        0 0 30px rgba(0, 0, 0, 0.9),
        0 0 40px rgba(0, 217, 255, 0.7);
    background: radial-gradient(circle at 50% 40%, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.85));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s var(--ease);
}

/* Jump: full video frame, very light black veil + centered number */
body.app-mode-jump .test-countdown-overlay {
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0;
    min-height: 0;
    margin: 0;
    transform: none;
    box-sizing: border-box;
    border-radius: inherit;
    background: rgba(0, 0, 0, 0.2) !important;
    box-shadow: none;
}

body.app-mode-jump .test-countdown-overlay.visible {
    opacity: 1;
    animation: test-countdown-pulse-jump 1s ease-in-out infinite;
}

.test-countdown-overlay.visible {
    opacity: 1;
    animation: test-countdown-pulse 1s ease-in-out infinite;
}

@keyframes test-countdown-pulse {
    0%, 100% {
        transform: scale(1);
        text-shadow:
            0 0 26px rgba(0, 0, 0, 0.9),
            0 0 34px rgba(0, 217, 255, 0.6);
    }
    50% {
        transform: scale(1.08);
        text-shadow:
            0 0 40px rgba(0, 0, 0, 1),
            0 0 60px rgba(0, 217, 255, 0.9);
    }
}

@keyframes test-countdown-pulse-jump {
    0%, 100% {
        background-color: rgba(0, 0, 0, 0.18);
        text-shadow:
            0 0 26px rgba(0, 0, 0, 0.9),
            0 0 34px rgba(0, 217, 255, 0.6);
    }
    50% {
        background-color: rgba(0, 0, 0, 0.26);
        text-shadow:
            0 0 40px rgba(0, 0, 0, 1),
            0 0 60px rgba(0, 217, 255, 0.9);
    }
}

/* Post-test analysis — app-wide modal + header label (not on video) */
body.post-test-analyzing .smart-dark-overlay,
body.post-test-analyzing .test-countdown-overlay,
body.post-test-analyzing .jump-mobile-ready-prompt,
body.post-test-analyzing .reaction-mobile-home-prompt,
body.post-test-analyzing .reaction-mobile-pretest-wizard,
body.post-test-analyzing .reaction-test-summary-overlay {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.jump-post-test-analysis {
    position: fixed;
    inset: 0;
    z-index: 1150;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
    background: rgba(4, 8, 18, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.22s ease;
}

.jump-post-test-analysis.is-open {
    opacity: 1;
}

.jump-post-test-analysis[hidden] {
    display: none !important;
}

.jump-post-test-analysis__panel {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: min(420px, 100%);
    max-height: min(78%, 360px);
    overflow: hidden;
    padding: 18px 16px 14px;
    border-radius: 16px;
    border: 1px solid rgba(0, 217, 255, 0.45);
    background: linear-gradient(165deg, rgba(22, 28, 48, 0.97), rgba(10, 14, 28, 0.98));
    box-shadow: 0 20px 56px rgba(0, 0, 0, 0.55);
    text-align: center;
    box-sizing: border-box;
}

.jump-post-test-analysis__badge {
    display: inline-block;
    flex-shrink: 0;
    margin-bottom: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #041218;
    background: linear-gradient(135deg, #7ee8ff, #00d9ff);
}

.jump-post-test-analysis__title {
    flex-shrink: 0;
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 800;
    color: #f1f5f9;
}

.jump-post-test-analysis__eta {
    flex-shrink: 0;
    margin: 0 0 12px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--primary-cyan, #00d9ff);
}

.jump-post-test-analysis__track {
    flex-shrink: 0;
    width: 100%;
    height: 0.55rem;
    margin-bottom: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

.jump-post-test-analysis__fill {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary-cyan, #00d9ff), var(--electric-blue, #0066ff));
    transition: width 0.35s ease-out;
}

.jump-post-test-analysis__foot {
    flex-shrink: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
}

.jump-post-test-analysis__pct {
    flex-shrink: 0;
    font-family: var(--mono);
    font-size: 1.05rem;
    font-weight: 800;
    color: #e0f9ff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.jump-post-test-analysis__sub {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: rgba(203, 213, 225, 0.92);
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .jump-post-test-analysis {
        padding: 8px;
        padding-bottom: max(8px, env(safe-area-inset-bottom, 0));
    }

    .jump-post-test-analysis__panel {
        width: min(100%, 300px);
        max-width: 92vw;
        max-height: min(68dvh, 320px);
        margin: 0 auto;
        padding: 10px 11px calc(8px + env(safe-area-inset-bottom, 0));
        border-radius: 14px;
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.52);
    }

    .jump-post-test-analysis__badge {
        margin-bottom: 5px;
        padding: 2px 8px;
        font-size: 0.58rem;
        letter-spacing: 0.1em;
    }

    .jump-post-test-analysis__title {
        margin-bottom: 4px;
        font-size: 0.88rem;
        line-height: 1.2;
    }

    .jump-post-test-analysis__eta {
        font-size: 0.68rem;
        line-height: 1.35;
        margin-bottom: 8px;
    }

    .jump-post-test-analysis__track {
        margin-bottom: 8px;
    }

    .jump-post-test-analysis__foot {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .jump-post-test-analysis__pct {
        font-size: 0.95rem;
    }

    .jump-post-test-analysis__sub {
        font-size: 0.68rem;
        text-align: left;
        white-space: normal;
    }
}

/* Subtle animated scan line for cinematic feel */
.smart-dark-overlay.active::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0, 217, 255, 0.008) 3px,
        rgba(0, 217, 255, 0.008) 4px
    );
    pointer-events: none;
    animation: scanlines-drift 8s linear infinite;
}

/* Very subtle edge glow — theme color border inner glow */
.smart-dark-overlay.active::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow:
        inset 0 0 80px rgba(0, 217, 255, 0.04),
        inset 0 0 30px rgba(0, 102, 255, 0.03);
    pointer-events: none;
}

@keyframes scanlines-drift {
    0%   { transform: translateY(0); }
    100% { transform: translateY(4px); }
}

/* ── Layer 3: Canvas = skeleton, transparent bg ── */
.video-merged-frame canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 3;
    pointer-events: none;
    transition: transform 0.35s var(--ease);
    transform-origin: center center;
}

/* Phone: instant transform updates — easing made overlay lag behind live video on resize/rotate. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
    .video-merged-frame video,
    .video-merged-frame canvas {
        transition: none;
    }
}

/* Canvas in skeleton frame gets dark background */
.video-skeleton-frame canvas {
    background: #030610;
    z-index: 1;
}

/* ── Layer 4: FPS + time badges — stacked top-right (wrapper moves with canvas on merged/mobile) */
.video-stage-badges {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    pointer-events: none;
}

.fps-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(10, 14, 26, 0.75);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid rgba(0, 230, 118, 0.2);
    border-radius: var(--r-md);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s var(--ease);
    box-shadow:
        0 0 16px rgba(0, 230, 118, 0.06),
        inset 0 0 12px rgba(0, 230, 118, 0.03);
}

.fps-badge.visible {
    opacity: 1;
}

.fps-badge-value {
    font-family: var(--mono);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--success);
    min-width: 22px;
    text-align: right;
    line-height: 1;
    text-shadow: 0 0 10px rgba(0, 230, 118, 0.4);
}

.fps-badge-label {
    font-family: var(--font);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: rgba(0, 230, 118, 0.6);
    line-height: 1;
}

/* Color shifts based on performance */
.fps-badge.fps-good .fps-badge-value  { color: var(--success); text-shadow: 0 0 10px rgba(0, 230, 118, 0.4); }
.fps-badge.fps-good                   { border-color: rgba(0, 230, 118, 0.25); }

.fps-badge.fps-mid .fps-badge-value   { color: var(--warning); text-shadow: 0 0 10px rgba(255, 171, 64, 0.4); }
.fps-badge.fps-mid                    { border-color: rgba(255, 171, 64, 0.25); }
.fps-badge.fps-mid .fps-badge-label   { color: rgba(255, 171, 64, 0.6); }

.fps-badge.fps-low .fps-badge-value   { color: var(--error); text-shadow: 0 0 10px rgba(255, 82, 82, 0.4); }
.fps-badge.fps-low                    { border-color: rgba(255, 82, 82, 0.25); }
.fps-badge.fps-low .fps-badge-label   { color: rgba(255, 82, 82, 0.6); }

/* Time-left pill under FPS in .video-stage-badges */
.mobile-test-time-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 4.5rem;
    padding: 6px 12px;
    background: rgba(10, 14, 26, 0.78);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid rgba(0, 217, 255, 0.28);
    border-radius: var(--r-md);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s var(--ease);
    box-shadow:
        0 0 16px rgba(0, 217, 255, 0.08),
        inset 0 0 12px rgba(0, 217, 255, 0.04);
}

.mobile-test-time-badge.visible {
    opacity: 1;
}

.mobile-test-time-badge-value {
    font-family: var(--mono);
    font-size: 1rem;
    font-weight: 800;
    color: var(--primary-cyan);
    line-height: 1;
    letter-spacing: 0.02em;
    text-shadow: 0 0 12px rgba(0, 217, 255, 0.35);
    text-align: center;
    white-space: nowrap;
}

/* Jump count pill (mobile jump view — shown alongside FPS in stage overlay) */
.mobile-jump-count-badge {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(10, 14, 26, 0.78);
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    border: 1px solid rgba(0, 217, 255, 0.28);
    border-radius: var(--r-md);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s var(--ease);
    box-shadow:
        0 0 16px rgba(0, 217, 255, 0.08),
        inset 0 0 12px rgba(0, 217, 255, 0.04);
}

.mobile-jump-count-badge.visible {
    opacity: 1;
}

.mobile-jump-count-badge-value {
    font-family: var(--mono);
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--primary-cyan);
    line-height: 1;
    min-width: 1.25rem;
    text-align: right;
    text-shadow: 0 0 12px rgba(0, 217, 255, 0.35);
}

.mobile-jump-count-badge-label {
    font-family: var(--font);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: rgba(0, 217, 255, 0.65);
    line-height: 1;
}

/* Mobile jump stage: jumps (left) + FPS (center) + time left (right) in one row */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
    body.app-mode-jump .video-stage-badges,
    body.app-mode-sidejump .video-stage-badges {
        left: 12px;
        right: 12px;
        width: auto;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
    }

    body.app-mode-jump .mobile-jump-count-badge,
    body.app-mode-sidejump .mobile-jump-count-badge {
        display: flex;
        order: 1;
        flex: 0 1 auto;
    }

    body.app-mode-jump #fpsBadgeOverlay,
    body.app-mode-sidejump #fpsBadgeOverlay {
        display: flex;
        order: 2;
        flex: 0 1 auto;
        padding: 5px 10px;
    }

    body.app-mode-jump #fpsBadgeOverlay .fps-badge-value,
    body.app-mode-sidejump #fpsBadgeOverlay .fps-badge-value {
        font-size: 0.95rem;
    }

    body.app-mode-jump .mobile-test-time-badge,
    body.app-mode-sidejump .mobile-test-time-badge {
        order: 3;
        flex: 0 1 auto;
        margin-left: auto;
    }
}

/* ── Layer 5: Placeholder when camera off ── */
.video-merged-frame .video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(3, 6, 16, 0.95);
    z-index: 5;
    pointer-events: none;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.9rem;
    font-weight: 500;
}

.video-merged-frame .video-placeholder .cam-icon {
    font-size: 3.5rem;
    opacity: 0.35;
    filter: drop-shadow(0 0 20px var(--glow-cyan));
    animation: placeholder-breathe 4s ease-in-out infinite;
}

.video-merged-frame .video-placeholder .placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    text-align: center;
}

.video-merged-frame .video-placeholder .placeholder-icon {
    font-size: 2.8rem;
    opacity: 0.3;
    filter: drop-shadow(0 0 18px var(--glow-cyan));
    animation: placeholder-breathe 4s ease-in-out infinite;
}

@keyframes placeholder-breathe {
    0%, 100% { transform: scale(1); opacity: 0.35; }
    50%      { transform: scale(1.08); opacity: 0.5; }
}

/* ── Frame Label — bottom center overlay ── */
/* Bottom stack: frame label + (on phone) collapsed reaction sidebar expand FAB */
.video-frame-bottom-chrome {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 20px);
    pointer-events: none;
}

.video-frame-bottom-chrome .frame-label {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
}

.video-frame-bottom-chrome .reaction-sidebar-expand-video-dock {
    pointer-events: auto;
}

.frame-label {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    background: rgba(10, 14, 26, 0.82);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    border: 1px solid rgba(0, 217, 255, 0.14);
    border-radius: var(--r-md);
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 0 16px rgba(0, 217, 255, 0.05);
    transition: border-color 0.3s var(--ease);
}

.video-merged-frame:hover .frame-label {
    border-color: rgba(0, 217, 255, 0.26);
}

.frame-label-icon {
    font-size: 0.85rem;
    line-height: 1;
}

.frame-label-text {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--primary-cyan);
    text-shadow: 0 0 10px rgba(0, 217, 255, 0.2);
}

.frame-label-res {
    font-family: var(--mono);
    font-size: 0.63rem;
    font-weight: 600;
    color: rgba(0, 217, 255, 0.5);
    letter-spacing: 0.5px;
}

.frame-label-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
    transition: all 0.4s var(--ease);
}

.frame-label-dot.active {
    background: var(--success);
    box-shadow: 0 0 8px var(--success), 0 0 18px rgba(0, 230, 118, 0.2);
    animation: live-blink 1.5s ease-in-out infinite;
}


/* ═══════════════════════════════════════════
   FANCY OVERLAY LABEL — Top-Left on merged frame
   ═══════════════════════════════════════════ */

.overlay-label-fancy {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    background: rgba(10, 14, 26, 0.85);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    border: 1px solid rgba(0, 217, 255, 0.15);
    border-radius: var(--r-md);
    pointer-events: none;
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.05);
    transition: all 0.3s var(--ease);
}

.overlay-label-fancy .label-icon {
    font-size: .9rem;
    line-height: 1;
    filter: drop-shadow(0 0 8px rgba(0, 217, 255, 0.3));
}

.overlay-label-fancy .label-text {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--primary-cyan);
    text-shadow: 0 0 14px rgba(0, 217, 255, 0.25);
}

.overlay-label-fancy .label-live {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
    transition: all 0.4s var(--ease);
}

.overlay-label-fancy .label-live.active {
    background: var(--success);
    box-shadow: 0 0 8px var(--success), 0 0 20px rgba(0, 230, 118, 0.2);
    animation: live-blink 1.5s ease-in-out infinite;
}

@keyframes live-blink {
    0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--success); }
    50%      { opacity: 0.4; box-shadow: 0 0 4px var(--success); }
}

/* Hover glow on label */
.video-merged-frame:hover .overlay-label-fancy {
    border-color: rgba(0, 217, 255, 0.25);
    box-shadow: 0 0 24px rgba(0, 217, 255, 0.08);
}


/* ═══════════════════════════════════════════
   MERGED FRAME BADGES — FPS & Resolution
   ═══════════════════════════════════════════ */

.merged-fps-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 10;
    font-family: var(--mono);
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--success);
    background: rgba(0, 230, 118, 0.1);
    border: 1px solid rgba(0, 230, 118, 0.2);
    padding: 5px 14px;
    border-radius: var(--r-sm);
    backdrop-filter: blur(10px);
    pointer-events: none;
}

.merged-res-badge {
    position: absolute;
    bottom: 14px;
    left: 14px;
    z-index: 10;
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--info);
    background: rgba(33, 150, 243, 0.1);
    border: 1px solid rgba(33, 150, 243, 0.2);
    padding: 4px 12px;
    border-radius: var(--r-sm);
    backdrop-filter: blur(10px);
    pointer-events: none;
}


/* ═══════════════════════════════════════════
   GENERAL BUTTONS
   ═══════════════════════════════════════════ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font-family: var(--font);
    cursor: pointer;
    transition: all 0.3s var(--ease);
    white-space: nowrap;
    user-select: none;
}

.btn:active:not(:disabled) { transform: scale(0.95); }
.btn:disabled { opacity: 0.3; cursor: not-allowed; }

.btn-mini {
    padding: 5px 12px;
    font-size: 0.72rem;
    border-radius: var(--r-sm);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    font-family: var(--font);
    font-weight: 600;
    transition: all 0.25s var(--ease);
}

.btn-mini:hover {
    background: rgba(0, 217, 255, 0.06);
    color: var(--primary-cyan);
    border-color: var(--border-color);
}

/* Spinner */
.spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-top-color: #000;
    border-radius: 50%;
    animation: spin 0.65s linear infinite;
}

.athlete-list-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 14px;
}

.athlete-list-spinner {
    width: 28px;
    height: 28px;
    border-width: 3px;
    border-color: rgba(148, 163, 184, 0.25);
    border-top-color: var(--primary-cyan);
}

@keyframes spin { to { transform: rotate(360deg); } }


/* ═══════════════════════════════════════════
   LOG PANEL
   ═══════════════════════════════════════════ */

.log-scroll {
    max-height: 220px;
    overflow-y: auto;
    padding: 12px 20px;
    font-family: var(--mono);
    font-size: 0.72rem;
    line-height: 1.9;
}

.log-entry {
    padding: 3px 0;
    color: var(--text-muted);
    display: flex;
    gap: 8px;
    align-items: baseline;
    border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}

.log-entry:last-child { border-bottom: none; }

.log-time {
    color: var(--text-muted);
    opacity: 0.45;
    flex-shrink: 0;
    min-width: 50px;
    font-size: 0.66rem;
}

.log-tag {
    font-weight: 700;
    flex-shrink: 0;
    min-width: 56px;
    font-size: 0.7rem;
}

.log-msg {
    color: var(--text-secondary);
    word-break: break-word;
}

.log-info .log-tag    { color: var(--info); }
.log-success .log-tag { color: var(--success); }
.log-warning .log-tag { color: var(--warning); }
.log-error .log-tag   { color: var(--error); }
.log-system .log-tag  { color: var(--primary-cyan); }


/* ═══════════════════════════════════════════
   DEBUG PANEL
   ═══════════════════════════════════════════ */

.debug-panel {
    background: rgba(10, 14, 26, 0.8);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: 14px 20px;
    font-family: var(--mono);
    font-size: 0.72rem;
    backdrop-filter: blur(10px);
}

.dbg-row {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.dbg-row:last-child { border-bottom: none; }
.dbg-row span:first-child { color: var(--text-muted); }
.dbg-row span:last-child { color: var(--primary-cyan); font-weight: 700; }


/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */

.app-footer {
    text-align: center;
    padding: 16px 0 0;
    font-size: 0.72rem;
    color: var(--text-muted);
    opacity: 0.5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.footer-dot { opacity: 0.3; }


/* ═══════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════ */

.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    border-radius: var(--r-md);
    background: rgba(20, 24, 36, 0.9);
    backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid var(--border-color);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(0, 217, 255, 0.05);
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 500;
    pointer-events: auto;
    animation: toast-slide 0.4s var(--ease);
    min-width: 280px;
    max-width: 420px;
}

.toast-success { border-color: rgba(0, 230, 118, 0.3); }
.toast-success .toast-icon { color: var(--success); }

.toast-error { border-color: rgba(255, 82, 82, 0.3); }
.toast-error .toast-icon { color: var(--error); }

.toast-warning { border-color: rgba(255, 171, 64, 0.3); }
.toast-warning .toast-icon { color: var(--warning); }

.toast-info { border-color: var(--border-color); }
.toast-info .toast-icon { color: var(--primary-cyan); }

.toast-icon { font-size: 1.15rem; flex-shrink: 0; }
.toast-msg { flex: 1; }

.toast-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    padding: 2px;
    transition: color 0.2s;
    flex-shrink: 0;
}

.toast-close:hover { color: var(--text-primary); }

@keyframes toast-slide {
    from { opacity: 0; transform: translateX(40px) scale(0.95); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

.toast-exit {
    animation: toast-out 0.3s ease forwards;
}

@keyframes toast-out {
    to { opacity: 0; transform: translateX(40px) scale(0.9); }
}


/* ═══════════════════════════════════════════
   RESPONSIVE — Tablet
   ═══════════════════════════════════════════ */

@media (max-width: 900px) {
    .app-wrapper {
        padding: max(16px, env(safe-area-inset-top, 0px)) 14px 32px;
        gap: 14px;
    }

    .app-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px 20px;
    }

    .header-chips { width: 100%; }

    .section-title-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .title-bar-actions {
        width: 100%;
        justify-content: space-between;
    }

    .video-merged-frame {
        flex: 1;
        min-width: 0;
        aspect-ratio: 10 / 9;
    }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — Mobile header (app-style toolbar)
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
    .app-header {
        flex-direction: column;
        align-items: stretch;
        padding: 12px 12px 11px;
        gap: 10px;
        border-radius: 14px;
        border: 1px solid rgba(0, 217, 255, 0.22);
        background: rgba(14, 18, 32, 0.96);
        box-shadow: 0 6px 22px rgba(0, 0, 0, 0.38);
    }

    .app-header::before {
        height: 1px;
        opacity: 0.45;
    }

    .header-brand {
        width: 100%;
        min-width: 0;
        gap: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    }

    .brand-glow-ring {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        animation: none;
        background: rgba(0, 217, 255, 0.08);
        border: 1px solid rgba(0, 217, 255, 0.28);
        box-shadow: none;
    }

    .brand-logo--header {
        width: 30px;
        height: 30px;
    }

    .brand-text {
        flex: 1;
        min-width: 0;
    }

    .brand-main-row {
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
        width: 100%;
        min-width: 0;
    }

    .brand-text h1 {
        font-size: 1.12rem;
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        -webkit-text-fill-color: var(--primary-cyan);
        background: none;
        padding-block: 0;
    }

    .brand-role-badge {
        flex-shrink: 0;
        font-size: 0.56rem;
        padding: 3px 7px;
        letter-spacing: 0.05em;
        border-radius: 6px;
    }

    .brand-version {
        font-size: 0.64rem;
        margin-top: 1px;
    }

    .header-chips {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }

    .header-chips .chip:not(.chip-action) {
        display: none;
    }

    /* Handset: Pose AI status row above Change test / List athletes */
    body.platform-handset .header-chips > .chip:not(.chip-action) {
        display: flex !important;
        grid-column: 1 / -1;
        width: 100%;
        min-height: 42px;
        padding: 8px 12px;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px 8px;
        background: rgba(10, 14, 28, 0.98);
        border: 1px solid rgba(148, 163, 184, 0.28);
        border-radius: 12px;
        box-shadow: none;
    }

    body.platform-handset .header-chips > .chip:not(.chip-action) .chip-label {
        display: inline;
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--text-muted);
    }

    body.platform-handset .header-chips > .chip:not(.chip-action) .chip-value {
        font-size: 0.76rem;
        color: #00e676;
    }

    body.platform-handset .header-chips > .chip:not(.chip-action) .chip-inference-badge {
        display: inline-flex !important;
        margin-inline-start: 0;
    }

    .chip-label {
        display: none;
    }

    .chip-action {
        width: auto;
        min-height: 44px;
        padding: 10px 10px;
        justify-content: center;
        border-radius: 12px;
        background: rgba(10, 14, 28, 0.98);
        border: 1px solid rgba(0, 217, 255, 0.32);
        box-shadow: none;
        gap: 6px;
    }

    .chip-action .chip-icon {
        filter: none;
        font-size: 0.95rem;
    }

    .chip-action .chip-value {
        font-size: 0.76rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: none;
        color: #b8f0ff;
    }

    #btnCoachAthleteList .chip-value {
        font-size: 0.76rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: none;
        color: rgba(226, 232, 240, 0.95);
    }

    .chip-action:hover,
    .chip-action:active {
        transform: none;
        background: rgba(12, 18, 36, 0.98);
        border-color: rgba(0, 217, 255, 0.5);
        box-shadow: none;
    }

    /* Guest on phone: Pose AI on top, Change test full width below */
    body.app-role-guest.platform-handset .header-chips {
        grid-template-columns: 1fr;
    }

    body.app-role-guest:not(.platform-handset) .header-chips .chip:not(.chip-action) {
        display: none !important;
    }

    body.app-role-guest.platform-handset .header-chips .chip-action {
        grid-column: 1 / -1;
        width: 100%;
    }

    body.app-role-guest:not(.platform-handset) .header-chips .chip-action {
        grid-column: 1 / -1;
        width: 100%;
    }

    body.app-role-guest .brand-role-badge--guest {
        max-width: min(46vw, 9.5rem);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.group-test-active .app-header {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 14px 14px;
    }

    body.group-test-active .header-brand {
        width: 100%;
        max-width: none;
        flex: none;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    }

    body.group-test-active .brand-text h1 {
        flex: 1 1 auto;
        max-width: none;
    }

    body.group-test-active .group-test-bar {
        order: 2;
        width: 100%;
        justify-self: stretch;
    }

    body.group-test-active .header-chips {
        order: 3;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    body.group-test-active .group-test-bar__tag-name {
        font-size: 0.8rem;
    }

    body.group-test-active .group-test-bar__counter {
        font-size: 0.78rem;
    }

    body.app-role-coach .header-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Coach: secondary action (list athletes) slightly muted */
    #btnCoachAthleteList.chip-action {
        background: rgba(10, 14, 28, 0.98);
        border-color: rgba(148, 163, 184, 0.35);
    }

    #btnCoachAthleteList.chip-action .chip-value {
        color: var(--text-secondary);
    }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — Mobile
   ═══════════════════════════════════════════ */

@media (max-width: 540px) {
    .group-test-bar {
        padding: 10px 10px 12px;
    }

    .group-test-bar__row--top {
        flex-wrap: wrap;
        gap: 8px;
    }

    .group-test-bar__tag {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .group-test-bar__aside {
        flex: 1 1 100%;
        justify-content: center;
        width: 100%;
        padding: 4px 0 2px;
    }

    .group-test-bar__counter {
        flex: 0 0 auto;
        min-width: 3.75rem;
        padding: 10px 14px;
        font-size: 0.88rem;
    }

    .group-test-bar__nav {
        flex: 0 0 auto;
    }

    .group-test-bar__tag-name {
        font-size: 0.8rem;
    }

    .group-test-bar__field--athlete .group-test-bar__value {
        font-size: 0.92rem;
    }

    .group-test-bar__nav-btn {
        width: 44px;
        height: 44px;
    }

    body.group-test-active .header-chips .chip-action {
        min-height: 46px;
    }

    /* Reaction only: sidebar above main on very small screens */
    body.app-mode-reaction .main-content-layout {
        grid-template-areas:
            "sidebar"
            "main";
    }
    .app-wrapper {
        padding: max(10px, env(safe-area-inset-top, 0px)) 10px 24px;
        gap: 12px;
    }

    .brand-text h1 {
        font-size: 1.05rem;
    }

    .section-video {
        border-radius: var(--r-lg);
    }

    .video-merged-container { padding: 8px; }

    .section-video {
        border-radius: var(--r-lg);
    }

    .video-merged-container { padding: 8px; }

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

    .video-dual-layout {
        flex-direction: column;
        gap: 8px;
    }

    .video-skeleton-frame {
        display: none;
    }

    /* Skeleton panel only — raw camera frame sizing is in jump/reaction mobile rules below */
    .video-merged-frame:not(.video-raw-frame) {
        flex: none;
        width: 100%;
        aspect-ratio: 9 / 16;
        min-height: min(68vw, 480px);
    }

    body.app-mode-jump .video-raw-frame.video-merged-frame,
    body.app-mode-sidejump .video-raw-frame.video-merged-frame {
        flex: 1 1 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;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Reaction: same stage sizing as jump on phone (styles-video-mobile.css) */
    body.app-mode-reaction .video-raw-frame.video-merged-frame,
    body.app-mode-reaction .video-raw-frame.video-merged-frame.video-stage--intrinsic-aspect {
        flex: 1 1 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;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    body.app-mode-reaction .video-dual-layout {
        min-height: 0;
        max-height: none;
        height: auto;
        aspect-ratio: unset;
    }

    body.app-mode-reaction.reaction-sidebar-collapsed .video-dual-layout {
        min-height: 0;
        max-height: none;
    }

    body.app-mode-reaction.reaction-sidebar-collapsed .reaction-cine-root {
        min-height: 0;
        max-height: none;
        height: auto;
        overflow: visible;
    }

    .video-raw-frame canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        z-index: 3;
        pointer-events: none;
        touch-action: pan-y;
    }

    /* Video element was swallowing touch — block scroll on label / stage area */
    .video-merged-frame video {
        pointer-events: none;
    }

    .video-merged-frame,
    .video-merged-container,
    .reaction-cine-root,
    .section-video {
        touch-action: pan-y;
    }

    /* Jump/Reaction mobile: document scroll (styles-video-mobile.css); avoid nested 100dvh clip */
    body:not(.test-select-overlay-open):not(.reaction-pseudo-stage-fs):not(.app-mode-jump):not(.app-mode-reaction) .app-wrapper {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        max-height: 100dvh;
    }

    /* Reaction + minimized sidebar: scroll the page, not a clipped inner column */
    body.app-mode-reaction.reaction-sidebar-collapsed:not(.reaction-pseudo-stage-fs) .app-wrapper {
        max-height: none;
        overflow-y: visible;
    }

    .frame-label {
        padding: 5px 12px;
        gap: 5px;
        bottom: 8px;
    }

    .frame-label-text { font-size: 0.64rem; letter-spacing: 1.2px; }
    .frame-label-icon { font-size: 0.78rem; }

    /* Coach on phone: video source res only next to camera row (pose-loop updates #mergedResBadge). */
    #mergedResBadge {
        display: inline-block;
        max-width: 92vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.52rem;
        vertical-align: middle;
    }

    .overlay-label-fancy {
        padding: 6px 12px;
        gap: 7px;
        top: 10px; left: 10px;
    }

    .overlay-label-fancy .label-text {
        font-size: 0.72rem;
        letter-spacing: 1px;
    }

    .overlay-label-fancy .label-icon { font-size: 0.98rem; }

    .merged-fps-badge { top: 10px; right: 10px; font-size: 0.7rem; }
    .merged-res-badge { bottom: 10px; left: 10px; font-size: 0.64rem; }

    .section-title-bar {
        padding: 12px 14px;
        gap: 10px;
    }

    .title-bar-actions {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .camera-select-wrapper {
        width: 100%;
    }

    .camera-select {
        height: 44px;
        font-size: 0.82rem;
        padding: 0 36px 0 14px;
    }

    body.app-mode-jump #videoPanelSetup .video-view-options .video-tool-btns,
    body.app-mode-reaction #videoPanelSetup .video-view-options .video-tool-btns {
        width: auto;
        gap: 8px;
    }

    body.app-mode-jump #videoPanelSetup .video-view-options .video-tool-btn,
    body.app-mode-reaction #videoPanelSetup .video-view-options .video-tool-btn {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        font-size: inherit;
        border-radius: 10px;
    }

    body.app-mode-jump #videoPanelSetup .video-view-options .video-tool-btn svg,
    body.app-mode-reaction #videoPanelSetup .video-view-options .video-tool-btn svg {
        width: 18px;
        height: 18px;
    }

    .video-tool-btns {
        width: 100%;
        gap: 6px;
    }

    .video-tool-btn {
        flex: 1;
        width: auto;
        height: 38px;
        font-size: 0.76rem;
        border-radius: var(--r-md);
    }

    body.app-mode-jump #videoPanelSetup .video-view-options .video-tool-btn,
    body.app-mode-reaction #videoPanelSetup .video-view-options .video-tool-btn {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        min-height: 40px;
    }

    body.app-mode-jump .btn-connect,
    body.app-mode-jump .btn-disconnect,
    body.app-mode-reaction .btn-connect,
    body.app-mode-reaction .btn-disconnect {
        width: 100%;
        min-height: 36px;
        justify-content: center;
        font-size: 0.76rem;
        border-radius: 10px;
    }

    .toast-container { top: 10px; right: 10px; left: 10px; }

    .toast {
        min-width: 0;
        max-width: none;
        font-size: 0.78rem;
    }

    .orb-1 { width: 300px; height: 300px; }
    .orb-2 { width: 250px; height: 250px; }
    .orb-3 { display: none; }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — Large Screens
   ═══════════════════════════════════════════ */

@media (min-width: 1400px) {
    .video-merged-frame {
        aspect-ratio: 8 / 9;
    }
}


/* ═══════════════════════════════════════════
   Jump Detector Panel Styles
   ═══════════════════════════════════════════ */

.jump-panel {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 12px;
    padding: 0;
    margin: 16px 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.jump-panel .card-header {
    background: rgba(255, 255, 255, 0.05);
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.jump-panel .card-header h3 {
    margin: 0;
    font-size: 18px;
    color: #fff;
}

.jump-panel .card-body {
    padding: 16px;
}

/* Stats Display */
.jump-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.stat-item.main-stat {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-item.main-stat .stat-value {
    font-size: 48px;
    font-weight: bold;
}

.stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-value {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    margin-top: 4px;
}

.stat-row {
    display: flex;
    gap: 12px;
}

.stat-row .stat-item {
    flex: 1;
}

/* Status Bar */
.jump-status-bar {
    text-align: center;
    padding: 8px;
    margin-bottom: 16px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
}

#jumpStatus {
    font-size: 14px;
    font-weight: bold;
    padding: 4px 12px;
    border-radius: 12px;
}

.status-ready {
    background: #28a745;
    color: #fff;
}

.status-calibrating {
    background: #ffc107;
    color: #000;
    animation: pulse 1s infinite;
}

.status-jumping {
    background: #17a2b8;
    color: #fff;
    animation: bounce 0.3s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* Controls */
.jump-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.control-label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
}

.control-label input[type="range"] {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
    appearance: none;
    cursor: pointer;
}

.control-label input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #667eea;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#sensitivityValue {
    text-align: center;
    font-weight: bold;
    color: #667eea;
}

.control-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

#resetJumpBtn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
}

#resetJumpBtn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}


body.app-mode-reaction #sectionVideoTitle {
    display: none;
}

body.app-mode-reaction #rawFrameLabel,
body.app-mode-reaction .video-skeleton-frame .frame-label {
    display: none !important;
}

/* Phone — reaction sidebar minimize + scrollable panel (no camera “Reaction — live” bar) */
@media (max-width: 768px) {
    body.app-mode-reaction.reaction-sidebar-collapsed .video-merged-container {
        padding-left: 10px;
        padding-right: 10px;
    }

    body.app-mode-reaction.reaction-sidebar-collapsed .reaction-video-stage-below-dock:not([hidden]) {
        padding-left: 10px;
        padding-right: 10px;
    }

    body.app-mode-reaction #jumpSidebar.reaction-sidebar-collapsed {
        width: 0 !important;
        min-width: 0;
        max-width: 0;
        padding: 0;
        margin: 0;
        border: none;
        background: transparent;
        box-shadow: none;
        overflow: visible;
        pointer-events: none;
    }

    body.app-mode-reaction #jumpSidebar.reaction-sidebar-collapsed .reaction-sidebar-expand-sidebar-dock {
        display: none;
    }

    body.app-mode-reaction .reaction-sidebar-expand-video-dock .reaction-sidebar-expand-fab {
        min-width: 44px;
        min-height: 44px;
        font-size: 1.1rem;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
    }

    body.app-mode-reaction:not(.reaction-sidebar-collapsed) .video-frame-bottom-chrome {
        bottom: 12px;
        gap: 8px;
        z-index: 12;
    }

    /* Collapsed: give the camera stage more height (zones were clipping at top) */
    body.app-mode-reaction.reaction-sidebar-collapsed .reaction-cine-root {
        min-height: min(58vh, 620px);
    }

    body.app-mode-reaction.reaction-sidebar-collapsed .video-dual-layout {
        min-height: min(54vh, 580px);
        max-height: none;
        aspect-ratio: unset;
    }

    body.app-mode-reaction.reaction-sidebar-collapsed .video-merged-frame {
        flex: 1 1 auto !important;
        aspect-ratio: unset !important;
        min-height: 0 !important;
    }

    /* Collapsed: page must scroll (flex chain was shrinking everything into 100dvh) */
    body.app-mode-reaction.reaction-sidebar-collapsed:not(.reaction-pseudo-stage-fs) {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        overscroll-behavior-y: auto;
    }

    body.app-mode-reaction.reaction-sidebar-collapsed:not(.reaction-pseudo-stage-fs) .app-wrapper {
        max-height: none;
        min-height: 0;
        overflow: visible;
        height: auto;
    }

    body.app-mode-reaction.reaction-sidebar-collapsed .main-content-layout {
        display: flex;
        flex-direction: column;
        flex: 0 0 auto;
        min-height: 0;
        width: 100%;
    }

    body.app-mode-reaction.reaction-sidebar-collapsed .content-main,
    body.app-mode-reaction.reaction-sidebar-collapsed .section-video {
        flex: 0 0 auto;
        min-height: auto;
    }

    body.app-mode-reaction.reaction-sidebar-collapsed .reaction-cine-root {
        flex: 0 0 auto;
    }

    /* Sidebar is fixed — don’t reserve a grid row on phone */
    body.app-mode-reaction .main-content-layout {
        grid-template-areas: "main";
        grid-template-columns: 1fr;
    }

    /* Expanded reaction panel: bottom sheet with one scroll surface */
    body.app-mode-reaction #jumpSidebar:not(.reaction-sidebar-collapsed).sidebar-right {
        left: 8px;
        right: 8px;
        bottom: 0;
        width: auto;
        max-width: none;
        max-height: min(78dvh, 720px);
        border-radius: var(--r-xl) var(--r-xl) 0 0;
        padding-bottom: max(14px, env(safe-area-inset-bottom, 0px));
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
        overscroll-behavior: contain;
        pointer-events: auto;
    }

    body.app-mode-reaction #jumpSidebar:not(.reaction-sidebar-collapsed) #sidebarMainStack {
        min-height: 0;
    }

    body.app-mode-reaction #jumpSidebar:not(.reaction-sidebar-collapsed) #reactionSidebarCard {
        min-height: 0;
        flex: 0 0 auto;
    }

    body.app-mode-reaction #jumpSidebar:not(.reaction-sidebar-collapsed) #reactionSidebarCard .sidebar-card-body {
        min-height: 0;
        overflow: visible;
    }

    body.app-mode-reaction #jumpSidebar:not(.reaction-sidebar-collapsed) #sidebarJumpReportCard .sidebar-card-body {
        max-height: none;
        overflow: visible;
    }
}

@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
    body.app-mode-reaction #fpsBadgeOverlay {
        display: none !important;
    }
}

.reaction-report-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: var(--r-md);
    background: rgba(14, 18, 32, 0.65);
    border: 1px solid rgba(0, 217, 255, 0.08);
}

.reaction-report-thumb {
    display: block;
    border-radius: var(--r-sm);
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.reaction-report-row-meta {
    flex: 1;
    min-width: 0;
}

.reaction-report-row-title {
    font-weight: 600;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.92);
}

.reaction-report-row-metrics {
    font-size: 12px;
    opacity: 0.88;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.78);
}

.reaction-detail-test {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
}

.reaction-detail-steps {
    max-height: min(28vh, 220px);
}

.reaction-detail-steps-empty {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: rgba(226, 232, 240, 0.55);
}

.reaction-detail-steps-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.reaction-detail-step-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(14, 18, 32, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.reaction-detail-step-item--ok {
    border-color: rgba(0, 217, 255, 0.22);
}

.reaction-detail-step-item--miss {
    border-color: rgba(255, 120, 90, 0.2);
}

.reaction-detail-step-index {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(0, 217, 255, 0.85);
    min-width: 3.2rem;
}

.reaction-detail-step-item--miss .reaction-detail-step-index {
    color: rgba(255, 160, 120, 0.9);
}

.reaction-detail-step-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reaction-detail-step-target {
    font-weight: 600;
    font-size: 0.8rem;
    color: rgba(248, 250, 252, 0.95);
}

.reaction-detail-step-outcome {
    font-family: var(--mono);
    font-size: 0.74rem;
    color: rgba(200, 255, 240, 0.88);
}

.reaction-detail-step-item--miss .reaction-detail-step-outcome {
    color: rgba(255, 190, 170, 0.88);
}

.reaction-detail-export-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.btn-reaction-detail-save-pdf,
.btn-reaction-detail-save-site {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.btn-reaction-detail-save-pdf {
    border: 1px solid rgba(168, 88, 58, 0.62);
    background: rgba(12, 10, 14, 0.92);
    color: rgba(248, 250, 252, 0.95);
}

.btn-reaction-detail-save-pdf:hover:not(:disabled) {
    border-color: rgba(210, 110, 72, 0.78);
    background: rgba(22, 16, 20, 0.96);
}

.btn-reaction-detail-save-site {
    border: 1px solid rgba(56, 189, 248, 0.55);
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.22) 0%, rgba(6, 95, 140, 0.35) 100%);
    color: #e0f7ff;
}

.btn-reaction-detail-save-site:hover:not(:disabled) {
    border-color: rgba(125, 211, 252, 0.85);
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.32) 0%, rgba(6, 95, 140, 0.48) 100%);
}

.btn-reaction-detail-save-pdf:disabled,
.btn-reaction-detail-save-site:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

body:not(.app-mode-reaction) .reaction-detail-export-actions {
    display: none !important;
}

/* ═══════════════════════════════════════════
   MAIN CONTENT — Two Column Layout
   Video Left + Sidebar Right
   ═══════════════════════════════════════════ */

.main-content-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    grid-template-areas: "main sidebar";
    gap: 20px;
    align-items: start;
}

/* Merged jump view: keep the sticky sidebar within the viewport (row can still be tall). */
.main-content-layout:has(.video-dual-layout--merged) .sidebar-right {
    max-height: calc(100vh - 48px);
}

.content-main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0; /* prevent overflow */
}

/* ═══════════════════════════════════════════
   REACTION TIME — Cine layout (camera + stacked overlay canvas: zones + pose)
   ═══════════════════════════════════════════ */

body.app-mode-reaction .app-wrapper {
    min-height: 100dvh;
    box-sizing: border-box;
}

body.app-mode-reaction .main-content-layout {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: min(calc(100dvh - 160px), 1100px);
    width: 100%;
}

body.app-mode-reaction .content-main {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

body.app-mode-reaction .sidebar-right {
    position: fixed;
    left: auto;
    right: 16px;
    bottom: 16px;
    transform: none;
    width: min(420px, calc(100vw - 32px));
    max-height: min(88vh, 900px);
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 50;
    top: auto;
    padding: 14px 14px 16px;
    box-sizing: border-box;
    border-radius: var(--r-xl);
    background: rgba(10, 14, 26, 0.88);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    border: 1px solid rgba(255, 140, 90, 0.28);
    box-shadow: 0 -10px 48px rgba(0, 0, 0, 0.55);
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    grid-template-columns: unset !important;
    isolation: isolate;
}

body.app-mode-reaction .sidebar-footer {
    display: none;
}

@media (min-width: 769px) {
    body.app-mode-reaction .section-video {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    body.app-mode-reaction .reaction-cine-root {
        border-radius: var(--r-lg);
        overflow: hidden;
        flex: 1 1 auto;
        min-height: min(62vh, 720px);
        display: flex;
        flex-direction: column;
    }
}

.reaction-cine-root:-webkit-full-screen,
.reaction-cine-root:fullscreen,
.reaction-cine-root.reaction-cine-root--pseudo-fullscreen {
    background: #02040a;
    border-radius: 0;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    height: 100svh !important;
    min-height: 100vh;
    min-height: 100dvh;
    min-height: 100svh;
    min-height: -webkit-fill-available;
    position: relative;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
}

/* Fullscreen: kill portrait / quarter-turn pillar caps so stage uses full viewport */
.reaction-cine-root:-webkit-full-screen #videoDualLayout,
.reaction-cine-root:fullscreen #videoDualLayout,
.reaction-cine-root.reaction-cine-root--pseudo-fullscreen #videoDualLayout,
.reaction-cine-root:-webkit-full-screen #videoDualLayout.video-stage--portrait-stream,
.reaction-cine-root:fullscreen #videoDualLayout.video-stage--portrait-stream,
.reaction-cine-root.reaction-cine-root--pseudo-fullscreen #videoDualLayout.video-stage--portrait-stream,
.reaction-cine-root:-webkit-full-screen #videoDualLayout.video-stage--quarter-turn,
.reaction-cine-root:fullscreen #videoDualLayout.video-stage--quarter-turn,
.reaction-cine-root.reaction-cine-root--pseudo-fullscreen #videoDualLayout.video-stage--quarter-turn,
.reaction-cine-root:-webkit-full-screen .video-dual-layout--merged .video-raw-frame.video-stage--portrait-stream,
.reaction-cine-root:fullscreen .video-dual-layout--merged .video-raw-frame.video-stage--portrait-stream,
.reaction-cine-root.reaction-cine-root--pseudo-fullscreen .video-dual-layout--merged .video-raw-frame.video-stage--portrait-stream,
.reaction-cine-root:-webkit-full-screen .video-merged-frame.video-stage--portrait-stream,
.reaction-cine-root:fullscreen .video-merged-frame.video-stage--portrait-stream,
.reaction-cine-root.reaction-cine-root--pseudo-fullscreen .video-merged-frame.video-stage--portrait-stream,
.reaction-cine-root:-webkit-full-screen .video-merged-frame.video-stage--intrinsic-aspect,
.reaction-cine-root:fullscreen .video-merged-frame.video-stage--intrinsic-aspect,
.reaction-cine-root.reaction-cine-root--pseudo-fullscreen .video-merged-frame.video-stage--intrinsic-aspect,
.reaction-cine-root:-webkit-full-screen #videoDualLayout.video-stage--quarter-turn.video-dual-layout--merged .video-merged-frame,
.reaction-cine-root:fullscreen #videoDualLayout.video-stage--quarter-turn.video-dual-layout--merged .video-merged-frame,
.reaction-cine-root.reaction-cine-root--pseudo-fullscreen #videoDualLayout.video-stage--quarter-turn.video-dual-layout--merged .video-merged-frame {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: unset !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    align-self: stretch !important;
}

body.reaction-pseudo-stage-fs .content-main,
body.reaction-pseudo-stage-fs .section-video,
body.reaction-pseudo-stage-fs .video-tab-panel {
    padding: 0 !important;
    margin: 0 !important;
    max-height: none !important;
}

/* iOS / mobile WebKit: Fullscreen API on a div often fails; fixed overlay mimics stage fullscreen */
.reaction-cine-root.reaction-cine-root--pseudo-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100000 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 0 !important;
}

body.reaction-pseudo-stage-fs {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
}

.btn-exit-mobile {
    display: none;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 9999;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(20, 24, 32, 0.7);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.15);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.btn-exit-mobile:active {
    background: rgba(40, 48, 64, 0.9);
    transform: scale(0.95);
}

.reaction-cine-root:fullscreen .btn-exit-mobile,
.reaction-cine-root.reaction-cine-root--pseudo-fullscreen .btn-exit-mobile {
    display: flex;
}

.reaction-cine-root:-webkit-full-screen .btn-exit-mobile {
    display: flex;
}

.reaction-cine-root:-webkit-full-screen .video-merged-container,
.reaction-cine-root:fullscreen .video-merged-container,
.reaction-cine-root.reaction-cine-root--pseudo-fullscreen .video-merged-container {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    max-height: none !important;
    min-height: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.reaction-cine-root:-webkit-full-screen .video-dual-layout,
.reaction-cine-root:fullscreen .video-dual-layout,
.reaction-cine-root.reaction-cine-root--pseudo-fullscreen .video-dual-layout {
    max-height: none !important;
    aspect-ratio: unset !important;
    width: 100% !important;
    height: 100% !important;
    flex: 1 1 auto !important;
    align-items: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
}

.reaction-cine-root:-webkit-full-screen .video-raw-frame,
.reaction-cine-root:fullscreen .video-raw-frame,
.reaction-cine-root.reaction-cine-root--pseudo-fullscreen .video-raw-frame {
    flex: 1 1 auto !important;
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: unset !important;
    border-radius: 0 !important;
    border: none !important;
    margin: 0 !important;
    overflow: hidden !important;
    contain: paint;
}

/* Desktop / tablet landscape: absolute-fill merged stage (phone uses styles-video-mobile.css) */
@media (min-width: 769px) {
    body.app-mode-reaction .video-merged-container {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    body.app-mode-reaction .video-dual-layout {
        display: flex !important;
        flex-direction: column;
        align-items: stretch !important;
        justify-content: stretch !important;
        grid-template-columns: unset;
        grid-template-rows: unset;
        gap: 0;
        width: 100%;
        flex: 1 1 auto;
        min-height: min(66vh, 760px);
        max-height: min(88vh, 1060px);
        margin: 0 auto;
        aspect-ratio: unset !important;
    }

    /* Reaction merged stage: fill width — do not use jump 9:16 / intrinsic-aspect pillar caps */
    body.app-mode-reaction .video-dual-layout.video-dual-layout--merged,
    body.app-mode-reaction #videoDualLayout.video-dual-layout--merged {
        width: 100% !important;
        max-width: 100% !important;
    }

    body.app-mode-reaction .video-dual-layout--merged .video-raw-frame,
    body.app-mode-reaction .video-dual-layout--merged .video-raw-frame.video-stage--intrinsic-aspect,
    body.app-mode-reaction .video-dual-layout--merged .video-raw-frame.video-stage--portrait-stream,
    body.app-mode-reaction #videoDualLayout.video-dual-layout--merged .video-raw-frame,
    body.app-mode-reaction #videoDualLayout.video-stage--portrait-stream.video-dual-layout--merged .video-raw-frame {
        flex: 1 1 auto !important;
        width: 100% !important;
        height: 100% !important;
        min-height: min(48vh, 520px) !important;
        max-width: none !important;
        max-height: none !important;
        aspect-ratio: unset !important;
        margin: 0 !important;
    }

    body.app-mode-reaction .video-raw-frame video,
    body.app-mode-reaction .video-raw-frame canvas {
        inset: 0 !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain !important;
    }

    body.app-mode-reaction .video-merged-frame {
        aspect-ratio: unset !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        align-self: stretch;
    }

    body.app-mode-reaction .video-raw-frame,
    body.app-mode-reaction .video-skeleton-frame {
        position: absolute;
        inset: 0;
        width: 100%;
        max-width: 100%;
        height: 100%;
        margin: 0;
    }

    body.app-mode-reaction .video-dual-layout--merged {
        position: relative;
    }

    body.app-mode-reaction .video-raw-frame {
        z-index: 1;
    }

    body.app-mode-reaction .video-skeleton-frame {
        z-index: 2;
        /* Canvas lives in .video-raw-frame; this shell must not steal drags/clicks. */
        pointer-events: none;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    body.app-mode-reaction .video-skeleton-frame .frame-label {
        display: none;
    }

    body.app-mode-reaction .video-skeleton-frame canvas {
        background: transparent !important;
    }

    /* Overlay canvas on .video-raw-frame (see isVideoStageMobileLayout in app.js) */
    body.app-mode-reaction .video-raw-frame canvas {
        background: transparent !important;
    }
}

/* Zone edit on: canvas captures drag. Off: swipes on video/labels scroll the page (mobile). */
body.app-mode-reaction.reaction-zone-edit-active .video-raw-frame canvas,
body.app-mode-reaction.reaction-zone-edit-active .video-skeleton-frame canvas {
    pointer-events: auto;
    touch-action: none;
    cursor: default;
    z-index: 20;
}

body.app-mode-reaction:not(.reaction-zone-edit-active) .video-raw-frame canvas,
body.app-mode-reaction:not(.reaction-zone-edit-active) .video-skeleton-frame canvas {
    pointer-events: none;
    touch-action: pan-y;
}

body.app-mode-reaction #btnReactionFullscreen.active {
    border-color: rgba(0, 217, 255, 0.9);
    color: var(--primary-cyan);
}

/* Jump-only “camera + skeleton in one frame” control; hidden in Reaction Time (author .video-tool-btn display:flex can override the [hidden] attribute). */
body.app-mode-reaction #btnJumpMergedView {
    display: none !important;
}

body.app-mode-reaction .sidebar-right .sidebar-card {
    flex-shrink: 0;
    min-height: min-content;
    overflow: visible;
}

body.app-mode-reaction #reactionSidebarCard {
    flex: 0 0 auto;
    width: 100%;
    min-height: min(40vh, 440px);
}

body.app-mode-reaction #reactionSidebarCard .sidebar-card-body {
    min-height: min(36vh, 420px);
    padding: 18px 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-x: hidden;
    overflow-y: auto;
}

body.app-mode-reaction #reactionSidebarCard .reaction-checkbox-row {
    align-items: flex-start;
}

body.app-mode-reaction #reactionSidebarCard .reaction-checkbox-row input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 2px;
}

body.app-mode-reaction #reactionSidebarCard .reaction-checkbox-row > span {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.45;
}

body.app-mode-reaction #sidebarJumpReportCard {
    flex: 0 1 auto;
    overflow: visible;
    min-height: 0;
}

body.app-mode-reaction #sidebarJumpReportCard .sidebar-card-body {
    padding: 14px 16px 16px;
    max-height: min(38vh, 340px);
    overflow-y: auto;
    overflow-x: hidden;
}

body.app-mode-reaction .reaction-sidebar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    align-items: center;
}

body.app-mode-reaction .btn-reaction-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 42px;
    padding: 0 14px;
    border-radius: var(--r-md, 10px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(248, 250, 252, 0.92);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

body.app-mode-reaction .btn-reaction-reset:hover {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(0, 217, 255, 0.35);
}

body.app-mode-reaction .btn-reaction-reset.btn-reaction-reset--in-home {
    border-color: rgba(0, 255, 180, 0.65);
    background: linear-gradient(
        135deg,
        rgba(0, 120, 90, 0.55) 0%,
        rgba(0, 200, 140, 0.35) 100%
    );
    color: #e8fff6;
    box-shadow:
        0 0 0 1px rgba(0, 255, 200, 0.25),
        0 0 18px rgba(0, 255, 200, 0.22);
}

body.app-mode-reaction .btn-reaction-reset.btn-reaction-reset--in-home:hover {
    border-color: rgba(0, 255, 210, 0.85);
    background: linear-gradient(
        135deg,
        rgba(0, 140, 105, 0.65) 0%,
        rgba(0, 220, 160, 0.45) 100%
    );
}

.jump-overlay-landmark-row,
.reaction-overlay-tiles-panel .jump-overlay-landmark-row {
    margin: 0 0 12px;
    font-size: 13px;
}

body.app-mode-reaction #btnReactionStop {
    flex: 1 1 auto;
    min-height: 42px;
    margin-top: 0 !important;
}

body.app-mode-reaction .reaction-trials-footer {
    font-size: 12px;
    opacity: 0.72;
    margin-top: 14px;
    margin-bottom: 0;
}

body.app-mode-reaction #sidebarJumpReportCard .sidebar-card-header-tabs {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
    min-height: 0;
    padding: 10px 16px 12px;
    box-sizing: border-box;
}

body.app-mode-reaction #sidebarJumpReportCard .sidebar-tabs {
    border-color: rgba(255, 140, 90, 0.22);
    background: linear-gradient(180deg, rgba(18, 14, 22, 0.96) 0%, rgba(10, 8, 16, 0.98) 100%);
}

body.app-mode-reaction #sidebarJumpReportCard .sidebar-tab:not(.active) {
    background: rgba(255, 255, 255, 0.045);
    color: rgba(226, 232, 240, 0.82);
}

body.app-mode-reaction #sidebarJumpReportCard .sidebar-tab:not(.active):hover {
    background: rgba(255, 140, 90, 0.1);
    color: rgba(255, 250, 245, 0.95);
}

body.app-mode-reaction #sidebarJumpReportCard .stat-grid {
    gap: 8px;
}

body.app-mode-reaction #sidebarJumpReportCard .stat-cell {
    min-width: 0;
    padding: 10px 6px;
}

body.app-mode-reaction #sidebarJumpReportCard .stat-cell-value {
    font-size: 0.82rem;
    text-align: center;
    max-width: 100%;
    word-break: break-word;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 540px) {
    body.app-mode-reaction .video-dual-layout {
        aspect-ratio: unset;
        max-height: none;
        min-height: 0;
        height: auto;
    }

    /* Phone: scroll lives in .app-wrapper (styles-video-mobile.css), not giant bottom pad */
    body.app-mode-reaction .app-wrapper,
    body.app-mode-reaction.reaction-sidebar-collapsed .app-wrapper,
    body.app-mode-reaction:not(.reaction-sidebar-collapsed) .app-wrapper {
        padding-bottom: max(32px, calc(env(safe-area-inset-bottom, 0px) + 20px));
        padding-right: 8px;
    }
}

/* ═══════════════════════════════════════════
   SIDEBAR — Right Panel
   ═══════════════════════════════════════════ */

.sidebar-right {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 24px;
    max-height: calc(150vh);
    overflow-y: auto;
    padding-right: 4px;
    
    /* Custom scrollbar for sidebar */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 217, 255, 0.15) transparent;
}

.sidebar-right::-webkit-scrollbar { width: 4px; }
.sidebar-right::-webkit-scrollbar-track { background: transparent; }
.sidebar-right::-webkit-scrollbar-thumb {
    background: rgba(0, 217, 255, 0.15);
    border-radius: 10px;
}

/* ═══════════════════════════════════════════
   SIDEBAR CARDS
   ═══════════════════════════════════════════ */

.sidebar-card {
    background: rgba(20, 24, 36, 0.7);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-radius: var(--r-lg);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
    transition: all 0.3s var(--ease);
}

.sidebar-card:hover {
    border-color: rgba(0, 217, 255, 0.15);
    box-shadow: 0 0 25px rgba(0, 217, 255, 0.04);
}

/* Main card — highlighted border */
.sidebar-card-main {
    border-color: rgba(0, 217, 255, 0.2);
    background: rgba(20, 24, 36, 0.85);
    box-shadow:
        0 0 30px rgba(0, 217, 255, 0.06),
        inset 0 1px 0 rgba(0, 217, 255, 0.1);
}

.sidebar-card-main:hover {
    border-color: rgba(0, 217, 255, 0.3);
    box-shadow: 0 0 40px rgba(0, 217, 255, 0.08);
}

.sidebar-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
    background: rgba(0, 217, 255, 0.02);
}

/* Tab-only header: no extra tint behind the segmented track; stretch so the track fills the row. */
.sidebar-card-header.sidebar-card-header-tabs {
    align-items: stretch;
    gap: 0;
    padding: 10px 16px 12px;
    background: transparent;
}

.sidebar-card-header h3 {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.sidebar-card-icon {
    font-size: 1rem;
    line-height: 1;
}

.sidebar-card-body {
    padding: 16px;
}

/* Sidebar tabs for Last Jump / Test Report — segmented control */
.sidebar-card-header-tabs {
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
}

.sidebar-card-header-tabs > .sidebar-tabs {
    flex: 1 1 auto;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.sidebar-tabs {
    display: flex;
    align-items: stretch;
    gap: 4px;
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    padding: 4px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(12, 18, 32, 0.98) 0%, rgba(6, 10, 18, 0.98) 100%);
    border: 1px solid rgba(0, 217, 255, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 1px 0 rgba(0, 0, 0, 0.35);
}

.sidebar-tab {
    border: none;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(203, 213, 225, 0.88);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        color 0.2s var(--ease),
        background 0.2s var(--ease),
        box-shadow 0.2s var(--ease);
}

.sidebar-tab:not(.active):hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(248, 250, 252, 0.95);
}

.sidebar-tab-icon {
    font-size: 0.78rem;
    flex-shrink: 0;
    line-height: 1;
}

.sidebar-tab.active {
    background: linear-gradient(135deg, var(--primary-cyan), var(--electric-blue));
    color: #020617;
    border-radius: 8px;
    box-shadow:
        0 2px 14px rgba(0, 217, 255, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.sidebar-tab-panel {
    display: none;
}

.sidebar-tab-panel.active {
    display: block;
}

/* Redesigned jump counter layout */
.jump-counter-layout {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.jump-counter-left {
    flex: 0 0 42%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: var(--r-md);
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.jump-counter-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jump-timer-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.jump-timer-value {
    font-family: var(--mono);
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--primary-cyan);
}

.jump-status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(15, 23, 42, 0.9);
    color: var(--text-secondary);
    border: 1px solid rgba(148, 163, 184, 0.4);
}

/* Keep existing status label styles but adapt to chip */
#testStatusLabel {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

/* Test report styles */
.test-report-summary {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.test-report-details {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: 10px;
    margin-top: 4px;
    max-height: 150px;
    overflow-y: auto;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.test-report-details ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.test-report-details li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.04);
}

.test-report-details li:last-child {
    border-bottom: none;
}

.test-report-jump-label {
    font-weight: 600;
    color: var(--text-secondary);
}

.test-report-jump-metrics {
    font-family: var(--mono);
    color: var(--primary-cyan);
}

/* ═══════════════════════════════════════════
   BIG JUMP COUNTER
   ═══════════════════════════════════════════ */

.jump-big-counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 0;
}

.jump-big-number {
    font-family: var(--mono);
    font-size: 4rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, var(--primary-cyan), var(--electric-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 0 20px rgba(0, 217, 255, 0.3));
    transition: transform 0.2s var(--ease);
}

.jump-big-number.bump {
    animation: counter-bump 0.4s var(--ease);
}

@keyframes counter-bump {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.25); }
    60%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.jump-big-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* ═══════════════════════════════════════════
   STATUS INDICATOR
   ═══════════════════════════════════════════ */

.jump-status-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--r-md);
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-subtle);
    transition: all 0.3s var(--ease);
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
    transition: all 0.3s var(--ease);
}

.status-text {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Status States */
.jump-status-indicator.status-ready .status-dot {
    background: var(--success);
    box-shadow: 0 0 8px var(--success);
}
.jump-status-indicator.status-ready .status-text {
    color: var(--success);
}

.jump-status-indicator.status-calibrating .status-dot {
    background: var(--warning);
    box-shadow: 0 0 8px var(--warning);
    animation: dot-pulse 1.5s ease-in-out infinite;
}
.jump-status-indicator.status-calibrating .status-text {
    color: var(--warning);
}

.jump-status-indicator.status-jumping .status-dot {
    background: var(--primary-cyan);
    box-shadow: 0 0 12px var(--primary-cyan);
    animation: dot-pulse 0.5s ease-in-out infinite;
}
.jump-status-indicator.status-jumping .status-text {
    color: var(--primary-cyan);
}

/* ═══════════════════════════════════════════
   STAT GRID — 2x2
   ═══════════════════════════════════════════ */

.stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.stat-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--r-md);
    border: 1px solid var(--border-subtle);
    transition: all 0.3s var(--ease);
}

.stat-cell:hover {
    border-color: rgba(0, 217, 255, 0.15);
    background: rgba(0, 0, 0, 0.3);
}

.stat-cell-icon {
    font-size: 1.1rem;
    line-height: 1;
}

.stat-cell-value {
    font-family: var(--mono);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary-cyan);
}

.stat-cell-label {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ═══════════════════════════════════════════
   JUMP HISTORY BARS — Mini Bar Chart
   ═══════════════════════════════════════════ */

.jump-history-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 80px;
    padding: 8px 0;
}

.history-empty {
    width: 100%;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    padding-top: 28px;
}

.history-bar {
    flex: 1;
    min-width: 6px;
    max-width: 16px;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, var(--primary-cyan), var(--electric-blue));
    opacity: 0.7;
    transition: all 0.3s var(--ease);
    position: relative;
}

.history-bar:hover {
    opacity: 1;
    transform: scaleY(1.05);
    transform-origin: bottom;
}

.history-bar::after {
    content: attr(data-metrics);
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.6rem;
    font-family: var(--mono);
    color: var(--text-muted);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s;
}

.history-bar:hover::after {
    opacity: 1;
}

/* Latest bar — highlighted */
.history-bar.latest {
    opacity: 1;
    background: linear-gradient(180deg, var(--primary-cyan), #00ffcc);
    box-shadow: 0 0 10px rgba(0, 217, 255, 0.3);
}

/* ═══════════════════════════════════════════
   SIDEBAR CONTROLS
   ═══════════════════════════════════════════ */

.control-group {
    margin-bottom: 14px;
}

.control-group:last-of-type {
    margin-bottom: 16px;
}

.control-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.control-value {
    font-family: var(--mono);
    font-size: 0.75rem;
    color: var(--primary-cyan);
    background: rgba(0, 217, 255, 0.08);
    padding: 2px 8px;
    border-radius: 4px;
}

/* Custom Range Slider */
.slider-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    transition: background 0.3s;
}

.slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary-cyan);
    border: 2px solid var(--dark-bg);
    box-shadow: 0 0 10px rgba(0, 217, 255, 0.4);
    cursor: pointer;
    transition: all 0.2s var(--ease);
}

.slider-input::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 0 16px rgba(0, 217, 255, 0.6);
}

.slider-input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary-cyan);
    border: 2px solid var(--dark-bg);
    box-shadow: 0 0 10px rgba(0, 217, 255, 0.4);
    cursor: pointer;
}

/* Toggle Switch */
.toggle-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.toggle-label input[type="checkbox"] {
    display: none;
}

.toggle-switch {
    width: 38px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    position: relative;
    transition: all 0.3s var(--ease);
    flex-shrink: 0;
}

.toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: all 0.3s var(--ease);
}

.toggle-label input:checked + .toggle-switch {
    background: rgba(0, 217, 255, 0.25);
    border: 1px solid rgba(0, 217, 255, 0.4);
}

.toggle-label input:checked + .toggle-switch::after {
    left: 20px;
    background: var(--primary-cyan);
    box-shadow: 0 0 8px rgba(0, 217, 255, 0.4);
}

/* Reset Button */
.btn-reset {
    width: 100%;
    padding: 10px 16px;
    background: rgba(255, 82, 82, 0.08);
    border: 1px solid rgba(255, 82, 82, 0.2);
    border-radius: var(--r-md);
    color: var(--error);
    font-family: var(--font);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s var(--ease);
}

.btn-reset:hover {
    background: rgba(255, 82, 82, 0.15);
    border-color: rgba(255, 82, 82, 0.4);
    box-shadow: 0 0 15px rgba(255, 82, 82, 0.1);
    transform: translateY(-1px);
}

.btn-reset:active {
    transform: scale(0.97);
}

/* ═══════════════════════════════════════════
   RESPONSIVE — Sidebar Collapses on Mobile
   ═══════════════════════════════════════════ */

@media (max-width: 1024px) {
    .main-content-layout {
        grid-template-columns: 1fr;
        grid-template-areas:
            "main"
            "sidebar";
    }

    .sidebar-right {
        position: static;
        max-height: none;
        overflow-y: visible;
        
        /* On tablet/mobile: horizontal scroll cards */
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 12px;
    }
}

@media (max-width: 640px) {
    .sidebar-right {
        grid-template-columns: 1fr;
    }

    .jump-big-number {
        font-size: 3rem;
    }

    .stat-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
}

/* ═══════════════════════════════════════════
   RESPONSIVE — Large Screens wider sidebar
   ═══════════════════════════════════════════ */

@media (min-width: 1400px) {
    .main-content-layout {
        grid-template-columns: 1fr 340px;
    }
}

@media (min-width: 1800px) {
    .main-content-layout {
        grid-template-columns: 1fr 380px;
    }
}

/* ═══════════════════════════════════════════
   Apple touch (iPhone / iPad Safari): lighter compositing while camera runs
   ═══════════════════════════════════════════ */

body.platform-apple-touch .bg-orbs {
    display: none;
}

body.platform-apple-touch .app-header,
body.platform-apple-touch .section-video,
body.platform-apple-touch .section-log,
body.platform-apple-touch .sidebar-right,
body.platform-apple-touch .test-select-backdrop,
body.platform-apple-touch .test-select-panel,
body.platform-apple-touch .notice-bar {
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Jump / side jump test fullscreen (.reaction-cine-root--jump-fs-fill)
   Reaction fullscreen layout is unchanged.
   ═══════════════════════════════════════════════════════════════════════════ */

body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill,
body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--pseudo-fullscreen ,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--pseudo-fullscreen {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    height: 100svh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    min-height: 100svh !important;
    min-height: -webkit-fill-available;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
    border-radius: 0 !important;
}

body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-merged-container,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-merged-container,
body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-merged-container:has(.video-dual-layout--merged) ,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-merged-container:has(.video-dual-layout--merged) {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: stretch !important;
    align-items: stretch !important;
}

body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-dual-layout,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-dual-layout,
body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill #videoDualLayout,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill #videoDualLayout,
body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-dual-layout.video-dual-layout--merged,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-dual-layout.video-dual-layout--merged,
body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill #videoDualLayout.video-dual-layout--merged,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill #videoDualLayout.video-dual-layout--merged,
body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill #videoDualLayout.video-stage--portrait-stream,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill #videoDualLayout.video-stage--portrait-stream,
body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill #videoDualLayout.video-stage--intrinsic-aspect,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill #videoDualLayout.video-stage--intrinsic-aspect,
body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill #videoDualLayout.video-stage--quarter-turn ,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill #videoDualLayout.video-stage--quarter-turn {
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: unset !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}

body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-raw-frame,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-raw-frame,
body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-dual-layout--merged .video-raw-frame,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-dual-layout--merged .video-raw-frame,
body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-raw-frame.video-stage--portrait-stream,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-raw-frame.video-stage--portrait-stream,
body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-raw-frame.video-stage--intrinsic-aspect,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-raw-frame.video-stage--intrinsic-aspect,
body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-raw-frame.video-stage--intrinsic-aspect[data-stream-sideways="1"],
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-raw-frame.video-stage--intrinsic-aspect[data-stream-sideways="1"],
body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-merged-frame.video-stage--portrait-stream,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-merged-frame.video-stage--portrait-stream,
body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-merged-frame.video-stage--intrinsic-aspect ,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-merged-frame.video-stage--intrinsic-aspect {
    flex: 1 1 auto !important;
    align-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: unset !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: none !important;
    border-radius: 0 !important;
}

body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-raw-frame video,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-raw-frame video,
body.app-mode-reaction .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-raw-frame video,
body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-raw-frame canvas,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-raw-frame canvas,
body.app-mode-reaction .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-raw-frame canvas,
body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-skeleton-frame canvas ,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-skeleton-frame canvas,
body.app-mode-reaction .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-skeleton-frame canvas {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    inset: auto !important;
    margin: 0 !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
}

/* Jump fullscreen landscape stream 0°: fill width */
body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill:not(.reaction-cine-root--jump-fs-quarter):not(.reaction-cine-root--jump-fs-tall-stream) .video-raw-frame video,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill:not(.reaction-cine-root--jump-fs-quarter):not(.reaction-cine-root--jump-fs-tall-stream) .video-raw-frame video,
body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill:not(.reaction-cine-root--jump-fs-quarter):not(.reaction-cine-root--jump-fs-tall-stream) .video-raw-frame canvas ,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill:not(.reaction-cine-root--jump-fs-quarter):not(.reaction-cine-root--jump-fs-tall-stream) .video-raw-frame canvas {
    object-fit: cover !important;
}

/* Native portrait / tall stream (720×1280 or 1280×720 upright): full frame, no top/bottom crop */
body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--jump-fs-tall-stream:not(.reaction-cine-root--jump-fs-quarter) .video-raw-frame video,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--jump-fs-tall-stream:not(.reaction-cine-root--jump-fs-quarter) .video-raw-frame video,
body.app-mode-reaction .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--jump-fs-tall-stream:not(.reaction-cine-root--jump-fs-quarter) .video-raw-frame video,
body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--jump-fs-tall-stream:not(.reaction-cine-root--jump-fs-quarter) .video-raw-frame canvas ,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--jump-fs-tall-stream:not(.reaction-cine-root--jump-fs-quarter) .video-raw-frame canvas,
body.app-mode-reaction .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--jump-fs-tall-stream:not(.reaction-cine-root--jump-fs-quarter) .video-raw-frame canvas {
    object-fit: contain !important;
}

body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--jump-fs-quarter .video-raw-frame video,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--jump-fs-quarter .video-raw-frame video,
body.app-mode-reaction .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--jump-fs-quarter .video-raw-frame video,
body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--jump-fs-quarter .video-raw-frame canvas,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--jump-fs-quarter .video-raw-frame canvas,
body.app-mode-reaction .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--jump-fs-quarter .video-raw-frame canvas,
body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--jump-fs-quarter .video-skeleton-frame canvas,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--jump-fs-quarter .video-skeleton-frame canvas,
body.app-mode-reaction .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--jump-fs-quarter .video-skeleton-frame canvas,
body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill #videoDualLayout.video-stage--quarter-turn .video-raw-frame video,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill #videoDualLayout.video-stage--quarter-turn .video-raw-frame video,
body.app-mode-reaction .reaction-cine-root.reaction-cine-root--jump-fs-fill #videoDualLayout.video-stage--quarter-turn .video-raw-frame video,
body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill #videoDualLayout.video-stage--quarter-turn .video-raw-frame canvas,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill #videoDualLayout.video-stage--quarter-turn .video-raw-frame canvas,
body.app-mode-reaction .reaction-cine-root.reaction-cine-root--jump-fs-fill #videoDualLayout.video-stage--quarter-turn .video-raw-frame canvas,
body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill #videoDualLayout.video-stage--quarter-turn .video-skeleton-frame canvas ,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill #videoDualLayout.video-stage--quarter-turn .video-skeleton-frame canvas,
body.app-mode-reaction .reaction-cine-root.reaction-cine-root--jump-fs-fill #videoDualLayout.video-stage--quarter-turn .video-skeleton-frame canvas {
    object-fit: contain !important;
}

/* Reaction pseudo-FS: always contain (jump landscape row above uses cover). */
body.app-mode-reaction .reaction-cine-root.reaction-cine-root--jump-fs-fill:not(.reaction-cine-root--jump-fs-quarter):not(.reaction-cine-root--jump-fs-tall-stream) .video-raw-frame video,
body.app-mode-reaction .reaction-cine-root.reaction-cine-root--jump-fs-fill:not(.reaction-cine-root--jump-fs-quarter):not(.reaction-cine-root--jump-fs-tall-stream) .video-raw-frame canvas {
    object-fit: contain !important;
}

/*
 * Jump fullscreen split (CAMERA | ANALYSIS): fill viewport — override desktop 82vh caps.
 */
body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--jump-fs-split #videoDualLayout:not(.video-dual-layout--merged),
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--jump-fs-split #videoDualLayout:not(.video-dual-layout--merged),
body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--jump-fs-split .video-dual-layout:not(.video-dual-layout--merged) ,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--jump-fs-split .video-dual-layout:not(.video-dual-layout--merged) {
    flex-direction: row !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    gap: 0 !important;
}

body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--jump-fs-split #videoDualLayout:not(.video-dual-layout--merged) .video-merged-frame,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--jump-fs-split #videoDualLayout:not(.video-dual-layout--merged) .video-merged-frame,
body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--jump-fs-split #videoDualLayout:not(.video-dual-layout--merged) .video-raw-frame,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--jump-fs-split #videoDualLayout:not(.video-dual-layout--merged) .video-raw-frame,
body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--jump-fs-split #videoDualLayout:not(.video-dual-layout--merged) .video-skeleton-frame ,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--jump-fs-split #videoDualLayout:not(.video-dual-layout--merged) .video-skeleton-frame {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    aspect-ratio: unset !important;
    align-self: stretch !important;
    border-radius: 0 !important;
}

body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--jump-fs-split #videoDualLayout.video-dual-layout--synced-panels:not(.video-dual-layout--merged) .video-merged-frame,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--jump-fs-split #videoDualLayout.video-dual-layout--synced-panels:not(.video-dual-layout--merged) .video-merged-frame,
body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--jump-fs-split #videoDualLayout.video-stage--quarter-turn:not(.video-dual-layout--merged) .video-merged-frame,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--jump-fs-split #videoDualLayout.video-stage--quarter-turn:not(.video-dual-layout--merged) .video-merged-frame,
body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--jump-fs-split #videoDualLayout.video-stage--quarter-turn:not(.video-dual-layout--merged) .video-skeleton-frame ,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--jump-fs-split #videoDualLayout.video-stage--quarter-turn:not(.video-dual-layout--merged) .video-skeleton-frame {
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    min-height: 0 !important;
    height: 100% !important;
}

/* Beat generic reaction-cine-root:fullscreen cover on analysis canvas */
body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--jump-fs-split .video-skeleton-frame canvas ,
body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill.reaction-cine-root--jump-fs-split .video-skeleton-frame canvas {
    width: auto !important;
    height: auto !important;
    inset: auto !important;
    object-fit: contain !important;
}

@media (orientation: portrait) {
    body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-raw-frame video,
    body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-raw-frame video,
    body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-raw-frame canvas,
    body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-raw-frame canvas,
    body.app-mode-jump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-skeleton-frame canvas ,
    body.app-mode-sidejump .reaction-cine-root.reaction-cine-root--jump-fs-fill .video-skeleton-frame canvas {
        object-fit: contain !important;
    }
}