/* mimecam.css — Dark theme for /mimecam page
   Design spec: Tanya Donska (_reports/from-tanya-donska-expert-uix-designer-94.md)
   Palette: same as p.html (--page-bg, --frame-border, etc.) */

:root {
    --page-bg:      #0a0a0a;
    --frame-bg:     #1a1a1a;
    --frame-border: #ff1a75;
    --pink:         #ff1a75;
    --magenta:      #e040fb;
    --pink-light:   #ff6b9d;
    --text-primary: #ffffff;
    --text-dim:     rgba(255,255,255,0.6);
    --text-muted:   rgba(255,255,255,0.4);
    --text-faint:   rgba(255,255,255,0.35);
    --surface:      rgba(255,255,255,0.04);
    --border-subtle:rgba(255,255,255,0.08);
    --radius-card:  20px;
    --radius-btn:   14px;
    /* ---- Feature 6-9 additions ---- */
    --color-accent:      #f5a623;
    --color-accent-soft: rgba(245,166,35,0.15);
    --shadow-low:        0 1px 3px rgba(0,0,0,0.40);
    --shadow-mid:        0 4px 16px rgba(0,0,0,0.50);
    --shadow-high:       0 8px 32px rgba(0,0,0,0.60);
    --radius-sm:         8px;
    --radius-md:         14px;
    --radius-lg:         20px;
    --radius-pill:       999px;
    --radius-sheet:      28px;
    --shadow-amber-soft: 0 0 60px rgba(245, 158, 11, 0.08);
    --shadow-amber-mid:  0 0 32px rgba(245, 158, 11, 0.18);
}

*, *::before, *::after { box-sizing: border-box; }

body, html {
    margin: 0; padding: 0; min-height: 100%;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
    background: var(--page-bg);
    color: var(--text-primary);
    scrollbar-gutter: stable;
}

/* ---- Hero ---- */
.mc-hero {
    text-align: center;
    padding: 60px 20px 24px;
}
.mc-brand {
    font-size: 32px; font-weight: 700;
    letter-spacing: -0.02em; margin: 0;
}
.mc-tagline {
    font-size: 18px; font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--pink); margin: 8px 0 0;
}

/* ---- Example gallery ---- */
.example-gallery {
    display: flex; gap: 12px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 0 24px 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: center;
}
.example-gallery::-webkit-scrollbar { display: none; }

.example-card {
    flex-shrink: 0; width: 140px;
    border: 3px ridge var(--frame-border);
    border-radius: 10px; overflow: hidden;
    background: var(--frame-bg);
    box-shadow: 0 4px 16px rgba(0,0,0,0.40), inset 0 0 0 1px rgba(255,105,180,0.15);
    scroll-snap-align: center;
}
.example-placeholder {
    width: 100%; height: 140px;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}
.prompt-label {
    padding: 6px 8px; font-size: 11px; font-weight: 500;
    color: var(--text-primary); text-align: center;
    background: #000; letter-spacing: 0.03em;
}

/* ---- Pack card ---- */
.pack-card {
    max-width: 400px; margin: 32px auto 0;
    padding: 28px 24px;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    box-shadow: 0 1px 3px rgba(0,0,0,0.20), 0 8px 32px rgba(0,0,0,0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.pack-headline {
    font-size: 20px; font-weight: 600;
    letter-spacing: -0.01em; text-align: center;
}
.pack-price { color: var(--pink); font-weight: 700; }
.pack-desc {
    font-size: 14px; color: var(--text-dim);
    text-align: center; margin: 8px 0 20px;
    line-height: 1.5;
}

/* ---- Gradient CTA button ---- */
.gradient-btn {
    display: flex; align-items: center;
    justify-content: center; gap: 8px;
    width: 100%; max-width: min(88vw,480px);
    padding: 14px 24px; margin: 0 auto;
    font-family: inherit; font-size: 16px;
    font-weight: 600; letter-spacing: -0.01em;
    color: #fff; border: none; cursor: pointer;
    border-radius: var(--radius-btn);
    background: linear-gradient(135deg, var(--pink) 0%, var(--pink-light) 50%, var(--magenta) 100%);
    box-shadow: 0 2px 8px rgba(255,26,117,0.30), 0 8px 32px rgba(255,26,117,0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gradient-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255,26,117,0.40), 0 12px 40px rgba(255,26,117,0.20);
}
.gradient-btn:active { transform: translateY(0); box-shadow: 0 1px 4px rgba(255,26,117,0.30); }
.gradient-btn:disabled { opacity: 0.3; cursor: not-allowed; filter: saturate(0.3); }
.gradient-btn.is-loading:disabled { opacity: 1; filter: none; cursor: progress; transform: none; }
.sparkle { font-size: 18px; }
.mc-btn { /* base for all action buttons */ }

/* Inline button spinner moved to /css/buttons.css (shared across pages). */

/* ---- Sign-in link ---- */
.signin-link {
    text-align: center; font-size: 14px;
    color: var(--text-dim); margin: 20px 0 40px;
}
.signin-link a { color: var(--pink); text-decoration: none; }
.signin-link a:hover { text-decoration: underline; }

/* ---- Auth form (inside pack card) ---- */
.auth-heading { font-size: 18px; font-weight: 600; margin: 0 0 4px; text-align: center; }
.auth-sub { font-size: 13px; color: var(--text-dim); text-align: center; margin: 0 0 16px; }

.auth-input {
    width: 100%; padding: 12px 14px;
    font-family: inherit; font-size: 15px;
    color: var(--text-primary);
    background: rgba(255,255,255,0.06);
    border: 2px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-btn);
    outline: none; margin-bottom: 12px;
    transition: border-color 0.15s ease;
}
.auth-input:focus {
    border-color: var(--pink);
    box-shadow: 0 0 0 3px rgba(255,26,117,0.15);
}
.auth-input::placeholder { color: var(--text-muted); }

/* ---- EmailGuard typo prompt (dark theme) ---- */
.eg-typo-prompt {
    background: rgba(255,193,7,0.10);
    border-left: 3px solid #F59E0B;
    color: #FBD38D;
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 12px;
    margin: 0 0 12px;
}
.eg-typo-prompt p { margin: 0 0 8px; color: var(--text-primary); font-size: 14px; }
.eg-typo-prompt strong { color: var(--pink-light); }
.eg-typo-prompt button {
    display: inline-block;
    margin: 4px 8px 0 0;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: var(--pink);
    border: none;
    border-radius: var(--radius-btn);
    cursor: pointer;
}
.eg-typo-prompt button.eg-typo-no {
    background: transparent;
    color: var(--text-dim);
    border: 1px solid rgba(255,255,255,0.18);
}
.eg-hp { /* honeypot already off-screen via inline style — class kept for selector parity */ }

/* Code digit boxes */
.code-row { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }
.code-digit {
    width: 44px; height: 52px; font-size: 24px;
    font-weight: 600; text-align: center;
    color: var(--text-primary);
    background: rgba(255,255,255,0.06);
    border: 2px solid rgba(255,255,255,0.12);
    border-radius: 10px; outline: none;
    caret-color: var(--pink);
    transition: border-color 0.15s ease;
}
.code-digit:focus {
    border-color: var(--pink);
    box-shadow: 0 0 0 3px rgba(255,26,117,0.15);
}

.resend-link {
    text-align: center; font-size: 13px;
    color: var(--text-muted); margin: 0;
    cursor: pointer;
}
.resend-link.disabled { pointer-events: none; opacity: 0.4; }

.auth-error {
    color: #ff4444; font-size: 13px;
    text-align: center; margin: 8px 0 0;
    min-height: 20px;
}

/* ---- Top bar (authenticated) ---- */
.mc-topbar {
    position: sticky; top: 0; height: 56px;
    padding: 0 20px;
    display: flex; align-items: center;
    justify-content: space-between;
    background: rgba(13,13,13,0.72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    box-shadow: var(--shadow-low);
    z-index: 10;
}
.mc-topbar .brand { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.mc-nav { display: flex; gap: 4px; }
.mc-nav-icon {
    min-width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm); border: none; background: none;
    color: var(--text-dim); font-size: 16px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}
.mc-nav-icon:hover { color: #fff; background: rgba(255,255,255,0.08); }

/* ---- Mode tabs (replaces balance strip — Feature 2) ---- */
/* Tanya spec: _reports/from-tanya-donska-expert-uix-designer-14.md §§3,11 */
.mode-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 18px 20px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.mode-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dim);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease,
                border-color 0.15s ease, box-shadow 0.15s ease;
}

.mode-tab--active {
    color: var(--text-primary);
    background: rgba(255,26,117,0.10);
    border-color: rgba(255,26,117,0.28);
    box-shadow: 0 2px 8px rgba(255,26,117,0.15);
}

.mode-tab--active::before,
.mode-tab--active::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    transform: translateX(-50%);
    pointer-events: none;
}

.mode-tab--active::before {
    top: -10px;
    border-top: 7px solid var(--pink);
}

.mode-tab--active::after {
    bottom: -10px;
    border-bottom: 7px solid var(--pink);
}

.mode-tab-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--pink);
}

.mode-tab--empty .mode-tab-count {
    color: #F59E0B;
}

/* Chromatic aberration on active Video tab only — evokes motion/duality */
.mode-tab--active[data-mode="videos"] {
    box-shadow:
        0 2px 8px rgba(255,26,117,0.15),
        -1px 0 4px rgba(255,87,87,0.20),
         1px 0 4px rgba(61,46,255,0.20);
}

/* ---- Creation area ---- */
.creation-area { display: flex; justify-content: center; padding: 32px 20px 0; }

