/* =============================================================
   SwingLab — broadcast-sports aesthetic
   ============================================================= */

:root {
    --bg-0: #07090f;
    --bg-1: #0d1119;
    --bg-2: #141926;
    --bg-3: #1c2233;
    --line: #232b3e;
    --line-soft: rgba(255, 255, 255, 0.06);
    --text: #e8ecf5;
    --text-dim: #98a2b8;
    --text-mute: #5b6373;

    --red: #e11d2e;
    --red-bright: #ff3344;
    --amber: #f59e0b;
    --cyan: #22d3ee;
    --green: #22c55e;

    --skel-line: #22d3ee;
    --skel-joint: #f59e0b;
    --skel-glow: rgba(34, 211, 238, 0.6);

    --r-sm: 4px;
    --r: 8px;
    --r-lg: 14px;

    --display: "Bebas Neue", "Oswald", system-ui, sans-serif;
    --body: "DM Sans", system-ui, -apple-system, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
    background: var(--bg-0);
    color: var(--text);
    font-family: var(--body);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--red-bright); }

button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; color: inherit; }

input, select, textarea {
    font-family: inherit;
    font-size: 15px;
    color: var(--text);
}

/* =============================================================
   Brand
   ============================================================= */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
}
.brand-mark {
    width: 22px;
    height: 22px;
    background:
        radial-gradient(circle at 30% 30%, #fff 0%, #fff 18%, var(--red) 19%, var(--red) 100%);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--bg-0), 0 0 0 3px var(--red);
    position: relative;
}
.brand-mark::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.5) transparent rgba(255, 255, 255, 0.5) transparent;
}
.brand-name {
    font-family: var(--display);
    font-size: 22px;
    letter-spacing: 0.08em;
    font-weight: 400;
}

/* =============================================================
   Buttons
   ============================================================= */
.primary-btn,
.ghost-btn,
.danger-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: var(--r);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    transition: transform 0.06s, background 0.15s, border-color 0.15s;
    user-select: none;
    white-space: nowrap;
}

.primary-btn {
    background: linear-gradient(180deg, var(--red-bright), var(--red));
    color: white;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 6px 16px -8px var(--red);
}
.primary-btn:hover { color: white; filter: brightness(1.1); }
.primary-btn:active { transform: translateY(1px); }
.primary-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.ghost-btn {
    background: var(--bg-2);
    color: var(--text);
    border: 1px solid var(--line);
}
.ghost-btn:hover { background: var(--bg-3); border-color: #344056; color: var(--text); }
.ghost-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.danger-btn {
    background: transparent;
    color: var(--red-bright);
    border: 1px solid var(--red);
}
.danger-btn:hover { background: rgba(225, 29, 46, 0.1); color: var(--red-bright); }

.lg { padding: 14px 26px; font-size: 15px; }
.full { width: 100%; }

/* =============================================================
   Marketing / hero
   ============================================================= */
.marketing { background:
    radial-gradient(1200px 600px at 80% -200px, rgba(225, 29, 46, 0.18), transparent 60%),
    radial-gradient(900px 500px at 0% 30%, rgba(34, 211, 238, 0.08), transparent 60%),
    var(--bg-0);
    min-height: 100vh;
}

.hero {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 32px 80px;
}
.marketing-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    margin-bottom: 80px;
}
.nav-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}
.nav-actions a:not(.primary-btn) { color: var(--text-dim); }
.nav-actions a:not(.primary-btn):hover { color: var(--text); }

.hero-content { max-width: 980px; }

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
    border-radius: 100px;
    color: var(--text-dim);
    font-size: 13px;
    margin-bottom: 32px;
}
.hero-tag .dot {
    width: 6px; height: 6px;
    background: var(--green);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
    animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
    50%      { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

.hero-title {
    font-family: var(--display);
    font-size: clamp(56px, 10vw, 128px);
    line-height: 0.92;
    letter-spacing: 0.005em;
    font-weight: 400;
    margin-bottom: 28px;
}
.hero-title .accent {
    color: var(--red);
    background: linear-gradient(180deg, var(--red-bright), var(--red));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-sub {
    font-size: clamp(16px, 1.6vw, 19px);
    color: var(--text-dim);
    max-width: 600px;
    margin-bottom: 40px;
    line-height: 1.6;
}

.hero-cta {
    display: flex;
    gap: 14px;
    margin-bottom: 80px;
    flex-wrap: wrap;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.feature {
    background: var(--bg-1);
    padding: 28px 24px 32px;
}
.feature-num {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--red);
    margin-bottom: 16px;
    letter-spacing: 0.15em;
}
.feature h3 {
    font-family: var(--display);
    font-size: 22px;
    letter-spacing: 0.04em;
    margin-bottom: 8px;
    font-weight: 400;
}
.feature p { color: var(--text-dim); font-size: 14px; }

/* =============================================================
   Auth pages
   ============================================================= */
.auth-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px;
    background:
        radial-gradient(800px 400px at 50% -100px, rgba(225, 29, 46, 0.15), transparent 60%),
        var(--bg-0);
}
.auth-shell > .brand { margin-bottom: 40px; }
.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 40px;
}
.auth-card h1 {
    font-family: var(--display);
    font-size: 38px;
    letter-spacing: 0.03em;
    font-weight: 400;
    margin-bottom: 6px;
}
.auth-sub { color: var(--text-dim); margin-bottom: 28px; }
.auth-card label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-dim);
    margin: 16px 0 6px;
    font-weight: 600;
}
.auth-card input {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    color: var(--text);
    transition: border-color 0.15s;
}
.auth-card input:focus { outline: none; border-color: var(--red); }
.auth-card button { margin-top: 24px; }
.auth-foot {
    margin-top: 24px;
    color: var(--text-dim);
    font-size: 14px;
    text-align: center;
}
.auth-foot a { color: var(--red-bright); }

