/* === ClipBack stylesheet ===
   Mobile-first. Base rules describe the phone layout; the desktop layer lives in a
   single `@media (min-width: 768px)` block near the bottom, followed by the
   hover-capable and reduced-motion layers. Add new component rules mobile-first and
   put any desktop-only override in the desktop layer -- not in a new media query.

   Look: flat, solid colour -- no gradients. Every theme has a contrast-safe
   solid (--accent-strong) for anything that carries white text, --accent for
   text, fills and decoration, and theme-tinted neutrals.
   Anything white-on-colour uses --accent-strong, never --accent.
*/

[hidden] { display: none !important; }

/* === Fonts (self-hosted: no third-party RTT before first paint) === */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/spacegrotesk-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/spacegrotesk-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* === Non-color tokens (shared by every theme) === */
:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-full: 999px;
    --radius: var(--radius-md);

    /* Modal, sheet and playlist dialog are set `hidden` 200ms after they start
       closing (app.js), so --dur-base must stay under that. */
    --dur-fast: 120ms;
    --dur-base: 190ms;
    --ease-out: cubic-bezier(0.2, 0.9, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --font-display: 'Space Grotesk', system-ui, sans-serif;

    /* Minimum comfortable touch target. Every interactive element on mobile
       reserves at least this much, even when the visual mark is smaller. */
    --tap-min: 44px;

    --header-h: 56px;
    --tabbar-h: 58px;
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
    /* Anything fixed to the bottom clears the tab bar with this. */
    --bottom-offset: calc(var(--tabbar-h) + var(--safe-b) + var(--space-3));

    --shadow-1: 0 1px 2px var(--card-shadow), 0 2px 8px -2px var(--card-shadow);
    --shadow-2: 0 12px 32px -10px var(--card-shadow-strong), 0 2px 6px var(--card-shadow);
    --shadow-3: 0 28px 64px -18px var(--card-shadow-strong), 0 4px 12px var(--card-shadow);
    --shadow-glow: 0 10px 26px -8px var(--accent-glow);

    /* Derived accent tints. Resolved on <html>, where data-color sets --accent. */
    --accent-soft: color-mix(in srgb, var(--accent) 15%, transparent);
    --accent-line: color-mix(in srgb, var(--accent) 45%, var(--border));
    --on-accent: #FFFFFF;
}

/* === Mode definitions (structural colors) ===
   The dark block carries Neon's tint; the other themes re-tint below. */
:root, [data-mode="dark"] {
    --bg-body: #0E0B14;
    --bg-header: #0E0B14;
    --bg-surface: #17121F;
    --bg-card: #17121F;
    --bg-elevated: #1F1829;
    --bg-inset: #120E19;
    --bg-controls: #0A0710;
    --border: #2C2338;
    --border-light: #3D3150;
    --text: #ECE8F2;
    --text-heading: #FFFFFF;
    --text-muted: #A49BB3;
    --text-dim: #857B97;
    --error: #FF5A67;
    --warning: #F5A524;
    --success: #34D399;
    --card-shadow: rgba(0,0,0,0.3);
    --card-shadow-strong: rgba(0,0,0,0.6);
}

[data-mode="light"] {
    --bg-body: #F6F7FB;
    --bg-header: #F6F7FB;
    --bg-surface: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-elevated: #FFFFFF;
    --bg-inset: #EEF0F5;
    --bg-controls: #14111C;
    --border: #E3E5EC;
    --border-light: #C9CDD8;
    --text: #1A1F2C;
    --text-heading: #0F1320;
    --text-muted: #5F6677;
    --text-dim: #737A8C;
    --error: #DC2626;
    --warning: #B45309;
    --success: #059669;
    --card-shadow: rgba(24,20,40,0.06);
    --card-shadow-strong: rgba(24,20,40,0.16);
}

/* === Color definitions (accent, tinted neutrals) === */
:root, [data-color="neon"] {
    --accent: #EC4899;
    --accent-2: #A855F7;
    --accent-muted: #A855F7;
    --accent-glow: rgba(219,39,119,0.55);
    --accent-strong: #BE185D;
}
[data-color="neon"][data-mode="light"] {
    --bg-body: #FBF6FA;
    --bg-header: #FBF6FA;
    --bg-inset: #F4ECF3;
    --bg-controls: #1C1024;
    --border: #EADCE8;
    --border-light: #D5C0D2;
    --text: #1E1526;
    --text-heading: #140C1C;
    --text-muted: #6E6178;
    --text-dim: #7F718A;
    --accent: #BE185D;
    --accent-glow: rgba(219,39,119,0.35);
}

[data-color="sunset"] {
    --accent: #FF6A28;
    --accent-2: #B83A18;
    --accent-muted: #B83A18;
    --accent-glow: rgba(255,106,40,0.5);
    --accent-strong: #C2410C;
}
[data-color="sunset"]:not([data-mode="light"]) {
    --bg-body: #110C0A;
    --bg-header: #110C0A;
    --bg-surface: #1B1411;
    --bg-card: #1B1411;
    --bg-elevated: #241A16;
    --bg-inset: #150F0D;
    --bg-controls: #0C0807;
    --border: #33251F;
    --border-light: #47342B;
    --text: #F2EAE6;
    --text-muted: #B3A29A;
    --text-dim: #8F7E76;
}
[data-color="sunset"][data-mode="light"] {
    --bg-body: #FDF7F3;
    --bg-header: #FDF7F3;
    --bg-inset: #F8EEE8;
    --bg-controls: #2A1A10;
    --border: #F0DFD5;
    --border-light: #DDC3B4;
    --text: #2A1A12;
    --text-heading: #1E110B;
    --text-muted: #7A6358;
    --text-dim: #8A7368;
    --accent: #C2410C;
    --accent-glow: rgba(234,88,12,0.32);
}

[data-color="sky"] {
    --accent: #3B82F6;
    --accent-2: #1E3A8A;
    --accent-muted: #3B82F6;
    --accent-glow: rgba(59,130,246,0.5);
    --accent-strong: #2563EB;
}
[data-color="sky"]:not([data-mode="light"]) {
    --bg-body: #0A0D14;
    --bg-header: #0A0D14;
    --bg-surface: #111724;
    --bg-card: #111724;
    --bg-elevated: #18202F;
    --bg-inset: #0D121C;
    --bg-controls: #070A10;
    --border: #232D40;
    --border-light: #334058;
    --text: #E6ECF5;
    --text-muted: #99A5B8;
    --text-dim: #77849B;
}
[data-color="sky"][data-mode="light"] {
    --bg-body: #F4F7FB;
    --bg-header: #F4F7FB;
    --bg-inset: #EBF0F7;
    --bg-controls: #0F172A;
    --border: #DCE4EF;
    --border-light: #BCC9DB;
    --text: #0F1A2E;
    --text-heading: #0A1222;
    --text-muted: #5D6B82;
    --text-dim: #6E7B91;
    --accent: #2563EB;
    --accent-glow: rgba(37,99,235,0.32);
}

[data-color="woods"] {
    --accent: #52B788;
    --accent-2: #2D6A4F;
    --accent-muted: #40916C;
    --accent-glow: rgba(64,145,108,0.5);
    --accent-strong: #2D6A4F;
}
[data-color="woods"]:not([data-mode="light"]) {
    --bg-body: #0B0F0C;
    --bg-header: #0B0F0C;
    --bg-surface: #121914;
    --bg-card: #121914;
    --bg-elevated: #19221B;
    --bg-inset: #0F1511;
    --bg-controls: #080B09;
    --border: #243027;
    --border-light: #344438;
    --text: #E7EEE8;
    --text-muted: #9DAEA0;
    --text-dim: #7A8B7D;
}
[data-color="woods"][data-mode="light"] {
    --bg-body: #F1F5F0;
    --bg-header: #F1F5F0;
    --bg-surface: #FAFCF9;
    --bg-card: #FAFCF9;
    --bg-elevated: #FFFFFF;
    --bg-inset: #E7EDE5;
    --bg-controls: #1A2418;
    --border: #D6DFD3;
    --border-light: #AFC0AA;
    --text: #2C2416;
    --text-heading: #1F190F;
    --text-muted: #5A5040;
    --text-dim: #6F6454;
    --error: #9B2C2C;
    --accent: #2D6A4F;
    --accent-glow: rgba(45,106,79,0.3);
}

/* === Reset & Base === */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--text);
    background: var(--bg-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* dvh, not vh: iOS reports the URL-bar-less height for vh, pushing the footer
       below the fold until the bar collapses. */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    /* Clear the fixed tab bar. */
    padding-bottom: calc(var(--tabbar-h) + var(--safe-b));
    overflow-x: hidden;
}
a { color: var(--accent); text-decoration: none; }
/* Links inside running text are underlined too, so they are not told apart by
   colour alone (WCAG 1.4.1). Nav, buttons and cards keep the bare style above. */