.upload-slot {
    width: 200px; height: 240px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 10px;
    background: rgba(255,255,255,0.03);
    border: 2px dashed rgba(255,255,255,0.15);
    border-radius: 16px; cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.upload-slot:hover {
    border-color: rgba(255,26,117,0.40);
    background: rgba(255,26,117,0.04);
}
.plus-icon {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: var(--text-muted); font-weight: 300;
}
.upload-slot .label { font-size: 13px; font-weight: 500; color: var(--text-muted); }

/* ---- Prompt field ---- */
/* min-height = 5 lines (32px padding + 5 * 24px line). */
/* max-height = 10 lines (32px padding + 10 * 24px line). */
/* field-sizing: content auto-grows the textarea between min and max as user types */
/* (Chrome 123+, Firefox 122+, Safari 17.4+). Older browsers fall back to fixed */
/* min-height with manual vertical resize. */
.prompt-area {
    max-width: 480px;
    margin: 24px auto 0;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.prompt-field {
    flex: 1;
    min-height: 152px; max-height: 272px;
    field-sizing: content;
    padding: 16px;
    font-family: inherit; font-size: 15px;
    line-height: 1.6; color: var(--text-primary);
    background: var(--surface);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--radius-btn); outline: none;
    resize: vertical;
    transition: border-color 0.15s ease;
}
.prompt-field:focus {
    border-color: rgba(255,26,117,0.40);
    box-shadow: 0 0 0 3px rgba(255,26,117,0.08);
}
.prompt-field::placeholder { color: rgba(255,255,255,0.25); }

/* ---- Aspect ratio picker ---- */
.aspect-ratio-picker {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
}
.ar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.ar-btn:hover {
    border-color: rgba(255,255,255,0.20);
    color: var(--text-dim);
}
.ar-btn--active {
    border-color: rgba(255,26,117,0.50);
    background: rgba(255,26,117,0.08);
    color: var(--pink);
}

/* ---- Prompt warning ---- */
.prompt-warning {
    max-width: 480px; margin: 10px auto 0;
    font-size: 12px; color: var(--text-faint);
    text-align: center;
}

/* ---- Create button ---- */
.create-btn {
    max-width: 480px; margin: 20px auto 40px;
}

.creating-hint {
    max-width: 480px; margin: -28px auto 32px;
    font-size: 12px; color: var(--text-faint);
    text-align: center; line-height: 1.5;
    opacity: 0; animation: creatingHintFadeIn 240ms ease-out forwards;
}

@keyframes creatingHintFadeIn { to { opacity: 1; } }

/* ---- Purchase banner (zero-balance nudge) ---- */
.purchase-banner {
    text-align: center; padding: 10px 20px;
    font-size: 13px; font-weight: 500;
    color: #F59E0B;
    background: rgba(245,158,11,0.08);
    border-bottom: 1px solid rgba(245,158,11,0.12);
}
.purchase-banner-link {
    color: var(--pink); text-decoration: none;
    font-weight: 600; margin-left: 4px;
}
.purchase-banner-link:hover { text-decoration: underline; }

/* ---- Purchase section (centered pack card for auth users) ---- */
.purchase-section { margin-top: 32px; }

/* ---- Purchase toast ---- */
.purchase-toast {
    text-align: center; font-size: 13px;
    color: #ff4444; margin: 12px 0 0;
    min-height: 20px; opacity: 0;
    transition: opacity 0.3s ease;
}
.purchase-toast.visible { opacity: 1; }

/* ---- Responsive ---- */
@media (max-width: 480px) {
    .gradient-btn { padding: 12px 20px; font-size: 15px; }
    .mc-hero { padding-top: 40px; }
    .example-card { width: 120px; }
    .example-placeholder { height: 120px; }
    .prompt-area { flex-direction: column; }
    .aspect-ratio-picker { flex-direction: row; padding-top: 0; justify-content: center; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .gradient-btn { transition: none; }
    .gradient-btn:hover { transform: none; }
    .mode-tab { transition: none; }
}

/* ======================================================
   FEATURE #3 — 4-Slot Identity Kit + Picker + Result
   Design spec: Tanya Donska (uix-designer-29.md)
   ====================================================== */

/* ---- Slot grid container ---- */
.slot-grid {
    display: flex; gap: 16px;
    justify-content: center; flex-wrap: wrap;
    align-items: flex-end;
    padding: 32px 20px 0;
}

/* ---- Slot groups (required vs optional) ---- */
.slot-group {
    display: flex; flex-direction: column;
    align-items: center; gap: 8px;
}
.slot-group-cards {
    display: flex; gap: 12px;
    flex-wrap: wrap; justify-content: center;
}
.slot-group-label {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--pink-light);
}

/* ---- Vertical divider between required and optional ---- */
.slot-divider {
    width: 1px;
    align-self: stretch;
    background: rgba(255,255,255,0.15);
    border-radius: 1px;
}

/* ---- Shared dashed-tile chrome (slot cards) ---- */
.slot-card {
    background: rgba(255,255,255,0.03);
    border: 2px dashed rgba(255,255,255,0.15);
    border-radius: var(--radius-btn);
    transition: border-color 0.2s ease, background 0.2s ease;
}
.slot-card:hover {
    border-color: rgba(255,26,117,0.40);
    background: rgba(255,26,117,0.04);
}

/* ---- Individual slot card ---- */
.slot-card {
    position: relative;
    width: 140px;
    overflow: hidden;
    cursor: pointer;
}
.slot-card--required { border-color: rgba(255,255,255,0.25); }
.slot-card--loading {
    animation: slot-loading-pulse 1.2s ease-in-out infinite;
}
@keyframes slot-loading-pulse {
    0%, 100% { border-color: rgba(255,26,117,0.30); }
    50% { border-color: rgba(255,255,255,0.50); }
}
.slot-card--filled {
    border: 2px solid rgba(255,26,117,0.30);
    box-shadow: inset 0 0 0 1px rgba(255,26,117,0.15);
}
.slot-card--dragover {
    border-color: var(--pink);
    background: rgba(255, 26, 117, 0.08);
    box-shadow: inset 0 0 20px rgba(255, 26, 117, 0.10);
}

/* ---- Slot preview area ---- */
.slot-preview {
    width: 100%; height: 130px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.02);
}
.slot-plus {
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: none; color: var(--text-muted);
    font-size: 22px; font-weight: 300;
    cursor: pointer; line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;
}
.slot-plus:hover { background: rgba(255,26,117,0.15); color: var(--pink); }

/* ---- Slot thumbnail (filled state) ---- */
.slot-thumbnail {
    width: 100%; height: 130px;
    object-fit: contain; display: block;
    border-radius: 4px;
}

/* ---- Remove button (absolute top-right of card) ---- */
.slot-remove {
    position: absolute; top: 6px; right: 6px;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(0,0,0,0.7); border: none;
    color: #fff; font-size: 13px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s ease;
    z-index: 1;
}
.slot-remove:hover { background: rgba(255,26,117,0.85); }

/* ---- Slot footer strip ---- */
.slot-footer {
    padding: 6px 8px;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(8px);
    display: flex; align-items: flex-start; gap: 2px;
    flex-wrap: wrap;
}
.slot-label { font-size: 11px; font-weight: 600; color: var(--text-primary); width: 100%; }
.slot-desc  {
    font-size: 10px; color: var(--text-muted); line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    width: 100%;
}
.slot-tag {
    font-size: 10px; color: var(--pink-light); cursor: pointer;
    text-decoration: underline; text-decoration-style: dotted;
    width: 100%;
    transition: color 0.15s ease, transform 0.08s ease, text-decoration-color 0.15s ease;
}
.slot-tag:hover { color: var(--pink); }
.slot-tag:active { transform: scale(0.96); }
.slot-tag--in-use {
    color: rgba(187,247,208,1);
    text-decoration-color: rgba(34,197,94,0.55);
}
.slot-tag--in-use:hover { color: rgba(220,252,231,1); }

/* ---- Progressive disclosure: Phase 2 (hidden until style + character filled) ---- */
.slot-group--optional,
.slot-divider,
.prompt-bubbles,
.prompt-area,
.prompt-warning,
.create-btn {
    display: none;
}
body.phase-2 .slot-group--optional {
    display: flex;
    animation: slot-fade-in 0.3s ease-out both;
}
body.phase-2 .slot-divider {
    display: block;
    animation: slot-fade-in 0.3s ease-out both;
}
body.phase-2 .prompt-bubbles {
    display: flex;
    animation: slot-fade-in 0.3s ease-out both;
}
body.phase-2 .prompt-area {
    display: flex;
    animation: slot-fade-in 0.3s ease-out both;
}
body.phase-2 .prompt-warning {
    display: block;
    animation: slot-fade-in 0.3s ease-out both;
}
body.phase-2 .create-btn {
    display: flex;
    animation: slot-fade-in 0.3s ease-out both;
}

/* Phase 3: generation in flight — hide the input chrome that's no longer relevant. */
body.phase-creating .prompt-bubbles,
body.phase-creating .prompt-area,
body.phase-creating .prompt-warning {
    display: none !important;
}

/* ---- Prompt placeholder bubbles ---- */
.prompt-bubbles {
    flex-wrap: wrap; gap: 6px;
    max-width: 480px; margin: 18px auto 0;
    justify-content: center;
}
.prompt-bubble {
    appearance: none;
    border: 1px solid rgba(239,68,68,0.30);
    background: rgba(239,68,68,0.08);
    color: rgba(252,165,165,0.85);
    font-size: 11px; font-weight: 600; font-family: inherit;
    padding: 5px 10px; border-radius: 999px;
    cursor: pointer; line-height: 1.2;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
.prompt-bubble:active { transform: scale(0.94); }
.prompt-bubble:hover {
    background: rgba(239,68,68,0.16);
    border-color: rgba(239,68,68,0.50);
    color: rgba(254,202,202,1);
}
.prompt-bubble--in-use {
    background: rgba(34,197,94,0.22);
    border-color: rgba(34,197,94,0.55);
    color: rgba(187,247,208,1);
}
.prompt-bubble--in-use:hover {
    background: rgba(34,197,94,0.34);
    border-color: rgba(34,197,94,0.75);
}

/* ---- Picker sheet (bottom overlay) ---- */
.picker-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 100;
    display: flex; align-items: flex-end;
}
.picker-sheet {
    width: 100%; max-height: 42vh;
    background: rgba(18,18,18,0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 32px rgba(0,0,0,0.55);
    padding: 12px 0 env(safe-area-inset-bottom, 0);
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
}
.picker-backdrop.picker-open .picker-sheet { transform: translateY(0); }
.picker-handle {
    width: 36px; height: 4px; border-radius: 2px;
    background: rgba(255,255,255,0.18);
    margin: 0 auto 12px;
}
.picker-hint {
    margin: -4px 20px 8px;
    font-size: 11px; line-height: 1.3;
    color: rgba(255,255,255,0.55);
    text-align: center;
    overflow: hidden;
    animation: picker-hint-fade 5s ease-out forwards;
}
.picker-hint a {
    color: var(--pink);
    text-decoration: underline;
}
@keyframes picker-hint-fade {
    0%, 70%  { opacity: 1; max-height: 30px; }
    95%      { opacity: 0; max-height: 30px; }
    100%     { opacity: 0; max-height: 0; margin: 0; padding: 0; }
}
.picker-title {
    font-size: 15px; font-weight: 600; color: var(--text-primary);
    margin: 0 0 8px; padding: 0 20px;
}
.picker-bar {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 4px 20px 24px;
}
.picker-thumbs {
    display: flex; gap: 8px;
    flex: 1; min-width: 0;
    overflow-x: auto; padding-right: 4px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.picker-thumbs::-webkit-scrollbar { display: none; }
.picker-cell {
    display: flex; flex-direction: column;
    align-items: center; gap: 2px;
    flex-shrink: 0;
}
.picker-dim {
    font-size: 7px; line-height: 1;
    color: rgba(255,255,255,0.35);
    font-variant-numeric: tabular-nums;
    min-height: 7px;
}
.picker-thumb {
    width: 72px; height: 72px; flex-shrink: 0;
    border-radius: 10px; overflow: hidden;
    cursor: pointer; border: 2px solid transparent;
    transition: border-color 0.15s ease;
    background: rgba(255,255,255,0.05);
}
.picker-thumb img {
    width: 100%; height: 100%;
    object-fit: contain; display: block;
    transition: transform 0.15s ease;
}
.picker-thumb:hover { border-color: var(--pink); }
.picker-thumb:hover img { transform: scale(1.02); }
.picker-import-new {
    width: 72px; height: 72px; flex-shrink: 0;
    border-radius: 10px; border: 2px dashed rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.05);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: var(--text-muted); cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
    animation: picker-import-attn 1.4s ease-out 0s 3 both;
}
.picker-import-new:hover { border-color: rgba(255,26,117,0.4); color: var(--pink); }
@keyframes picker-import-attn {
    0% {
        box-shadow: 0 0 0 0 rgba(255,26,117,0.45);
        border-color: rgba(255,26,117,0.55);
        color: var(--pink);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(255,26,117,0);
        border-color: rgba(255,26,117,0.30);
        color: rgba(255,255,255,0.6);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255,26,117,0);
        border-color: rgba(255,255,255,0.18);
        color: var(--text-muted);
    }
}
@media (prefers-reduced-motion: reduce) {
    .picker-import-new { animation: none; }
}
.picker-scroll-prev,
.picker-scroll-next {
    flex-shrink: 0;
    width: 32px; height: 72px;
    border-radius: 10px; border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.7);
    font-family: inherit; font-size: 22px; line-height: 1; cursor: pointer;
    align-items: center; justify-content: center; padding: 0;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.picker-scroll-prev:hover,
.picker-scroll-next:hover {
    border-color: rgba(255,26,117,0.4); color: var(--pink);
    background: rgba(255,26,117,0.06);
}
.picker-scroll-prev:disabled,
.picker-scroll-next:disabled {
    opacity: 0.3; cursor: not-allowed;
    color: rgba(255,255,255,0.4);
}
.picker-scroll-prev:disabled:hover,
.picker-scroll-next:disabled:hover {
    border-color: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.05);
}
@media (pointer: coarse) {
    .picker-scroll-prev,
    .picker-scroll-next { display: none !important; }
}

/* ---- Picker favorites row ---- */
.picker-fav-row {
    display: flex; align-items: center; gap: 8px;
    padding: 0 20px 8px;
}
.picker-fav-label {
    font-size: 10px; font-weight: 600; color: var(--pink);
    text-transform: uppercase; letter-spacing: 0.5px;
    flex-shrink: 0;
}
.picker-fav-thumbs {
    display: flex; gap: 6px;
    overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.picker-fav-thumbs::-webkit-scrollbar { display: none; }
.picker-thumb--fav {
    width: 48px; height: 48px;
    border-radius: 8px;
    border: 1.5px solid rgba(255,26,117,0.35);
}
.picker-fav-row .picker-cell { gap: 0; }

/* ---- Create spinner ---- */
.slot-spinner {
    display: inline-block; width: 15px; height: 15px;
    border: 2px solid rgba(255,255,255,0.25);
    border-top-color: #fff; border-radius: 50%;
    animation: spin 0.9s linear infinite;
    vertical-align: middle; margin-right: 6px;
}

/* ---- Result card ---- */
.result-card {
    max-width: 480px; margin: 32px auto 40px;
    text-align: center; padding: 0 20px;
}
.result-img {
    width: 100%; max-width: 360px;
    border-radius: 10px; display: block; margin: 0 auto 24px;
    box-shadow:
        0  2px  8px rgba(0,0,0,0.55),
        0 12px 40px rgba(0,0,0,0.45),
        0  0   60px rgba(255,26,117,0.08);
}
.result-actions { display: flex; flex-direction: column; gap: 12px; align-items: center; max-width: 480px; margin: 12px auto 40px; }
.result-video {
    width: 100%; max-width: min(92vw, 480px);
    border-radius: 10px; display: block; margin: 0 auto;
    box-shadow:
        0  2px  8px rgba(0,0,0,0.55),
        0 12px 40px rgba(0,0,0,0.45),
        0  0   60px rgba(255,26,117,0.08);
}
.result-btn-outline {
    width: 100%; max-width: min(88vw,480px);
    padding: 14px 24px; font-family: inherit; font-size: 16px;
    font-weight: 600; cursor: pointer;
    border: 2px solid rgba(255,255,255,0.15);
    background: transparent; color: var(--text-primary);
    border-radius: var(--radius-btn);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.result-btn-outline:hover {
    border-color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.04);
}

/* ---- Low-credit nudge (post-result state) ---- */
.result-low-credit-hint {
    margin: 4px 0 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--color-accent);
    text-align: center;
}
.result-low-credit-hint a {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-color: rgba(245,166,35,0.5);
    text-underline-offset: 2px;
}

