/* ========== Storyboard Tool — themable design system ==========
Default ("cream") is a calm warm light palette; an opt-in dark "blue"
theme overrides the variables below via [data-theme="blue"] on .
Component CSS is built almost entirely on top of these vars, so
switching themes is a single attribute flip — no per-component restyle. */
:root {
--bg: #f5f3ed;
--bg-elev: #ffffff;
--surface: #ffffff;
--surface-2: #efece2;
--border: #e6e1cf;
--border-strong: #d4cdb4;
--text: #14110e;
--text-2: #5e5a52;
--text-3: #95918a;
--accent: #1a1815;
--accent-2: #322d28;
--highlight: #d8693f; /* terracotta */
--highlight-2: #f0b454; /* warm gold */
--highlight-soft: rgba(216,105,63,0.10);
--pop: #6e56cf; /* electric purple — sparingly */
--good: #2e7d5b;
--good-soft: rgba(46,125,91,0.12);
--danger: #b3261e;
--danger-soft: rgba(179,38,30,0.10);
--gradient-hot: linear-gradient(135deg, #d8693f 0%, #f0b454 100%);
--gradient-cool: linear-gradient(135deg, #6e56cf 0%, #4a8fd1 100%);
/* Background blob colors — declared as vars so theme switch repaints them.
Used by body::before / body::after for the soft drifting accent glow. */
--blob-1: #f0b454;
--blob-2: #6e56cf;
--blob-opacity: 0.22;
/* Skeleton shimmer — themed too, otherwise a bright white sweep on a dark
navy bg looks like a flashbang. */
--skel-base-a: #ebe7dd;
--skel-base-b: #f5f2ea;
--skel-shimmer: rgba(255,255,255,0.65);
--radius: 14px;
--radius-sm: 10px;
--radius-xs: 6px;
--shadow-1: 0 1px 2px rgba(20,18,15,0.04), 0 1px 3px rgba(20,18,15,0.06);
--shadow-2: 0 4px 12px rgba(20,18,15,0.06), 0 2px 4px rgba(20,18,15,0.04);
--shadow-3: 0 24px 48px -12px rgba(20,18,15,0.18), 0 8px 16px -8px rgba(20,18,15,0.10);
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
/* Kitty mascot — single SVG source-of-truth for ALL loading indicators
and the brand badge. Wrapped in a CSS var so we can swap a different
pose without hunting every spinner rule. */
--kitty-mascot: url("data:image/svg+xml;utf8,");
}
/* ----- Blue (dark navy) theme -----
Cool, modern dark palette: deep navy bg with electric-blue accents.
Greens / reds stay on a similar hue family but slightly brightened
for legibility on dark surfaces. */
:root[data-theme="blue"] {
--bg: #0c1422; /* deep navy */
--bg-elev: #14213a;
--surface: #14213a;
--surface-2: #1a2a47;
--border: #233659;
--border-strong: #2f4878;
--text: #e7ecf5;
--text-2: #9bb0d1;
--text-3: #6075a0;
--accent: #f4f7fc;
--accent-2: #c7d3eb;
--highlight: #4d8eff; /* electric blue */
--highlight-2: #7ab6ff;
--highlight-soft: rgba(77, 142, 255, 0.14);
--pop: #a384ff; /* periwinkle */
--good: #34d399;
--good-soft: rgba(52, 211, 153, 0.14);
--danger: #ef5350;
--danger-soft: rgba(239, 83, 80, 0.16);
--gradient-hot: linear-gradient(135deg, #4d8eff 0%, #7ab6ff 100%);
--gradient-cool: linear-gradient(135deg, #6e56cf 0%, #4d8eff 100%);
--blob-1: #4d8eff;
--blob-2: #6e56cf;
--blob-opacity: 0.28;
--skel-base-a: #18243e;
--skel-base-b: #1f2d4d;
--skel-shimmer: rgba(122, 182, 255, 0.18);
/* Shadows: on a dark bg, soft white-ish would be wrong — use deeper
navy-tinted ambient shadows. */
--shadow-1: 0 1px 2px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.45);
--shadow-2: 0 4px 12px rgba(0,0,0,0.40), 0 2px 4px rgba(0,0,0,0.30);
--shadow-3: 0 24px 48px -12px rgba(0,0,0,0.55), 0 8px 16px -8px rgba(0,0,0,0.35);
}
* { box-sizing: border-box; }
/* Respect OS-level "reduce motion" — kills all infinite animations
(kitty bob, blob drift, switch pulse, shimmer, ge-pulse, errPulse) and
makes transitions effectively instant. Big perf win for users on slow
GPUs / battery-saver / VMs as a side effect. */
@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;
}
}
html, body {
margin: 0; padding: 0; height: 100%;
background: var(--bg); color: var(--text);
font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
font-feature-settings: "ss01", "cv11", "ss03";
font-size: 14px; line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body { display: flex; position: relative; overflow: hidden; }
/* Subtle animated background blobs — colored via theme vars so they
morph from warm gold/purple (cream) to electric blue/periwinkle (blue). */
body::before, body::after {
content: ""; position: fixed; pointer-events: none; z-index: 0;
width: 540px; height: 540px; border-radius: 50%;
filter: blur(80px); opacity: var(--blob-opacity);
transition: opacity 0.4s var(--ease-out);
}
body::before {
top: -200px; left: -200px;
background: radial-gradient(circle, var(--blob-1) 0%, transparent 70%);
animation: drift1 22s ease-in-out infinite alternate;
}
body::after {
bottom: -240px; right: -120px;
background: radial-gradient(circle, var(--blob-2) 0%, transparent 70%);
animation: drift2 28s ease-in-out infinite alternate;
}
@keyframes drift1 { from { transform: translate(0,0); } to { transform: translate(40px, 60px); } }
@keyframes drift2 { from { transform: translate(0,0); } to { transform: translate(-50px, -30px); } }
.sidebar, main { position: relative; z-index: 1; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--highlight-soft); }
/* ---------- Sidebar ---------- */
.sidebar {
width: 264px; min-width: 264px; height: 100vh;
background: var(--bg-elev);
border-right: 1px solid var(--border);
display: flex; flex-direction: column; gap: 14px;
padding: 18px 14px;
}
.brand {
font-size: 16px; font-weight: 700; letter-spacing: -0.02em;
display: flex; align-items: center; gap: 8px; padding: 4px 6px 12px;
}
.brand .brand-chip {
color: var(--text-3); font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
text-transform: uppercase; padding: 2px 6px; border: 1px solid var(--border);
border-radius: 999px;
margin-left: 4px;
}
.brand-mascot {
width: 28px; height: 28px; flex-shrink: 0;
background-image: var(--kitty-mascot);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: inline-block;
transform-origin: 50% 80%;
animation: kitty-bob 2.2s var(--ease-in-out) infinite alternate;
}
/* ---------- user chip (sidebar bottom) ---------- */
.user-chip {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px; margin-top: 4px;
background: var(--surface-2); border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 12px; color: var(--text-2);
transition: background 0.15s var(--ease-out);
}
.user-chip:hover { background: var(--bg-elev); }
.user-chip[hidden] { display: none; }
.user-chip .avatar {
width: 26px; height: 26px; border-radius: 50%;
background: var(--gradient-hot); color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 12px; letter-spacing: 0;
flex-shrink: 0;
box-shadow: 0 4px 10px -4px rgba(216,105,63,0.45);
}
.user-chip .email {
flex: 1; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-weight: 500; color: var(--text);
}
.user-chip .logout {
background: transparent; border: none; padding: 4px 8px;
font-size: 14px; color: var(--text-3); cursor: pointer;
border-radius: 6px; line-height: 1;
transition: all 0.15s var(--ease-out);
}
.user-chip .logout:hover {
color: var(--danger); background: var(--danger-soft);
transform: none; box-shadow: none;
}
.project-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin-top: 4px; padding-right: 2px; }
/* Sidebar search */
.search-wrap {
position: relative;
margin-top: 8px;
}
.search-wrap input {
width: 100%;
padding: 8px 28px 8px 30px;
font-size: 12px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface-2);
color: var(--text);
font-family: inherit;
transition: border-color 0.15s var(--ease-out), background 0.15s var(--ease-out);
}
.search-wrap input::placeholder { color: var(--text-3); }
.search-wrap input:focus {
outline: none;
border-color: var(--highlight);
background: var(--surface);
}
.search-wrap::before {
content: "";
position: absolute;
left: 9px; top: 50%;
width: 12px; height: 12px;
margin-top: -6px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
pointer-events: none;
opacity: 0.85;
}
.search-clear {
position: absolute;
right: 4px; top: 50%;
transform: translateY(-50%);
width: 22px; height: 22px;
padding: 0;
background: transparent;
border: none;
color: var(--text-3);
font-size: 16px; line-height: 1;
cursor: pointer;
border-radius: 4px;
}
.search-clear:hover {
background: var(--bg-elev);
color: var(--text);
transform: translateY(-50%);
box-shadow: none;
}
.project-list-empty {
padding: 16px 8px;
font-size: 12px;
color: var(--text-3);
text-align: center;
font-style: italic;
}
/* Archived badge for sidebar items */
.project-item .name .archived-badge {
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px;
flex-shrink: 0;
opacity: 0.7;
}
/* Archived banner inside the project view */
.archived-banner {
display: flex; align-items: flex-start; gap: 10px;
margin: 0 24px 12px;
padding: 12px 14px;
background: linear-gradient(135deg, rgba(255,193,7,0.08), rgba(255,152,0,0.04));
border: 1px solid rgba(255,152,0,0.25);
border-radius: var(--radius-sm);
font-size: 13px;
color: var(--text-2);
line-height: 1.45;
}
.archived-banner .ico { font-size: 18px; line-height: 1.2; flex-shrink: 0; }
.archived-banner .msg { flex: 1; }
.project-list::-webkit-scrollbar { width: 6px; }
.project-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.project-item {
padding: 9px 12px; border-radius: var(--radius-sm); cursor: pointer;
border: 1px solid transparent;
transition: background 0.15s var(--ease-out), border-color 0.15s var(--ease-out);
}
.project-item:hover { background: var(--surface-2); }
.project-item.active { background: var(--bg-elev); border-color: var(--border); box-shadow: var(--shadow-1); }
.project-item .name {
font-weight: 500; font-size: 13px; color: var(--text);
display: flex; align-items: center; gap: 6px;
}
.project-item .name .shared-badge {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px; border-radius: 50%;
background: var(--highlight-soft); color: var(--highlight);
font-size: 10px; font-weight: 600;
flex-shrink: 0;
}
.project-item .name .name-text {
flex: 1; min-width: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.project-item .meta { color: var(--text-3); font-size: 11px; margin-top: 2px; letter-spacing: 0.01em; }
/* ---------- Sharing modal ---------- */
.sharing-list {
display: flex; flex-direction: column; gap: 4px;
max-height: 220px; overflow-y: auto;
background: var(--surface-2); border: 1px solid var(--border);
border-radius: var(--radius-sm); padding: 6px;
}
.sharing-list:empty::before {
content: "Пока никто, кроме владельца.";
color: var(--text-3); font-size: 12px; padding: 8px 6px;
}
.sharing-list .row {
display: flex; align-items: center; gap: 8px;
padding: 6px 8px; border-radius: 6px;
background: transparent;
transition: background 0.15s var(--ease-out);
}
.sharing-list .row:hover { background: var(--bg-elev); }
.sharing-list .row .avatar {
width: 24px; height: 24px; border-radius: 50%;
background: var(--gradient-hot); color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 11px;
flex-shrink: 0;
}
.sharing-list .row .em {
flex: 1; font-size: 12px; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sharing-list .row .rm {
background: transparent; border: none;
color: var(--text-3); font-size: 14px; cursor: pointer;
padding: 4px 8px; border-radius: 4px; line-height: 1;
}
.sharing-list .row .rm:hover {
background: var(--danger-soft); color: var(--danger);
transform: none; box-shadow: none;
}
/* ---------- Main ---------- */
main {
flex: 1; height: 100vh; overflow-y: auto;
padding: 24px 32px 60px;
}
.empty {
color: var(--text-3); text-align: center; margin-top: 38vh;
font-size: 13px; letter-spacing: 0.01em;
}
.hidden { display: none !important; }
.topbar { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.title-input {
flex: 1; background: transparent; border: none; color: var(--text);
font-size: 22px; font-weight: 600; letter-spacing: -0.02em; outline: none;
padding: 4px 0; border-bottom: 1px solid transparent;
transition: border-color 0.15s var(--ease-out);
}
.title-input:hover { border-bottom-color: var(--border); }
.title-input:focus { border-bottom-color: var(--accent); }
.stage {
color: var(--text-2); font-size: 11px; padding: 4px 10px;
border: 1px solid var(--border); background: var(--surface);
border-radius: 999px; letter-spacing: 0.02em; font-weight: 500;
display: inline-flex; align-items: center; gap: 6px;
}
.stage.generating { color: var(--highlight); border-color: var(--highlight); background: var(--highlight-soft); }
.stage .pulse { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 1.4s ease-in-out infinite; }
.stage .reset-gen {
margin-left: 6px; cursor: pointer; opacity: 0.6;
padding: 0 4px; border-radius: 4px;
transition: all 0.15s var(--ease-out);
}
.stage .reset-gen:hover { opacity: 1; background: rgba(0,0,0,0.06); color: var(--danger); }
@keyframes pulse { 0%,100%{opacity:0.3;transform:scale(0.8)} 50%{opacity:1;transform:scale(1.1)} }
/* ---------- Theme toggle (sidebar bottom) ----------
Mirrors the look of the neighbouring settings/logout controls so the
sidebar bottom stays a coherent strip of utility actions. */
.theme-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
justify-content: flex-start;
margin-top: 6px;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.01em;
}
.theme-toggle .theme-icon {
font-size: 14px;
line-height: 1;
display: inline-flex;
filter: saturate(1.1);
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.theme-toggle:hover .theme-icon { transform: rotate(20deg); }
.theme-toggle:active .theme-icon { transform: rotate(-30deg) scale(0.85); }
.theme-toggle .theme-label {
color: var(--text-2);
}
/* Same shape as theme-toggle, but bell-shaped wiggle on hover. */
.sound-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
justify-content: flex-start;
margin-top: 6px;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.01em;
}
.sound-toggle .sound-icon {
font-size: 14px;
line-height: 1;
display: inline-flex;
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sound-toggle:hover .sound-icon { transform: rotate(-15deg) scale(1.1); }
.sound-toggle:active .sound-icon { transform: rotate(15deg) scale(0.9); }
.sound-toggle .sound-label { color: var(--text-2); }
/* ---------- Cost chips (Wavespeed spend) ---------- */
/* Top-bar pill: lifetime spend on the active project. Muted when $0 (nothing
has been generated yet), warm/active when there's actual money on the line. */
.project-cost { display: inline-flex; align-items: center; }
.cost-pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text-3);
font-weight: 500;
letter-spacing: 0.02em;
cursor: help;
transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.cost-pill.has-spend {
background: var(--highlight-soft);
color: var(--highlight);
border-color: rgba(216, 105, 63, 0.35);
font-weight: 600;
}
/* Per-scene spend: small chip glued to the right of the scene badge. Same
visual language as the topbar pill so users mentally connect them. */
.cost-chip {
display: inline-flex;
align-items: center;
font-size: 10px;
padding: 3px 7px;
border-radius: 999px;
background: var(--highlight-soft);
color: var(--highlight);
border: 1px solid rgba(216, 105, 63, 0.25);
font-weight: 600;
letter-spacing: 0.02em;
cursor: help;
}
/* Inline "≈ $X" hint that sits next to the bulk-generate progress status. */
.cost-est {
display: inline-flex;
align-items: center;
margin-left: 6px;
padding: 2px 7px;
border-radius: 999px;
background: var(--surface-2);
color: var(--text-2);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.02em;
border: 1px solid var(--border);
}
/* ---------- Tabs ---------- */
.tabs {
display: flex; gap: 2px; padding: 4px;
background: var(--surface-2); border-radius: 999px;
margin-bottom: 22px; width: fit-content;
}
.tab {
background: transparent; color: var(--text-2); border: none;
padding: 7px 16px; font-size: 12px; font-weight: 500;
border-radius: 999px; cursor: pointer; letter-spacing: 0.01em;
transition: all 0.2s var(--ease-out);
}
.tab:hover { color: var(--text); }
.tab.active { background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow-1); }
.tab-pane { display: none; animation: fadeIn 0.3s var(--ease-out); }
.tab-pane.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* ---------- Buttons ---------- */
button {
background: var(--surface); color: var(--text);
border: 1px solid var(--border);
padding: 8px 14px; border-radius: var(--radius-xs);
cursor: pointer; font-size: 12px; font-weight: 500;
letter-spacing: 0.01em;
/* Explicit transition list — `transition: all` forces style recalc on
every animatable property (filter, opacity, width, etc.) even when
only the four below ever animate on hover/focus/active. */
transition:
background 0.18s var(--ease-out),
border-color 0.18s var(--ease-out),
color 0.18s var(--ease-out),
transform 0.18s var(--ease-out),
box-shadow 0.18s var(--ease-out);
display: inline-flex; align-items: center; gap: 6px;
}
button:hover { background: var(--surface-2); border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-1); }
button:active { transform: translateY(0); }
button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
button.primary {
background: var(--accent); color: #fff; border-color: var(--accent);
position: relative; overflow: hidden;
}
button.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
button.primary::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
transform: translateX(-100%); transition: transform 0.6s var(--ease-out);
}
button.primary:hover::after { transform: translateX(100%); }
button.hot {
background: var(--gradient-hot); color: #fff; border: none;
box-shadow: 0 8px 24px -6px rgba(216,105,63,0.45);
}
button.hot:hover { box-shadow: 0 10px 28px -4px rgba(216,105,63,0.6); transform: translateY(-1px); }
/* Inline kitty loader inside any button — same SVG mascot as the global
one, just sized down. We tweaked the bob a bit faster so it reads as
"active" instead of "asleep". */
button .btn-spinner {
width: 18px; height: 18px;
background-image: var(--kitty-mascot);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
display: inline-block;
transform-origin: 50% 80%;
animation: kitty-bob 1.1s var(--ease-in-out) infinite alternate;
vertical-align: middle;
}
button.is-loading { pointer-events: none; opacity: 0.85; }
button.ghost { background: transparent; border-color: transparent; }
button.ghost:hover { background: var(--surface-2); border-color: var(--border); }
button.danger-ghost { background: transparent; color: var(--danger); border-color: transparent; }
button.danger-ghost:hover { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
/* ---------- Inputs ---------- */
label {
display: block; color: var(--text-2); margin-bottom: 6px;
font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
}
input[type="text"], input[type="password"], textarea {
width: 100%; background: var(--surface); color: var(--text);
border: 1px solid var(--border); border-radius: var(--radius-sm);
padding: 10px 12px; outline: none;
transition: border-color 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,47,47,0.08); }
textarea { resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.55; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 14px; }
.row-actions { display: flex; gap: 10px; align-items: center; margin: 16px 0; flex-wrap: wrap; }
.status { color: var(--text-3); font-size: 12px; }
.status.error { color: var(--danger); }
.status.ok { color: var(--good); }
.muted { color: var(--text-3); font-size: 12px; margin-bottom: 12px; }
/* ---------- Characters ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.char-card {
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
padding: 14px; display: flex; flex-direction: column; gap: 8px;
transition: box-shadow 0.2s var(--ease-out);
}
.char-card:hover { box-shadow: var(--shadow-2); }
.char-card h4 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.char-card .desc { color: var(--text-3); font-size: 12px; min-height: 30px; line-height: 1.4; }
.char-card .thumbs { display: flex; flex-wrap: wrap; gap: 6px; min-height: 64px; }
.char-card .thumbs img {
width: 56px; height: 56px; object-fit: cover;
border-radius: var(--radius-xs); border: 1px solid var(--border);
}
.char-card label.upload {
display: flex; justify-content: center; align-items: center;
background: var(--surface-2); padding: 7px 10px; border-radius: var(--radius-xs);
border: 1px dashed var(--border-strong); cursor: pointer; font-size: 11px;
text-transform: none; letter-spacing: 0; font-weight: 500;
transition: background 0.15s var(--ease-out);
}
.char-card label.upload:hover { background: var(--bg); }
.char-card input[type=file] { display: none; }
.char-card details summary::-webkit-details-marker { display: none; }
.char-card details summary { padding: 4px 0; }
/* ---------- Storyboard carousel ---------- */
.carousel-wrap { position: relative; }
.storyboard {
position: relative;
display: flex; align-items: stretch;
overflow-x: auto; overflow-y: visible;
/* `proximity` instead of `mandatory` — snap kicks in only when the user
stops near a card edge, doesn't fight trackpad inertia. Combined with
scroll-padding so snap targets are aligned to the card column, not the
scroller's left edge. `mandatory` here was forcing snaps every frame
against viewport-based padding (`50vw - 200px`) that was wrong for the
new cast-row layout — that's what was making the carousel feel "jumpy". */
scroll-snap-type: x proximity;
scroll-padding-inline: 28px;
scroll-behavior: smooth;
/* Vertical padding used to be 60px to leave room for the focused-card
aura glow; that effect is gone now so this just collapses to breathing
room. Horizontal padding is plain pixels so it scales correctly inside
nested .cast-row containers (which aren't 100vw wide). */
padding: 24px 28px;
gap: 24px;
/* Prevent accidental sub-pixel jitter from overscroll bounce when the
storyboard is the only horizontally-scrollable thing on the page. */
overscroll-behavior-x: contain;
}
.storyboard::-webkit-scrollbar { height: 6px; }
.storyboard::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.storyboard::-webkit-scrollbar-track { background: transparent; }
.scene-card {
flex: 0 0 360px;
/* Snap to the left edge — cards "queue up" cleanly from start of the row,
matches how every other horizontal-rail UI does it (Netflix etc). The
old `center` align together with mandatory snap was what made scrolling
overshoot and bounce-back on every gesture. */
scroll-snap-align: start;
position: relative;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 14px;
display: flex; flex-direction: column; gap: 10px;
transition: box-shadow 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.scene-card:hover {
box-shadow: var(--shadow-2); border-color: var(--border-strong);
}
.scene-card.has-error { border-color: var(--danger); }
.scene-card.has-error::before { background: linear-gradient(135deg, #ff7a6c, #ff3838); }
.scene-error {
background: var(--danger-soft);
border: 1px solid rgba(179,38,30,0.25);
border-radius: var(--radius-sm); padding: 10px 12px;
font-size: 11px; color: var(--danger); line-height: 1.45;
display: flex; align-items: flex-start; gap: 8px;
}
.scene-error[hidden] { display: none; }
.scene-error::before { content: "⚠"; font-size: 14px; line-height: 1; flex-shrink: 0; margin-top: 1px; }
.refine-box {
background: var(--highlight-soft);
border: 1px solid rgba(216,105,63,0.25);
border-radius: var(--radius-sm);
padding: 10px;
animation: fadeIn 0.2s var(--ease-out);
}
.refine-box[hidden] { display: none; }
.model-switch {
display: inline-flex; gap: 0; padding: 3px;
background: var(--surface-2); border-radius: 999px;
border: 1px solid var(--border);
box-shadow: inset 0 1px 2px rgba(20,18,15,0.04);
}
.model-switch button {
background: transparent; border: none;
padding: 6px 14px; font-size: 12px; font-weight: 500;
border-radius: 999px; cursor: pointer; color: var(--text-3);
transition: all 0.18s var(--ease-out);
box-shadow: none;
letter-spacing: 0.01em;
}
.model-switch button:hover {
color: var(--text); background: rgba(20,18,15,0.04);
transform: none; box-shadow: none;
}
.model-switch button.active {
background: var(--accent);
color: #fff;
font-weight: 600;
box-shadow: 0 2px 8px -2px rgba(20,18,15,0.25), inset 0 1px 0 rgba(255,255,255,0.08);
}
.model-switch button.active::before {
content: "✓"; margin-right: 4px; font-size: 10px;
display: inline-block; opacity: 0.85;
}
.model-switch button.active:hover { background: var(--accent-2); }
.model-switch button.is-disabled {
color: var(--text-3); opacity: 0.55;
text-decoration: line-through;
text-decoration-thickness: 1px;
cursor: not-allowed;
}
.model-switch button.is-disabled:hover {
color: var(--text-3); background: transparent;
transform: none; box-shadow: none;
}
.model-switch button.is-disabled::after {
content: "🚫"; margin-left: 4px; font-size: 10px;
text-decoration: none; display: inline-block;
}
/* iOS-style toggle switch (e.g. "Без музыки и пения" on Script + Videos
tabs). Looks like a real switch, not a button — track + sliding knob,
colour shifts grey → red when active, with a soft glow halo when ON.
Extra horizontal margin separates it from the action buttons around. */
.toggle-switch {
/* Reset from default