.alert {
    padding: 12px 14px;
    border-radius: var(--r);
    font-size: 14px;
    margin-bottom: 12px;
}
.alert.error { background: rgba(225, 29, 46, 0.12); color: #ffb3bb; border: 1px solid rgba(225, 29, 46, 0.4); }

/* =============================================================
   App shell
   ============================================================= */
.app {
    min-height: 100vh;
    background: var(--bg-0);
    display: flex;
    flex-direction: column;
}
.topbar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 24px;
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
    border-bottom: 1px solid var(--line);
    background: var(--bg-1);
    height: 60px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 30;
}
.topbar-menu {
    display: contents;
}
.nav-toggle {
    display: none;
    background: none;
    border: 0;
    padding: 8px;
    margin-left: auto;
    cursor: pointer;
    width: 40px;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
    transform-origin: center;
}
.topbar.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.topbar.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.topbar.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.topbar-links {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 16px;
}
.topbar-links a {
    padding: 8px 14px;
    border-radius: var(--r);
    color: var(--text-dim);
    font-size: 14px;
    font-weight: 500;
    transition: background 0.12s, color 0.12s;
}
.topbar-links a:hover { color: var(--text); background: var(--bg-2); }
.topbar-links a.active {
    color: var(--text);
    background: var(--bg-2);
    box-shadow: inset 0 -2px 0 var(--red);
}
.topbar-user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}
.user-name {
    font-size: 13px;
    color: var(--text-dim);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: var(--r);
    transition: color 0.12s, background 0.12s;
}
a.user-name:hover { color: var(--text); background: var(--bg-2); }
a.user-name.active { color: var(--text); background: var(--bg-2); }

/* =============================================================
   Page (dashboard, athletes)
   ============================================================= */
.page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 24px;
    width: 100%;
    flex: 1;
}
.page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 36px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
}
.kicker {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--red);
    margin-bottom: 6px;
}
.page-head h1, .page h1 {
    font-family: var(--display);
    font-size: 56px;
    letter-spacing: 0.02em;
    font-weight: 400;
    line-height: 1;
}
.page-actions { display: flex; gap: 10px; }

.empty {
    text-align: center;
    padding: 120px 24px;
    border: 1px dashed var(--line);
    border-radius: var(--r-lg);
    background: var(--bg-1);
}
.empty-mark {
    width: 56px; height: 56px;
    margin: 0 auto 24px;
    background:
        radial-gradient(circle at 30% 30%, #fff, #fff 18%, var(--red) 19%, var(--red) 100%);
    border-radius: 50%;
    opacity: 0.4;
}
.empty h2 {
    font-family: var(--display);
    font-size: 36px;
    letter-spacing: 0.02em;
    font-weight: 400;
    margin-bottom: 8px;
}
.empty p { color: var(--text-dim); margin-bottom: 24px; }
.empty-actions { display: flex; gap: 12px; justify-content: center; }

/* Session grid */
.session-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.session-card {
    display: block;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform 0.15s, border-color 0.15s;
    color: var(--text);
}
.session-card:hover {
    transform: translateY(-2px);
    border-color: #344056;
    color: var(--text);
}
.session-thumb {
    aspect-ratio: 16 / 10;
    background:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 8px, transparent 8px 16px),
        linear-gradient(135deg, #1a2238 0%, #0e1320 100%);
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 12px 14px;
    overflow: hidden;
}
.session-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(34, 211, 238, 0.12), transparent 60%);
}
/* When a real thumbnail image is present, hide the placeholder background +
   glow so the photo shows through cleanly, and add a bottom gradient so the
   type/duration chips stay readable over bright frames. */
.session-thumb.has-image {
    background: var(--bg-2);
}
.session-thumb.has-image::before {
    background: linear-gradient(to top, rgba(7, 9, 15, 0.7) 0%, rgba(7, 9, 15, 0) 50%);
}
.session-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.session-type {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.15em;
    color: var(--text);
    background: var(--red);
    padding: 4px 8px;
    border-radius: var(--r-sm);
    z-index: 1;
}
.session-dur {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text);
    /* Dark backdrop chip — mirrors .session-type's chip pattern so the
       duration stays legible on bright thumbnails (light walls, white
       uniforms, sky) where var(--text-dim) on its own would disappear. */
    background: rgba(7, 9, 15, 0.65);
    padding: 4px 8px;
    border-radius: var(--r-sm);
    backdrop-filter: blur(4px);
    z-index: 1;
}
.session-body { padding: 16px; }
.session-body h3 {
    font-family: var(--display);
    font-size: 22px;
    letter-spacing: 0.03em;
    font-weight: 400;
    margin-bottom: 4px;
}
.session-meta { color: var(--text-dim); font-size: 13px; margin-bottom: 12px; }
.session-metrics { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    font-family: var(--mono);
    font-size: 11px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    padding: 3px 8px;
    border-radius: var(--r-sm);
    color: var(--text-dim);
}