/* ---- Nav links (anchor tags in top bar) ---- */
a.mc-nav-icon {
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    width: 36px; height: 36px;
    color: var(--text-dim); border-radius: 8px;
}
a.mc-nav-icon:hover { color: #fff; background: rgba(255,255,255,0.08); }

/* ---- Responsive: stacked groups on mobile, horizontal divider ---- */
@media (max-width: 600px) {
    .slot-grid {
        flex-direction: column;
        align-items: stretch;
        max-width: 320px; margin: 0 auto;
        gap: 12px;
    }
    .slot-group { width: 100%; }
    .slot-group-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        width: 100%;
    }
    .slot-card { width: 100%; }
    .slot-divider {
        width: auto; height: 1px;
        align-self: stretch;
        margin: 4px 0;
    }
}

/* ---- Generic resolving shimmer (used by ChoiceTemplate / VideoChoiceTemplate) ---- */
@keyframes shimmer-sweep {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

.slot-card--resolving .slot-preview {
    background: linear-gradient(
        90deg,
        var(--frame-bg) 25%,
        rgba(255,255,255,0.05) 50%,
        var(--frame-bg) 75%
    );
    background-size: 200% 100%;
    animation: shimmer-sweep 1.5s ease-in-out 10;  /* cap at ~15s — JS timeout fires at 8s */
    position: relative;
}

.slot-card--resolving .slot-plus { display: none; }

.slot-card--resolving .slot-preview::after {
    content: "";
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 20px; height: 20px;
    border: 2px solid rgba(255,255,255,0.15);
    border-top-color: var(--pink);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

/* ---- Slot card: uploading state (reuses resolving shimmer + spinner) ---- */
.slot-card--uploading {
    border-color: rgba(255,26,117,0.25);
    transition: border-color 0.2s ease;
}
.slot-card--uploading .slot-preview {
    background: linear-gradient(
        90deg,
        var(--frame-bg) 25%,
        rgba(255,255,255,0.05) 50%,
        var(--frame-bg) 75%
    );
    background-size: 200% 100%;
    animation: shimmer-sweep 1.5s ease-in-out infinite;
    position: relative;
}
.slot-card--uploading .slot-plus { display: none; }
.slot-card--uploading .slot-preview::after {
    content: "";
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 20px; height: 20px;
    border: 2px solid rgba(255,255,255,0.15);
    border-top-color: var(--pink);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

/* ---- Slot card: upload failed state ---- */
.slot-card--upload-failed {
    border: 2px solid rgba(255, 68, 68, 0.35);
    background: rgba(255, 68, 68, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 68, 68, 0.12);
}
.slot-retry {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2px;
    width: 100%; height: 100%;
    background: none; border: none;
    cursor: pointer;
    color: rgba(255, 68, 68, 0.7);
    font-size: 28px; font-weight: 300;
    font-family: inherit;
}
.slot-retry:hover { color: rgba(255, 68, 68, 0.9); }
.slot-retry-label {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ---- Style slot: resolve failed error state ---- */
.slot-card--resolve-failed {
    border-color: var(--pink) !important;
}

.slot-resolve-error {
    display: flex; flex-direction: column;
    align-items: center; gap: 6px;
    font-size: 11px; color: var(--text-muted);
    text-align: center; padding: 8px;
    line-height: 1.4;
}

/* ---- Slot thumbnail fade-in when resolved ---- */
.slot-thumbnail--fade-in {
    animation: slot-fade-in 0.3s ease-out both;
}
@keyframes slot-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---- Upload slot error: icon + message ---- */
.slot-error-icon {
    font-size: 20px; line-height: 1;
    color: rgba(255, 68, 68, 0.7);
}
.slot-error-msg {
    font-size: 11px; font-weight: 600;
    color: rgba(255,255,255,0.7);
    text-align: center; padding: 0 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Generate 402: no-credits CTA (replaces Create button) ---- */
.create-error {
    max-width: 480px; margin: 20px auto 40px;
    padding: 20px; text-align: center;
    background: rgba(255,68,68,0.06);
    border: 1px solid rgba(255,68,68,0.15);
    border-radius: var(--radius-btn);
}
.create-error-msg {
    font-size: 14px; font-weight: 600;
    color: #F59E0B; margin: 0 0 16px;
}
.create-error-dismiss {
    font-size: 13px; color: var(--text-muted);
    cursor: pointer; margin: 12px 0 0;
}
.create-error-dismiss:hover { color: var(--text-dim); }

/* ---- Gallery: delete error recovery ---- */
@keyframes gallery-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-2px); }
    75%      { transform: translateX(2px); }
}
.gallery-card--shake {
    animation: gallery-shake 0.3s ease-in-out;
}
.gallery-error-dot {
    position: absolute; top: 8px; left: 8px;
    width: 6px; height: 6px; border-radius: 50%;
    background: #ff4444; opacity: 0.8;
    z-index: 3; pointer-events: none;
}

/* ---- Reduced motion for new animations ---- */
@media (prefers-reduced-motion: reduce) {
    .slot-spinner  { animation: none; }
    .picker-sheet  { transition: none; }
    .slot-card     { transition: none; }
    .slot-card--resolving .slot-preview { animation: none; }
    .slot-card--resolving .slot-preview::after { animation: none; }
    .slot-card--uploading .slot-preview { animation: none; }
    .slot-card--uploading .slot-preview::after { animation: none; }
    .slot-thumbnail--fade-in { animation: none; }
    .gallery-card--shake { animation: none; }
    .picker-hint { animation: none; }
    .upload-row--pending .upload-row-icon { animation: none; }
}

/* ======================================================
   FEATURE #4 — Creations Page
   Design spec: Tanya Donska (_reports/from-tanya-donska-expert-uix-designer-100.md)
   ====================================================== */

/* ---- Creations grid ---- */
.creations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
    padding: 32px 20px 60px;
    max-width: 900px;
    margin: 0 auto;
}

/* ---- Creation card ---- */
.creation-card {
    position: relative;
    background: var(--surface);
    border: 2px dashed rgba(255,255,255,0.18);
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.creation-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,26,117,0.18);
    border-color: rgba(255,26,117,0.45);
}

/* ---- Result image ---- */
.creation-img {
    width: 100%; aspect-ratio: 1 / 1;
    object-fit: contain; display: block;
    background: rgba(0,0,0,0.30);
    transition: filter 0.25s ease;
}
[data-aspect-ratio="portrait"] > .creation-img { aspect-ratio: 3 / 5; }
[data-aspect-ratio="landscape"] > .creation-img { aspect-ratio: 5 / 3; }

/* ---- Hover-spotlight: desaturate non-hovered art (Tanya §UX, 2026-04-27) ---- */
@media (hover: hover) {
    #creations-images:has(.creation-card:hover) .creation-img,
    #creations-videos:has(.creation-card:hover) .creation-img {
        filter: grayscale(100%);
    }
    #creations-images:has(.creation-card:hover) .creation-card:hover .creation-img,
    #creations-videos:has(.creation-card:hover) .creation-card:hover .creation-img {
        filter: grayscale(0%);
    }
}

/* ---- Card footer ---- */
.creation-footer {
    padding: 10px 12px;
    display: flex; align-items: center; justify-content: center;
}

/* ---- Share button ---- */
.creation-share-btn {
    width: 100%; padding: 10px 12px;
    font-size: 13px; border-radius: 10px;
}

/* ---- Pending / failed spinner area ---- */
.creation-spinner-area {
    width: 100%; aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    background: rgba(255,255,255,0.02);
}
[data-aspect-ratio="portrait"] > .creation-spinner-area { aspect-ratio: 3 / 5; }
[data-aspect-ratio="landscape"] > .creation-spinner-area { aspect-ratio: 5 / 3; }

/* ---- Status label ---- */
.creation-status-label {
    font-size: 12px; color: var(--text-dim);
    text-align: center; width: 100%;
}

/* ---- Failed card accent ---- */
.creation-failed .creation-spinner-area {
    background: rgba(255,68,68,0.05);
}

/* ---- 3-variant tile grid (creations cards + create page).
   Portrait: 3 cols (1 row). Square: 2 cols (2 rows). Landscape: 1 col (3 rows, capped). ---- */
.creation-variants {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    width: 100%;
}
[data-aspect-ratio="square"] > .creation-variants { grid-template-columns: repeat(4, 1fr); }
[data-aspect-ratio="square"] > .creation-variants > .variant-tile:nth-child(1) { grid-column: 1 / 3; }
[data-aspect-ratio="square"] > .creation-variants > .variant-tile:nth-child(2) { grid-column: 3 / 5; }
[data-aspect-ratio="square"] > .creation-variants > .variant-tile:nth-child(3) { grid-column: 2 / 4; }
[data-aspect-ratio="landscape"] > .creation-variants { grid-template-columns: 1fr; max-height: 320px; overflow: hidden; }
.variant-tile {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 5;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.02);
    overflow: hidden;
    border-radius: 6px;
}
[data-aspect-ratio="square"] .variant-tile { aspect-ratio: 1 / 1; }
[data-aspect-ratio="landscape"] .variant-tile { aspect-ratio: 5 / 3; }
.variant-tile--failed {
    background: rgba(255,68,68,0.06);
}
.variant-tile-img {
    width: 100%; height: 100%; object-fit: contain; display: block;
}
.variant-tile-x {
    font-size: 28px; opacity: 0.85;
}
.variant-tile-label {
    position: absolute;
    bottom: 6px; left: 0; right: 0;
    text-align: center;
    font-size: 10px; font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.03em;
    pointer-events: none;
}
.variant-tile-vid {
    width: 100%; height: 100%; object-fit: contain; display: block;
}

/* Create page output strip — capped width. */
#create-variants {
    gap: 12px;
    max-width: min(92vw, 540px);
    margin: 16px auto 0;
}
#create-variants .variant-tile {
    border-radius: var(--radius-btn);
}
#create-variants[data-aspect-ratio="square"] { grid-template-columns: repeat(4, 1fr); max-width: min(92vw, 480px); }
#create-variants[data-aspect-ratio="square"] > .variant-tile:nth-child(1) { grid-column: 1 / 3; }
#create-variants[data-aspect-ratio="square"] > .variant-tile:nth-child(2) { grid-column: 3 / 5; }
#create-variants[data-aspect-ratio="square"] > .variant-tile:nth-child(3) { grid-column: 2 / 4; }
#create-variants[data-aspect-ratio="landscape"] { grid-template-columns: 1fr; max-width: min(92vw, 400px); }

/* Video: 2 tiles — override portrait to 2-col, square to simple 2-col */
#create-variants[data-count="2"] { max-width: min(92vw, 440px); }
#create-variants[data-count="2"][data-aspect-ratio="portrait"] { grid-template-columns: repeat(2, 1fr); max-width: min(92vw, 400px); }
#create-variants[data-count="2"][data-aspect-ratio="square"] { grid-template-columns: repeat(2, 1fr); max-width: min(92vw, 440px); }
#create-variants[data-count="2"][data-aspect-ratio="square"] > .variant-tile:nth-child(1) { grid-column: auto; }
#create-variants[data-count="2"][data-aspect-ratio="square"] > .variant-tile:nth-child(2) { grid-column: auto; }
#create-variants[data-count="2"][data-aspect-ratio="landscape"] { max-width: min(92vw, 400px); }

/* ---- Empty state ---- */
.creations-empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    min-height: 60vh; gap: 20px; padding: 40px 20px;
    text-align: center;
}
.creations-empty-text {
    font-size: 18px; color: var(--text-dim); margin: 0;
}

/* ---- Active nav icon — amber pill ---- */
.mc-nav-icon--active {
    color: var(--color-accent) !important;
    background: var(--color-accent-soft) !important;
    border-radius: var(--radius-pill);
    padding: 0 10px;
}

