:root {
    --primary: #2563eb;
    --primary-700: #1d4ed8;
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    --primary-300: #93c5fd;
    --primary-gradient: linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);
    --primary-gradient-soft: linear-gradient(135deg,#ffffff 0%,#eff6ff 100%);
    --font-xs: 10px;
    --font-sm: 12px;
    --font-base: 14px;
    --ink: #0f172a;
    --ink-700: #334155;
    --ink-500: #64748b;
    --canvas: #f6f8fc;
    --surface: #fff;
    --border: #e2e8f0;
    --success: #10b981;
    --danger: #ef4444;
    --sidebar-width: 248px;
    --shadow: 0 1px 2px rgba(23, 21, 43, .04), 0 10px 30px rgba(23, 21, 43, .055);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); font: 400 14px/1.55 "Be Vietnam Pro", Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 200; padding: 10px 16px; color: #fff; background: var(--primary); border-radius: 10px; transition: top .2s; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid rgba(37,99,235,.24); outline-offset: 2px; }

.app-shell { min-height: 100vh; }
.sidebar { position: fixed; z-index: 60; inset: 0 auto 0 0; display: flex; width: var(--sidebar-width); height: 100vh; height: 100dvh; max-height: 100dvh; flex-direction: column; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; border-right: 1px solid var(--border); background: rgba(255,255,255,.96); -webkit-overflow-scrolling: touch; }
.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
.sidebar__top { position: sticky; z-index: 2; top: 0; display: flex; height: 76px; min-height: 76px; padding: 0 20px; align-items: center; justify-content: space-between; background: rgba(255,255,255,.97); backdrop-filter: blur(12px); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700; letter-spacing: -.6px; }
.brand__mark { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; color: #fff; background: var(--primary-gradient); box-shadow: 0 7px 18px rgba(37,99,235,.24); }
.brand__mark svg { width: 31px; fill: currentColor; stroke: none; }
.brand__mark .brand__spark { fill: #bfdbfe; }
.brand__name span { color: var(--primary); }
.sidebar__close { display: none !important; }
.nav-list { display: grid; flex: 0 0 auto; gap: 5px; padding: 8px 14px; }
.nav-list--secondary { margin-top: 10px; }
.nav-label { margin: 0 10px 8px; color: #a09caf; font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.nav-item { display: flex; min-height: 44px; padding: 9px 12px; align-items: center; gap: 12px; border-radius: 11px; color: #64748b; font-weight: 500; transition: color .18s, background .18s, transform .18s; }
.nav-item:hover { color: var(--ink); background: #f8fafc; }
.nav-item.is-active { color: var(--primary-700); background: var(--primary-50); font-weight: 600; }
.nav-item.is-active::before { position: absolute; left: 0; width: 3px; height: 22px; content: ""; border-radius: 0 6px 6px 0; background: var(--primary); }
.nav-item svg { width: 20px; height: 20px; }
.nav-item--create svg { padding: 1px; border-radius: 6px; }
.nav-item.is-disabled { cursor: default; }
.nav-new { margin-left: auto; padding: 2px 6px; color: var(--primary); background: #dbeafe; border-radius: 6px; font-size: 9px; font-weight: 700; }
.nav-count { display: grid; min-width: 21px; height: 21px; margin-left: auto; padding: 0 5px; place-items: center; color: var(--primary); background: #dbeafe; border-radius: 8px; font-size: 10px; font-weight: 700; }
.sidebar__bottom { display: grid; flex: 0 0 auto; gap: 5px; margin-top: auto; padding: 12px 14px max(16px,env(safe-area-inset-bottom)); }
.credit-mini { margin: 0 2px 8px; padding: 13px; border: 1px solid var(--primary-100); background: var(--primary-gradient-soft); border-radius: 13px; }
.credit-mini { display: block; color: inherit; text-decoration: none; }
.credit-mini__row { display: flex; align-items: center; justify-content: space-between; }
.credit-mini__row span { display: flex; align-items: center; gap: 7px; color: #5f5972; font-size: 11px; font-weight: 600; }
.credit-mini__row svg { width: 15px; color: var(--primary); }
.credit-mini__row strong { font-size: 14px; }
.credit-mini__track { height: 4px; margin: 10px 0 7px; overflow: hidden; background: #dbeafe; border-radius: 99px; }
.credit-mini__track span { display: block; width: 64%; height: 100%; background: var(--primary-gradient); border-radius: inherit; }
.credit-mini p { margin: 0; color: var(--ink-500); font-size: 9px; }
.credit-mini--guest { padding-bottom: 14px; }
.credit-mini--guest .credit-mini__row { margin-bottom: 7px; }
.profile-card { display: flex; width: 100%; padding: 10px; align-items: center; gap: 10px; border: 0; background: transparent; border-radius: 11px; cursor: pointer; text-align: left; }
.profile-card:hover { background: #f8fafc; }
.profile-card--guest { border: 1px solid #dbeafe; background: #f8fbff; }
.logout-form { margin: 0; }
.logout-button { border: 0; background: transparent; cursor: pointer; text-align: left; }
.avatar, .topbar-avatar { display: grid; place-items: center; color: #fff; background: var(--primary-gradient); font-weight: 700; }
.avatar { width: 34px; height: 34px; border-radius: 10px; font-size: 10px; }
.avatar svg { width: 18px; }
.profile-card__info { display: grid; flex: 1; }
.profile-card__info strong { font-size: 11px; }
.profile-card__info small { color: var(--ink-500); font-size: 9px; }
.profile-card > svg { width: 16px; color: #aaa6b4; }

.app-main { min-width: 0; min-height: 100vh; margin-left: var(--sidebar-width); overflow-x: clip; }
.topbar { position: sticky; z-index: 40; top: 0; display: flex; height: 76px; padding: 0 32px; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(226,232,240,.88); background: rgba(246,248,252,.9); backdrop-filter: blur(16px); }
.topbar__left { display: flex; align-items: center; gap: 12px; }
.eyebrow { margin: 0 0 1px; color: #9a96aa; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.topbar__title { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -.2px; }
.topbar__actions { display: flex; align-items: center; gap: 10px; }
.icon-button { display: grid; width: 40px; height: 40px; padding: 0; place-items: center; border: 1px solid var(--border); background: #fff; border-radius: 11px; cursor: pointer; }
.icon-button:hover { border-color: #cbd5e1; background: #f8fafc; }
.icon-button svg { width: 19px; }
.icon-button--small { width: 32px; height: 32px; border: 0; background: transparent; }
.icon-button--small svg { width: 17px; }
.menu-button { display: none; }
.credit-pill { display: flex; height: 40px; padding: 0 8px 0 12px; align-items: center; gap: 7px; border: 1px solid #dbeafe; color: #475569; background: #fff; border-radius: 12px; cursor: pointer; }
.credit-pill { text-decoration: none; }

/* MVP resource pages: jobs, library, video detail and credit ledger. */
.resource-page { display: grid; gap: 20px; }
.resource-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.resource-heading h2 { margin: 5px 0 5px; font-size: clamp(22px,2.2vw,30px); letter-spacing: -.7px; }
.resource-heading p { margin: 0; color: var(--ink-500); font-size: var(--font-sm); }
.resource-filters { display: flex; padding: 14px; gap: 10px; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 14px; }
.resource-filters label:first-child { flex: 1; }
.resource-filters input[type="search"], .resource-filters select, .stack-form input, .stack-form select { width: 100%; min-height: 44px; padding: 0 13px; border: 1px solid var(--border); border-radius: 10px; color: var(--ink); background: #fff; font: inherit; }
.filter-check { display: flex; align-items: center; gap: 7px; color: var(--ink-500); font-size: var(--font-sm); white-space: nowrap; }
.resource-panel { min-width: 0; padding: 20px; background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm); }
.resource-panel__heading { display: flex; margin-bottom: 16px; align-items: center; justify-content: space-between; }
.resource-panel__heading h3 { margin: 4px 0 0; font-size: var(--font-lg); }
.resource-layout { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(280px,.75fr); gap: 20px; align-items: start; }
.job-progress-card { padding: 20px; background: linear-gradient(135deg,#fff,#f7faff); border: 1px solid #bfdbfe; border-radius: 16px; }
.job-progress-card__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.job-progress-card__top h3 { margin: 4px 0 12px; font-size: var(--font-lg); }
.job-progress-card__top > strong { color: var(--primary); font-size: 22px; }
.job-safe-note { margin: 11px 0 0; color: var(--ink-500); font-size: var(--font-xs); }
.job-live-preview { --job-progress: 0%; position: relative; isolation: isolate; display: grid; width: 100%; aspect-ratio: 16/9; padding: 18px; place-items: center; overflow: hidden; color: #fff; background: #06101f; border: 1px solid rgba(96,165,250,.3); border-radius: 18px; box-shadow: 0 20px 60px rgba(15,23,42,.16); }
.job-live-preview[data-ratio="9:16"] { width: min(100%,380px); margin-inline: auto; aspect-ratio: 9/16; }
.job-live-preview[data-ratio="1:1"] { width: min(100%,650px); margin-inline: auto; aspect-ratio: 1; }
.job-live-preview::after { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; height: 3px; content: ""; background: linear-gradient(90deg,#38bdf8,#2563eb 60%,#8b5cf6) 0/var(--job-progress) 100% no-repeat,rgba(255,255,255,.1); box-shadow: 0 0 20px rgba(56,189,248,.5); transition: background-size .6s ease; }
.job-live-preview__scene { position: absolute; z-index: -1; inset: 0; overflow: hidden; background: radial-gradient(circle at 50% 45%,rgba(37,99,235,.22),transparent 34%),linear-gradient(145deg,#030712,#0b1f3a 58%,#111447); }
.job-live-preview__glow { position: absolute; width: 48%; aspect-ratio: 1; border-radius: 50%; filter: blur(45px); opacity: .38; animation: renderDrift 7s ease-in-out infinite alternate; }
.job-live-preview__glow--one { top: -24%; left: -12%; background: #0ea5e9; }
.job-live-preview__glow--two { right: -14%; bottom: -28%; background: #7c3aed; animation-direction: alternate-reverse; }
.job-live-preview__grid { position: absolute; inset: 0; opacity: .17; background-image: linear-gradient(rgba(148,163,184,.24) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.24) 1px,transparent 1px); background-size: 34px 34px; transform: perspective(520px) rotateX(62deg) scale(1.5) translateY(16%); transform-origin: bottom; }
.job-live-preview__scan { position: absolute; top: -30%; right: -15%; left: -15%; height: 28%; background: linear-gradient(180deg,transparent,rgba(56,189,248,.16),rgba(255,255,255,.34),transparent); filter: blur(4px); animation: renderScan 3.4s ease-in-out infinite; }
.job-live-preview__scene > i { position: absolute; width: 4px; height: 4px; background: #bae6fd; border-radius: 50%; box-shadow: 0 0 14px #38bdf8; animation: renderParticle 4.6s ease-in-out infinite; }
.job-live-preview__scene > i:nth-of-type(1) { top: 18%; left: 16%; }
.job-live-preview__scene > i:nth-of-type(2) { top: 26%; right: 19%; animation-delay: -.8s; }
.job-live-preview__scene > i:nth-of-type(3) { right: 31%; bottom: 20%; animation-delay: -1.7s; }
.job-live-preview__scene > i:nth-of-type(4) { bottom: 27%; left: 24%; animation-delay: -2.6s; }
.job-live-preview__scene > i:nth-of-type(5) { top: 54%; left: 9%; animation-delay: -3.1s; }
.job-live-preview__scene > i:nth-of-type(6) { top: 11%; left: 57%; animation-delay: -3.8s; }
.job-live-preview__top,.job-live-preview__footer { position: absolute; z-index: 2; right: 16px; left: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.job-live-preview__top { top: 15px; }
.job-live-preview__top > span { display: inline-flex; align-items: center; gap: 8px; font-size: var(--font-xs); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.job-live-preview__top > span i { width: 7px; height: 7px; background: #38bdf8; border-radius: 50%; box-shadow: 0 0 0 5px rgba(56,189,248,.13),0 0 14px #38bdf8; animation: livePulse 1.6s ease-in-out infinite; }
.job-live-preview__top > strong { font-size: var(--font-sm); font-variant-numeric: tabular-nums; }
.job-live-preview__center { position: relative; z-index: 2; display: grid; max-width: 480px; padding: 28px; place-items: center; text-align: center; }
.job-live-preview__center > strong { margin-top: 18px; font-size: clamp(16px,2vw,22px); line-height: 1.4; text-wrap: balance; }
.job-live-preview__center > small { margin-top: 7px; color: rgba(226,232,240,.7); font-size: var(--font-xs); }
.job-live-preview__orb { position: relative; display: grid; width: 78px; height: 78px; place-items: center; border: 1px solid rgba(147,197,253,.32); background: radial-gradient(circle at 35% 25%,#60a5fa,#2563eb 48%,#312e81); border-radius: 25px; box-shadow: 0 0 50px rgba(37,99,235,.38),inset 0 1px rgba(255,255,255,.35); transform: rotate(45deg); }
.job-live-preview__orb b { font-size: 15px; transform: rotate(-45deg); }
.job-live-preview__orb i { position: absolute; inset: -9px; border: 1px solid rgba(96,165,250,.24); border-radius: 31px; animation: renderOrbit 3.2s linear infinite; }
.job-live-preview__orb i:nth-child(2) { inset: -18px; border-style: dashed; animation-direction: reverse; animation-duration: 5.2s; }
.job-live-preview__footer { right: 0; bottom: 0; left: 0; display: grid; padding: 46px 18px 17px; justify-content: stretch; gap: 10px; background: linear-gradient(180deg,transparent,rgba(2,6,23,.86) 48%,rgba(2,6,23,.96)); }
.job-live-preview__footer > strong { display: inline-flex; align-items: center; justify-self: start; gap: 8px; font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.job-live-preview__footer > strong i { width: 7px; height: 7px; background: #38bdf8; border-radius: 50%; box-shadow: 0 0 0 5px rgba(56,189,248,.13),0 0 14px #38bdf8; animation: livePulse 1.6s ease-in-out infinite; }
.job-live-preview__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.job-live-preview__meta span { min-width: 0; padding: 6px 9px; overflow: hidden; color: rgba(241,245,249,.8); border: 1px solid rgba(255,255,255,.13); background: rgba(15,23,42,.38); border-radius: 99px; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; backdrop-filter: blur(10px); }
.status-badge { display: inline-flex; min-height: 28px; padding: 5px 9px; align-items: center; color: #475569; background: #f1f5f9; border-radius: 99px; font-size: var(--font-xs); font-weight: 700; white-space: nowrap; }
.status-badge--completed,.status-badge--ready { color: #047857; background: #d1fae5; }
.status-badge--failed,.status-badge--expired { color: #b91c1c; background: #fee2e2; }
.status-badge--processing,.status-badge--submitting,.status-badge--submitted,.status-badge--post_processing,.status-badge--queued { color: #1d4ed8; background: #dbeafe; }
.status-badge--review_required { color: #a16207; background: #fef3c7; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; background: var(--border); border: 1px solid var(--border); border-radius: 12px; }
.detail-grid > div { padding: 13px; background: #fff; }
.detail-grid__wide { grid-column: 1/-1; }
.detail-grid dt { margin-bottom: 5px; color: var(--ink-500); font-size: var(--font-xs); }
.detail-grid dd { margin: 0; font-size: var(--font-sm); line-height: 1.6; }
.event-timeline { display: grid; margin: 0; padding: 0; gap: 15px; list-style: none; }
.event-timeline li { display: grid; grid-template-columns: 12px 1fr; gap: 10px; }
.event-timeline i { width: 10px; height: 10px; margin-top: 4px; background: var(--primary); border: 3px solid #dbeafe; border-radius: 50%; box-sizing: content-box; }
.event-timeline strong,.event-timeline small { display: block; }
.event-timeline strong { font-size: var(--font-xs); line-height: 1.5; }
.event-timeline small { margin-top: 3px; color: var(--ink-500); font-size: 9px; }
.resource-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.resource-actions form { margin: 0; }
.job-result { margin-top: 18px; }
.job-result video,.video-player video { display: block; width: 100%; max-height: 62vh; background: #0f172a; border-radius: 13px; }
.job-result > div { display: flex; margin-top: 12px; gap: 10px; }
.job-result > .video-player { display: grid; margin-top: 0; }
.timeline-panel { max-height: min(680px,calc(100vh - 118px)); overflow-y: auto; }
.video-detail-page { max-width: 1320px; margin: 0 auto; }
.video-detail-heading { align-items: flex-start; }
.video-detail-heading > div { min-width: 0; }
.video-detail-heading h2 { max-width: 900px; overflow-wrap: anywhere; }
.video-detail-meta { display: flex; flex-wrap: wrap; gap: 7px 14px; color: var(--ink-500); }
.video-detail-meta span { display: inline-flex; align-items: center; gap: 5px; font-size: var(--font-xs); white-space: nowrap; }
.video-detail-meta svg { width: 14px; color: var(--primary); }
.video-detail-layout { grid-template-columns: minmax(0,1.7fr) minmax(330px,.7fr); }
.video-player-panel { overflow: hidden; }
.video-player { display: grid; width: 100%; aspect-ratio: 16/9; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 15%,#263b62,#0b1220 58%,#050912); border-radius: 14px; }
.video-player--portrait { width: min(100%,430px); margin-inline: auto; aspect-ratio: 9/16; }
.video-player--square { width: min(100%,680px); margin-inline: auto; aspect-ratio: 1; }
.video-player video { width: 100%; height: 100%; max-height: none; object-fit: contain; border-radius: 0; }
.video-player-actions { display: flex; margin-top: 14px; flex-wrap: wrap; gap: 9px; }
.video-player-actions .button svg,.video-management-panel .button svg { width: 17px; height: 17px; flex: 0 0 17px; }
.video-management-panel { position: sticky; top: 96px; }
.video-facts { display: grid; margin: 0 0 18px; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--border); background: var(--border); border-radius: 12px; gap: 1px; }
.video-facts > div { min-width: 0; padding: 11px 12px; background: #f8fafc; }
.video-facts__wide { grid-column: 1/-1; }
.video-facts dt { color: var(--ink-500); font-size: var(--font-xs); }
.video-facts dd { margin: 3px 0 0; overflow: hidden; color: var(--ink); font-size: var(--font-sm); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.video-edit-form { padding-top: 1px; }
.video-edit-form .project-field { display: grid; gap: 6px; }
.video-edit-form .project-field > label { color: var(--ink-700); font-size: var(--font-xs); font-weight: 650; }
.video-edit-form .smart-select__trigger { min-height: 44px; }
.video-management-action { width: 100%; }
.video-lifecycle { display: grid; margin-top: 19px; padding: 14px; gap: 12px; border: 1px solid #e2e8f0; background: #f8fafc; border-radius: 12px; }
.video-lifecycle--restore { border-color: #bfdbfe; background: #eff6ff; }
.video-lifecycle--danger { border-color: #fecaca; background: #fff7f7; }
.video-lifecycle--danger strong { color: #991b1b; }
.video-lifecycle > div { display: grid; gap: 3px; }
.video-lifecycle strong { font-size: var(--font-sm); }
.video-lifecycle small { color: var(--ink-500); font-size: var(--font-xs); line-height: 1.55; }
.video-lifecycle form,.video-lifecycle .button { width: 100%; }
.resource-table-wrap { padding: 0; overflow-x: auto; }
.resource-table { width: 100%; border-collapse: collapse; }
.resource-table th,.resource-table td { padding: 14px 16px; border-bottom: 1px solid var(--border); text-align: left; font-size: var(--font-xs); vertical-align: middle; }
.resource-table th { color: var(--ink-500); background: #fafafa; font-weight: 600; white-space: nowrap; }
.resource-table td strong,.resource-table td small { display: block; }
.resource-table td strong { margin-bottom: 4px; font-size: var(--font-sm); }
.resource-table td small { max-width: 420px; color: var(--ink-500); }
.table-link { color: var(--primary); font-weight: 700; text-decoration: none; white-space: nowrap; }
.resource-empty { padding: 44px 20px; text-align: center; }
.resource-empty h3 { margin: 0 0 7px; }
.resource-empty p { margin: 0 auto 15px; max-width: 520px; color: var(--ink-500); font-size: var(--font-sm); }
.resource-empty--grid { grid-column: 1/-1; background: #fff; border: 1px dashed var(--border); border-radius: 15px; }
.library-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.library-card { min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: 15px; box-shadow: var(--shadow-sm); }
.library-card__media { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; background: #0f172a; }
.library-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.library-card__media:hover img { transform: scale(1.03); }
.library-card__media span { position: absolute; inset: 50% auto auto 50%; display: grid; width: 42px; height: 42px; place-items: center; color: #fff; background: rgba(15,23,42,.6); border-radius: 50%; transform: translate(-50%,-50%); }
.library-card > div { padding: 13px; }
.library-card h3 { margin: 0 0 5px; overflow: hidden; font-size: var(--font-sm); text-overflow: ellipsis; white-space: nowrap; }
.library-card h3 a { color: inherit; text-decoration: none; }
.library-card p { margin: 0 0 10px; color: var(--ink-500); font-size: var(--font-xs); }
.library-card > div > div { display: flex; gap: 13px; }
.library-card > div > div a { color: var(--primary); font-size: var(--font-xs); font-weight: 700; text-decoration: none; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 15px; color: var(--ink-500); font-size: var(--font-xs); }
.pagination a { color: var(--primary); font-weight: 700; text-decoration: none; }
.stack-form { display: grid; gap: 14px; }
.stack-form label { display: grid; gap: 6px; color: var(--ink-500); font-size: var(--font-xs); font-weight: 600; }
.resource-panel hr { margin: 20px 0; border: 0; border-top: 1px solid var(--border); }
.credit-summary-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.credit-summary-grid article { padding: 18px; background: #fff; border: 1px solid var(--border); border-radius: 15px; }
.credit-summary-grid span,.credit-summary-grid small { display: block; color: var(--ink-500); font-size: var(--font-xs); }
.credit-summary-grid strong { display: block; margin: 6px 0 3px; font-size: 26px; }

@media (max-width: 900px) {
    .resource-layout { grid-template-columns: 1fr; }
    .library-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .video-detail-layout { grid-template-columns: 1fr; }
    .video-management-panel { position: static; }
    .timeline-panel { max-height: none; overflow: visible; }
}
@media (max-width: 620px) {
    .resource-heading { display: grid; align-items: start; }
    .resource-filters { align-items: stretch; flex-direction: column; }
    .library-grid,.credit-summary-grid { grid-template-columns: 1fr; }
    .detail-grid { grid-template-columns: 1fr; }
    .detail-grid__wide { grid-column: auto; }
    .resource-panel { padding: 15px; }
    .resource-table th:nth-child(3),.resource-table td:nth-child(3) { display: none; }
    .video-detail-heading .status-badge { justify-self: start; }
    .video-detail-meta { gap: 7px 11px; }
    .video-player-panel { padding: 10px; }
    .video-player-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .video-player-actions .button { width: 100%; }
    .video-player-actions .button:last-child:nth-child(odd) { grid-column: 1/-1; }
    .video-facts { grid-template-columns: 1fr 1fr; }
    .job-result > div:last-child,.job-detail-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .job-result .button,.job-detail-actions .button,.job-detail-actions form { width: 100%; }
}
@media (max-width: 420px) {
    .video-player-actions { grid-template-columns: 1fr; }
    .video-player-actions .button:last-child:nth-child(odd) { grid-column: auto; }
    .video-facts { grid-template-columns: 1fr; }
    .video-facts__wide { grid-column: auto; }
    .job-result > div:last-child,.job-detail-actions { grid-template-columns: 1fr; }
}
.credit-pill > svg { width: 17px; color: var(--primary); }
.credit-pill strong { color: var(--ink); }
.credit-pill__add { display: grid; width: 24px; height: 24px; margin-left: 3px; place-items: center; color: #fff; background: var(--primary); border-radius: 8px; font-size: 16px; }
.notification-button { position: relative; }
.notification-button span { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border: 2px solid #fff; background: #ec4c62; border-radius: 50%; box-sizing: content-box; }
.topbar-avatar { width: 40px; height: 40px; border: 0; border-radius: 12px; cursor: pointer; font-size: 11px; }
.topbar-login { color: var(--ink-700); font-size: 10px; font-weight: 600; }
.topbar-register { min-height: 36px; padding: 0 14px; font-size: 9px; }
.page-content { width: min(100%, 1480px); margin: 0 auto; padding: 30px 32px 48px; }

.button { display: inline-flex; min-height: 42px; padding: 0 17px; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 11px; font-size: 12px; font-weight: 600; cursor: pointer; transition: transform .18s, box-shadow .18s, background .18s; }
.button:hover { transform: translateY(-1px); }
.button svg { width: 18px; height: 18px; }
.button--primary { color: #fff; background: var(--primary-gradient); box-shadow: 0 8px 22px rgba(37,99,235,.22); }
.button--primary:hover { box-shadow: 0 10px 26px rgba(37,99,235,.3); }
.button--secondary { color: var(--ink-700); border-color: var(--border); background: #fff; }
.button--soft { color: var(--primary-700); background: var(--primary-50); }
.button--danger { color: #fff; border-color: #dc2626; background: linear-gradient(135deg,#ef4444,#dc2626); box-shadow: 0 8px 20px rgba(220,38,38,.16); }.button--danger:hover { box-shadow: 0 10px 24px rgba(220,38,38,.24); }
.button--large { min-height: 48px; padding: 0 20px; font-size: 13px; }
.button:disabled { cursor: wait; opacity: .82; transform: none; }
.button__spinner { width: 16px; height: 16px; flex: 0 0 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; opacity: .82; }
.button__shortcut { display: grid; width: 22px; height: 22px; margin-left: 8px; place-items: center; color: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.1); border-radius: 6px; font-size: 9px; }
.section-kicker { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-500); font-size: 10px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; }
.section-kicker > span { width: 6px; height: 6px; background: #51b884; border-radius: 50%; box-shadow: 0 0 0 4px #e8f7ef; }

.dashboard-hero { display: flex; margin: 4px 0 24px; align-items: flex-end; justify-content: space-between; }
.dashboard-hero h2 { margin: 6px 0 6px; font-size: clamp(22px,2.2vw,30px); line-height: 1.25; letter-spacing: -.8px; }
.dashboard-hero p { margin: 0; color: var(--ink-500); font-size: 13px; }
.active-job { position: relative; display: flex; min-height: 118px; margin-bottom: 20px; padding: 20px; align-items: center; gap: 18px; overflow: hidden; border: 1px solid var(--primary-100); background: linear-gradient(112deg,#fff 0%,#f8fbff 62%,#eff6ff 100%); border-radius: 16px; box-shadow: var(--shadow); }
.active-job::after { position: absolute; right: -35px; top: -85px; width: 220px; height: 220px; content: ""; background: radial-gradient(circle,rgba(37,99,235,.12),transparent 64%); pointer-events: none; }
.active-job__visual { position: relative; display: grid; flex: 0 0 64px; height: 64px; place-items: center; color: #fff; background: var(--primary-gradient); border-radius: 16px; box-shadow: 0 10px 24px rgba(37,99,235,.22); }
.active-job__visual svg { width: 32px; }
.active-job__visual svg path:first-child { opacity: .2; fill: #fff; stroke: none; }
.active-job__visual svg path:last-child { fill: #fff; stroke: none; }
.active-job__glow { position: absolute; inset: -7px; border: 1px solid rgba(37,99,235,.2); border-radius: 21px; animation: pulseRing 2.2s infinite; }
.active-job__body { min-width: 0; flex: 1; }
.active-job__top { display: flex; align-items: flex-end; justify-content: space-between; }
.active-job h3 { margin: 5px 0 10px; overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--primary-700); font-size: 9px; font-weight: 650; text-transform: uppercase; }
.status-badge i { width: 6px; height: 6px; background: var(--primary); border-radius: 50%; box-shadow: 0 0 0 4px var(--primary-100); }
.active-job__percent { margin-bottom: 8px; color: var(--primary); font-size: 15px; }
.progress-track { height: 6px; overflow: hidden; background: #e2e8f0; border-radius: 99px; }
.progress-track span { display: block; height: 100%; background: var(--primary-gradient); border-radius: inherit; transition: width .6s ease; }
.active-job__meta { display: flex; margin-top: 7px; justify-content: space-between; color: var(--ink-500); font-size: 9px; }
.active-job__private { position: relative; z-index: 1; display: inline-flex; padding: 7px 9px; align-items: center; gap: 5px; color: #64748b; background: rgba(255,255,255,.7); border-radius: 8px; font-size: 8px; white-space: nowrap; }
.active-job__private svg { width: 13px; }
.dashboard-grid { display: grid; gap: 20px; }
.dashboard-grid--stats { grid-template-columns: 1.12fr 1fr 1fr; margin-bottom: 20px; }
.stat-card { position: relative; display: flex; min-height: 104px; padding: 18px; align-items: center; gap: 14px; border: 1px solid var(--border); background: #fff; border-radius: 15px; box-shadow: 0 1px 3px rgba(23,21,43,.03); }
.stat-card--credit { border-color: #bfdbfe; background: linear-gradient(135deg,#fff,#f8fbff); }
.stat-card__icon { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; color: var(--primary); background: #dbeafe; border-radius: 12px; }
.stat-card__icon svg { width: 21px; }
.stat-card__icon--blue { color: var(--primary); background: var(--primary-50); }
.stat-card__icon--green { color: #14845a; background: #e8f8f0; }
.stat-card > div:nth-child(2) { display: grid; }
.stat-card__label { color: var(--ink-500); font-size: 10px; }
.stat-card strong { font-size: 21px; line-height: 1.35; letter-spacing: -.4px; }
.stat-card small { color: #9995a5; font-size: 9px; }
.stat-card small em { color: var(--success); font-style: normal; font-weight: 600; }
.mini-action { display: grid; width: 29px; height: 29px; margin-left: auto; place-items: center; border: 0; color: var(--primary); background: #dbeafe; border-radius: 9px; cursor: pointer; }
.dashboard-grid--main { grid-template-columns: minmax(0,1.75fr) minmax(290px,.75fr); align-items: start; }
.panel { border: 1px solid var(--border); background: #fff; border-radius: 16px; box-shadow: 0 1px 3px rgba(23,21,43,.025); }
.panel__header { display: flex; padding: 20px 22px 17px; align-items: flex-end; justify-content: space-between; }
.panel__header h2 { margin: 2px 0 0; font-size: 16px; letter-spacing: -.3px; }
.text-link { display: inline-flex; padding: 5px; align-items: center; gap: 3px; border: 0; color: var(--primary); background: none; cursor: pointer; font-size: 10px; font-weight: 600; }
.text-link svg { width: 14px; }
.video-grid { display: grid; padding: 0 20px 20px; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.video-card { min-width: 0; overflow: hidden; border: 1px solid #eeecf2; border-radius: 13px; transition: transform .2s, box-shadow .2s; }
.video-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(23,21,43,.09); }
.video-card__visual { position: relative; display: block; width: 100%; aspect-ratio: 16/10; padding: 0; overflow: hidden; border: 0; }
.video-card__visual--sunset { background: linear-gradient(160deg,#21183d,#9c476a 45%,#f1a25f); }
.video-card__visual--serum { background: radial-gradient(circle at 50% 50%,#fdf2e8 0,#e7cbb8 58%,#ad7d74); }
.video-card__visual--interior { background: linear-gradient(135deg,#d1c5b6 0 48%,#7d6e63 49% 52%,#29262e 53%); }
.video-card__thumbnail { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-card__placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.7); }
.video-card__placeholder svg { width: 36px; }
.video-card__shine { position: absolute; inset: 0; background: linear-gradient(120deg,transparent 20%,rgba(255,255,255,.13),transparent 70%); }
.video-card__play { position: absolute; inset: 50% auto auto 50%; display: grid; width: 34px; height: 34px; place-items: center; color: #fff; background: rgba(20,17,35,.45); border: 1px solid rgba(255,255,255,.5); border-radius: 50%; backdrop-filter: blur(5px); transform: translate(-50%,-50%); opacity: 0; transition: opacity .2s, transform .2s; }
.video-card__visual:hover .video-card__play { opacity: 1; transform: translate(-50%,-50%) scale(1.05); }
.video-card__play svg { width: 17px; fill: #fff; stroke: none; }
.video-card__duration { position: absolute; right: 7px; bottom: 7px; padding: 2px 5px; color: #fff; background: rgba(20,17,35,.65); border-radius: 5px; font-size: 8px; }
.scene { position: absolute; }
.scene--sun { inset: 0; }
.scene--sun i { position: absolute; top: 22%; left: 50%; width: 30px; height: 30px; background: #ffd79b; border-radius: 50%; box-shadow: 0 0 28px #ffc97d; }
.scene--sun b { position: absolute; right: -5%; bottom: -20%; width: 82%; height: 55%; background: #241c36; border-radius: 60% 0 0; transform: rotate(-7deg); }
.scene--bottle { inset: 0; }
.scene--bottle i { position: absolute; left: 44%; bottom: 16%; width: 22px; height: 55px; background: linear-gradient(90deg,#b4754f,#edc69e,#a46245); border-radius: 5px 5px 8px 8px; box-shadow: 12px 7px 24px rgba(76,39,29,.25); }
.scene--bottle b { position: absolute; left: calc(44% + 5px); bottom: calc(16% + 55px); width: 12px; height: 11px; background: #4f3936; border-radius: 2px; }
.scene--room i { position: absolute; left: 13%; bottom: 13%; width: 43%; height: 28%; border-radius: 4px 4px 0 0; background: #e8ddd0; box-shadow: 0 12px 20px rgba(30,25,30,.24); }
.scene--room b { position: absolute; right: 13%; bottom: 13%; width: 20%; height: 56%; border-left: 4px solid #b7925c; border-right: 4px solid #b7925c; }
.video-card__info { display: flex; padding: 11px 11px 12px; align-items: center; justify-content: space-between; gap: 5px; }
.video-card__info div { min-width: 0; }
.video-card__info h3 { margin: 0 0 3px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.video-card__info p { margin: 0; color: var(--ink-500); font-size: 8px; }
.dashboard-empty { display: grid; min-height: 242px; padding: 18px 24px 28px; place-items: center; align-content: center; text-align: center; }
.dashboard-empty__icon { position: relative; display: grid; width: 62px; height: 62px; margin-bottom: 13px; place-items: center; color: var(--primary); background: var(--primary-gradient-soft); border: 1px solid var(--primary-100); border-radius: 18px; }
.dashboard-empty__icon svg { width: 30px; }
.dashboard-empty__icon i { position: absolute; top: -7px; right: -6px; display: grid; width: 23px; height: 23px; place-items: center; color: #fff; background: var(--primary-gradient); border: 3px solid #fff; border-radius: 50%; font-size: 9px; font-style: normal; }
.dashboard-empty h3 { margin: 0 0 6px; font-size: 13px; }
.dashboard-empty p { max-width: 350px; margin: 0 0 15px; color: var(--ink-500); font-size: 10px; line-height: 1.6; }
.quick-panel { padding-bottom: 16px; }
.quick-list { display: grid; gap: 4px; padding: 0 12px; }
.quick-item { display: flex; padding: 10px; align-items: center; gap: 10px; border-radius: 12px; transition: background .18s, transform .18s; }
.quick-item:hover { background: #f8fafc; transform: translateX(2px); }
.quick-item__icon { display: grid; width: 37px; height: 37px; flex: 0 0 37px; place-items: center; border-radius: 11px; font-size: 15px; }
.quick-item__icon--pink { background: #fff0f5; }
.quick-item__icon--violet { color: var(--primary); background: #dbeafe; }
.quick-item__icon--blue { color: var(--primary); background: var(--primary-50); }
.quick-item > span:nth-child(2) { display: grid; flex: 1; }
.quick-item strong { font-size: 10px; }
.quick-item small { color: var(--ink-500); font-size: 8px; }
.quick-item > svg { width: 15px; color: #b0acba; }
.tip-card { display: flex; margin: 14px 20px 0; padding: 13px; gap: 10px; border: 1px solid #dbeafe; background: #f0f9ff; border-radius: 12px; }
.tip-card__icon { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; background: #fff; border-radius: 8px; font-size: 13px; }
.tip-card strong { font-size: 9px; }
.tip-card p { margin: 2px 0 0; color: var(--ink-500); font-size: 8px; line-height: 1.55; }

.create-page { max-width: 1320px; margin: 0 auto; }
.create-heading { display: flex; margin: -4px 0 20px; align-items: flex-end; justify-content: space-between; }
.back-link { display: inline-flex; min-height: 44px; margin-bottom: 4px; padding-block: 8px; align-items: center; gap: 3px; color: var(--ink-500); font-size: 10px; font-weight: 500; }
.back-link:hover { color: var(--primary); }
.back-link svg { width: 15px; }
.create-heading h2 { margin: 0 0 6px; font-size: clamp(24px,2.5vw,32px); line-height: 1.25; letter-spacing: -1px; }
.create-heading h2 span { color: var(--primary); }
.create-heading p { margin: 0; color: var(--ink-500); font-size: 12px; }
.draft-state { display: inline-flex; margin-bottom: 3px; align-items: center; gap: 5px; color: #7f7a8d; font-size: 9px; }
.draft-state svg { width: 14px; color: var(--success); }
.workflow-steps { display: flex; max-width: 760px; margin-bottom: 22px; align-items: center; }
.workflow-step { display: flex; align-items: center; gap: 7px; color: #a29eac; }
.workflow-step span { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid #ddd9e5; background: #fff; border-radius: 50%; font-size: 9px; font-weight: 700; }
.workflow-step strong { font-size: 9px; white-space: nowrap; }
.workflow-step.is-active { color: var(--primary); }
.workflow-step.is-active span { color: #fff; border-color: var(--primary); background: var(--primary); box-shadow: 0 0 0 5px #dbeafe; }
.workflow-step.is-done { color: var(--success); }
.workflow-step.is-done span { color: #fff; border-color: var(--success); background: var(--success); }
.workflow-steps > i { width: clamp(28px,5vw,76px); height: 1px; margin: 0 10px; background: #dedbe5; }
.create-page,.create-layout,.create-form { min-width: 0; }
.create-layout { display: grid; grid-template-columns: minmax(0,2fr) minmax(320px,1fr); gap: 24px; align-items: start; }
.create-form { position: relative; display: grid; gap: 18px; }
.create-form:has(.smart-select.is-open) { z-index: 75; }
.form-section:has(.smart-select.is-open) { position: relative; z-index: 80; }
.create-form-alert { padding: 12px 14px; color: #991b1b; border: 1px solid #fecaca; background: #fef2f2; border-radius: 12px; font-size: 9px; }
.create-form-alert p { margin: 0; }
.form-section { display: flex; padding: 23px; gap: 18px; border: 1px solid var(--border); background: #fff; border-radius: 17px; box-shadow: 0 1px 3px rgba(23,21,43,.025); }
.form-section__number { display: grid; width: 31px; height: 31px; flex: 0 0 31px; place-items: center; color: var(--primary); background: var(--primary-50); border-radius: 9px; font-size: 9px; font-weight: 700; }
.form-section__content { min-width: 0; flex: 1; }
.form-section__heading { display: flex; margin-bottom: 17px; align-items: flex-start; justify-content: space-between; }
.form-section__heading h3 { margin: 0 0 3px; font-size: 15px; letter-spacing: -.2px; }
.form-section__heading p { margin: 0; color: var(--ink-500); font-size: 9px; }
.required-note { color: #a19dab; font-size: 8px; }
.prompt-box { overflow: hidden; border: 1px solid #dbe3ec; background: #fbfdff; border-radius: 13px; transition: border .18s, box-shadow .18s; }
.prompt-box:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.prompt-box textarea { display: block; width: 100%; min-height: 126px; padding: 15px; resize: vertical; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 11px; line-height: 1.65; }
.prompt-box textarea::placeholder { color: #aaa6b5; }
.prompt-box__footer { display: flex; padding: 8px 11px; align-items: center; justify-content: space-between; border-top: 1px solid #eeebf2; color: #a29eac; font-size: 8px; }
.prompt-magic { display: inline-flex; min-height: 44px; padding: 8px 9px; align-items: center; gap: 5px; border: 0; color: var(--primary); background: #e0f2fe; border-radius: 7px; cursor: pointer; font-size: 8px; font-weight: 600; }
.prompt-magic svg { width: 13px; }
.field-error { margin: 6px 0 0; color: var(--danger); font-size: 9px; }
.suggestion-row { display: flex; margin-top: 11px; align-items: center; flex-wrap: wrap; gap: 6px; }
.suggestion-row > span { color: var(--ink-500); font-size: 8px; }
.suggestion-row button { min-height: 44px; padding: 8px 11px; border: 1px solid #e8e5ed; color: #625e6e; background: #fff; border-radius: 99px; cursor: pointer; font-size: 8px; }
.suggestion-row button:hover { border-color: #93c5fd; color: var(--primary); background: #f0f9ff; }
.style-options { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.style-option { position: relative; padding: 8px 8px 11px; border: 1px solid #e7e4eb; border-radius: 12px; cursor: pointer; transition: border .18s, background .18s, box-shadow .18s; }
.style-option:hover { border-color: #93c5fd; }
.style-option.is-selected { border-color: var(--primary); background: #f8fbff; box-shadow: 0 0 0 2px rgba(37,99,235,.08); }
.style-option input { position: absolute; opacity: 0; pointer-events: none; }
.style-option__visual { position: relative; display: block; height: 67px; margin-bottom: 9px; overflow: hidden; border-radius: 8px; }
.style-option__visual--realistic { background: linear-gradient(180deg,#9ed7f4 0 45%,#dbeab7 46% 62%,#70995a 63%); }
.style-option__visual--realistic::before { position: absolute; top: 13px; right: 18px; width: 20px; height: 20px; content: ""; background: #fff5bc; border-radius: 50%; box-shadow: 0 0 18px rgba(255,245,188,.9); }
.style-option__visual--realistic::after { position: absolute; right: -8%; bottom: -36%; width: 75%; height: 74%; content: ""; background: #416840; border-radius: 55% 0 0; transform: rotate(-6deg); }
.style-option__visual--realistic i { position: absolute; z-index: 1; bottom: 0; left: 23%; width: 3px; height: 25px; background: #39523a; border-radius: 99px 99px 0 0; box-shadow: -7px 7px 0 -1px #39523a,7px 7px 0 -1px #39523a; }
.style-option__visual--cinema { background: linear-gradient(150deg,#171525,#5b3d5e 52%,#dd815e); }
.style-option__visual--cinema::before { position: absolute; top: 21%; left: 24%; width: 26px; height: 26px; content: ""; background: #ffca91; border-radius: 50%; box-shadow: 0 0 22px #f59d68; }
.style-option__visual--cinema i { position: absolute; right: -5%; bottom: -28%; width: 80%; height: 65%; background: #211b2b; border-radius: 50% 0 0; }
.style-option__visual--product { background: radial-gradient(circle,#f8efe7,#d6b7ad); }
.style-option__visual--product::before { position: absolute; left: 44%; bottom: 12%; width: 17px; height: 40px; content: ""; background: linear-gradient(90deg,#935c4e,#dfae8f,#7d4d45); border-radius: 4px 4px 7px 7px; }
.style-option__visual--social { background: linear-gradient(135deg,#1d4ed8,#2563eb 58%,#60a5fa); }
.style-option__visual--social::before { position: absolute; inset: 20% 31%; content: ""; border: 2px solid rgba(255,255,255,.9); border-radius: 10px; transform: rotate(-8deg); }
.style-option__visual--social i { position: absolute; top: 41%; left: 46%; width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; }
.style-option > span:nth-of-type(2) { display: grid; }
.style-option strong { font-size: 9px; }
.style-option small { overflow: hidden; color: var(--ink-500); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.style-option__check { position: absolute; top: 12px; right: 12px; display: none; width: 17px; height: 17px; padding: 3px; color: #fff; background: var(--primary); border-radius: 50%; }
.style-option.is-selected .style-option__check { display: block; }
.config-grid { display: grid; margin-top: 19px; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 16px; }
.control-group > label { display: block; margin-bottom: 7px; color: var(--ink-700); font-size: 9px; font-weight: 600; }
.control-label { display: block; margin-bottom: 7px; color: var(--ink-700); font-size: 9px; font-weight: 600; }
.segment-control { display: grid; padding: 3px; grid-template-columns: repeat(3,1fr); border: 1px solid #e3e0e8; background: #f7f6f9; border-radius: 10px; }
.segment-control button { display: flex; min-height: 43px; padding: 5px; align-items: center; justify-content: center; gap: 7px; border: 0; color: var(--ink-500); background: transparent; border-radius: 8px; cursor: pointer; }
.segment-control button.is-selected { color: var(--ink); background: #fff; box-shadow: 0 2px 8px rgba(23,21,43,.08); }
.segment-control button span { display: grid; text-align: left; font-size: 8px; font-weight: 600; }
.segment-control button small { color: var(--ink-500); font-size: 6px; font-weight: 400; }
.ratio { display: block; border: 1.5px solid currentColor; border-radius: 2px; }
.ratio--wide { width: 16px; height: 10px; }
.ratio--tall { width: 8px; height: 14px; }
.ratio--square { width: 12px; height: 12px; }
.select-wrap { position: relative; }
.select-wrap select { width: 100%; height: 51px; padding: 0 32px 0 12px; appearance: none; border: 1px solid #e3e0e8; outline: 0; color: var(--ink-700); background: #fff; border-radius: 10px; cursor: pointer; font-size: 9px; }
.select-wrap select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.select-wrap svg { position: absolute; top: 18px; right: 10px; width: 15px; color: #928e9e; pointer-events: none; }
.smart-select { position: relative; width: 100%; min-width: 0; }
.smart-select.is-open { z-index: 500; }
.smart-select > select.smart-select__native { position: absolute !important; inset: 0 auto auto 0 !important; width: 1px !important; min-width: 1px !important; height: 1px !important; min-height: 1px !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; }
.select-wrap.has-smart-select > svg { display: none; }
.smart-select__trigger { display: flex; width: 100%; min-width: 0; min-height: 44px; padding: 0 13px; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--border); outline: 0; color: var(--ink); background: linear-gradient(180deg,#fff 0%,#fbfdff 100%); border-radius: 11px; box-shadow: 0 1px 2px rgba(15,23,42,.025); cursor: pointer; font-size: var(--font-base); text-align: left; transition: border-color .18s,box-shadow .18s,background .18s; }
.smart-select__trigger:hover { border-color: #cbd5e1; background: #fff; }
.smart-select__trigger:focus-visible,
.smart-select.is-open .smart-select__trigger { border-color: #60a5fa; outline: 0; box-shadow: 0 0 0 4px rgba(37,99,235,.1),0 5px 16px rgba(37,99,235,.07); }
.smart-select__trigger:disabled { color: #94a3b8; background: #f8fafc; cursor: not-allowed; }
.smart-select__trigger[aria-invalid="true"] { border-color: #f87171; box-shadow: 0 0 0 4px rgba(239,68,68,.09); }
.smart-select__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smart-select__trigger.is-placeholder .smart-select__value { color: var(--ink-500); }
.smart-select__caret { width: 8px; height: 8px; flex: 0 0 8px; border-right: 1.8px solid #64748b; border-bottom: 1.8px solid #64748b; transform: translateY(-2px) rotate(45deg); transition: transform .18s; }
.smart-select.is-open .smart-select__caret { transform: translateY(2px) rotate(225deg); }
.select-wrap .smart-select__trigger { min-height: 51px; }
.smart-select__list { position: absolute; z-index: 1000; top: calc(100% + 8px); left: 0; width: min(max(100%,220px),calc(100vw - 32px)); max-height: min(340px,52dvh); padding: 7px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: thin; touch-action: pan-y; border: 1px solid #dbe3ef; background: rgba(255,255,255,.985); border-radius: 13px; box-shadow: 0 20px 48px rgba(15,23,42,.16),0 3px 10px rgba(15,23,42,.07); backdrop-filter: blur(16px); -webkit-overflow-scrolling: touch; }
.smart-select__list::-webkit-scrollbar { width: 6px; }
.smart-select__list::-webkit-scrollbar-thumb { background: #cbd5e1; border: 2px solid #fff; border-radius: 99px; }
.smart-select.opens-upward .smart-select__list { top: auto; bottom: calc(100% + 8px); }
.smart-select__option { position: relative; display: flex; width: 100%; min-height: 40px; padding: 9px 36px 9px 10px; align-items: center; border: 0; outline: 0; color: #334155; background: transparent; border-radius: 9px; cursor: pointer; font-size: var(--font-sm); line-height: 1.4; text-align: left; transition: color .14s,background .14s; }
.smart-select__option:hover,
.smart-select__option:focus-visible { color: var(--ink); background: #f1f5f9; }
.smart-select__option.is-selected { color: #1d4ed8; background: #eff6ff; font-weight: 600; }
.smart-select__option.is-placeholder { color: var(--ink-500); }
.smart-select__option:disabled { color: #a8b1c0; background: #f8fafc; cursor: not-allowed; opacity: .7; }
.smart-select__option:disabled small { color: #a8b1c0; }
.smart-select__option > span { display: grid; min-width: 0; }
.smart-select__option small { color: #64748b; font-size: var(--font-xs); font-weight: 500; }
.smart-select__option strong { overflow: hidden; font-size: var(--font-sm); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.smart-select__option i { position: absolute; top: 50%; right: 13px; display: none; width: 13px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-65%) rotate(-45deg); }
.smart-select__option.is-selected i { display: block; }
.resource-filters .smart-select { min-width: 190px; }
.auth-control--select .smart-select__trigger { min-height: 46px; border: 0; background: transparent; box-shadow: none; }
.auth-control--select .smart-select__trigger:focus-visible,
.auth-control--select .smart-select.is-open .smart-select__trigger { border: 0; box-shadow: none; }
.routing-summary { display: flex; margin-top: 16px; padding: 12px; align-items: center; gap: 10px; border: 1px solid var(--primary-100); background: var(--primary-gradient-soft); border-radius: 12px; }
.routing-summary__icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; color: #fff; background: var(--primary-gradient); border-radius: 10px; }
.routing-summary__icon svg { width: 17px; }
.routing-summary > span:nth-child(2) { display: grid; min-width: 0; flex: 1; }
.routing-summary strong { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.routing-summary small { margin-top: 2px; color: var(--ink-500); font-size: 7px; }
.routing-summary em { padding: 4px 6px; color: #1d4ed8; background: #dbeafe; border-radius: 6px; font-size: 7px; font-style: normal; font-weight: 700; white-space: nowrap; }
.advanced-toggle { display: flex; width: 100%; min-height: 44px; margin-top: 17px; padding: 12px 2px 4px; align-items: center; justify-content: space-between; border: 0; border-top: 1px solid #eeecf2; color: var(--ink-700); background: none; cursor: pointer; font-size: 9px; font-weight: 600; }
.advanced-toggle > span { display: flex; align-items: center; gap: 6px; }
.advanced-toggle svg { width: 15px; }
.advanced-toggle__chevron { transition: transform .2s; }
.advanced-toggle[aria-expanded="true"] .advanced-toggle__chevron { transform: rotate(180deg); }
.advanced-options { display: grid; margin-top: 14px; grid-template-columns: 1fr 1fr; gap: 14px; }
.settings-persistence { display: flex; grid-column: 1/-1; min-height: 62px; padding: 11px 13px; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid #dbeafe; background: #f8fbff; border-radius: 12px; }
.settings-persistence > span { display: grid; min-width: 0; }
.settings-persistence strong { font-size: var(--font-sm); }
.settings-persistence small { margin-top: 2px; color: var(--ink-500); font-size: var(--font-xs); line-height: 1.5; }
.settings-persistence button { display: inline-flex; min-height: 36px; padding: 8px 11px; flex: 0 0 auto; align-items: center; gap: 7px; border: 1px solid #bfdbfe; color: #1d4ed8; background: #fff; border-radius: 9px; cursor: pointer; font-size: var(--font-sm); font-weight: 650; }
.settings-persistence button:hover { background: #eff6ff; }
.settings-persistence button svg { width: 15px; }
.control-help { display: block; margin-top: 6px; color: var(--ink-500); font-size: 7px; line-height: 1.5; }
.lip-sync-assurance { display: flex; grid-column: 1/-1; min-height: 58px; padding: 11px 13px; align-items: center; gap: 10px; border: 1px solid #bfdbfe; background: linear-gradient(135deg,#f8fbff,#eff6ff); border-radius: 12px; }
.lip-sync-assurance > span { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; color: #fff; background: #2563eb; border-radius: 9px; box-shadow: 0 6px 16px rgba(37,99,235,.2); }
.lip-sync-assurance svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.lip-sync-assurance div { display: grid; min-width: 0; }
.lip-sync-assurance strong { color: var(--ink-800); font-size: 9px; }
.lip-sync-assurance small { margin-top: 2px; color: var(--ink-500); font-size: 7px; line-height: 1.45; }
.ai-mode-fieldset { display: grid; grid-column: 1/-1; margin: 0; padding: 0; grid-template-columns: 1fr 1fr; gap: 9px; border: 0; }
.ai-mode-fieldset legend { margin-bottom: 7px; color: var(--ink-700); font-size: 9px; font-weight: 600; }
.ai-mode-option { position: relative; display: flex; min-height: 58px; padding: 11px 12px 11px 36px; align-items: center; border: 1px solid #e3e0e8; background: #fff; border-radius: 11px; cursor: pointer; }
.ai-mode-option input { position: absolute; left: 12px; width: 14px; height: 14px; accent-color: var(--primary); }
.ai-mode-option:has(input:checked) { border-color: #93c5fd; background: #f8fbff; box-shadow: 0 0 0 2px rgba(37,99,235,.06); }
.ai-mode-option:has(input:disabled) { cursor: not-allowed; opacity: .58; }
.ai-mode-option span { display: grid; }
.ai-mode-option strong { font-size: 9px; }
.ai-mode-option small { margin-top: 2px; color: var(--ink-500); font-size: 7px; }
.manual-ai-fields { display: grid; grid-column: 1/-1; padding: 13px; grid-template-columns: 1fr 1fr; align-items: end; gap: 13px; border: 1px solid #dbeafe; background: #f8fbff; border-radius: 12px; }
.fallback-option { display: flex; min-height: 51px; padding: 8px 10px; align-items: center; gap: 9px; border: 1px solid #e3e0e8; background: #fff; border-radius: 10px; cursor: pointer; }
.fallback-control > .fallback-option { display: flex; margin-bottom: 0; }
.fallback-option input { width: 15px; height: 15px; accent-color: var(--primary); }
.fallback-option span { display: grid; }
.fallback-option strong { font-size: 8px; }
.fallback-option small { color: var(--ink-500); font-size: 7px; line-height: 1.4; }
.preview-column { position: sticky; top: 98px; }
.preview-card { padding: 16px; border: 1px solid #dbe3ec; background: #fff; border-radius: 18px; box-shadow: 0 12px 35px rgba(15,23,42,.075); }
.preview-card__header { display: flex; margin-bottom: 12px; align-items: center; justify-content: space-between; color: var(--ink-500); font-size: 9px; }
.preview-card__header div { display: flex; align-items: center; gap: 6px; }
.preview-card__header strong { color: var(--ink); font-size: 10px; }
.live-dot { width: 6px; height: 6px; background: #ff566b; border-radius: 50%; box-shadow: 0 0 0 4px #ffecef; }
.preview-card__header > span { padding: 3px 6px; background: #f5f3f8; border-radius: 6px; font-size: 8px; }
.preview-stage { position: relative; isolation: isolate; display: grid; width: 100%; aspect-ratio: 16/9; place-items: center; overflow: hidden; color: #fff; background: linear-gradient(145deg,#07111f,#0f2342 60%,#082f49); border-radius: 13px; transition: aspect-ratio .25s; }
.preview-stage[data-ratio="9:16"] { max-width: 190px; margin-inline: auto; aspect-ratio: 9/16; }
.preview-stage[data-ratio="1:1"] { max-width: 310px; margin-inline: auto; aspect-ratio: 1; }
.preview-ambient { position: absolute; border-radius: 50%; filter: blur(30px); opacity: .35; }
.preview-ambient--one { top: -20%; left: -15%; width: 55%; height: 70%; background: var(--primary); }
.preview-ambient--two { right: -10%; bottom: -20%; width: 50%; height: 60%; background: #60a5fa; }
.preview-empty, .preview-processing { position: relative; z-index: 2; display: grid; padding: 20px; place-items: center; text-align: center; }
.preview-processing { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(circle at 50% 45%,rgba(37,99,235,.12),transparent 38%); }
.preview-stage.is-generating::before { position: absolute; z-index: 1; inset: 0; content: ""; opacity: .22; background-image: linear-gradient(rgba(147,197,253,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(147,197,253,.18) 1px,transparent 1px); background-size: 24px 24px; animation: renderGrid 8s linear infinite; }
.preview-stage.is-generating::after { position: absolute; z-index: 1; top: -35%; right: -10%; left: -10%; height: 30%; content: ""; background: linear-gradient(180deg,transparent,rgba(96,165,250,.18),rgba(255,255,255,.26),transparent); filter: blur(4px); animation: renderScan 3s ease-in-out infinite; }
.preview-stage.is-generating .preview-ambient { animation: renderDrift 4.8s ease-in-out infinite alternate; opacity: .52; }
.preview-render-field { position: absolute; z-index: 0; inset: 0; }
.preview-processing > .preview-rings,.preview-processing > strong,.preview-processing > small { position: relative; z-index: 2; }
.preview-render-field i { position: absolute; width: 4px; height: 4px; background: #bae6fd; border-radius: 50%; box-shadow: 0 0 12px #38bdf8; animation: renderParticle 4s ease-in-out infinite; }
.preview-render-field i:nth-child(1) { top: 18%; left: 19%; }
.preview-render-field i:nth-child(2) { top: 25%; right: 17%; animation-delay: -.7s; }
.preview-render-field i:nth-child(3) { right: 31%; bottom: 19%; animation-delay: -1.4s; }
.preview-render-field i:nth-child(4) { bottom: 25%; left: 24%; animation-delay: -2.1s; }
.preview-render-field i:nth-child(5) { top: 52%; left: 8%; animation-delay: -2.8s; }
.preview-render-field i:nth-child(6) { top: 10%; left: 55%; animation-delay: -3.5s; }
.preview-empty__icon { position: relative; display: grid; width: 56px; height: 56px; margin-bottom: 12px; place-items: center; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.07); border-radius: 16px; backdrop-filter: blur(5px); }
.preview-empty__icon svg { width: 29px; color: #93c5fd; }
.preview-empty__icon span { position: absolute; top: -7px; right: -7px; color: #bfdbfe; font-size: 14px; }
.preview-empty strong, .preview-processing strong { font-size: 10px; }
.preview-empty p { margin: 4px 0 0; color: rgba(255,255,255,.55); font-size: 8px; }
.preview-rings { position: relative; display: grid; width: 67px; height: 67px; margin-bottom: 14px; place-items: center; }
.preview-rings i { position: absolute; inset: 0; border: 1px solid rgba(147,197,253,.3); border-top-color: #60a5fa; border-radius: 50%; animation: spin 2.2s linear infinite; }
.preview-rings i:nth-child(2) { inset: 8px; border-top-color: transparent; border-right-color: #93c5fd; animation-direction: reverse; animation-duration: 1.6s; }
.preview-rings span { display: grid; width: 38px; height: 38px; place-items: center; background: var(--primary-gradient); border-radius: 50%; font-size: 9px; font-weight: 700; box-shadow: 0 0 25px rgba(37,99,235,.36); }
.preview-processing small { margin-top: 4px; color: rgba(255,255,255,.55); font-size: 8px; }
.preview-result { position: absolute; inset: 0; overflow: hidden; }
.result-scene { position: absolute; inset: 0; background: linear-gradient(180deg,#d99b70,#6b4265 45%,#17182c); }
.result-scene__sun { position: absolute; top: 18%; left: 25%; width: 42px; height: 42px; background: #ffd09d; border-radius: 50%; box-shadow: 0 0 45px #ffa86c; }
.result-scene__land { position: absolute; right: -10%; bottom: -15%; width: 85%; height: 65%; background: #161827; border-radius: 60% 0 0; transform: rotate(-7deg); }
.result-scene i { position: absolute; left: 47%; bottom: 15%; width: 5px; height: 38%; background: #0d0e18; border-radius: 50% 50% 0 0; box-shadow: -7px 5px 0 -1px #0d0e18, 7px 5px 0 -1px #0d0e18; }
.preview-result > button { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; width: 46px; height: 46px; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.65); background: rgba(18,16,30,.45); border-radius: 50%; backdrop-filter: blur(7px); transform: translate(-50%,-50%); cursor: pointer; }
.preview-result > button svg { width: 22px; fill: #fff; stroke: none; }
.preview-result > span { position: absolute; z-index: 2; right: 10px; bottom: 9px; padding: 3px 7px; background: rgba(16,14,27,.6); border-radius: 6px; font-size: 7px; }
.mock-notice { display: flex; margin-top: 12px; padding: 10px; align-items: center; gap: 9px; border: 1px solid #fde68a; background: #fffbeb; border-radius: 11px; }
.mock-notice > span { padding: 4px 6px; color: #92400e; background: #fef3c7; border-radius: 6px; font-size: 7px; font-weight: 800; letter-spacing: .05em; }
.mock-notice p { display: grid; margin: 0; }
.mock-notice strong { color: #78350f; font-size: 8px; }
.mock-notice small { margin-top: 1px; color: #a16207; font-size: 7px; }
.estimate-card { margin-top: 13px; padding: 12px; border: 1px solid #eeeaf5; background: #faf9fc; border-radius: 12px; }
.estimate-row { display: flex; min-height: 25px; align-items: center; justify-content: space-between; font-size: 9px; }
.estimate-row > span { display: flex; align-items: center; gap: 6px; color: var(--ink-500); }
.estimate-row svg { width: 14px; color: var(--primary); }
.estimate-row strong { font-size: 9px; }
.estimate-row--discount { color: #047857; }
.estimate-row--discount > span, .estimate-row--discount strong { color: inherit; font-weight: 700; }
.estimate-divider { height: 1px; margin: 8px 0; background: #e9e6ee; }
.estimate-config { display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--ink-500); font-size: 7px; }
.estimate-config i { width: 3px; height: 3px; background: #b9b5c1; border-radius: 50%; }
.button--generate { width: 100%; min-height: 49px; margin-top: 12px; }
.button--generate svg { width: 19px; }
.generate-button__idle, .generate-button__loading { display: inline-flex; align-items: center; gap: 8px; }
.generate-button__loading i { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
.secure-note { display: flex; margin: 11px 0 0; align-items: center; justify-content: center; gap: 5px; color: #9995a4; text-align: center; font-size: 7px; }
.secure-note svg { width: 11px; }
.generation-status, .result-card { padding: 23px; border: 1px solid var(--primary-100); background: var(--primary-gradient-soft); border-radius: 17px; }
.generation-status__header { display: flex; align-items: center; gap: 15px; }
.generation-status__header > div:nth-child(2) { flex: 1; }
.generation-status__header h3, .result-card h3 { margin: 3px 0; font-size: 14px; }
.generation-status__header p, .result-card p { margin: 0; color: var(--ink-500); font-size: 9px; }
.generation-status__header > strong { color: var(--primary); font-size: 18px; }
.ai-orb { position: relative; display: grid; width: 45px; height: 45px; place-items: center; border-radius: 13px; background: var(--primary-gradient); box-shadow: 0 8px 20px rgba(37,99,235,.22); }
.ai-orb::after { content: "AI"; color: #fff; font-size: 9px; font-weight: 700; }
.ai-orb span, .ai-orb i { position: absolute; inset: -5px; border: 1px solid rgba(37,99,235,.2); border-radius: 17px; animation: pulseRing 1.8s infinite; }
.progress-track--large { height: 7px; margin-top: 18px; }
.generation-timeline { display: flex; margin-top: 17px; align-items: flex-start; justify-content: center; }
.generation-timeline > div { display: grid; place-items: center; color: #aaa6b5; }
.generation-timeline > div span { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid #ddd9e5; background: #fff; border-radius: 50%; font-size: 8px; }
.generation-timeline > div strong { margin-top: 5px; font-size: 7px; }
.generation-timeline > i { width: 12%; height: 1px; margin: 12px 6px 0; background: #ddd9e5; }
.generation-timeline > div.is-done { color: var(--success); }
.generation-timeline > div.is-done span { color: #fff; border-color: var(--success); background: var(--success); }
.generation-timeline svg { width: 14px; }
.generation-timeline > div.is-current { color: var(--primary); }
.generation-timeline > div.is-current span { color: #fff; border-color: var(--primary); background: var(--primary); box-shadow: 0 0 0 4px #dbeafe; }
.result-card { display: flex; align-items: center; gap: 14px; border-color: #cfeadd; background: linear-gradient(135deg,#fff,#f2fbf7); }
.result-card__icon { display: grid; width: 43px; height: 43px; flex: 0 0 43px; place-items: center; color: #fff; background: var(--success); border-radius: 50%; box-shadow: 0 8px 20px rgba(22,138,91,.2); }
.result-card__icon svg { width: 22px; }
.result-card > div:nth-child(2) { flex: 1; }
.result-actions { display: grid; margin-top: 12px; grid-template-columns: 1fr 1fr; gap: 8px; }
.result-actions .button:disabled { cursor: not-allowed; opacity: .5; }

.toast-region { position: fixed; z-index: 100; right: 22px; top: 90px; display: grid; width: min(340px,calc(100vw - 32px)); gap: 10px; pointer-events: none; }
.message-stack { display: grid; margin: 0 0 18px; gap: 8px; }
.message { padding: 11px 14px; color: #1e40af; border: 1px solid #bfdbfe; background: #eff6ff; border-radius: 11px; font-size: 10px; }
.message--success { color: #047857; border-color: #a7f3d0; background: #ecfdf5; }
.message--warning,.message--error { color: #92400e; border-color: #fde68a; background: #fffbeb; }
.toast { display: flex; padding: 13px 14px; align-items: flex-start; gap: 10px; color: var(--ink); border: 1px solid var(--border); background: rgba(255,255,255,.97); border-radius: 13px; box-shadow: 0 16px 40px rgba(23,21,43,.16); animation: toastIn .25s ease; pointer-events: auto; }
.toast__icon { display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; color: var(--primary); background: var(--primary-50); border-radius: 8px; font-weight: 700; }
.toast--success .toast__icon { color: #047857; background: #ecfdf5; }
.toast--error { border-color: #fecaca; }
.toast--error .toast__icon { color: #b91c1c; background: #fef2f2; }
.toast strong { display: block; font-size: 10px; }
.toast p { margin: 2px 0 0; color: var(--ink-500); font-size: 8px; }
.toast.is-leaving { animation: toastOut .2s ease forwards; }
.reveal { opacity: 0; transform: translateY(7px); animation: reveal .4s ease forwards; animation-delay: var(--delay,0ms); }

@keyframes reveal { to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulseRing { 0%,100% { opacity: .35; transform: scale(.97); } 50% { opacity: .8; transform: scale(1.04); } }
@keyframes livePulse { 0%,100% { opacity: .55; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes renderDrift { from { transform: translate3d(-4%,-2%,0) scale(.92); } to { transform: translate3d(8%,7%,0) scale(1.12); } }
@keyframes renderScan { 0% { transform: translateY(-20%); opacity: 0; } 18% { opacity: .8; } 82% { opacity: .7; } 100% { transform: translateY(520%); opacity: 0; } }
@keyframes renderParticle { 0%,100% { opacity: .15; transform: translateY(8px) scale(.7); } 50% { opacity: 1; transform: translateY(-12px) scale(1.25); } }
@keyframes renderOrbit { to { transform: rotate(360deg); } }
@keyframes renderGrid { to { background-position: 24px 24px; } }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(12px); } }

@media (max-width: 1180px) {
    :root { --sidebar-width: 220px; }
    .page-content { padding-inline: 24px; }
    .dashboard-grid--main { grid-template-columns: 1fr; }
    .quick-panel { display: none; }
    .create-layout { grid-template-columns: minmax(0,1.65fr) minmax(300px,.85fr); gap: 18px; }
    .style-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 900px) {
    body.sidebar-open { overflow: hidden; }
    .sidebar { width: min(300px,86vw); height: 100dvh; max-height: 100dvh; box-shadow: 16px 0 50px rgba(23,21,43,.16); transform: translateX(-105%); transition: transform .25s ease; }
    body.sidebar-open .sidebar { transform: none; }
    .sidebar__close { display: grid !important; }
    .sidebar-overlay { position: fixed; z-index: 50; inset: 0; visibility: hidden; background: rgba(20,17,35,.35); opacity: 0; transition: opacity .25s, visibility .25s; }
    body.sidebar-open .sidebar-overlay { visibility: visible; opacity: 1; }
    .app-main { margin-left: 0; }
    .menu-button { display: grid; }
    .create-layout { grid-template-columns: 1fr; }
    .preview-column { position: static; grid-row: 1; }
    .preview-card { display: grid; grid-template-columns: minmax(240px,.9fr) 1.1fr; gap: 12px 18px; }
    .preview-card__header { grid-column: 1/-1; margin: 0; }
    .preview-stage { grid-row: 2/6; }
    .estimate-card, .button--generate, .result-actions, .secure-note { grid-column: 2; }
    .estimate-card { margin: 0; align-self: end; }
    .button--generate, .result-actions { margin-top: 0; }
    .secure-note { margin-top: 0; }
}

@media (max-width: 680px) {
    .topbar { height: 64px; padding: 0 16px; }
    .eyebrow { display: none; }
    .topbar__title { font-size: 14px; }
    .credit-pill span:nth-child(2) { font-size: 0; }
    .credit-pill span:nth-child(2) strong { font-size: 11px; }
    .credit-pill__add, .topbar-avatar { display: none; }
    .topbar-login { font-size: 9px; }
    .topbar-register { min-height: 34px; padding: 0 10px; }
    .page-content { padding: 18px 14px calc(108px + env(safe-area-inset-bottom)); }
    .dashboard-hero { display: block; }
    .dashboard-hero p { font-size: 11px; }
    .hero-cta { width: 100%; margin-top: 18px; }
    .button__shortcut { display: none; }
    .active-job { padding: 16px; flex-wrap: wrap; }
    .active-job__visual { width: 48px; height: 48px; flex-basis: 48px; border-radius: 13px; }
    .active-job__visual svg { width: 26px; }
    .active-job__body { min-width: calc(100% - 70px); }
    .active-job__private { width: 100%; justify-content: center; }
    .dashboard-grid--stats { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat-card { min-height: 94px; padding: 14px; }
    .stat-card--credit { grid-column: 1/-1; }
    .stat-card__icon { width: 36px; height: 36px; flex-basis: 36px; }
    .stat-card strong { font-size: 18px; }
    .stat-card small { max-width: 105px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .stat-card--credit small { max-width: none; white-space: normal; overflow: visible; }
    .stat-card:not(.stat-card--credit) small { display: none; }
    .panel__header { padding: 17px 16px 14px; }
    .video-grid { padding: 0 14px 16px; grid-template-columns: 1fr 1fr; gap: 10px; }
    .video-card:nth-child(3) { display: none; }
    .dashboard-empty { min-height: 230px; padding-inline: 18px; }
    .create-heading { display: block; }
    .create-heading h2 { max-width: 100%; font-size: clamp(22px,7vw,26px); line-height: 1.2; letter-spacing: -.7px; }
    .create-heading p { font-size: 10px; }
    .draft-state { display: none; }
    .workflow-steps { margin-bottom: 18px; justify-content: space-between; }
    .workflow-step { display: grid; place-items: center; gap: 4px; }
    .workflow-step strong { font-size: 7px; }
    .workflow-steps > i { flex: 1; width: auto; margin: 0 4px 15px; }
    .create-layout { display: flex; flex-direction: column; }
    .preview-column { position: static; width: 100%; order: 2; opacity: 1; transform: none; animation: none; }
    .create-form { order: 1; width: 100%; }
    .preview-card { display: block; padding: 13px; scroll-margin-top: 76px; }
    .preview-card__header { margin-bottom: 10px; }
    .preview-stage { width: 100%; max-height: none; aspect-ratio: 16/9; }
    .preview-stage[data-ratio="9:16"] { width: min(100%,260px); max-width: 260px; aspect-ratio: 9/16; }
    .preview-stage[data-ratio="1:1"] { width: min(100%,330px); max-width: 330px; aspect-ratio: 1; }
    .estimate-card { margin-top: 10px; }
    .button--generate { position: fixed; z-index: 35; right: 12px; bottom: max(12px,env(safe-area-inset-bottom)); left: 12px; width: calc(100% - 24px); margin: 0; box-shadow: 0 10px 28px rgba(37,99,235,.34); }
    .result-actions { position: fixed; z-index: 35; right: 12px; bottom: 12px; left: 12px; margin: 0; padding: 7px; background: rgba(255,255,255,.94); border-radius: 14px; box-shadow: 0 10px 30px rgba(23,21,43,.18); backdrop-filter: blur(10px); }
    .secure-note { display: none; }
    .form-section { display: grid; padding: 16px 13px; grid-template-columns: 27px minmax(0,1fr); gap: 10px; border-radius: 15px; }
    .form-section__content,.advanced-options,.manual-ai-fields,.control-group,.select-wrap { min-width: 0; }
    .form-section__number { width: 27px; height: 27px; flex-basis: 27px; }
    .routing-summary em { display: none; }
    .advanced-options, .ai-mode-fieldset, .manual-ai-fields { grid-template-columns: 1fr; }
    .manual-ai-fields { position: relative; padding: 11px; overflow: visible; }
    .prompt-box textarea { min-height: 140px; }
    .suggestion-row button:nth-of-type(3) { display: none; }
    .style-options { grid-template-columns: 1fr; }
    .style-option { display: flex; padding: 8px; align-items: center; gap: 10px; }
    .style-option__visual { width: 68px; height: 47px; flex: 0 0 68px; margin: 0; }
    .style-option small { display: block; }
    .config-grid { grid-template-columns: 1fr; }
    .advanced-options { grid-template-columns: 1fr; }
    .settings-persistence { align-items: stretch; flex-direction: column; gap: 10px; }
    .settings-persistence button { justify-content: center; }
    .smart-select__list { width: 100%; max-width: calc(100vw - 54px); max-height: calc(100dvh - 150px); }
    .job-live-preview { padding: 13px; border-radius: 15px; }
    .job-live-preview[data-ratio="9:16"] { width: min(100%,270px); }
    .job-live-preview__top { right: 11px; left: 11px; }
    .job-live-preview__footer { right: 0; left: 0; padding: 38px 13px 14px; }
    .job-live-preview__center { padding: 20px 10px; }
    .job-live-preview__center > strong { font-size: 15px; }
    .job-live-preview__center > small { max-width: 250px; }
    .job-live-preview__orb { width: 62px; height: 62px; border-radius: 20px; }
    .job-live-preview__meta span:first-child { max-width: 160px; }
    .resource-filters .smart-select { min-width: 0; }
    .generation-status { padding: 18px 14px; }
    .generation-status__header { align-items: flex-start; }
    .generation-status__header > strong { margin-left: auto; }
    .generation-timeline > div strong { font-size: 6px; }
    .result-card { align-items: flex-start; flex-wrap: wrap; }
    .result-card .button { width: 100%; }
    .toast-region { top: 76px; right: 16px; }
}

/* Projects */
.projects-page, .project-detail-page { max-width: 1320px; margin: 0 auto; }
.projects-hero, .project-detail-heading { display: flex; margin-bottom: 24px; align-items: flex-end; justify-content: space-between; gap: 24px; }
.projects-hero h2, .project-detail-heading h2 { margin: 6px 0; font-size: clamp(26px,2.6vw,34px); line-height: 1.25; letter-spacing: -1px; }
.projects-hero p, .project-detail-heading > div:first-child > p { max-width: 690px; margin: 0; color: var(--ink-500); font-size: var(--font-base); }
.project-summary { display: grid; margin-bottom: 18px; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.project-summary > div { display: flex; min-height: 82px; padding: 15px 17px; align-items: center; gap: 13px; border: 1px solid var(--border); background: #fff; border-radius: 14px; }
.project-summary__icon { display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; color: var(--primary); background: var(--primary-50); border-radius: 11px; }
.project-summary__icon svg { width: 20px; }
.project-summary p { display: grid; margin: 0; }
.project-summary strong { font-size: 20px; line-height: 1.2; }
.project-summary small { margin-top: 2px; color: var(--ink-500); font-size: var(--font-sm); }
.project-toolbar { display: flex; margin-bottom: 18px; align-items: center; justify-content: space-between; gap: 14px; }
.project-search { position: relative; display: flex; width: min(440px,100%); align-items: center; }
.project-search > svg { position: absolute; left: 13px; width: 18px; color: var(--ink-500); }
.project-search input { width: 100%; height: 44px; padding: 0 42px; color: var(--ink); border: 1px solid var(--border); outline: 0; background: #fff; border-radius: 12px; font-size: var(--font-base); transition: border .18s,box-shadow .18s; }
.project-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.project-search > a { position: absolute; right: 10px; display: grid; width: 25px; height: 25px; place-items: center; color: var(--ink-500); border-radius: 7px; font-size: 18px; }
.project-search > a:hover { color: var(--primary); background: var(--primary-50); }
.project-status-tabs { display: flex; padding: 4px; gap: 3px; border: 1px solid var(--border); background: #fff; border-radius: 12px; }
.project-status-tabs button { min-height: 44px; padding: 0 13px; color: var(--ink-500); border: 0; background: transparent; border-radius: 9px; cursor: pointer; font-size: var(--font-sm); font-weight: 600; }
.project-status-tabs button:hover { color: var(--ink); background: #f8fafc; }
.project-status-tabs button.is-active { color: var(--primary-700); background: var(--primary-50); }
.project-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.project-card { min-width: 0; overflow: hidden; border: 1px solid var(--border); background: #fff; border-radius: 16px; box-shadow: 0 1px 3px rgba(15,23,42,.035); transition: transform .2s,box-shadow .2s,border .2s; }
.project-card:hover { border-color: var(--primary-100); box-shadow: 0 14px 34px rgba(15,23,42,.09); transform: translateY(-3px); }
.project-card--archived { opacity: .78; }
.project-card__cover { position: relative; display: grid; height: 142px; place-items: center; overflow: hidden; color: #fff; background: linear-gradient(135deg,#1e3a8a,#2563eb); }
.project-card:nth-of-type(3n+2) .project-card__cover { background: linear-gradient(135deg,#172554,#1d4ed8 62%,#60a5fa); }
.project-card:nth-of-type(3n+3) .project-card__cover { background: linear-gradient(145deg,#1e40af,#2563eb 58%,#93c5fd); }
.project-card__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project-card__cover > svg { position: relative; z-index: 2; width: 42px; opacity: .92; }
.project-card__shape { position: absolute; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.project-card__shape--one { right: -35px; top: -75px; width: 190px; height: 190px; box-shadow: 0 0 0 32px rgba(255,255,255,.035),0 0 0 64px rgba(255,255,255,.02); }
.project-card__shape--two { left: -50px; bottom: -95px; width: 170px; height: 170px; background: rgba(255,255,255,.045); }
.project-card__status { position: absolute; z-index: 2; top: 12px; left: 12px; padding: 5px 8px; color: #fff; border: 1px solid rgba(255,255,255,.2); background: rgba(15,23,42,.24); border-radius: 99px; font-size: var(--font-xs); font-weight: 650; backdrop-filter: blur(7px); }
.project-card__body { padding: 16px; }
.project-card__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.project-card__heading h3 { margin: 0; overflow: hidden; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.project-card__heading > a { display: flex; min-width: 0; min-height: 44px; align-items: center; flex: 1; }
.project-card__menu { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; color: var(--ink-500); border: 0; background: transparent; border-radius: 8px; cursor: pointer; }
.project-card__menu:hover { color: var(--primary); background: var(--primary-50); }
.project-card__menu svg { width: 17px; }
.project-card__body > p { min-height: 42px; margin: 5px 0 13px; color: var(--ink-500); font-size: var(--font-sm); line-height: 1.65; }
.project-card__metrics { display: flex; padding: 10px 0; gap: 14px; border-top: 1px solid #f0eef3; border-bottom: 1px solid #f0eef3; color: var(--ink-500); font-size: var(--font-xs); }
.project-card__metrics span { display: inline-flex; align-items: center; gap: 5px; }
.project-card__metrics svg { width: 14px; color: var(--primary); }
.project-card__footer { display: flex; padding-top: 12px; align-items: center; justify-content: space-between; color: #8c8797; font-size: var(--font-xs); }
.project-card__footer a { display: inline-flex; min-height: 44px; align-items: center; gap: 3px; color: var(--primary); font-weight: 600; }
.project-card__footer svg { width: 13px; }
.pagination { display: flex; margin-top: 22px; align-items: center; justify-content: center; gap: 12px; }
.pagination a, .pagination > span { display: grid; width: 44px; height: 44px; place-items: center; color: var(--primary); border: 1px solid var(--border); background: #fff; border-radius: 10px; }
.pagination a:hover { border-color: var(--primary-300); background: var(--primary-50); }
.pagination .is-disabled { color: #cbd5e1; }
.pagination svg { width: 17px; }
.pagination strong { font-size: var(--font-sm); }
.project-empty { display: grid; min-height: 370px; padding: 36px; place-items: center; align-content: center; text-align: center; border: 1px dashed #cbd5e1; background: rgba(255,255,255,.6); border-radius: 18px; }
.project-empty__icon { display: grid; width: 70px; height: 70px; margin-bottom: 16px; place-items: center; color: var(--primary); background: var(--primary-gradient-soft); border: 1px solid var(--primary-100); border-radius: 20px; box-shadow: 0 0 0 8px rgba(219,234,254,.32); }
.project-empty__icon svg { width: 34px; }
.project-empty h3 { margin: 0 0 7px; font-size: 18px; }
.project-empty p { max-width: 440px; margin: 0 0 18px; color: var(--ink-500); font-size: var(--font-base); }
.projects-guest { display: grid; min-height: 480px; padding: clamp(24px,4vw,54px); grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(30px,5vw,74px); border: 1px solid var(--border); background: #fff; border-radius: 20px; box-shadow: var(--shadow); }
.projects-guest > div { min-width: 0; }
.projects-guest__visual { position: relative; display: grid; min-height: 330px; place-items: center; overflow: hidden; background: linear-gradient(145deg,#172554,#1d4ed8 60%,#60a5fa); border-radius: 18px; }
.projects-guest__visual > span { position: absolute; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.projects-guest__visual > span:nth-child(1) { width: 250px; height: 250px; right: -80px; top: -100px; }
.projects-guest__visual > span:nth-child(2) { width: 180px; height: 180px; left: -60px; bottom: -70px; }
.projects-guest__visual > span:nth-child(3) { width: 360px; height: 360px; box-shadow: 0 0 0 50px rgba(255,255,255,.025); }
.projects-guest__visual > div { position: relative; z-index: 2; display: grid; max-width: 320px; padding: 28px; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.16); background: rgba(15,23,42,.2); border-radius: 17px; text-align: center; backdrop-filter: blur(8px); }
.projects-guest__visual svg { width: 52px; margin-bottom: 14px; }
.projects-guest__visual strong { font-size: 16px; }
.projects-guest__visual small { margin-top: 5px; color: #bfdbfe; font-size: var(--font-sm); }
.projects-guest > div:last-child h3 { margin: 7px 0 10px; font-size: clamp(23px,2.4vw,31px); line-height: 1.3; letter-spacing: -.7px; }
.projects-guest > div:last-child > p { margin: 0; color: var(--ink-500); font-size: var(--font-base); line-height: 1.75; }
.projects-guest ul { display: grid; margin: 20px 0 24px; padding: 0; gap: 10px; list-style: none; }
.projects-guest li { display: flex; align-items: center; gap: 9px; font-size: var(--font-base); }
.projects-guest li span { display: grid; width: 22px; height: 22px; place-items: center; color: var(--primary); background: var(--primary-50); border-radius: 50%; font-size: var(--font-xs); font-weight: 700; }

body.dialog-open { overflow: hidden; }
.app-dialog { width: min(440px,calc(100vw - 32px)); padding: 28px; color: var(--ink); border: 0; background: #fff; border-radius: 18px; box-shadow: 0 28px 80px rgba(15,23,42,.24); }
.app-dialog[open] { animation: dialogIn .18s ease; }
.app-dialog::backdrop { background: rgba(15,23,42,.5); backdrop-filter: blur(3px); }
.app-dialog__icon { display: grid; width: 52px; height: 52px; margin-bottom: 17px; place-items: center; color: var(--primary); background: var(--primary-50); border-radius: 15px; }
.app-dialog__icon--restore { color: var(--success); background: #ecfdf5; }
.app-dialog__icon--danger { color: #dc2626; background: #fee2e2; }.app-dialog--danger { border: 1px solid #fecaca; }.app-dialog--danger h2 { color: #7f1d1d; }
.app-dialog__icon svg { width: 25px; }
.app-dialog h2 { margin: 0 0 7px; font-size: 21px; letter-spacing: -.45px; }
.app-dialog > p { margin: 0 0 20px; color: var(--ink-500); font-size: var(--font-base); line-height: 1.7; }
.app-dialog > form:not(.project-form) { display: flex; justify-content: flex-end; gap: 9px; }
.app-dialog--form { width: min(520px,calc(100vw - 32px)); }
.app-dialog__close { position: absolute; top: 15px; right: 15px; display: grid; width: 34px; height: 34px; place-items: center; color: var(--ink-500); border: 0; background: #f8fafc; border-radius: 9px; cursor: pointer; }
.app-dialog__close:hover { color: var(--ink); background: var(--primary-50); }
.app-dialog__close svg { width: 17px; }
.project-form { display: grid; gap: 16px; }
.project-field { display: grid; gap: 7px; }
.project-field label { display: flex; align-items: center; justify-content: space-between; color: var(--ink-700); font-size: var(--font-sm); font-weight: 650; }
.project-field label span { color: #9995a5; font-size: var(--font-xs); font-weight: 500; }
.project-field input, .project-field textarea { width: 100%; padding: 12px 13px; color: var(--ink); border: 1px solid var(--border); outline: 0; background: #fff; border-radius: 11px; font-size: var(--font-base); line-height: 1.55; resize: vertical; transition: border .18s,box-shadow .18s; }
.project-field input { height: 46px; }
.project-field textarea { min-height: 112px; }
.project-field input:focus, .project-field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.project-field [aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(239,68,68,.09); }
.app-dialog__actions { display: flex; padding-top: 5px; justify-content: flex-end; gap: 9px; }
@keyframes dialogIn { from { opacity: 0; transform: translateY(8px) scale(.98); } }

.project-title-row { display: flex; align-items: center; gap: 10px; }
.project-status { display: inline-flex; padding: 5px 8px; color: var(--primary-700); background: var(--primary-50); border-radius: 99px; font-size: var(--font-xs); font-weight: 650; white-space: nowrap; }
.project-status--archived { color: #475569; background: #e2e8f0; }
.project-detail-actions { display: flex; gap: 9px; }
.project-detail-overview { display: grid; margin-bottom: 20px; grid-template-columns: minmax(290px,.8fr) minmax(0,1.2fr); gap: 18px; }
.project-detail-cover { position: relative; display: grid; min-height: 215px; place-items: center; overflow: hidden; color: #fff; background: linear-gradient(145deg,#172554,#2563eb 62%,#60a5fa); border-radius: 17px; }
.project-detail-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project-detail-cover > span { position: absolute; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.project-detail-cover > span:nth-child(1) { width: 230px; height: 230px; top: -120px; right: -50px; box-shadow: 0 0 0 40px rgba(255,255,255,.025); }
.project-detail-cover > span:nth-child(2) { width: 180px; height: 180px; left: -80px; bottom: -100px; }
.project-detail-cover svg { position: relative; z-index: 2; width: 58px; }
.project-detail-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.project-detail-stats > div { display: grid; padding: 18px; align-content: center; border: 1px solid var(--border); background: #fff; border-radius: 15px; }
.project-detail-stats span { color: var(--ink-500); font-size: var(--font-sm); }
.project-detail-stats strong { margin: 2px 0; font-size: 23px; }
.project-detail-stats small { color: #9995a5; font-size: var(--font-xs); }
.project-detail-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(310px,.75fr); align-items: start; gap: 20px; }
.project-content-panel, .project-jobs-panel { min-width: 0; }
.project-video-grid { display: grid; padding: 0 20px 20px; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.project-video-card { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; }
.project-video-card__visual { position: relative; display: grid; aspect-ratio: 16/10; place-items: center; overflow: hidden; color: #93c5fd; background: linear-gradient(145deg,#0f172a,#1e3a8a); }
.project-video-card__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project-video-card__visual > svg { width: 31px; }
.project-video-card__visual > span { position: absolute; right: 7px; bottom: 7px; padding: 3px 6px; color: #fff; background: rgba(15,23,42,.62); border-radius: 5px; font-size: var(--font-xs); }
.project-video-card > div:last-child { padding: 10px; }
.project-video-card h3 { margin: 0 0 3px; overflow: hidden; font-size: var(--font-sm); text-overflow: ellipsis; white-space: nowrap; }
.project-video-card p { margin: 0; color: var(--ink-500); font-size: var(--font-xs); }
.project-content-empty { display: grid; min-height: 270px; padding: 24px; place-items: center; align-content: center; text-align: center; }
.project-content-empty > span { display: grid; width: 58px; height: 58px; margin-bottom: 13px; place-items: center; color: var(--primary); background: var(--primary-50); border-radius: 16px; }
.project-content-empty svg { width: 28px; }
.project-content-empty h3 { margin: 0 0 5px; font-size: 16px; }
.project-content-empty p { max-width: 390px; margin: 0 0 15px; color: var(--ink-500); font-size: var(--font-sm); }
.project-job-list { display: grid; padding: 0 14px 17px; gap: 4px; }
.project-job-list article { display: flex; padding: 10px; gap: 10px; border-radius: 11px; }
.project-job-list article:hover { background: #f8fafc; }
.project-job-list__icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; color: var(--primary); background: var(--primary-50); border-radius: 10px; }
.project-job-list__icon svg { width: 17px; }
.project-job-list article > div { min-width: 0; flex: 1; }
.project-job-list h3 { margin: 0 0 3px; overflow: hidden; font-size: var(--font-sm); text-overflow: ellipsis; white-space: nowrap; }
.project-job-list p { margin: 0; color: var(--ink-500); font-size: var(--font-xs); line-height: 1.5; }
.project-job-list .progress-track { height: 4px; margin-top: 7px; }
.project-jobs-empty { padding: 0 22px 24px; color: var(--ink-500); font-size: var(--font-sm); }
.project-danger-zone { display: flex; margin-top: 20px; padding: 18px 20px; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid var(--border); background: #fff; border-radius: 15px; }
.project-danger-zone h3 { margin: 0 0 3px; font-size: var(--font-base); }
.project-danger-zone p { margin: 0; color: var(--ink-500); font-size: var(--font-sm); }
.project-delete-zone { border-color: #fecaca; background: #fffafa; }.project-delete-zone h3 { color: #991b1b; }
.resource-delete-link { padding: 0; color: #dc2626; border: 0; background: transparent; font: inherit; font-weight: 700; cursor: pointer; }.resource-delete-link:hover { color: #991b1b; text-decoration: underline; }.project-card__footer > div { display: flex; align-items: center; gap: 12px; }

@media (max-width: 1100px) {
    .project-grid { grid-template-columns: 1fr 1fr; }
    .project-detail-grid { grid-template-columns: 1fr; }
    .project-jobs-panel { order: -1; }
}
@media (max-width: 760px) {
    .projects-hero, .project-detail-heading { display: grid; align-items: start; }
    .projects-hero .button { width: 100%; }
    .project-summary { grid-template-columns: 1fr 1fr; }
    .project-summary > div:last-child { grid-column: 1/-1; }
    .project-toolbar { display: grid; }
    .project-search { width: 100%; }
    .project-status-tabs { overflow-x: auto; }
    .project-status-tabs button { flex: 1; white-space: nowrap; }
    .project-grid { grid-template-columns: 1fr; }
    .projects-guest { grid-template-columns: 1fr; }
    .projects-guest__visual { min-height: 270px; }
    .project-detail-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .project-detail-overview { grid-template-columns: 1fr; }
    .project-detail-cover { min-height: 185px; }
    .project-video-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
    .project-summary { grid-template-columns: 1fr; }
    .project-summary > div:last-child { grid-column: auto; }
    .project-card__cover { height: 128px; }
    .project-status-tabs { width: calc(100vw - 32px); }
    .project-status-tabs button { padding-inline: 10px; }
    .projects-guest { padding: 18px; }
    .projects-guest__visual { min-height: 230px; }
    .projects-guest__visual > div { margin: 18px; padding: 20px; }
    .project-detail-actions { grid-template-columns: 1fr; }
    .project-detail-actions .button { width: 100%; }
    .project-detail-stats { grid-template-columns: 1fr 1fr; }
    .project-detail-stats > div { padding: 14px; }
    .project-video-grid { grid-template-columns: 1fr; }
    .project-danger-zone { align-items: flex-start; flex-direction: column; }
    .project-danger-zone .button { width: 100%; }
    .app-dialog { padding: 23px 18px; }
    .app-dialog__actions, .app-dialog > form:not(.project-form) { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 430px) {
    .topbar-register { display: none; }
    .topbar__actions { gap: 8px; }
    .projects-guest > div:last-child h3 { overflow-wrap: anywhere; }
}

/* Typography contract: customer UI only uses 10px, 12px, 14px and larger. */
.nav-label,
.nav-new,
.nav-count,
.credit-mini p,
.avatar,
.topbar-avatar,
.profile-card__info small,
.eyebrow,
.button__shortcut,
.section-kicker,
.status-badge,
.active-job__meta,
.active-job__private,
.stat-card small,
.video-card__duration,
.video-card__info p,
.dashboard-empty__icon i,
.quick-item small,
.tip-card p,
.draft-state,
.workflow-step span,
.form-section__number,
.required-note,
.prompt-box__footer,
.suggestion-row > span,
.segment-control button small,
.routing-summary em,
.preview-card__header > span,
.preview-result > span,
.mock-notice > span,
.mock-notice small,
.estimate-config,
.secure-note,
.ai-orb::after,
.preview-rings span,
.generation-timeline > div span,
.generation-timeline > div strong,
.toast p {
    font-size: var(--font-xs);
}

.credit-mini__row span,
.profile-card__info strong,
.credit-pill span:nth-child(2) strong,
.topbar-login,
.topbar-register,
.stat-card__label,
.text-link,
.video-card__info h3,
.dashboard-empty p,
.quick-item strong,
.tip-card strong,
.back-link,
.workflow-step strong,
.create-form-alert,
.form-section__heading p,
.prompt-magic,
.field-error,
.suggestion-row button,
.style-option small,
.segment-control button span,
.control-group > label,
.routing-summary small,
.ai-mode-fieldset legend,
.ai-mode-option small,
.fallback-option strong,
.fallback-option small,
.preview-card__header,
.preview-empty p,
.preview-processing small,
.mock-notice strong,
.estimate-row,
.estimate-row strong,
.generation-status__header p,
.result-card p,
.message,
.toast strong {
    font-size: var(--font-sm);
}

.button,
.button--large,
.dashboard-hero p,
.dashboard-empty h3,
.create-heading p,
.prompt-box textarea,
.style-option strong,
.select-wrap select,
.routing-summary strong,
.advanced-toggle,
.ai-mode-option strong,
.preview-card__header strong,
.preview-empty strong,
.preview-processing strong {
    font-size: var(--font-base);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* Short-film production studio */
.films-page,
.film-create-page,
.film-studio { display: grid; gap: 24px; }

.films-hero,
.film-studio-head {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 34px 36px;
    border: 1px solid #dce5f2;
    border-radius: 24px;
    background:
        radial-gradient(circle at 88% 18%, rgba(96, 165, 250, .24), transparent 24%),
        radial-gradient(circle at 72% 110%, rgba(139, 92, 246, .15), transparent 34%),
        linear-gradient(135deg, #fff 0%, #f5f8ff 60%, #eef4ff 100%);
    box-shadow: 0 18px 44px rgba(38, 65, 112, .09);
}
.films-hero::after,
.film-studio-head::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 65%, rgba(255,255,255,.72)); }
.films-hero > *, .film-studio-head > * { position: relative; z-index: 1; }
.films-hero h2,
.film-create-head h2 { max-width: 760px; margin: 9px 0 10px; color: #14213d; font-size: clamp(28px, 4vw, 44px); line-height: 1.12; letter-spacing: -.035em; }
.films-hero p,
.film-create-head > p { max-width: 760px; margin: 0; color: #61708a; font-size: 15px; line-height: 1.75; }

.film-notice { display: flex; align-items: center; gap: 10px 18px; padding: 15px 18px; border-radius: 14px; border: 1px solid; font-size: 13px; }
.film-notice strong { white-space: nowrap; }
.film-notice--warning { color: #854d0e; border-color: #fde68a; background: #fffbeb; }
.film-notice--error { color: #991b1b; border-color: #fecaca; background: #fef2f2; }

.film-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.film-card { overflow: hidden; min-width: 0; border: 1px solid #dfe7f2; border-radius: 20px; background: #fff; box-shadow: 0 10px 30px rgba(38, 57, 91, .06); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.film-card:hover { transform: translateY(-4px); border-color: #bfd1ef; box-shadow: 0 18px 40px rgba(38, 57, 91, .12); }
.film-card__visual { position: relative; display: grid; min-height: 190px; place-items: center; overflow: hidden; color: white; background: linear-gradient(135deg, #172554, #2563eb 52%, #7c3aed); }
.film-card__visual img { width: 100%; height: 100%; min-height: 190px; object-fit: cover; }
.film-card__visual > svg { position: relative; z-index: 2; width: 54px; height: 54px; fill: none; stroke: currentColor; stroke-width: 1.25; opacity: .92; }
.film-card__orb { position: absolute; width: 170px; height: 170px; border-radius: 50%; filter: blur(2px); opacity: .45; }
.film-card__orb--one { top: -80px; right: -50px; background: #67e8f9; }
.film-card__orb--two { bottom: -100px; left: -45px; background: #c084fc; }
.film-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; color: #334155; background: #eef2f7; font-size: 11px; font-weight: 700; white-space: nowrap; }
.film-card__visual .film-status { position: absolute; z-index: 3; top: 14px; right: 14px; color: #fff; background: rgba(15, 23, 42, .68); backdrop-filter: blur(8px); }
.film-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; }
.film-status--script_queued::before,
.film-status--script_generating::before,
.film-status--generating::before,
.film-status--render_queued::before,
.film-status--rendering::before { background: #3b82f6; box-shadow: 0 0 0 4px rgba(59, 130, 246, .12); animation: filmPulse 1.7s infinite; }
.film-status--script_ready::before,
.film-status--ready::before { background: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, .12); }
.film-status--failed::before { background: #ef4444; }
.film-card__body { display: grid; gap: 11px; padding: 20px; }
.film-card__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.film-card__meta span { padding: 4px 7px; border-radius: 6px; color: #64748b; background: #f1f5f9; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.film-card__body a { color: inherit; text-decoration: none; }
.film-card__body h3 { margin: 0; color: #16213b; font-size: 18px; line-height: 1.35; }
.film-card__body > p { min-height: 42px; margin: 0; color: #69778e; font-size: 12px; line-height: 1.65; }
.film-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 13px; border-top: 1px solid #edf1f6; color: #8995a8; font-size: 11px; }
.film-card__footer a { display: inline-flex; align-items: center; gap: 4px; color: #2563eb; font-weight: 700; }
.film-card__footer svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.film-empty { display: grid; justify-items: center; gap: 10px; padding: 70px 24px; text-align: center; border: 1px dashed #cdd9e9; border-radius: 22px; background: #fbfdff; }
.film-empty > span { display: grid; width: 68px; height: 68px; place-items: center; border-radius: 20px; color: #2563eb; background: #eaf2ff; }
.film-empty svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.film-empty h3 { margin: 8px 0 0; color: #1e293b; }
.film-empty p { margin: 0 0 8px; color: #718096; }

.film-create-head { padding: 6px 2px 2px; }
.film-back { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 14px; color: #64748b; font-size: 12px; font-weight: 700; text-decoration: none; }
.film-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.film-create-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 24px; align-items: start; }
.film-create-form { overflow: hidden; border: 1px solid #dfe7f2; border-radius: 22px; background: #fff; box-shadow: 0 14px 38px rgba(33, 55, 92, .07); }
.film-form-section { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; padding: 28px 30px; border-bottom: 1px solid #edf1f6; }
.film-form-section__number { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 12px; color: #2563eb; background: #eaf2ff; font-size: 12px; font-weight: 800; }
.film-form-section__content { min-width: 0; }
.film-form-section__content > h3 { margin: 2px 0 5px; color: #17213a; font-size: 18px; }
.film-form-section__content > p { margin: 0 0 18px; color: #758299; font-size: 12px; line-height: 1.6; }
.film-source-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.film-source-option { position: relative; display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 15px; border: 1px solid #dbe3ef; border-radius: 14px; cursor: pointer; transition: .18s ease; }
.film-source-option:hover { border-color: #9bb8e7; background: #f8fbff; }
.film-source-option:has(input:checked) { border-color: #3b82f6; background: #eff6ff; box-shadow: inset 0 0 0 1px #3b82f6; }
.film-source-option input { position: absolute; opacity: 0; pointer-events: none; }
.film-source-option__icon { display: grid; flex: 0 0 auto; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: #2563eb; background: #e9f1ff; }
.film-source-option__icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.film-source-option strong, .film-source-option small { display: block; }
.film-source-option strong { color: #26334b; font-size: 13px; }
.film-source-option small { margin-top: 4px; color: #77849a; font-size: 10px; line-height: 1.55; }
.film-source-text { position: relative; margin-top: 15px; }
.film-source-text textarea { min-height: 230px; resize: vertical; }
.film-char-count { position: absolute; right: 12px; bottom: 9px; padding: 3px 7px; border-radius: 6px; color: #8491a5; background: rgba(255,255,255,.9); font-size: 10px; }
.film-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.film-field-grid__wide { grid-column: 1 / -1; }
.film-create-submit { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 30px; background: #f8faff; }
.film-create-submit strong, .film-create-submit span { display: block; }
.film-create-submit strong { color: #28354d; font-size: 12px; }
.film-create-submit span { margin-top: 3px; color: #7c899c; font-size: 10px; }
.film-create-guide { position: sticky; top: 92px; display: grid; gap: 14px; }
.film-guide-card { padding: 23px; border-radius: 20px; color: #eaf2ff; background: linear-gradient(150deg, #172554, #1e3a8a 58%, #4338ca); box-shadow: 0 18px 35px rgba(30, 58, 138, .2); }
.film-guide-card__icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: #bfdbfe; background: rgba(255,255,255,.1); }
.film-guide-card__icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.film-guide-card h3 { margin: 16px 0; font-size: 16px; }
.film-guide-card ol { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.film-guide-card li { display: flex; align-items: center; gap: 9px; color: #cbd8f0; font-size: 11px; }
.film-guide-card li span { display: grid; flex: 0 0 auto; width: 23px; height: 23px; place-items: center; border-radius: 50%; color: #fff; background: rgba(96,165,250,.3); font-size: 9px; font-weight: 800; }
.film-guide-tip { padding: 18px; border: 1px solid #dfe7f2; border-radius: 16px; background: #fff; }
.film-guide-tip strong { color: #334155; font-size: 12px; }
.film-guide-tip p { margin: 6px 0 0; color: #758299; font-size: 10px; line-height: 1.65; }

.film-studio-head { align-items: flex-end; }
.film-studio-title { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.film-studio-title h2 { margin: 5px 0; color: #15203a; font-size: clamp(26px, 4vw, 40px); line-height: 1.18; letter-spacing: -.035em; }
.film-studio-head p { max-width: 760px; margin: 6px 0 13px; color: #64748b; font-size: 13px; line-height: 1.7; }
.film-studio-meta { display: flex; flex-wrap: wrap; gap: 7px; }
.film-studio-meta span { padding: 5px 8px; border: 1px solid #d9e4f3; border-radius: 7px; color: #53627a; background: rgba(255,255,255,.68); font-size: 10px; font-weight: 700; }
.film-studio-actions { display: flex; gap: 9px; flex: 0 0 auto; }
.film-process-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; padding: 23px 26px; border: 1px solid #bfdbfe; border-radius: 20px; background: linear-gradient(110deg, #eff6ff, #fff 62%); }
.film-process-card__icon { position: relative; display: grid; width: 54px; height: 54px; place-items: center; border-radius: 16px; color: #2563eb; background: #dbeafe; }
.film-process-card__icon span { position: absolute; inset: -5px; border: 1px solid #93c5fd; border-radius: 20px; animation: filmPulseBox 1.8s infinite; }
.film-process-card__icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.film-process-card h3 { margin: 6px 0 4px; color: #1e3a5f; font-size: 17px; }
.film-process-card p { margin: 0; color: #64748b; font-size: 11px; line-height: 1.6; }
.film-process-card__loader { display: flex; gap: 5px; }
.film-process-card__loader i { width: 7px; height: 7px; border-radius: 50%; background: #3b82f6; animation: filmDots 1.2s infinite; }
.film-process-card__loader i:nth-child(2) { animation-delay: .15s; }.film-process-card__loader i:nth-child(3) { animation-delay: .3s; }
.film-story-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 14px; }
.film-story-card { padding: 20px; border: 1px solid #e0e7f0; border-radius: 17px; background: #fff; }
.film-story-card__label { display: block; margin-bottom: 9px; color: #2563eb; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.film-story-card p { margin: 0; color: #67768d; font-size: 11px; line-height: 1.7; }
.film-story-card strong { display: block; margin-bottom: 5px; color: #17213a; font-size: 22px; }
.film-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.film-section-heading h3 { margin: 6px 0 0; color: #17213a; font-size: 22px; }
.film-section-heading > p { max-width: 520px; margin: 0; color: #76849a; font-size: 11px; line-height: 1.6; text-align: right; }
.film-characters,
.film-scenes { padding: 25px; border: 1px solid #e0e7f0; border-radius: 21px; background: #fff; }
.film-character-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.film-character-card { display: flex; gap: 14px; padding: 16px; border: 1px solid #e5eaf1; border-radius: 14px; background: #fbfcfe; }
.film-character-card > span { display: grid; flex: 0 0 auto; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #2563eb; background: #e9f1ff; font-size: 10px; font-weight: 800; }
.film-character-card h4 { margin: 0; color: #26334a; font-size: 14px; }.film-character-card small { color: #7a879a; font-size: 9px; }
.film-character-card p { margin: 7px 0 0; color: #65738a; font-size: 10px; line-height: 1.55; }
.film-character-card p strong { color: #45536a; }
.film-scene-timeline { display: grid; }
.film-scene { display: grid; grid-template-columns: 48px minmax(0, 1fr); }
.film-scene__rail { position: relative; display: flex; justify-content: center; }
.film-scene__rail span { position: relative; z-index: 2; display: grid; width: 34px; height: 34px; place-items: center; border: 4px solid #fff; border-radius: 50%; color: #fff; background: #2563eb; box-shadow: 0 0 0 1px #bfdbfe; font-size: 9px; font-weight: 800; }
.film-scene__rail i { position: absolute; top: 32px; bottom: -1px; width: 1px; background: #dbe5f2; }
.film-scene:last-child .film-scene__rail i { display: none; }
.film-scene__card { min-width: 0; margin: 0 0 18px; padding: 19px; border: 1px solid #e0e7f0; border-radius: 16px; background: #fcfdff; }
.film-scene__head { display: flex; justify-content: space-between; gap: 14px; }
.film-scene__head small { color: #2563eb; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.film-scene__head h4 { margin: 4px 0 0; color: #1e293b; font-size: 16px; }
.scene-status { display: inline-flex; align-items: center; align-self: flex-start; padding: 5px 8px; border-radius: 999px; color: #64748b; background: #edf2f7; font-size: 9px; font-weight: 800; white-space: nowrap; }
.scene-status--approved,.scene-status--completed { color: #047857; background: #d1fae5; }
.scene-status--ready { color: #0369a1; background: #e0f2fe; }
.scene-status--draft,.scene-status--pending,.scene-status--queued,.scene-status--not_required { color: #64748b; background: #eef2f7; }
.scene-status--generating { color: #1d4ed8; background: #dbeafe; }
.scene-status--failed,.scene-status--review_required { color: #b91c1c; background: #fee2e2; }
.film-scene__summary { margin: 12px 0; color: #5f6f87; font-size: 12px; line-height: 1.7; }
.film-dialogue { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; padding: 11px 13px; border-left: 3px solid #8b5cf6; border-radius: 0 9px 9px 0; background: #f5f3ff; }
.film-dialogue span { color: #7c3aed; font-size: 8px; font-weight: 800; letter-spacing: .08em; }.film-dialogue p { margin: 0; color: #574a72; font-size: 11px; line-height: 1.55; }
.film-prompt { margin-top: 11px; border-top: 1px dashed #dfe5ee; }
.film-prompt summary { display: flex; align-items: center; justify-content: space-between; padding: 10px 0 0; color: #69788e; cursor: pointer; font-size: 10px; font-weight: 700; list-style: none; }
.film-prompt summary::-webkit-details-marker { display: none; }.film-prompt summary svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s ease; }.film-prompt[open] summary svg { transform: rotate(180deg); }
.film-prompt > div { padding: 11px 13px; margin-top: 9px; border-radius: 10px; background: #f6f8fb; }
.film-prompt p { margin: 0 0 7px; color: #69788e; font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }.film-prompt p:last-child { margin-bottom: 0; }
.film-scene__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 15px; }
.film-scene__actions form { display: contents; }
.film-scene__actions .button:disabled { cursor: not-allowed; opacity: .52; box-shadow: none; }
.film-scene-action-note { max-width: 330px; color: #7c879b; font-size: 9px; line-height: 1.45; text-align: right; }
.film-approved { display: inline-flex; align-items: center; gap: 5px; margin-right: auto; color: #059669; font-size: 10px; font-weight: 700; }.film-approved svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.film-scene-job { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 14px; padding: 12px; border-radius: 12px; background: #edf5ff; }
.film-scene-preview { position: relative; display: block; overflow: hidden; height: 72px; border-radius: 9px; }.film-scene-preview img { width: 100%; height: 100%; object-fit: cover; }.film-scene-preview span { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(15,23,42,.25); }.film-scene-preview svg { width: 25px; height: 25px; fill: currentColor; }
.film-scene-job strong { color: #1e3a5f; font-size: 11px; }.film-scene-job p { margin: 3px 0; color: #6b7b91; font-size: 9px; }.film-scene-job > div > a { color: #2563eb; font-size: 9px; font-weight: 700; text-decoration: none; }
.film-reference-heading-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }.film-reference-heading-actions p { max-width: 360px; margin: 0; }.film-reference-heading-actions form { flex: 0 0 auto; }
.film-reference-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; margin-top: 18px; }
.film-reference-card { min-width: 0; overflow: hidden; border: 1px solid #dbe5f2; border-radius: 17px; background: #fbfdff; }
.film-reference-card__visual { position: relative; height: 220px; overflow: hidden; background: radial-gradient(circle at 50% 25%,#dbeafe,#e9eef8 55%,#cad5e5); }.film-reference-card__visual > img { width: 100%; height: 100%; object-fit: cover; }.film-reference-card__visual > span { display: grid; width: 100%; height: 100%; place-items: center; color: rgba(37,99,235,.55); font-size: 62px; font-weight: 800; }.film-reference-card__visual > small { position: absolute; top: 10px; right: 10px; backdrop-filter: blur(8px); }
.film-reference-card__body { padding: 17px; }.film-reference-card__body > span,.film-location-card > div:last-child > span { color: #2563eb; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.film-reference-card__body h4,.film-location-card h4 { margin: 4px 0 1px; color: #17243a; font-size: 16px; }.film-reference-card__body > small { color: #64748b; }
.film-reference-card dl { display: grid; gap: 9px; margin: 14px 0 0; }.film-reference-card dl > div { padding-top: 9px; border-top: 1px solid #e7edf5; }.film-reference-card dt { color: #7c8ba1; font-size: 8px; font-weight: 800; text-transform: uppercase; }.film-reference-card dd { margin: 3px 0 0; color: #4b5f79; font-size: 10px; line-height: 1.55; }
.film-reference-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 14px; }.film-reference-card__actions form { display: contents; }.film-reference-card__actions .button { min-height: 34px; padding: 8px 11px; font-size: 9px; }
.film-location-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #e4ebf4; }.film-location-card { display: grid; grid-template-columns: 142px minmax(0,1fr); overflow: hidden; border: 1px solid #dbe5f2; border-radius: 15px; background: #fff; }.film-location-card__visual { min-height: 142px; background: #e8eef7; }.film-location-card__visual img { width: 100%; height: 100%; object-fit: cover; }.film-location-card__visual span { display: grid; width: 100%; height: 100%; min-height: 142px; place-items: center; color: #6e85a3; }.film-location-card__visual svg { width: 32px; fill: none; stroke: currentColor; stroke-width: 1.6; }.film-location-card > div:last-child { min-width: 0; padding: 14px; }.film-location-card p { margin: 7px 0; color: #60718a; font-size: 10px; line-height: 1.55; }.film-location-card small { color: #8090a6; font-size: 9px; }
.film-voice-section { margin-top: 24px; padding-top: 22px; border-top: 1px solid #dce7f4; }
.film-voice-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 17px; }
.film-voice-card { min-width: 0; padding: 17px; border: 1px solid #cfe0f3; border-radius: 17px; background: linear-gradient(145deg,#f8fbff,#fff 58%,#f5f3ff); box-shadow: 0 8px 24px rgba(37,99,235,.05); }
.film-voice-card__head { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; align-items: center; }.film-voice-card__head small { color: #7688a1; font-size: 8px; font-weight: 800; text-transform: uppercase; }.film-voice-card__head h4 { margin: 2px 0 0; color: #172b46; font-size: 15px; }.film-voice-card__icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: #4f46e5; background: #e0e7ff; }.film-voice-card__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.film-voice-card > p { min-height: 34px; margin: 12px 0; color: #60718a; font-size: 10px; line-height: 1.6; }
.film-voice-picker { display: grid; gap: 6px; }.film-voice-picker label { color: #53657d; font-size: 9px; font-weight: 800; }.film-voice-picker > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }.film-voice-picker select { width: 100%; min-width: 0; min-height: 36px; padding: 7px 30px 7px 9px; border: 1px solid #d5dfec; border-radius: 9px; color: #334155; background: #fff; font-size: 9px; }
.film-voice-player { display: block; width: 100%; height: 36px; margin-top: 12px; }.film-voice-empty { display: grid; min-height: 36px; margin-top: 12px; place-items: center; border: 1px dashed #ccd8e7; border-radius: 10px; color: #8493a7; background: #f8fafc; font-size: 9px; }
.film-voice-disclosure { display: block; margin-top: 11px; color: #8594a8; font-size: 8px; overflow-wrap: anywhere; }.film-voice-policy { margin-top: 13px; padding: 12px 14px; border: 1px solid #ddd6fe; border-radius: 12px; color: #5b5575; background: #f5f3ff; font-size: 9px; line-height: 1.6; }
.film-auto-badge { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid #bfdbfe; border-radius: 999px; color: #1d4ed8; background: #eff6ff; font-size: 9px; font-weight: 800; white-space: nowrap; }.film-auto-badge i { width: 7px; height: 7px; border-radius: 50%; background: #3b82f6; box-shadow: 0 0 0 5px rgba(59,130,246,.12); animation: filmPulse 1.6s ease-in-out infinite; }
.film-character-package-grid { display: grid; gap: 18px; margin-top: 19px; }.film-character-package { display: grid; grid-template-columns: 270px minmax(0,1fr); min-width: 0; overflow: hidden; border: 1px solid #cfdeef; border-radius: 21px; background: linear-gradient(145deg,#f8fbff,#fff 46%,#faf9ff); box-shadow: 0 16px 40px rgba(30,64,175,.07); }
.film-character-package__visual { position: relative; min-height: 100%; overflow: hidden; background: radial-gradient(circle at 50% 24%,#dbeafe,#e9eef8 56%,#cbd8e9); }.film-character-package__visual > img { width: 100%; height: 100%; min-height: 480px; object-fit: cover; }.film-character-package__visual > span { display: grid; width: 100%; height: 100%; min-height: 480px; place-items: center; color: rgba(37,99,235,.5); font-size: 72px; font-weight: 900; }.film-character-package__visual > .scene-status { position: absolute; top: 13px; left: 13px; backdrop-filter: blur(10px); }
.film-character-package__identity { position: absolute; right: 0; bottom: 0; left: 0; display: grid; gap: 2px; padding: 50px 18px 17px; color: #fff; background: linear-gradient(transparent,rgba(15,23,42,.88)); }.film-character-package__identity > span { font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.film-character-package__identity strong { font-size: 21px; }.film-character-package__identity small { color: #d9e5f5; font-size: 9px; }
.film-character-package__body { min-width: 0; padding: 19px; }.film-character-package__profile { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }.film-character-package__profile > div { min-width: 0; padding: 10px 11px; border: 1px solid #e1e8f1; border-radius: 11px; background: rgba(248,250,252,.75); }.film-character-package__profile > .is-wide { grid-column: 1 / -1; }.film-character-package__profile span { color: #6b7d94; font-size: 8px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.film-character-package__profile p { margin: 4px 0 0; color: #40546e; font-size: 9px; line-height: 1.55; }
.film-character-lock-grid { display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); gap: 11px; margin-top: 12px; }.film-character-lock-item { min-width: 0; padding: 13px; border: 1px solid #d9e4f1; border-radius: 13px; background: #fbfdff; }.film-character-lock-item--voice { background: linear-gradient(145deg,#fbfdff,#f8f7ff); }.film-character-lock-item__head { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 8px; align-items: center; }.film-character-lock-item__head > div { min-width: 0; }.film-character-lock-item__head small { display: block; color: #71839b; font-size: 7px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.film-character-lock-item__head strong { display: block; margin-top: 2px; color: #273d59; font-size: 9px; line-height: 1.4; }.film-character-lock-item > form:not(.film-voice-picker) { display: flex; margin-top: 13px; }.film-character-lock-item > form:not(.film-voice-picker) .button { width: 100%; justify-content: center; }
.film-lock-icon { display: grid; width: 35px; height: 35px; place-items: center; border-radius: 10px; color: #2563eb; background: #dbeafe; }.film-lock-icon--voice { color: #6d28d9; background: #ede9fe; }.film-lock-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.film-character-lock-item .film-voice-picker { margin-top: 11px; }.film-character-lock-item .film-reference-card__actions { justify-content: space-between; }.film-character-lock-item .film-voice-disclosure { margin: 0; }
.film-character-package__approval { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 13px; padding: 13px 14px; border: 1px solid #c7d2fe; border-radius: 13px; background: linear-gradient(100deg,#eef2ff,#f8fbff); }.film-character-package__approval > div:first-child { display: grid; gap: 3px; }.film-character-package__approval strong { color: #233b61; font-size: 11px; }.film-character-package__approval span { color: #6b7d96; font-size: 9px; line-height: 1.45; }.film-character-package__approval form { flex: 0 0 auto; }
.film-character-package__locked { display: flex !important; align-items: center; gap: 10px; }.film-character-package__locked > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #047857; background: #d1fae5; }.film-character-package__locked svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; }.film-character-package__locked > div { display: grid; gap: 2px; }.film-character-package__locked small { color: #678096; font-size: 9px; }
.film-location-section { margin-top: 25px; padding-top: 22px; border-top: 1px solid #dce7f4; }
.film-scene-voice { display: grid; gap: 7px; margin-top: 11px; padding: 11px 13px; border: 1px solid #d8e3f0; border-radius: 11px; background: #f8fbff; }.film-scene-voice > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.film-scene-voice strong { color: #324c6b; font-size: 10px; }.film-scene-voice p { margin: 0; color: #60758d; font-size: 10px; line-height: 1.55; }
.film-production-panel { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 20px; align-items: center; margin: 18px 0; padding: 22px; border: 1px solid #bfdbfe; border-radius: 19px; background: linear-gradient(135deg,#eff6ff,#f8fbff 60%,#eef2ff); }.film-production-panel h3 { margin: 5px 0; color: #18395d; font-size: 18px; }.film-production-panel p { max-width: 720px; margin: 0; color: #60738b; font-size: 11px; line-height: 1.65; }.film-production-panel__actions { display: flex; align-items: flex-end; flex-direction: column; gap: 5px; }.film-production-panel__actions > strong { color: #1d4ed8; font-size: 16px; }.film-production-panel__actions > small { color: #70839c; font-size: 9px; }
.film-continuity-tag { display: inline-flex; margin-top: 7px; padding: 4px 7px; border-radius: 999px; color: #4f46e5; background: #eef2ff; font-size: 8px; font-weight: 800; }
.film-end-frame { display: grid; grid-template-columns: 112px minmax(0,1fr); gap: 12px; align-items: center; margin-top: 12px; padding: 10px; border: 1px solid #dce7f4; border-radius: 12px; background: #f8fbff; }.film-end-frame img { width: 112px; height: 64px; object-fit: cover; border-radius: 8px; }.film-end-frame strong { color: #173c64; font-size: 10px; }.film-end-frame p { margin: 3px 0; color: #60738b; font-size: 9px; }.film-end-frame small { color: #8493a7; font-size: 8px; }
.film-cascade-option { display: flex; gap: 9px; align-items: flex-start; margin-top: 12px; padding: 11px; border: 1px solid #dbe5f2; border-radius: 11px; background: #f8fbff; cursor: pointer; }.film-cascade-option input { margin-top: 3px; }.film-cascade-option span { display: grid; gap: 3px; }.film-cascade-option strong { color: #334155; font-size: 10px; }.film-cascade-option small { color: #718198; font-size: 9px; line-height: 1.45; }
.film-edit-dialog { width: min(880px, calc(100vw - 28px)); max-height: min(900px,calc(100vh - 28px)); padding: 0; overflow: hidden; }.film-generate-dialog { width: min(590px, calc(100vw - 28px)); padding: 0; overflow: hidden; }
.film-dialog-head { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 13px; align-items: center; padding: 23px 27px 20px; border-bottom: 1px solid #e5edf6; background: linear-gradient(135deg,#f8fbff,#fff); }.film-dialog-head__icon { display: grid; width: 46px; height: 46px; place-items: center; color: #2563eb; border: 1px solid #bfdbfe; border-radius: 14px; background: #eff6ff; }.film-dialog-head__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }.film-dialog-head small { display: block; margin-bottom: 3px; color: #2563eb; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.film-dialog-head h2 { margin: 0; font-size: 20px; }.film-dialog-head p { margin: 4px 0 0; color: #718096; font-size: 11px; }.film-dialog-head .app-dialog__close { top: 18px; right: 20px; }
.scene-edit-form { max-height: calc(100vh - 135px); padding: 20px 27px 0; overflow-y: auto; gap: 14px; }.scene-edit-section { padding: 16px; border: 1px solid #e2eaf3; border-radius: 14px; background: #fff; }.scene-edit-section__head { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }.scene-edit-section__head > span { display: grid; width: 28px; height: 28px; place-items: center; color: #2563eb; border-radius: 9px; background: #eff6ff; font-size: 9px; font-weight: 800; }.scene-edit-section__head > div { display: grid; gap: 1px; }.scene-edit-section__head strong { color: #263b56; font-size: 11px; }.scene-edit-section__head small { color: #7a899e; font-size: 9px; }.scene-edit-grid { display: grid; grid-template-columns: minmax(180px,.55fr) minmax(0,1.45fr); gap: 12px; }.scene-edit-grid--equal { grid-template-columns: repeat(2,minmax(0,1fr)); }.scene-edit-grid--continuity { grid-template-columns: minmax(0,1fr) 150px; align-items: start; }.scene-edit-grid__wide { min-width: 0; }.scene-edit-form .project-field { min-width: 0; margin: 0; }.scene-edit-form textarea { width: 100%; resize: vertical; }.scene-edit-grid--equal textarea { min-height: 132px; }.scene-edit-grid--continuity textarea { min-height: 88px; }.scene-dialog-footer { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 2px -27px 0; padding: 15px 27px 18px; border-top: 1px solid #e5edf6; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); }.scene-dialog-footer > span { color: #7a899e; font-size: 9px; }
.film-dialog-head--generate { background: linear-gradient(135deg,#eff6ff,#fff 72%); }.film-generation-summary { display: grid; grid-template-columns: 1.4fr repeat(3,1fr); margin: 20px 24px 0; overflow: hidden; border: 1px solid #dce7f4; border-radius: 13px; background: #e7eef7; gap: 1px; }.film-generation-summary > div { min-width: 0; padding: 11px 12px; background: #f8fbff; }.film-generation-summary span,.film-generation-lock span { display: block; color: #71839a; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }.film-generation-summary strong { display: block; margin-top: 3px; overflow: hidden; color: #263e5e; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.film-generate-form { padding: 16px 24px 22px; gap: 12px; }.film-generation-options { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 12px; }.film-generation-options .project-field { margin: 0; }.film-generation-lock { display: grid; min-height: 67px; align-content: center; padding: 10px 12px; border: 1px solid #dce7f4; border-radius: 11px; background: #f8fafc; }.film-generation-lock strong { margin-top: 5px; color: #334e70; font-size: 10px; line-height: 1.4; }.film-generation-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 11px; color: #64748b; border-radius: 10px; background: #f8fafc; }.film-generation-note svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: #64748b; stroke-width: 1.8; }.film-generation-note p { margin: 0; font-size: 9px; line-height: 1.55; }
.film-quote { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin-top: 15px; padding: 14px; border: 1px solid #bfdbfe; border-radius: 12px; background: #eff6ff; }
.film-quote span { color: #5f6f87; font-size: 10px; }.film-quote strong { color: #1d4ed8; font-size: 15px; }.film-quote small { grid-column: 1 / -1; color: #74839a; font-size: 9px; }.film-quote.is-loading { opacity: .65; }
.film-quote--prominent { margin-top: 0; padding: 15px 16px; background: linear-gradient(135deg,#eff6ff,#eef2ff); }.film-quote--prominent strong { font-size: 18px; }
.film-render-panel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; padding: 25px; border: 1px solid #c7d2fe; border-radius: 21px; background: linear-gradient(120deg, #eef2ff, #fff 58%, #f5f3ff); }
.film-render-panel__visual { position: relative; display: grid; width: 64px; height: 64px; place-items: center; border-radius: 19px; color: #4f46e5; background: #e0e7ff; }.film-render-panel__visual span { position: absolute; inset: 7px; border: 1px dashed #818cf8; border-radius: 12px; }.film-render-panel__visual svg { width: 31px; height: 31px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.film-render-panel h3 { margin: 6px 0 4px; color: #26325a; font-size: 18px; }.film-render-panel p { margin: 0; color: #6d7893; font-size: 11px; line-height: 1.6; }
.film-render-panel__actions { display: grid; justify-items: stretch; gap: 6px; min-width: 210px; text-align: center; }.film-render-panel__actions small { color: #7c879b; font-size: 9px; }
.film-danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 20px; border: 1px solid #e3e8ef; border-radius: 16px; background: #fff; }.film-danger-zone strong { color: #344154; font-size: 12px; }.film-danger-zone p { margin: 4px 0 0; color: #8792a3; font-size: 10px; }.film-danger-zone > div:last-child { display: flex; gap: 8px; }
.film-danger-zone form { display: contents; }

@keyframes filmPulse { 50% { opacity: .45; } }
@keyframes filmPulseBox { 50% { opacity: .25; transform: scale(1.08); } }
@keyframes filmDots { 0%,80%,100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-5px); opacity: 1; } }

@media (max-width: 1100px) {
    .film-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .film-create-layout { grid-template-columns: minmax(0, 1fr); }
    .film-create-guide { position: static; grid-template-columns: 1fr 1fr; }
    .film-story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.film-story-card--wide { grid-column: 1 / -1; }
    .film-character-package { grid-template-columns: 220px minmax(0,1fr); }.film-character-lock-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .films-hero,.film-studio-head { align-items: flex-start; flex-direction: column; padding: 25px 22px; }
    .films-hero .button,.film-studio-actions { width: 100%; }.film-studio-actions .button { flex: 1; justify-content: center; }
    .film-grid,.film-character-grid { grid-template-columns: 1fr; }
    .film-form-section { grid-template-columns: 1fr; padding: 23px 20px; }.film-form-section__number { width: 34px; height: 34px; }
    .film-source-options,.film-field-grid { grid-template-columns: 1fr; }.film-field-grid__wide { grid-column: auto; }
    .film-create-submit { align-items: stretch; flex-direction: column; padding: 20px; }.film-create-submit .button { justify-content: center; }
    .film-create-guide { grid-template-columns: 1fr; }
    .film-process-card { grid-template-columns: auto 1fr; padding: 20px; }.film-process-card__loader { grid-column: 1 / -1; justify-content: center; }
    .film-story-grid { grid-template-columns: 1fr; }.film-story-card--wide { grid-column: auto; }
    .film-characters,.film-scenes { padding: 19px 14px; }.film-section-heading { align-items: flex-start; flex-direction: column; gap: 6px; }.film-section-heading > p { text-align: left; }
    .film-scene { grid-template-columns: 37px minmax(0,1fr); }.film-scene__rail span { width: 29px; height: 29px; border-width: 3px; }.film-scene__card { padding: 15px 13px; }
    .film-scene__head { align-items: flex-start; flex-direction: column; gap: 7px; }.film-scene-job { grid-template-columns: 1fr; }.film-scene-preview { height: 150px; }
    .film-scene__actions { justify-content: stretch; }.film-scene__actions .button { flex: 1; justify-content: center; }.film-approved { width: 100%; }
    .film-edit-dialog,.film-generate-dialog { max-height: calc(100vh - 16px); }.film-dialog-head { padding: 19px 18px 16px; }.film-dialog-head .app-dialog__close { top: 12px; right: 12px; }.scene-edit-form { max-height: calc(100vh - 118px); padding: 15px 16px 0; }.scene-edit-grid,.scene-edit-grid--equal,.scene-edit-grid--continuity,.film-generation-options { grid-template-columns: 1fr; }.scene-dialog-footer { align-items: stretch; flex-direction: column; margin-inline: -16px; padding: 13px 16px 16px; }.scene-dialog-footer > span { display: none; }.scene-dialog-footer .app-dialog__actions { width: 100%; }.film-generation-summary { grid-template-columns: 1fr 1fr; margin: 15px 16px 0; }.film-generate-form { padding: 14px 16px 18px; }
    .film-reference-heading-actions,.film-production-panel { align-items: stretch; flex-direction: column; }.film-reference-heading-actions { display: flex; }.film-reference-heading-actions .button { width: 100%; justify-content: center; }.film-reference-grid,.film-location-grid,.film-voice-grid { grid-template-columns: 1fr; }.film-location-card { grid-template-columns: 108px minmax(0,1fr); }.film-reference-card__visual { height: 260px; }.film-production-panel { display: flex; }.film-production-panel__actions { align-items: stretch; }.film-end-frame { grid-template-columns: 90px minmax(0,1fr); }.film-end-frame img { width: 90px; height: 58px; }
    .film-render-panel { grid-template-columns: auto 1fr; padding: 20px; }.film-render-panel__actions { grid-column: 1 / -1; min-width: 0; }
    .film-danger-zone { align-items: stretch; flex-direction: column; }.film-danger-zone > div:last-child { flex-wrap: wrap; }.film-danger-zone .button { flex: 1; justify-content: center; }
    .film-notice { align-items: flex-start; flex-direction: column; }
    .film-character-package { grid-template-columns: 1fr; }.film-character-package__visual,.film-character-package__visual > img,.film-character-package__visual > span { min-height: 360px; }.film-character-lock-grid { grid-template-columns: 1fr; }.film-character-package__approval { align-items: stretch; flex-direction: column; }.film-character-package__approval .button { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
    .film-grid { gap: 14px; }.film-card__visual { min-height: 165px; }
    .film-source-option { padding: 12px; }
    .film-dialogue { grid-template-columns: 1fr; }
    .film-voice-picker > div { grid-template-columns: 1fr; }.film-voice-picker .button { width: 100%; justify-content: center; }
    .film-studio-actions { flex-direction: column; }
    .film-character-package__profile { grid-template-columns: 1fr; }.film-character-package__profile > .is-wide { grid-column: auto; }.film-character-package__visual,.film-character-package__visual > img,.film-character-package__visual > span { min-height: 300px; }.film-character-lock-item__head { grid-template-columns: auto minmax(0,1fr); }.film-character-lock-item__head > .scene-status { grid-column: 1 / -1; justify-self: start; }
}