/* Athletes */
/* Pagination — appears below library and athletes grids */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 32px;
    padding: 16px 0;
}
.page-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    color: var(--text);
    font-size: 14px;
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.page-btn:hover {
    background: var(--bg-3);
    border-color: #344056;
}
.page-btn.disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}
.page-info {
    font-size: 14px;
    color: var(--text-dim);
    text-align: center;
    min-width: 140px;
}
.page-info .muted.small { display: block; margin-top: 2px; }

.athlete-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.athlete-card {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 24px;
}
.athlete-mono {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--red), #6b1018);
    display: grid;
    place-items: center;
    font-family: var(--display);
    font-size: 20px;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
    color: white;
}
.athlete-card h3 {
    font-family: var(--display);
    font-size: 22px;
    letter-spacing: 0.04em;
    font-weight: 400;
    margin-bottom: 4px;
}
.athlete-meta { font-size: 13px; color: var(--text-dim); margin-bottom: 8px; }
.athlete-count {
    display: inline-block;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--amber);
    margin: 0 0 12px;
    text-decoration: none;
    transition: color 0.12s, transform 0.12s;
}
a.athlete-count:hover {
    color: var(--text);
    transform: translateX(2px);
}

/* Filter pill on the dashboard, shown when sessions are scoped to a single
   athlete. Acts as a link back to the unfiltered library. */
.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 6px 10px 6px 14px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 13px;
    color: var(--text-dim);
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.filter-pill:hover {
    background: var(--bg-3);
    border-color: #344056;
    color: var(--text);
}
.filter-pill-x {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg-3);
    color: var(--text-dim);
    font-size: 14px;
    line-height: 1;
}
.filter-pill:hover .filter-pill-x {
    background: var(--red);
    color: white;
}
.athlete-notes { font-size: 13px; color: var(--text-dim); line-height: 1.5; }
.athlete-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}
.athlete-actions .ghost-btn {
    flex: 1;
}

/* Small ghost button — used in card action rows. */
.ghost-btn.small {
    padding: 6px 12px;
    font-size: 12px;
    min-height: 0;
}
.ghost-btn.danger {
    color: var(--red);
    border-color: rgba(225, 29, 46, 0.35);
}
.ghost-btn.danger:hover {
    background: rgba(225, 29, 46, 0.08);
    border-color: var(--red);
}

/* =============================================================
   Studio (live + analyze)
   ============================================================= */
.studio {
    flex: 1;
    display: grid;
    grid-template-columns: 320px 1fr;
    grid-template-areas: "side stage";
    overflow: hidden;
    min-height: 0;
}
.studio-side {
    grid-area: side;
    background: var(--bg-1);
    border-right: 1px solid var(--line);
    overflow-y: auto;
    height: calc(100vh - 60px);
}
.side-section {
    padding: 20px 24px;
    border-bottom: 1px solid var(--line);
}
.side-section h2 {
    font-family: var(--display);
    font-size: 28px;
    letter-spacing: 0.03em;
    font-weight: 400;
    margin-bottom: 6px;
}
.muted { color: var(--text-dim); font-size: 13px; }
.muted.small { font-size: 12px; }
.error-text {
    color: var(--red);
    font-size: 12px;
    line-height: 1.5;
    margin-top: 8px;
}
.error-text:empty { display: none; }

.ctl-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-dim);
    font-weight: 600;
    margin: 14px 0 6px;
}
.toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    color: var(--text);
}
.toggle-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--brand);
    cursor: pointer;
}
.ctl {
    width: 100%;
    padding: 9px 12px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    color: var(--text);
    transition: border-color 0.15s;
    font-size: 14px;
}
.ctl:focus { outline: none; border-color: var(--red); }
textarea.ctl { resize: vertical; min-height: 60px; font-family: inherit; }
/* Vertical spacing between sidebar action buttons (Save / Regenerate / Delete).
   Scoped to DIRECT children with `>` so it doesn't bleed into the .tool-grid
   buttons nested inside, which would otherwise have margin-top added to every
   button after the first — causing the first tool button to look like it
   doesn't have the same vertical alignment as the others. */
.side-section > button + button { margin-top: 8px; }

.live-metrics .metric-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 13px;
    color: var(--text-dim);
}
.live-metrics .metric-row:last-child { border: none; }
.live-metrics .metric-row span:last-child { color: var(--text); font-weight: 500; }

.metric-list { display: flex; flex-direction: column; gap: 4px; }
.metric-list .metric-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bg-2);
    border-radius: var(--r-sm);
    font-size: 13px;
}
.metric-list .metric-row span:last-child { font-family: var(--mono); color: var(--amber); }