/* ---- Responsive: tighter grid on narrow screens ---- */
@media (max-width: 400px) {
    .creations-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px; padding: 20px 12px 40px;
    }
}

/* ---- Reduced motion for creations ---- */
@media (prefers-reduced-motion: reduce) {
    .creation-card { transition: none; }
    .creation-card:hover { transform: none; }
    .creation-card--arrived { animation: none; }
    .creation-card--highlight { animation: none; }
}

/* ---- SSE-delivered card: arrival signal (Feature #13) ---- */
/* slot-fade-in (existing keyframe) fades card in; arrived-glow adds a dissolving pink ring. */
.creation-card--arrived {
    animation:
        slot-fade-in 0.3s ease-out both,
        arrived-glow 1.0s ease-out 0.1s both;
}
@keyframes arrived-glow {
    0%   { box-shadow: 0 0 0 2px rgba(255,26,117,0.55), 0 8px 24px rgba(0,0,0,0.40); }
    50%  { box-shadow: 0 0 0 2px rgba(255,26,117,0.25), 0 8px 24px rgba(0,0,0,0.40); }
    100% { box-shadow: none; }
}

.creation-card--highlight {
    animation: highlight-blink 0.5s ease-in-out 3;
    border-style: solid;
}
@keyframes highlight-blink {
    0%, 100% { border-color: rgba(255,26,117,0.30); }
    50%      { border-color: rgba(255,255,255,0.55); }
}

/* ======================================================
   FEATURE #6 — Gallery Page
   Design spec: Tanya Donska (_reports/from-tanya-donska-expert-uix-designer-51.md)
   ====================================================== */

/* ---- Gallery toolbar ---- */
.gallery-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 20px 0;
}
.gallery-toolbar-title {
    font-size: 15px; font-weight: 600; color: var(--text-primary);
}
.gallery-select-btn {
    font-family: inherit; font-size: 13px; font-weight: 600;
    color: #fff; background: #d64545;
    border: none; cursor: pointer; padding: 6px 14px;
    border-radius: 999px;
    transition: background 0.15s ease;
}
.gallery-select-btn:hover { background: #bd3838; }
.gallery-select-btn--active { background: rgba(70,167,121,0.9); }
.gallery-select-btn--active:hover { background: rgba(70,167,121,1); }

/* ---- Gallery grid (fixed 112px tiles, auto-fill, centered) ---- */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 112px);
    gap: 16px;
    justify-content: center;
    padding: 12px 16px 120px;
}

/* ---- "+" upload tile (first cell) ---- */
.gallery-add {
    width: 112px; height: 112px;
    border-radius: 8px;
    border: 2px dashed rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.03);
    display: flex; align-items: center; justify-content: center;
    font-family: inherit; font-size: 36px; line-height: 1;
    color: rgba(255,255,255,0.6);
    cursor: pointer; padding: 0;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.gallery-add:hover { border-color: var(--pink); color: var(--pink); }
.gallery-selecting .gallery-dropzone { display: none; }

/* ---- Dropzone row (above gallery grid) ---- */
.gallery-dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px 4px;
    margin: 8px 16px 0;
    border: 2px dashed transparent;
    border-radius: 12px;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.gallery-dropzone--dragover {
    border-color: var(--pink);
    background: rgba(255, 26, 117, 0.06);
}
.gallery-dropzone-hint {
    font-size: 13px;
    color: rgba(255,255,255,0.3);
    pointer-events: none;
    transition: color 0.2s ease;
}
.gallery-dropzone--dragover .gallery-dropzone-hint {
    color: rgba(255,255,255,0.6);
}

/* ---- Gallery card (positioning wrapper) ---- */
.gallery-card {
    position: relative;
    width: 112px;
    cursor: pointer;
}
.gallery-image {
    position: relative;
    width: 112px; height: 112px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    border: 2px dashed rgba(255,255,255,0.18);
    transition: border-color 0.15s ease;
}
.gallery-thumb {
    width: 100%; height: 100%;
    object-fit: contain; display: block;
    transition: filter 0.25s ease;
}

/* ---- Hover-spotlight: desaturate non-hovered thumbs (mirrors creations §UX) ---- */
@media (hover: hover) {
    #gallery-grid:not(.gallery-selecting):has(.gallery-card:hover) .gallery-thumb {
        filter: grayscale(100%);
    }
    #gallery-grid:not(.gallery-selecting):has(.gallery-card:hover) .gallery-card:hover .gallery-thumb {
        filter: grayscale(0%);
    }
    #gallery-grid:not(.gallery-selecting) .gallery-card:hover .gallery-image {
        border-color: rgba(255,26,117,0.45);
    }
}

/* ---- Per-image dimensions (small white text under image) ---- */
.gallery-dim {
    display: block;
    margin-top: 6px;
    padding: 0 4px;
    font-size: 10px; line-height: 1.4;
    color: rgba(255,255,255,0.5);
    font-variant-numeric: tabular-nums;
    text-align: center;
    pointer-events: none;
}