.home-copy p a:not(.btn), .guide p a:not(.btn), .guide li a:not(.btn) {
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
img { max-width: 100%; display: block; }
hr { border: none; border-top: 1px solid var(--border); margin: var(--space-4) 0; }
::selection { background: var(--accent-soft); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
.icon { display: block; flex: 0 0 auto; }

/* Touch defaults: kill the grey flash and the double-tap-zoom delay, and let
   :active states carry the press feedback instead. */
button, a, input, select, textarea, summary, label,
.theme-swatch, .clip-card, .tab-item, .range-handle, .scrubber-track, .range-hi {
    -webkit-tap-highlight-color: transparent;
}
button, a, summary, label, .tab-item { touch-action: manipulation; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* === Typography === */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; color: var(--text-heading); }
h1 { font-size: 1.85rem; margin-bottom: var(--space-3); letter-spacing: -0.025em; }
h2 { font-size: 1.35rem; margin-bottom: var(--space-2); letter-spacing: -0.015em; }
h3 { font-size: 1.1rem; margin-bottom: var(--space-2); letter-spacing: -0.01em; }

/* === Buttons === */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: var(--tap-min); padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-full); font-weight: 600; font-size: 0.9rem;
    font-family: inherit; line-height: 1.2; letter-spacing: 0.005em;
    cursor: pointer; border: 1.5px solid transparent; text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                opacity var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                transform var(--dur-fast) var(--ease-spring);
}
.btn:active { transform: scale(0.96); }
.btn-primary {
    background: var(--accent-strong); color: var(--on-accent);
    box-shadow: var(--shadow-glow), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-outline { background: var(--bg-elevated); border-color: var(--border); color: var(--text); }
.btn-sm { min-height: 36px; padding: var(--space-1) var(--space-4); font-size: 0.8rem; }
.btn-lg { min-height: 54px; padding: var(--space-3) var(--space-6); font-size: 1rem; width: 100%; }
.btn-disabled { opacity: 0.5; pointer-events: none; box-shadow: none; }
.btn-danger { background: #DC2626; color: #fff; border-color: #DC2626; box-shadow: 0 10px 24px -10px rgba(220,38,38,0.6); }
.btn-danger:hover { background: #B91C1C; border-color: #B91C1C; }
.btn:disabled { opacity: 0.45; cursor: default; box-shadow: none; }
.btn:disabled:active { transform: none; }

/* === Header === */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: var(--bg-header);
    background: color-mix(in srgb, var(--bg-header) 76%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    backdrop-filter: blur(16px) saturate(170%);
    --ring-gap: var(--bg-header);
}
.site-header::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: var(--border); pointer-events: none;
}
.header-inner {
    max-width: 1200px; margin: 0 auto;
    padding: 0 calc(var(--space-4) + var(--safe-r)) 0 calc(var(--space-4) + var(--safe-l));
    height: var(--header-h); display: flex; align-items: center; gap: var(--space-4);
}
.logo {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
    color: var(--text-heading); text-decoration: none; letter-spacing: -0.03em;
}
/* The mark: a play triangle on the solid accent. */
.logo::before {
    content: ''; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5.14v13.72a1 1 0 0 0 1.52.85l10.9-6.86a1 1 0 0 0 0-1.7L9.52 4.29A1 1 0 0 0 8 5.14z'/%3E%3C/svg%3E") 58% 50% / 13px no-repeat,
        var(--accent-strong);
    box-shadow: 0 6px 16px -6px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.22);
    transition: transform var(--dur-base) var(--ease-spring);
}
/* Nav links and the header theme picker live in the account sheet on mobile. */
.nav-links { display: none; gap: var(--space-1); }
.nav-links a {
    color: var(--text-muted); font-weight: 500; font-size: 0.9rem;
    padding: 6px 14px; border-radius: var(--radius-full);
    transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.nav-links a.is-active { color: var(--text-heading); background: var(--accent-soft); }
.site-header .theme-picker { display: none; }
.auth-area { margin-left: auto; display: flex; align-items: center; }
.gsi-container { display: flex; align-items: center; min-height: 40px; }

/* Theme picker */
.theme-picker { display: flex; align-items: center; gap: var(--space-2); }
.theme-swatch {
    width: var(--tap-min); height: var(--tap-min);
    padding: 0; border: none; background: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
}
.theme-swatch > span {
    display: block; width: 30px; height: 30px; border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2), 0 2px 6px var(--card-shadow);
    transition: box-shadow var(--dur-fast) var(--ease-out),
                transform var(--dur-base) var(--ease-spring);
}
.theme-swatch.active > span {
    box-shadow: 0 0 0 2px var(--ring-gap, var(--bg-elevated)), 0 0 0 4px var(--accent);
    transform: scale(1.06);
}
.theme-swatch:active > span { transform: scale(0.88); }

/* Dark/light mode toggle */
.mode-toggle {
    width: var(--tap-min); height: var(--tap-min);
    padding: 0; border: 1.5px solid var(--border); background: var(--bg-elevated);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-full);
    color: var(--text-muted);
    transition: border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out),
                transform var(--dur-base) var(--ease-spring);
}
.mode-toggle:active { transform: scale(0.88) rotate(-20deg); }
.mode-toggle svg { width: 20px; height: 20px; }
.mode-toggle .icon-sun  { display: block; }
.mode-toggle .icon-moon { display: none; }
[data-mode="light"] .mode-toggle .icon-sun  { display: none; }
[data-mode="light"] .mode-toggle .icon-moon { display: block; }

/* User menu (desktop; the tab bar's Account sheet replaces it on mobile) */
.user-menu { position: relative; }
.user-menu-trigger { background: none; border: none; cursor: pointer; padding: 0; display: flex; border-radius: 50%; }
.user-menu-trigger .avatar, .user-menu-trigger .avatar-placeholder {
    box-shadow: 0 0 0 2px var(--bg-header), 0 0 0 4px var(--accent-soft);
    transition: box-shadow var(--dur-fast) var(--ease-out);
}
.user-menu-trigger[aria-expanded="true"] .avatar,
.user-menu-trigger[aria-expanded="true"] .avatar-placeholder { box-shadow: 0 0 0 2px var(--bg-header), 0 0 0 4px var(--accent); }
.avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.avatar-placeholder {
    width: 36px; height: 36px; border-radius: 50%; background: var(--accent-strong); color: #fff;
    display: flex; align-items: center; justify-content: center; font-weight: 600;
    flex: 0 0 auto;
}
.avatar-lg { width: 64px; height: 64px; font-size: 1.5rem; border-radius: 50%; }
.user-dropdown {
    display: none; position: absolute; right: 0; top: 48px;
    background: var(--bg-elevated);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    min-width: 200px; box-shadow: var(--shadow-3); z-index: 200;
    padding: var(--space-2);
    transform-origin: top right;
}
.user-dropdown.open { display: block; animation: popIn var(--dur-base) var(--ease-spring); }
.user-dropdown a {
    display: flex; align-items: center; min-height: 40px; padding: 0 var(--space-3);
    border-radius: var(--radius-sm); color: var(--text); font-size: 0.9rem;
}
.user-dropdown hr { margin: var(--space-2) var(--space-1); }
@keyframes popIn { from { opacity: 0; transform: translateY(-6px) scale(0.96); } to { opacity: 1; transform: none; } }

/* === Mobile tab bar === */
.tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
    display: flex;
    background: var(--bg-header);
    background: color-mix(in srgb, var(--bg-header) 80%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
    padding-bottom: var(--safe-b);
}
.tabbar::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: var(--border); pointer-events: none;
}
.tab-item {
    position: relative;
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; min-height: var(--tabbar-h);
    background: none; border: none; cursor: pointer;
    font-family: inherit; font-size: 0.68rem; font-weight: 600; line-height: 1;
    color: var(--text-muted); text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}
/* The active pill behind the icon. Centred on the icon: the item is 58px with
   a 24px icon, a 4px gap and an ~11px label stacked in the middle. */
.tab-item::before {
    content: ''; position: absolute; top: 7px; left: 50%;
    width: 54px; height: 30px; margin-left: -27px;
    border-radius: var(--radius-full); background: var(--accent-strong);
    box-shadow: 0 6px 16px -6px var(--accent-glow);
    opacity: 0; transform: scale(0.6);
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-spring);
}
.tab-item.is-active { color: var(--accent); }
.tab-item.is-active::before { opacity: 1; transform: scale(1); }
.tab-item.is-active .tab-icon { color: var(--on-accent); }
.tab-icon {
    position: relative;
    width: 24px; height: 24px;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform var(--dur-fast) var(--ease-spring), color var(--dur-fast) var(--ease-out);
}
.tab-avatar {
    position: relative;
    width: 24px; height: 24px; border-radius: 50%; font-size: 0.7rem;
    transition: transform var(--dur-fast) var(--ease-spring);
}
.tab-item:active .tab-icon, .tab-item:active .tab-avatar { transform: scale(0.84); }
.tab-label { display: block; position: relative; }

/* === Account sheet === */
/* Stacking order: header 100 < tab bar 300 < consent banner 500 < sheet 700/701 <
   toast 800 < interstitial 1000 < pocket lock. The sheet must clear the consent
   banner, which is also pinned to the bottom of the screen. */
.sheet-backdrop {
    position: fixed; inset: 0; z-index: 700;
    background: rgba(0,0,0,0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.sheet-backdrop.is-open { opacity: 1; }
.sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 701;
    max-height: 85dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border-light);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: var(--shadow-3);
    padding: var(--space-2) calc(var(--space-4) + var(--safe-r)) calc(var(--space-5) + var(--safe-b)) calc(var(--space-4) + var(--safe-l));
    transform: translateY(100%);
    transition: transform var(--dur-base) var(--ease-out);
    --ring-gap: var(--bg-elevated);
}
.sheet.is-open { transform: translateY(0); }
.sheet-grabber {
    width: 40px; height: 5px; border-radius: var(--radius-full);
    background: var(--border-light); margin: var(--space-1) auto var(--space-4);
}
.sheet-user {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3); border-radius: var(--radius-lg);
    background: var(--bg-inset);
}
.sheet-user-text { display: flex; flex-direction: column; min-width: 0; }
.sheet-user-text strong { color: var(--text-heading); font-size: 0.95rem; }
.sheet-user-text span {
    font-size: 0.8rem; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sheet-section { padding-top: var(--space-4); }
.sheet-section-title {
    display: block; font-size: 0.72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-dim); margin-bottom: var(--space-2);
}
.sheet-link {
    display: flex; align-items: center; min-height: var(--tap-min);
    padding: 0 var(--space-3); margin: 0 calc(var(--space-3) * -1);
    border-radius: var(--radius-md);
    color: var(--text); font-weight: 500; font-size: 0.95rem;
    transition: background-color var(--dur-fast) var(--ease-out);
}
.sheet-link:active { background: var(--accent-soft); }
.sheet-link-quiet { color: var(--text-muted); }

/* === Main === */
.main-content {
    flex: 1; max-width: 1200px; width: 100%; margin: 0 auto;
    padding: var(--space-4) calc(var(--space-4) + var(--safe-r)) var(--space-6) calc(var(--space-4) + var(--safe-l));
}

/* === Hero === */
.hero { position: relative; text-align: center; padding: var(--space-6) 0 var(--space-5); }
.hero h1 {
    font-size: clamp(2.3rem, 9vw, 4.4rem); line-height: 1.02; letter-spacing: -0.04em;
    margin-bottom: var(--space-3); padding-bottom: 0.06em;
    color: var(--accent);
}
.hero-sub { color: var(--text-muted); font-size: 1rem; max-width: 34em; margin: var(--space-2) auto 0; }

/* === Clip Creator === */
.clip-creator { max-width: 800px; margin: 0 auto; }
.url-input-row, .import-row {
    display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-2);
}
.url-input-row .btn, .import-row .btn { flex: 1 1 0; }
.input-url {
    flex: 1 1 100%; min-width: 0;
    padding: var(--space-3) var(--space-4);
    border: 1.5px solid var(--border); border-radius: var(--radius-md);
    /* 16px minimum: anything smaller makes iOS Safari zoom the viewport on focus
       and leaves it zoomed. Same reason for the other inputs below. */
    font-size: 16px; font-family: inherit;
    background: var(--bg-inset); color: var(--text);
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
}
.url-input-row .input-url, .import-row .input-url { min-height: 52px; border-radius: var(--radius-full); padding: var(--space-3) var(--space-5); }
.input-url:focus { border-color: var(--accent); outline: none; background: var(--bg-surface); box-shadow: 0 0 0 4px var(--accent-soft); }
.input-url::placeholder, .input-title::placeholder, .input-search::placeholder { color: var(--text-dim); }
.error-msg { color: var(--error); font-size: 0.85rem; font-weight: 500; margin-bottom: var(--space-3); }
.import-notice { color: var(--accent); font-size: 0.85rem; margin-bottom: var(--space-3); }

/* Player */
.player-wrapper {
    position: relative; width: 100%; padding-top: 56.25%;
    background: #000; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden; margin-top: var(--space-5);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
}
/* Create page: the loaded video's title, directly above the player. */
.source-video-title {
    font-size: 1.1rem; font-weight: 600; color: var(--text);
    line-height: 1.35; margin: var(--space-5) 0 0;
    overflow-wrap: anywhere;
}
.source-video-title:not([hidden]) + .player-wrapper { margin-top: var(--space-3); }
.player-container, .poster-overlay { position: absolute; inset: 0; }
.poster-overlay {
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    z-index: 2; background: #000;
}
.poster-img { width: 100%; height: 100%; object-fit: cover; }
.play-btn-overlay {
    position: absolute; width: 76px; height: 76px; border-radius: 50%;
    background: var(--accent-strong); color: #fff;
    border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 14px 38px -8px var(--accent-glow), 0 0 0 1px rgba(255,255,255,0.12), inset 0 1px 0 rgba(255,255,255,0.28);
    transition: transform var(--dur-base) var(--ease-spring);
}
/* Phones: smaller, and lifted into the band the privacy note (max 58% from the
   bottom) never reaches, so the note can scroll but never covers the button. */