.tool-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}
.tool-btn {
    padding: 10px 8px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    font-size: 13px;
    text-align: center;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.tool-btn:hover { background: var(--bg-3); border-color: #344056; }
.tool-btn.active {
    background: var(--red);
    border-color: var(--red);
    color: white;
}

.progress {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.progress-bar {
    flex: 1;
    height: 6px;
    background: var(--bg-2);
    border-radius: 3px;
    overflow: hidden;
}
.progress-bar > div {
    height: 100%;
    background: linear-gradient(90deg, var(--red), var(--amber));
    width: 0;
    transition: width 0.2s;
}

/* Upload progress — used during video uploads in both the live save panel
   and the analyze save section. Shows percent + bytes + ETA so the user has
   real signal that something is happening. */
.upload-progress {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.upload-progress-bar {
    height: 8px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
}
.upload-progress-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--red), var(--amber));
    width: 0%;
    transition: width 0.15s linear;
}
.upload-progress-bar.indeterminate > span {
    width: 30%;
    animation: upload-indet 1.2s ease-in-out infinite;
}
@keyframes upload-indet {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(333%); }
}
.upload-progress-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-dim);
}
.upload-progress-meta span:first-child { color: var(--text); }
#saveProgressDetail,
#analyzeUploadProgressDetail {
    margin: 0;
    min-height: 16px;
}

/* Stage */
.studio-stage {
    grid-area: stage;
    display: flex;
    flex-direction: column;
    background: var(--bg-0);
    height: calc(100vh - 60px);
    overflow: hidden;
}
.stage-frame {
    flex: 1;
    position: relative;
    background:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 80px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 80px),
        var(--bg-0);
    overflow: hidden;
    min-height: 0;
}
.stage-frame video,
.stage-frame canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.stage-frame video { z-index: 1; }
#liveCanvas, #analyzeCanvas { z-index: 2; pointer-events: none; }
#annotateCanvas { z-index: 3; touch-action: none; }

.stage-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: grid;
    place-items: center;
    background: rgba(7, 9, 15, 0.7);
    backdrop-filter: blur(8px);
}
.stage-overlay[hidden] { display: none; }
.overlay-card {
    text-align: center;
    padding: 32px;
    max-width: 420px;
}
.overlay-card h2 {
    font-family: var(--display);
    font-size: 32px;
    letter-spacing: 0.03em;
    font-weight: 400;
    margin-bottom: 8px;
}
.overlay-card p { color: var(--text-dim); }

/* Save overlay — full-viewport scrim that centers a bounded card. The card
   itself is height-capped to the viewport so its footer (action buttons) is
   always visible. Inner body scrolls if the form is taller than what fits.

   We use a bounded-modal pattern instead of sticky-bottom because:
     1. position:sticky inside an overflow:auto flex column is unreliable on
        iOS Safari and some narrow-viewport rendering modes.
     2. Bounding the card guarantees the footer is always reachable without
        depending on scroll-overflow behavior at all. */
#saveOverlay {
    position: fixed;
    inset: 0;
    /* Use the dynamic viewport on supporting browsers so the modal isn't
       hidden behind the iOS URL bar; fall back to plain vh otherwise. */
    height: 100vh;
}
@supports (height: 100dvh) {
    #saveOverlay { height: 100dvh; }
}
#saveOverlay {
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(7, 9, 15, 0.7);
    backdrop-filter: blur(8px);
    padding: 16px;
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.save-card {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    width: 100%;
    max-width: 460px;
    /* Cap the card to the available height so the footer is always visible.
       The padding values match #saveOverlay's so the card never overflows. */
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-align: left;
    padding: 0;
}

.save-card-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 28px 28px 12px;
    min-height: 0; /* required for flex children to actually scroll */
}
.save-card h2 {
    text-align: center;
    margin-bottom: 4px;
    font-family: var(--display);
    font-size: 26px;
    letter-spacing: 0.03em;
    font-weight: 400;
}
.save-card .muted.small {
    text-align: center;
    margin-bottom: 16px;
    color: var(--text-dim);
}
.save-card .ctl {
    margin-bottom: 12px;
}
.save-card .ctl-label {
    margin-top: 4px;
    display: block;
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 4px;
}
.save-actions {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 16px 28px;
    border-top: 1px solid var(--line);
    background: var(--bg-1);
}
.save-actions .primary-btn,
.save-actions .ghost-btn {
    width: 100%;
}
#saveStatus {
    text-align: center;
    margin-top: 12px;
    color: var(--text-dim);
}
/* Lock the body scroll while the save panel is open so the underlying page
   doesn't scroll alongside the overlay (and so iOS doesn't get confused
   about which scroll container should respond to touch). */
body.save-open {
    overflow: hidden;
    touch-action: none;
}

/* ---------------------------------------------------------------------------
   Share modal — uses the same bounded-modal pattern as #saveOverlay
   --------------------------------------------------------------------------- */
