/* ============================================================
   SONYA — Cinematic AI editor
   Design system · dark dune-cosmic edition
   ============================================================ */

/* ──────────────────────────── TOKENS ──────────────────────── */
:root {
	--font-display: 'Sora', 'Space Grotesk', system-ui, sans-serif;
	--font-body: 'Inter', system-ui, -apple-system, sans-serif;

	/* Core background */
	--bg-0: #0A0806;
	--bg-1: #0F0C09;
	--bg-2: #14100C;
	--bg-3: #1A1511;

	/* Dune / warm palette */
	--dune-50:  #FBF6ED;
	--dune-100: #F5ECD9;
	--dune-200: #E8D4B0;
	--dune-300: #D7B88A;
	--dune-400: #C29F6E;
	--dune-500: #A88654;
	--dune-600: #806041;

	/* Accent */
	--accent: #E8C58E;
	--accent-hot: #F6E3BE;
	--accent-deep: #C8A367;

	/* Text */
	--text: #F2EADB;
	--text-muted: #9B8D78;
	--text-dim: #615545;
	--text-inverse: #120E0A;

	/* Strokes */
	--stroke: rgba(232, 197, 142, 0.09);
	--stroke-strong: rgba(232, 197, 142, 0.16);
	--stroke-hot: rgba(232, 197, 142, 0.32);

	/* Glass */
	--glass: rgba(22, 18, 14, 0.55);
	--glass-strong: rgba(28, 23, 18, 0.72);
	--glass-hot: rgba(38, 30, 22, 0.82);

	/* Shadows */
	--shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.32);
	--shadow-md: 0 14px 42px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.28);
	--shadow-lg: 0 28px 78px rgba(0, 0, 0, 0.58), 0 8px 22px rgba(0, 0, 0, 0.35);
	--shadow-glow: 0 0 48px rgba(232, 197, 142, 0.28);
	--inner-light: inset 0 1px 0 rgba(255, 228, 176, 0.08);
	--inner-dark:  inset 0 -1px 0 rgba(0, 0, 0, 0.4);

	/* Radii */
	--r-xs: 8px;
	--r-sm: 12px;
	--r-md: 16px;
	--r-lg: 22px;
	--r-xl: 28px;
	--r-2xl: 36px;
	--r-pill: 999px;

	/* Spacing */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 20px;
	--s-6: 24px;
	--s-7: 32px;
	--s-8: 44px;
	--s-9: 60px;
	--s-10: 80px;

	/* Motion */
	--ease: cubic-bezier(0.22, 0.75, 0.28, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--dur-1: 180ms;
	--dur-2: 320ms;
	--dur-3: 520ms;
	--dur-4: 880ms;
}

[data-theme="light"] {
	--bg-0: #F6F1E8;
	--bg-1: #EDE6D8;
	--bg-2: #E3DBC9;
	--bg-3: #D9CFB7;
	--text: #0A0A0A;
	--text-muted: #2a2a2a;
	--text-dim: #444;
	--text-inverse: #FFF7E6;
	--glass: rgba(255, 248, 232, 0.6);
	--glass-strong: rgba(255, 248, 232, 0.82);
	--stroke: rgba(120, 90, 50, 0.14);
	--stroke-strong: rgba(120, 90, 50, 0.22);
}

/* ── Светлая тема: весь текст и иконки чёрные ── */
[data-theme="light"] * {
	color: #0a0a0a !important;
}
[data-theme="light"] i,
[data-theme="light"] svg,
[data-theme="light"] .fa-solid,
[data-theme="light"] .fa-brands,
[data-theme="light"] .fa-regular {
	color: #0a0a0a !important;
}
/* Плейсхолдер инпута */
[data-theme="light"] input::placeholder,
[data-theme="light"] .hero2-input-placeholder {
	color: rgba(0,0,0,0.45) !important;
}
/* Кнопки и бейджи — тёмный текст */
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-secondary,
[data-theme="light"] .hero2-cta,
[data-theme="light"] .hero2-tab,
[data-theme="light"] .hero2-tab.active {
	color: #0a0a0a !important;
}
/* ── Исключения: карточки режимов (page 2) — текст и иконки белые ── */
[data-theme="light"] .type-card,
[data-theme="light"] .type-card *,
[data-theme="light"] .btn-trailer,
[data-theme="light"] .btn-trailer * {
	color: #fff !important;
}

/* ── Исключения: экран результата — всё белое ── */
[data-theme="light"] .result-card,
[data-theme="light"] .result-card *,
[data-theme="light"] .result-card-title,
[data-theme="light"] .result-card-ratio,
[data-theme="light"] .result-card-duration,
[data-theme="light"] .score-badge,
[data-theme="light"] .score-badge *,
[data-theme="light"] .result-stat,
[data-theme="light"] .result-stat *,
[data-theme="light"] .stat-value,
[data-theme="light"] .stat-label,
[data-theme="light"] .btn-download,
[data-theme="light"] .btn-download * {
	color: #fff !important;
}

/* Оверлеи фона делаем светлее чтобы видео просматривалось */
[data-theme="light"] .cinema-overlay--tint {
	background: rgba(255,255,255,0.18) !important;
}
[data-theme="light"] .cinema-overlay--gradient {
	background: linear-gradient(
		to bottom,
		rgba(246,241,232,0.55) 0%,
		rgba(246,241,232,0.10) 40%,
		rgba(246,241,232,0.55) 100%
	) !important;
}
[data-theme="light"] .ambient-bg {
	opacity: 0 !important;
}

/* ──────────────────────────── RESET ───────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
	font-family: var(--font-body);
	font-weight: 400;
	color: var(--text);
	background: var(--bg-0);
	min-height: 100vh;
	min-height: 100svh;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
	line-height: 1.5;
}
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6, p { margin: 0; }

.hidden { display: none !important; }

/* ──────────────────────── AMBIENT BACKGROUND ──────────────── */
.ambient-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	background:
		radial-gradient(ellipse 90% 60% at 50% -10%, rgba(232, 197, 142, 0.12), transparent 60%),
		radial-gradient(ellipse 70% 50% at 50% 110%, rgba(200, 163, 103, 0.08), transparent 65%),
		linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 45%, var(--bg-0) 100%);
}

.ambient-dune {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	opacity: 0.5;
	mix-blend-mode: screen;
}
.ambient-dune--a {
	width: 780px; height: 780px;
	top: -220px; left: -180px;
	background: radial-gradient(circle, rgba(232, 197, 142, 0.3), transparent 60%);
	animation: drift1 26s var(--ease) infinite alternate;
}
.ambient-dune--b {
	width: 620px; height: 620px;
	top: 30%; right: -220px;
	background: radial-gradient(circle, rgba(200, 163, 103, 0.26), transparent 60%);
	animation: drift2 32s var(--ease) infinite alternate;
}
.ambient-dune--c {
	width: 520px; height: 520px;
	bottom: -180px; left: 25%;
	background: radial-gradient(circle, rgba(245, 236, 217, 0.18), transparent 60%);
	animation: drift3 24s var(--ease) infinite alternate;
}

@keyframes drift1 {
	0%   { transform: translate(0,0) scale(1); }
	100% { transform: translate(60px, 50px) scale(1.15); }
}
@keyframes drift2 {
	0%   { transform: translate(0,0) scale(1); }
	100% { transform: translate(-80px, 40px) scale(1.1); }
}
@keyframes drift3 {
	0%   { transform: translate(0,0) scale(1); }
	100% { transform: translate(40px, -60px) scale(1.08); }
}

.ambient-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(232, 197, 142, 0.028) 1px, transparent 1px),
		linear-gradient(90deg, rgba(232, 197, 142, 0.028) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 20%, transparent 80%);
	-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 20%, transparent 80%);
}

.ambient-vignette {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 100% 80% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.55) 100%);
}

.ambient-noise {
	position: absolute;
	inset: 0;
	opacity: 0.06;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ─────────────── FLOATING TOP CONTROLS ─────────────── */
.floating-controls {
	position: fixed;
	top: 20px;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 10px;
}
.floating-controls--left  { left: 20px; }
.floating-controls--right { right: 20px; }

.profile-btn {
	position: relative;
	width: 44px; height: 44px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--glass);
	border: 1px solid var(--stroke-strong);
	box-shadow: var(--shadow-sm), var(--inner-light);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.profile-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md), var(--inner-light); }

.profile-avatar {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}

.profile-ring {
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	background: conic-gradient(from 0deg, transparent, var(--accent), transparent);
	opacity: 0.55;
	animation: ringSpin 6s linear infinite;
	z-index: -1;
	filter: blur(2px);
}
@keyframes ringSpin { to { transform: rotate(360deg); } }

.icon-btn {
	width: 44px; height: 44px;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--glass);
	border: 1px solid var(--stroke-strong);
	color: var(--text);
	box-shadow: var(--shadow-sm), var(--inner-light);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	transition: all var(--dur-1) var(--ease);
}
.icon-btn:hover {
	border-color: var(--stroke-hot);
	color: var(--accent);
	transform: translateY(-1px);
}

.burger-btn {
	flex-direction: column;
	gap: 4px;
}
.burger-btn span {
	width: 18px; height: 1.5px;
	background: currentColor;
	transition: all var(--dur-1) var(--ease);
	border-radius: 2px;
}

/* ─────────────── MENU OVERLAY ─────────────── */
.menu-overlay {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: none;
	align-items: flex-start;
	justify-content: flex-end;
	padding: 80px 24px;
	background: rgba(7, 5, 3, 0.62);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	animation: overlayIn var(--dur-2) var(--ease);
}
.menu-overlay.active { display: flex; }

@keyframes overlayIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.menu-panel {
	width: 360px;
	max-width: calc(100vw - 48px);
	padding: 22px;
	border-radius: var(--r-xl);
	background: var(--glass-hot);
	border: 1px solid var(--stroke-strong);
	box-shadow: var(--shadow-lg), var(--inner-light);
	backdrop-filter: blur(28px) saturate(140%);
	-webkit-backdrop-filter: blur(28px) saturate(140%);
	animation: menuIn var(--dur-3) var(--ease-out);
}
@keyframes menuIn {
	from { opacity: 0; transform: translateY(-12px); }
	to   { opacity: 1; transform: translateY(0); }
}

.menu-header {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: start;
	gap: 12px;
	margin-bottom: 18px;
}
.menu-eyebrow {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.32em;
	color: var(--dune-400);
	font-weight: 500;
	margin-bottom: 4px;
}
.menu-title {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 600;
	color: var(--text);
	letter-spacing: -0.01em;
}
.menu-close {
	width: 32px; height: 32px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--text-muted);
	transition: all var(--dur-1) var(--ease);
}
.menu-close:hover { color: var(--text); background: rgba(232, 197, 142, 0.08); }

.menu-items {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.menu-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border-radius: var(--r-md);
	border: 1px solid var(--stroke);
	background: rgba(20, 16, 12, 0.45);
	text-align: left;
	width: 100%;
	transition: all var(--dur-1) var(--ease);
	position: relative;
}
.menu-item:hover:not(.locked) {
	border-color: var(--stroke-strong);
	background: rgba(38, 30, 22, 0.55);
	transform: translateY(-1px);
}
.menu-item.active {
	border-color: var(--stroke-hot);
	background: linear-gradient(135deg, rgba(232,197,142,0.12), rgba(200,163,103,0.05));
	box-shadow: 0 0 0 1px rgba(232,197,142,0.08), var(--inner-light);
}
.menu-item.locked { opacity: 0.55; cursor: not-allowed; }

.menu-item-dot {
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 10px var(--accent);
}
.menu-item-lock {
	width: 22px;
	color: var(--text-dim);
	font-size: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.menu-item-content { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.menu-item-title {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
}
.menu-item-subtitle {
	font-size: 12px;
	color: var(--text-muted);
}
.menu-item-badge {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	padding: 4px 8px;
	border-radius: var(--r-pill);
	background: rgba(232, 197, 142, 0.14);
	color: var(--accent);
	font-weight: 600;
}
.menu-item-badge--soon {
	background: rgba(155, 141, 120, 0.12);
	color: var(--text-muted);
}

/* ─────────────── APP SHELL ─────────────── */
.app-container {
	position: relative;
	z-index: 1;
	max-width: 1180px;
	margin: 0 auto;
	padding: 28px 28px 40px;
	min-height: 100vh;
	min-height: 100svh;
}

.page {
	display: none;
	flex-direction: column;
	gap: var(--s-8);
	min-height: calc(100vh - 68px);
	min-height: calc(100svh - 68px);
	animation: pageIn var(--dur-3) var(--ease-out);
}
.page.active { display: flex; }
@keyframes pageIn {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

.page-header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 28px;
}
.page-header.compact { padding-top: 16px; }

.btn-back {
	width: 40px; height: 40px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--glass);
	border: 1px solid var(--stroke);
	color: var(--text-muted);
	transition: all var(--dur-1) var(--ease);
}
.btn-back:hover { color: var(--text); border-color: var(--stroke-strong); transform: translateX(-2px); }

.step-indicator {
	display: flex;
	align-items: baseline;
	gap: 10px;
}
.step-indicator-num {
	font-family: var(--font-display);
	font-size: 12px;
	letter-spacing: 0.32em;
	color: var(--dune-400);
	font-weight: 600;
}
.step-indicator-text {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.24em;
	color: var(--text-muted);
}

.page-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--s-7);
}

.page-footer {
	display: flex;
	justify-content: flex-end;
	padding-top: var(--s-6);
}

.section-head {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 8px;
}
.section-title {
	font-family: var(--font-display);
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 700;
	letter-spacing: -0.018em;
	color: var(--text);
}
.section-subtitle {
	font-size: 14px;
	color: var(--text-muted);
}

/* ─────────────── HERO (LEAN) — page 1 ─────────────── */
.hero-lean {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-6);
	padding: clamp(48px, 8vh, 92px) var(--s-4) var(--s-5);
	text-align: center;
}

/* Brand lockup — reserved slot for future logo + wordmark */
.brand-lockup {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.brand-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	/* Future: will host <img class="brand-logo" src="logo.svg"> */
}
.brand-mark img.brand-logo {
	height: clamp(48px, 6vw, 72px);
	width: auto;
	object-fit: contain;
}

.brand-wordmark {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(52px, 7vw, 96px);
	line-height: 0.9;
	letter-spacing: -0.045em;
	background: linear-gradient(180deg, #FBF6ED 0%, #E8C58E 55%, #8B6C3A 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	filter: drop-shadow(0 2px 30px rgba(232, 197, 142, 0.15));
}

.brand-caption {
	font-family: var(--font-display);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.42em;
	color: var(--text-muted);
	padding-left: 0.42em;
	font-weight: 500;
}

.hero-headline {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(28px, 4.2vw, 54px);
	line-height: 1.04;
	letter-spacing: -0.028em;
	color: var(--text);
	max-width: 18ch;
	margin: 0 auto;
}
.hero-headline-accent {
	background: linear-gradient(90deg, #F6E3BE, #E8C58E 40%, #C8A367);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	font-style: italic;
	font-weight: 500;
}

/* ─────────────── SOURCE CARD — page 1 ─────────────── */
.source-card {
	max-width: 680px;
	margin: 0 auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
	padding: var(--s-6);
	border-radius: var(--r-xl);
	border: 1px solid var(--stroke-strong);
	background:
		linear-gradient(180deg, rgba(38, 30, 22, 0.6), rgba(20, 16, 12, 0.55)),
		var(--glass-strong);
	backdrop-filter: blur(24px) saturate(130%);
	-webkit-backdrop-filter: blur(24px) saturate(130%);
	box-shadow: var(--shadow-md), var(--inner-light);
}

.mode-toggle {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 4px;
	background: rgba(10, 8, 6, 0.55);
	border: 1px solid var(--stroke);
	border-radius: var(--r-pill);
}
.mode-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 16px;
	border-radius: var(--r-pill);
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 500;
	color: var(--text-muted);
	transition: color var(--dur-2) var(--ease);
	position: relative;
	z-index: 2;
}
.mode-btn.active { color: var(--text-inverse); }
.mode-icon { font-size: 12px; opacity: 0.9; }

.mode-slider {
	position: absolute;
	top: 4px; left: 4px;
	width: calc(50% - 4px);
	height: calc(100% - 8px);
	border-radius: var(--r-pill);
	background: linear-gradient(180deg, #F6E3BE, #C8A367);
	box-shadow: 0 4px 18px rgba(232, 197, 142, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25);
	transition: transform var(--dur-2) var(--ease);
	z-index: 1;
}
.mode-toggle .mode-btn:nth-child(2).active ~ .mode-slider,
.mode-toggle:has(.mode-btn:nth-child(2).active) .mode-slider {
	transform: translateX(100%);
}

.input-mode { display: none; }
.input-mode.active { display: block; }

.input-group {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 18px;
	border-radius: var(--r-lg);
	border: 1px solid var(--stroke);
	background: rgba(10, 8, 6, 0.6);
	transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.input-group:focus-within {
	border-color: var(--stroke-hot);
	box-shadow: 0 0 0 4px rgba(232, 197, 142, 0.08);
}
.input-icon {
	color: var(--text-muted);
	font-size: 14px;
}
.input-field {
	flex: 1;
	background: none;
	border: none;
	outline: none;
	padding: 16px 0;
	font-size: 15px;
	color: var(--text);
}
.input-field::placeholder { color: var(--text-dim); }

/* Upload zone */
.upload-zone {
	position: relative;
	padding: 36px 20px;
	border-radius: var(--r-lg);
	border: 1.5px dashed var(--stroke-strong);
	background: rgba(10, 8, 6, 0.55);
	text-align: center;
	cursor: pointer;
	overflow: hidden;
	transition: all var(--dur-2) var(--ease);
}
.upload-zone:hover {
	border-color: var(--stroke-hot);
	background: rgba(26, 21, 17, 0.7);
}
.upload-zone.dragover {
	border-color: var(--accent);
	background: rgba(232, 197, 142, 0.08);
}

.upload-zone-glow {
	position: absolute;
	inset: 0;
	opacity: 0;
	background: radial-gradient(circle at 50% 50%, rgba(232, 197, 142, 0.18), transparent 70%);
	transition: opacity var(--dur-2) var(--ease);
	pointer-events: none;
}
.upload-zone:hover .upload-zone-glow,
.upload-zone.dragover .upload-zone-glow { opacity: 1; }

.upload-zone-inner {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.upload-icon {
	width: 56px; height: 56px;
	border-radius: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: var(--accent);
	background: linear-gradient(180deg, rgba(232,197,142,0.14), rgba(232,197,142,0.04));
	border: 1px solid var(--stroke-strong);
	box-shadow: var(--inner-light);
}

.upload-text {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--text);
}
.upload-subtext {
	font-size: 12px;
	color: var(--text-muted);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.file-info {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border-radius: var(--r-md);
	background: rgba(10, 8, 6, 0.6);
	border: 1px solid var(--stroke-strong);
}
.file-icon {
	width: 40px; height: 40px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--accent);
	background: rgba(232, 197, 142, 0.1);
	border: 1px solid var(--stroke);
}
.file-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.file-name {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 500;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.file-status {
	font-size: 11px;
	color: var(--accent);
	text-transform: uppercase;
	letter-spacing: 0.2em;
}
.remove-file {
	width: 32px; height: 32px;
	border-radius: 10px;
	color: var(--text-muted);
	transition: all var(--dur-1) var(--ease);
}
.remove-file:hover { color: var(--text); background: rgba(232, 197, 142, 0.08); }

/* ─────────────── BUTTONS ─────────────── */
.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 32px;
	border-radius: var(--r-pill);
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--text-inverse);
	background: linear-gradient(180deg, #F6E3BE 0%, #E8C58E 50%, #C8A367 100%);
	box-shadow: 0 10px 30px rgba(232, 197, 142, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.3);
	position: relative;
	overflow: hidden;
	transition: all var(--dur-2) var(--ease);
	min-width: 200px;
}
.btn-primary::before {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
	transform: translateX(-100%);
	transition: transform 1.3s var(--ease);
}
.btn-primary:hover:not(:disabled)::before { transform: translateX(100%); }
.btn-primary:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: 0 14px 38px rgba(232, 197, 142, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn-primary:disabled {
	opacity: 0.38;
	cursor: not-allowed;
	filter: grayscale(0.3);
}
.btn-arrow, .btn-icon { font-size: 12px; }

.btn-secondary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border-radius: var(--r-pill);
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 500;
	color: var(--text);
	background: var(--glass);
	border: 1px solid var(--stroke-strong);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	transition: all var(--dur-1) var(--ease);
}
.btn-secondary:hover {
	border-color: var(--stroke-hot);
	color: var(--accent);
	transform: translateY(-1px);
}

/* ─────────────── TRAILER (featured) — page 2 ─────────────── */
.trailer-option { margin-bottom: var(--s-4); }

.btn-trailer {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--s-5);
	width: 100%;
	padding: 24px 26px;
	border-radius: var(--r-xl);
	border: 1px solid var(--stroke-hot);
	background:
		linear-gradient(135deg, rgba(232, 197, 142, 0.12) 0%, rgba(200, 163, 103, 0.05) 55%, rgba(26, 21, 17, 0.6) 100%),
		var(--glass-strong);
	text-align: left;
	cursor: pointer;
	overflow: hidden;
	box-shadow: var(--shadow-md), var(--inner-light);
	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);
	transition: all var(--dur-2) var(--ease);
}
.btn-trailer:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg), var(--inner-light);
}
.btn-trailer.selected {
	border-color: var(--accent);
	background:
		linear-gradient(135deg, rgba(232, 197, 142, 0.2) 0%, rgba(200, 163, 103, 0.1) 55%, rgba(26, 21, 17, 0.7) 100%),
		var(--glass-strong);
	box-shadow:
		0 0 0 2px rgba(232, 197, 142, 0.2),
		0 20px 60px rgba(232, 197, 142, 0.2),
		var(--inner-light);
}
.btn-trailer.selected .trailer-arrow {
	background: linear-gradient(180deg, #F6E3BE, #C8A367);
	color: var(--text-inverse);
	border-color: transparent;
}
.btn-trailer-glow {
	position: absolute;
	top: -60px; right: -60px;
	width: 300px; height: 300px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(232, 197, 142, 0.22), transparent 65%);
	filter: blur(28px);
	pointer-events: none;
	animation: breathe 4.5s ease-in-out infinite;
}
@keyframes breathe {
	0%, 100% { transform: scale(1); opacity: 0.6; }
	50%      { transform: scale(1.08); opacity: 0.9; }
}