.poster-overlay .play-btn-overlay { width: 60px; height: 60px; top: 12%; }
.play-btn-overlay .icon { margin-left: 4px; }
/* A slow ripple that says "press me" without moving the button itself. */
.play-btn-overlay::after {
    content: ''; position: absolute; inset: -4px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.6); pointer-events: none;
    animation: pulseRing 2.4s var(--ease-out) infinite;
}
@keyframes pulseRing {
    0%   { transform: scale(0.92); opacity: 0.8; }
    70%  { transform: scale(1.4); opacity: 0; }
    100% { transform: scale(1.4); opacity: 0; }
}
.play-btn-overlay:active { transform: scale(0.92); }
/* The § 25 TDDDG notice over the poster. It has to be readable to count as
   informed consent, so it sits on a gradient rather than relying on the
   thumbnail happening to be dark, and it is capped and scrollable so a long
   text can never cover the play button it is explaining. */
.poster-privacy-note {
    position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
    padding: 16px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    text-align: center; color: rgba(255,255,255,0.88); font-size: 0.72rem; line-height: 1.4;
    background: linear-gradient(to top, rgba(0,0,0,0.95), rgba(0,0,0,0.8) 65%, rgba(0,0,0,0));
    max-height: 58%; overflow-y: auto; overscroll-behavior: contain;
}
.poster-privacy-note strong { color: #fff; }
.poster-privacy-note a { color: #fff; text-decoration: underline; }
.link-button { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; width: 100%; }
.user-dropdown .logout-form { display: block; }
.user-dropdown .logout-form .link-button { display: flex; align-items: center; min-height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-sm); font-size: 0.9rem; color: var(--text-muted); }
.user-dropdown .logout-form .link-button:hover { background: var(--accent-soft); color: var(--text); }
.gsi-trigger { white-space: nowrap; }
.player-container iframe { width: 100%; height: 100%; border: 0; }

/* Custom controls */
/* Two rows on mobile. In one row the play, mute and lock buttons plus the time
   readout leave the scrubber about 23px wide, which is not a scrubber. */
.custom-controls {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--space-2) var(--space-2);
    padding: var(--space-3);
    background: var(--bg-controls); border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 26px 50px -26px var(--accent-glow);
}
.ctrl-btn {
    background: none; border: none; color: #fff; font-size: 18px;
    cursor: pointer; padding: 0;
    min-width: var(--tap-min); min-height: var(--tap-min);
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-full);
    transition: transform var(--dur-fast) var(--ease-spring), background-color var(--dur-fast) var(--ease-out);
}
.ctrl-btn:active { transform: scale(0.88); background: rgba(255,255,255,0.12); }
.fullscreen-btn { margin-left: auto; }
.fullscreen-btn .fs-icon { display: block; }
.fullscreen-btn .fs-exit { display: none; }
.is-fullscreen .fullscreen-btn .fs-enter { display: none; }
.is-fullscreen .fullscreen-btn .fs-exit { display: block; }
.player-wrapper:fullscreen,
.player-wrapper:-webkit-full-screen {
    padding-top: 0; width: 100%; height: 100%;
    border-radius: 0; margin: 0;
}
.player-wrapper:fullscreen .player-container,
.player-wrapper:-webkit-full-screen .player-container {
    position: absolute; inset: 0; width: 100% !important; height: 100% !important;
}
.scrubber-track {
    flex: 1 1 100%; order: -1; min-width: 0; height: 10px;
    background: rgba(255,255,255,0.14); border-radius: var(--radius-full);
    position: relative; cursor: pointer; touch-action: none;
}
/* A taller invisible hit strip around the thin track. */
.scrubber-track::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }
.scrubber-fill {
    height: 100%; background: var(--accent);
    border-radius: var(--radius-full); width: 0; pointer-events: none;
    box-shadow: 0 0 14px -2px var(--accent-glow);
}
.scrubber-thumb {
    width: 20px; height: 20px; background: #fff; border-radius: 50%;
    position: absolute; top: 50%; transform: translate(-50%, -50%); left: 0;
    cursor: grab; pointer-events: none;
    box-shadow: 0 0 0 4px var(--accent-soft), 0 2px 6px rgba(0,0,0,0.45);
    transition: transform var(--dur-fast) var(--ease-spring);
}
.scrubber-track:active .scrubber-thumb { transform: translate(-50%, -50%) scale(1.2); }
.time-display {
    color: rgba(255,255,255,0.72); font-size: 0.75rem; white-space: nowrap;
    font-variant-numeric: tabular-nums; flex: 1 1 auto;
}

/* The volume *slider* is pointer-only: phones use the hardware buttons, and iOS
   ignores programmatic volume on embedded players. The mute button stays -- when
   autoplay is blocked the player retries muted, and this is the only way back. */
/* Playback speed. The menu opens upward: the control bar sits at the bottom of
   the player, so a downward menu would open off the bottom of an embed. */
.speed-wrap { position: relative; display: flex; align-items: center; }
.speed-btn {
    font-size: 0.85rem; font-weight: 600; font-variant-numeric: tabular-nums;
    padding: 0 var(--space-3); min-width: auto;
}
.speed-btn.is-modified { color: #fff; background: var(--accent-strong); }
.speed-menu {
    position: absolute; bottom: calc(100% + var(--space-2)); left: 50%;
    transform: translateX(-50%);
    display: flex; flex-direction: column; gap: 2px;
    padding: var(--space-2); z-index: 20;
    background: var(--bg-controls);
    background: color-mix(in srgb, var(--bg-controls) 86%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
.speed-menu[hidden] { display: none; }
.speed-option {
    background: none; border: none; color: #fff; cursor: pointer;
    font-size: 0.85rem; font-variant-numeric: tabular-nums; text-align: left;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm); white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease-out);
}
.speed-option:hover { background: rgba(255,255,255,0.10); }
.speed-option.is-active { background: var(--accent-strong); color: #fff; font-weight: 700; }

.volume-wrap { display: flex; align-items: center; gap: var(--space-1); margin-left: 0; }
.volume-slider {
    display: none;
    width: 76px; height: 6px; background: rgba(255,255,255,0.14); border-radius: var(--radius-full);
    position: relative; cursor: pointer;
}
.volume-slider::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }
.volume-fill { height: 100%; background: var(--accent); border-radius: var(--radius-full); width: 100%; pointer-events: none; }
.volume-thumb {
    width: 14px; height: 14px; background: #fff; border-radius: 50%;
    position: absolute; top: 50%; transform: translate(-50%, -50%); left: 100%;
    cursor: grab; box-shadow: 0 1px 4px rgba(0,0,0,0.4); pointer-events: none;
}

/* === Range selector === */
.range-selector, .edit-range-section {
    margin-top: var(--space-5); padding: var(--space-4);
    background: var(--bg-elevated);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}
.range-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.range-header h3 { margin-bottom: 0; }
.range-track-wrapper { padding: var(--space-5) 0 var(--space-4); }
.range-track {
    position: relative; height: 10px; background: var(--bg-inset); border-radius: var(--radius-full);
    box-shadow: inset 0 0 0 1px var(--border);
    user-select: none; -webkit-user-select: none; touch-action: none;
}
.range-highlight {
    position: absolute; top: 0; height: 100%; background: var(--accent);
    border-radius: var(--radius-full); pointer-events: none;
    box-shadow: 0 0 16px -2px var(--accent-glow);
}
.range-hi {
    position: absolute; top: 50%; height: var(--tap-min); transform: translateY(-50%);
    background: transparent; z-index: 3; pointer-events: none;
}
.range-hi::after {
    content: ''; position: absolute; left: 0; right: 0;
    top: 50%; height: 10px; transform: translateY(-50%);
    background: var(--accent); border-radius: var(--radius-full); pointer-events: none;
}
/* The handles are visual marks only -- the track wrapper owns the gesture and routes
   it to the nearest handle (see createDragController in app.js). Per-handle hit boxes
   cannot be made to work here: a 60s selection out of a 40-minute source puts the two
   handles about 9px apart, so 44px boxes either stack (the end handle wins every hit)
   or hang off the track edge (a 0:00 start becomes unreachable).
   The handle's own `transform` belongs to app.js (handleTransform); style ::after. */
.range-handle {
    position: absolute; top: 50%; left: 0;
    width: var(--tap-min); height: var(--tap-min);
    background: none; border: none; padding: 0;
    transform: translate3d(0, -50%, 0);
    will-change: transform;
    z-index: 5; pointer-events: none;
    display: flex; align-items: center; justify-content: center;
}
.range-handle::after {
    content: ''; width: 10px; height: 28px;
    background: #fff; border: 2px solid var(--accent);
    border-radius: var(--radius-full);
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-out);
}
.range-handle.is-dragging::after { transform: scale(1.35, 1.2); box-shadow: 0 0 0 6px var(--accent-soft), 0 2px 10px rgba(0,0,0,0.4); }

/* The whole wrapper is the target: full track width, and ~50px tall with its padding. */
.range-track-wrapper, .fine-track-wrapper {
    touch-action: none; cursor: pointer;
    user-select: none; -webkit-user-select: none;
}
.range-track-wrapper:active, .fine-track-wrapper:active { cursor: grabbing; }

/* --- Mobile: zoom into the range track ---------------------------------------
   What gets too small to grab is the selection, not the clip: 30s out of a
   40-minute source is ~4px of a 350px track, and start, end and middle all land
   on those same few pixels. So the wrapper turns into a horizontal scroll window
   and the track grows to `zoom x 100%` (inline, set by createTrackZoom in app.js).
   Every percentage in the range code is relative to the track, so none of that
   maths changes -- only the track's rect gets wider.
   Set for a coarse pointer on a narrow window only, and switched off wholesale in
   the desktop layer. */
.range-track-wrapper.is-zoomed {
    overflow-x: auto;
    overflow-y: hidden;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* overflow-y clips: the 44px handles need the room the 16px bottom padding
       does not give them. */
    padding-bottom: var(--space-5);
}
.range-track-wrapper.is-zoomed::-webkit-scrollbar { width: 0; height: 0; }
/* Empty track pans -- no handler grabs it, so the press falls through to the
   native scroll. */
.range-track-wrapper.is-zoomed .range-track { touch-action: pan-x; }
/* Zoomed, the handles no longer share three pixels, so they can finally own real
   hit boxes (see the note on .range-handle above). `touch-action: none` on them is
   what makes the difference between dragging an edge and panning the window. */
.range-track-wrapper.is-zoomed .range-handle,
.range-track-wrapper.is-zoomed .range-hi {
    pointer-events: auto;
    touch-action: none;
}

/* Which slice of the source is on screen, and how far in. Only rendered while
   zoomed -- without it a scrolled track has no landmarks at all. */