/* ---- Bin icon (normal mode) — bottom-right over image ---- */
.gallery-bin {
    position: absolute; bottom: 6px; right: 6px;
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(0,0,0,0.65); border: none;
    color: rgba(255,255,255,0.75);
    cursor: pointer; z-index: 2; padding: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background 120ms ease, color 120ms ease;
}
.gallery-bin:hover { background: rgba(255,68,68,0.65); color: #fff; }
.gallery-bin .bin-icon { width: 13px; height: 13px; }

/* ---- Star icon (top-right over image) ---- */
.gallery-star {
    position: absolute; top: 6px; right: 6px;
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(0,0,0,0.50); border: none;
    color: rgba(255,255,255,0.5);
    cursor: pointer; z-index: 2; padding: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background 120ms ease, color 120ms ease;
}
.gallery-star:hover { background: rgba(255,255,255,0.25); color: #fff; }
.gallery-star .star-icon { width: 13px; height: 13px; }
.gallery-star--active { color: var(--pink); background: rgba(0,0,0,0.60); }
.gallery-star--active:hover { color: var(--pink); background: rgba(255,26,117,0.30); }
.gallery-selecting .gallery-star { display: none; }

/* ---- Circle indicator (select mode) ---- */
.gallery-circle {
    position: absolute; bottom: 6px; right: 6px;
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.5);
    background: transparent; z-index: 2;
    display: none; pointer-events: none;
}
.gallery-selecting .gallery-bin { display: none; }
.gallery-selecting .gallery-circle { display: block; }

/* ---- Selected card: filled circle + dimmed thumb ---- */
.gallery-card.selected .gallery-circle {
    background: var(--color-accent);
    border-color: var(--color-accent);
}
.gallery-card.selected .gallery-thumb { filter: grayscale(100%); opacity: 0.5; }

/* ---- Upload modal (live per-image progress + result) ---- */
.upload-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.65);
    display: flex; align-items: flex-start; justify-content: center;
    z-index: 1100; padding: 24px 20px 20px;
    opacity: 0; transition: opacity 0.2s ease;
}
.upload-modal-backdrop.upload-modal-open { opacity: 1; }
.upload-modal-sheet {
    background: rgba(22,22,22,0.98);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    max-width: 440px; width: 100%;
    padding: 24px;
    color: var(--text-primary);
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.upload-modal-title {
    margin: 0 0 12px; font-size: 17px; font-weight: 600;
}
.upload-modal-list {
    list-style: none; margin: 0;
    padding: 0; max-height: 320px; overflow-y: auto;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.upload-row {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.upload-row-icon {
    flex: none;
    box-sizing: border-box;
    width: 18px; height: 18px;
    border-radius: 50%;
    margin-top: 2px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
}
.upload-row-body {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0; flex: 1;
}
.upload-row-name {
    font-size: 13px; color: rgba(255,255,255,0.92);
    word-break: break-all;
}
.upload-row-reason {
    font-size: 11px; color: rgba(255,170,170,0.85);
}
.upload-row--pending .upload-row-icon {
    border: 2px solid rgba(255,255,255,0.18);
    border-top-color: var(--pink);
    animation: upload-spin 0.8s linear infinite;
}
.upload-row--ok   .upload-row-icon { background: #2e9b5c; }
.upload-row--ok   .upload-row-icon::after { content: "\2713"; }
.upload-row--dup  .upload-row-icon { background: #b07d2e; }
.upload-row--dup  .upload-row-icon::after { content: "\21BA"; }
.upload-row--fail .upload-row-icon { background: #d64545; }
.upload-row--fail .upload-row-icon::after { content: "\2715"; }
.upload-modal-actions { margin-top: 20px; }
.upload-modal-close {
    width: 100%;
    background: var(--pink); color: #fff; border: none;
    padding: 12px; border-radius: 999px;
    font-family: inherit; font-weight: 600; font-size: 14px;
    cursor: pointer;
    transition: filter 0.15s ease;
}
.upload-modal-close:hover { filter: brightness(1.1); }
@keyframes upload-spin { to { transform: rotate(360deg); } }

/* ---- Purchase nudge overlay (gallery upload gate) ---- */

.purchase-nudge-backdrop {
    position: fixed; inset: 0;
    background: rgba(8,8,15,0.70);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1200;
    display: flex; align-items: flex-end; justify-content: center;
    opacity: 0; transition: opacity 0.25s ease;
}
.purchase-nudge-backdrop.purchase-nudge-open { opacity: 1; }

.purchase-nudge-sheet {
    width: 100%;
    background: rgba(18,18,24,0.98);
    border-radius: 28px 28px 0 0;
    padding: 20px 24px env(safe-area-inset-bottom, 28px);
    display: flex; flex-direction: column;
    gap: 14px; align-items: center;
    box-shadow: 0 -8px 48px rgba(0,0,0,0.70);
}

.purchase-nudge-handle {
    width: 40px; height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.18);
    align-self: center; margin-bottom: 4px;
}

.purchase-nudge-title {
    font-size: 22px; font-weight: 700;
    color: var(--text-primary); margin: 0;
    text-align: center;
}

.purchase-nudge-sub {
    font-size: 14px; color: var(--text-muted);
    margin: 0; text-align: center; line-height: 1.5;
}

.purchase-nudge-cta {
    margin-top: 4px;
}

.purchase-nudge-dismiss {
    background: none; border: none;
    color: var(--text-dim);
    font-family: inherit; font-size: 14px;
    cursor: pointer; padding: 8px 16px;
}
.purchase-nudge-dismiss:hover { color: var(--text-muted); }

@media (min-width: 600px) {
    .purchase-nudge-sheet { max-width: 440px; margin: 0 auto; border-radius: 28px; }
    .purchase-nudge-backdrop { align-items: center; }
}

.upload-banner {
    text-align: center;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.upload-banner--visible { opacity: 1; }

/* ---- Preview modal (gallery image → use-as-style / use-as-character) ---- */
.preview-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.78);
    display: flex; align-items: center; justify-content: center;
    z-index: 1100; padding: 20px;
    opacity: 0; transition: opacity 0.2s ease;
}
.preview-modal-backdrop.preview-modal-open { opacity: 1; }
.preview-modal-sheet {
    background: rgba(22,22,22,0.98);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    max-width: 560px; width: 100%;
    padding: 16px;
    color: var(--text-primary);
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
    position: relative;
    display: flex; flex-direction: column; gap: 16px;
}
.preview-modal-close {
    position: absolute; top: 8px; right: 8px;
    width: 36px; height: 36px;
    background: rgba(0,0,0,0.5); color: #fff; border: none;
    border-radius: 50%;
    font-size: 22px; line-height: 1; cursor: pointer;
    z-index: 2;
}
.preview-modal-close:hover { background: rgba(0,0,0,0.8); }
.preview-modal-hero {
    position: relative;
    min-height: 200px;
}
.preview-modal-image {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    border-radius: 8px;
    object-fit: contain;
    margin: 0 auto;
    background: rgba(255,255,255,0.03);
}
.preview-modal-actions {
    display: flex; gap: 12px;
}
.preview-action {
    flex: 1;
    background: var(--pink); color: #fff; border: none;
    padding: 12px; border-radius: 999px;
    font-family: inherit; font-weight: 600; font-size: 14px;
    cursor: pointer;
    transition: filter 0.15s ease;
}
.preview-action:hover { filter: brightness(1.1); }
.preview-delete-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; padding: 10px 0;
    background: rgba(255,68,68,0.08); color: #ff4444;
    border: 1px solid rgba(255,68,68,0.18); border-radius: var(--radius-btn);
    font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: background 0.15s ease;
}
.preview-delete-btn:hover { background: rgba(255,68,68,0.18); }
@media (max-width: 480px) {
    .preview-modal-actions { flex-direction: column; }
}

/* ---- Deleting fade-out ---- */
.gallery-card--deleting {
    opacity: 0; transform: scale(0.9);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

/* ---- Delete bar (bottom sheet) ---- */
.gallery-delete-bar {
    position: fixed; bottom: 0; left: 0; right: 0;
    padding: 18px 24px calc(22px + env(safe-area-inset-bottom, 0px));
    background: rgba(34,34,34,0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex; align-items: center; justify-content: center;
    border-top: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.45);
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    z-index: 50;
}
.gallery-delete-bar.visible { transform: translateY(0); }
.gallery-select-all-btn {
    font-family: inherit; font-size: 13px; font-weight: 600;
    color: #fff; background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px; padding: 8px 14px;
    cursor: pointer; min-height: 44px;
    margin-right: 12px;
    transition: background 0.15s ease;
}
.gallery-select-all-btn:hover { background: rgba(255,255,255,0.18); }
.gallery-delete-btn {
    font-family: inherit; font-size: 14px; font-weight: 600;
    color: #ff4444; background: rgba(255,68,68,0.10);
    border: 1px solid rgba(255,68,68,0.20);
    border-radius: var(--radius-btn); padding: 10px 16px;
    cursor: pointer; min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; gap: 8px;
    transition: background 0.15s ease;
}
.gallery-delete-btn:hover { background: rgba(255,68,68,0.18); }
.gallery-delete-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.gallery-delete-btn .bin-icon { width: 14px; height: 14px; }

/* ---- Gallery empty state ---- */
.gallery-empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    min-height: 60vh; gap: 16px; padding: 40px 20px;
    text-align: center;
}
.gallery-empty-icon { font-size: 48px; color: var(--text-muted); line-height: 1; }
.gallery-empty-text { font-size: 18px; color: var(--text-dim); margin: 0; }
.gallery-empty.gallery-dropzone--dragover {
    outline: 2px dashed var(--pink);
    outline-offset: -4px;
    background: rgba(255, 26, 117, 0.04);
    border-radius: 16px;
}

/* ---- Reduced motion for gallery ---- */
@media (prefers-reduced-motion: reduce) {
    .gallery-thumb { transition: none; }
    .gallery-delete-bar { transition: none; }
}

/* ---- Eviction hint (toast) ---- */
.eviction-hint {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: rgba(34,34,34,0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.10); border-radius: 12px;
    padding: 10px 14px; display: flex; align-items: center; gap: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5); z-index: 60;
    opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease;
    max-width: 320px;
}
.eviction-hint--visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.eviction-hint-img {
    width: 40px; height: 40px; border-radius: 6px; object-fit: cover;
    flex: none;
}
.eviction-hint-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.eviction-hint-title { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.85); }
.eviction-hint-text { font-size: 11px; color: rgba(255,255,255,0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ======================================================
   FEATURE #7 — Account Page
   Design spec: Tanya Donska (_reports/from-tanya-donska-expert-uix-designer-51.md)
   ====================================================== */

/* ---- Account page wrapper ---- */
.account-page {
    max-width: 480px; margin: 0 auto;
    padding: 24px 20px 80px;
    display: flex; flex-direction: column; gap: 16px;
}

/* ---- Account section card ---- */
.account-section {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 20px;
}
.account-section-title {
    font-size: 11px; font-weight: 700;
    color: var(--text-muted);
    margin: 0 0 16px;
    text-transform: uppercase; letter-spacing: 0.08em;
}

/* ---- Identity ---- */
.account-email {
    font-size: 14px; color: var(--text-dim);
    margin: 0; word-break: break-all;
}

/* ---- Balance ---- */
.account-balance-row {
    display: flex; align-items: baseline;
    gap: 8px; margin-bottom: 20px; flex-wrap: wrap;
}
.account-balance-number {
    font-size: 48px; font-weight: 700;
    color: var(--color-accent); line-height: 1;
}
.account-balance-unit { font-size: 14px; color: var(--text-dim); font-weight: 400; }
.account-balance-sep  { font-size: 20px; color: var(--text-muted); }
.account-buy-btn      { margin-top: 0; width: 100%; }

/* ---- Pack tier cards ---- */
.pack-tiers {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}
.pack-tier {
    background: var(--card-bg, rgba(255,255,255,0.04));
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.pack-tier:hover {
    border-color: rgba(255,255,255,0.15);
}
.pack-tier--hero {
    border-color: var(--color-accent);
    box-shadow: 0 0 20px rgba(255,26,117,0.10);
}
.pack-tier-name {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
    text-shadow: 0 1px 0 rgba(0,0,0,0.8);
}
.pack-tier-badge {
    display: inline-block;
    background: var(--color-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 99px;
    margin-top: 4px;
}
.pack-tier-features {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.5;
}
.pack-tier-features li {
    padding-left: 0;
}
.pack-tier-wheel {
    color: #34D399;
    font-weight: 500;
}
.pack-tier-no-wheel {
    color: var(--text-muted);
    opacity: 0.5;
}
.pack-tier-bottom {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 4px;
}
.pack-tier-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}
.pack-tier-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s, transform 0.15s;
}
.pack-tier-arrow:hover {
    opacity: 0.85;
    transform: scale(1.08);
}
.pack-tier-arrow:active {
    transform: scale(0.95);
}
.pack-tier-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}
.pack-tier-arrow--blue {
    background: #3B82F6;
}
.pack-tier-arrow--green {
    background: #22C55E;
}
.pack-tier-arrow--gold {
    background: linear-gradient(135deg, #D4A017, #F5D060);
}
.pack-one-time {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin: 16px 0 0;
}

/* ---- Purchase history ---- */
.account-history-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 12px;
}
.account-history-row {
    display: flex; gap: 8px;
    font-size: 13px; align-items: baseline;
}
.account-history-date   { color: var(--text-dim); flex-shrink: 0; min-width: 96px; }
.account-history-desc   { color: var(--text-primary); flex: 1; }
.account-history-amount { color: var(--color-accent); font-weight: 700; flex-shrink: 0; }
.account-history-empty  { font-size: 14px; color: var(--text-muted); margin: 0; }

/* ---- Sign out (ghost button) ---- */
.account-signout { padding: 4px 0; }
.account-signout-btn {
    width: 100%; padding: 14px;
    font-family: inherit; font-size: 15px; font-weight: 600;
    color: var(--text-dim); background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-btn); cursor: pointer;
    min-height: 44px;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.account-signout-btn:hover {
    color: #fff; border-color: rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.04);
}

/* ======================================================
   FEATURE #10 — Spin the Wheel (guest conversion)
   Design spec: Tanya Donska (_reports/from-tanya-donska-expert-uix-designer-49.md)
   Architecture: Michael Koch (_reports/from-michael-koch-cto-27.md)
   ====================================================== */

/* ---- Wheel hero ---- */
.wheel-hero {
    text-align: center;
    padding: 48px 20px 20px;
    position: relative;
    z-index: 2;
}

/* ---- Wheel container ---- */
.wheel-container {
    display: flex; flex-direction: column;
    align-items: center; gap: 30px;
    padding: 44px 20px 12px;
    position: relative;
    z-index: 2;
}

/* ---- Flash & Dazzle: floating prize frames (background ambient layer) ---- */
.wheel-frames-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.prize-frame {
    position: absolute;
    display: flex; flex-direction: column; align-items: center;
    border: 4px solid var(--frame-color);
    border-style: ridge;
    border-radius: 6px;
    padding: 10px 12px 9px;
    background: rgba(18,18,24,0.92);
    color: var(--frame-color-light);
    box-shadow:
        0 4px 24px rgba(0,0,0,0.55),
        inset 0 0 0 1px var(--frame-color-light);
    min-width: 112px;
    max-width: 168px;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    animation: prize-rise var(--frame-duration) var(--frame-delay) infinite linear;
}

.prize-frame-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    margin-bottom: 4px;
}

.prize-frame-icon .wheel-icon { width: 30px; height: 30px; stroke-width: 1.8; }
.prize-frame-icon .wheel-row .wheel-icon { width: 22px; height: 22px; stroke-width: 2; }
.prize-frame-icon .wheel-mystery .wheel-icon { width: 36px; height: 36px; stroke-width: 2; }
.prize-frame-icon .wheel-qualifier {
    font-size: 18px;
    color: var(--frame-color-light);
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.prize-frame-desc {
    font-size: 10px; font-weight: 600;
    color: rgba(255,255,255,0.82);
    margin-top: 4px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.3;
    white-space: normal;
    word-break: keep-all;
}

@keyframes prize-rise {
    0%   { transform: translateY(112vh) rotate(calc(var(--frame-rotate) - 4deg)); opacity: 0; }
    8%   { opacity: var(--frame-opacity); }
    85%  { opacity: var(--frame-opacity); }
    100% { transform: translateY(-112vh) rotate(calc(var(--frame-rotate) + 4deg)); opacity: 0; }
}

.prize-frame-1  { left: 8%;  --frame-opacity: .40; --frame-duration: 18s; --frame-delay:  0s; --frame-color: #ff5757; --frame-color-light: #ff9494; --frame-rotate: -7deg; }
.prize-frame-2  { left: 80%; --frame-opacity: .42; --frame-duration: 21s; --frame-delay:  3s; --frame-color: #ffa040; --frame-color-light: #ffc784; --frame-rotate:  9deg; }
.prize-frame-3  { left: 22%; --frame-opacity: .32; --frame-duration: 16s; --frame-delay:  6s; --frame-color: #ffd842; --frame-color-light: #ffe78a; --frame-rotate:  5deg; }
.prize-frame-4  { left: 65%; --frame-opacity: .38; --frame-duration: 24s; --frame-delay:  9s; --frame-color: #4ed773; --frame-color-light: #92eeac; --frame-rotate: -11deg; }
.prize-frame-5  { left: 50%; --frame-opacity: .30; --frame-duration: 14s; --frame-delay: 12s; --frame-color: #4ee0d6; --frame-color-light: #95efe8; --frame-rotate:  8deg; }
.prize-frame-6  { left: 38%; --frame-opacity: .36; --frame-duration: 19s; --frame-delay: 15s; --frame-color: #6ba3ff; --frame-color-light: #a8c8ff; --frame-rotate: -6deg; }
.prize-frame-7  { left:  2%; --frame-opacity: .28; --frame-duration: 22s; --frame-delay:  1s; --frame-color: #b366ff; --frame-color-light: #d4a8ff; --frame-rotate: 13deg; }
.prize-frame-8  { left: 92%; --frame-opacity: .34; --frame-duration: 17s; --frame-delay:  5s; --frame-color: #ff66c2; --frame-color-light: #ffa8db; --frame-rotate: -8deg; }
.prize-frame-9  { left: 15%; --frame-opacity: .42; --frame-duration: 20s; --frame-delay:  8s; --frame-color: #ff5757; --frame-color-light: #ff9494; --frame-rotate:  6deg; }
.prize-frame-10 { left: 70%; --frame-opacity: .36; --frame-duration: 25s; --frame-delay: 11s; --frame-color: #ffa040; --frame-color-light: #ffc784; --frame-rotate: -9deg; }
.prize-frame-11 { left: 28%; --frame-opacity: .30; --frame-duration: 23s; --frame-delay: 14s; --frame-color: #ffd842; --frame-color-light: #ffe78a; --frame-rotate: 11deg; }
.prize-frame-12 { left: 58%; --frame-opacity: .40; --frame-duration: 15s; --frame-delay: 17s; --frame-color: #4ed773; --frame-color-light: #92eeac; --frame-rotate: -5deg; }
.prize-frame-13 { left: 45%; --frame-opacity: .34; --frame-duration: 26s; --frame-delay:  2s; --frame-color: #4ee0d6; --frame-color-light: #95efe8; --frame-rotate:  7deg; }
.prize-frame-14 { left: 88%; --frame-opacity: .30; --frame-duration: 18s; --frame-delay: 10s; --frame-color: #6ba3ff; --frame-color-light: #a8c8ff; --frame-rotate: -12deg; }
.prize-frame-15 { left:  6%; --frame-opacity: .36; --frame-duration: 22s; --frame-delay: 13s; --frame-color: #b366ff; --frame-color-light: #d4a8ff; --frame-rotate: 10deg; }
.prize-frame-16 { left: 35%; --frame-opacity: .40; --frame-duration: 19s; --frame-delay:  4s; --frame-color: #ff66c2; --frame-color-light: #ffa8db; --frame-rotate: -4deg; }

@media (max-width: 640px) {
    .prize-frame { min-width: 92px; max-width: 138px; padding: 7px 9px 6px; border-width: 3px; }
    .prize-frame-icon { min-height: 30px; }
    .prize-frame-icon .wheel-icon { width: 24px; height: 24px; }
    .prize-frame-icon .wheel-row .wheel-icon { width: 18px; height: 18px; }
    .prize-frame-icon .wheel-qualifier { font-size: 15px; }
    .prize-frame-desc { font-size: 9px; letter-spacing: 0.05em; }
}

@media (prefers-reduced-motion: reduce) {
    .wheel-frames-layer { display: none; }
}
.wheel-micro {
    font-size: 12px; color: var(--text-muted);
    margin: 0; text-align: center;
}

/* ---- Wheel ring (outer glow border) ---- */
.wheel-ring {
    position: relative;
    width: min(72vw, 320px); height: min(72vw, 320px);
    border-radius: 50%;
    box-shadow: 0 0 64px rgba(255,26,117,0.45), 0 0 120px rgba(255,26,117,0.15);
    flex-shrink: 0;
}

/* Always-alive animated halo: rainbow conic rotating CCW (opposite the disc) */
.wheel-ring::before {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        #ff5757, #ffa040, #ffd842, #4ed773,
        #4ee0d6, #6ba3ff, #b366ff, #ff66c2, #ff5757);
    animation: wheel-halo-spin 7s linear infinite;
    pointer-events: none;
    filter: blur(2px) saturate(1.3);
}
@keyframes wheel-halo-spin { to { transform: rotate(-360deg); } }

/* Center hub cap — covers the sharp 8-segment convergence point at center */
.wheel-ring::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 14%; height: 14%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #0a0a0a;
    border: 1.5px solid rgba(255,255,255,0.88);
    box-shadow: 0 0 16px 3px rgba(0,0,0,0.55);
    pointer-events: none;
    z-index: 5;
}

/* ---- Wheel disc (conic-gradient; rotated by JS) ---- */
.wheel-disc {
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 4px solid var(--pink);
    overflow: hidden; position: relative;
    box-shadow:
        inset 0 0 36px rgba(255,26,117,0.45),
        inset 0 0 90px rgba(0,0,0,0.40);
    /* JS sets background + transform */
}
.wheel-disc::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 50%,
        transparent 0%, transparent 38%,
        rgba(0,0,0,0.42) 100%);
    pointer-events: none;
    z-index: 1;
}
.wheel-disc::after {
    content: "";
    position: absolute; inset: 0;
    background: repeating-conic-gradient(from 0deg,
        transparent 0deg 44.6deg,
        rgba(245,166,35,0.55) 44.6deg 45deg);
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 2;
}

/* ---- Segment labels (positioned by JS, rotate with disc) ---- */
.wheel-label {
    position: absolute;
    top: 50%; left: 50%;
    transform-origin: center center;
    color: #fff;
    pointer-events: none;
    z-index: 3;
    translate: -50% -50%;
    filter:
        drop-shadow(0 1px 3px rgba(0,0,0,0.85))
        drop-shadow(0 0 6px rgba(0,0,0,0.45));
}

.wheel-icon {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    width: 22px; height: 22px;
}

.wheel-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
}
.wheel-row .wheel-icon { width: 17px; height: 17px; stroke-width: 2.2; }

.wheel-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.wheel-qualifier {
    font-size: 14px; font-weight: 800;
    color: #fff;
    letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    line-height: 1;
}

/* ---- Mystery slot — subtle shimmer to dazzle the eye ---- */
.wheel-mystery {
    display: inline-flex;
    animation: mystery-shimmer 2.4s ease-in-out infinite alternate;
}
.wheel-mystery .wheel-icon { width: 28px; height: 28px; stroke-width: 2.4; }

@keyframes mystery-shimmer {
    from { opacity: 0.78; filter: drop-shadow(0 0 4px  rgba(255,255,255,0.30)); }
    to   { opacity: 1.00; filter: drop-shadow(0 0 12px rgba(255,255,255,0.85)); }
}

/* ---- Pointer (▼ at top of ring) ---- */
.wheel-pointer {
    position: absolute; top: -34px; left: 50%;
    transform: translateX(-50%);
    width: 44px; height: 40px;
    pointer-events: none;
    z-index: 10;
    filter:
        drop-shadow(0 2px 6px rgba(255,26,117,0.65))
        drop-shadow(0 0 10px rgba(255,26,117,0.40));
}
.wheel-pointer svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---- Spin button ---- */
.spin-btn { max-width: min(88vw, 340px); }

/* ======================================================
   FEATURE #10 — Auth nudge bottom sheet
   ====================================================== */

.auth-nudge-backdrop {
    position: fixed; inset: 0;
    background: rgba(8,8,15,0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 300;
    display: none;          /* shown by JS after prize reveal */
    align-items: flex-end;
}

.auth-nudge-sheet {
    width: 100%;
    background: rgba(18,18,24,0.98);
    border-radius: 28px 28px 0 0;
    padding: 20px 24px env(safe-area-inset-bottom, 28px);
    display: flex; flex-direction: column;
    gap: 14px; align-items: center;
    box-shadow: 0 -8px 48px rgba(0,0,0,0.70);
    min-height: 320px;
}

.auth-nudge-handle {
    width: 40px; height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.18);
    align-self: center; margin-bottom: 4px;
}

.auth-nudge-title {
    font-size: 22px; font-weight: 700;
    color: var(--text-primary); margin: 0;
    text-align: center;
}

.auth-nudge-sub {
    font-size: 12px; color: var(--text-muted);
    margin: 0; text-align: center;
}

/* ---- Prize reveal card (inside nudge) ---- */
.prize-reveal {
    text-align: center; line-height: 1.3;
}
.prize-style {
    font-size: 20px; font-weight: 700;
    color: var(--pink); margin: 0;
    letter-spacing: -0.01em;
}
.prize-credit {
    font-size: 14px; color: var(--text-dim);
    margin: 4px 0 0;
}

/* ---- Wheel code inputs ---- */
.wheel-code-step { width: 100%; }

/* ---- Post-claim toast ---- */
.wheel-toast {
    position: fixed; top: -60px; left: 50%;
    transform: translateX(-50%);
    background: rgba(18,18,24,0.97);
    border: 1px solid var(--pink);
    border-radius: var(--radius-btn);
    padding: 12px 24px;
    font-size: 14px; font-weight: 600;
    color: var(--text-primary);
    box-shadow: 0 4px 24px rgba(255,26,117,0.30);
    transition: top 0.4s ease;
    z-index: 400; white-space: nowrap;
}
.wheel-toast--visible { top: 20px; }

/* ---- Chromatic aberration glow on wheel ring during spin ---- */
.wheel-ring.spinning {
    box-shadow:
        0 0 64px rgba(255,26,117,0.60),
        0 0 120px rgba(61,46,255,0.30),
        -2px 0 8px rgba(255,87,87,0.50),
        2px 0 8px rgba(61,46,255,0.50);
    animation: ca-pulse 0.4s ease-in-out infinite alternate;
}
@keyframes ca-pulse {
    from { box-shadow:
        0 0 64px rgba(255,26,117,0.60),
        0 0 120px rgba(61,46,255,0.30),
        -2px 0 8px rgba(255,87,87,0.50),
        2px 0 8px rgba(61,46,255,0.50); }
    to   { box-shadow:
        0 0 80px rgba(255,26,117,0.80),
        0 0 140px rgba(61,46,255,0.45),
        -3px 0 12px rgba(255,87,87,0.65),
        3px 0 12px rgba(61,46,255,0.65); }
}

/* ---- Wide-screen constraint (tablet / desktop) ---- */
@media (min-width: 600px) {
    .wheel-ring { width: 320px; height: 320px; }
    .auth-nudge-sheet { max-width: 440px; margin: 0 auto; border-radius: 28px; }
    .auth-nudge-backdrop { align-items: center; }
}

/* ---- Mobile sizing for wheel icons ---- */
@media (max-width: 600px) {
    .wheel-icon { width: 18px; height: 18px; }
    .wheel-row .wheel-icon { width: 14px; height: 14px; }
    .wheel-mystery .wheel-icon { width: 22px; height: 22px; }
    .wheel-qualifier { font-size: 12px; }
}

/* ---- LED perimeter chase (always-on dim, marquee-chase during spin) ---- */
.wheel-leds {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 4;
    --led-r: calc(min(36vw, 160px) + 6px);
}
.wheel-led {
    position: absolute;
    top: calc(50% - 4px);
    left: calc(50% - 4px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 220, 180, 0.18);
    transform: rotate(calc(var(--led-i) * 15deg)) translateY(calc(var(--led-r) * -1));
}
.wheel-ring.spinning .wheel-led {
    animation: led-chase 1.2s linear infinite;
    animation-delay: calc(var(--led-i) * -0.05s);
}
@keyframes led-chase {
    0%, 90%, 100% {
        background: rgba(255, 220, 180, 0.22);
        box-shadow: none;
    }
    10% {
        background: #ffd842;
        box-shadow: 0 0 10px #ffd842, 0 0 20px rgba(255, 216, 66, 0.55);
    }
}

/* ---- Drumroll wobble (anticipation; runs from click → server response) ---- */
.wheel-disc.drumroll {
    animation: drumroll-wobble 0.32s ease-in-out infinite;
}
@keyframes drumroll-wobble {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(-2.5deg); }
    75%      { transform: rotate(2.5deg); }
}

/* ---- Win flash + pointer pulse on land (beat 1 of two-beat reveal) ---- */
.wheel-ring.win-flash {
    animation: win-flash-anim 0.6s ease-out;
}
@keyframes win-flash-anim {
    0%   { box-shadow:
            0 0 80px rgba(255, 255, 220, 0.95),
            0 0 200px rgba(255, 220, 100, 0.55); }
    100% { box-shadow:
            0 0 64px rgba(255, 26, 117, 0.45),
            0 0 120px rgba(255, 26, 117, 0.15); }
}
.wheel-pointer.win-pulse {
    animation: pointer-pulse 0.5s ease-out;
}
@keyframes pointer-pulse {
    0%   { transform: translateX(-50%) scale(1); }
    50%  { transform: translateX(-50%) scale(1.35); }
    100% { transform: translateX(-50%) scale(1); }
}

/* ---- Confetti burst (CSS-only; positioned at pointer on win) ---- */
.confetti-burst {
    position: fixed;
    pointer-events: none;
    z-index: 350;
    width: 0;
    height: 0;
}
.confetti {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 12px;
    background: hsl(var(--ch), 82%, 60%);
    border-radius: 1px;
    transform: translate(-50%, -50%);
    animation: confetti-fly 1.4s cubic-bezier(0.4, 0.6, 0.5, 1) forwards;
}
@keyframes confetti-fly {
    0%   { transform: translate(-50%, -50%) rotate(0deg); opacity: 1; }
    100% {
        transform:
            translate(calc(-50% + var(--cx) * 280px),
                       calc(-50% + var(--cy) * 280px + 120px))
            rotate(720deg);
        opacity: 0;
    }
}

/* ---- Celebration card (beat 1; floats above wheel for 1.2s before nudge slides in) ---- */
.celebration-card {
    position: fixed;
    left: 50%;
    top: 32%;
    z-index: 350;
    background: rgba(18, 18, 24, 0.98);
    border: 2px solid var(--pink);
    border-radius: 16px;
    padding: 18px 28px;
    text-align: center;
    box-shadow:
        0 0 48px rgba(255, 26, 117, 0.55),
        0 12px 40px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: cel-card-in 1.2s ease-out forwards;
    max-width: min(82vw, 360px);
}
.cel-headline {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--pink);
    margin: 0 0 8px;
}
.cel-prize {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}
@keyframes cel-card-in {
    0%   { transform: translate(-50%, -50%) scale(0.6);  opacity: 0; }
    18%  { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
    30%  { transform: translate(-50%, -50%) scale(1.0);  opacity: 1; }
    80%  { transform: translate(-50%, -50%) scale(1.0);  opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(0.92); opacity: 0; }
}
@keyframes cel-card-fade {
    0%, 80% { opacity: 1; }
    100%    { opacity: 0; }
}

/* ---- Spin CTA wrapper (button + trust micro-line, tight 8px gap) ---- */
.spin-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}
.wheel-trust {
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin: 0;
    text-align: center;
    line-height: 1.4;
}

/* ---- Reduced motion overrides for wheel ---- */
@media (prefers-reduced-motion: reduce) {
    .wheel-disc  { transition: none !important; }
    .wheel-disc.drumroll { animation: none; }
    .wheel-ring.spinning { animation: none; }
    .wheel-ring.win-flash, .wheel-pointer.win-pulse { animation: none; }
    .wheel-ring::before { animation: none; }
    .wheel-ring.spinning .wheel-led { animation: none; }
    .wheel-mystery { animation: none; opacity: 1; }
    .wheel-toast { transition: none; }
    .confetti { animation: none; opacity: 0; }
    .celebration-card { animation: cel-card-fade 1.2s ease-out forwards; }
}

/* ======================================================
   FEATURE — 1+1=1 Chooser Page (/mimecam/choose-img/:id, /mimecam/choose-vid/:id)
   UX spec: Tanya Donska (_reports/from-tanya-donska-expert-uix-designer-53.md §Feature 1)
   ====================================================== */

/* ---- Minimal header ---- */
.choice-header { padding: 24px 24px 0; }
.choice-brand  { font-size: 14px; font-weight: 700; color: var(--text-muted); letter-spacing: -0.02em; }

/* ---- Question frame ---- */
.choice-question { text-align: center; margin: 32px 0; }
.choice-heading  { font-size: 28px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; margin: 0 0 8px; }
.choice-subline  { font-size: 14px; color: var(--text-dim); margin: 0; }
.choice-disclosure { font-size: 11px; color: rgba(255,255,255,0.30); margin: 6px 0 0; }

/* ---- Cards row ---- */
.choice-cards-row {
    display: flex; gap: 16px;
    padding: 0 20px; max-width: 760px; margin: 0 auto 24px;
}
.choice-card {
    flex: 1; border-radius: var(--radius-card);
    overflow: hidden; background: var(--surface);
    border: 1px solid var(--border-subtle); box-shadow: var(--shadow-mid);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}
.choice-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255,26,117,0.35);
    box-shadow: var(--shadow-high), 0 0 0 1px rgba(255,26,117,0.25),
        -1px 0 10px rgba(255,87,87,0.35), 1px 0 10px rgba(61,46,255,0.35);
}
.choice-img {
    width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block;
    transition: transform 0.2s ease;
}
.choice-card:hover .choice-img { transform: scale(1.01); }
.choice-footer {
    padding: 10px 12px 12px;
    background: rgba(0,0,0,0.65); backdrop-filter: blur(8px);
}
.choice-model-label {
    font-size: 10px; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 8px;
}
.choice-cta { width: 100%; border-radius: var(--radius-md); font-size: 15px; padding: 12px; }
.choice-pending-label { font-size: 12px; color: var(--text-muted); margin: 0; }

/* ---- Prompt section ---- */
.choice-prompt-details { text-align: center; padding: 0 40px 40px; }
.choice-prompt-toggle  { font-size: 12px; color: var(--text-muted); cursor: pointer; list-style: none; }
.choice-prompt-text    { font-size: 13px; color: var(--text-dim); line-height: 1.5; margin: 8px 0 0; }

/* ---- Mobile: stack cards vertically ---- */
@media (max-width: 480px) {
    .choice-cards-row { flex-direction: column; max-width: 360px; }
    .choice-img { aspect-ratio: 1 / 1; }
}

/* ======================================================
   FEATURE — "Needs Choice" card on Creations page
   UX spec: Tanya Donska (§Feature 4)
   ====================================================== */

.creation-card--needs-choice {
    border: 2px solid rgba(255,26,117,0.45);
    box-shadow: 0 0 0 1px rgba(255,26,117,0.20), var(--shadow-mid);
}
.creation-choose-btn {
    display: block; width: 100%; padding: 10px 12px;
    font-size: 13px; font-weight: 600; color: var(--pink);
    background: rgba(255,26,117,0.10); border: 1px solid rgba(255,26,117,0.20);
    border-radius: var(--radius-md); cursor: pointer; text-align: center;
    text-decoration: none; transition: background 0.15s ease;
}
.creation-choose-btn:hover { background: rgba(255,26,117,0.18); }

/* ======================================================
   FEATURE — Failed Generation Popup (bottom sheet)
   UX spec: Tanya Donska (§Feature 3) — z-index: 150
   ====================================================== */

.failed-popup-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.60);
    backdrop-filter: blur(8px); z-index: 150;
    display: flex; align-items: flex-end;
    opacity: 0; transition: opacity 0.2s ease; pointer-events: none;
}
.failed-popup--visible { opacity: 1; pointer-events: all; }
.failed-popup-sheet {
    width: 100%; border-radius: 28px 28px 0 0;
    background: rgba(18,18,24,0.98); backdrop-filter: blur(20px);
    box-shadow: 0 -8px 48px rgba(0,0,0,0.70);
    padding: 20px 24px env(safe-area-inset-bottom, 28px);
    max-height: 80vh; overflow-y: auto;
}
.failed-popup-handle {
    width: 40px; height: 4px; border-radius: 2px;
    background: rgba(255,255,255,0.18); margin: 0 auto 20px;
}
.failed-popup-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px;
}
.failed-popup-title { font-size: 16px; font-weight: 700; color: #ff4444; }
.failed-popup-close {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,0.08); border: none;
    color: var(--text-muted); font-size: 16px; cursor: pointer;
}
.failed-popup-meta { font-size: 13px; color: var(--text-muted); margin: 0 0 16px; }
.failed-refund-card {
    display: flex; align-items: flex-start; gap: 10px;
    background: rgba(52,211,153,0.08); border: 1px solid rgba(52,211,153,0.20);
    border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 20px;
}
.failed-refund-icon  { font-size: 16px; color: #34D399; flex-shrink: 0; margin-top: 1px; }
.failed-refund-text  { font-size: 14px; color: var(--text-dim); line-height: 1.5; }
.failed-refund-text strong { color: #34D399; }
.failed-popup-section-label {
    font-size: 10px; font-weight: 700; color: var(--text-muted);
    letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 6px;
}
.failed-popup-prompt { font-size: 14px; color: var(--text-primary); line-height: 1.6; margin: 0 0 16px; }
.failed-popup-thumbs { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 20px; }
.failed-popup-thumb  {
    width: 56px; height: 56px; border-radius: var(--radius-sm);
    object-fit: cover; border: 1px solid var(--border-subtle);
}
.failed-popup-close-btn {
    border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-btn);
    padding: 14px; font-size: 15px; font-weight: 600;
    color: var(--text-dim); background: transparent; width: 100%; cursor: pointer;
}

/* ======================================================
   FEATURE — Image Detail Sheet (Creations Page)
   UX spec: Tanya Donska (_reports/from-tanya-donska-expert-uix-designer-93.md §§4-14)
   z-index: 160 (above failed popup 150, below auth nudge 300)
   ====================================================== */

.detail-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 160;
    display: flex; align-items: flex-end;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.detail-backdrop.detail-open {
    opacity: 1;
    pointer-events: all;
}

.detail-sheet {
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    background: rgba(18,18,24,0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
    box-shadow: 0 -8px 48px rgba(0,0,0,0.70);
    padding: 12px 24px env(safe-area-inset-bottom, 28px);
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
}
.detail-backdrop.detail-open .detail-sheet {
    transform: translateY(0);
}

.detail-handle-bar {
    width: 40px; height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.18);
    margin: 0 auto 20px;
}

.detail-primary-img {
    width: 100%;
    border-radius: 16px;
    display: block;
    object-fit: cover;
    box-shadow:
        0 2px 8px rgba(0,0,0,0.55),
        0 12px 40px rgba(0,0,0,0.45),
        0 0 60px rgba(255,26,117,0.06);
    animation: slot-fade-in 0.3s ease-out 0.15s both;
}

.detail-hero {
    position: relative;
    min-height: 100px;
}

.detail-hero-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 1;
}
.detail-hero-loader--visible {
    opacity: 1;
}
.detail-hero-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255,255,255,0.15);
    border-top-color: #ff1a75;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

.detail-fab {
    position: absolute;
    right: 12px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #000;
    border: 1.5px solid #fff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    z-index: 2;
    box-shadow: 0 2px 10px rgba(0,0,0,0.55);
    transition: transform 0.15s ease, background 0.15s ease;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}
.detail-fab:hover  { background: #111; }
.detail-fab:active { transform: scale(0.92); }
.detail-download-fab { bottom: 60px; }
.detail-remake-fab   { bottom: 112px; }
.detail-fab-spinner { animation: mc-spin 0.8s linear infinite; }
@keyframes mc-spin { to { transform: rotate(360deg); } }

/* ---- Secondary comparison row ---- */
.detail-secondary-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}
.detail-secondary-thumb {
    width: 120px; height: 120px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 1px 4px rgba(0,0,0,0.40);
    flex-shrink: 0;
}
.detail-secondary-thumb--winner {
    border: 2px solid var(--pink);
    box-shadow:
        0 1px 4px rgba(0,0,0,0.40),
        0 0 0 1px rgba(255,26,117,0.30);
}
.detail-vs-badge {
    font-size: 11px; font-weight: 700;
    color: rgba(255,255,255,0.50);
    background: rgba(255,255,255,0.10);
    border-radius: 999px;
    padding: 3px 8px;
    flex-shrink: 0;
    letter-spacing: 0.04em;
}

/* ---- Prompt section ---- */
.detail-prompt-section {
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 12px 16px;
    margin-top: 16px;
}
.detail-prompt-label {
    font-size: 10px; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 6px;
}
.detail-prompt-text {
    font-size: 14px; color: var(--text-dim);
    line-height: 1.6; margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.detail-prompt-text.expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}
.detail-prompt-expand {
    font-size: 12px; color: var(--text-muted);
    cursor: pointer; margin: 6px 0 0; display: block;
}
.detail-prompt-expand:hover { color: var(--text-dim); }

/* ---- Copy-prompt button (used in detail sheet + failed popup) ---- */
.prompt-section-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 6px;
}
.prompt-section-footer .detail-prompt-expand {
    margin: 0;
    margin-right: auto;
}
.prompt-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    margin: 0;
    font-family: inherit;
    font-size: 12px;
    color: var(--text-muted);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color 120ms ease;
}
.prompt-copy-btn:hover { color: var(--text-dim); }
.prompt-copy-btn--copied { color: #34d399; }
.prompt-copy-icon {
    flex-shrink: 0;
}
.prompt-copy-label {
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* ---- Alternative thumbnails (post-hero, smaller versions) ---- */
.detail-alt-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 12px;
    gap: 6px;
}
.detail-alt-label {
    font-size: 10px; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
}
.detail-alt-thumbs {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.detail-alt-thumb {
    height: 140px;
    aspect-ratio: 3 / 5;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--border-subtle);
    box-shadow: 0 1px 4px rgba(0,0,0, 0.40);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.detail-sheet[data-aspect-ratio="square"] .detail-alt-thumb { aspect-ratio: 1 / 1; }
.detail-sheet[data-aspect-ratio="landscape"] .detail-alt-thumb { aspect-ratio: 5 / 3; }
.detail-alt-thumb--active {
    border-color: var(--pink);
    box-shadow:
        0 1px 4px rgba(0,0,0,0.40),
        0 0 0 1px rgba(255,26,117,0.30);
}
.detail-alt-thumb--video {
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
}
.detail-alt-thumb--video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.detail-alt-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: rgba(255,255,255,0.70);
    pointer-events: none;
}

/* ---- Image zoom viewer ---- */
.zoom-viewer {
    overflow: hidden;
    position: relative;
    border-radius: 16px;
}
.zoom-inner {
    transform-origin: 0 0;
    will-change: transform;
}
.zoom-inner--animated {
    transition: transform 0.15s ease;
}
.zoom-inner img {
    display: block;
    width: 100%;
    border-radius: 16px;
    object-fit: cover;
    box-shadow:
        0 2px 8px rgba(0,0,0,0.55),
        0 12px 40px rgba(0,0,0,0.45),
        0 0 60px rgba(255,26,117,0.06);
    animation: slot-fade-in 0.3s ease-out 0.15s both;
    pointer-events: none;
}
.zoom-controls {
    position: absolute;
    bottom: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 3;
}
.zoom-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.70);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    line-height: 1;
    transition: transform 0.12s ease, background 0.12s ease;
}
.zoom-btn:hover  { background: rgba(0,0,0,0.85); }
.zoom-btn:active { transform: scale(0.92); }
.zoom-indicator {
    position: absolute;
    top: 8px; right: 8px;
    font-size: 11px; font-weight: 600;
    color: rgba(255,255,255,0.50);
    background: rgba(0,0,0,0.50);
    padding: 2px 8px;
    border-radius: 10px;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.zoom-indicator--visible { opacity: 1; }
.zoom-pan-btn {
    position: absolute;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(0,0,0,0.70);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    line-height: 1;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.12s ease, background 0.12s ease, opacity 0.15s ease;
}
.zoom-viewer--zoomed .zoom-pan-btn {
    opacity: 1;
    pointer-events: all;
}
.zoom-pan-btn:hover  { background: rgba(0,0,0,0.85); }
.zoom-pan-btn:active { transform: scale(0.92); }
.zoom-pan-n { top: 6px;   left: 50%; transform: translateX(-50%); }
.zoom-pan-s { bottom: 6px; left: 50%; transform: translateX(-50%); }
.zoom-pan-w { left: 6px;   top: 50%;  transform: translateY(-50%); }
.zoom-pan-e { right: 6px;  top: 50%;  transform: translateY(-50%); }
.zoom-pan-n:active { transform: translateX(-50%) scale(0.92); }
.zoom-pan-s:active { transform: translateX(-50%) scale(0.92); }
.zoom-pan-w:active { transform: translateY(-50%) scale(0.92); }
.zoom-pan-e:active { transform: translateY(-50%) scale(0.92); }

/* ---- Default selector row ---- */
.detail-default-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    padding-top: 16px;
    padding-bottom: 8px;
    gap: 14px;
}
.detail-default-hint {
    font-size: 9px;
    color: rgba(255,255,255,0.30);
    margin: 0;
}
.detail-default-thumbs {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.detail-default-thumb {
    position: relative;
    cursor: pointer;
    padding-bottom: 24px;
    transition: transform 0.12s ease;
}
.detail-default-thumb:active { transform: scale(0.95); }
.detail-default-thumb-img {
    height: 112px;
    aspect-ratio: 3 / 5;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid var(--border-subtle);
    box-shadow: 0 1px 4px rgba(0,0,0,0.35);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, height 0.15s ease;
}
.detail-sheet[data-aspect-ratio="square"] .detail-default-thumb-img { aspect-ratio: 1 / 1; }
.detail-sheet[data-aspect-ratio="landscape"] .detail-default-thumb-img { aspect-ratio: 5 / 3; }
.detail-default-thumb--viewing .detail-default-thumb-img {
    border-color: var(--pink);
    box-shadow:
        0 1px 4px rgba(0,0,0,0.40),
        0 0 0 2px rgba(255,26,117,0.30);
    height: 128px;
}
.detail-default-dot {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20px; height: 20px;
    border-radius: 50%;
    background: rgba(255,255,255,0.10);
    border: 2px solid rgba(255,255,255,0.25);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.detail-default-dot:hover {
    border-color: var(--pink);
}
.detail-default-thumb--main .detail-default-dot {
    background: var(--pink);
    border-color: var(--pink);
}

/* ---- Action area ---- */
.detail-actions {
    margin-top: 20px;
    display: flex; flex-direction: column; gap: 8px;
    padding-bottom: 8px;
}
.detail-danger-zone {
    padding-top: 40px;
}
.detail-delete-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; padding: 10px 0;
    background: rgba(255,68,68,0.08); color: #ff4444;
    border: 1px solid rgba(255,68,68,0.18); border-radius: var(--radius-btn);
    font-family: inherit; font-size: 13px; font-weight: 600;
    cursor: pointer; transition: background 0.15s ease;
}
.detail-delete-btn:hover { background: rgba(255,68,68,0.18); }
.detail-delete-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- Wide-screen constraint ---- */
@media (min-width: 600px) {
    .detail-sheet { max-width: 480px; margin: 0 auto; border-radius: 28px; }
    .detail-backdrop { align-items: center; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .detail-backdrop    { transition: none; }
    .detail-sheet       { transition: none; }
    .detail-primary-img { animation: none; }
}

/* ======================================================
   FEATURE — Creative Darwinism: Preference Loop
   CTO plan: Michael Koch (_reports/from-michael-koch-cto-33.md)
   UX spec:  Tanya Donska  (_reports/from-tanya-donska-expert-uix-designer-40.md)
   ====================================================== */

/* ---- Creations page: two-zone layout ---- */
.creations-zone { padding: 0; }

.creations-zone--divider {
    border-top: 1px solid rgba(255,255,255,0.06);
    margin-top: 24px;
    padding-top: 24px;
}

.creations-zone-label {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: rgba(255,255,255,0.3);
    margin: 0 0 12px;
    padding: 0 20px;
}

.creations-zone-label--eye { color: #ff1a75; }

/* ---- Choice card in "Needs Your Eye" zone ---- */
/* Card is now an <a> tag — keep block layout, no underline */
a.creation-card--needs-choice {
    display: block;
    text-decoration: none;
    color: inherit;
}

.creation-choice-tap {
    font-size: 12px;
    color: rgba(255,255,255,0.35);
    margin: 0;
    text-align: center;
}

/* ---- Choice cards zone: 2-column max (wider cards for comparison) ---- */
.creations-grid--choice {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    max-width: 480px;
}

/* ---- Choice carousel ("Needs Your Eye" one-at-a-time) ---- */
.choice-carousel {
    max-width: 380px;
    margin: 0 auto;
    padding: 0 20px 20px;
}

.choice-carousel-counter {
    text-align: center;
    font-size: 13px;
    color: var(--text-dim);
    margin: 12px 0;
    font-variant-numeric: tabular-nums;
}

.choice-carousel-current {
    font-weight: 700;
    color: var(--text-primary);
}

.choice-carousel-slides {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
}

.choice-carousel-slide {
    flex: 1;
    min-width: 0;
    padding: 4px;
}

.choice-carousel-slide .creation-card {
    min-width: 0;
}

.choice-carousel-slide video {
    max-width: 100%;
    min-width: 0;
}

.choice-carousel-prev,
.choice-carousel-next {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.15);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.choice-carousel-prev:hover,
.choice-carousel-next:hover {
    background: rgba(0,0,0,0.75);
    border-color: rgba(255,255,255,0.30);
}

.choice-carousel-prev:disabled,
.choice-carousel-next:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---- Account page: "Your Eye" taste signal ---- */
.account-eye-section { display: flex; flex-direction: column; gap: 12px; }

.eye-dots-row {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    padding: 4px 0;
}

.eye-dot-wrap {
    display: flex; flex-direction: column;
    align-items: center; gap: 6px;
}

.eye-dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
}

.eye-dot--preferred {
    background: #ff1a75;
    box-shadow: 0 0 10px 2px rgba(255,26,117,0.35);
}

/* Video iris dot — amber preferred state (mirrors image pink) */
.eye-dot--preferred-motion {
    background: var(--color-accent);
    box-shadow: 0 0 10px 2px rgba(245, 166, 35, 0.35);
}

.eye-dot-label {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    margin: 0;
}

.eye-body {
    font-size: 15px;
    color: rgba(255,255,255,0.85);
    margin: 0;
}

.eye-count {
    font-size: 12px;
    color: rgba(255,255,255,0.35);
    margin: 0;
}

/* ---- Choice page: "Your usual pick" label ---- */
.choice-card--your-usual { border-color: rgba(255,26,117,0.25); }

.choice-usual-label {
    font-size: 11px;
    color: rgba(255,26,117,0.65);
    letter-spacing: 0.04em;
    margin: 0 0 6px;
    text-transform: uppercase;
}

/* ---- Choice page: resonance animation (Tanya §Spec 3b) ---- */

.choice-card--selected {
    animation: choice-affirm 1.2s ease forwards;
    pointer-events: none;
}

@keyframes choice-affirm {
    0%   { transform: scale(1);    box-shadow: 0 0 0   0  rgba(255,26,117,0); }
    30%  { transform: scale(1.04); box-shadow: 0 0 32px 8px rgba(255,26,117,0.45); }
    80%  { transform: scale(1.04); box-shadow: 0 0 20px 4px rgba(255,26,117,0.2); }
    100% { transform: scale(1.02); box-shadow: 0 0 10px 2px rgba(255,26,117,0.1); }
}

.choice-card--rejected {
    opacity: 0.18;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.choice-confirm-label {
    font-size: 13px;
    color: rgba(255,26,117,0.75);
    text-align: center;
    margin-top: 10px;
    opacity: 0;
    animation: choice-confirm-fade 1.2s ease forwards;
}

@keyframes choice-confirm-fade {
    0%   { opacity: 0; transform: translateY(4px); }
    25%  { opacity: 1; transform: translateY(0); }
    75%  { opacity: 1; }
    100% { opacity: 0; }
}

/* ---- Reduced motion overrides for preference loop ---- */
@media (prefers-reduced-motion: reduce) {
    .choice-card--selected  { animation: none; }
    .choice-card--rejected  { transition: none; }
    .choice-confirm-label   { animation: none; }
}

/* ===== Video Generation Pipeline (Feature: video dispatch) =====
   Design spec: Tanya Donska (_reports/from-tanya-donska-expert-uix-designer-10.md)
   Architecture: Michael Koch (_reports/from-michael-koch-cto-16.md)
   Amber = "in progress, wait" | Pink = "needs your eye, act now"  */

/* ---- Design tokens ---- */
:root {
    --amber-glow-soft: rgba(245, 158, 11, 0.25);
    --amber-glow-mid:  rgba(245, 158, 11, 0.45);
}

/* ---- Pending video card ---- */
.creation-card--video-pending {
    border-color: rgba(245, 158, 11, 0.30);
    animation: amber-breathe 2.4s ease-in-out infinite;
}

@keyframes amber-breathe {
    0%,  100% { box-shadow: 0 0 0 1px rgba(245,158,11,0.20), var(--shadow-low); }
    50%        { box-shadow: 0 0 0 2px rgba(245,158,11,0.40), var(--shadow-mid); }
}

.video-pending-icon {
    font-size: 36px;
    color: rgba(245, 158, 11, 0.55);
    animation: video-icon-pulse 2.4s ease-in-out infinite;
}

@keyframes video-icon-pulse {
    0%,  100% { opacity: 0.55; transform: scale(1); }
    50%        { opacity: 0.85; transform: scale(1.06); }
}

/* ---- Video element in choice card ---- */
.choice-video {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
}
@media (max-width: 480px) {
    .choice-video { aspect-ratio: 1 / 1; }
}

/* ---- Video thumbnail on creations grid ---- */
.creation-video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

.video-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 50%;
    pointer-events: none;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ---- Detail sheet: video section ---- */
.detail-video-section {
    margin-top: 16px;
}

.detail-video-player {
    width: 100%;
    border-radius: var(--radius-lg);
    display: block;
    box-shadow:
        0 2px 8px rgba(0,0,0,0.55),
        0 12px 40px rgba(0,0,0,0.45),
        var(--shadow-amber-soft);
    background: #000;
}

/* ---- Detail sheet: video CTA buttons ---- */
.detail-video-btn {
    width: 100%;
    margin-top: 10px;
}

.detail-video-confirming {
    margin-top: 10px;
    padding: 24px 16px;
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.18);
    border-radius: var(--radius-md);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.detail-video-queued-title {
    font-size: 16px; font-weight: 600;
    color: var(--text-primary); margin: 0;
}
.detail-video-queued-sub {
    font-size: 13px; color: var(--text-dim);
    margin: 0; line-height: 1.45;
}
.detail-video-queued-note {
    font-size: 12px; color: var(--text-faint);
    margin: 0;
}

/* ---- Pre-tap hint below "Turn into Video" button ---- */
.detail-video-hint {
    font-size: 12px;
    color: rgba(245, 158, 11, 0.65);
    text-align: center;
    margin: 6px 0 0;
}

/* ---- Origin image row (video-hero detail layout) ---- */
.detail-origin-row {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}
.detail-origin-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.detail-origin-thumb {
    width: 80px; height: 80px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--border-subtle);
    opacity: 0.65;
}
.detail-origin-label {
    font-size: 10px; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
    text-align: center;
}

.detail-video-buymore {
    display: block;
    margin-top: 10px;
    padding: 12px 16px;
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 14px;
    background: rgba(245, 158, 11, 0.06);
    color: var(--color-accent, #F59E0B);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
}

/* ---- Reduced motion overrides for video ---- */
@media (prefers-reduced-motion: reduce) {
    .creation-card--video-pending { animation: none; }
    .video-pending-icon            { animation: none; }
}

/* ---- Detail sheet: icon-based Download button (2026-04-27) ---- */
.detail-download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
    padding: 12px 16px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-btn, 14px);
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.detail-download-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.20);
}
.detail-download-icon {
    font-size: 18px;
    line-height: 1;
    display: inline-block;
}

/* ---- Video share link in detail sheet ---- */
.detail-video-share-link {
    display: block;
    margin-top: 8px;
    padding: 10px 16px;
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: var(--radius-btn, 14px);
    background: rgba(245, 158, 11, 0.06);
    color: var(--color-accent, #f5a623);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: background 0.15s ease;
}
.detail-video-share-link:hover { background: rgba(245, 158, 11, 0.12); }

/* ---- Pagination ---- */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 24px 20px 48px;
    max-width: 900px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dim);
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    user-select: none;
}

.pagination-btn:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.16);
}

.pagination-btn--current {
    color: var(--text-primary);
    background: rgba(255,26,117,0.12);
    border-color: rgba(255,26,117,0.30);
    cursor: default;
}

.pagination-btn--arrow {
    font-size: 18px;
    padding: 0 12px;
}

.pagination-btn--disabled {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.pagination-ellipsis {
    color: var(--text-muted);
    font-size: 14px;
    padding: 0 4px;
    user-select: none;
}