#shareModal {
    position: fixed;
    inset: 0;
    height: 100vh;
}
@supports (height: 100dvh) {
    #shareModal { height: 100dvh; }
}
#shareModal {
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(7, 9, 15, 0.7);
    backdrop-filter: blur(8px);
    padding: 16px;
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.share-card {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    width: 100%;
    max-width: 480px;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.share-card-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 28px 28px 12px;
    min-height: 0;
}
.share-card .save-actions {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px 28px;
    border-top: 1px solid var(--line);
    background: var(--bg-1);
}
.share-card h2 {
    text-align: center;
    margin-bottom: 4px;
    font-family: var(--display);
    font-size: 24px;
    letter-spacing: 0.03em;
    font-weight: 400;
}
.share-card .muted.small {
    margin-bottom: 16px;
}
.share-card .ctl-label {
    margin-top: 4px;
    display: block;
    font-size: 12px;
    color: var(--text-dim);
    margin-bottom: 4px;
}
.share-card .ctl { margin-bottom: 12px; }
.share-url-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.share-url-row .ctl {
    flex: 1 1 0;
    min-width: 0;
    font-size: 12px;
    margin-bottom: 0;
}
.share-url-row .ghost-btn.small {
    flex-shrink: 0;
}
.share-stats {
    display: flex;
    gap: 18px;
    margin: 14px 0 16px;
    padding: 12px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
}
.share-stats > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.share-stats strong {
    font-family: var(--mono);
    font-size: 16px;
    font-weight: 500;
}

/* Divider between the public-link and user-share sections of the modal. */
.share-divider {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 22px 0 18px;
}

/* Direct-share email input + "Share" button row. */
.share-grant-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin: 8px 0 6px;
}
.share-grant-row .ctl {
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 0;
}
.share-grant-row .primary-btn.small {
    flex-shrink: 0;
    /* The .small variant of .primary-btn isn't a standard preset, so define
       the size here to keep it compact next to the email input. */
    padding: 8px 14px;
    font-size: 13px;
}

#grantMessage {
    margin: 6px 0 12px;
}
#grantMessage.error {
    color: var(--red);
}

/* ---------------------------------------------------------------------------
   Public watch page — stripped-down view for recipients without accounts
   --------------------------------------------------------------------------- */
.watch-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 24px 16px 16px;
    max-width: 960px;
    margin: 0 auto;
}
.watch-head {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
}
.watch-card {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 32px;
    margin: 0 auto;
    width: 100%;
    max-width: 480px;
    text-align: center;
}
.watch-card-wide {
    max-width: 100%;
    text-align: left;
}
.watch-card h1 {
    font-family: var(--display);
    font-size: 32px;
    letter-spacing: 0.02em;
    font-weight: 400;
    margin-bottom: 6px;
}
.watch-meta { margin-bottom: 20px; }
.watch-meta .kicker { color: var(--red); margin-bottom: 6px; }
.watch-stage {
    background: #000;
    border-radius: var(--r);
    overflow: hidden;
    margin-bottom: 20px;
}
.watch-stage video {
    width: 100%;
    display: block;
    max-height: 70vh;
    background: #000;
}
.watch-metrics h2 {
    font-family: var(--display);
    font-size: 18px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 10px;
    color: var(--text-dim);
}
.watch-metrics-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.watch-foot {
    margin-top: 32px;
    text-align: center;
}
.watch-foot a { color: var(--red); text-decoration: none; }
.watch-foot a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Self-record: setup card and on-stage countdown
   --------------------------------------------------------------------------- */

/* Same bounded-modal treatment as #saveOverlay — escape the stage frame so
   the card uses the full viewport, with overflow-safe action buttons. */
#selfRecordSetup {
    position: fixed;
    inset: 0;
    height: 100vh;
}
@supports (height: 100dvh) {
    #selfRecordSetup { height: 100dvh; }
}
#selfRecordSetup {
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(7, 9, 15, 0.7);
    backdrop-filter: blur(8px);
    padding: 16px;
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.self-record-card {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    width: 100%;
    max-width: 420px;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-align: left;
    padding: 0;
}
.self-record-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 28px 28px 12px;
    min-height: 0;
}
.self-record-card h2 {
    text-align: center;
    margin-bottom: 4px;
    font-family: var(--display);
    font-size: 26px;
    letter-spacing: 0.03em;
    font-weight: 400;
}
.self-record-card .muted.small {
    text-align: center;
    margin-bottom: 16px;
    color: var(--text-dim);
}
.self-record-card .ctl-label {
    display: block;
    margin-top: 14px;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--text-dim);
}
.self-record-card .save-actions {
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 16px 28px;
    border-top: 1px solid var(--line);
    background: var(--bg-1);
}
.self-record-card .save-actions .primary-btn,
.self-record-card .save-actions .ghost-btn {
    width: 100%;
}