.btn-trailer-main { display: contents; }

.trailer-icon {
	width: 60px; height: 60px;
	border-radius: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: var(--accent-hot);
	background: linear-gradient(180deg, rgba(246, 227, 190, 0.18), rgba(200, 163, 103, 0.06));
	border: 1px solid var(--stroke-hot);
	box-shadow: var(--inner-light);
	flex-shrink: 0;
}

.trailer-info { display: flex; flex-direction: column; gap: 4px; }
.trailer-eyebrow {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.32em;
	color: var(--accent);
	font-weight: 600;
}
.trailer-title {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 700;
	color: var(--text);
	letter-spacing: -0.015em;
}
.trailer-desc {
	font-size: 13px;
	color: var(--text-muted);
}
.trailer-arrow {
	width: 40px; height: 40px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: var(--accent);
	border: 1px solid var(--stroke-strong);
	background: rgba(232, 197, 142, 0.08);
	transition: transform var(--dur-2) var(--ease);
}
.btn-trailer:hover .trailer-arrow { transform: translateX(3px); }

.type-divider {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--text-dim);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.32em;
	margin: var(--s-4) 0;
}
.type-divider::before, .type-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--stroke-strong), transparent);
}

/* ─────────────── TYPE CARDS — page 2 ─────────────── */
.type-options {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--s-4);
}

.type-card {
	position: relative;
	cursor: pointer;
}
.type-card input { position: absolute; opacity: 0; pointer-events: none; }

.type-card-inner {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px;
	border-radius: var(--r-lg);
	border: 1px solid var(--stroke);
	background: var(--glass);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	transition: all var(--dur-2) var(--ease);
	height: 100%;
}
.type-card:hover .type-card-inner {
	border-color: var(--stroke-strong);
	transform: translateY(-2px);
	background: var(--glass-strong);
}
.type-card input:checked ~ .type-card-inner {
	border-color: var(--stroke-hot);
	background: linear-gradient(135deg, rgba(232, 197, 142, 0.1), rgba(20, 16, 12, 0.6));
	box-shadow: 0 0 0 1px rgba(232, 197, 142, 0.12), var(--inner-light);
}

.type-card-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.type-icon {
	width: 40px; height: 40px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	color: var(--accent);
	background: rgba(232, 197, 142, 0.08);
	border: 1px solid var(--stroke);
}
.type-card input:checked ~ .type-card-inner .type-icon {
	background: rgba(232, 197, 142, 0.14);
	border-color: var(--stroke-hot);
}

.type-check {
	width: 26px; height: 26px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	color: var(--text-inverse);
	background: transparent;
	border: 1px solid var(--stroke-strong);
	opacity: 0;
	transition: all var(--dur-2) var(--ease);
}
.type-card input:checked ~ .type-card-inner .type-check {
	opacity: 1;
	background: linear-gradient(180deg, #F6E3BE, #C8A367);
	border-color: transparent;
}

.type-info { display: flex; flex-direction: column; gap: 4px; }
.type-name {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--text);
	letter-spacing: -0.01em;
}
.type-desc {
	font-size: 12.5px;
	color: var(--text-muted);
	line-height: 1.4;
}

/* ─────────────── CUSTOMIZE — page 3 ─────────────── */
.customize-section {
	padding: var(--s-6);
	border-radius: var(--r-xl);
	background: var(--glass);
	border: 1px solid var(--stroke-strong);
	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);
	box-shadow: var(--shadow-sm), var(--inner-light);
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
}

.customize-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}
.customize-head--compact { margin-bottom: 0; }
.customize-head-main {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 1;
}

.customize-icon {
	width: 44px; height: 44px;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	color: var(--accent);
	background: rgba(232, 197, 142, 0.08);
	border: 1px solid var(--stroke);
}
.customize-label {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--text);
	letter-spacing: -0.01em;
}
.customize-hint {
	font-size: 12px;
	color: var(--text-muted);
	margin-top: 2px;
}

.toggle-switch {
	position: relative;
	width: 48px;
	height: 28px;
	flex-shrink: 0;
}
.toggle-switch input { display: none; }
.toggle-slider {
	position: absolute;
	inset: 0;
	border-radius: var(--r-pill);
	background: rgba(10, 8, 6, 0.7);
	border: 1px solid var(--stroke);
	transition: all var(--dur-2) var(--ease);
}
.toggle-slider::before {
	content: "";
	position: absolute;
	top: 3px; left: 3px;
	width: 20px; height: 20px;
	border-radius: 50%;
	background: var(--text-muted);
	transition: all var(--dur-2) var(--ease);
}
.toggle-switch input:checked + .toggle-slider {
	background: linear-gradient(90deg, rgba(232, 197, 142, 0.2), rgba(246, 227, 190, 0.3));
	border-color: var(--stroke-hot);
}
.toggle-switch input:checked + .toggle-slider::before {
	left: 23px;
	background: linear-gradient(180deg, #F6E3BE, #C8A367);
	box-shadow: 0 2px 8px rgba(232, 197, 142, 0.4);
}

/* Subtitle style cards */
.subtitle-styles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.style-card {
	position: relative;
	cursor: pointer;
}
.style-card input { position: absolute; opacity: 0; pointer-events: none; }
.style-card-inner {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 14px;
	border-radius: var(--r-md);
	border: 1px solid var(--stroke);
	background: rgba(10, 8, 6, 0.5);
	transition: all var(--dur-2) var(--ease);
	position: relative;
}
.style-card:hover .style-card-inner { border-color: var(--stroke-strong); }
.style-card input:checked ~ .style-card-inner {
	border-color: var(--stroke-hot);
	background: rgba(232, 197, 142, 0.06);
}

.style-preview {
	height: 58px;
	border-radius: 10px;
	background: linear-gradient(135deg, #1F1812, #0D0A07);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	overflow: hidden;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}
.style-preview--viral .style-preview-word {
	color: #fff;
	text-shadow: 0 2px 6px rgba(0,0,0,0.8);
	padding: 2px 6px;
	border-radius: 4px;
}
.style-preview--viral .style-preview-word--hot {
	background: #FFCF2E;
	color: #1a1307;
}
.style-preview--minimal span {
	color: rgba(255,255,255,0.9);
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0.02em;
	font-size: 11px;
}
.style-preview--classic span {
	color: #fff;
	font-weight: 400;
	text-transform: none;
	font-size: 11px;
}

.style-info { display: flex; flex-direction: column; gap: 1px; }
.style-name {
	font-family: var(--font-display);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--text);
}
.style-desc {
	font-size: 10.5px;
	color: var(--text-muted);
}
.style-check {
	position: absolute;
	top: 10px; right: 10px;
	width: 20px; height: 20px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 8px;
	color: var(--text-inverse);
	background: linear-gradient(180deg, #F6E3BE, #C8A367);
	opacity: 0;
	transition: opacity var(--dur-2) var(--ease);
}
.style-card input:checked ~ .style-card-inner .style-check { opacity: 1; }

/* Voice select */
.voice-options { display: flex; flex-direction: column; gap: 10px; }
.select-wrap {
	position: relative;
	display: flex;
	align-items: center;
	padding: 0 44px 0 44px;
	border-radius: var(--r-md);
	border: 1px solid var(--stroke);
	background: rgba(10, 8, 6, 0.5);
	transition: border-color var(--dur-1) var(--ease);
}
.select-wrap:hover { border-color: var(--stroke-strong); }
.select-wrap-icon {
	position: absolute;
	left: 16px;
	color: var(--text-muted);
	font-size: 13px;
	pointer-events: none;
}
.select-wrap-chevron {
	position: absolute;
	right: 16px;
	color: var(--text-muted);
	font-size: 11px;
	pointer-events: none;
}
.select-field {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	padding: 14px 0;
	background: none;
	border: none;
	outline: none;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--text);
	cursor: pointer;
}
.select-field option { background: #14100C; color: var(--text); }

/* Language segmented */
.language-options {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
.language-card { position: relative; cursor: pointer; }
.language-card input { position: absolute; opacity: 0; pointer-events: none; }
.language-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px;
	border-radius: var(--r-md);
	border: 1px solid var(--stroke);
	background: rgba(10, 8, 6, 0.5);
	transition: all var(--dur-2) var(--ease);
}
.language-card:hover .language-inner { border-color: var(--stroke-strong); }
.language-card input:checked ~ .language-inner {
	border-color: var(--stroke-hot);
	background: rgba(232, 197, 142, 0.07);
}
.lang-flag { font-size: 16px; color: var(--accent); }
.lang-name {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
	letter-spacing: 0.02em;
}

.btn-generate { min-width: 260px; }

/* ─────────────── PROCESSING — page 4 ─────────────── */
#page-processing {
	justify-content: center;
	align-items: center;
	gap: var(--s-8);
}

.processing-content {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-8);
	padding: var(--s-7) 0;
}

.sonya-sphere-wrap {
	position: relative;
	width: min(520px, 82vw);
	aspect-ratio: 1;
	margin: 0 auto;
	isolation: isolate;
}
.sonya-sphere-wrap::before {
	content: "";
	position: absolute;
	inset: -18%;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 55%, rgba(232, 197, 142, 0.38), transparent 55%),
		radial-gradient(circle at 50% 50%, rgba(200, 163, 103, 0.14), transparent 70%);
	filter: blur(44px);
	z-index: -1;
	pointer-events: none;
	animation: coreBreathe 6s ease-in-out infinite;
}
.sonya-sphere-wrap::after {
	content: "";
	position: absolute;
	inset: 40% 0 -40%;
	background: radial-gradient(ellipse 60% 40% at 50% 50%, rgba(0,0,0,0.6), transparent 70%);
	filter: blur(18px);
	z-index: -2;
	pointer-events: none;
	opacity: 0.7;
}

#sonya-sphere {
	width: 100%;
	height: 100%;
	display: block;
}

@keyframes coreBreathe {
	0%, 100% { transform: scale(1); opacity: 0.85; }
	50%      { transform: scale(1.08); opacity: 1; }
}

.processing-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-4);
	text-align: center;
	width: 100%;
}

.processing-title {
	font-family: var(--font-display);
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--text);
}

.processing-status {
	font-size: 14px;
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
	min-height: 1.4em;
	transition: opacity var(--dur-2) var(--ease);
}

.processing-progress {
	width: 100%;
	max-width: 360px;
	height: 3px;
	border-radius: var(--r-pill);
	background: rgba(232, 197, 142, 0.08);
	overflow: hidden;
	position: relative;
	margin-top: 8px;
}
.progress-bar {
	height: 100%;
	width: 0;
	border-radius: var(--r-pill);
	background: linear-gradient(90deg, #C8A367, #F6E3BE, #E8C58E);
	background-size: 200% 100%;
	transition: width var(--dur-3) var(--ease);
	animation: progressShine 2.8s linear infinite;
	position: relative;
}
.progress-bar::after {
	content: "";
	position: absolute;
	right: -6px;
	top: 50%;
	transform: translateY(-50%);
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--accent-hot);
	box-shadow: 0 0 16px var(--accent);
}

@keyframes progressShine {
	0%   { background-position: 0% 50%; }
	100% { background-position: 200% 50%; }
}

/* ─────────────── RESULT — page 5 ─────────────── */
.page-header--result {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}
.result-header-left { display: flex; flex-direction: column; gap: 6px; }
.result-headline {
	font-family: var(--font-display);
	font-size: clamp(28px, 3.6vw, 42px);
	font-weight: 700;
	letter-spacing: -0.025em;
	color: var(--text);
}
.result-sub {
	font-size: 14px;
	color: var(--text-muted);
}
.success-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: var(--r-pill);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: #B8E8C2;
	background: rgba(76, 175, 108, 0.12);
	border: 1px solid rgba(76, 175, 108, 0.3);
}
.success-pill i { font-size: 10px; }

.result-content {
	display: flex;
	flex-direction: column;
	gap: var(--s-7);
}

.result-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	grid-template-rows: auto auto;
	gap: var(--s-5);
}

.result-card {
	position: relative;
	padding: var(--s-5);
	border-radius: var(--r-xl);
	border: 1px solid var(--stroke-strong);
	background: var(--glass);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	box-shadow: var(--shadow-sm), var(--inner-light);
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	overflow: hidden;
}

.result-card--hero {
	grid-row: span 2;
	padding: 0;
	background: rgba(10, 8, 6, 0.65);
}
.result-card-thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background:
		linear-gradient(135deg, #2A1F15 0%, #14100C 100%),
		radial-gradient(circle at 30% 40%, rgba(232, 197, 142, 0.2), transparent 60%);
	overflow: hidden;
}
.result-card-thumb-glow {
	position: absolute;
	top: 30%; left: 25%;
	width: 55%; height: 55%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(232, 197, 142, 0.28), transparent 65%);
	filter: blur(40px);
}
.result-card-play {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 70px; height: 70px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: var(--text-inverse);
	background: linear-gradient(180deg, #F6E3BE, #C8A367);
	box-shadow: 0 12px 40px rgba(232, 197, 142, 0.45);
	cursor: pointer;
	transition: transform var(--dur-2) var(--ease);
}
.result-card-play:hover { transform: translate(-50%, -50%) scale(1.06); }
.result-card-ratio, .result-card-duration {
	position: absolute;
	padding: 6px 10px;
	border-radius: var(--r-sm);
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text);
	background: rgba(10, 8, 6, 0.72);
	backdrop-filter: blur(10px);
	border: 1px solid var(--stroke);
}
.result-card-ratio { top: 14px; left: 14px; }
.result-card-duration { top: 14px; right: 14px; }

.result-card-body {
	padding: var(--s-5);
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.result-card-title {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--text);
}
.result-card-metrics { display: flex; gap: 10px; flex-wrap: wrap; }

.score-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border-radius: var(--r-pill);
	font-family: var(--font-display);
	font-size: 11.5px;
	font-weight: 600;
	color: var(--accent-hot);
	background: rgba(232, 197, 142, 0.12);
	border: 1px solid var(--stroke-strong);
}
.score-badge i { font-size: 10px; }
.score-badge--soft {
	color: var(--text-muted);
	background: rgba(155, 141, 120, 0.06);
	border-color: var(--stroke);
}

/* Clips */
.result-clips-head { display: flex; justify-content: space-between; align-items: center; }
.result-count-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: var(--r-pill);
	font-size: 11px;
	font-weight: 600;
	color: var(--text-muted);
	background: rgba(10, 8, 6, 0.5);
	border: 1px solid var(--stroke);
}
.result-clips-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}
.mini-clip {
	position: relative;
	aspect-ratio: 9 / 16;
	max-height: 96px;
	border-radius: 10px;
	background: linear-gradient(180deg, #2A1F15, #0D0A07);
	border: 1px solid var(--stroke);
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	padding: 6px;
}
.mini-clip::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 30%, rgba(232, 197, 142, 0.14), transparent 70%);
}
.mini-clip span {
	position: absolute;
	top: 5px; left: 5px;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--accent);
	background: rgba(10, 8, 6, 0.7);
	padding: 2px 5px;
	border-radius: 4px;
}
.mini-clip em {
	position: relative;
	font-style: normal;
	font-size: 10px;
	font-weight: 600;
	color: var(--text);
	font-variant-numeric: tabular-nums;
}

/* Archive */
.result-archive-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--s-4);
	padding-bottom: var(--s-3);
	border-bottom: 1px solid var(--stroke);
}
.result-stat { display: flex; flex-direction: column; gap: 2px; }
.stat-value {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--text);
}
.stat-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--text-muted);
}
.btn-download {
	width: 100%;
	min-width: 0;
	padding: 14px 22px;
}

/* Assistant card */
.result-card--assistant {
	padding: var(--s-5);
	background: linear-gradient(135deg, rgba(232, 197, 142, 0.08), rgba(20, 16, 12, 0.7));
	border-color: var(--stroke-hot);
	position: relative;
	overflow: hidden;
}
.assistant-card-glow {
	position: absolute;
	top: -50%; right: -30%;
	width: 200px; height: 200px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(232, 197, 142, 0.22), transparent 60%);
	filter: blur(32px);
	pointer-events: none;
	animation: breathe 5s ease-in-out infinite;
}
.assistant-card-inner {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	position: relative;
	z-index: 1;
}
.assistant-icon {
	width: 48px; height: 48px;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: var(--accent-hot);
	background: linear-gradient(180deg, rgba(246, 227, 190, 0.22), rgba(200, 163, 103, 0.08));
	border: 1px solid var(--stroke-hot);
	box-shadow: var(--inner-light);
	flex-shrink: 0;
}
.assistant-content { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.assistant-title {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 700;
	color: var(--text);
}
.assistant-text { font-size: 12.5px; color: var(--text-muted); line-height: 1.4; }

.assistant-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 20px;
	border-radius: var(--r-pill);
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	color: var(--text-inverse);
	background: linear-gradient(180deg, #F6E3BE, #C8A367);
	box-shadow: 0 8px 22px rgba(232, 197, 142, 0.28);
	transition: all var(--dur-2) var(--ease);
	position: relative;
	z-index: 1;
}
.assistant-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(232, 197, 142, 0.4); }