.zoom-info {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-2); margin-top: var(--space-3);
}
.zoom-window { font-size: 0.72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.zoom-badge {
    font-size: 0.72rem; font-weight: 700; color: var(--accent);
    font-variant-numeric: tabular-nums; line-height: 1;
    padding: 4px var(--space-2);
    background: var(--accent-soft); border-radius: var(--radius-full);
}

.range-inputs {
    display: flex; flex-direction: column; align-items: stretch;
    gap: var(--space-3); margin-top: var(--space-2);
}
.range-input-group {
    display: flex; flex-direction: row; align-items: center; justify-content: space-between;
    gap: var(--space-3); min-width: 0;
}
.range-input-group label { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); flex: 0 0 auto; }
.time-input {
    flex: 1 1 auto; width: auto; min-width: 0;
    text-align: center; padding: var(--space-2) var(--space-1);
    border: 1.5px solid var(--border); border-radius: var(--radius-md);
    font-size: 16px; font-family: inherit; font-weight: 600; font-variant-numeric: tabular-nums;
    background: var(--bg-inset); color: var(--text-heading);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.time-input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 4px var(--accent-soft); }
.range-duration {
    align-self: center;
    font-weight: 700; font-family: var(--font-display); font-size: 2.1rem; line-height: 1.1;
    letter-spacing: -0.02em; font-variant-numeric: tabular-nums; text-align: center;
    padding-bottom: var(--space-1);
    color: var(--accent);
}

/* ---- Loop sections (createSectionList in app.js, _section_panel.html) ---- */
/* The inactive sections of a multi-section loop, faint on the range track.
   Behind the active highlight and never hit-testable: the track wrapper routes
   every press to the active section's handles. */
.range-section-ghost {
    position: absolute; top: 0; height: 100%;
    background: var(--accent-line); border-radius: var(--radius-full);
    opacity: 0.7; pointer-events: none;
}
.range-section-ghost::after {
    content: attr(data-n);
    position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%);
    font-size: 0.625rem; font-weight: 700; line-height: 1; color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.section-panel { margin-top: var(--space-4); }