/* Segmented button group — used for mode/duration/countdown pickers. */
.seg-group {
    display: flex;
    gap: 4px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 4px;
}
.seg-group .seg-btn {
    flex: 1;
    padding: 9px 6px;
    background: transparent;
    border: 0;
    border-radius: calc(var(--r) - 4px);
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.seg-group .seg-btn:hover {
    color: var(--text);
}
.seg-group .seg-btn.active {
    background: var(--red);
    color: white;
}

/* On-stage countdown overlay. Sits on top of the live preview while the
   user is stepping into frame and during the recording itself. */
.countdown-overlay {
    background: rgba(7, 9, 15, 0.45);
    backdrop-filter: blur(2px);
    pointer-events: none; /* don't block the live video underneath */
}
.countdown-display {
    text-align: center;
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.countdown-label {
    font-family: var(--display);
    font-size: 18px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: var(--text-dim);
}
.countdown-number {
    font-family: var(--display);
    font-size: clamp(120px, 28vw, 220px);
    line-height: 1;
    font-weight: 400;
    color: white;
    /* Pop animation on each tick */
    animation: countdown-pop 0.6s ease-out;
}
.countdown-overlay.recording .countdown-number {
    color: var(--red);
    animation: none;
}
.countdown-hint {
    font-size: 14px;
    color: var(--text-dim);
    margin-top: 12px;
}
@keyframes countdown-pop {
    0%   { transform: scale(0.4); opacity: 0; }
    40%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.stage-rec {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 12;
    background: rgba(225, 29, 46, 0.9);
    color: white;
    font-family: var(--mono);
    font-size: 12px;
    padding: 6px 12px;
    border-radius: var(--r);
    letter-spacing: 0.1em;
    animation: rec-blink 1s ease-in-out infinite;
}
@keyframes rec-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.65; }
}

/* Timeline */
.timeline {
    background: var(--bg-1);
    border-top: 1px solid var(--line);
    padding: 14px 24px;
    flex-shrink: 0;
}
.tl-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.icon-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--r);
    background: var(--bg-2);
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    font-size: 14px;
    color: var(--text);
    transition: background 0.12s;
}
.icon-btn:hover { background: var(--bg-3); }
.icon-btn.primary { background: var(--red); border-color: var(--red); color: white; }
.icon-btn.primary:hover { filter: brightness(1.1); }

#timeRead { color: var(--text-dim); margin-left: 8px; min-width: 80px; }
.speed-select {
    margin-left: auto;
    width: 140px;
    /* Reset native styling explicitly — iOS Safari's default range slider
       renders as a white pill, which clashes with the dark theme. We draw
       our own track + thumb below so it matches the timeline scrubber. */
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    height: 22px;
    cursor: pointer;
    accent-color: var(--red);
}
.speed-select::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: var(--bg-3);
    border: 1px solid var(--line);
}
.speed-select::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: var(--bg-3);
    border: 1px solid var(--line);
}
.speed-select::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--red);
    border: 0;
    margin-top: -7px; /* center on the 4px track */
    cursor: pointer;
}
.speed-select::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--red);
    border: 0;
    cursor: pointer;
}
#speedRead { color: var(--text-dim); min-width: 50px; text-align: right; }

.tl-track {
    /* Make tl-track a positioning context so the trim-band can sit
       absolutely on top of the range input. */
    position: relative;
}
.tl-track input[type="range"] {
    width: 100%;
    accent-color: var(--red);
    height: 6px;
    /* Keep the range input above the trim band so the thumb stays
       interactive (the band has pointer-events:none anyway). */
    position: relative;
    z-index: 1;
}

/* Visual band over the timeline scrubber showing the active trim window.
   Positioned absolutely; left/width are set inline by analyze.js. */
.trim-band {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 8px;
    background: rgba(225, 29, 46, 0.22);
    border: 1px solid rgba(225, 29, 46, 0.55);
    border-radius: 4px;
    pointer-events: none;
    z-index: 0;
}

/* Sidebar trim controls. */
.trim-display {
    margin: 8px 0 10px;
    padding: 8px 10px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
}
.trim-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.trim-actions .ghost-btn.small {
    flex: 1 1 auto;
    min-width: 0;
}

.mono { font-family: var(--mono); }
.small { font-size: 12px; }

/* ---------------------------------------------------------------------------
   Compare — side-by-side playback view
   --------------------------------------------------------------------------- */