.assistant-lock {
	position: absolute;
	inset: 0;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: rgba(10, 8, 6, 0.88);
	backdrop-filter: blur(6px);
	border-radius: var(--r-xl);
	z-index: 2;
}
.result-card--assistant.locked .assistant-lock { display: flex; }
.assistant-lock-icon {
	width: 40px; height: 40px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: var(--text-dim);
	background: rgba(10, 8, 6, 0.8);
	border: 1px solid var(--stroke-strong);
}
.assistant-lock-text {
	font-family: var(--font-display);
	font-size: 12px;
	color: var(--text-muted);
	font-weight: 600;
	letter-spacing: 0.08em;
}

/* ─────────────── HANDOFF — Editor continuation ─────────────── */
.handoff-card {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: var(--s-6);
	padding: var(--s-7) var(--s-7);
	border-radius: var(--r-xl);
	border: 1px solid var(--stroke-strong);
	background:
		linear-gradient(135deg, rgba(232, 197, 142, 0.08) 0%, rgba(26, 21, 17, 0.55) 50%, rgba(15, 12, 9, 0.65) 100%),
		var(--glass-strong);
	backdrop-filter: blur(24px) saturate(130%);
	-webkit-backdrop-filter: blur(24px) saturate(130%);
	box-shadow: var(--shadow-md), var(--inner-light);
	overflow: hidden;
}
.handoff-glow {
	position: absolute;
	top: -80px; right: -80px;
	width: 360px; height: 360px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(232, 197, 142, 0.22), transparent 60%);
	filter: blur(36px);
	pointer-events: none;
	animation: breathe 6s ease-in-out infinite;
}
.handoff-body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.handoff-eyebrow {
	font-family: var(--font-display);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.32em;
	color: var(--accent);
	font-weight: 600;
}
.handoff-title {
	font-family: var(--font-display);
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 700;
	letter-spacing: -0.018em;
	color: var(--text);
	margin-top: 2px;
}
.handoff-desc {
	font-size: 14px;
	color: var(--text-muted);
	max-width: 52ch;
	line-height: 1.5;
}
.handoff-features {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 6px;
}
.handoff-features li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: var(--r-pill);
	font-size: 12px;
	font-weight: 500;
	color: var(--text-muted);
	background: rgba(10, 8, 6, 0.55);
	border: 1px solid var(--stroke);
}
.handoff-features li i { color: var(--accent); font-size: 10px; }

.handoff-cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 24px;
	border-radius: var(--r-pill);
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
	color: var(--text-inverse);
	background: linear-gradient(180deg, #F6E3BE 0%, #E8C58E 50%, #C8A367 100%);
	box-shadow: 0 10px 28px rgba(232, 197, 142, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3);
	transition: all var(--dur-2) var(--ease);
	white-space: nowrap;
}
.handoff-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 38px rgba(232, 197, 142, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.handoff-cta i { font-size: 12px; }

/* ─────────────── MODALS ─────────────── */
.locked-modal-overlay,
.profile-modal-overlay,
.plans-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(7, 5, 3, 0.72);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	animation: overlayIn var(--dur-2) var(--ease);
}
.locked-modal-overlay.active,
.profile-modal-overlay.active,
.plans-modal-overlay.active { display: flex; }

.locked-modal,
.profile-modal,
.plans-modal {
	width: 100%;
	border-radius: var(--r-2xl);
	background: var(--glass-hot);
	border: 1px solid var(--stroke-strong);
	box-shadow: var(--shadow-lg), var(--inner-light);
	backdrop-filter: blur(28px) saturate(140%);
	-webkit-backdrop-filter: blur(28px) saturate(140%);
	animation: menuIn var(--dur-3) var(--ease-out);
	position: relative;
}

.locked-modal {
	max-width: 380px;
	padding: 34px 30px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.locked-modal-icon {
	width: 62px; height: 62px;
	border-radius: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: var(--accent);
	background: rgba(232, 197, 142, 0.1);
	border: 1px solid var(--stroke-strong);
	margin-bottom: 8px;
}
.locked-modal-eyebrow {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	color: var(--accent);
	font-weight: 600;
}
.locked-modal-title {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 700;
	color: var(--text);
	letter-spacing: -0.01em;
}
.locked-modal-text {
	font-size: 14px;
	color: var(--text-muted);
	line-height: 1.5;
}
.locked-modal-btn {
	margin-top: 10px;
	padding: 12px 32px;
	border-radius: var(--r-pill);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 13px;
	color: var(--text-inverse);
	background: linear-gradient(180deg, #F6E3BE, #C8A367);
	box-shadow: 0 6px 20px rgba(232, 197, 142, 0.28);
	transition: transform var(--dur-1) var(--ease);
}
.locked-modal-btn:hover { transform: translateY(-1px); }

/* Profile modal */
.profile-modal {
	max-width: 420px;
	padding: 30px 26px 26px;
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
}
.profile-modal-close,
.plans-modal-close {
	position: absolute;
	top: 16px; right: 16px;
	width: 36px; height: 36px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--text-muted);
	background: rgba(10, 8, 6, 0.4);
	border: 1px solid var(--stroke);
	transition: all var(--dur-1) var(--ease);
}
.profile-modal-close:hover,
.plans-modal-close:hover { color: var(--text); border-color: var(--stroke-strong); }

.profile-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding-top: 10px;
}
.profile-avatar-wrap {
	position: relative;
	width: 78px; height: 78px;
}
.profile-modal-avatar {
	width: 100%; height: 100%;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--stroke-hot);
}
.profile-avatar-glow {
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	background: conic-gradient(from 0deg, transparent, var(--accent), transparent);
	opacity: 0.5;
	filter: blur(4px);
	z-index: -1;
	animation: ringSpin 6s linear infinite;
}
.profile-name {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	color: var(--text);
}
.profile-username {
	font-size: 13px;
	color: var(--text-muted);
}

.profile-status {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.profile-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border-radius: var(--r-pill);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--accent);
	background: rgba(232, 197, 142, 0.1);
	border: 1px solid var(--stroke-strong);
}
.status-icon { font-size: 12px; }

.profile-info {
	padding: 14px 16px;
	border-radius: var(--r-md);
	background: rgba(10, 8, 6, 0.5);
	border: 1px solid var(--stroke);
}
.profile-info-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.profile-info-label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--text-muted);
}
.profile-info-value {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	color: var(--text);
	font-variant-numeric: tabular-nums;
}

.profile-subscription {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.subscription-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.subscription-eyebrow {
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	color: var(--dune-400);
	font-weight: 600;
}
.subscription-title {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 700;
	color: var(--text);
}
.subscription-info-wrapper {
	display: flex;
	align-items: center;
	gap: 8px;
}
.subscription-hint {
	font-size: 11px;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.12em;
}
.subscription-info-btn {
	width: 28px; height: 28px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--accent);
	background: rgba(232, 197, 142, 0.08);
	border: 1px solid var(--stroke-strong);
	transition: all var(--dur-1) var(--ease);
}
.subscription-info-btn:hover { transform: translateY(-1px); background: rgba(232, 197, 142, 0.14); }
.info-icon-small {
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 700;
	font-style: italic;
}

.subscription-current {
	padding: 14px 16px;
	border-radius: var(--r-md);
	background: rgba(10, 8, 6, 0.5);
	border: 1px solid var(--stroke);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.subscription-plan-name {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 700;
	color: var(--accent);
}
.subscription-limits {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.limit-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.limit-label { font-size: 12px; color: var(--text-muted); }
.limit-value {
	font-family: var(--font-display);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--text);
}

/* Plans modal */
.plans-modal {
	max-width: 760px;
	padding: 30px 28px 24px;
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
}
.plans-modal-head { text-align: center; display: flex; flex-direction: column; gap: 4px; }
.plans-modal-title {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 700;
	color: var(--text);
	letter-spacing: -0.01em;
}
.plans-modal-subtitle {
	font-size: 13px;
	color: var(--text-muted);
}

.subscription-plans {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-4);
}

.plan-card {
	position: relative;
	padding: 22px 20px 18px;
	border-radius: var(--r-lg);
	border: 1px solid var(--stroke);
	background: rgba(10, 8, 6, 0.55);
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: all var(--dur-2) var(--ease);
}
.plan-card:hover {
	transform: translateY(-2px);
	border-color: var(--stroke-strong);
}
.plan-popular {
	border-color: var(--stroke-hot);
	background: linear-gradient(135deg, rgba(232,197,142,0.1), rgba(10,8,6,0.65));
	box-shadow: 0 12px 40px rgba(232, 197, 142, 0.1), var(--inner-light);
}
.plan-selected {
	border-color: var(--accent);
	box-shadow: 0 0 0 2px rgba(232, 197, 142, 0.25);
}
.plan-badge {
	position: absolute;
	top: -10px; left: 50%;
	transform: translateX(-50%);
	padding: 4px 12px;
	border-radius: var(--r-pill);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text-inverse);
	background: linear-gradient(180deg, #F6E3BE, #C8A367);
	box-shadow: 0 6px 18px rgba(232, 197, 142, 0.3);
}

.plan-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
}
.plan-eyebrow {
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	color: var(--dune-400);
	font-weight: 600;
	margin-bottom: 2px;
}
.plan-name {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
	color: var(--text);
}
.plan-price {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 700;
	color: var(--accent);
	letter-spacing: -0.02em;
	white-space: nowrap;
}
.plan-period {
	font-size: 11px;
	font-weight: 500;
	color: var(--text-muted);
	letter-spacing: 0;
}

.plan-features {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.plan-features li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 12.5px;
	color: var(--text);
}
.plan-features i {
	color: var(--accent);
	font-size: 10px;
	flex-shrink: 0;
}

