/* ==========================================================================
   V2 polish — gallery, editor, timeline, crop boxes, toasts, modals,
   marketing surfaces (pricing), reduced motion. All colors come from tokens
   in site-v2.css. Deliberately dark-only surfaces (video workbench, console,
   phone mockup) stay dark in both themes because they frame media, not UI.
   ========================================================================== */

/* ---- gallery / clip cards ---- */
.clip-card {
    background: var(--v2-fill);
    border: 1px solid var(--v2-border);
    border-radius: var(--r-lg);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.clip-card:hover {
    transform: translateY(-3px);
    border-color: rgba(76, 76, 255, 0.4);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(76, 76, 255, 0.08);
}

.new-clips-badge {
    background: linear-gradient(135deg, #1014EF, #2F74C9);
    color: #fff;
    box-shadow: 0 4px 14px rgba(16, 20, 239, 0.4);
    font-weight: 700;
}

.clip-name { font-weight: 700; letter-spacing: -0.01em; }

/* ---- editor modal (video workbench: dark surface in both themes) ---- */
#editor-modal {
    background: rgba(5, 5, 5, 0.97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.editor-grid { gap: 1.5rem; }

.scene-item {
    background: var(--v2-slate);
    border: 1px solid var(--v2-border);
    border-radius: var(--r-sm);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.scene-item:hover { border-color: var(--v2-border-strong); }

.scene-item.selected {
    border-color: var(--v2-blue-light);
    background: rgba(76, 76, 255, 0.1);
    box-shadow: 0 0 0 1px rgba(76, 76, 255, 0.25) inset;
}

.scene-item.multi-selected {
    border-color: var(--v2-blue-light);
    box-shadow: 0 0 0 1px var(--v2-blue-light) inset;
}

/* ---- crop boxes ---- */
.crop-box {
    border: 2px solid var(--v2-blue-light);
    background: rgba(76, 76, 255, 0.10);
}

.crop-box .crop-label {
    background: rgba(5, 5, 5, 0.72);
    color: var(--v2-blue-light);
    border-radius: 4px;
}

.crop-box.box-bottom {
    border-color: var(--v2-blue-light);
    background: rgba(16, 20, 239, 0.12);
}
.crop-box.box-bottom .crop-label { color: var(--v2-blue-light); }

.crop-box.box-blur {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.06);
}
.crop-box.box-blur .crop-label { color: #CBD5E1; }

/* ---- layout badges ---- */
.layout-badge.single {
    background: rgba(76, 76, 255, 0.14);
    color: var(--v2-blue-light);
}
.layout-badge.split {
    background: rgba(16, 20, 239, 0.16);
    color: var(--v2-blue-light);
}
.layout-badge.blur {
    background: rgba(255, 255, 255, 0.1);
    color: #CBD5E1;
}

/* ---- editor tabs ---- */
.editor-tabs { border-bottom: 1px solid var(--v2-border); }
.editor-tab { font-weight: 600; }
.editor-tab:hover { color: var(--v2-white); }
.editor-tab.active {
    color: var(--v2-blue-light);
    border-bottom-color: var(--v2-blue-light);
}

/* ---- timeline ---- */
.timeline-cut-band { background: rgba(243, 107, 118, 0.75); }
.timeline-boundary-marker { background: var(--v2-blue-light); }
.timeline-boundary-marker.out { background: var(--v2-amber); }

.dual-range-rail { background: var(--v2-slate-3); }
.dual-range-selection {
    background: linear-gradient(90deg, #1014EF, #4C4CFF);
    box-shadow: 0 0 10px rgba(76, 76, 255, 0.35);
}

.dual-range-input::-webkit-slider-thumb {
    background: var(--v2-blue-light);
    border: 3px solid var(--v2-ink);
}
.dual-range-input.range-end::-webkit-slider-thumb { background: var(--v2-amber); }

/* ---- toggles / small controls ---- */
.static-crop-toggle {
    background: var(--v2-slate-3);
    border: 1px solid var(--v2-border-strong);
}
.static-crop-toggle.active {
    background: var(--v2-blue);
    border-color: var(--v2-blue-light);
}
.static-crop-toggle.active::before { background: #fff; }
.static-crop-toggle:focus-visible { outline: 2px solid var(--v2-blue-light); }

.fx-btn {
    background: var(--v2-slate-3);
    border: 1px solid var(--v2-border-strong);
    border-radius: 6px;
    color: var(--v2-white);
}
.fx-btn:hover:not(:disabled) { border-color: var(--v2-blue-light); color: var(--v2-blue-light); }

/* ---- music ---- */
.music-track {
    background: var(--v2-slate);
    border: 1px solid var(--v2-border);
    border-radius: var(--r-sm);
}
.music-track:hover { border-color: var(--v2-border-strong); }
.music-track.selected {
    border-color: var(--v2-blue-light);
    background: rgba(76, 76, 255, 0.07);
}
.music-track-name { color: var(--v2-white); }

/* ---- toasts ---- */
.toast {
    background: var(--v2-slate-2);
    border: 1px solid var(--v2-border-strong);
    border-left: 3px solid var(--v2-blue-light);
    border-radius: var(--r-sm);
    color: var(--v2-white);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.toast.error { border-left-color: var(--v2-red); }

/* ---- modals ---- */
.confirm-modal, .modal {
    background: var(--v2-slate-2);
    border: 1px solid var(--v2-border-strong);
    border-radius: var(--r-lg);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}

.confirm-modal-backdrop, .modal-back {
    background: var(--v2-scrim);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.paste-effects-card, #scene-context-menu {
    background: var(--v2-slate-2);
    border: 1px solid var(--v2-border-strong);
    border-radius: var(--r-sm);
}

.context-menu-item:hover { background: var(--v2-slate-3); }
.context-menu-item.danger { color: #FFA8B0; }

/* ---- console (terminal-like: dark in both themes) ---- */
.console-container {
    background: #07080A;
    border: 1px solid var(--v2-border);
    border-radius: var(--r-md);
}
.console-header { background: #0B0C0E; border-bottom: 1px solid var(--v2-border); }
.console-output { color: #7FB4FF; }

/* ---- source range / boundaries ---- */
.range-boundary-card {
    border: 1px solid var(--v2-border-strong);
    background: var(--v2-fill);
    border-radius: var(--r-sm);
}
.range-time-value { color: var(--v2-white); }

.source-range-card {
    border: 1px solid rgba(76, 76, 255, 0.3);
    background: var(--v2-fill);
    border-radius: var(--r-md);
}

.recreate-mode-status {
    border: 1px solid rgba(76, 76, 255, 0.32);
    background: rgba(47, 116, 201, 0.1);
    color: #BFD8FF;
    border-radius: var(--r-sm);
}

/* ---- empty states ---- */
.empty-state {
    border: 1px dashed var(--v2-border-strong);
    border-radius: var(--r-md);
    color: var(--v2-muted);
}

/* ---- selection failure ---- */
.selection-failure {
    border: 1px solid rgba(243, 107, 118, 0.4);
    background: rgba(127, 29, 29, 0.16);
    color: #FECACA;
    border-radius: var(--r-sm);
}

/* ---- posting page specific ---- */
.dropzone {
    border: 2px dashed var(--v2-border-strong);
    border-radius: var(--r-lg);
    background: var(--v2-fill);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.dropzone:hover { border-color: var(--v2-blue-light); background: rgba(76, 76, 255, 0.04); }
.dropzone.drag { border-color: var(--v2-blue-light); background: rgba(76, 76, 255, 0.08); }
.dropzone svg { color: var(--v2-muted); }

.video-card {
    background: var(--v2-slate);
    border: 2px solid var(--v2-border-strong);
    border-radius: var(--r-lg);
}
.video-card.approved { border-color: rgba(76, 76, 255, 0.5); }

.ptab.active {
    border-bottom-color: var(--v2-blue-light);
    color: var(--v2-blue-light);
    background: rgba(76, 76, 255, 0.05);
}

.cal-cell.dragover { background: rgba(76, 76, 255, 0.08); outline: 1px solid rgba(76, 76, 255, 0.4); }
.cal-daynum.today { background: linear-gradient(135deg, #1014EF, #2F2FFF); color: #fff; }
.cal-overflow { color: var(--v2-blue-light); background: rgba(76, 76, 255, 0.12); }

.brand-item.sel, .conn-card.on {
    background: rgba(76, 76, 255, 0.08);
    border-color: rgba(76, 76, 255, 0.4);
}

.plat-pill, .hdr-btn.active {
    background: rgba(76, 76, 255, 0.1);
    border-color: rgba(76, 76, 255, 0.32);
    color: var(--v2-blue-light);
}

.step-chip.active { background: linear-gradient(135deg, #1014EF, #2F2FFF); color: #fff; border-color: transparent; }
.step-chip.done { background: rgba(76, 76, 255, 0.12); border-color: rgba(76, 76, 255, 0.35); color: var(--v2-blue-light); }

.link-btn { color: var(--v2-blue-light); }

.float-cta { box-shadow: 0 20px 30px -5px rgba(16, 20, 239, 0.4); }

.mock-badge {
    background: rgba(16, 20, 239, 0.16);
    color: var(--v2-blue-light);
}

/* ---- phone mockup (screen frame: dark in both themes) ---- */
.phone-mockup { border-color: #2A2F36; background: #0C0E11; }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- header logo (V2: exact blue sliced S mark) ---- */
.header-logo, .logo-btn img, .brand img {
    border: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    filter: none;
}

/* ---- manual editor mode (/app?edit=<id>) ----
   The dashboard is hidden; Reframe Studio owns the viewport. */
body.edit-mode .main-container { display: none !important; }
body.edit-mode header { display: none !important; }
body.edit-mode #editor-modal {
    background: var(--v2-ink);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ---- caption preset grid: light-mode chip so light preset faces stay readable ---- */
html[data-theme="light"] .preset-btn {
    background: #EEF1F5;
    border-color: #DCE1E8;
}
html[data-theme="light"] .preset-btn:hover {
    background: #E4E9F0;
    border-color: #C9D2DD;
}
html[data-theme="light"] .preset-btn.active {
    border-color: var(--v2-blue);
    background: #E4E9FF;
    box-shadow: 0 0 0 1px rgba(16, 20, 239, 0.25);
}