.compare-pickers {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.compare-pickers .ctl { flex: 1 1 0; min-width: 0; }
.compare-pickers .vs {
    font-family: var(--display);
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.compare-stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.compare-clip {
    position: relative;
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.compare-clip video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    opacity: 0;
    transition: opacity 0.2s;
}
.compare-clip.loaded video { opacity: 1; }
.compare-clip canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}
.compare-clip .clip-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    font-size: 14px;
    pointer-events: none;
}
.compare-clip.loaded .clip-empty { display: none; }
.compare-clip .clip-label {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    z-index: 2;
    background: rgba(7, 9, 15, 0.7);
    color: var(--text);
    font-size: 12px;
    padding: 6px 10px;
    border-radius: var(--r);
    backdrop-filter: blur(4px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Per-clip control rows — one per clip, mirrors the side-by-side layout. */
.clip-controls-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.clip-controls {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.clip-controls .clip-scrub {
    width: 100%;
    accent-color: var(--red);
}
.clip-controls-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.clip-controls-row .icon-btn { padding: 6px 10px; }
.clip-controls-row .ghost-btn.small {
    margin-left: auto;
    /* Active state is set by JS when this clip has a sync point. */
}
.clip-controls-row .ghost-btn.small.active {
    background: var(--red);
    color: white;
    border-color: var(--red);
}
.clip-controls-row .mono.small {
    color: var(--text-dim);
    min-width: 52px;
    text-align: right;
}

/* Master playback section — drives both clips together. */
.compare-master {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 14px 18px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.compare-master-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.compare-master-row #seek { flex: 1 1 0; min-width: 0; }
.compare-master-row .speed-select { width: 110px; }
.compare-master-row #syncStatus {
    margin-left: auto;
    font-family: var(--mono);
}

.compare-toggles {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 14px 18px;
}
.compare-toggles .muted.small { margin-top: 4px; }

/* Stack everything on phones. */
@media (max-width: 700px) {
    .compare-stage,
    .clip-controls-grid {
        grid-template-columns: 1fr;
    }
    .compare-pickers {
        flex-direction: column;
        align-items: stretch;
    }
    .compare-pickers .vs {
        text-align: center;
    }
    .compare-master-row #syncStatus { margin-left: 0; flex-basis: 100%; }
    .clip-controls-row .ghost-btn.small { margin-left: 0; }
}

/* ---------------------------------------------------------------------------
   Account / settings page
   --------------------------------------------------------------------------- */
.page-narrow {
    max-width: 720px;
    margin: 0 auto;
}
.settings-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.settings-card {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 28px;
}
.settings-card h2 {
    font-family: var(--display);
    font-size: 24px;
    letter-spacing: 0.03em;
    font-weight: 400;
    margin-bottom: 4px;
}
.settings-card > .muted.small {
    margin-bottom: 20px;
}
.settings-card .ctl-label {
    display: block;
    margin-top: 16px;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--text-dim);
}
.settings-card .ctl + .muted.small {
    margin-top: 6px;
}
.settings-card .primary-btn,
.settings-card .danger-btn {
    margin-top: 20px;
}
.settings-card.danger-card {
    border-color: rgba(225, 29, 46, 0.35);
}
.settings-card.danger-card h2 {
    color: var(--red);
}

.settings-subhead {
    margin-top: 24px;
    margin-bottom: 8px;
    font-family: var(--display);
    font-size: 18px;
    letter-spacing: 0.04em;
    font-weight: 400;
    color: var(--text-dim);
}

/* Newly-generated invitation card (shown after Generate clicked). */
.invite-card {
    margin-top: 14px;
    padding: 14px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
}
.invite-card .muted.small { margin-bottom: 8px; }
.invite-url-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.invite-url-row .ctl {
    flex: 1 1 0;
    min-width: 0;
    font-size: 12px;
    margin-bottom: 0;
}
.invite-url-row .ghost-btn.small { flex-shrink: 0; }

/* List of past invitations. */
.invitations-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.invitation-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
}
.invitation-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}
.invitation-info strong {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.invitation-info .muted.small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status pills for used/revoked/expired invitations. */
.pill {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: var(--r-sm);
    flex-shrink: 0;
}
.pill.used    { background: rgba(52, 211, 153, 0.12); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.3); }
.pill.revoked { background: rgba(225, 29, 46, 0.12); color: var(--red); border: 1px solid rgba(225, 29, 46, 0.3); }
.pill.expired { background: var(--bg-3); color: var(--text-dim); border: 1px solid var(--line); }

/* Hero CTA note (shown under the Sign in button on invite-only home). */
.hero-cta-note {
    display: block;
    margin-top: 12px;
}

.status-line {
    margin-top: 12px;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: var(--r);
}
.status-line.success {
    color: #34d399;
    background: rgba(52, 211, 153, 0.08);
    border: 1px solid rgba(52, 211, 153, 0.25);
}
.status-line.error {
    color: var(--red);
    background: rgba(225, 29, 46, 0.08);
    border: 1px solid rgba(225, 29, 46, 0.25);
}

/* Modal */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(7, 9, 15, 0.7);
    backdrop-filter: blur(8px);
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 24px;
}
.modal[hidden] { display: none; }
[hidden] { display: none !important; }
.modal-card {
    background: var(--bg-1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 32px;
    max-width: 460px;
    width: 100%;
}
.modal-card h2 {
    font-family: var(--display);
    font-size: 32px;
    letter-spacing: 0.03em;
    font-weight: 400;
    margin-bottom: 16px;
}
.modal-card label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-dim);
    font-weight: 600;
    margin: 12px 0 6px;
}
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