.plan-select-btn {
	margin-top: 4px;
	padding: 11px 16px;
	border-radius: var(--r-pill);
	font-family: var(--font-display);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--text);
	background: rgba(232, 197, 142, 0.08);
	border: 1px solid var(--stroke-strong);
	transition: all var(--dur-1) var(--ease);
}
.plan-select-btn:hover {
	background: rgba(232, 197, 142, 0.14);
	border-color: var(--stroke-hot);
}
.plan-popular .plan-select-btn {
	background: linear-gradient(180deg, #F6E3BE, #C8A367);
	color: var(--text-inverse);
	border-color: transparent;
	box-shadow: 0 6px 18px rgba(232, 197, 142, 0.28);
}

.plans-modal-hint {
	text-align: center;
	font-size: 11px;
	color: var(--text-dim);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	margin-top: 4px;
}

/* ─────────────── RESPONSIVE ─────────────── */
@media (max-width: 1024px) {
	.app-container { padding: 24px 22px 36px; }

	.result-grid {
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}
	.result-card--hero { grid-row: auto; }

	.subscription-plans { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
	.app-container { padding: 20px 18px 30px; }
	.page { gap: var(--s-6); min-height: calc(100vh - 50px); min-height: calc(100svh - 50px); }

	.floating-controls { top: 14px; }
	.floating-controls--left { left: 14px; }
	.floating-controls--right { right: 14px; gap: 8px; }
	.icon-btn, .profile-btn { width: 40px; height: 40px; }

	.hero-lean { padding: clamp(40px, 10vh, 72px) 8px var(--s-4); gap: var(--s-5); }
	.brand-wordmark { font-size: clamp(46px, 12vw, 70px); }
	.hero-headline { font-size: clamp(24px, 6vw, 34px); }

	.source-card { padding: 18px; }
	.upload-zone { padding: 28px 16px; }

	.section-title { font-size: 22px; }
	.btn-trailer {
		grid-template-columns: auto 1fr;
		padding: 18px;
	}
	.trailer-arrow { display: none; }
	.trailer-icon { width: 48px; height: 48px; font-size: 18px; border-radius: 14px; }
	.trailer-title { font-size: 17px; }

	.type-options { grid-template-columns: 1fr; }
	.subtitle-styles { grid-template-columns: 1fr; }
	.language-options { grid-template-columns: 1fr 1fr 1fr; }

	.customize-section { padding: 18px; }
	.customize-head { flex-wrap: wrap; }
	.customize-icon { width: 40px; height: 40px; border-radius: 12px; font-size: 13px; }

	.handoff-card {
		grid-template-columns: 1fr;
		padding: 22px;
		gap: 18px;
	}
	.handoff-cta { justify-self: start; }

	.page-header--result { flex-direction: column; align-items: flex-start; }
	.result-headline { font-size: 28px; }

	.btn-primary { width: 100%; min-width: 0; padding: 14px 22px; }
	.page-footer { justify-content: stretch; }

	.sonya-sphere-wrap { width: min(360px, 88vw); }

	.plans-modal { padding: 24px 20px 20px; }
	.plan-card { padding: 18px 16px 16px; }

	.menu-overlay { padding: 64px 18px; }
	.menu-panel { width: 100%; }
}

@media (max-width: 420px) {
	.brand-caption { letter-spacing: 0.32em; }
	.language-options { grid-template-columns: 1fr; }
}

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

/* ============================================================
   CINEMATIC HERO — minimal, Apple-inspired
   · fullscreen video
   · single big SONYA wordmark
   · one glass module (tabs · input · source icons)
   · "Посмотреть пример" link
   ============================================================ */

/* Break out of the .app-container padding so the hero is full-bleed. */
.cinema-hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: -28px;
	margin-bottom: -40px;
	min-height: 100vh;
	min-height: 100svh;
	padding: 0;
	gap: 0;
	overflow: hidden;
	isolation: isolate;
	background: #07060a;
	animation: cinemaIn 900ms var(--ease-out) both;
}
@media (max-width: 1024px) { .cinema-hero { margin-top: -24px; margin-bottom: -36px; } }
@media (max-width: 680px)  { .cinema-hero { margin-top: -20px; margin-bottom: -30px; } }

@keyframes cinemaIn {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

/* Dim the dune ambient background while cinema hero is on screen */
body:has(#page-source.active) .ambient-bg { opacity: 0.35; transition: opacity 600ms var(--ease); }

/* ── 1. Video stage ──────────────────────────────────────── */
.cinema-stage {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	/* Fallback gradient if video fails to load */
	background:
		radial-gradient(ellipse 80% 60% at 50% 40%, rgba(80, 60, 40, 0.5), transparent 70%),
		linear-gradient(180deg, #0d0a08 0%, #0a0807 55%, #060504 100%);
}

.cinema-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	background: #07060a;
	/* Subtle cinematic warm-graphite grade */
	filter: saturate(0.9) contrast(1.02) brightness(0.88);
	transform: scale(1.04);
	animation: cinemaVideoIn 1600ms var(--ease-out) both;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
}
@keyframes cinemaVideoIn {
	0%   { opacity: 0; transform: scale(1.08); }
	100% { opacity: 1; transform: scale(1.04); }
}

/* ── 2. Overlays ─────────────────────────────────────────── */
.cinema-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.cinema-overlay--tint {
	background:
		linear-gradient(180deg,
			rgba(8, 6, 4, 0.55) 0%,
			rgba(8, 6, 4, 0.40) 45%,
			rgba(4, 3, 2, 0.80) 100%);
}
.cinema-overlay--gradient {
	background:
		radial-gradient(ellipse 65% 50% at 15% 25%, rgba(232, 197, 142, 0.10), transparent 65%),
		radial-gradient(ellipse 55% 45% at 90% 85%, rgba(40, 30, 22, 0.55), transparent 65%),
		linear-gradient(110deg, rgba(4, 3, 2, 0.45) 0%, transparent 40%, transparent 72%, rgba(4, 3, 2, 0.55) 100%);
}
.cinema-overlay--vignette {
	background: radial-gradient(ellipse 105% 85% at 50% 50%, transparent 42%, rgba(0, 0, 0, 0.68) 100%);
}
.cinema-overlay--grain {
	opacity: 0.06;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ── 3. Content stack — strict centering, lots of air ────── */
.cinema-content {
	position: relative;
	z-index: 2;
	width: 100%;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(80px, 12vh, 140px) clamp(20px, 4vw, 56px);
}
.cinema-inner {
	width: 100%;
	max-width: 640px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: clamp(40px, 6vh, 68px);
}

/* ══════════════════════════════════════════════════════════
   SONYA WORDMARK — the only large text on screen
   ══════════════════════════════════════════════════════════ */
.sonya-wordmark {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(72px, 13vw, 180px);
	line-height: 0.9;
	letter-spacing: -0.055em;
	margin: 0;
	color: transparent;
	background: linear-gradient(180deg,
		#fdf8ed 0%,
		#f1d9a8 52%,
		#b88d52 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	/* Very deliberate soft warm glow — not aggressive */
	filter:
		drop-shadow(0 2px 40px rgba(232, 197, 142, 0.18))
		drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/* ══════════════════════════════════════════════════════════
   HERO MODULE — one cohesive glass object
   Contains: tabs row · input row · source icons row
   No nested glass, no extra capsules inside.
   ══════════════════════════════════════════════════════════ */
.hero-module {
	position: relative;
	width: 100%;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	border-radius: 28px;
	isolation: isolate;
	overflow: hidden;

	/* Warm-tinted frosted glass (not cold blue) */
	background: rgba(28, 22, 16, 0.32);
	backdrop-filter: blur(30px) saturate(150%);
	-webkit-backdrop-filter: blur(30px) saturate(150%);
	border: 1px solid rgba(255, 240, 210, 0.12);
	box-shadow:
		/* top inner highlight */
		inset 0 1px 0 rgba(255, 240, 210, 0.10),
		/* subtle bottom inner depth */
		inset 0 -1px 0 rgba(0, 0, 0, 0.20),
		/* soft outer shadow */
		0 24px 60px rgba(0, 0, 0, 0.45),
		0 6px 18px rgba(0, 0, 0, 0.25);
}

/* Top highlight overlay — physical glass catches light at its top edge */
.hero-module-sheen {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	z-index: 0;
	background: linear-gradient(180deg,
		rgba(255, 240, 210, 0.12) 0%,
		rgba(255, 240, 210, 0.02) 35%,
		transparent 100%);
}

.hero-module > * {
	position: relative;
	z-index: 1;
}

/* ── Row 1 — segmented tabs (Ссылка / Файл) ─────────────── */
/* Override the base .mode-toggle styles inside .hero-module */
.hero-module .mode-toggle {
	background: rgba(0, 0, 0, 0.22);
	border: 1px solid rgba(255, 240, 210, 0.06);
	border-radius: 999px;
	padding: 4px;
}
.hero-module .mode-btn {
	padding: 10px 18px;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: rgba(242, 234, 219, 0.55);
	transition: color 280ms var(--ease);
}
.hero-module .mode-btn.active { color: #120e0a; }
.hero-module .mode-slider {
	background: linear-gradient(180deg, #fbf0d2, #dbb277);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.40),
		inset 0 -1px 0 rgba(130, 90, 40, 0.24),
		0 4px 14px rgba(232, 197, 142, 0.28);
}

/* ── Row 2 — input row + Далее button ────────────────────── */
.hero-row-wrap {
	display: flex;
	align-items: stretch;
	gap: 8px;
	min-height: 56px;
}
.hero-row-wrap > .input-mode {
	flex: 1;
	min-width: 0;
	display: none;
}
.hero-row-wrap > .input-mode.active { display: block; }

/* The row itself — NOT another glass capsule. Just a flat surface
   that visually belongs to the module. A subtle inset darker plane. */
.hero-row {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 100%;
	min-height: 56px;
	padding: 0 18px;
	border-radius: 18px;
	background: rgba(0, 0, 0, 0.22);
	border: 1px solid rgba(255, 240, 210, 0.06);
	transition:
		background 320ms var(--ease),
		border-color 320ms var(--ease);
}
.hero-row:hover,
.hero-row:focus-within {
	background: rgba(0, 0, 0, 0.30);
	border-color: rgba(255, 240, 210, 0.12);
}

.hero-row-icon {
	color: rgba(232, 197, 142, 0.72);
	font-size: 14px;
	flex-shrink: 0;
	transition: color 320ms var(--ease);
}
.hero-row:focus-within .hero-row-icon { color: #f6e3be; }

.hero-row-field {
	flex: 1;
	min-width: 0;
	background: none;
	border: none;
	outline: none;
	padding: 0;
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: -0.005em;
	color: #f2eadb;
	caret-color: #e8c58e;
}
.hero-row-field::placeholder {
	color: rgba(242, 234, 219, 0.38);
	font-weight: 400;
}

/* File mode helpers — same row layout, minimal */
.hero-row--file { cursor: pointer; }
.hero-row-placeholder { flex: 1; min-width: 0; }
.hero-row-filename {
	flex: 1;
	min-width: 0;
	font-family: var(--font-body);
	font-size: 14px;
	color: rgba(242, 234, 219, 0.82);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.hero-row-remove {
	width: 28px; height: 28px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: rgba(242, 234, 219, 0.55);
	background: rgba(255, 240, 210, 0.06);
	font-size: 10px;
	transition: all 220ms var(--ease);
	flex-shrink: 0;
}
.hero-row-remove:hover {
	color: #f6e3be;
	background: rgba(232, 197, 142, 0.14);
}
/* Drag-over state (used by app.js on #upload-zone) */
.hero-row--file.dragover {
	background: rgba(232, 197, 142, 0.10);
	border-color: rgba(232, 197, 142, 0.36);
}

/* ── Далее — liquid glass capsule button ─────────────────── */
/* Built from Figma liquid-glass ring logic:
   · fully transparent base
   · thick-ish soft white border
   · dual inset corner highlights (TL + BR) creating the chrome ring effect
   · backdrop blur so the video reads through the glass
   Values normalized to clean production pixels. */
.hero-submit {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 56px;
	padding: 0 32px;
	border-radius: 999px;
	flex-shrink: 0;

	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.92);

	background: transparent;
	backdrop-filter: blur(20px) saturate(140%);
	-webkit-backdrop-filter: blur(20px) saturate(140%);
	border: 2px solid rgba(255, 255, 255, 0.10);
	box-shadow:
		/* top-left inner highlight (light hits from BR) */
		inset  6px  6px 14px -6px rgba(255, 255, 255, 0.32),
		/* bottom-right inner highlight (light hits from TL) */
		inset -6px -6px 14px -6px rgba(255, 255, 255, 0.32),
		/* soft outer depth so it sits on the video */
		0 10px 24px rgba(0, 0, 0, 0.18);

	cursor: pointer;
	overflow: hidden;
	transition:
		color 260ms var(--ease),
		background 320ms var(--ease),
		border-color 260ms var(--ease),
		box-shadow 320ms var(--ease),
		transform 220ms var(--ease);
}

.hero-submit:hover:not(:disabled) {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.18);
	box-shadow:
		inset  6px  6px 14px -6px rgba(255, 255, 255, 0.45),
		inset -6px -6px 14px -6px rgba(255, 255, 255, 0.45),
		0 12px 28px rgba(0, 0, 0, 0.22);
	transform: translateY(-1px);
}
.hero-submit:active:not(:disabled) { transform: translateY(0) scale(0.99); }

.hero-submit:disabled {
	cursor: not-allowed;
	color: rgba(255, 255, 255, 0.28);
	border-color: rgba(255, 255, 255, 0.06);
	box-shadow:
		inset  6px  6px 14px -6px rgba(255, 255, 255, 0.12),
		inset -6px -6px 14px -6px rgba(255, 255, 255, 0.12),
		0 6px 16px rgba(0, 0, 0, 0.12);
}

.hero-submit-label { white-space: nowrap; }
.hero-submit-icon {
	font-size: 11px;
	opacity: 0.82;
	transition: transform 260ms var(--ease), opacity 260ms var(--ease);
}
.hero-submit:hover:not(:disabled) .hero-submit-icon {
	transform: translateX(3px);
	opacity: 1;
}

/* ── Row 3 — source icons only ────────────────────────────── */
.hero-sources {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 26px;
	padding: 6px 0 2px;
	color: rgba(242, 234, 219, 0.38);
}
.hero-sources > i {
	font-size: 13px;
	transition: color 260ms var(--ease);
	cursor: default;
}
.hero-sources > i:hover { color: rgba(242, 234, 219, 0.72); }

/* ══════════════════════════════════════════════════════════
   "Посмотреть пример" — secondary link below module
   ══════════════════════════════════════════════════════════ */
.hero-watch {
	position: relative;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: rgba(242, 234, 219, 0.62);
	padding: 8px 4px;
	background: none;
	border: none;
	cursor: pointer;
	transition: color 280ms var(--ease);
}
.hero-watch::after {
	content: "";
	position: absolute;
	left: 4px; right: 4px;
	bottom: 4px;
	height: 1px;
	background: currentColor;
	opacity: 0;
	transform: translateY(2px);
	transition: opacity 280ms var(--ease), transform 280ms var(--ease);
}
.hero-watch:hover { color: #f6e3be; }
.hero-watch:hover::after { opacity: 0.35; transform: translateY(0); }

/* ══════════════════════════════════════════════════════════
   Reveal stagger
   ══════════════════════════════════════════════════════════ */
.reveal {
	opacity: 0;
	transform: translateY(12px);
	animation: cinemaReveal 900ms var(--ease-out) forwards;
	animation-delay: var(--rd, 0ms);
	will-change: transform, opacity;
}
@keyframes cinemaReveal {
	0%   { opacity: 0; transform: translateY(12px); filter: blur(6px); }
	60%  { filter: blur(0); }
	100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ══════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
	.cinema-content { padding: clamp(90px, 12vh, 120px) 20px clamp(60px, 9vh, 80px); }
	.cinema-inner { gap: clamp(32px, 5vh, 48px); }
	.sonya-wordmark { font-size: clamp(64px, 16vw, 120px); letter-spacing: -0.05em; }
	.hero-module { padding: 10px; gap: 10px; border-radius: 24px; }
	.hero-row-wrap { min-height: 52px; gap: 6px; }
	.hero-row { min-height: 52px; padding: 0 14px; border-radius: 16px; }
	.hero-submit {
		height: 52px;
		padding: 0 18px;
		border-radius: 999px;
		border-width: 1.5px;
		box-shadow:
			inset  4px  4px 10px -4px rgba(255, 255, 255, 0.32),
			inset -4px -4px 10px -4px rgba(255, 255, 255, 0.32),
			0 8px 18px rgba(0, 0, 0, 0.16);
	}
	.hero-submit-label { display: none; }
	.hero-submit-icon { font-size: 12px; }
	.hero-sources { gap: 22px; }
}

@media (max-width: 420px) {
	.cinema-content { padding: 100px 16px 64px; }
	.sonya-wordmark { font-size: clamp(56px, 18vw, 92px); }
	.hero-module .mode-btn { padding: 9px 14px; font-size: 12px; }
	.hero-row-field { font-size: 14px; }
	.hero-sources { gap: 18px; }
	.hero-sources > i { font-size: 12px; }
}

/* iOS / mobile Safari — slightly reduce blur cost */
@supports (-webkit-touch-callout: none) {
	.hero-module { backdrop-filter: blur(22px) saturate(140%); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; animation: none; filter: none; }
	.cinema-video { animation: none; transform: scale(1.02); }
}

/* ============================================================
   SONYA Hero v2  —  Figma layout
   Inset "liquid bevel" pill over cinematic video background.
   Scoped to .cinema-hero--v2 so old .hero-module rules above
   stay untouched.
   ============================================================ */
.cinema-hero.cinema-hero--v2 { position: relative; overflow: hidden; }
.cinema-hero.cinema-hero--v2 .cinema-stage { position: absolute; inset: 0; z-index: 0; }
.cinema-hero.cinema-hero--v2 .cinema-video {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover;
}

/* Darker overlays over the new video so glass reads clearly */
.cinema-hero.cinema-hero--v2 .cinema-overlay--tint {
	background: rgba(0, 0, 0, 0.30);
}
.cinema-hero.cinema-hero--v2 .cinema-overlay--gradient {
	background:
		radial-gradient(120% 80% at 50% 30%, transparent 0%, rgba(0, 0, 0, 0.55) 70%, rgba(0, 0, 0, 0.82) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.00) 35%, rgba(0, 0, 0, 0.55) 100%);
}

/* Vertical stack — Wordmark / Tabs / Input / Sources / CTA */
.hero2 {
	position: relative; z-index: 2;
	width: 100%; min-height: 100%;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: clamp(20px, 3.6vh, 36px);
	padding: clamp(80px, 14vh, 140px) 24px clamp(40px, 6vh, 72px);
	box-sizing: border-box;
}

/* ---------- Wordmark ---------- */
.hero2-wordmark {
	margin: 0;
	font-family: 'Unbounded', 'Sora', system-ui, sans-serif;
	font-weight: 300;
	font-size: clamp(64px, 13vw, 120px);
	line-height: 0.95;
	letter-spacing: 0.14em;
	color: #fff;
	text-align: center;
	text-shadow: 0 4px 40px rgba(0, 0, 0, 0.55);
	user-select: none;
	/* subtle optical refinement */
	font-feature-settings: "ss01", "ss02";
}

/* ---------- Shared liquid-bevel glass ---------- */
/* This is the Figma box-shadow spec:
   -21.48px -21.48px 10.74px -21.48px #B3B3B3 inset,
    21.48px  21.48px 10.74px -21.48px #B3B3B3 inset
   Applied to every pill in hero2 for the consistent "inset bevel" language. */
.hero2-tabs,
.hero2-input .hero2-input-row,
.hero2-source,
.hero2-cta {
	position: relative;
	background: rgba(0, 0, 0, 0.28);
	border-radius: 9999px;
	box-shadow:
		-21.48px -21.48px 10.74px -21.48px rgba(179, 179, 179, 0.72) inset,
		 21.48px  21.48px 10.74px -21.48px rgba(179, 179, 179, 0.72) inset,
		 0 10px 40px rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	color: #fff;
	transition: transform 180ms ease, box-shadow 220ms ease, background 220ms ease;
}

/* ---------- Tabs pill (Ссылка / Файл) ---------- */
.hero2-tabs {
	display: flex; align-items: stretch;
	width: min(615px, 88vw);
	height: 72px;
	padding: 6px;
	gap: 6px;
}
.hero2-tab {
	flex: 1 1 0;
	display: inline-flex; align-items: center; justify-content: center;
	gap: 12px;
	height: 100%;
	padding: 0 18px;
	background: rgba(6, 6, 8, 0.55);
	border: 0;
	border-radius: 9999px;
	color: rgba(255, 255, 255, 0.64);
	font-family: 'Unbounded', 'Sora', system-ui, sans-serif;
	font-weight: 400;
	font-size: clamp(15px, 3.4vw, 19px);
	letter-spacing: 0.06em;
	cursor: pointer;
	box-shadow:
		-14px -14px 8px -14px rgba(179, 179, 179, 0.55) inset,
		 14px  14px 8px -14px rgba(179, 179, 179, 0.55) inset;
	transition: color 180ms ease, background 220ms ease, box-shadow 220ms ease, transform 180ms ease;
}
.hero2-tab:hover { color: rgba(255, 255, 255, 0.85); }
.hero2-tab.active {
	color: #fff;
	background: rgba(20, 20, 22, 0.72);
	box-shadow:
		-14px -14px 8px -14px rgba(255, 255, 255, 0.95) inset,
		 14px  14px 8px -14px rgba(255, 255, 255, 0.60) inset,
		 0 6px 20px rgba(0, 0, 0, 0.35);
}
.hero2-tab-icon {
	font-size: 0.78em;
	opacity: 0.85;
}

/* ---------- Input pill ---------- */
.hero2-input {
	width: min(651px, 90vw);
	position: relative;
}
.hero2-input .input-mode { display: none; }
.hero2-input .input-mode.active { display: block; }

.hero2-input .hero2-input-row {
	display: flex; align-items: center;
	gap: 14px;
	height: 86px;
	padding: 0 28px;
	border-radius: 9999px;
}
.hero2-input-icon {
	font-size: 20px;
	color: rgba(255, 255, 255, 0.72);
	flex-shrink: 0;
}
.hero2-input-field,
.hero2-input-placeholder,
.hero2-input-filename {
	flex: 1 1 auto;
	min-width: 0;
	background: transparent;
	border: 0; outline: 0;
	color: #fff;
	font-family: 'Unbounded', 'Sora', system-ui, sans-serif;
	font-weight: 300;
	font-size: clamp(15px, 3.6vw, 20px);
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-align: center;
}
.hero2-input-field::placeholder { color: rgba(255, 255, 255, 0.60); }
.hero2-input-field:focus { outline: 0; }
.hero2-input-row--file { cursor: pointer; }
.hero2-input-placeholder { color: rgba(255, 255, 255, 0.60); }
.hero2-input-filename {
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;
}
.hero2-input-remove {
	flex-shrink: 0;
	width: 38px; height: 38px; border-radius: 9999px;
	display: inline-grid; place-items: center;
	background: rgba(255, 255, 255, 0.06);
	border: 0; color: #fff;
	cursor: pointer;
	transition: background 160ms ease;
}
.hero2-input-remove:hover { background: rgba(255, 255, 255, 0.14); }

/* ---------- Source dots (YouTube / Twitch / VK) ---------- */
.hero2-sources {
	display: flex; align-items: center; gap: 14px;
}
.hero2-source {
	display: inline-grid; place-items: center;
	width: 92px; height: 40px;
	border-radius: 9999px;
	color: rgba(255, 255, 255, 0.78);
	font-size: 18px;
	text-decoration: none;
	cursor: pointer;
}
.hero2-source i { line-height: 1; }

/* ---------- Primary CTA "Продолжить" ---------- */
.hero2-cta {
	width: min(679px, 92vw);
	height: 84px;
	padding: 0 36px;
	display: inline-flex; align-items: center; justify-content: center;
	gap: 18px;
	font-family: 'Unbounded', 'Sora', system-ui, sans-serif;
	font-weight: 400;
	font-size: clamp(18px, 4.6vw, 26px);
	letter-spacing: 0.08em;
	color: #fff;
	text-transform: uppercase;
	border: 0;
	cursor: pointer;
	margin-top: clamp(8px, 2vh, 20px);
}
.hero2-cta-arrow {
	font-size: 0.66em;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 200ms ease, transform 200ms ease;
}
.hero2-cta:not(:disabled):hover { transform: translateY(-1px); }
.hero2-cta:not(:disabled):hover .hero2-cta-arrow { opacity: 0.9; transform: translateX(0); }
.hero2-cta:disabled { opacity: 0.55; cursor: not-allowed; }
.hero2-cta:not(:disabled) {
	background: rgba(255, 255, 255, 0.04);
}

/* ---------- Compact phones ---------- */
@media (max-width: 520px) {
	.hero2 { gap: 18px; padding: 96px 16px 44px; }
	.hero2-tabs { height: 60px; }
	.hero2-input .hero2-input-row { height: 72px; padding: 0 22px; }
	.hero2-source { width: 72px; height: 34px; font-size: 16px; }
	.hero2-cta { height: 70px; padding: 0 28px; }
}

@media (max-width: 380px) {
	.hero2-wordmark { font-size: clamp(56px, 18vw, 86px); }
	.hero2-tab { font-size: 16px; gap: 8px; }
	.hero2-input-field,
	.hero2-input-placeholder,
	.hero2-input-filename { font-size: 16px; }
	.hero2-cta { font-size: 20px; }
}

/* iOS blur cost */
@supports (-webkit-touch-callout: none) {
	.hero2-tabs,
	.hero2-input .hero2-input-row,
	.hero2-source,
	.hero2-cta { backdrop-filter: blur(10px) saturate(140%); }
}


/* ═══════════════════════════════════════════════════════════════════
   SONYA v2 — app-wide inset-bevel reskin
   Applies ONLY inside `.app-container.v2` (Page 1 keeps its own look).
   Covers: Page 2 (type), Page 3 (Lite Editor), Page 4 (processing),
   Page 5 (result) and all modals. Preserves every id used by app.js.
═══════════════════════════════════════════════════════════════════ */
.app-container.v2 {
	--v2-bevel:        inset -21.48px -21.48px 10.74px -21.48px rgba(179,179,179,.55),
	                   inset  21.48px  21.48px 10.74px -21.48px rgba(179,179,179,.55);
	--v2-bevel-soft:   inset -14px    -14px     8px    -14px    rgba(179,179,179,.32),
	                   inset  14px     14px     8px    -14px    rgba(179,179,179,.32);
	--v2-bevel-strong: inset -21.48px -21.48px 10.74px -21.48px rgba(255,255,255,.85),
	                   inset  21.48px  21.48px 10.74px -21.48px rgba(255,255,255,.85);
	--v2-surface:      rgba(6, 6, 8, .58);
	--v2-surface-soft: rgba(12, 12, 16, .42);
	--v2-surface-solid:#060608;
	--v2-text:         #fff;
	--v2-text-dim:     rgba(255,255,255,.62);
	--v2-text-mute:    rgba(255,255,255,.42);
	--v2-radius-pill:  293.33px;
	--v2-radius-panel: 32px;
	--v2-radius-card:  22px;
	--v2-font-head:    'Unbounded', 'Sora', system-ui, sans-serif;
}

/* Global cinematic video backdrop — shared across every page */
.cinema-stage.cinema-stage--global {
	position: fixed !important;
	inset: 0 !important;
	z-index: 0 !important;
	overflow: hidden;
	pointer-events: none;
	background: #050507;
}
.cinema-stage.cinema-stage--global .cinema-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(.9) contrast(1.02) brightness(.95) !important;
	transform: none !important;
	animation: none !important;
	opacity: 1 !important;
	background: #050507;
}
.cinema-stage.cinema-stage--global .cinema-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.cinema-stage.cinema-stage--global .cinema-overlay--tint {
	background: linear-gradient(180deg, rgba(6, 6, 8, .05) 0%, rgba(6, 6, 8, .18) 100%) !important;
}
.cinema-stage.cinema-stage--global .cinema-overlay--gradient {
	background: radial-gradient(ellipse at 50% 40%, transparent 0%, rgba(6, 6, 8, .2) 100%) !important;
}
.cinema-stage.cinema-stage--global .cinema-overlay--vignette {
	background: radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(0, 0, 0, .35) 100%) !important;
}
.cinema-stage.cinema-stage--global .cinema-overlay--grain {
	background-image: none !important;
	opacity: 0 !important;
}

/* Pages above the global video — transparent so video is visible everywhere */
.app-container.v2,
.app-container.v2 .page { background: transparent !important; }
.app-container.v2 #page-source { background: transparent; }

/* Hide old ambient layer (was dune/beige gradients) — video backdrop replaces it */
.ambient-bg { display: none !important; }

/* Base body fallback behind the video */
html, body { background: #050507; }

/* ────────── Top chrome: keep ONLY the theme toggle ────────── */
.app-container.v2 ~ .floating-controls--left,
.floating-controls--left:has(~ .app-container.v2),
body > .floating-controls--left {
	/* applied globally — this app has only one top-chrome setup */
}
.floating-controls--left { display: none !important; }
.floating-controls--right .burger-btn,
.floating-controls--right #menu-toggle { display: none !important; }

/* Theme toggle — refined glass pill */
.floating-controls--right { gap: 14px; }
.floating-controls--right .theme-toggle {
	width: 44px; height: 44px;
	background: rgba(8, 8, 10, .55) !important;
	border: none !important;
	border-radius: 999px !important;
	color: #fff !important;
	box-shadow:
		inset -14px -14px 8px -14px rgba(179,179,179,.32),
		inset  14px  14px 8px -14px rgba(179,179,179,.32) !important;
	backdrop-filter: blur(18px) saturate(130%);
	-webkit-backdrop-filter: blur(18px) saturate(130%);
	font-size: 15px;
}
.floating-controls--right .theme-toggle:hover {
	background: rgba(18, 18, 22, .7) !important;
	box-shadow:
		inset -21.48px -21.48px 10.74px -21.48px rgba(179,179,179,.55),
		inset  21.48px  21.48px 10.74px -21.48px rgba(179,179,179,.55) !important;
}

/* Per-page header: strip step-indicator, keep only the back button (floating) */
.app-container.v2 .step-indicator { display: none !important; }
.app-container.v2 .page-header.compact {
	padding: 0;
	margin: 0;
	min-height: 0;
}
.app-container.v2 .page:not(#page-source) .page-header.compact {
	position: absolute;
	top: 18px;
	left: 18px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 0;
	width: auto;
	pointer-events: none;
}
.app-container.v2 .page:not(#page-source) .page-header.compact > * { pointer-events: auto; }
.app-container.v2 .page:not(#page-source) { position: relative; padding-top: 78px; }

/* Lite-editor tag would collide with top-right theme toggle — hide in v2 */
.app-container.v2 .editor-header-meta { display: none; }

/* ───── shared: headers / step-indicator / section titles / footer ───── */
.app-container.v2 .page-header.compact {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 4px 8px;
}
.app-container.v2 .btn-back {
	width: 46px; height: 46px;
	display: inline-flex;
	align-items: center; justify-content: center;
	background: var(--v2-surface);
	border: none;
	border-radius: 999px;
	color: var(--v2-text);
	box-shadow: var(--v2-bevel-soft);
	backdrop-filter: blur(18px) saturate(130%);
	-webkit-backdrop-filter: blur(18px) saturate(130%);
	transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
	cursor: pointer;
	font-size: 15px;
}
.app-container.v2 .btn-back:hover  { background: rgba(18,18,22,.7); box-shadow: var(--v2-bevel); }
.app-container.v2 .btn-back:active { transform: scale(.96); }

.app-container.v2 .step-indicator {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	padding: 10px 20px;
	background: var(--v2-surface);
	border-radius: 999px;
	box-shadow: var(--v2-bevel-soft);
	backdrop-filter: blur(18px) saturate(130%);
	-webkit-backdrop-filter: blur(18px) saturate(130%);
	font-family: var(--v2-font-head);
	letter-spacing: .08em;
}
.app-container.v2 .step-indicator-num {
	color: var(--v2-text);
	font-weight: 400;
	font-size: 15px;
	opacity: .9;
}
.app-container.v2 .step-indicator-text {
	color: var(--v2-text-dim);
	font-weight: 300;
	font-size: 13px;
	text-transform: uppercase;
}

.app-container.v2 .section-head { margin-bottom: 22px; text-align: center; }
.app-container.v2 .section-title {
	font-family: var(--v2-font-head);
	font-weight: 300;
	font-size: clamp(26px, 5.8vw, 38px);
	letter-spacing: .06em;
	color: var(--v2-text);
	margin: 0 0 6px;
}
.app-container.v2 .section-subtitle {
	font-family: var(--v2-font-head);
	font-weight: 300;
	font-size: clamp(13px, 3.2vw, 15px);
	letter-spacing: .04em;
	color: var(--v2-text-dim);
	margin: 0;
}

.app-container.v2 .page-footer { margin-top: 20px; padding-top: 14px; }

/* primary / secondary pills */
.app-container.v2 .btn-primary {
	position: relative;
	width: 100%;
	display: inline-flex;
	align-items: center; justify-content: center;
	gap: 14px;
	padding: 22px 28px;
	background: var(--v2-surface);
	border: none;
	border-radius: var(--v2-radius-pill);
	color: var(--v2-text);
	box-shadow: var(--v2-bevel);
	backdrop-filter: blur(20px) saturate(140%);
	-webkit-backdrop-filter: blur(20px) saturate(140%);
	font-family: var(--v2-font-head);
	font-weight: 400;
	font-size: clamp(17px, 4.2vw, 22px);
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
	overflow: hidden;
	transition: box-shadow .25s ease, transform .2s ease, background .25s ease, opacity .2s ease;
}
.app-container.v2 .btn-primary:not(:disabled):hover  { background: rgba(22,22,28,.68); box-shadow: var(--v2-bevel-strong); }
.app-container.v2 .btn-primary:not(:disabled):active { transform: scale(.985); }
.app-container.v2 .btn-primary:disabled             { opacity: .35; cursor: not-allowed; }
.app-container.v2 .btn-primary .btn-icon,
.app-container.v2 .btn-primary .btn-arrow { display: inline-flex; font-size: .78em; opacity: .85; }
.app-container.v2 .btn-primary .btn-label { line-height: 1; }

.app-container.v2 .btn-secondary {
	display: inline-flex;
	align-items: center; justify-content: center;
	gap: 10px;
	padding: 16px 26px;
	background: var(--v2-surface-soft);
	border: none;
	border-radius: 999px;
	color: var(--v2-text);
	box-shadow: var(--v2-bevel-soft);
	backdrop-filter: blur(18px) saturate(130%);
	-webkit-backdrop-filter: blur(18px) saturate(130%);
	font-family: var(--v2-font-head);
	font-weight: 300;
	font-size: 15px;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
}
.app-container.v2 .btn-secondary:hover  { background: rgba(18,18,22,.62); box-shadow: var(--v2-bevel); }
.app-container.v2 .btn-secondary:active { transform: scale(.98); }

/* ═══════════════════════════════════════════════════════════════════
   PAGE 2 — Режим монтажа (type)
═══════════════════════════════════════════════════════════════════ */
.app-container.v2 #page-type .trailer-option { margin-bottom: 18px; }
.app-container.v2 .btn-trailer {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 26px 28px;
	background: var(--v2-surface);
	border: none;
	border-radius: var(--v2-radius-panel);
	color: var(--v2-text);
	box-shadow: var(--v2-bevel);
	backdrop-filter: blur(22px) saturate(140%);
	-webkit-backdrop-filter: blur(22px) saturate(140%);
	cursor: pointer;
	text-align: left;
	overflow: hidden;
	transition: box-shadow .25s ease, transform .2s ease, background .25s ease;
}
.app-container.v2 .btn-trailer:hover  { background: rgba(22,22,28,.7); box-shadow: var(--v2-bevel-strong); }
.app-container.v2 .btn-trailer:active { transform: scale(.99); }
.app-container.v2 .btn-trailer-glow {
	position: absolute; inset: 0;
	top: auto; right: auto;
	width: 100%; height: 100%;
	border-radius: 0;
	background: radial-gradient(600px 200px at 0% 0%, rgba(255, 255, 255, .08), transparent 60%) !important;
	filter: none !important;
	animation: none !important;
	pointer-events: none;
}

/* Kill base beige on selected trailer + hover */
.app-container.v2 .btn-trailer,
.app-container.v2 .btn-trailer.selected {
	border: none !important;
	background: var(--v2-surface) !important;
}
.app-container.v2 .btn-trailer.selected {
	box-shadow: var(--v2-bevel-strong) !important;
	background: rgba(26, 26, 32, .72) !important;
}
.app-container.v2 .btn-trailer.selected .trailer-arrow {
	background: rgba(255,255,255,.18) !important;
	color: #fff !important;
	border: none !important;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.35) !important;
}
.app-container.v2 .trailer-icon {
	border: none !important;
	color: #fff !important;
}
.app-container.v2 .trailer-arrow {
	border: none !important;
	color: #fff !important;
	background: rgba(255,255,255,.08) !important;
}
.app-container.v2 .btn-trailer-main { display: flex; align-items: center; gap: 18px; flex: 1; min-width: 0; }
.app-container.v2 .trailer-icon {
	flex: none;
	width: 58px; height: 58px;
	display: inline-flex;
	align-items: center; justify-content: center;
	background: rgba(6,6,8,.7);
	border-radius: 999px;
	box-shadow: var(--v2-bevel-soft);
	color: var(--v2-text);
	font-size: 22px;
}
.app-container.v2 .trailer-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.app-container.v2 .trailer-eyebrow {
	font-family: var(--v2-font-head);
	font-weight: 300;
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
}
.app-container.v2 .trailer-title {
	font-family: var(--v2-font-head);
	font-weight: 400;
	font-size: 20px;
	letter-spacing: .05em;
	color: var(--v2-text);
}
.app-container.v2 .trailer-desc {
	font-family: var(--v2-font-head);
	font-weight: 300;
	font-size: 13px;
	letter-spacing: .03em;
	color: var(--v2-text-dim);
}
.app-container.v2 .trailer-arrow {
	flex: none;
	width: 42px; height: 42px;
	display: inline-flex;
	align-items: center; justify-content: center;
	background: rgba(255,255,255,.06);
	border-radius: 999px;
	color: var(--v2-text);
	font-size: 13px;
}

.app-container.v2 .type-divider {
	position: relative;
	text-align: center;
	margin: 18px 0 14px;
}
.app-container.v2 .type-divider::before {
	content: "";
	position: absolute; left: 0; right: 0; top: 50%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
}
.app-container.v2 .type-divider span {
	position: relative;
	padding: 4px 14px;
	background: transparent;
	font-family: var(--v2-font-head);
	font-weight: 300;
	font-size: 11px;
	letter-spacing: .32em;
	text-transform: uppercase;
	color: var(--v2-text-mute);
}

.app-container.v2 .type-options {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}
.app-container.v2 .type-card {
	position: relative;
	display: block;
	cursor: pointer;
	border-radius: var(--v2-radius-card);
	background: rgba(100, 100, 105, 0.28);
	box-shadow: var(--v2-bevel);
	backdrop-filter: blur(22px) saturate(100%);
	-webkit-backdrop-filter: blur(22px) saturate(100%);
	transition: box-shadow .2s ease, background .2s ease, transform .2s ease;
}
.app-container.v2 .type-card:hover { background: rgba(110, 110, 115, 0.38); box-shadow: var(--v2-bevel-strong); }
.app-container.v2 .type-card input { position: absolute; opacity: 0; pointer-events: none; }
.app-container.v2 .type-card-inner {
	display: flex; flex-direction: column; gap: 12px;
	padding: 18px 18px 16px;
}
.app-container.v2 .type-card-top {
	display: flex; justify-content: space-between; align-items: center;
}
.app-container.v2 .type-icon {
	width: 40px; height: 40px;
	display: inline-flex;
	align-items: center; justify-content: center;
	background: rgba(6,6,8,.7);
	border-radius: 999px;
	box-shadow: var(--v2-bevel-soft);
	color: var(--v2-text);
	font-size: 16px;
}
.app-container.v2 .type-check {
	width: 24px; height: 24px;
	display: inline-flex;
	align-items: center; justify-content: center;
	border-radius: 999px;
	background: rgba(255,255,255,.04);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
	color: transparent;
	font-size: 11px;
	transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
/* Kill base beige bg/border on type-card-inner (both idle, hover, checked) */
.app-container.v2 .type-card-inner {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	transform: none !important;
}
.app-container.v2 .type-card input:checked ~ .type-card-inner {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}
.app-container.v2 .type-card input:checked ~ .type-card-inner .type-icon {
	background: rgba(255,255,255,.1) !important;
	border: none !important;
	color: #fff !important;
}
.app-container.v2 .type-card input:checked ~ .type-card-inner .type-check {
	background: rgba(255,255,255,.15) !important;
	color: #fff !important;
	border: none !important;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.25) !important;
	opacity: 1 !important;
}
.app-container.v2 .type-icon {
	border: none !important;
}
.app-container.v2 .type-check {
	border: none !important;
}
.app-container.v2 .type-card:has(input:checked) {
	box-shadow: var(--v2-bevel-strong);
	background: rgba(26, 26, 32, .72);
}
.app-container.v2 .type-info { display: flex; flex-direction: column; gap: 4px; }
.app-container.v2 .type-name {
	font-family: var(--v2-font-head);
	font-weight: 400;
	font-size: 16px;
	letter-spacing: .05em;
	color: var(--v2-text);
}
.app-container.v2 .type-desc {
	font-family: var(--v2-font-head);
	font-weight: 300;
	font-size: 12px;
	letter-spacing: .02em;
	color: var(--v2-text-dim);
	line-height: 1.35;
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE 3 — SONYA Editor Lite
═══════════════════════════════════════════════════════════════════ */
.app-container.v2 .page--editor .page-content.editor-lite {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.app-container.v2 .editor-header { justify-content: flex-start; }
.app-container.v2 .editor-header-meta { margin-left: auto; }
.app-container.v2 .editor-header-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: var(--v2-surface);
	border-radius: 999px;
	box-shadow: var(--v2-bevel-soft);
	color: var(--v2-text-dim);
	font-family: var(--v2-font-head);
	font-weight: 300;
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.app-container.v2 .editor-header-tag i { font-size: 10px; color: rgba(255, 255, 255, .75); }

/* Preview stage */
.app-container.v2 .editor-stage {
	position: relative;
	width: 100%;
	border-radius: var(--v2-radius-panel);
	background: var(--v2-surface);
	box-shadow: var(--v2-bevel);
	padding: 10px;
	backdrop-filter: blur(22px) saturate(140%);
	-webkit-backdrop-filter: blur(22px) saturate(140%);
}
.app-container.v2 .editor-stage-inner {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: calc(var(--v2-radius-panel) - 10px);
	overflow: hidden;
	background: #000;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.app-container.v2 .editor-stage-video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	background: linear-gradient(135deg, #111114 0%, #0a0a0d 100%);
}
.app-container.v2 .editor-stage-grid {
	position: absolute; inset: 0;
	background:
		linear-gradient(0deg, transparent calc(33.33% - 1px), rgba(255,255,255,.04) calc(33.33% - 1px), rgba(255,255,255,.04) 33.33%, transparent 33.33%),
		linear-gradient(0deg, transparent calc(66.66% - 1px), rgba(255,255,255,.04) calc(66.66% - 1px), rgba(255,255,255,.04) 66.66%, transparent 66.66%),
		linear-gradient(90deg, transparent calc(33.33% - 1px), rgba(255,255,255,.04) calc(33.33% - 1px), rgba(255,255,255,.04) 33.33%, transparent 33.33%),
		linear-gradient(90deg, transparent calc(66.66% - 1px), rgba(255,255,255,.04) calc(66.66% - 1px), rgba(255,255,255,.04) 66.66%, transparent 66.66%);
	pointer-events: none;
}
.app-container.v2 .editor-stage-play {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 64px; height: 64px;
	display: inline-flex;
	align-items: center; justify-content: center;
	background: rgba(8,8,10,.55);
	border: none;
	border-radius: 999px;
	color: var(--v2-text);
	box-shadow: var(--v2-bevel);
	backdrop-filter: blur(16px) saturate(130%);
	-webkit-backdrop-filter: blur(16px) saturate(130%);
	cursor: pointer;
	font-size: 20px;
	padding-left: 4px;
	transition: transform .2s ease, box-shadow .2s ease;
}
.app-container.v2 .editor-stage-play:hover  { box-shadow: var(--v2-bevel-strong); }
.app-container.v2 .editor-stage-play:active { transform: translate(-50%, -50%) scale(.95); }
.app-container.v2 .editor-stage-tag,
.app-container.v2 .editor-stage-time {
	position: absolute;
	bottom: 14px;
	padding: 6px 12px;
	background: rgba(6,6,8,.6);
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
	color: var(--v2-text);
	font-family: var(--v2-font-head);
	font-weight: 300;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}
.app-container.v2 .editor-stage-tag  { left: 14px; display: inline-flex; align-items: center; gap: 6px; }
.app-container.v2 .editor-stage-tag i { font-size: 7px; color: rgba(255, 255, 255, .85); }
.app-container.v2 .editor-stage-time { right: 14px; }

/* Toolbar */
.app-container.v2 .editor-toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: var(--v2-surface);
	border-radius: 999px;
	box-shadow: var(--v2-bevel-soft);
	backdrop-filter: blur(18px) saturate(130%);
	-webkit-backdrop-filter: blur(18px) saturate(130%);
	flex-wrap: wrap;
}
.app-container.v2 .editor-toolbar-group { display: inline-flex; gap: 6px; }
.app-container.v2 .editor-toolbar-group--tools::before {
	content: "";
	display: inline-block;
	width: 1px;
	background: rgba(255,255,255,.08);
	margin: 6px 4px;
}
.app-container.v2 .editor-tool {
	width: 40px; height: 40px;
	display: inline-flex;
	align-items: center; justify-content: center;
	background: rgba(255,255,255,.04);
	border: none;
	border-radius: 999px;
	color: var(--v2-text);
	cursor: pointer;
	font-size: 13px;
	transition: background .2s ease, transform .2s ease, box-shadow .2s ease, color .2s ease;
}
.app-container.v2 .editor-tool:hover  { background: rgba(255,255,255,.1); box-shadow: var(--v2-bevel-soft); }
.app-container.v2 .editor-tool:active { transform: scale(.95); }
.app-container.v2 .editor-tool--primary {
	background: #fff;
	color: #0b0b0e;
}
.app-container.v2 .editor-tool--primary:hover { background: #f3f3f6; }

.app-container.v2 .editor-aspect {
	margin-left: auto;
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	background: rgba(6,6,8,.55);
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.app-container.v2 .editor-aspect-btn {
	padding: 8px 14px;
	background: transparent;
	border: none;
	border-radius: 999px;
	color: var(--v2-text-dim);
	font-family: var(--v2-font-head);
	font-weight: 300;
	font-size: 12px;
	letter-spacing: .08em;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.app-container.v2 .editor-aspect-btn:hover       { color: var(--v2-text); }
.app-container.v2 .editor-aspect-btn.is-active   { background: #fff; color: #0b0b0e; box-shadow: var(--v2-bevel-soft); }

/* Timeline */
.app-container.v2 .editor-timeline {
	padding: 14px 16px 12px;
	background: var(--v2-surface);
	border-radius: var(--v2-radius-card);
	box-shadow: var(--v2-bevel-soft);
	backdrop-filter: blur(18px) saturate(130%);
	-webkit-backdrop-filter: blur(18px) saturate(130%);
}
.app-container.v2 .editor-timeline-ruler {
	display: flex;
	justify-content: space-between;
	font-family: var(--v2-font-head);
	font-weight: 300;
	font-size: 10px;
	letter-spacing: .16em;
	color: var(--v2-text-mute);
	margin-bottom: 8px;
}
.app-container.v2 .editor-timeline-track {
	position: relative;
	height: 44px;
	border-radius: 14px;
	background:
		repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 10%),
		linear-gradient(180deg, rgba(18,18,22,.8), rgba(8,8,10,.8));
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
	overflow: visible;
}
.app-container.v2 .editor-track-range {
	position: absolute;
	top: 4px; bottom: 4px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08));
	border-radius: 10px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32);
}
.app-container.v2 .editor-track-playhead {
	position: absolute;
	top: -6px; bottom: -6px;
	width: 2px;
	background: #fff;
	border-radius: 2px;
	box-shadow: 0 0 12px rgba(255,255,255,.6);
}
.app-container.v2 .editor-track-playhead::before {
	content: "";
	position: absolute;
	top: -4px; left: 50%;
	transform: translateX(-50%);
	width: 10px; height: 10px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 0 12px rgba(255,255,255,.7);
}
.app-container.v2 .editor-track-handle {
	position: absolute;
	top: -4px; bottom: -4px;
	width: 14px;
	display: flex; align-items: center; justify-content: center;
	cursor: ew-resize;
}
.app-container.v2 .editor-track-handle--in  { transform: translateX(-50%); }
.app-container.v2 .editor-track-handle--out { transform: translateX(50%); }
.app-container.v2 .editor-track-handle span {
	display: block;
	width: 6px; height: 100%;
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 0 10px rgba(255,255,255,.4);
}
.app-container.v2 .editor-timeline-clips {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	margin-top: 10px;
}
.app-container.v2 .editor-clip {
	position: relative;
	height: 28px;
	border-radius: 8px;
	background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
	display: flex;
	align-items: center;
	padding: 0 10px;
	overflow: hidden;
}
.app-container.v2 .editor-clip span {
	font-family: var(--v2-font-head);
	font-weight: 300;
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--v2-text-dim);
}
.app-container.v2 .editor-clip--a { background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(40,40,44,.25)); }
.app-container.v2 .editor-clip--b { background: linear-gradient(135deg, rgba(220,220,228,.22), rgba(46,46,52,.25)); }
.app-container.v2 .editor-clip--c { background: linear-gradient(135deg, rgba(200,200,210,.18), rgba(36,36,42,.25)); }
.app-container.v2 .editor-clip--d { background: linear-gradient(135deg, rgba(170,170,180,.16), rgba(26,26,30,.3)); }

/* Output control bar (chips) */
.app-container.v2 .editor-bar {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 4px;
}
.app-container.v2 .editor-chip {
	background: var(--v2-surface);
	border-radius: var(--v2-radius-card);
	box-shadow: var(--v2-bevel-soft);
	backdrop-filter: blur(18px) saturate(130%);
	-webkit-backdrop-filter: blur(18px) saturate(130%);
	overflow: hidden;
	transition: box-shadow .2s ease;
}
.app-container.v2 .editor-chip:hover { box-shadow: var(--v2-bevel); }
.app-container.v2 .editor-chip-head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
}
.app-container.v2 .editor-chip-icon {
	flex: none;
	width: 40px; height: 40px;
	display: inline-flex;
	align-items: center; justify-content: center;
	background: rgba(6,6,8,.7);
	border-radius: 999px;
	box-shadow: var(--v2-bevel-soft);
	color: var(--v2-text);
	font-size: 15px;
}
.app-container.v2 .editor-chip-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.app-container.v2 .editor-chip-label {
	font-family: var(--v2-font-head);
	font-weight: 400;
	font-size: 15px;
	letter-spacing: .05em;
	color: var(--v2-text);
}
.app-container.v2 .editor-chip-hint {
	font-family: var(--v2-font-head);
	font-weight: 300;
	font-size: 11px;
	letter-spacing: .06em;
	color: var(--v2-text-mute);
}
.app-container.v2 .editor-chip-extra {
	padding: 0 18px 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.app-container.v2 .editor-chip-extra.hidden { display: none; }

/* toggle override */
.app-container.v2 .toggle-switch { position: relative; width: 46px; height: 26px; flex: none; cursor: pointer; }
.app-container.v2 .toggle-switch input { position: absolute; opacity: 0; pointer-events: none; }
.app-container.v2 .toggle-slider {
	position: absolute; inset: 0;
	background: rgba(6,6,8,.7);
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
	transition: background .2s ease, box-shadow .2s ease;
}
.app-container.v2 .toggle-slider::before {
	content: "";
	position: absolute;
	top: 3px; left: 3px;
	width: 20px; height: 20px;
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 1px 4px rgba(0,0,0,.4);
	transition: transform .22s cubic-bezier(.5,0,.2,1);
}
.app-container.v2 .toggle-switch input:checked ~ .toggle-slider {
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.95);
}
.app-container.v2 .toggle-switch input:checked ~ .toggle-slider::before {
	transform: translateX(20px);
	background: #0b0b0e;
	box-shadow: 0 1px 4px rgba(0,0,0,.3);
}

/* style / language cards (reskinned compact) */
.app-container.v2 .subtitle-styles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}
.app-container.v2 .style-card {
	position: relative;
	display: block;
	cursor: pointer;
	border-radius: 14px;
	background: rgba(6,6,8,.6);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
	overflow: hidden;
	transition: box-shadow .2s ease, background .2s ease;
}
.app-container.v2 .style-card:hover { background: rgba(14,14,18,.72); }
.app-container.v2 .style-card input { position: absolute; opacity: 0; pointer-events: none; }
.app-container.v2 .style-card-inner {
	display: flex; flex-direction: column; gap: 6px;
	padding: 10px 10px 12px;
	position: relative;
}
.app-container.v2 .style-preview {
	height: 48px;
	border-radius: 10px;
	display: flex;
	align-items: center; justify-content: center;
	background: linear-gradient(135deg, #101014, #060608);
	font-family: var(--v2-font-head);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: .06em;
	color: var(--v2-text);
	gap: 4px;
	padding: 0 6px;
	text-align: center;
}
.app-container.v2 .style-preview--viral .style-preview-word--hot { color: #fff; font-weight: 500; }
.app-container.v2 .style-preview--minimal { font-weight: 300; letter-spacing: .14em; color: var(--v2-text-dim); }
.app-container.v2 .style-preview--classic { font-weight: 300; color: #fff; }
.app-container.v2 .style-info { display: flex; flex-direction: column; gap: 1px; }
.app-container.v2 .style-name {
	font-family: var(--v2-font-head);
	font-weight: 400;
	font-size: 12px;
	letter-spacing: .06em;
	color: var(--v2-text);
}
.app-container.v2 .style-desc {
	font-family: var(--v2-font-head);
	font-weight: 300;
	font-size: 10px;
	letter-spacing: .02em;
	color: var(--v2-text-mute);
}
.app-container.v2 .style-check {
	position: absolute;
	top: 8px; right: 8px;
	width: 20px; height: 20px;
	display: inline-flex;
	align-items: center; justify-content: center;
	border-radius: 999px;
	background: rgba(255,255,255,.04);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
	color: transparent;
	font-size: 9px;
	transition: background .2s ease, color .2s ease;
}
.app-container.v2 .style-card:has(input:checked) {
	background: rgba(22,22,26,.8);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.app-container.v2 .style-card:has(input:checked) .style-check {
	background: #fff; color: #0b0b0e; box-shadow: inset 0 0 0 1px #fff;
}

.app-container.v2 .select-wrap {
	position: relative;
	display: flex;
	align-items: center;
	background: rgba(6,6,8,.65);
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
	padding: 0 14px;
	height: 46px;
}
.app-container.v2 .select-wrap-icon { color: var(--v2-text-dim); font-size: 13px; margin-right: 10px; }
.app-container.v2 .select-wrap-chevron { color: var(--v2-text-dim); font-size: 11px; pointer-events: none; }
.app-container.v2 .select-field {
	flex: 1;
	background: transparent;
	border: none;
	outline: none;
	color: var(--v2-text);
	font-family: var(--v2-font-head);
	font-weight: 300;
	font-size: 14px;
	letter-spacing: .04em;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}
.app-container.v2 .select-field option { background: #0b0b0e; color: #fff; }

.app-container.v2 .editor-chip--lang .editor-chip-head--static { padding-bottom: 6px; }
.app-container.v2 .editor-chip--lang .language-options {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	padding: 0 18px 16px;
}
.app-container.v2 .language-card {
	position: relative;
	display: block;
	cursor: pointer;
	border-radius: 999px;
	background: rgba(6,6,8,.6);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
	transition: box-shadow .2s ease, background .2s ease;
}
.app-container.v2 .language-card:hover { background: rgba(14,14,18,.72); }
.app-container.v2 .language-card input { position: absolute; opacity: 0; pointer-events: none; }
.app-container.v2 .language-inner {
	display: flex;
	align-items: center; justify-content: center;
	gap: 8px;
	padding: 12px 10px;
}
.app-container.v2 .lang-flag {
	font-family: var(--v2-font-head);
	font-weight: 400;
	font-size: 14px;
	letter-spacing: .08em;
	color: var(--v2-text);
}
.app-container.v2 .lang-name {
	font-family: var(--v2-font-head);
	font-weight: 300;
	font-size: 12px;
	letter-spacing: .06em;
	color: var(--v2-text-dim);
}
.app-container.v2 .language-card:has(input:checked) {
	background: #fff;
	box-shadow: inset 0 0 0 1px #fff;
}
.app-container.v2 .language-card:has(input:checked) .lang-flag,
.app-container.v2 .language-card:has(input:checked) .lang-name {
	color: #0b0b0e;
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE 4 — Processing
═══════════════════════════════════════════════════════════════════ */
.app-container.v2 #page-processing .sonya-sphere-wrap { display: none !important; }
.app-container.v2 #page-processing .processing-content {
	min-height: calc(100vh - 180px);
	min-height: calc(100svh - 180px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 32px;
	padding-top: 40px;
}
.app-container.v2 #page-processing .processing-hero {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	max-width: 440px;
	width: 100%;
}
.app-container.v2 .processing-title {
	font-family: var(--v2-font-head);
	font-weight: 300;
	font-size: clamp(26px, 6.5vw, 42px);
	letter-spacing: .1em;
	color: var(--v2-text);
	text-transform: uppercase;
}
.app-container.v2 .processing-status {
	font-family: var(--v2-font-head);
	font-weight: 300;
	font-size: clamp(13px, 3.2vw, 15px);
	letter-spacing: .1em;
	color: var(--v2-text-dim);
	text-transform: uppercase;
}
.app-container.v2 .processing-progress {
	margin-top: 20px;
	height: 10px;
	background: var(--v2-surface);
	border-radius: 999px;
	box-shadow: var(--v2-bevel-soft);
	overflow: hidden;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}
.app-container.v2 .progress-bar {
	height: 100%;
	background: linear-gradient(90deg, rgba(255,255,255,.55) 0%, #ffffff 100%);
	border-radius: 999px;
	box-shadow: 0 0 20px rgba(255, 255, 255, .38);
	transition: width .4s ease;
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE 5 — Result
═══════════════════════════════════════════════════════════════════ */
.app-container.v2 .page-header--result {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 0 0 8px;
	min-height: 0;
	margin-bottom: 4px;
}
.app-container.v2 .result-headline {
	font-family: var(--v2-font-head);
	font-weight: 300;
	font-size: clamp(26px, 6.4vw, 38px);
	letter-spacing: .08em;
	color: var(--v2-text);
	text-transform: uppercase;
	margin: 0;
	line-height: 1;
}
.app-container.v2 .result-sub {
	font-family: var(--v2-font-head);
	font-weight: 300;
	font-size: 12px;
	letter-spacing: .1em;
	color: var(--v2-text-dim);
	text-transform: uppercase;
	margin: 4px 0 0;
}
.app-container.v2 .success-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	background: var(--v2-surface);
	border-radius: 999px;
	box-shadow: var(--v2-bevel-soft);
	color: var(--v2-text);
	font-family: var(--v2-font-head);
	font-weight: 300;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.app-container.v2 .success-pill i { color: #9ce0a0; }

.app-container.v2 .result-content { gap: 14px; }
.app-container.v2 .result-grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	gap: 12px;
}
.app-container.v2 .result-card--hero    { grid-row: auto; padding: 0; background: rgba(8,8,10,.55); }
.app-container.v2 .result-card-thumb {
	background: linear-gradient(135deg, #14141a 0%, #08080a 100%);
}
.app-container.v2 .result-card-thumb-glow {
	position: absolute;
	top: 30%; left: 25%;
	width: 55%; height: 55%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,.22), transparent 65%);
	filter: blur(40px);
}
.app-container.v2 .result-card-play {
	background: rgba(8,8,10,.55);
	color: #fff;
	width: 64px; height: 64px;
	box-shadow:
		inset -21.48px -21.48px 10.74px -21.48px rgba(179,179,179,.55),
		inset  21.48px  21.48px 10.74px -21.48px rgba(179,179,179,.55);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

/* Success pill — neutral whites */
.app-container.v2 .success-pill {
	color: #fff;
	background: rgba(8,8,10,.55);
	border: none;
	box-shadow: var(--v2-bevel-soft);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}
.app-container.v2 .success-pill i { color: rgba(255,255,255,.7); }
.app-container.v2 .result-card {
	position: relative;
	background: var(--v2-surface);
	border-radius: var(--v2-radius-panel);
	box-shadow: var(--v2-bevel-soft);
	backdrop-filter: blur(20px) saturate(140%);
	-webkit-backdrop-filter: blur(20px) saturate(140%);
	overflow: hidden;
	border: none;
	transition: box-shadow .25s ease, background .25s ease;
}
.app-container.v2 .result-card:hover { box-shadow: var(--v2-bevel); background: rgba(14,14,20,.6); }

.app-container.v2 .result-card--hero .result-card-thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, #14141a 0%, #08080a 100%);
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
}
.app-container.v2 .result-card-thumb-glow {
	position: absolute; inset: -20%;
	background: radial-gradient(closest-side, rgba(255,255,255,.18), transparent 70%);
	pointer-events: none;
}
.app-container.v2 .result-card-play {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 58px; height: 58px;
	display: flex;
	align-items: center; justify-content: center;
	background: rgba(8,8,10,.55);
	border-radius: 999px;
	color: #fff;
	font-size: 18px;
	padding-left: 3px;
	box-shadow: var(--v2-bevel);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	z-index: 2;
}
.app-container.v2 .result-card-play:hover {
	transform: translate(-50%, -50%) scale(1.07);
}
.app-container.v2 .result-card-ratio,
.app-container.v2 .result-card-duration {
	position: absolute;
	padding: 6px 12px;
	background: rgba(6,6,8,.65);
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
	color: var(--v2-text);
	font-family: var(--v2-font-head);
	font-weight: 300;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}
.app-container.v2 .result-card-ratio    { top: 12px; left: 12px; }
.app-container.v2 .result-card-duration { top: 12px; right: 12px; }
.app-container.v2 .result-card-body { padding: 16px 18px 18px; }
.app-container.v2 .result-card-title {
	font-family: var(--v2-font-head);
	font-weight: 400;
	font-size: 18px;
	letter-spacing: .06em;
	color: var(--v2-text);
	margin: 0 0 10px;
}
.app-container.v2 .result-card-metrics { display: flex; flex-wrap: wrap; gap: 6px; }
.app-container.v2 .score-badge {
	display: inline-flex;
	align-items: center; gap: 6px;
	padding: 6px 12px;
	background: rgba(6,6,8,.6);
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
	color: var(--v2-text);
	font-family: var(--v2-font-head);
	font-weight: 300;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
}
.app-container.v2 .score-badge i { color: rgba(255,255,255,.85); font-size: 10px; }
.app-container.v2 .score-badge--soft { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.app-container.v2 .score-badge--soft i { color: rgba(255,255,255,.7); }

.app-container.v2 .result-card--clips { padding: 18px; }
.app-container.v2 .result-clips-head {
	display: flex; justify-content: space-between; align-items: center;
	margin-bottom: 12px;
}
.app-container.v2 .result-count-pill {
	display: inline-flex;
	align-items: center; gap: 6px;
	padding: 6px 12px;
	background: rgba(6,6,8,.6);
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
	color: var(--v2-text-dim);
	font-family: var(--v2-font-head);
	font-weight: 300;
	font-size: 11px;
	letter-spacing: .1em;
}
.app-container.v2 .result-clips-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}
.app-container.v2 .mini-clip {
	position: relative;
	aspect-ratio: 9 / 16;
	border-radius: 14px;
	background: linear-gradient(135deg, #15151a, #0a0a0d);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
	display: flex; flex-direction: column;
	align-items: center; justify-content: space-between;
	padding: 10px 8px;
	overflow: hidden;
}
.app-container.v2 .mini-clip::before {
	content: "";
	position: absolute; inset: 0;
	background: radial-gradient(closest-side at 30% 30%, rgba(255,255,255,.12), transparent 60%);
	pointer-events: none;
}
.app-container.v2 .mini-clip span {
	position: relative;
	padding: 3px 8px;
	background: rgba(6,6,8,.7);
	border-radius: 999px;
	font-family: var(--v2-font-head);
	font-weight: 300;
	font-size: 9px;
	letter-spacing: .14em;
	color: var(--v2-text);
	text-transform: uppercase;
}
.app-container.v2 .mini-clip em {
	position: relative;
	font-family: var(--v2-font-head);
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	letter-spacing: .08em;
	color: var(--v2-text);
}

.app-container.v2 .result-card--archive { padding: 20px 20px 18px; }
.app-container.v2 .result-archive-stats {
	display: flex; gap: 12px; justify-content: space-between;
	margin-bottom: 14px;
	padding: 14px 16px;
	background: rgba(255,255,255,.04);
	border-radius: var(--v2-radius-card);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.app-container.v2 .result-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; }
.app-container.v2 .stat-value {
	font-family: var(--v2-font-head);
	font-weight: 400;
	font-size: 26px;
	letter-spacing: .04em;
	color: var(--v2-text);
}
.app-container.v2 .stat-label {
	font-family: var(--v2-font-head);
	font-weight: 300;
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--v2-text-mute);
}

.app-container.v2 .result-card--assistant { padding: 20px 20px 18px; }
.app-container.v2 .assistant-card-glow {
	position: absolute; inset: 0;
	background: radial-gradient(500px 220px at 0% 0%, rgba(224,165,138,.2), transparent 60%);
	pointer-events: none;
}
.app-container.v2 .assistant-card-inner {
	position: relative;
	display: flex; gap: 14px; align-items: center;
	margin-bottom: 14px;
}
.app-container.v2 .assistant-icon {
	flex: none;
	width: 52px; height: 52px;
	display: inline-flex;
	align-items: center; justify-content: center;
	background: rgba(6,6,8,.7);
	border-radius: 999px;
	box-shadow: var(--v2-bevel-soft);
	color: #e0a58a;
	font-size: 20px;
}
.app-container.v2 .assistant-content { display: flex; flex-direction: column; gap: 2px; }
.app-container.v2 .assistant-title {
	font-family: var(--v2-font-head);
	font-weight: 400;
	font-size: 16px;
	letter-spacing: .06em;
	color: var(--v2-text);
	margin: 0;
}
.app-container.v2 .assistant-text {
	font-family: var(--v2-font-head);
	font-weight: 300;
	font-size: 12px;
	letter-spacing: .04em;
	color: var(--v2-text-dim);
	margin: 0;
}
.app-container.v2 .assistant-btn {
	position: relative;
	width: 100%;
	display: inline-flex;
	align-items: center; justify-content: space-between;
	gap: 10px;
	padding: 14px 18px;
	background: rgba(255,255,255,.06);
	border: none;
	border-radius: 999px;
	color: var(--v2-text);
	box-shadow: var(--v2-bevel-soft);
	font-family: var(--v2-font-head);
	font-weight: 300;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s ease, box-shadow .2s ease;
}
.app-container.v2 .assistant-btn:hover { background: rgba(255,255,255,.1); box-shadow: var(--v2-bevel); }
.app-container.v2 .assistant-lock {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center; justify-content: center;
	flex-direction: column;
	gap: 10px;
	background: rgba(6,6,8,.78);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-radius: var(--v2-radius-panel);
	z-index: 2;
}
.app-container.v2 .assistant-card.is-locked .assistant-lock { display: flex; }
.app-container.v2 .assistant-lock-icon {
	width: 44px; height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.06);
	border-radius: 999px;
	box-shadow: var(--v2-bevel-soft);
	color: #e0a58a;
}
.app-container.v2 .assistant-lock-text {
	font-family: var(--v2-font-head);
	font-weight: 300;
	font-size: 12px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--v2-text-dim);
	margin: 0;
}

.app-container.v2 .btn-download.btn-primary {
	margin-top: 0;
	background: rgba(100, 100, 105, 0.45) !important;
	backdrop-filter: blur(16px) saturate(100%);
	-webkit-backdrop-filter: blur(16px) saturate(100%);
	color: #fff !important;
}
.app-container.v2 .btn-download.btn-primary:hover {
	background: rgba(120, 120, 125, 0.55) !important;
	box-shadow: var(--v2-bevel-strong);
}

/* Handoff card */
.app-container.v2 .handoff-card {
	position: relative;
	margin-top: 16px;
	padding: 22px 22px 20px;
	background: var(--v2-surface);
	border-radius: var(--v2-radius-panel);
	box-shadow: var(--v2-bevel);
	border: none;
	backdrop-filter: blur(22px) saturate(140%);
	-webkit-backdrop-filter: blur(22px) saturate(140%);
	overflow: hidden;
}
.app-container.v2 .handoff-glow {
	position: absolute; inset: 0;
	background: radial-gradient(600px 220px at 100% 0%, rgba(255,255,255,.12), transparent 60%);
	pointer-events: none;
}
.app-container.v2 .handoff-body { position: relative; }
.app-container.v2 .handoff-eyebrow {
	display: inline-block;
	font-family: var(--v2-font-head);
	font-weight: 300;
	font-size: 11px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
	margin-bottom: 6px;
}
.app-container.v2 .handoff-title {
	font-family: var(--v2-font-head);
	font-weight: 400;
	font-size: 22px;
	letter-spacing: .05em;
	color: var(--v2-text);
	margin: 0 0 8px;
}
.app-container.v2 .handoff-desc {
	font-family: var(--v2-font-head);
	font-weight: 300;
	font-size: 13px;
	letter-spacing: .02em;
	line-height: 1.5;
	color: var(--v2-text-dim);
	margin: 0 0 14px;
}
.app-container.v2 .handoff-features {
	list-style: none;
	padding: 0;
	margin: 0 0 18px;
	display: flex; flex-direction: column; gap: 6px;
}
.app-container.v2 .handoff-features li {
	display: flex; align-items: center; gap: 10px;
	font-family: var(--v2-font-head);
	font-weight: 300;
	font-size: 12px;
	letter-spacing: .06em;
	color: rgba(160, 160, 168, 0.6) !important;
}
.app-container.v2 .handoff-features i {
	width: 24px;
	color: rgba(160, 160, 168, 0.6) !important;
	font-size: 11px;
}
.app-container.v2 .handoff-cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	background: #fff;
	border-radius: 999px;
	color: #0b0b0e;
	text-decoration: none;
	font-family: var(--v2-font-head);
	font-weight: 400;
	font-size: 13px;
	letter-spacing: .12em;
	text-transform: uppercase;
	box-shadow: var(--v2-bevel-soft);
	transition: transform .2s ease, box-shadow .2s ease;
}
.app-container.v2 .handoff-cta:hover  { box-shadow: var(--v2-bevel-strong); }
.app-container.v2 .handoff-cta:active { transform: scale(.98); }

/* ═══════════════════════════════════════════════════════════════════
   Modals (locked / profile / plans) — v2 bevel
═══════════════════════════════════════════════════════════════════ */
.app-container.v2 ~ .locked-modal-overlay.active .locked-modal,
.locked-modal-overlay .locked-modal.v2,
.app-container.v2 ~ .locked-modal-overlay .locked-modal {
	background: var(--v2-surface, rgba(6,6,8,.85));
	border-radius: var(--v2-radius-panel, 32px);
	box-shadow:
		inset -21.48px -21.48px 10.74px -21.48px rgba(179,179,179,.55),
		inset  21.48px  21.48px 10.74px -21.48px rgba(179,179,179,.55),
		0 20px 60px rgba(0,0,0,.6);
	border: none;
	backdrop-filter: blur(28px) saturate(140%);
	-webkit-backdrop-filter: blur(28px) saturate(140%);
}
.app-container.v2 ~ .locked-modal-overlay .locked-modal-title,
.app-container.v2 ~ .profile-modal-overlay .profile-name,
.app-container.v2 ~ .profile-modal-overlay .subscription-title {
	font-family: 'Unbounded', 'Sora', system-ui, sans-serif;
	font-weight: 400;
	letter-spacing: .06em;
}
.app-container.v2 ~ .locked-modal-overlay .locked-modal-btn {
	font-family: 'Unbounded', 'Sora', system-ui, sans-serif;
	font-weight: 400;
	letter-spacing: .1em;
	text-transform: uppercase;
	border-radius: 999px;
}

.app-container.v2 ~ .profile-modal-overlay .profile-modal,
.app-container.v2 ~ .plans-modal-overlay .plans-modal {
	background: rgba(6,6,8,.82);
	border-radius: var(--v2-radius-panel, 32px);
	box-shadow:
		inset -21.48px -21.48px 10.74px -21.48px rgba(179,179,179,.45),
		inset  21.48px  21.48px 10.74px -21.48px rgba(179,179,179,.45),
		0 24px 70px rgba(0,0,0,.7);
	border: none;
	backdrop-filter: blur(28px) saturate(140%);
	-webkit-backdrop-filter: blur(28px) saturate(140%);
}

/* ═══════════════════════════════════════════════════════════════════
   Responsive polish
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 520px) {
	.app-container.v2 .type-options { grid-template-columns: 1fr; }
	.app-container.v2 .result-clips-grid { grid-template-columns: repeat(3, 1fr); }
	.app-container.v2 .editor-toolbar { gap: 8px; }
	.app-container.v2 .editor-aspect { margin-left: 0; width: 100%; justify-content: space-between; }
	.app-container.v2 .editor-aspect-btn { flex: 1; }
	.app-container.v2 .subtitle-styles { grid-template-columns: 1fr; }
	.app-container.v2 .subtitle-styles .style-preview { height: 40px; }
}

@media (max-width: 380px) {
	.app-container.v2 .btn-trailer { padding: 20px; }
	.app-container.v2 .trailer-icon { width: 50px; height: 50px; font-size: 18px; }
	.app-container.v2 .trailer-title { font-size: 18px; }
}

/* iOS blur cost (keep modals readable) */
@supports (-webkit-touch-callout: none) {
	.app-container.v2 .editor-stage,
	.app-container.v2 .editor-timeline,
	.app-container.v2 .editor-chip,
	.app-container.v2 .result-card,
	.app-container.v2 .handoff-card,
	.app-container.v2 .btn-primary {
		backdrop-filter: blur(12px) saturate(135%);
		-webkit-backdrop-filter: blur(12px) saturate(135%);
	}
}

/* ============================================================
   SONYA AUTH LAYER  v4
   · account button + dropdown
   · paywall + legal modal (kept compatible with auth.js)
   · toast
   · GLASS auth modal (sonya-auth-overlay) — light default + dark
   Do not remove this block.
   ============================================================ */

/* ── 1. ACCOUNT BUTTON ───────────────────────────────────────── */
.acct-wrap { position: relative; }

.floating-controls--right .acct-btn,
.acct-btn {
  width: 44px; height: 44px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 8, 10, .55);
  border: none;
  color: #fff;
  font-size: 14px; cursor: pointer;
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  box-shadow:
    inset -14px -14px 8px -14px rgba(179,179,179,.32),
    inset  14px  14px 8px -14px rgba(179,179,179,.32);
  transition: background .25s, border-color .25s, box-shadow .25s, transform .2s;
}
.icon-btn.acct-btn:hover,
.icon-btn.acct-btn:focus-visible,
.acct-btn:hover,
.acct-btn:focus-visible {
  background: rgba(18, 18, 22, .7) !important;
  border: none !important;
  border-color: transparent !important;
  color: #fff !important;
  outline: none;
  transform: translateY(-1px);
  box-shadow:
    inset -21.48px -21.48px 10.74px -21.48px rgba(179,179,179,.55),
    inset  21.48px  21.48px 10.74px -21.48px rgba(179,179,179,.55) !important;
}

.icon-btn.acct-btn:hover i,
.icon-btn.acct-btn:focus-visible i,
.acct-btn:hover i,
.acct-btn:focus-visible i {
  color: #fff !important;
}

[data-theme="dark"] .acct-btn {
  background: rgba(8, 8, 10, .55);
  color: #fff;
}
[data-theme="dark"] .icon-btn.acct-btn:hover,
[data-theme="dark"] .acct-btn:hover {
  background: rgba(18, 18, 22, .7) !important;
  color: #fff !important;
}

.acct-btn.is-logged-in {
  background: rgba(8, 8, 10, .55);
  color: #fff;
}
.acct-btn.is-logged-in i { color: #fff !important; }
[data-theme="dark"] .acct-btn.is-logged-in {
  background: rgba(8, 8, 10, .55);
}

.acct-initials {
  font-size: 13px; font-weight: 700;
  font-family: var(--font-display, 'Sora', sans-serif);
  line-height: 1; letter-spacing: 0.02em;
  color: inherit;
}

/* ── 2. ACCOUNT DROPDOWN ─────────────────────────────────────── */
.acct-drop {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 265px; padding: 10px;
  background: rgba(255,252,243,0.96);
  border: 1px solid rgba(110,75,28,0.10);
  border-radius: 22px;
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  box-shadow: 0 24px 60px rgba(110,80,40,0.12), 0 4px 14px rgba(110,80,40,0.07);
  z-index: 9000; opacity: 0; pointer-events: none;
  transform: translateY(-8px) scale(0.98);
  transition: opacity .22s var(--ease-out, ease), transform .22s var(--ease-out, ease);
}
.acct-drop.is-open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }

[data-theme="dark"] .acct-drop {
  background: rgba(26,20,15,0.96);
  border-color: rgba(232,197,142,0.13);
  box-shadow: 0 24px 60px rgba(0,0,0,0.52), 0 4px 14px rgba(0,0,0,0.28);
}

.acct-drop-user { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.acct-drop-email {
  font-size: 13px; font-weight: 600; word-break: break-all;
  color: rgba(18,12,6,0.96); line-height: 1.35;
  font-family: var(--font-body, 'Inter', sans-serif);
}
[data-theme="dark"] .acct-drop-email { color: rgba(242,234,219,0.96) !important; }

.acct-drop-plan {
  display: inline-flex; align-self: flex-start;
  padding: 4px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(110,75,28,0.06); color: rgba(110,75,28,0.80);
  border: 1px solid rgba(110,75,28,0.12);
  font-family: var(--font-display, 'Sora', sans-serif);
}
[data-theme="dark"] .acct-drop-plan {
  background: rgba(232,197,142,0.10); color: rgba(232,197,142,0.88);
  border-color: rgba(232,197,142,0.16);
}
.acct-drop-plan.is-pro {
  background: linear-gradient(135deg, #16100a, #2e2014);
  color: rgba(242,234,219,0.96); border-color: rgba(110,75,28,0.20);
}
[data-theme="dark"] .acct-drop-plan.is-pro {
  background: linear-gradient(135deg, rgba(232,197,142,0.28), rgba(200,163,103,0.18));
  border-color: rgba(232,197,142,0.30);
}

.acct-drop-until, .acct-drop-free {
  font-size: 11.5px; color: rgba(18,12,6,0.52);
}
[data-theme="dark"] .acct-drop-until, [data-theme="dark"] .acct-drop-free { color: rgba(242,234,219,0.56) !important; }

.acct-drop-divider { height: 1px; background: rgba(110,75,28,0.07); margin: 6px 4px; }
[data-theme="dark"] .acct-drop-divider { background: rgba(232,197,142,0.07); }

.acct-drop-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 11px 14px; border-radius: 14px;
  background: transparent; border: none;
  color: rgba(18,12,6,0.92); font-size: 13px; font-weight: 500;
  cursor: pointer; text-align: left;
  font-family: var(--font-body, 'Inter', sans-serif);
  transition: background .18s, transform .18s;
}
.acct-drop-item:hover { background: rgba(110,75,28,0.06); transform: translateX(2px); }
.acct-drop-item i { width: 16px; font-size: 12px; opacity: 0.70; }
.acct-drop-item:hover i { opacity: 1; }

[data-theme="dark"] .acct-drop-item { color: rgba(242,234,219,0.96) !important; }
[data-theme="dark"] .acct-drop-item:hover { background: rgba(232,197,142,0.06); }

.acct-drop-upgrade {
  background: linear-gradient(135deg, #16100a, #2e2014);
  color: rgba(242,234,219,0.96) !important;
  border: 1px solid transparent; margin-top: 2px;
}
.acct-drop-upgrade i { color: rgba(242,234,219,0.96) !important; opacity: 1; }
.acct-drop-upgrade:hover { background: linear-gradient(135deg, #1e1610, #382616); transform: translateX(0) translateY(-1px); }
[data-theme="dark"] .acct-drop-upgrade {
  background: rgba(232,197,142,0.06);
  color: rgba(232,197,142,0.92) !important;
  border-color: rgba(232,197,142,0.12);
}
[data-theme="dark"] .acct-drop-upgrade i { color: rgba(232,197,142,0.92) !important; }
[data-theme="dark"] .acct-drop-upgrade:hover { background: rgba(232,197,142,0.11); }

.acct-drop-logout { color: #b03040; }
.acct-drop-logout i { color: #b03040; opacity: 0.85; }
[data-theme="dark"] .acct-drop-logout, [data-theme="dark"] .acct-drop-logout i { color: #f88080 !important; }
.acct-drop-logout:hover { background: rgba(170,40,55,0.07); }
[data-theme="dark"] .acct-drop-logout:hover { background: rgba(248,80,80,0.10); }

/* ── 3. SHARED MODAL OVERLAY (paywall / legal) ───────────────── */
.sonya-modal-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(100,75,40,0.45);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity .28s var(--ease-out, ease);
}
[data-theme="dark"] .sonya-modal-overlay { background: rgba(0,0,0,0.72); }
.sonya-modal-overlay.is-open { opacity: 1; pointer-events: auto; }

.sonya-modal {
  position: relative; width: 100%; max-width: 420px;
  padding: 32px 28px 28px;
  background: rgba(255,252,243,0.97);
  border: 1px solid rgba(110,75,28,0.10);
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(110,80,40,0.14), 0 4px 16px rgba(110,80,40,0.08);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  transform: scale(0.96) translateY(8px); opacity: 0;
  transition: transform .32s var(--ease-out, ease), opacity .32s var(--ease-out, ease);
}
[data-theme="dark"] .sonya-modal {
  background: rgba(28,23,18,0.96);
  border-color: rgba(232,197,142,0.16);
  box-shadow: 0 28px 78px rgba(0,0,0,0.58), 0 8px 22px rgba(0,0,0,0.35);
}
.sonya-modal-overlay.is-open .sonya-modal { transform: scale(1) translateY(0); opacity: 1; }

.sonya-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px; border-radius: 999px;
  background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.08);
  color: rgba(18,12,6,0.50); display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 13px;
  transition: background .18s, color .18s, transform .18s;
}
.sonya-modal-close:hover { color: #b03040; transform: rotate(90deg); }
[data-theme="dark"] .sonya-modal-close {
  background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.09);
  color: rgba(242,234,219,0.55);
}
[data-theme="dark"] .sonya-modal-close i { color: rgba(242,234,219,0.55) !important; }
[data-theme="dark"] .sonya-modal-close:hover { background: rgba(248,113,113,.12); color: #f87171; }

/* ── 4. PAYWALL MODAL ────────────────────────────────────────── */
.paywall-modal { text-align: center; max-width: 400px; padding: 36px 28px 28px; }
.paywall-icon {
  width: 58px; height: 58px; border-radius: 999px; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center; font-size: 23px;
  background: linear-gradient(135deg, rgba(232,197,142,0.18), rgba(200,163,103,0.08));
  border: 1px solid rgba(110,75,28,0.16);
  color: rgba(110,68,24,0.88);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15), 0 10px 28px rgba(110,80,40,0.14);
}
.paywall-icon i { color: rgba(110,68,24,0.88) !important; }
[data-theme="dark"] .paywall-icon {
  background: linear-gradient(135deg, rgba(232,197,142,0.20), rgba(200,163,103,0.10));
  border-color: rgba(232,197,142,0.24);
  color: rgba(232,197,142,0.92);
  box-shadow: inset 0 1px 0 rgba(255,220,160,0.14), 0 10px 28px rgba(0,0,0,0.28);
}
[data-theme="dark"] .paywall-icon i { color: rgba(232,197,142,0.92) !important; }

.paywall-title {
  font-size: 21px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.01em;
  color: rgba(18,12,6,0.96);
  font-family: var(--font-display, 'Sora', sans-serif);
}
[data-theme="dark"] .paywall-title { color: rgba(242,234,219,0.96) !important; }

.paywall-desc {
  font-size: 13.5px; color: rgba(18,12,6,0.55); margin: 0 0 16px; line-height: 1.58;
  font-family: var(--font-body, 'Inter', sans-serif);
}
[data-theme="dark"] .paywall-desc { color: rgba(242,234,219,0.58) !important; }

.paywall-price {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 9px 18px; margin: 0 0 20px; border-radius: 999px;
  background: rgba(110,75,28,0.06); border: 1px solid rgba(110,75,28,0.12);
}
[data-theme="dark"] .paywall-price { background: rgba(232,197,142,0.08); border-color: rgba(232,197,142,0.14); }
.paywall-price-value {
  font-size: 22px; font-weight: 700; color: rgba(18,12,6,0.96); letter-spacing: -0.01em;
  font-family: var(--font-display, 'Sora', sans-serif);
}
[data-theme="dark"] .paywall-price-value { color: rgba(242,234,219,0.96) !important; }
.paywall-price-period {
  font-size: 12.5px; font-weight: 500; color: rgba(18,12,6,0.50);
  font-family: var(--font-body, 'Inter', sans-serif);
}
[data-theme="dark"] .paywall-price-period { color: rgba(242,234,219,0.52) !important; }

.paywall-features {
  display: flex; flex-direction: column; gap: 10px; text-align: left;
  padding: 14px 16px; margin: 0 0 20px; border-radius: 14px;
  background: rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.05);
}
[data-theme="dark"] .paywall-features { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.06); }
.paywall-features span {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: rgba(18,12,6,0.86);
  font-family: var(--font-body, 'Inter', sans-serif);
}
[data-theme="dark"] .paywall-features span { color: rgba(242,234,219,0.86) !important; }
.paywall-features i {
  font-size: 10px; width: 22px; height: 22px; border-radius: 999px;
  background: rgba(232,197,142,0.12); border: 1px solid rgba(232,197,142,0.20);
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(110,68,24,0.88); flex-shrink: 0;
}
[data-theme="dark"] .paywall-features i {
  background: rgba(232,197,142,0.12); border-color: rgba(232,197,142,0.18);
  color: rgba(232,197,142,0.92) !important;
}

.paywall-tg-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px 18px; margin-bottom: 10px; border: none; border-radius: 14px;
  background: #2AABEE; color: #fff !important;
  font-size: 14.5px; font-weight: 700; cursor: pointer;
  font-family: var(--font-display, 'Sora', sans-serif);
  box-shadow: 0 8px 24px rgba(42,171,238,0.28);
  transition: background .2s, transform .15s, box-shadow .2s;
}
.paywall-tg-btn i { color: #fff !important; font-size: 16px; }
.paywall-tg-btn:hover { background: #1a9fe0; transform: translateY(-1px); box-shadow: 0 12px 32px rgba(42,171,238,0.34); }
.paywall-later-btn {
  width: 100%; padding: 12px 18px; background: transparent; cursor: pointer;
  border: 1px solid rgba(110,75,28,0.12); border-radius: 14px;
  color: rgba(18,12,6,0.50); font-size: 13.5px; font-weight: 500;
  font-family: var(--font-display, 'Sora', sans-serif);
  transition: border-color .2s, color .2s, background .2s;
}
.paywall-later-btn:hover { border-color: rgba(110,75,28,0.24); color: rgba(18,12,6,0.86); background: rgba(110,75,28,0.04); }
[data-theme="dark"] .paywall-later-btn { border-color: rgba(232,197,142,0.14); color: rgba(242,234,219,0.52); }
[data-theme="dark"] .paywall-later-btn:hover { border-color: rgba(232,197,142,0.28); color: rgba(242,234,219,0.88); background: rgba(232,197,142,0.05); }

/* ── 5. LEGAL MODAL ──────────────────────────────────────────── */
.legal-modal { max-width: 520px; max-height: 78vh; overflow-y: auto; }
.legal-modal-title {
  font-size: 18px; font-weight: 700; margin: 0 0 16px; padding-right: 40px;
  color: rgba(18,12,6,0.96); letter-spacing: -0.01em;
  font-family: var(--font-display, 'Sora', sans-serif);
}
[data-theme="dark"] .legal-modal-title { color: rgba(242,234,219,0.96) !important; }
.legal-modal-body {
  font-size: 13px; color: rgba(18,12,6,0.60);
  white-space: pre-wrap; line-height: 1.70; margin: 0;
  font-family: var(--font-body, 'Inter', sans-serif);
}
[data-theme="dark"] .legal-modal-body { color: rgba(242,234,219,0.56) !important; }

/* ── 6. TOAST ────────────────────────────────────────────────── */
.sonya-toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(255,252,243,0.96); border: 1px solid rgba(110,75,28,0.14);
  color: rgba(18,12,6,0.96);
  padding: 13px 22px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500;
  font-family: var(--font-body, 'Inter', sans-serif);
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 14px 40px rgba(110,80,40,0.18), 0 4px 12px rgba(110,80,40,0.08);
  z-index: 11000; opacity: 0; pointer-events: none;
  max-width: calc(100vw - 48px); text-align: center;
  display: inline-flex; align-items: center; gap: 9px;
  transition: opacity .26s var(--ease-out, ease), transform .26s var(--ease-out, ease);
}
.sonya-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
[data-theme="dark"] .sonya-toast {
  background: rgba(22,17,12,0.95); border-color: rgba(232,197,142,0.18);
  color: rgba(242,234,219,0.96);
  box-shadow: 0 14px 40px rgba(0,0,0,0.38), 0 4px 12px rgba(0,0,0,0.20);
}
.sonya-toast--success { color: #1a7a48; border-color: rgba(26,122,72,0.20); }
[data-theme="dark"] .sonya-toast--success { color: #88d4a8; border-color: rgba(100,210,150,0.22); }
.sonya-toast--error {
  color: #b03040; border-color: rgba(170,40,55,0.20);
}
[data-theme="dark"] .sonya-toast--error {
  color: #f88080; border-color: rgba(248,80,80,0.24);
  background: rgba(28,12,12,0.96);
}


/* ============================================================
   SONYA AUTH MODAL  ·  v7  matches .hero2-* exactly
   · same glass tokens as .hero2-input / .hero2-tab / .hero2-cta
   · NO backdrop-filter on overlay (cosmic video bg stays sharp)
   · spotlight: when modal is open, page content fades out but
     SONYA wordmark + cosmic video bg remain visible
   · class-based show/hide (.is-open on overlay)
   ============================================================ */

/* ── 0. Spotlight when modal is open ─────────────────────────── */
/* Pre-set transition on the BASE elements so fade-out and fade-in
   are both smooth, in sync with the overlay (220ms ease-out).       */
.app-container .hero2-tabs,
.app-container .hero2-input,
.app-container .hero2-sources,
.app-container .hero2-cta,
.app-container .page-content,
.app-container .page-footer,
.app-container .page-header,
.floating-controls,
.menu-overlay {
  transition: opacity 220ms ease-out;
}

body.sonya-auth-open .app-container .hero2-tabs,
body.sonya-auth-open .app-container .hero2-input,
body.sonya-auth-open .app-container .hero2-sources,
body.sonya-auth-open .app-container .hero2-cta,
body.sonya-auth-open .app-container .page-content,
body.sonya-auth-open .app-container .page-footer,
body.sonya-auth-open .app-container .page-header,
body.sonya-auth-open .floating-controls,
body.sonya-auth-open .menu-overlay {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* SONYA wordmark stays visible (it's outside the modal, behind it) */
body.sonya-auth-open .hero2-wordmark {
  opacity: 1 !important;
  visibility: visible !important;
  position: relative;
  z-index: 3;
}

/* ── 1. Overlay (transparent — bg video stays live) ──────────── */
/* Always rendered (display: flex always) so the card's backdrop-filter
   is pre-painted by the GPU. Opacity + pointer-events handle show/hide.
   This prevents the "transparent → blurred" flash on open.            */
.sonya-auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(220px, 32vh, 360px) 20px 32px;

  background: transparent;

  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease-out;
  overflow-y: auto;
}

.sonya-auth-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

@media (max-height: 800px) {
  .sonya-auth-overlay { padding: clamp(160px, 22vh, 240px) 20px 32px; }
}
@media (max-height: 660px) {
  .sonya-auth-overlay { align-items: center; padding: 24px; }
}

/* ── 2. Card (signature glass, same tokens as .hero2-input) ──── */
.sonya-auth-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  padding: 64px 36px 24px;
  border-radius: 32px;

  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    inset -21.48px -21.48px 10.74px -21.48px rgba(179, 179, 179, 0.72),
    inset  21.48px  21.48px 10.74px -21.48px rgba(179, 179, 179, 0.72),
    0 10px 40px rgba(0, 0, 0, 0.35),
    0 30px 80px rgba(0, 0, 0, 0.45);
  color: #fff;
  font-family: 'Unbounded', 'Sora', system-ui, sans-serif;

  /* Only animate transform — no opacity flicker on backdrop-filter.
     Card's visibility is fully controlled by parent overlay opacity. */
  transform: translateY(8px) scale(0.985);
  transition: transform 280ms cubic-bezier(0.22,1,0.36,1);
  will-change: transform;
}

.sonya-auth-overlay.is-open .sonya-auth-card {
  transform: translateY(0) scale(1);
}

/* light theme: only text color is inverted (bg/shadow are the same) */
[data-theme="light"] .sonya-auth-card { color: #0a0a0a; }

/* ── 3. Close button (same .hero2-input glass shrunk) ────────── */
.sonya-auth-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;

  background: rgba(0, 0, 0, 0.28);
  color: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow:
    inset -10px -10px 6px -10px rgba(179, 179, 179, 0.55),
    inset  10px  10px 6px -10px rgba(179, 179, 179, 0.55);
  transition: transform 180ms ease, color 180ms ease, box-shadow 220ms ease, background 220ms ease;
}

.sonya-auth-close:hover {
  color: #fff;
  background: rgba(20, 20, 22, 0.55);
  transform: scale(1.06);
  box-shadow:
    inset -10px -10px 6px -10px rgba(255, 255, 255, 0.85),
    inset  10px  10px 6px -10px rgba(255, 255, 255, 0.85);
}

[data-theme="light"] .sonya-auth-close { color: rgba(10, 10, 10, 0.72); }
[data-theme="light"] .sonya-auth-close:hover { color: #0a0a0a; }

/* ── 4. Tabs (replica of .hero2-tabs / .hero2-tab.active) ─────── */
.sonya-auth-tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  margin: 0 auto 28px;
  width: 100%;
  border-radius: 9999px;

  /* matches .hero2-tabs shared rule (without backdrop-filter — card already blurs) */
  background: rgba(0, 0, 0, 0.28);
  box-shadow:
    inset -21.48px -21.48px 10.74px -21.48px rgba(179, 179, 179, 0.55),
    inset  21.48px  21.48px 10.74px -21.48px rgba(179, 179, 179, 0.55);
}

.sonya-auth-tabs-glow { display: none; }

.sonya-auth-tab {
  position: relative;
  z-index: 1;
  padding: 13px 18px;
  border: 0;
  border-radius: 9999px;
  background: rgba(6, 6, 8, 0.55);
  color: rgba(255, 255, 255, 0.64);
  font-family: 'Unbounded', 'Sora', system-ui, sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.06em;
  cursor: pointer;
  box-shadow:
    inset -14px -14px 8px -14px rgba(179, 179, 179, 0.55),
    inset  14px  14px 8px -14px rgba(179, 179, 179, 0.55);
  transition: color 180ms ease, background 220ms ease, box-shadow 220ms ease, transform 180ms ease;
}

.sonya-auth-tab:hover { color: rgba(255, 255, 255, 0.85); }

.sonya-auth-tab.is-active {
  color: #fff;
  background: rgba(20, 20, 22, 0.72);
  box-shadow:
    inset -14px -14px 8px -14px rgba(255, 255, 255, 0.95),
    inset  14px  14px 8px -14px rgba(255, 255, 255, 0.60),
    0 6px 20px rgba(0, 0, 0, 0.35);
}

/* light theme: only text color, exact same as the page tabs */
[data-theme="light"] .sonya-auth-tab,
[data-theme="light"] .sonya-auth-tab.is-active { color: #0a0a0a; }
[data-theme="light"] .sonya-auth-tab { color: rgba(10, 10, 10, 0.55); }
[data-theme="light"] .sonya-auth-tab:hover { color: rgba(10, 10, 10, 0.85); }
[data-theme="light"] .sonya-auth-tab.is-active { color: #0a0a0a; }

/* ── 5. Banner ───────────────────────────────────────────────── */
.sonya-auth-banner {
  margin: 0 0 18px;
  padding: 12px 18px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.28);
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  box-shadow:
    inset -10px -10px 6px -10px rgba(179, 179, 179, 0.32),
    inset  10px  10px 6px -10px rgba(179, 179, 179, 0.32);
}

[data-theme="light"] .sonya-auth-banner { color: rgba(10, 10, 10, 0.85); }

/* ── 6. Views ────────────────────────────────────────────────── */
.sonya-auth-view { display: none; }
.sonya-auth-view.is-active {
  display: block;
  animation: sonyaAuthViewIn 360ms cubic-bezier(0.22,1,0.36,1);
}

@keyframes sonyaAuthViewIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sonya-auth-title {
  margin: 0 0 6px;
  font-family: 'Unbounded', 'Sora', system-ui, sans-serif;
  font-weight: 300;
  font-size: 22px;
  letter-spacing: 0.06em;
  color: #fff;
  text-align: center;
}

[data-theme="light"] .sonya-auth-title { color: #0a0a0a; }

.sonya-auth-subtitle {
  margin: 0 0 22px;
  font-family: 'Unbounded', 'Sora', system-ui, sans-serif;
  font-weight: 300;
  font-size: 13.5px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}

[data-theme="light"] .sonya-auth-subtitle { color: rgba(10, 10, 10, 0.55); }

/* ── 7. Field (input) — replica of .hero2-input .hero2-input-row */
.sonya-auth-field {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 56px;
  padding: 0 22px;
  margin-bottom: 14px;
  border-radius: 9999px;

  background: rgba(0, 0, 0, 0.28);
  box-shadow:
    inset -21.48px -21.48px 10.74px -21.48px rgba(179, 179, 179, 0.72),
    inset  21.48px  21.48px 10.74px -21.48px rgba(179, 179, 179, 0.72);
  transition: background 220ms ease, box-shadow 220ms ease;
}

.sonya-auth-field:focus-within {
  background: rgba(20, 20, 22, 0.55);
  box-shadow:
    inset -21.48px -21.48px 10.74px -21.48px rgba(255, 255, 255, 0.85),
    inset  21.48px  21.48px 10.74px -21.48px rgba(255, 255, 255, 0.85);
}

.sonya-auth-field-ic {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.72);
}

[data-theme="light"] .sonya-auth-field-ic { color: rgba(10, 10, 10, 0.55); }

.sonya-auth-input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: #fff !important;
  font-family: 'Unbounded', 'Sora', system-ui, sans-serif;
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 0.04em;
}

.sonya-auth-input::placeholder { color: rgba(255, 255, 255, 0.60); }

[data-theme="light"] .sonya-auth-input { color: #0a0a0a !important; }
[data-theme="light"] .sonya-auth-input::placeholder { color: rgba(10, 10, 10, 0.45); }

.sonya-auth-field--code {
  height: 64px;
  padding: 0;
  justify-content: center;
}

.sonya-auth-input--code {
  text-align: center;
  font-family: 'Unbounded', 'Sora', system-ui, monospace;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.42em;
  padding-left: 0.42em;
}

/* ── 8. Primary CTA — replica of .hero2-cta ──────────────────── */
.sonya-auth-cta {
  width: 100%;
  height: 56px;
  margin-top: 8px;
  border-radius: 9999px;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  overflow: hidden;

  background: rgba(0, 0, 0, 0.28);
  color: #fff;
  font-family: 'Unbounded', 'Sora', system-ui, sans-serif;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  box-shadow:
    inset -21.48px -21.48px 10.74px -21.48px rgba(179, 179, 179, 0.72),
    inset  21.48px  21.48px 10.74px -21.48px rgba(179, 179, 179, 0.72),
    0 10px 40px rgba(0, 0, 0, 0.35);
  transition: transform 180ms ease, background 220ms ease, box-shadow 220ms ease;
}

.sonya-auth-cta:hover {
  transform: translateY(-1px);
  background: rgba(20, 20, 22, 0.62);
  box-shadow:
    inset -21.48px -21.48px 10.74px -21.48px rgba(255, 255, 255, 0.92),
    inset  21.48px  21.48px 10.74px -21.48px rgba(255, 255, 255, 0.92),
    0 14px 50px rgba(0, 0, 0, 0.45);
}

.sonya-auth-cta:active { transform: translateY(0); }

.sonya-auth-cta:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

[data-theme="light"] .sonya-auth-cta { color: #0a0a0a; }

/* ── 9. Switch link ──────────────────────────────────────────── */
.sonya-auth-switch {
  margin-top: 18px;
  text-align: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
}

[data-theme="light"] .sonya-auth-switch { color: rgba(10, 10, 10, 0.55); }

.sonya-auth-switch button {
  background: none;
  border: 0;
  padding: 0 0 0 6px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.32);
  text-underline-offset: 3px;
  transition: text-decoration-color 200ms ease;
}

.sonya-auth-switch button:hover { text-decoration-color: rgba(255, 255, 255, 0.85); }

[data-theme="light"] .sonya-auth-switch button {
  color: #0a0a0a;
  text-decoration-color: rgba(10, 10, 10, 0.32);
}
[data-theme="light"] .sonya-auth-switch button:hover { text-decoration-color: rgba(10, 10, 10, 0.85); }

.sonya-auth-switch--row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.sonya-auth-switch--row button { padding: 0; }

/* ── 10. Consents (3 checkboxes) ─────────────────────────────── */
.sonya-auth-consents {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 18px;
  padding: 16px 18px;
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.20);
  box-shadow:
    inset -10px -10px 6px -10px rgba(179, 179, 179, 0.32),
    inset  10px  10px 6px -10px rgba(179, 179, 179, 0.32);
}

.sonya-auth-consent {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  user-select: none;
  position: relative;
}

[data-theme="light"] .sonya-auth-consent { color: rgba(10, 10, 10, 0.78); }

.sonya-auth-consent input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.sonya-auth-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.32);
  border: 1.5px solid rgba(255, 255, 255, 0.32);
  position: relative;
  margin-top: 1px;
  transition: all 220ms ease;
}

[data-theme="light"] .sonya-auth-check {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(10, 10, 10, 0.32);
}

.sonya-auth-consent input:checked + .sonya-auth-check {
  background: #fff;
  border-color: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.sonya-auth-consent input:checked + .sonya-auth-check::after {
  content: '';
  position: absolute;
  top: 2.5px;
  left: 5.5px;
  width: 4px;
  height: 8px;
  border-right: 2px solid #0a0a0a;
  border-bottom: 2px solid #0a0a0a;
  transform: rotate(45deg);
}

[data-theme="light"] .sonya-auth-consent input:checked + .sonya-auth-check {
  background: #0a0a0a;
  border-color: #0a0a0a;
  box-shadow: 0 0 0 4px rgba(10, 10, 10, 0.10);
}

[data-theme="light"] .sonya-auth-consent input:checked + .sonya-auth-check::after {
  border-right-color: #fff;
  border-bottom-color: #fff;
}

.sonya-auth-consent input:focus-visible + .sonya-auth-check {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}

[data-theme="light"] .sonya-auth-consent input:focus-visible + .sonya-auth-check {
  outline-color: rgba(10, 10, 10, 0.55);
}

.sonya-auth-consent-text a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.32);
  text-underline-offset: 2px;
  transition: text-decoration-color 200ms ease;
}

.sonya-auth-consent-text a:hover { text-decoration-color: rgba(255, 255, 255, 0.85); }

[data-theme="light"] .sonya-auth-consent-text a { text-decoration-color: rgba(10, 10, 10, 0.32); }
[data-theme="light"] .sonya-auth-consent-text a:hover { text-decoration-color: rgba(10, 10, 10, 0.85); }

/* ── 11. Inline error ────────────────────────────────────────── */
.sonya-auth-error {
  margin: 14px 0 0;
  padding: 11px 16px;
  border-radius: 14px;
  background: rgba(220, 80, 80, 0.18);
  color: #ff9090;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.45;
  text-align: center;
  box-shadow:
    inset -10px -10px 6px -10px rgba(220, 80, 80, 0.32),
    inset  10px  10px 6px -10px rgba(220, 80, 80, 0.32);
}

[data-theme="light"] .sonya-auth-error { color: #b03030; }

/* ── 12. Footer (privacy note) ───────────────────────────────── */
.sonya-auth-footer {
  margin: 24px -8px -4px;
  padding: 14px 16px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.42);
}

[data-theme="light"] .sonya-auth-footer {
  border-top-color: rgba(10, 10, 10, 0.08);
  color: rgba(10, 10, 10, 0.45);
}

.sonya-auth-footer-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: rgba(120, 210, 150, 0.85);
  box-shadow: 0 0 8px rgba(120, 210, 150, 0.55);
}

.sonya-auth-footer a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.24);
  text-underline-offset: 2px;
}

.sonya-auth-footer a:hover { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.65); }

[data-theme="light"] .sonya-auth-footer a {
  color: rgba(10, 10, 10, 0.78);
  text-decoration-color: rgba(10, 10, 10, 0.24);
}
[data-theme="light"] .sonya-auth-footer a:hover { color: #0a0a0a; text-decoration-color: rgba(10, 10, 10, 0.65); }

/* ── 13. Loading state on CTA ────────────────────────────────── */
.sonya-auth-cta.is-loading {
  pointer-events: none;
  position: relative;
}

.sonya-auth-cta.is-loading > * { opacity: 0.4; }

.sonya-auth-cta.is-loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  margin: -9px 0 0 -9px;
  width: 18px; height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-top-color: #fff;
  border-radius: 9999px;
  animation: sonyaAuthSpin 720ms linear infinite;
}

[data-theme="light"] .sonya-auth-cta.is-loading::after {
  border-color: rgba(10, 10, 10, 0.28);
  border-top-color: #0a0a0a;
}

@keyframes sonyaAuthSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── 14. Mobile ──────────────────────────────────────────────── */
@media (max-width: 540px) {
  .sonya-auth-overlay {
    padding: clamp(160px, 22vh, 220px) 16px 24px;
  }
  .sonya-auth-card {
    padding: 56px 22px 18px;
    border-radius: 26px;
  }
  .sonya-auth-title { font-size: 20px; }
}

/* ── 15. Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sonya-auth-overlay,
  .sonya-auth-card,
  .sonya-auth-cta,
  .sonya-auth-view.is-active,
  body.sonya-auth-open .app-container > * {
    transition: none !important;
    animation: none !important;
  }
}