.section-list {
    list-style: none; margin: 0 0 var(--space-3); padding: 0;
    display: flex; flex-direction: column; gap: var(--space-1);
}
.section-row {
    display: flex; align-items: center; gap: var(--space-2);
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--bg-inset);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.section-row.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.section-pick {
    flex: 1 1 auto; min-width: 0; min-height: var(--tap-min);
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-1) var(--space-3);
    background: none; border: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
    font-variant-numeric: tabular-nums;
}
.section-num {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-elevated); color: var(--text-muted); font-size: 0.75rem; font-weight: 700;
}
.section-row.is-active .section-num { background: var(--accent); color: var(--on-accent); }.section-range { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.section-len { flex: 0 0 auto; color: var(--text-muted); font-size: 0.8rem; }
.section-tools { display: flex; flex: 0 0 auto; padding-right: var(--space-1); }
.section-btn {
    width: 34px; height: 34px; border-radius: var(--radius-sm);
    background: none; border: none; color: var(--text-muted); font-size: 0.9rem; cursor: pointer;
}
.section-btn:hover, .section-btn:focus-visible { background: var(--bg-elevated); color: var(--text-heading); }
.section-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.section-play-all.is-active { border-color: var(--accent); color: var(--accent); }
.section-total {
    margin-left: auto; font-size: 0.85rem; font-weight: 600;
    color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.section-hint { margin: var(--space-2) 0 0; font-size: 0.8rem; color: var(--text-dim); }
.clip-card-sections { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 2px; }
/* Where one section hands over to the next, on the player's scrubber. */
.scrubber-tick {
    position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px;
    background: rgba(255,255,255,0.55); border-radius: 1px; pointer-events: none; z-index: 1;
}

/* Nudge buttons: the only way to land an exact frame with a finger. A 44px
   fingertip on a 340px track is ~7 seconds per pixel on a 40-minute source. */
/* The row takes the space the label leaves, so a 10:00.000 value is never clipped. */
.nudge-row { display: flex; align-items: center; gap: var(--space-1); flex: 1 1 auto; min-width: 0; }
.nudge-btn {
    width: var(--tap-min); height: var(--tap-min);
    flex: 0 0 auto; padding: 0;
    background: var(--bg-surface); color: var(--text);
    border: 1.5px solid var(--border); border-radius: 50%;
    font-size: 1.15rem; font-family: inherit; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform var(--dur-fast) var(--ease-spring),
                border-color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.nudge-btn:active { transform: scale(0.86); border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* Seconds vs milliseconds for the Start/End boxes. Whole seconds cannot hold the
   fractional part, so stepping down rounds up -- a clip never grows back the frames
   in front of its in-point. */
.precision-row { display: flex; justify-content: flex-end; margin-top: var(--space-3); }
.precision-row[hidden] { display: none; }
/* Segmented pill, shared look with the picker's view toggle. */
.precision-toggle, .picker-view-toggle {
    display: flex; flex: 0 0 auto; gap: 2px; padding: 3px;
    background: var(--bg-inset); border: 1px solid var(--border);
    border-radius: var(--radius-full);
}
.precision-btn {
    height: 30px; padding: 0 var(--space-3);
    border: none; border-radius: var(--radius-full); background: transparent; color: var(--text-muted);
    font-family: inherit; font-size: 0.7rem; font-weight: 600; line-height: 1;
    text-transform: uppercase; letter-spacing: 0.06em;
    white-space: nowrap; cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.precision-btn.is-active { background: var(--accent-strong); color: #fff; box-shadow: 0 4px 12px -4px var(--accent-glow); }

/* Fine-adjust: a zoomed window around the selection, so both handles are separable
   on a long source instead of landing on the same three pixels. */
.fine-adjust { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px dashed var(--border); }
.fine-adjust-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-bottom: var(--space-2);
}
.fine-adjust-title { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); }
.fine-adjust-window { font-size: 0.72rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.fine-track-wrapper { padding: var(--space-4) 0 var(--space-2); }
.fine-track {
    position: relative; height: 10px; border-radius: var(--radius-full);
    background: var(--bg-inset); box-shadow: inset 0 0 0 1px var(--border);
    user-select: none; -webkit-user-select: none; touch-action: none;
}
.fine-highlight {
    position: absolute; top: 0; height: 100%; background: var(--accent);
    border-radius: var(--radius-full); pointer-events: none; opacity: 0.6;
}
.fine-ticks { display: flex; justify-content: space-between; margin-top: var(--space-1); font-size: 0.68rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.fine-track .range-handle::after { background: var(--accent); border-color: #fff; }

/* column-reverse: the markup leads with the button, but the sentence explaining it
   should be read first. */

/* Toggle switch */
.toggle-label { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap-min); font-size: 0.85rem; font-weight: 500; color: var(--text); cursor: pointer; }
.toggle { position: relative; display: inline-block; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track {
    width: 46px; height: 28px; background: var(--border-light); border-radius: var(--radius-full);
    position: relative; transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.toggle-knob {
    width: 22px; height: 22px; background: #fff; border-radius: 50%;
    position: absolute; top: 3px; left: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: transform var(--dur-base) var(--ease-spring);
}
.toggle input:checked + .toggle-track { background: var(--accent-strong); box-shadow: 0 4px 12px -4px var(--accent-glow); }
.toggle input:checked + .toggle-track .toggle-knob { transform: translateX(18px); }
.toggle input:focus-visible + .toggle-track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Clip form */
.clip-title-row { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0 var(--space-3); }
.input-title {
    flex: 1; min-width: 0;
    padding: var(--space-3) var(--space-4);
    border: 1.5px solid var(--border); border-radius: var(--radius-md);
    font-size: 16px; font-family: inherit;
    background: var(--bg-inset); color: var(--text);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.input-title:focus { border-color: var(--accent); outline: none; background: var(--bg-surface); box-shadow: 0 0 0 4px var(--accent-soft); }
.char-counter { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.anon-note { text-align: center; margin-top: var(--space-3); color: var(--text-muted); font-size: 0.9rem; }

/* Spinner: a ring with one accent quarter. */
.spinner { text-align: center; padding: var(--space-6); color: var(--text-muted); }
.spinner-ring {
    width: 44px; height: 44px; border-radius: 50%;
    border: 4px solid var(--border); border-top-color: var(--accent);
    animation: spin 0.8s linear infinite; margin: 0 auto var(--space-3);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* === Clip Page === */
.clip-page-layout { display: block; width: 100%; margin: 0 auto; }
.clip-main { min-width: 0; }
.clip-player { max-width: 100%; margin-top: var(--space-2); }
.clip-sidebar { display: none; }
.clip-info { margin-top: var(--space-5); }
.clip-title { font-size: 1.45rem; letter-spacing: -0.025em; margin-bottom: var(--space-1); }
.clip-meta { color: var(--text-muted); font-size: 0.88rem; margin-top: var(--space-1); }
.source-title { font-weight: 600; color: var(--text); }
/* Stacked full-width actions: thumb-sized targets right under the player. */
.clip-actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.clip-actions .btn { width: 100%; }

/* === Clip Picker (inline library panel) === */
.clip-picker {
    margin-top: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}
.clip-picker-header {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
}
.clip-picker-title { font-size: 0.95rem; margin: 0; color: var(--text-heading); }
.clip-picker-body { padding: var(--space-3); }
.clip-picker-toolbar {
    display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3);
}
.clip-picker-toolbar .clips-search-row { flex: 1; margin-top: 0; }
.clip-picker-toolbar .input-search { width: 100%; font-size: 16px; padding: var(--space-2) var(--space-4) var(--space-2) 40px; }
.picker-view-btn {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 32px; padding: 0;
    border: none; border-radius: var(--radius-full); background: transparent; color: var(--text-muted); cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.picker-view-btn.is-active { background: var(--accent-strong); color: #fff; box-shadow: 0 4px 12px -4px var(--accent-glow); }
.picker-list {
    max-height: 360px; overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px;
}
.picker-list::-webkit-scrollbar { width: 0; height: 0; }
/* List view */
.picker-list[data-view="list"] { display: flex; flex-direction: column; gap: var(--space-1); }
/* Tile view */
.picker-list[data-view="tile"] { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.picker-item {
    display: block; text-decoration: none; color: inherit;
    border-radius: var(--radius-md);
    transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
.picker-item:active { background: var(--accent-soft); transform: scale(0.985); }
.picker-item.is-current { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.picker-item-row {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2); min-height: var(--tap-min);
}
.picker-item-thumb {
    flex: 0 0 80px; width: 80px; aspect-ratio: 16/9;
    border-radius: var(--radius-sm); overflow: hidden;
    background: var(--bg-inset); position: relative;
}
.picker-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.picker-item-thumb .duration-badge {
    position: absolute; bottom: 3px; right: 3px;
    font-size: 0.62rem; padding: 1px 5px;
}
.picker-item-text { flex: 1; min-width: 0; }
.picker-item-title {
    font-size: 0.82rem; font-weight: 600; color: var(--text-heading); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.picker-item-source {
    font-size: 0.7rem; color: var(--text-dim); margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Tile view item overrides */
.picker-list[data-view="tile"] .picker-item,
.picker-list[data-view="compact"] .picker-item {
    border: 1.5px solid var(--border); overflow: hidden; background: var(--bg-surface);
}
.picker-list[data-view="tile"] .picker-item.is-current,
.picker-list[data-view="compact"] .picker-item.is-current {
    border-color: var(--accent-strong); box-shadow: 0 8px 20px -10px var(--accent-glow);
}
.picker-list[data-view="tile"] .picker-item-row {
    flex-direction: column; align-items: stretch; padding: 0; gap: 0;
}
.picker-list[data-view="tile"] .picker-item-thumb { flex: none; width: 100%; border-radius: 0; }
.picker-list[data-view="tile"] .picker-item-text { padding: var(--space-2); }
.picker-list[data-view="tile"] .picker-item-thumb .duration-badge {
    font-size: 0.68rem; padding: 2px var(--space-2);
    bottom: var(--space-1); right: var(--space-1);
}
/* Compact grid view */
.picker-list[data-view="compact"] { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.picker-list[data-view="compact"] .picker-item { border-radius: var(--radius-sm); }
.picker-list[data-view="compact"] .picker-item-row {
    flex-direction: column; align-items: stretch; padding: 0; gap: 0;
}
.picker-list[data-view="compact"] .picker-item-thumb { flex: none; width: 100%; border-radius: 0; }
.picker-list[data-view="compact"] .picker-item-text { padding: var(--space-1) var(--space-2); }
.picker-list[data-view="compact"] .picker-item-title { font-size: 0.68rem; -webkit-line-clamp: 1; }
.picker-list[data-view="compact"] .picker-item-source { font-size: 0.6rem; }
.picker-list[data-view="compact"] .picker-item-thumb .duration-badge {
    font-size: 0.58rem; padding: 1px var(--space-1);
    bottom: 2px; right: 2px;
}
.picker-status {
    text-align: center; padding: var(--space-4);
    color: var(--text-dim); font-size: 0.85rem;
}

/* Edit range section (shares the card look with .range-selector above) */
.edit-range-section { margin-top: var(--space-4); }
.edit-range-section .range-track-wrapper { padding: var(--space-5) 0 var(--space-3); }
.edit-range-actions { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.edit-range-actions .btn { flex: 1 1 0; }
.edit-title-group { margin-top: var(--space-3); }
.edit-title-group label { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
.edit-title-group .clip-title-row { margin: var(--space-1) 0 0; }

/* Embed modal */
.embed-modal { margin-top: var(--space-3); }
.embed-modal-content {
    background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3);
}
.embed-modal-content h3 { margin-bottom: 0; }
.embed-size-select {
    min-height: var(--tap-min); padding: var(--space-2) var(--space-3);
    border: 1.5px solid var(--border); border-radius: var(--radius-md);
    background: var(--bg-inset); color: var(--text); font-size: 16px; font-family: inherit;
}
.embed-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem;
    padding: var(--space-3); border: 1.5px solid var(--border);
    border-radius: var(--radius-md); resize: none; background: var(--bg-inset); color: var(--text);
}
.embed-size-select:focus, .embed-code:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 4px var(--accent-soft); }

/* Ad slots */
.ad-slot { margin-top: var(--space-4); }
.ad-placeholder {
    background: var(--bg-surface); border: 2px dashed var(--border); border-radius: var(--radius-lg);
    padding: var(--space-5); text-align: center; color: var(--text-muted); font-size: 0.85rem;
}
.ad-leaderboard .ad-placeholder { min-height: 90px; }
.ad-sidebar .ad-placeholder { min-height: 250px; width: 300px; }
.clip-sidebar { padding-top: 0; }
.pause-ad { margin-top: var(--space-3); }

/* Interstitial */
.interstitial {
    position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.9);
    display: flex; align-items: center; justify-content: center; flex-direction: column;
}
.interstitial-video { max-width: 100%; max-height: 60vh; }
.interstitial-skip {
    position: absolute;
    top: calc(var(--space-5) + env(safe-area-inset-top, 0px)); right: var(--space-5);
}

/* === My Clips Grid === */
.clips-search-row { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.input-search {
    flex: 1; min-width: 0;
    padding: var(--space-3) var(--space-4) var(--space-3) 42px;
    border: 1.5px solid var(--border); border-radius: var(--radius-full);
    font-size: 16px; font-family: inherit;
    /* Magnifier drawn in, so no search field needs extra markup. */
    background: var(--bg-inset) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") 15px 50% / 17px no-repeat;
    color: var(--text);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.input-search:focus { border-color: var(--accent); outline: none; background-color: var(--bg-surface); box-shadow: 0 0 0 4px var(--accent-soft); }
.input-search::-webkit-search-cancel-button { cursor: pointer; }
/* Name fields that borrow .input-search's look but are not searches. */
.playlist-new-form .input-search { padding-left: var(--space-4); background-image: none; }
.clips-search-count { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
.btn-shuffle {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; padding: 0;
    border: 1.5px solid var(--border); border-radius: 50%;
    background: var(--bg-elevated); color: var(--text-muted); cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out);
}
.btn-shuffle:active { transform: scale(0.88); }
.btn-shuffle:hover { border-color: var(--accent); color: var(--accent); }
.btn-shuffle.is-active { background: var(--accent-strong); border-color: transparent; color: #fff; box-shadow: var(--shadow-glow); }
.clips-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3); margin-top: var(--space-4);
    /* Paging scrolls the grid back into view; keep it clear of the sticky header. */
    scroll-margin-top: calc(var(--header-h) + var(--space-4));
}
.clip-card {
    border: 1.5px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
    position: relative; background: var(--bg-elevated);
    box-shadow: var(--shadow-1);
    /* Skip layout and paint for cards below the fold in a long library. */
    content-visibility: auto; contain-intrinsic-size: auto 210px;
    transition: box-shadow var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-spring),
                border-color var(--dur-fast) var(--ease-out);
}
.clip-card:active { transform: scale(0.97); }
.clip-card-link { display: block; text-decoration: none; color: inherit; }
.clip-thumb { position: relative; aspect-ratio: 16/9; background: var(--bg-inset); overflow: hidden; }
.clip-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms var(--ease-out); }
.thumb-placeholder { width: 100%; height: 100%; background: var(--bg-inset); }
.duration-badge {
    position: absolute; bottom: var(--space-2); right: var(--space-2);
    background: rgba(10,8,16,0.66); color: #fff; padding: 2px var(--space-2);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: var(--radius-full); font-size: 0.7rem; font-weight: 600;
    font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.clip-card-info { padding: var(--space-3); }
.clip-card-title {
    font-size: 0.86rem; font-weight: 600; margin-bottom: var(--space-1); color: var(--text-heading);
    font-family: 'Inter', system-ui, sans-serif; line-height: 1.35; letter-spacing: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.clip-card-source { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip-card-date { font-size: 0.7rem; color: var(--text-dim); }
.clip-delete-form { position: absolute; top: var(--space-1); right: var(--space-1); }
/* A 44px target, drawn as a smaller glass disc (the ::before) so it does not
   swallow a phone-width thumbnail. */
.btn-delete {
    position: relative; isolation: isolate;
    width: var(--tap-min); height: var(--tap-min); border-radius: 50%; border: none;
    background: transparent; color: #fff;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: transform var(--dur-fast) var(--ease-spring);
}
.btn-delete::before {
    content: ''; position: absolute; inset: 7px; z-index: -1; border-radius: 50%;
    background: rgba(10,8,16,0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
    transition: background-color var(--dur-fast) var(--ease-out);
}
.btn-delete:active { transform: scale(0.86); }
.btn-delete:active::before { background: var(--error); }
.empty-state {
    text-align: center; padding: var(--space-7) var(--space-4); color: var(--text-muted);
    margin-top: var(--space-4);
    border: 1.5px dashed var(--border-light); border-radius: var(--radius-xl);
    background: var(--bg-surface);
    background: color-mix(in srgb, var(--bg-surface) 60%, transparent);
}
.empty-state h2 { color: var(--text-heading); }
.empty-state .btn { margin-top: var(--space-4); }

/* === Pagination === */
.pagination {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: var(--space-2); margin-top: var(--space-5);
}
.pagination-pages { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.pagination-btn {
    min-width: var(--tap-min); height: var(--tap-min); padding: 0 var(--space-2);
    display: inline-flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--border); border-radius: var(--radius-full);
    background: var(--bg-elevated); color: var(--text); cursor: pointer;
    font-family: inherit; font-size: 0.85rem; font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
.pagination-btn:active:not(:disabled) { transform: scale(0.9); }
.pagination-btn:hover:not(:disabled):not(.is-current) { border-color: var(--accent); color: var(--accent); }
.pagination-btn.is-current { background: var(--accent-strong); border-color: transparent; color: #fff; cursor: default; box-shadow: var(--shadow-glow); }
.pagination-btn:disabled { opacity: 0.4; cursor: default; }
.pagination-gap { color: var(--text-muted); padding: 0 var(--space-1); }

/* === FAQ === */
.faq-page { max-width: 720px; }
.faq-list { display: flex; flex-direction: column; gap: var(--space-2); }
.faq-item {
    border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-4);
    background: var(--bg-elevated);
    transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.faq-item[open] { border-color: var(--accent-line); box-shadow: 0 10px 28px -16px var(--accent-glow); }
.faq-item summary {
    cursor: pointer; font-weight: 600; color: var(--text-heading);
    font-size: 0.95rem; list-style: none;
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    min-height: var(--tap-min);
}
.faq-item summary::-webkit-details-marker { display: none; }
/* One glyph that turns into an x, rather than swapping + for -. */
.faq-item summary::after {
    content: '+'; flex: 0 0 auto;
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft); color: var(--accent);
    font-weight: 500; font-size: 1.2rem; line-height: 1;
    transition: transform var(--dur-base) var(--ease-spring), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(45deg); background: var(--accent-strong); color: #fff; }
.faq-item p { margin: var(--space-1) 0 var(--space-3); color: var(--text-muted); font-size: 0.9rem; }
.faq-note { margin-top: var(--space-6); font-size: 0.85rem; color: var(--text-muted); }

/* Account deletion form */
.cancel-form { display: flex; flex-direction: column; gap: var(--space-3); max-width: 420px; margin: var(--space-4) 0; }
.cancel-form label { font-size: 0.9rem; color: var(--text-muted); }
.cancel-form .btn { align-self: flex-start; }
.cancel-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.legal-page .cookie-table-wrap { overflow-x: auto; }

/* Error pages. */
.status-page { text-align: center; padding-top: var(--space-7); }
.page-section.status-page > h1 {
    display: inline-block; margin-bottom: var(--space-3);
    font-size: clamp(2rem, 7vw, 3rem); letter-spacing: -0.035em;
    color: var(--accent); padding-bottom: 0.05em;
}
.status-text { max-width: 480px; margin: 0 auto var(--space-4); color: var(--text-muted); }
.status-code {
    display: inline-block; margin-bottom: var(--space-5);
    padding: 3px var(--space-3); border-radius: var(--radius-full);
    background: var(--accent-soft); color: var(--accent);
    font-size: 0.78rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.status-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-2); }

/* === Settings === */
.settings-card {
    max-width: 640px; border: 1px solid var(--border); border-radius: var(--radius-xl);
    padding: var(--space-5); background: var(--bg-elevated); box-shadow: var(--shadow-1);
}
.settings-row { display: flex; align-items: center; gap: var(--space-4); }
.settings-avatar .avatar-lg { box-shadow: 0 0 0 3px var(--bg-elevated), 0 0 0 5px var(--accent-soft); }
.settings-details { min-width: 0; }
.settings-details p { margin: 2px 0; overflow: hidden; text-overflow: ellipsis; }
.settings-details strong { color: var(--text-heading); font-size: 1.05rem; }
.settings-section { margin-top: var(--space-4); }
.settings-section > * + * { margin-top: var(--space-2); }
.settings-note { color: var(--text-muted); font-size: 0.9rem; }

/* === Legal === */
.legal-page { max-width: 720px; }
.legal-page h2 { margin-top: var(--space-6); }
.legal-page h3 { margin-top: var(--space-4); }
.legal-page p { margin-top: var(--space-2); color: var(--text); }
.legal-page ul, .legal-page ol { margin-top: var(--space-2); padding-left: var(--space-5); }
.legal-page li { margin-top: var(--space-1); }
.legal-page li::marker { color: var(--accent); }
.legal-note { color: var(--error); font-size: 0.85rem; }
/* A short accent bar over each section heading. */
.legal-page h2::before, .home-copy h2::before {
    content: ''; display: block; width: 32px; height: 4px; margin-bottom: var(--space-3);
    border-radius: var(--radius-full); background: var(--accent-strong);
}
.cookie-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-md); }
.cookie-table { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 0.85rem; }
.cookie-table th, .cookie-table td { border-bottom: 1px solid var(--border); padding: var(--space-2) var(--space-3); text-align: left; }
.cookie-table th + th, .cookie-table td + td { border-left: 1px solid var(--border); }
.cookie-table tr:last-child td { border-bottom: none; }
.cookie-table th { background: var(--bg-inset); font-weight: 600; color: var(--text-heading); }

/* === Footer === */
.site-footer { position: relative; margin-top: auto; background: var(--bg-header); }
.site-footer::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: var(--border);
}
.footer-inner { max-width: 1200px; margin: 0 auto; padding: var(--space-5) var(--space-4); text-align: center; }
.footer-links { display: flex; gap: var(--space-1) var(--space-2); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-3); }
.footer-links a {
    color: var(--text-muted); font-size: 0.85rem; min-height: 36px; display: inline-flex; align-items: center;
    padding: 0 var(--space-3); border-radius: var(--radius-full);
    transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
/* § 312k BGB: plainly legible, so it gets an outline rather than the quiet look. */
.footer-copy { font-size: 0.8rem; color: var(--text-dim); }

/* === Consent Banner === */
.consent-banner {
    position: fixed; left: 0; right: 0; z-index: 500;
    /* Sits above the tab bar, never behind it. */
    bottom: calc(var(--tabbar-h) + var(--safe-b));
    background: var(--bg-elevated);
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border-top: 1px solid var(--border-light);
    box-shadow: 0 -8px 30px var(--card-shadow);
}
.consent-inner {
    max-width: 900px; margin: 0 auto;
    padding: var(--space-4) calc(var(--space-4) + var(--safe-r)) var(--space-4) calc(var(--space-4) + var(--safe-l));
    display: flex; flex-direction: column; gap: var(--space-3); text-align: center;
}
.consent-inner p { font-size: 0.85rem; }
.consent-actions { display: flex; gap: var(--space-2); align-items: center; justify-content: center; flex-wrap: wrap; }

/* === Modal === */
/* A centred dialog for things the user has to read before carrying on. Sits above the account sheet (700/701) and the
   toasts (800), below the interstitial (1000) and the pocket lock. */
.modal-backdrop {
    position: fixed; inset: 0; z-index: 900;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.modal-backdrop.is-open { opacity: 1; }
.modal {
    position: fixed; z-index: 901;
    left: 50%; top: 50%;
    width: calc(100% - 2 * var(--space-4));
    max-width: 400px;
    max-height: 80dvh; overflow-y: auto;
    /* Translucent, so the page stays visible behind it -- the dialog reads as a
       pause, not a new page. The opaque line is the fallback wherever
       color-mix() is not supported. */
    background: var(--bg-elevated);
    background: color-mix(in srgb, var(--bg-elevated) 90%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-3);
    padding: var(--space-6) var(--space-4) var(--space-4);
    text-align: center;
    transform: translate(-50%, -50%) scale(0.92);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring);
}
/* An accent bar across the top edge. */
.modal::before {
    content: ''; position: absolute; top: 0; left: var(--space-6); right: var(--space-6); height: 3px;
    border-radius: 0 0 var(--radius-full) var(--radius-full); background: var(--accent);
}
.modal.is-open { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.modal-title { font-size: 1.2rem; margin-bottom: var(--space-2); }
.modal-text {
    font-size: 0.9rem; line-height: 1.55; color: var(--text-muted);
    margin-bottom: var(--space-5);
}
.modal-actions { display: flex; flex-direction: column; gap: var(--space-2); }
.modal-actions .btn { width: 100%; }

/* === Toast === */
.toast-container {
    position: fixed; z-index: 800;
    left: calc(var(--space-4) + var(--safe-l)); right: calc(var(--space-4) + var(--safe-r));
    bottom: var(--bottom-offset);
    display: flex; flex-direction: column; gap: var(--space-2); align-items: center;
    pointer-events: none;
}
.toast {
    display: flex; align-items: center; gap: var(--space-2);
    max-width: 100%;
    background: rgba(18,14,26,0.9); color: #fff; padding: var(--space-3) var(--space-4);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-lg); font-size: 0.875rem; font-weight: 500;
    animation: toastIn var(--dur-base) var(--ease-spring);
    box-shadow: 0 16px 40px -12px rgba(0,0,0,0.55);
}
.toast::before {
    content: ''; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent-strong); box-shadow: 0 0 10px var(--accent-glow);
}
.toast.fade-out { animation: toastOut var(--dur-base) var(--ease-out) forwards; }
@keyframes toastIn { from { transform: translateY(14px) scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(6px) scale(0.98); } }

/* === Error state === */
.error-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #120E19; color: #A49BB3; padding: var(--space-6); text-align: center;
}
.error-state p { margin: var(--space-1) 0; }

/* === Page Section === */
.page-section { padding: var(--space-4) 0; }
:where(.page-section) > h1:first-child { font-size: clamp(1.85rem, 5vw, 2.5rem); }

/* === Pocket Lock === */
.lock-overlay {
    position: fixed; inset: 0; z-index: 2147483647; background: #000;
    touch-action: none; overscroll-behavior: none;
    user-select: none; -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}
body.is-locked { overflow: hidden; }

.lock-hotspot {
    position: absolute;
    right: calc(var(--space-5) + var(--safe-r));
    bottom: calc(var(--space-5) + var(--safe-b));
    width: 64px; height: 64px; padding: 0; border: none;
    border-radius: 50%; background: none; color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; touch-action: none;
    /* barely lit: findable by a deliberate finger, near-free in a pocket */
    opacity: 0.12; transition: opacity var(--dur-fast) linear;
}
.lock-hotspot.is-holding { opacity: 1; }

.lock-ring {
    position: absolute; inset: 0; width: 100%; height: 100%;
    transform: rotate(-90deg);
}
.lock-ring-track, .lock-ring-fill { fill: none; stroke-width: 3; }
.lock-ring-track { stroke: rgba(255,255,255,0.25); }
.lock-ring-fill {
    stroke: #fff; stroke-linecap: round;
    stroke-dasharray: 132; stroke-dashoffset: 132; /* 2*PI*21 */
}
.lock-hotspot.is-holding .lock-ring-fill {
    stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s linear;
}
.lock-hotspot-icon { position: relative; font-size: 20px; line-height: 1; }

/* ==========================================================================
   Desktop layer
   ========================================================================== */
@media (min-width: 768px) {
    :root {
        --header-h: 64px;
        --tabbar-h: 0px;
        --bottom-offset: 80px;
    }

    body { padding-bottom: 0; }

    /* Tab bar and sheet are mobile-only. */
    .tabbar, .sheet, .sheet-backdrop { display: none !important; }

    .header-inner { padding: 0 var(--space-5); gap: var(--space-5); }
    .logo { font-size: 1.4rem; }
    .nav-links { display: flex; }
    .site-header .theme-picker { display: flex; margin-left: auto; gap: 2px; }
    .site-header .theme-swatch { width: 30px; height: 30px; }
    .site-header .theme-swatch > span { width: 20px; height: 20px; }
    .site-header .mode-toggle { width: 34px; height: 34px; margin-left: var(--space-2); }
    .site-header .mode-toggle svg { width: 17px; height: 17px; }
    .auth-area { margin-left: var(--space-4); }

    .main-content { padding: var(--space-5) var(--space-5) var(--space-7); }

    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.15rem; }
    .hero { padding: var(--space-7) 0 var(--space-6); }
    .hero-sub { font-size: 1.15rem; }

    .btn-lg { width: auto; }

    /* One capsule: the input and its buttons share a single rounded field. */
    .url-input-row, .import-row {
        flex-wrap: nowrap; gap: var(--space-2); align-items: center;
        padding: 6px; border-radius: var(--radius-full);
        background: var(--bg-elevated); border: 1.5px solid var(--border);
        box-shadow: var(--shadow-2);
        transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
    }
    .url-input-row:focus-within, .import-row:focus-within {
        border-color: var(--accent); box-shadow: var(--shadow-2), 0 0 0 4px var(--accent-soft);
    }
    .url-input-row .input-url, .import-row .input-url {
        flex: 1 1 auto; min-height: 46px; border: none; background: transparent;
        padding: var(--space-2) var(--space-4); font-size: 1rem;
    }
    .url-input-row .input-url:focus, .import-row .input-url:focus { box-shadow: none; background: transparent; }
    .url-input-row .btn, .import-row .btn { flex: 0 0 auto; min-height: 46px; }
    .import-row { margin-top: var(--space-3); }

    .player-wrapper { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
    .poster-overlay .play-btn-overlay { width: 76px; height: 76px; top: auto; }
    .custom-controls { flex-wrap: nowrap; gap: var(--space-3); padding: var(--space-2) var(--space-4); }
    .ctrl-btn { min-width: 38px; min-height: 38px; }
    .scrubber-track { flex: 1 1 0; order: 0; height: 6px; }
    .time-display { flex: 0 0 auto; }
    .scrubber-thumb { width: 14px; height: 14px; transform: translate(-50%, -50%) scale(0.85); }
    .scrubber-track:hover .scrubber-thumb, .scrubber-track:active .scrubber-thumb { transform: translate(-50%, -50%) scale(1.15); }
    .time-display { font-size: 0.8rem; min-width: 80px; text-align: right; }
    .volume-wrap { margin-left: var(--space-2); }
    .volume-slider { display: block; }

    .range-selector, .edit-range-section { padding: var(--space-5); }
    .range-track { height: 8px; }
    .range-hi::after { height: 8px; }
    .range-handle { width: 28px; height: 28px; }
    .range-handle::after { width: 8px; height: 22px; }
    .range-track-wrapper { padding: var(--space-4) 0; }

    /* The mobile track zoom never applies here, not even on a touch laptop with a
       wide window: kill the class outright rather than trusting the JS gate. */
    .range-track-wrapper.is-zoomed {
        overflow: visible; touch-action: none; padding: var(--space-4) 0;
    }
    .range-track-wrapper.is-zoomed .range-track { width: auto !important; touch-action: none; }
    .range-track-wrapper.is-zoomed .range-handle,
    .range-track-wrapper.is-zoomed .range-hi { pointer-events: none; }
    .zoom-info { display: none !important; }
    .range-inputs { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
    .nudge-row { flex: 0 0 auto; }
    .time-input { flex: 0 0 auto; width: 96px; }
    /* Markup leads with the duration so it is the headline on mobile; on desktop it
       goes back between Start and End. */
    .range-inputs .range-input-group { order: 0; }
    .range-inputs .range-duration { order: 1; }
    .range-inputs .range-input-group + .range-input-group { order: 2; }
    .range-input-group { flex-direction: column; align-items: center; gap: var(--space-1); }
    .range-input-group label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
    .range-duration { font-size: 1.9rem; padding-bottom: var(--space-1); align-self: flex-end; }
    .time-input { width: 92px; font-size: 0.9rem; padding: var(--space-2); }
    .nudge-btn { width: 32px; height: 32px; font-size: 1rem; }
    .toggle-track { width: 42px; height: 24px; }
    .toggle-knob { width: 18px; height: 18px; top: 3px; left: 3px; }

    .input-title { font-size: 0.95rem; padding: var(--space-2) var(--space-4); min-height: 44px; }
    .input-search { font-size: 0.95rem; max-width: 380px; flex: 1; padding: var(--space-2) var(--space-4) var(--space-2) 40px; min-height: 42px; }
    .playlist-new-form .input-search { padding-left: var(--space-4); }
    .embed-size-select { font-size: 0.9rem; min-height: 0; }

    .clip-page-layout { display: block; max-width: 50vw; margin: 0 auto; }
    .clip-page-layout:has(.clip-sidebar) { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-5); max-width: 1100px; }
    .clip-sidebar { display: block; }
    .clip-title { font-size: 1.75rem; }
    .clip-actions { flex-direction: row; flex-wrap: wrap; gap: var(--space-2); }
    .clip-actions .btn { width: auto; }
    .clip-picker { max-width: 100%; }
    .picker-list { max-height: 420px; }
    .picker-view-btn { width: 34px; height: 28px; }
    .clip-picker-toolbar .btn-shuffle { width: 36px; height: 36px; }
    .picker-list[data-view="compact"] { grid-template-columns: repeat(4, 1fr); }
    .picker-item-thumb { flex: 0 0 100px; width: 100px; }
    .picker-item-title { font-size: 0.85rem; }
    .clip-picker-toolbar .input-search { font-size: 0.95rem; max-width: 300px; }
    .edit-range-actions .btn { flex: 0 0 auto; }

    .clips-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-5); }
    .clip-card { contain-intrinsic-size: auto 250px; }
    .clip-card-title { font-size: 0.95rem; -webkit-line-clamp: 2; }
    .clip-card-source { font-size: 0.8rem; }
    .clip-card-date { font-size: 0.75rem; }
    .clip-card-info { padding: var(--space-3) var(--space-4) var(--space-4); }
    .clip-delete-form { top: var(--space-2); right: var(--space-2); }
    .btn-delete { width: 32px; height: 32px; }
    .btn-delete::before { inset: 0; }

    .interstitial-video { max-width: 640px; max-height: 360px; }

    /* Floating card instead of a full-width strip. */
    .consent-banner {
        left: 50%; right: auto; bottom: var(--space-4);
        width: min(960px, calc(100% - 2 * var(--space-5)));
        transform: translateX(-50%);
        border: 1px solid var(--border-light); border-radius: var(--radius-xl);
        box-shadow: var(--shadow-3);
    }
    .consent-inner { flex-direction: row; align-items: center; text-align: left; gap: var(--space-4); padding: var(--space-4) var(--space-5); }
    .consent-inner p { flex: 1; font-size: 0.9rem; min-width: 200px; }
    .consent-actions { justify-content: flex-start; }

    .modal { padding: var(--space-6) var(--space-5) var(--space-5); }
    .modal-actions { flex-direction: row-reverse; justify-content: center; flex-wrap: wrap; }
    .modal-actions .btn { width: auto; flex: 1 1 auto; }

    .toast-container { left: auto; right: var(--space-5); bottom: var(--bottom-offset); align-items: flex-end; }
    .toast { text-align: left; padding: var(--space-3) var(--space-4); font-size: 0.85rem; }

    .footer-inner { padding: var(--space-6) var(--space-5); }
}

/* ==========================================================================
   Hover layer -- only for devices that can actually hover. On touch these rules
   stick after a tap, which reads as a stuck state.
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
    a:hover { text-decoration: underline; text-underline-offset: 3px; }
    .btn:hover { text-decoration: none; }
    .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 32px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.22); filter: saturate(1.1) brightness(1.05); }
    .btn-primary:hover:active { transform: scale(0.97); }
    .btn-outline:hover {
        color: var(--text-heading); border-color: var(--accent-strong);
        background: var(--bg-elevated);
    }
    .btn-disabled:hover { transform: none; }
    .nav-links a:hover { color: var(--text-heading); background: var(--bg-elevated); text-decoration: none; }
    .nav-links a.is-active:hover { background: var(--accent-soft); }
    .user-dropdown a:hover { background: var(--accent-soft); text-decoration: none; }
    .user-menu-trigger:hover .avatar, .user-menu-trigger:hover .avatar-placeholder { box-shadow: 0 0 0 2px var(--bg-header), 0 0 0 4px var(--accent); }
    .sheet-link:hover { background: var(--accent-soft); text-decoration: none; }
    .play-btn-overlay:hover { transform: scale(1.08); }
    .ctrl-btn:hover { background: rgba(255,255,255,0.1); }
    .speed-btn.is-modified:hover { background: var(--accent-strong); filter: brightness(1.1); }
    .clip-card:hover {
        transform: translateY(-4px);
        border-color: var(--accent-strong);
        background: var(--bg-elevated);
        box-shadow: var(--shadow-2), 0 18px 40px -18px var(--accent-glow);
    }
    .clip-card:hover:active { transform: translateY(-1px) scale(0.99); }
    .clip-card:hover .clip-thumb img { transform: scale(1.06); }
    .picker-item:hover { background: var(--accent-soft); text-decoration: none; }
    .picker-view-btn:hover:not(.is-active) { color: var(--text-heading); background: var(--bg-elevated); }
    .precision-btn:hover:not(.is-active) { color: var(--text-heading); }
    .btn-delete:hover::before { background: var(--error); }
    .range-track-wrapper.is-zoomed .range-handle:hover::after { transform: scale(1.15); }
    .nudge-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
    .theme-swatch:hover > span { transform: scale(1.12); }
    .mode-toggle:hover { color: var(--text-heading); border-color: var(--accent-line); }
    .tab-item:hover { color: var(--text); }
    .logo:hover { text-decoration: none; }
    .logo:hover::before { transform: rotate(-8deg) scale(1.06); }
    .faq-item:hover:not([open]) { border-color: var(--border-light); }
    .footer-links a:hover { color: var(--text-heading); background: var(--bg-elevated); text-decoration: none; }
}

/* === Playlists === */
/* The Playlist tab, a playlist's own page, and the add-to-playlist dialog.
   Built from the pieces already here -- .clip-card, .picker-item-thumb, .modal --
   so a playlist reads as part of the library, not beside it. */

/* A playlist card's delete button, in the corner a clip card uses for its own. */
.clip-card-actions { position: absolute; top: var(--space-1); right: var(--space-1); }

/* Add to playlist, bottom-right of a My Clips card: off the thumbnail, so it
   can never cover the duration badge. The two text lines
   beside it keep clear of it. */
.btn-card-add {
    position: absolute; right: var(--space-1); bottom: var(--space-1);
    width: var(--tap-min); height: var(--tap-min); border-radius: 50%;
    border: none; background: transparent; color: var(--text-muted);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
.btn-card-add:active { transform: scale(0.86); color: var(--accent); background: var(--accent-soft); }
.clip-card.has-card-add .clip-card-source,
.clip-card.has-card-add .clip-card-date { padding-right: 36px; }

/* Round icon buttons: a playlist row's move and remove controls. */
.btn-card-action {
    width: var(--tap-min); height: var(--tap-min); border-radius: 50%; border: none;
    background: rgba(10,8,16,0.55); color: #fff; font-size: 1rem; line-height: 1;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
.btn-card-action:active { transform: scale(0.86); background: var(--accent); }

/* The tab's own page */
.playlist-new-form { display: flex; align-items: center; gap: var(--space-2); }
.playlist-new-form .input-search { flex: 1 1 auto; min-width: 0; }
.playlist-create-row { margin-top: var(--space-4); }
.playlist-placeholder {
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-inset); color: var(--accent);
}

/* One playlist */
.playlist-back {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: 0.85rem; font-weight: 500; color: var(--text-muted);
    margin-bottom: var(--space-2); text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}
.playlist-back:hover { color: var(--accent); text-decoration: none; }
.playlist-name { overflow-wrap: anywhere; }
.playlist-rename-form { margin: var(--space-2) 0; }
.playlist-meta { font-size: 0.85rem; color: var(--text-muted); margin-top: var(--space-1); }
.playlist-actions {
    display: flex; flex-wrap: wrap; gap: var(--space-2);
    margin: var(--space-4) 0;
}
.playlist-actions .btn { flex: 1 1 auto; }

.playlist-items {
    list-style: none; margin: 0; padding: var(--space-1);
    counter-reset: playlist-row;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--bg-elevated); box-shadow: var(--shadow-1); overflow: hidden;
}
.playlist-items:empty { display: none; }
.playlist-row {
    display: flex; align-items: center; gap: var(--space-2);
    padding-right: var(--space-2);
    border-radius: var(--radius-md);
    counter-increment: playlist-row;
    transition: background-color var(--dur-fast) var(--ease-out);
}
.playlist-row + .playlist-row { box-shadow: 0 -1px 0 var(--border); }
.playlist-row-link {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    text-decoration: none; color: inherit;
}
.playlist-row-link:active { background: var(--accent-soft); }
/* Numbered by a counter, not in the markup, so a reorder renumbers itself. */
.playlist-row-num::before {
    content: counter(playlist-row);
    display: inline-block; min-width: 1.4em; text-align: right;
    font-family: var(--font-display); font-size: 0.85rem; color: var(--accent); font-variant-numeric: tabular-nums;
}
.playlist-row .picker-item-source,
.playlist-add-item .picker-item-source { display: block; }
/* A clip with no thumbnail still shows where one would be. */
.playlist-row .picker-item-thumb,
.playlist-add-item .picker-item-thumb { background: var(--bg-inset); }
/* Phone first: no row number, a smaller thumbnail, and up/down stacked beside
   remove, so the title keeps enough width to be read at 360px. Desktop lays
   them out in a line (below). */
.playlist-row-num { display: none; }
.playlist-row .picker-item-thumb { flex-basis: 64px; width: 64px; }
.playlist-row-controls {
    flex: 0 0 auto;
    display: grid; grid-template-columns: auto auto; gap: 4px;
}
.playlist-row-controls [data-move="up"] { grid-column: 1; grid-row: 1; }
.playlist-row-controls [data-move="down"] { grid-column: 1; grid-row: 2; }
.playlist-row-controls [data-remove] { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.playlist-row-controls .btn-card-action {
    width: 36px; height: 36px;
    background: var(--bg-surface); color: var(--text-muted);
    border: 1.5px solid var(--border);
}
.playlist-row-controls .btn-card-action:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.playlist-row-controls .btn-card-remove:hover { color: var(--error); border-color: var(--error); background: transparent; }
.playlist-row-controls .btn-card-action:active { background: var(--accent-soft); }
.playlist-row-controls .btn-card-remove:active { background: var(--error); border-color: var(--error); color: #fff; }
/* Nothing above the first row or below the last. Hidden rather than removed,
   so the controls keep their columns and the rows stay aligned. */
.playlist-row:first-child [data-move="up"],
.playlist-row:last-child [data-move="down"] { visibility: hidden; }

/* The "Add clips" picker on a playlist's page */
.playlist-add-picker {
    border: 1px solid var(--accent-line); border-radius: var(--radius-lg);
    background: var(--bg-elevated); box-shadow: var(--shadow-2);
    padding: var(--space-3); margin-bottom: var(--space-4);
}
.playlist-add-picker .clips-search-row { margin-top: 0; }
.playlist-add-list {
    list-style: none; margin: var(--space-2) 0 0; padding: 0;
    max-height: 50vh; overflow-y: auto;
}
.playlist-add-item {
    display: flex; align-items: center; gap: var(--space-3); width: 100%;
    padding: var(--space-2); min-height: var(--tap-min);
    background: none; border: none; border-radius: var(--radius-md);
    color: inherit; font: inherit; text-align: left; cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out);
}
.playlist-add-item:hover { background: var(--accent-soft); }
.playlist-add-state {
    flex: 0 0 auto; font-size: 0.75rem; font-weight: 600;
    padding: 5px var(--space-3); border-radius: var(--radius-full);
    border: 1.5px solid var(--border); color: var(--text-muted);
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.playlist-add-item[aria-pressed="true"] .playlist-add-state {
    background: var(--accent-strong); border-color: transparent; color: #fff;
}

/* The add-to-playlist dialog. .modal gives it the look; this makes it a list. */
.playlist-dialog { text-align: left; }
.playlist-dialog-clip {
    font-size: 0.85rem; color: var(--text-muted); margin-bottom: var(--space-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.playlist-dialog-status { font-size: 0.85rem; color: var(--text-muted); margin-bottom: var(--space-3); }
.playlist-dialog-list {
    list-style: none; margin: 0 0 var(--space-3); padding: 0;
    max-height: 40vh; overflow-y: auto;
}
.playlist-toggle {
    display: flex; align-items: center; gap: var(--space-3); width: 100%;
    min-height: var(--tap-min); padding: var(--space-2);
    background: none; border: none; border-radius: var(--radius-md);
    color: var(--text); font: inherit; text-align: left; cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out);
}
.playlist-toggle:hover { background: var(--accent-soft); }
.playlist-toggle-check {
    flex: 0 0 22px; width: 22px; height: 22px; border-radius: 7px;
    border: 1.5px solid var(--border-light); position: relative;
    transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-spring);
}
.playlist-toggle:active .playlist-toggle-check { transform: scale(0.85); }
.playlist-toggle[aria-pressed="true"] .playlist-toggle-check { background: var(--accent-strong); border-color: transparent; }
.playlist-toggle[aria-pressed="true"] .playlist-toggle-check::after {
    content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.playlist-toggle-name {
    flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 0.9rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.playlist-toggle-meta { flex: 0 0 auto; font-size: 0.75rem; color: var(--text-muted); }
.playlist-dialog .playlist-new-form { margin-bottom: var(--space-3); }

/* The clip page's picker header, in playlist context */
.clip-picker-header .clip-picker-back {
    margin-left: auto; font-size: 0.78rem; font-weight: 600; color: var(--accent); text-decoration: none;
    padding: 3px var(--space-3); border-radius: var(--radius-full); background: var(--accent-soft);
}
.clip-picker-header .clip-picker-back:hover { text-decoration: none; filter: brightness(1.1); }

@media (min-width: 768px) {
    .playlist-actions .btn { flex: 0 0 auto; }
    /* The corner the desktop rules above move .clip-delete-form to. */
    .clip-card-actions { top: var(--space-2); right: var(--space-2); }
    .btn-card-add { width: 36px; height: 36px; right: var(--space-2); bottom: var(--space-2); }
    .btn-card-add:hover { color: var(--accent); background: var(--accent-soft); }
    .playlist-row-num { display: inline; }
    .playlist-row .picker-item-thumb { flex-basis: 80px; width: 80px; }
    .playlist-row-controls { display: flex; gap: var(--space-1); }
    .playlist-row:hover { background: var(--accent-soft); }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .btn:active, .ctrl-btn:active, .clip-card:active, .btn-delete:active, .btn-card-action:active,
    .btn-card-add:active, .btn-shuffle:active, .pagination-btn:active, .picker-item:active,
    .nudge-btn:active, .theme-swatch:active > span, .play-btn-overlay:active, .mode-toggle:active,
    .playlist-toggle:active .playlist-toggle-check,
    .tab-item:active .tab-icon, .tab-item:active .tab-avatar {
        transform: none;
    }
    .play-btn-overlay::after { animation: none; opacity: 0; }
    .btn-primary:hover, .btn-primary:hover:active, .clip-card:hover, .clip-card:hover:active,
    .clip-card:hover .clip-thumb img, .play-btn-overlay:hover, .theme-swatch:hover > span,
    .logo:hover::before { transform: none; }
    .lock-hotspot.is-holding .lock-ring-fill { transition: none; stroke-dashoffset: 66; }
    .spinner-ring { animation: spin 0.8s linear infinite !important; }
}

/* ---------------------------------------------------------------------------
   Homepage copy below the tool. Server-rendered on purpose: the creator above
   it is built entirely by app.js, so this is all a crawler sees of what the
   product actually is. See templates/index.html.
   --------------------------------------------------------------------------- */
.home-copy {
    max-width: 760px;
    margin: var(--space-7) auto 0;
    padding: 0 var(--space-4) var(--space-7);
    color: var(--text);
    line-height: 1.6;
}
.home-copy h2 {
    margin: var(--space-7) 0 var(--space-3);
    font-size: 1.25rem;
    color: var(--text-heading);
}
.home-copy p { margin: 0 0 var(--space-3); }
.home-copy strong { color: var(--text-heading); }
.home-copy code {
    background: var(--bg-inset); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 0.1em 0.45em;
    font-size: 0.88em; word-break: break-word; color: var(--text-heading);
}
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* One-line "Clips are gone" callout, the answer most visitors arrive wanting. */
.home-banner {
    border: 1px solid var(--accent-line); background: var(--accent-soft);
    border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
}
.home-copy .home-banner h2 { margin: 0 0 var(--space-1); font-size: 1.05rem; }
.home-copy .home-banner h2::before { display: none; }
.home-copy .home-banner p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }
/* Three steps side by side, numbered discs. Stacks on phones. */
.home-copy .steps {
    list-style: none; counter-reset: step; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);
}
.home-copy .steps li {
    counter-increment: step; position: relative;
    padding-left: 40px; min-height: 28px; font-size: 0.95rem; color: var(--text-muted);
}
.home-copy .steps li::before {
    content: counter(step); position: absolute; left: 0; top: 0;
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-strong); color: #fff;
    font-family: var(--font-display); font-size: 0.85rem; line-height: 1;
    box-shadow: 0 6px 16px -6px var(--accent-glow);
}
.feature-grid {
    list-style: none; margin: var(--space-6) 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3);
}
.feature-grid li {
    border: 1px solid var(--border); background: var(--bg-surface);
    border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
}
.feature-grid h3 { margin: 0 0 var(--space-1); font-size: 0.98rem; color: var(--text-heading); }
.home-copy .feature-grid p { margin: 0; font-size: 0.9rem; color: var(--text-muted); }
@media (max-width: 640px) {
    .home-copy .steps { grid-template-columns: 1fr; }
    .feature-grid { grid-template-columns: 1fr; }
}
.home-copy .copy-more { margin-top: var(--space-4); }
.home-copy .faq-list { margin-top: var(--space-3); }

/* ---------------------------------------------------------------------------
   Guides (templates/guides/). Long-form, server-rendered answer pages.
   --------------------------------------------------------------------------- */
.guide {
    max-width: 72ch;
    margin: 0 auto;
    padding: var(--space-5) var(--space-4) var(--space-7);
    line-height: 1.7;
    color: var(--text);
}
.guide h1 { font-size: 1.75rem; line-height: 1.25; margin: var(--space-2) 0 var(--space-2); color: var(--text-heading); }
.guide h2 { font-size: 1.25rem; margin: var(--space-7) 0 var(--space-3); color: var(--text-heading); }
.guide p, .guide ul, .guide ol { margin: 0 0 var(--space-3); }
.guide ul, .guide ol { padding-left: var(--space-5); }
.guide li { margin-bottom: var(--space-2); }
.guide code {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 0.1em 0.4em;
    font-size: 0.88em; word-break: break-word;
}
/* Copy-paste code samples. Scrolls sideways rather than wrapping, so a pasted
   snippet keeps its line breaks, and never widens the page on a phone. */
.guide pre {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4);
    overflow-x: auto; max-width: 100%; line-height: 1.5;
}
.guide pre code {
    background: none; border: 0; padding: 0; font-size: 0.85rem;
    word-break: normal; white-space: pre;
}
.guide-crumbs { font-size: 0.85rem; color: var(--text-muted); }
.guide-crumbs a { color: var(--text-muted); }
.guide-updated { font-size: 0.85rem; color: var(--text-dim); margin-bottom: var(--space-5); }
.guide-lede { font-size: 1.08rem; }
.guide-facts {
    background: var(--bg-card); border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-4) var(--space-2) var(--space-7);
}
.guide-note {
    border-left: 3px solid var(--accent);
    padding: var(--space-2) 0 var(--space-2) var(--space-4);
    color: var(--text-muted); font-size: 0.95rem;
}
/* The table scrolls sideways on a phone instead of widening the page. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 var(--space-3); }
.guide-table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 0.9rem; }
.guide-table th, .guide-table td {
    border-bottom: 1px solid var(--border);
    padding: var(--space-2) var(--space-3);
    text-align: left; vertical-align: top;
}
.guide-table thead th { color: var(--text-heading); font-weight: 600; }
.guide-table tbody th { font-weight: 600; color: var(--text-heading); }
.guide-cta {
    margin: var(--space-7) 0 var(--space-5);
    padding: var(--space-5);
    background: var(--bg-card); border: 1.5px solid var(--border);
    border-radius: var(--radius-md); text-align: center;
}
.guide-cta-title { font-weight: 700; font-size: 1.1rem; color: var(--text-heading); margin-bottom: var(--space-2); }
.guide-related ul, .guide-sources ul { padding-left: var(--space-5); }
.guide-sources { font-size: 0.85rem; color: var(--text-muted); }
.guide-sources h2 { font-size: 1rem; }

.footer-guides {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: var(--space-1) var(--space-2); margin-bottom: var(--space-2);
}
.footer-guides-label { font-size: 0.8rem; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
.footer-guides a {
    color: var(--text-muted); font-size: 0.85rem; min-height: 36px;
    display: inline-flex; align-items: center; padding: 0 var(--space-3);
}