/* Toast */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 12px 20px;
    font-size: 14px;
    z-index: 100;
    animation: toast-in 0.25s ease-out;
}
.toast.success { border-color: var(--green); color: #d1fae5; }
.toast.error   { border-color: var(--red); color: #ffe4e6; }
@keyframes toast-in {
    from { transform: translate(-50%, 20px); opacity: 0; }
    to   { transform: translate(-50%, 0); opacity: 1; }
}

/* =============================================================
   Responsive
   ============================================================= */
/* =============================================================
   Responsive — tablets and phones
   ============================================================= */

/* ---- Tablets (≤900px) ----------------------------------------------------- */
@media (max-width: 900px) {
    /* Topbar — hamburger replaces inline links */
    .topbar {
        padding: 10px 16px;
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
        height: auto;
        min-height: 56px;
        gap: 12px;
    }
    .nav-toggle {
        display: flex;
    }
    .topbar-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: var(--bg-1);
        border-bottom: 1px solid var(--line);
        padding: 12px 16px 16px;
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
        gap: 8px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    }
    .topbar.nav-open .topbar-menu { display: flex; }
    .topbar-links {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        margin-left: 0;
        width: 100%;
    }
    .topbar-links a {
        padding: 12px 14px;
        font-size: 15px;
        border-radius: var(--r);
    }
    .topbar-links a.active {
        box-shadow: inset 3px 0 0 var(--red);
    }
    .topbar-user {
        margin-left: 0;
        margin-top: 8px;
        padding-top: 12px;
        border-top: 1px solid var(--line);
        width: 100%;
        justify-content: space-between;
    }
    .user-name { display: inline; }

    /* Studio — stage on top, sidebar below */
    .studio {
        grid-template-columns: 1fr;
        grid-template-areas: "stage" "side";
        overflow: visible;
    }
    .studio-side {
        height: auto;
        max-height: none;
        border-right: none;
        border-top: 1px solid var(--line);
    }
    .studio-stage {
        height: 60vh;
        min-height: 360px;
    }
    @supports (height: 60dvh) {
        .studio-stage { height: 60dvh; }
    }

    /* Page padding */
    .page { padding: 24px 16px; }
    .page-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 24px;
        padding-bottom: 16px;
    }
    .page-head h1, .page h1 { font-size: 42px; }

    /* Marketing landing */
    .feature-grid { grid-template-columns: 1fr; }
    .marketing-nav { margin-bottom: 40px; }
    .hero-cta { flex-direction: column; align-items: stretch; }
    .hero-cta .primary-btn,
    .hero-cta .ghost-btn { width: 100%; text-align: center; }

    /* Athlete + session grids — single col earlier */
    .athlete-grid,
    .session-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

/* ---- Phones (≤640px) ------------------------------------------------------ */
@media (max-width: 640px) {
    body { font-size: 14px; }

    /* iOS Safari zooms in when an input has font-size <16px and gets focus.
       Force 16px on form fields to keep the layout stable. */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px;
    }

    .topbar { padding: 10px 12px; }
    .brand-name { font-size: 14px; }

    /* Studio — stage takes a comfortable portion of the viewport.
       Use dvh (dynamic viewport) where available so the iOS URL bar
       collapse doesn't shift the layout; fall back to vh otherwise. */
    .studio-stage { height: 55vh; min-height: 320px; }
    @supports (height: 55dvh) {
        .studio-stage { height: 55dvh; }
    }

    /* Sidebar sections — tighter padding, safe-area on the bottom one */
    .side-section { padding: 14px 16px; }
    .side-section h2 { font-size: 22px; }
    .studio-side > .side-section:last-child {
        padding-bottom: max(14px, env(safe-area-inset-bottom));
    }

    /* Single-column grids on phones */
    .athlete-grid,
    .session-grid { grid-template-columns: 1fr; }

    /* Hero — smaller, more compact */
    .hero { padding: 60px 16px 40px; }
    .hero-content { padding: 0; }
    .hero-title { font-size: clamp(40px, 11vw, 56px); margin-bottom: 20px; }
    .hero-sub { font-size: 15px; margin-bottom: 28px; }
    .hero-cta { margin-bottom: 48px; }

    /* Page heading sizing */
    .page-head h1, .page h1 { font-size: 34px; }
    .page-actions { flex-wrap: wrap; }
    .page-actions .primary-btn,
    .page-actions .ghost-btn { flex: 1; min-width: 0; }

    /* Auth cards (login/register) — full-width, with safe-area side padding */
    .auth-card { padding: 28px 20px; }
    .auth-shell {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }

    /* Timeline — compact controls */
    .timeline { padding: 10px 14px; }
    .tl-controls { gap: 6px; flex-wrap: wrap; }
    .icon-btn { width: 34px; height: 34px; font-size: 13px; }
    #timeRead { min-width: 64px; font-size: 12px; margin-left: 4px; }
    .speed-select { width: 100px; margin-left: auto; }
    #speedRead { min-width: 48px; font-size: 12px; }

    /* Larger range slider thumbs for touch */
    .tl-track input[type="range"] { height: 8px; }
    .tl-track input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--red);
        cursor: pointer;
    }
    .tl-track input[type="range"]::-moz-range-thumb {
        width: 22px;
        height: 22px;
        border: none;
        border-radius: 50%;
        background: var(--red);
        cursor: pointer;
    }
    /* Speed slider — keep its themed track but bump the thumb for touch */
    .speed-select::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -9px; }
    .speed-select::-moz-range-thumb { width: 20px; height: 20px; }

    /* Drawing tool grid — 3 cols stays usable on narrow screens */
    .tool-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .tool-btn { font-size: 12px; padding: 8px 4px; }

    /* Modal & save card — full-width with smaller padding */
    .modal { padding: 12px; }
    .modal-card { padding: 22px 18px; }
    .save-card { padding: 22px 18px; max-width: none; }
    .save-actions { gap: 8px; }

    /* Live metrics rows — slightly tighter */
    .live-metrics .metric-row { padding: 6px 0; font-size: 13px; }

    /* Buttons — bigger tap targets */
    .primary-btn, .ghost-btn, .danger-btn {
        padding: 11px 16px;
        min-height: 44px;
    }
    .primary-btn.full, .ghost-btn.full, .danger-btn.full { width: 100%; }

    /* Toggle row — bigger touch target */
    .toggle-row { padding: 6px 0; }
    .toggle-row input[type="checkbox"] { width: 20px; height: 20px; }

    /* iOS form-field default styling — let our theme through */
    input, select, textarea { -webkit-appearance: none; appearance: none; }
}

/* ---- Tiny phones (≤380px) ------------------------------------------------- */
@media (max-width: 380px) {
    .brand-name { display: none; }
    .tool-grid { grid-template-columns: repeat(2, 1fr); }
    .speed-select { width: 80px; }
}