:root {
  --bg:#f6f7fa; --paper:#fff; --ink:#17202b; --muted:#85909e; --line:#e9edf2;
  --purple:#6657e8; --green:#26ad78; --nav:#10131d; --shadow:0 14px 40px rgba(25,34,51,.055);
}
* { box-sizing:border-box }
[hidden] { display:none !important }
[hidden] { display:none!important }
body { margin:0; background:var(--bg); color:var(--ink); font:14px 'Segoe UI',Arial,sans-serif }
.app-shell { min-height:100vh; display:flex }
.sidebar { width:250px; background:var(--nav); color:#f3f4f8; display:flex; flex-direction:column; padding:24px 15px 14px; flex:none }
.brand { display:flex; align-items:center; gap:11px; margin:2px 11px 31px; color:white; font:800 17px 'Segoe UI',Arial,sans-serif; letter-spacing:-.7px; text-decoration:none }
.brand-light { font-weight:500; color:#9297a9; margin-left:4px }
.brand-mark { width:28px; height:28px; border-radius:9px; background:linear-gradient(145deg,#937aff,#5c4adb); display:flex; align-items:flex-end; justify-content:center; gap:2px; padding:7px }
.brand-mark i { display:block; width:3px; border-radius:4px; background:#fff }
.brand-mark i:nth-child(1) { height:7px; opacity:.75 }
.brand-mark i:nth-child(2) { height:13px }
.brand-mark i:nth-child(3) { height:9px; opacity:.85 }
.profile b { display:block; font-size:12px }
.profile small { display:block; font-size:10px; color:#9299a8; margin-top:3px }
.nav-label { font-size:9px; letter-spacing:1.4px; font-weight:700; color:#697184; margin:22px 10px 10px }
.nav-label.lower { margin-top:26px }
.nav { display:grid; gap:4px }
.nav-item { height:39px; padding:0 10px; border-radius:9px; display:flex; align-items:center; gap:11px; color:#aab0bf; text-decoration:none; font-size:12px; transition:.18s }
.nav-item:hover { background:#1d2231; color:white }
.nav-item.active { background:linear-gradient(90deg,#332c58,#292441); color:#e9e4ff }
.nav-icon { width:17px; text-align:center; font-size:16px; color:#8b91a4 }
.active .nav-icon { color:#b6a4ff }
.nav-new,.nav-soon { margin-left:auto; font-size:8px; letter-spacing:.5px; border-radius:4px; padding:3px 5px }
.nav-new { background:#443873; color:#cbbaff }
.nav-soon { color:#a4a8b5; background:#242838 }
.language-picker { display:flex; align-items:center; gap:6px; height:34px; padding:0 9px; border:1px solid #2d2a3d; border-radius:9px; background:#15141f; color:#b9aaff }
.language-picker select { max-width:100px; border:0; outline:0; background:transparent; color:#eeeaf8; font:600 11px 'Segoe UI',sans-serif; cursor:pointer }
.language-picker option { color:#17151f; background:#fff }
.language-icon { font-size:14px }
.sidebar-bottom { margin-top:auto }
.help-card { border:1px solid #292d3c; background:linear-gradient(150deg,#1a1e2c,#181927); padding:14px; border-radius:11px; margin:0 2px 13px; position:relative; overflow:hidden }
.help-card:after { content:''; position:absolute; width:100px; height:100px; right:-40px; top:-50px; border-radius:50%; background:#5142a4; filter:blur(35px); opacity:.33 }
.help-spark { color:#aa95ff; font-size:18px; margin-bottom:8px }
.help-card b { font-size:11px }
.help-card p { font-size:10px; line-height:1.6; color:#9298a8; margin:7px 0 11px }
.help-card a { font-size:10px; color:#c4b8ff; text-decoration:none }
.help-card a span { margin-left:5px }
.profile { border:0; border-top:1px solid #292d3b; background:none; color:#fff; display:flex; align-items:center; text-align:left; gap:9px; width:100%; padding:14px 6px 1px; cursor:pointer }
.avatar { height:31px; width:31px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,#f6c8a3,#d77877); font-size:9px; font-weight:800; color:#fff }
.dots { margin-left:auto; color:#747b8d; letter-spacing:1px }
.main-area { min-width:0; flex:1 }
.topbar { height:66px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.8); display:flex; align-items:center; justify-content:space-between; padding:0 38px; position:sticky; top:0; z-index:5; backdrop-filter:blur(15px) }
.breadcrumbs { font-size:12px; color:#9299a5 }
.breadcrumbs .slash { margin:0 10px; color:#cbd0d7 }
.breadcrumbs b { font-weight:600; color:#394251 }
.top-actions { display:flex; align-items:center; gap:18px }
.credits { height:39px; border:1px solid var(--line); border-radius:9px; display:flex; align-items:center; padding:4px 6px 4px 10px; gap:8px; background:#fff }
.coin { color:#8667e8; font-size:18px }
.credits b { font-size:11px; display:block; line-height:1.1 }
.credits small { font-size:9px; color:#969daa }
.add-credit { width:25px; height:25px; border:0; border-radius:7px; background:#f0edff; color:#6553da; font-size:18px; cursor:pointer }
.icon-button { border:0; background:none; font-size:18px; color:#747c8b; position:relative }
.notification-dot { position:absolute; right:0; top:0; width:5px; height:5px; border:1px solid white; border-radius:50%; background:#f17d8a }
.top-avatar { border:0 }
.page-content { max-width:1240px; margin:0 auto; padding:34px 38px 20px }
.page-heading { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:23px }
.eyebrow { font-size:9px; letter-spacing:1.65px; color:#7065c7; font-weight:700; display:flex; align-items:center; gap:7px }
.eyebrow-line { width:17px; height:1px; background:#8b78f2 }
.page-heading h1 { font:800 clamp(24px,3vw,33px) Segoe UI,sans-serif; letter-spacing:-1.4px; margin:9px 0 5px }
.page-heading h1 span { color:#89909d; font-weight:500 }
.page-heading p { font-size:12px; color:#87909d; margin:0 }
.history-button { height:35px; border:1px solid var(--line); background:#fff; border-radius:8px; padding:0 12px; color:#5b6573; font:500 11px 'Segoe UI'; cursor:pointer }
.history-button span { font-size:15px; margin-right:5px }
.model-switch { border:1px solid var(--line); background:white; border-radius:12px; padding:6px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin-bottom:17px; box-shadow:0 3px 14px #18223407 }
.model-tab { flex:1; display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid transparent; border-radius:9px; background:transparent; text-align:left; position:relative; color:var(--ink); cursor:pointer }
.model-tab { min-width:0 }
.model-tab>span:not(.model-logo):not(.tab-check) { min-width:0 }
.model-tab b,.model-tab small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.model-tab.selected { background:#f5f3ff; border-color:#e7e1ff }
.model-tab.disabled { opacity:.65; cursor:not-allowed }
.seedance-mark { background:#e8f5f3; color:#087e71; font-weight:800 }
.model-logo { width:33px; height:33px; display:grid; place-items:center; border-radius:10px; font:800 16px Segoe UI }
.google { color:#4285f4; background:#fff; box-shadow:0 2px 8px #252a3710 }
.veo-mark { color:#765de3; background:#f0edff }
.model-tab b { display:block; font-size:11px }
.model-tab small { display:block; margin-top:3px; font-size:9px; color:#9098a5 }
.tab-check { position:absolute; right:13px; top:18px; color:#6e5be8; font-size:13px }
.coming { margin-left:auto; border:1px solid #eceef3; color:#9ba1ad; border-radius:5px; font-size:7px; letter-spacing:.5px; padding:4px 5px }
.studio-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,.86fr); gap:17px; align-items:start }
.form-card,.preview-card,.tips-card,.queue-card { border:1px solid var(--line); background:var(--paper); border-radius:13px; box-shadow:var(--shadow) }
.form-card { padding:21px 22px 18px }
.card-title,.settings-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px }
.card-title>div,.settings-heading>div { display:flex; align-items:center; gap:9px }
.step-badge { display:grid; place-items:center; width:27px; height:23px; background:#f1efff; border-radius:7px; color:#6957df; font:700 9px Segoe UI }
.card-title h2,.settings-heading h2 { margin:0; font:700 14px Segoe UI; letter-spacing:-.25px }
.powered { font-size:9px; color:#7e6fe3; background:#f5f2ff; border-radius:99px; padding:6px 9px }
.field-label { display:flex; justify-content:space-between; align-items:center; font-size:10px; font-weight:700; margin-bottom:7px }
.optional { font-size:9px; color:#a0a6b1; font-weight:400 }
.prompt-label-row { display:flex; align-items:center; justify-content:space-between; gap:12px }
.prompt-label-row .field-label { margin-bottom:7px }
.batch-toggle { white-space:nowrap; margin-bottom:7px }
.batch-toggle[aria-pressed="true"] { color:#5945d5; font-weight:700 }
.prompt-tools { align-items:center; gap:12px; margin:0 0 7px; color:#828997; font-size:9px }
.prompt-tools:not([hidden]) { display:flex }
.file-link { color:#6f5cde; font-size:9px; cursor:pointer; font-weight:700 }
.prompt-wrap { border:1px solid #e5e8ee; border-radius:9px; overflow:hidden; transition:.2s }
.prompt-wrap:focus-within { border-color:#9e90ee; box-shadow:0 0 0 3px #8777e41a }
.prompt-wrap textarea { resize:vertical; width:100%; min-height:125px; border:0; outline:0; padding:12px 13px; font:12px/1.65 'Segoe UI'; color:#333d4a }
.prompt-wrap textarea::placeholder { color:#b0b6c0 }
.prompt-footer { height:34px; background:#fbfbfd; border-top:1px solid #eff0f3; padding:0 11px; display:flex; align-items:center; justify-content:space-between; color:#a1a7b0; font-size:8px }
.field-row { margin-top:19px; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center }
.field-row .field-label { margin:0 }
.text-link { border:0; background:none; color:#796add; font:10px 'Segoe UI'; cursor:pointer }
.upload-zone { border:1px dashed #dcdfea; border-radius:9px; min-height:101px; background:#fcfcfe; display:flex; align-items:center; padding:10px; gap:9px; transition:.2s }
.upload-zone.drag { border-color:#8171e8; background:#f7f5ff }
.upload-button { width:100%; max-width:190px; min-height:74px; border:0; background:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; color:#545e6e; cursor:pointer }
.upload-plus { height:23px; width:23px; display:grid; place-items:center; border-radius:7px; background:#f0edff; color:#6e5de0; font-size:17px }
.upload-button b { font-size:9px }
.upload-button small { font-size:8px; color:#a0a7b3 }
.image-list { display:flex; gap:8px; flex-wrap:wrap }
.image-thumb { width:72px; height:72px; position:relative; border-radius:8px; overflow:hidden; border:1px solid #e7eaf0 }
.image-thumb img { width:100%; height:100%; object-fit:cover }
.remove-image { position:absolute; right:4px; top:4px; width:19px; height:19px; border:0; border-radius:50%; background:#1119; color:#fff; cursor:pointer }
.settings-heading { margin:21px 0 12px }
.veo-placeholder { min-height:360px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:34px 20px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(135deg,#fff,#f8f7ff) }
.veo-placeholder-mark { display:grid; place-items:center; width:54px; height:54px; margin-bottom:16px; border-radius:16px; background:#f0edff; color:#6554dd; font:800 24px Segoe UI }
.veo-placeholder h2 { margin:10px 0 6px; font:800 24px Segoe UI }
.veo-placeholder p { max-width:440px; color:var(--muted); font-size:12px; line-height:1.7 }
.library-page .page-heading { margin-bottom:25px }
.library-toolbar { display:flex; align-items:center; gap:8px; margin-bottom:18px; padding-bottom:13px; border-bottom:1px solid var(--line) }
.library-filter { padding:8px 13px; border:0; border-radius:8px; background:transparent; color:#737d8b; font:600 10px 'Segoe UI'; cursor:pointer }
.library-filter.selected { background:#f0edff; color:#6554dd }
#library-count { margin-left:auto; color:#929aa6; font-size:10px }
.library-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.library-card { overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 5px 20px #18223408 }
.library-media { position:relative; display:grid; place-items:center; overflow:hidden; aspect-ratio:16/10; background:#111522; color:white }
.library-media video { display:block; width:100%; height:100%; object-fit:cover }
.library-media-placeholder { display:flex; flex-direction:column; align-items:center; gap:8px; padding:15px; color:#d9deea; text-align:center; font-size:10px }
.library-media-placeholder .library-state-icon { font-size:23px; color:#a496ff }
.library-card-body { padding:13px }
.wallet-layout { display:grid; grid-template-columns:minmax(260px,.8fr) minmax(350px,1.2fr); gap:16px; align-items:start }
.wallet-balance-card,.wallet-topup-card,.topup-invoice,.wallet-history-card { border:1px solid var(--line); border-radius:14px; background:#fff; padding:21px; box-shadow:0 7px 24px #18223408 }
.wallet-balance-card { min-height:155px; background:linear-gradient(135deg,#282044,#191725); color:#fff; border-color:#39314e }
.wallet-kicker { display:block; color:#bcb1e6; font-size:9px; letter-spacing:1.4px; font-weight:800 }
.wallet-balance-card strong { display:block; margin-top:17px; font:800 32px Segoe UI,sans-serif }
.wallet-balance-card strong small { color:#bdb9c9; font:600 12px 'Segoe UI',sans-serif }
.wallet-balance-card p,.wallet-title p { margin:7px 0 0; color:#9298a8; font-size:10px }
.wallet-title { display:flex; align-items:center; gap:11px; margin-bottom:18px }
.wallet-title h2 { margin:0; color:#f0edf8; font:700 15px Segoe UI,sans-serif }
.topup-form { display:grid; gap:8px }
.topup-form>label { color:#c5c1d0; font-size:10px; font-weight:700 }
.topup-input-row { display:flex; align-items:center; height:44px; border:1px solid #343342; border-radius:9px; background:#101119 }
.topup-input-row input { width:100%; min-width:0; border:0; outline:0; padding:0 12px; background:transparent; color:#fff; font:700 15px 'Segoe UI',sans-serif }
.topup-input-row span { padding:0 12px; color:#9c96ae; font-size:10px; white-space:nowrap }
.topup-form>small { color:#898596; font-size:9px }
.topup-form .create-button { justify-self:start; margin-top:7px }
.topup-invoice,.wallet-history-card { grid-column:1/-1 }
.invoice-content { display:flex; align-items:center; gap:26px; flex-wrap:wrap }
.invoice-content>img { width:220px; height:220px; padding:8px; object-fit:contain; border-radius:12px; background:#fff }
.invoice-details { display:grid; gap:12px; min-width:min(330px,100%) }
.invoice-details>div { display:grid; gap:4px }
.invoice-details span,.wallet-transaction small { color:#928e9e; font-size:9px }
.invoice-details b { color:#f4f0ff; font-size:12px }
.invoice-details .invoice-code { color:#b79bff; font:800 17px ui-monospace,monospace; letter-spacing:1px }
.invoice-details>small { color:#dfa35b; font-size:10px }
.wallet-history { display:grid }
.wallet-history-empty { padding:16px 0; color:#9995a4; font-size:11px }
.wallet-transaction { display:grid; grid-template-columns:minmax(150px,1fr) auto auto; gap:16px; align-items:center; padding:13px 0; border-top:1px solid #292733 }
.wallet-transaction>div { display:grid; gap:4px; min-width:0 }
.wallet-transaction>div b { color:#f0edf8; font-size:11px }
.wallet-transaction>div small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.wallet-transaction-amount { color:#ecb6bd; font-size:11px; white-space:nowrap }
.wallet-transaction-amount.is-completed { color:#70d9a8 }
.wallet-transaction-status { padding:4px 7px; border-radius:99px; background:#272530; color:#c7c2d0; font-size:8px; white-space:nowrap }
.wallet-transaction-status.completed { background:#183229; color:#7fe0b0 }
.wallet-transaction-status.cancelled,.wallet-transaction-status.failed { background:#3c2229; color:#eaa1a9 }
.library-card-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px }
.library-model-tag { overflow:hidden; color:#6657d9; font-size:9px; font-weight:700; text-overflow:ellipsis; white-space:nowrap }
.library-status { padding:4px 7px; border-radius:99px; background:#f1f2f5; color:#717987; font-size:8px; white-space:nowrap }
.library-status.done { background:#eaf8f1; color:#23865e }
.library-prompt { display:-webkit-box; overflow:hidden; min-height:48px; color:#283344; font-size:10px; line-height:1.6; -webkit-box-orient:vertical; -webkit-line-clamp:3 }
.library-date { display:block; margin-top:10px; color:#9aa2ae; font-size:8px }
.library-empty { grid-column:1/-1; display:grid; place-items:center; min-height:230px; padding:24px; border:1px dashed #dfe3ea; border-radius:12px; color:#87909d; text-align:center; font-size:12px; line-height:1.8 }
.library-empty button { margin-top:10px; padding:9px 14px; border:0; border-radius:8px; background:#6b5ce7; color:white; font:600 10px 'Segoe UI'; cursor:pointer }
.settings-note { font-size:9px; color:#a0a6b1 }
.settings-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px }
.settings-grid.seedance-active { grid-template-columns:repeat(4,minmax(0,1fr)) }
.setting { display:grid; gap:6px; color:#89909d; font-size:9px }
.setting select { width:100%; height:36px; border:1px solid #e7eaf0; border-radius:8px; padding:0 9px; background:#fff; color:#36404d; font:500 10px 'Segoe UI'; outline:none }
.setting select:focus { border-color:#a295ed }
.submit-row { display:flex; align-items:center; justify-content:space-between; border-top:1px solid #eff0f3; margin-top:19px; padding-top:15px }
.cost-note { display:flex; align-items:center; gap:7px; color:#89909d; font-size:9px }
.cost-note .coin { font-size:15px }
.cost-note b { color:#4b5564; font-size:10px; margin-left:3px }
.create-button { height:39px; padding:0 13px; border:0; border-radius:8px; background:linear-gradient(110deg,#6d5be6,#8370ef); box-shadow:0 6px 14px #705ee733; color:#fff; font:600 11px 'Segoe UI'; cursor:pointer; display:flex; align-items:center; gap:8px; transition:.18s }
.create-button:hover { transform:translateY(-1px); box-shadow:0 8px 18px #705ee744 }
.create-button:disabled { opacity:.55; cursor:wait; transform:none }
.button-arrow { font-size:15px; margin-left:4px }
.form-message { font-size:10px; color:#738090; min-height:16px; margin-top:8px }
.form-message.error { color:#d45c69 }
.form-message.success { color:#21956a }
.preview-column { display:grid; gap:12px }
.preview-card { padding:13px }
.preview-top { display:flex; justify-content:space-between; align-items:center; padding:2px 3px 11px }
.preview-top>div { display:grid; gap:4px }
.preview-label { font-size:8px; letter-spacing:1px; color:#9aa1ad; font-weight:700 }
.preview-top b { font:700 11px Segoe UI }
.more-button { border:0; background:none; color:#959daa; letter-spacing:2px; cursor:pointer }
.preview-canvas { height:218px; border-radius:9px; overflow:hidden; position:relative; background:radial-gradient(ellipse at 50% 110%,#574c9f 0,#262544 34%,#151a2b 77%); color:white; display:grid; place-items:center }
.preview-glow { position:absolute; width:145px; height:145px; border-radius:50%; background:#9c7eff; filter:blur(63px); opacity:.45; top:28px; left:calc(50% - 72px) }
.preview-orbit { position:absolute; border:1px solid #e5dfff30; border-radius:50%; transform:rotate(-28deg) }
.orbit-one { width:260px; height:104px }
.orbit-two { width:205px; height:150px; transform:rotate(48deg); border-color:#bbaeff20 }
.preview-center { text-align:center; z-index:1 }
.play-orb { width:42px; height:42px; border:1px solid #ffffff67; border-radius:50%; display:grid; place-items:center; margin:0 auto 10px; background:#ffffff12; backdrop-filter:blur(5px); color:white; font-size:13px }
.preview-center p { margin:0 0 4px; font:600 11px Segoe UI }
.preview-center small { font-size:8px; color:#c4c1d5 }
.preview-corner { position:absolute; font-size:7px; letter-spacing:.8px; color:#e4dffb }
.top-left { top:11px; left:12px }
.bottom-left { bottom:10px; left:12px; background:#fff2; padding:4px 6px; border-radius:4px }
.bottom-right { bottom:11px; right:12px }
.preview-footer { height:32px; display:flex; align-items:end; gap:6px; color:#89909d; font-size:9px }
.status-light { width:6px; height:6px; border-radius:50%; display:inline-block; background:#37bd86; box-shadow:0 0 0 3px #37bd861c }
.preview-quality { margin-left:auto; color:#8775e8; background:#f3f0ff; border-radius:4px; padding:3px 5px; font-size:8px }
.tips-card { display:flex; gap:10px; padding:13px }
.tips-icon { width:27px; height:27px; display:grid; place-items:center; border-radius:8px; background:#f3f0ff; color:#7968df; flex:none }
.tips-card b { font:700 10px Segoe UI }
.tips-card p { font-size:9px; line-height:1.55; color:#939aa6; margin:5px 0 }
.tips-card button { border:0; background:none; padding:0; color:#7667dc; font:600 9px 'Segoe UI'; cursor:pointer }
.tips-card button span { margin-left:4px }
.queue-card { padding:13px }
.queue-title { display:flex; align-items:center; gap:7px; font-size:10px }
.queue-title>span:first-child { font-size:15px; color:#8270e7 }
.queue-count { margin-left:auto; color:#939aa6; background:#f2f3f6; border-radius:5px; padding:3px 6px; font-size:8px }
.empty-task { padding:15px 0 4px; color:#a3a9b3; font-size:9px }
.task-row { display:flex; align-items:center; gap:8px; border-top:1px solid #f0f1f4; padding:9px 0 }
.task-thumb { height:29px; width:39px; border-radius:5px; background:linear-gradient(140deg,#342858,#a992e0); display:grid; place-items:center; color:#fff; font-size:12px }
.task-copy { min-width:0; flex:1 }
.task-copy b { display:block; font-size:9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.task-copy small { display:block; color:#9da4af; font-size:8px; margin-top:3px }
.task-state { font-size:8px; color:#836fe4 }
.task-state.done { color:#28a675 }
.page-footer { display:flex; justify-content:space-between; color:#a0a6b1; font-size:9px; padding:19px 2px }
.page-footer .status-light { width:5px; height:5px; margin-right:4px }
.page-footer b { font-weight:500; color:#687382 }
.footer-dot { padding:0 4px }
.toast { position:fixed; bottom:22px; left:50%; transform:translate(-50%,15px); opacity:0; pointer-events:none; background:#202330; color:white; padding:11px 15px; border-radius:9px; box-shadow:0 8px 26px #1114; font-size:11px; z-index:20; transition:.25s }
.toast.show { opacity:1; transform:translate(-50%,0) }
.auth-backdrop { position:fixed; inset:0; z-index:30; display:grid; place-items:center; padding:20px; background:rgba(13,16,25,.58); backdrop-filter:blur(7px) }
.auth-dialog { width:min(100%,420px); position:relative; border:1px solid #ffffffb8; border-radius:18px; background:#fff; box-shadow:0 28px 90px #0c10204d; padding:27px 30px 24px; animation:auth-in .18s ease-out }
@keyframes auth-in { from { opacity:0; transform:translateY(8px) scale(.99) } to { opacity:1; transform:translateY(0) scale(1) } }
.auth-close { position:absolute; right:15px; top:13px; width:30px; height:30px; border:0; border-radius:8px; color:#7b8491; background:#f4f5f8; font-size:20px; cursor:pointer }
.auth-brand { color:#202432; margin:0 0 20px; font-size:16px }
.auth-brand .brand-light { color:#9297a9 }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; border-radius:9px; padding:4px; background:#f3f4f7 }
.auth-tab { border:0; border-radius:7px; padding:9px 8px; color:#858d99; background:transparent; font:600 11px 'Segoe UI'; cursor:pointer }
.auth-tab.active { color:#5647ce; background:#fff; box-shadow:0 2px 7px #161d2a10 }
.auth-intro { margin:21px 0 17px }
.auth-intro h2,.account-panel h2 { margin:0 0 6px; color:#202735; font:750 20px Segoe UI,sans-serif; letter-spacing:-.5px }
.auth-intro p,.account-panel>p { margin:0; color:#8b93a0; font-size:11px; line-height:1.6 }
.auth-form { display:grid; gap:12px }
.auth-form label { display:grid; gap:6px; color:#596372; font-size:10px; font-weight:600 }
.auth-form input { width:100%; height:40px; border:1px solid #e4e7ed; border-radius:8px; outline:0; padding:0 11px; background:#fff; color:#222c38; font:12px 'Segoe UI'; transition:.15s }
.auth-form input::placeholder { color:#b0b6c0 }
.auth-form input:focus { border-color:#9182e9; box-shadow:0 0 0 3px #8777e41a }
.auth-submit { height:42px; border:0; border-radius:9px; margin-top:4px; padding:0 13px; display:flex; align-items:center; justify-content:space-between; background:linear-gradient(110deg,#6d5be6,#8370ef); color:#fff; box-shadow:0 6px 14px #705ee72b; font:650 11px 'Segoe UI'; cursor:pointer }
.auth-submit:disabled { opacity:.55; cursor:wait }
.auth-submit span { font-size:16px }
.auth-message { min-height:16px; margin:9px 0 0; color:#d45c69; font-size:10px; line-height:1.5 }
.auth-message.success { color:#21956a }
.auth-security { border-top:1px solid #eff0f4; padding-top:12px; margin-top:13px; color:#a1a8b2; font-size:9px; text-align:center }
.account-panel { text-align:center; padding-top:9px }
.account-check { width:43px; height:43px; display:grid; place-items:center; margin:0 auto 13px; border-radius:50%; background:#eaf8f1; color:#23a875; font-size:20px }
.account-balance { display:flex; justify-content:space-between; align-items:center; padding:13px 14px; margin:19px 0 12px; background:#f7f6ff; border:1px solid #eeebff; border-radius:9px; color:#727b8a; font-size:10px }
.account-balance b { color:#5748ce; font:700 15px Segoe UI }
.account-panel .auth-submit { width:100%; justify-content:center; background:#f2f3f6; color:#5a6472; box-shadow:none }
@media(max-width:1020px) {
  .sidebar { width:220px }
  .page-content { padding-left:24px; padding-right:24px }
  .topbar { padding:0 24px }
  .studio-grid { grid-template-columns:minmax(0,1.3fr) minmax(250px,.8fr) }
}
@media(max-width:820px) {
  .sidebar { width:66px; padding:20px 9px }
  .brand { margin:2px auto 28px }
  .brand>span:last-child,.nav-label,.nav-item>span:not(.nav-icon),.help-card,.profile>span:not(.avatar) { display:none }
  .nav-item { justify-content:center; padding:0 }
  .nav-icon { font-size:17px }
  .profile { justify-content:center }
  .studio-grid { grid-template-columns:1fr }
  .preview-column { grid-template-columns:1fr 1fr }
  .preview-card { grid-column:1/-1 }
  .page-heading h1 span { display:block }
  .library-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media(max-width:580px) {
  .sidebar { width:54px; padding:16px 6px }
  .topbar { height:57px; padding:0 13px }
  .page-content { padding:23px 13px }
  .top-actions { gap:10px }
  .page-heading { align-items:flex-start }
  .page-heading p { max-width:285px; line-height:1.5 }
  .history-button { font-size:0; width:34px; padding:0 }
  .history-button span { font-size:15px; margin:0 }
  .model-tab { padding:9px 7px; gap:6px }
  .model-switch { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .model-logo { width:27px; height:27px }
  .model-tab b { font-size:9px }
  .model-tab small { font-size:7px }
  .tab-check { right:5px }
  .coming { display:none }
  .form-card { padding:17px 14px }
  .optional { display:block; margin-top:3px }
  .field-label { align-items:flex-start; gap:4px; flex-direction:column }
  .field-row .field-label { display:block }
  .settings-grid { gap:6px }
  .settings-grid.seedance-active { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .setting select { padding:0 5px; font-size:9px }
  .preview-column { grid-template-columns:1fr }
  .preview-card { grid-column:auto }
  .library-grid { grid-template-columns:1fr }
  .page-footer { gap:12px; flex-direction:column }
  .powered { font-size:8px; padding:5px 6px }
}

/* Dark, cinematic studio refresh inspired by modern AI creative suites. */
:root { --bg:#0a0b11; --paper:#11131c; --ink:#f4f3f8; --muted:#9698aa; --line:#252735; --purple:#a78bfa; --green:#55d6a1; --nav:#0d0e15; --shadow:0 18px 55px rgba(0,0,0,.24) }
body { background:radial-gradient(ellipse at 76% 0%,#211b3b 0,transparent 31%),var(--bg); color:var(--ink) }
.app-shell { background:transparent }
.sidebar { background:rgba(12,13,20,.96); border-right:1px solid #ffffff0c; padding-top:25px }
.brand { font-size:18px; letter-spacing:-.8px }
.brand-mark { box-shadow:0 0 24px #8b5cf644 }
.nav-item { color:#a0a1b2 }
.nav-item:hover { background:#1a1b27 }
.nav-item.active { background:linear-gradient(100deg,#31254a,#201d2e); color:#f1eaff; box-shadow:inset 2px 0 #b49aff }
.language-picker { border-color:#292532; background:#14131c }
.help-card { background:linear-gradient(145deg,#191723,#12131c); border-color:#292532 }
.main-area { min-height:100vh; background-image:radial-gradient(ellipse at 65% 13%,#30245222,transparent 44%) }
.topbar { height:70px; border-color:#ffffff0d; background:#0b0c12d9; padding:0 clamp(20px,4vw,58px) }
.breadcrumbs { color:#7f8190 }
.breadcrumbs b { color:#e9e7ef }
.credits { border-color:#302c40; background:#15141f; color:#d6d0e5 }
.credits small { color:#8c899a }
.icon-button { border-color:#282936; background:#14151d; color:#d3d1db }
.page-content { width:min(1440px,100%); margin:auto; padding:38px clamp(20px,4vw,58px) 24px }
.page-heading { align-items:flex-end; margin-bottom:25px }
.eyebrow { color:#b5a0ff; font-size:9px; letter-spacing:1.6px }
.eyebrow-line { background:#a78bfa; box-shadow:0 0 14px #a78bfa99 }
.page-heading h1 { margin:13px 0 8px; color:#faf9fc; font-size:clamp(30px,3.4vw,45px); letter-spacing:-1.8px; line-height:1.12 }
.page-heading h1 span { color:#9e9bae; font-weight:500 }
.page-heading p { color:#9b9baa; font-size:13px; line-height:1.6 }
.history-button { border-color:#30313e; background:#171821; color:#dad8e2; border-radius:10px; height:39px; font-size:11px; transition:.2s }
.history-button:hover { border-color:#8f75d7; color:#fff; background:#211d30 }
.model-switch { background:#11121a; border-color:#282936; border-radius:15px; padding:7px; gap:8px; box-shadow:0 10px 35px #0003; margin-bottom:18px }
.model-tab { min-height:61px; padding:11px 14px; border-radius:11px; color:#eeedf4 }
.model-tab.selected { background:linear-gradient(115deg,#211d2e,#181923); border-color:#50416c; box-shadow:inset 0 0 0 1px #ffffff04 }
.model-tab:hover:not(.selected) { background:#171821 }
.model-tab b { font:700 12px Segoe UI; color:#f2f0f6 }
.model-tab small { color:#9695a6; font-size:9px }
.model-logo { box-shadow:0 3px 12px #0003 }
.google { background:#20212b }
.seedance-mark { background:#172a29; color:#72d9bd }
.veo-mark { color:#c0afff; background:#272137 }
.tab-check { color:#c6aaff }
.studio-grid { gap:18px; grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr) }
.form-card,.preview-card,.tips-card,.queue-card,.veo-placeholder { border:1px solid #292a38; background:linear-gradient(155deg,#14151f,#101119); border-radius:16px; box-shadow:0 18px 55px #0003 }
.form-card { padding:24px }
.card-title,.settings-heading { margin-bottom:20px }
.card-title h2,.settings-heading h2 { color:#f1eff6; font-size:14px }
.step-badge { background:#282239; color:#c1aaff; border:1px solid #42345b }
.powered { color:#d0bcff; background:#282238; border:1px solid #3d3154 }
.field-label { color:#dfdce7; font-size:11px }
.optional { color:#858596; font-size:9px }
.text-link { color:#b9a4ff }
.text-link:hover { color:#e1d5ff }
.prompt-wrap { border-color:#30313f; border-radius:11px; background:#0e0f16 }
.prompt-wrap:focus-within { border-color:#9374de; box-shadow:0 0 0 3px #a78bfa19 }
.prompt-wrap textarea { min-height:150px; background:#101119; color:#f3f0f7; font-size:12px; line-height:1.75 }
.prompt-wrap textarea::placeholder { color:#686a7a }
.prompt-footer { background:#14151e; border-color:#252633; color:#898a9a }
.upload-zone { min-height:110px; border-color:#373344; background:linear-gradient(120deg,#14151e,#12131b); border-radius:11px }
.upload-zone.drag { border-color:#a58af4; background:#211d2c }
.upload-plus { background:#282239; color:#c7adff }
.upload-button { color:#e3e0ea }
.upload-button small { color:#858595 }
.image-thumb { border-color:#373442 }
.settings-heading { margin-top:24px }
.settings-note { color:#848596 }
.setting { color:#a2a1b0; font-size:10px }
.setting select { height:39px; border-color:#30313e; background:#151620; color:#e8e6ef; border-radius:9px; font-size:10px }
.setting select:focus { border-color:#a18add }
.setting select option { background:#151620; color:#f1eff6 }
.submit-row { border-color:#292a37; margin-top:22px; padding-top:18px }
.cost-note { color:#9998a8 }
.cost-note b { color:#efedf5 }
.create-button { min-height:43px; height:auto; padding:0 16px; border-radius:10px; background:linear-gradient(110deg,#7658db,#a276ec); box-shadow:0 8px 24px #8d63e633; font-size:11px }
.create-button:hover { box-shadow:0 10px 30px #9a70ed55 }
.form-message { color:#a09eae }
.preview-column { gap:14px }
.preview-card { padding:15px }
.preview-label { color:#9c99ac; letter-spacing:1.25px }
.preview-top b { color:#eeecf4; font-size:12px }
.more-button { color:#a09eaf }
.preview-canvas { height:auto; min-height:300px; aspect-ratio:9/10; border:1px solid #333040; border-radius:12px; background:radial-gradient(ellipse at 50% 42%,#57438b 0,#28213e 29%,#171824 65%,#101119 100%) }
.preview-canvas.is-loading .orbit-one { animation:preview-orbit 5.5s linear infinite }
.preview-canvas.is-loading .orbit-two { animation:preview-orbit-reverse 7s linear infinite }
.preview-canvas.is-loading .preview-glow { animation:preview-glow 2.2s ease-in-out infinite alternate }
.preview-canvas.is-error .play-orb { color:#ffc1c1; border-color:#ff9e9e66; background:#ff525214 }
.preview-spinner { width:21px; height:21px; display:block; border:2px solid #ffffff35; border-top-color:#fff; border-right-color:#d4c2ff; border-radius:50%; animation:preview-spin .8s linear infinite }
.preview-video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#10131d }
@keyframes preview-spin { to { transform:rotate(360deg) } }
@keyframes preview-orbit { to { transform:rotate(332deg) } }
@keyframes preview-orbit-reverse { to { transform:rotate(-312deg) } }
@keyframes preview-glow { from { opacity:.22; transform:scale(.82) } to { opacity:.52; transform:scale(1.12) } }
@media (prefers-reduced-motion:reduce) { .preview-canvas.is-loading .orbit-one,.preview-canvas.is-loading .orbit-two,.preview-canvas.is-loading .preview-glow,.preview-spinner { animation-duration:4s } }
.preview-glow { width:190px; height:190px; background:#b68cff; filter:blur(82px); opacity:.35 }
.preview-orbit { border-color:#e5dfff20 }
.preview-center { padding:20px }
.play-orb { width:50px; height:50px; border-color:#ffffff55; background:#ffffff12; box-shadow:0 0 30px #c3a3ff22 }
.preview-center p { color:#f4f0fa; font-size:12px }
.preview-center small { color:#b1aabd; font-size:9px }
.preview-corner { color:#e8dcff; font-size:8px }
.preview-footer { color:#aaa8b7 }
.preview-footer .status-light.is-pulsing { background:#a98aff; box-shadow:0 0 0 3px #a98aff26,0 0 12px #a98aff88; animation:preview-status-pulse 1.3s ease-in-out infinite }
.preview-footer .status-light.is-error { background:#ed7777; box-shadow:0 0 0 3px #ed777726 }
@keyframes preview-status-pulse { 50% { opacity:.42; transform:scale(.82) } }
.preview-quality { color:#d0b9ff; background:#2c243a }
.tips-card,.queue-card { padding:15px }
.tips-icon { background:#292339; color:#d0b7ff }
.tips-card b,.queue-title { color:#edeaf3 }
.tips-card p { color:#9d9baa; font-size:10px }
.tips-card button { color:#b9a2ff }
.queue-title>span:first-child { color:#b6a0f4 }
.queue-count { color:#d3c8ef; background:#292436 }
.empty-task { color:#9291a0 }
.task-row { border-color:#282936 }
.task-copy b { color:#e7e4ed }
.task-copy small { color:#9695a4 }
.page-footer { color:#777887; border-top:1px solid #ffffff0c; margin-top:9px; padding-top:19px }
.page-footer b { color:#c3c0ce }
.page-footer .status-light { box-shadow:0 0 0 3px #37bd861a,0 0 12px #37bd8666 }
.library-page .library-toolbar { border-color:#282936 }
.library-filter { color:#a3a1b1 }
.library-filter.selected { background:#2a2438; color:#ddcbff }
.library-card { border-color:#2a2b38; background:#13141d; box-shadow:0 10px 30px #0003 }
.wallet-balance-card,.wallet-topup-card,.topup-invoice,.wallet-history-card { border-color:#2b2937; background:#13141d; box-shadow:0 10px 30px #0003 }
.wallet-balance-card { background:linear-gradient(135deg,#282044,#191725) }
.library-prompt { color:#e4e1eb }
.library-status { background:#242530; color:#c0bdca }
.library-status.done { background:#153126; color:#7ee0b2 }
.library-retry-button { margin-top:10px; min-height:32px; padding:0 12px; border:1px solid #7759d8; border-radius:8px; background:linear-gradient(110deg,#7255d9,#9861e8); color:#fff; font:700 10px 'Segoe UI',sans-serif; cursor:pointer; box-shadow:0 5px 16px #784fba35 }
.library-retry-button:hover { filter:brightness(1.12); transform:translateY(-1px) }
.library-retry-button:disabled { opacity:.62; cursor:wait; transform:none }
.library-date,#library-count { color:#9695a4 }
.library-empty { border-color:#33313f; color:#a4a1b1 }
@media(max-width:760px) { .wallet-layout { grid-template-columns:1fr }.wallet-transaction { grid-template-columns:minmax(0,1fr) auto; gap:9px }.wallet-transaction-status { grid-column:2; justify-self:end }.invoice-content>img { width:190px; height:190px } }
.library-empty button { background:#785cde }
.veo-placeholder { background:radial-gradient(ellipse at 50% 20%,#34284e,#14151f 63%); color:#f2eff7 }
.veo-placeholder h2 { color:#f4f0f8 }
.veo-placeholder p { color:#b1adbd }
.veo-placeholder-mark { background:#30263f; color:#d0b7ff }
.page-heading h1 span { color:#a4a1b1 }
.settings-grid { grid-template-columns:repeat(4,minmax(0,1fr)) }
.toast { background:#f1edfa; color:#211c2b; box-shadow:0 12px 38px #0006 }
.auth-dialog { background:#14151f; border-color:#353342; box-shadow:0 30px 100px #0009 }
.auth-brand { color:#f5f1fa }
.auth-intro h2,.account-panel h2 { color:#f2eff6 }
.auth-intro p,.account-panel>p { color:#aaa8b8 }
.auth-tabs { background:#1d1e29 }
.auth-tab.active { background:#2d283a; color:#ddceff; box-shadow:none }
.auth-form label { color:#c7c4d1 }
.auth-form input { background:#101119; border-color:#333340; color:#f2eef8 }
.auth-form input::placeholder { color:#777785 }
.auth-security { border-color:#30303c; color:#9694a2 }
.auth-close { background:#242530; color:#ccc9d4 }
.account-balance { background:#211d2c; border-color:#373047; color:#c1bdcb }
.account-balance b { color:#dacaff }
@media(max-width:820px) { .studio-grid { grid-template-columns:1fr } .preview-canvas { min-height:280px; aspect-ratio:16/10 } }
@media(max-width:580px) { .page-content { padding-top:27px } .page-heading h1 { font-size:30px; letter-spacing:-1.2px } .page-heading { gap:10px } .model-switch { gap:5px } .model-tab { background:#151620 } .form-card { padding:18px 15px } .settings-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px } .preview-canvas { min-height:235px } }

/* Feature workflow: concept → script → assets → shot list */
.film-page { max-width:1480px }
.film-heading-actions { display:flex; align-items:center; gap:12px }
.film-save-state { color:#8e8c9d; font-size:10px; white-space:nowrap }
.film-project-strip { display:grid; grid-template-columns:minmax(220px,1fr) minmax(190px,280px) auto; align-items:end; gap:13px; margin:20px 0 18px; padding:15px; border:1px solid #292936; border-radius:13px; background:linear-gradient(115deg,#15151f,#11121a) }
.film-project-name,.film-project-picker-label { display:grid; gap:7px; min-width:0 }
.film-project-name>span,.film-project-picker-label>span { color:#898797; font-size:9px; letter-spacing:.8px; font-weight:700 }
.film-project-name input,.film-project-picker-label select,.film-field input,.film-field textarea,.film-field select,.film-asset-fields input,.film-asset-fields textarea,.film-reference-input,.film-scene-header input,.film-scene-meta select { width:100%; min-width:0; border:1px solid #30313e; border-radius:9px; outline:0; background:#101119; color:#eeecf4; padding:10px 12px; font:inherit; font-size:11px; transition:border-color .18s,box-shadow .18s }
.film-project-name input,.film-project-picker-label select { height:39px }
.film-project-name input:focus,.film-project-picker-label select:focus,.film-field input:focus,.film-field textarea:focus,.film-field select:focus,.film-asset-fields input:focus,.film-asset-fields textarea:focus,.film-reference-input:focus,.film-scene-header input:focus,.film-scene-meta select:focus { border-color:#9876ea; box-shadow:0 0 0 3px #9876ea17 }
.film-new-project,.film-quiet-button { border:1px solid #353443; border-radius:9px; background:#1a1b26; color:#d3d0dc; padding:10px 13px; min-height:39px; font:inherit; font-size:10px; cursor:pointer; transition:.18s }
.film-new-project:hover,.film-quiet-button:hover { color:#fff; border-color:#8064ca; background:#242032 }
.film-workflow-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:16px; align-items:start }
.film-step-nav,.film-stage { border:1px solid #292936; border-radius:14px; background:#12131c }
.film-step-nav { position:sticky; top:18px; padding:9px; display:grid; gap:5px }
.film-step-button { position:relative; display:grid; grid-template-columns:34px 1fr; grid-template-rows:auto auto; column-gap:10px; align-items:center; width:100%; padding:12px 10px; border:1px solid transparent; border-radius:10px; text-align:left; background:transparent; color:#aaa8b7; cursor:pointer }
.film-step-button>span { grid-row:1/3; display:grid; place-items:center; width:30px; height:30px; border:1px solid #373544; border-radius:9px; color:#aaa1c1; font-size:9px; font-weight:700 }
.film-step-button b { color:#d5d2de; font-size:11px }
.film-step-button small { margin-top:4px; color:#858393; font-size:9px }
.film-step-button:hover { background:#1a1b25 }
.film-step-button.active { border-color:#493a67; background:linear-gradient(100deg,#29223a,#1b1a26); box-shadow:inset 2px 0 #9b78f0 }
.film-step-button.active>span { border-color:#7257ad; background:#332747; color:#dfd0ff }
.film-step-button.active b { color:#f1eaff }
.film-step-tip { margin:13px 3px 3px; padding:13px 11px; border:1px solid #292738; border-radius:10px; background:#171621 }
.film-step-tip b { color:#c8b5f0; font-size:10px }
.film-step-tip p { margin:7px 0 0; color:#9290a0; font-size:9px; line-height:1.7 }
.film-stage { min-height:530px; padding:22px }
.film-step-panel[hidden] { display:none }
.film-panel-heading { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:21px; padding-bottom:15px; border-bottom:1px solid #292a37 }
.film-panel-heading>div { display:flex; align-items:center; gap:10px }
.film-panel-heading h2 { margin:0; color:#f1eef6; font-size:16px; letter-spacing:-.3px }
.film-panel-heading>span { color:#8e8c9b; font-size:9px; text-align:right }
.step-badge { display:grid; place-items:center; width:29px; height:29px; border:1px solid #493a67; border-radius:9px; background:#282139; color:#d3bfff; font-size:9px; font-weight:700 }
.film-field { display:grid; gap:8px; min-width:0; margin:0 0 15px; color:#b9b6c4; font-size:10px }
.film-field>span,.film-act-card>span { color:#a09dae; font-size:9px; font-weight:600 }
.film-field input,.film-field select,.film-asset-fields input,.film-scene-header input,.film-scene-meta select { height:39px }
.film-field textarea,.film-asset-fields textarea { min-height:74px; line-height:1.6; resize:vertical }
.film-field input::placeholder,.film-field textarea::placeholder,.film-asset-fields input::placeholder,.film-asset-fields textarea::placeholder,.film-scene-header input::placeholder,.film-reference-input::placeholder { color:#696879 }
.film-settings-row { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.film-step-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:22px; padding-top:16px; border-top:1px solid #292a37 }
.film-step-actions>span { color:#868493; font-size:9px }
.film-step-actions .create-button { min-height:40px }
.film-next { margin-left:auto }
.film-act-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
.film-act-card { display:grid; align-content:start; gap:9px; padding:13px; border:1px solid #2e2d3b; border-radius:11px; background:linear-gradient(145deg,#181923,#14151e) }
.film-act-card>span { letter-spacing:.5px; color:#c3aaff }
.film-act-card textarea { width:100%; border:0; outline:0; resize:vertical; background:transparent; color:#e8e5ef; font:inherit; font-size:10px; line-height:1.65 }
.film-act-card textarea::placeholder,.film-reference-input::placeholder { color:#696879 }
.film-section-note { margin:-7px 0 17px; color:#9391a0; font-size:10px; line-height:1.6 }
.film-asset-toolbar,.film-episode-toolbar { display:flex; align-items:end; flex-wrap:wrap; gap:9px; margin-bottom:13px }
.film-inline-field { display:grid; gap:6px; min-width:155px; color:#9694a3; font-size:9px }
.film-inline-field select { height:37px; border:1px solid #30313e; border-radius:8px; background:#101119; color:#e8e6ef; padding:0 10px; font:inherit; font-size:10px }
.film-asset-list { display:grid; gap:9px }
.film-asset-card { display:grid; grid-template-columns:54px minmax(0,1fr) 32px; gap:11px; align-items:start; padding:12px; border:1px solid #2b2c39; border-radius:11px; background:#151620 }
.film-asset-code { display:grid; place-items:center; height:38px; border:1px solid #3b3650; border-radius:9px; background:#252134; color:#d8c7ff; font-size:11px; font-weight:700 }
.film-asset-code.type-S { color:#a9d8ff; border-color:#304153; background:#1b2834 }
.film-asset-code.type-P { color:#f2cb9d; border-color:#4a3d2d; background:#2c251e }
.film-asset-fields { display:grid; gap:8px }
.film-asset-fields textarea { min-height:56px }
.film-remove-button { display:grid; place-items:center; width:30px; height:30px; border:1px solid #3d303a; border-radius:8px; background:#211a23; color:#d89aa7; font-size:17px; cursor:pointer }
.film-remove-button:hover { color:#fff; background:#532b39 }
.film-empty { padding:24px; border:1px dashed #373545; border-radius:11px; color:#928f9e; text-align:center; font-size:10px; line-height:1.6 }
.film-episode-toolbar { align-items:end }
.film-scenes { display:grid; gap:12px }
.film-scene-card { display:grid; gap:13px; padding:14px; border:1px solid #2d2e3b; border-radius:12px; background:#151620 }
.film-scene-card.selected { border-color:#5a477e; box-shadow:0 0 0 2px #9d7bed0a }
.film-scene-header { display:grid; grid-template-columns:minmax(0,1fr) auto 30px; gap:8px; align-items:center }
.film-scene-header input { background:#101119; font-weight:600 }
.film-select-scene { min-height:35px; padding:7px 10px }
.film-scene-meta { display:flex; gap:8px }
.film-scene-meta select { width:auto; min-width:130px; padding:0 10px }
.film-reference-input { height:37px }
.film-beat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px }
.film-beat-grid .film-field { margin:0 }
.film-beat-grid .film-field textarea { min-height:90px }
.film-continuity { margin-top:15px; padding:13px; border:1px solid #373047; border-radius:11px; background:#1a1722 }
.film-continuity .film-field { margin:0 }
.film-prompt-preview { margin-top:13px; overflow:hidden; border:1px solid #302d3d; border-radius:11px; background:#0e0f16 }
.film-prompt-preview>div { display:flex; justify-content:space-between; align-items:center; padding:10px 13px; border-bottom:1px solid #292a37; color:#d8d4e1; font-size:10px }
.film-prompt-preview .text-link { border:0; background:none; cursor:pointer; font:inherit }
.film-prompt-preview pre { max-height:210px; overflow:auto; margin:0; padding:13px; color:#b9b5c5; white-space:pre-wrap; font:10px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace }
.film-ai-callout { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-top:19px; padding:15px; border:1px solid #4a3a69; border-radius:11px; background:linear-gradient(110deg,#211c2d,#171722) }
.film-ai-callout b { color:#e5d8ff; font-size:11px }
.film-ai-callout p { margin:6px 0 0; max-width:540px; color:#9995a7; font-size:9px; line-height:1.6 }
.film-ai-callout .create-button { flex:none }
.film-ai-actions { display:flex; flex-direction:column; gap:8px; flex:none }
.film-ai-actions button { justify-content:center; min-height:39px }
.film-run-cost-note { display:block; margin-top:8px; color:#c3a9a0; font-size:9px; line-height:1.5 }
.film-run-progress { margin:12px 0; padding:14px 16px; border:1px solid #514172; border-radius:11px; background:linear-gradient(110deg,#201a2e,#15151f) }
.film-run-progress-head { display:flex; justify-content:space-between; gap:12px; color:#e8defb; font-size:10px }
.film-run-progress progress { display:block; width:100%; height:8px; margin:10px 0 7px; accent-color:#9875ee }
.film-run-progress p { margin:0; color:#a6a1b2; font-size:9px; line-height:1.5 }
.film-run-stop { min-height:34px; padding:0 10px; border:1px solid #70414b; border-radius:8px; background:#251a20; color:#f0b5ba; font:600 9px 'Segoe UI'; cursor:pointer }
.film-run-stop:hover { background:#3b222b; color:#fff }
.film-ai-status { min-height:17px; margin:9px 0 0; color:#a69bc2; font-size:10px; line-height:1.6 }
.film-ai-status:empty { display:none }
.film-ai-status.error { color:#ff9da5 }
.settings-page { max-width:1000px }
.deepseek-settings-card { max-width:720px; padding:22px; border:1px solid #2b2c39; border-radius:14px; background:#12131c }
.deepseek-settings-card .film-panel-heading { margin-bottom:20px }
.settings-card-actions { display:flex; justify-content:flex-end; gap:9px; padding-top:5px }
.settings-card-actions button { min-height:40px }
.settings-security-note { max-width:600px; margin:12px 0 0; color:#777685; font-size:9px; line-height:1.7 }
.deepseek-settings-card .film-field { margin-bottom:17px }
.deepseek-settings-card input,.deepseek-settings-card select { width:100%; height:42px; border:1px solid #30313e; border-radius:9px; padding:0 12px; outline:0; background:#101119; color:#eeecf4; font:inherit; font-size:11px }
.deepseek-settings-card input:focus,.deepseek-settings-card select:focus { border-color:#9876ea; box-shadow:0 0 0 3px #9876ea17 }
.deepseek-settings-card input::placeholder { color:#696879 }
.deepseek-settings-card select option { background:#151620; color:#f1eff6 }
.film-settings-row-three { grid-template-columns:repeat(3,minmax(0,1fr)) }
.film-asset-card { grid-template-columns:54px minmax(0,1fr) 34px }
.film-asset-image-tools { grid-column:2/4; display:flex; align-items:center; flex-wrap:wrap; gap:9px; min-width:0 }
.film-asset-image-tools .film-quiet-button,.film-asset-image-button { min-height:34px; padding:8px 11px }
.film-asset-image-button { border:1px solid #6a50a0; border-radius:8px; background:#302443; color:#e3d2ff; font:600 9px 'Segoe UI'; cursor:pointer }
.film-asset-image-button:hover { background:#42325f }
.film-asset-image-button:disabled { opacity:.5; cursor:wait }
.film-asset-image-status { color:#a6a2b0; font-size:9px }
.film-asset-image-status.success { color:#73d8aa }
.film-asset-image-status.error { color:#ff929e }
.film-asset-image { display:block; width:min(100%,240px); max-height:220px; object-fit:contain; border:1px solid #343342; border-radius:9px; background:#0e0f16 }
.film-asset-card>.film-remove-button { grid-column:3; grid-row:1 }
.film-scenes { max-height:430px; overflow:auto; padding-right:4px }
.film-scene-row { display:grid; grid-template-columns:minmax(170px,1fr) minmax(140px,1fr) 90px 30px; gap:8px; align-items:center; padding:7px; border:1px solid #2a2b38; border-radius:9px; background:#151620 }
.film-scene-row.selected { border-color:#604b87; background:#1b1925 }
.film-scene-choose { display:grid; grid-template-columns:29px minmax(0,1fr); grid-template-rows:auto auto; column-gap:8px; align-items:center; min-width:0; border:0; background:none; color:#d8d5e0; text-align:left; cursor:pointer }
.film-scene-choose>span { grid-row:1/3; display:grid; place-items:center; width:26px; height:26px; border:1px solid #403852; border-radius:7px; color:#cfbaff; font-size:8px }
.film-scene-choose b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px }
.film-scene-choose small { margin-top:3px; color:#858393; font-size:8px }
.film-scene-row>input,.film-scene-row>select { min-width:0; height:34px; border:1px solid #30313e; border-radius:7px; background:#101119; color:#e8e6ef; padding:0 8px; font:inherit; font-size:9px }
.film-current-scene-context { margin:17px 0 20px; padding:14px; border:1px solid #343144; border-radius:11px; background:#171620 }
.film-current-scene-context .film-panel-heading { margin-bottom:12px; padding-bottom:10px }
.film-current-scene-context .film-panel-heading h2,.film-shorts-heading h2 { font-size:13px }
.film-scene-context-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px }
.film-scene-context-grid .film-field { margin:0 }
.film-scene-context-grid .film-field.wide { grid-column:1/-1 }
.film-scene-context-grid textarea { min-height:62px }
.film-storyboard-tools { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-top:12px; padding-top:11px; border-top:1px solid #2e2d3a }
.film-storyboard-tools .film-quiet-button { min-height:34px; padding:8px 11px }
.film-storyboard-image { display:block; width:min(100%,420px); max-height:280px; object-fit:contain; border:1px solid #343342; border-radius:9px; background:#0e0f16 }
.film-screenplay-heading { margin:18px 0 11px; padding:12px 0 9px; border-top:1px solid #292a36 }
.film-screenplay-list { display:grid; gap:9px; max-height:680px; overflow:auto; padding-right:4px }
.film-screenplay-card { display:grid; grid-template-columns:1fr; gap:9px; padding:12px; border:1px solid #2d2e3b; border-radius:10px; background:#151620 }
.film-screenplay-card-heading { display:flex; align-items:center; gap:10px }
.film-screenplay-card-title { display:grid; gap:3px; min-width:0 }
.film-screenplay-card-title b { color:#e7e3ef; font-size:11px }
.film-screenplay-card-title small { color:#9793a3; font-size:9px }
.film-screenplay-card .film-field { margin:0 }
.film-screenplay-card textarea { min-height:100px; line-height:1.65 }
.film-shorts-heading { margin:0 0 12px; padding-bottom:10px }
.film-short-tabs { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-bottom:14px }
.film-short-tab { max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:1px solid #343342; border-radius:8px; background:#171821; color:#aaa7b6; padding:9px 11px; font:inherit; font-size:9px; cursor:pointer }
.film-short-tab.active { border-color:#7255ad; background:#292239; color:#e1d1ff }
.film-short-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
.film-short-fields .film-field { margin:0 }
.film-short-fields .film-field.wide { grid-column:1/-1 }
.film-short-fields textarea { min-height:70px }
.film-short-fields .film-field.wide textarea { min-height:92px }
.film-delete-short { grid-column:1/-1; justify-self:end; min-height:32px; color:#d6a3ad }
@media(max-width:900px) { .film-workflow-layout { grid-template-columns:1fr } .film-step-nav { position:static; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:auto } .film-step-button { grid-template-columns:1fr; grid-template-rows:auto auto; justify-items:center; text-align:center; padding:10px 5px } .film-step-button>span { grid-row:auto; margin-bottom:6px } .film-step-button small { display:none } .film-step-tip { display:none } }
@media(max-width:580px) { .film-heading-actions { align-items:flex-end; flex-direction:column } .film-save-state { display:none } .film-project-strip { grid-template-columns:1fr 1fr } .film-project-name { grid-column:1/-1 } .film-new-project { grid-column:1/-1 } .film-stage { padding:15px 12px } .film-panel-heading { align-items:flex-start; flex-direction:column } .film-panel-heading>span { text-align:left } .film-settings-row,.film-settings-row-three,.film-act-grid,.film-beat-grid,.film-scene-context-grid,.film-short-fields { grid-template-columns:1fr } .film-step-actions { flex-wrap:wrap } .film-scene-header { grid-template-columns:minmax(0,1fr) auto 30px } .film-scene-meta { flex-wrap:wrap } .film-scene-meta select { flex:1; min-width:115px } .film-step-nav { gap:2px; padding:5px } .film-step-button { font-size:9px } .film-ai-callout { align-items:stretch; flex-direction:column } .film-ai-callout .create-button { width:100%; justify-content:center } .deepseek-settings-card { padding:16px 13px } .settings-card-actions { flex-direction:column-reverse } .settings-card-actions button { width:100% } .film-scene-row { grid-template-columns:minmax(110px,1fr) 80px 26px } .film-scene-row>input { grid-column:1/-1; grid-row:2 } .film-scene-row>select { grid-column:2; grid-row:1 } .film-scene-row>.film-remove-button { grid-column:3; grid-row:1 } .film-scene-choose { grid-column:1; grid-row:1 } }
@media(max-width:580px) { .film-ai-actions { width:100% } .film-ai-actions button { width:100% } .film-run-progress { padding:12px } .film-asset-toolbar>.create-button { width:100%; justify-content:center } .film-run-stop { width:100% } }

.admin-page { max-width:1240px }
.admin-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:18px 0 }
.admin-api-card { margin:18px 0; padding:20px; border:1px solid #2b2937; border-radius:14px; background:#13141d; box-shadow:0 10px 30px #0003 }
.admin-api-card .wallet-title { margin-bottom:14px }
.admin-api-status { margin:10px 0 14px; color:#bca8ee; font-size:11px }
.admin-api-status.error { color:#ff9aa7 }
.admin-api-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
.admin-api-provider { display:grid; align-content:start; gap:10px; padding:15px; border:1px solid #2b2937; border-radius:11px; background:#171821 }
.admin-api-provider h3 { margin:0 0 3px; color:#f0eaff; font-size:13px }
.admin-api-provider>label:not(.admin-api-clear) { display:grid; gap:5px; color:#a9a5b5; font-size:10px }
.admin-api-provider input:not([type=checkbox]),.admin-api-provider select { width:100%; min-width:0; height:36px; padding:0 9px; border:1px solid #343442; border-radius:7px; outline:0; background:#101119; color:#eeeaf5; font:inherit; font-size:10px }
.admin-api-provider input:focus,.admin-api-provider select:focus { border-color:#9876ea; box-shadow:0 0 0 3px #9876ea17 }
.admin-api-clear { display:flex; align-items:center; gap:7px; color:#a9a5b5; font-size:10px }
.admin-api-provider button { justify-self:start; min-height:32px; padding:7px 10px }
.admin-api-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:15px; padding-top:13px; border-top:1px solid #2b2937 }
.admin-api-actions>span { color:#928e9f; font-size:10px }
.admin-video-prices { margin-top:16px; padding:15px; border:1px solid #2b2937; border-radius:11px; background:#171821 }
.admin-video-prices h3 { margin:0 0 5px; color:#f0eaff; font-size:13px }
.admin-video-prices p { margin:0 0 13px; color:#a9a5b5; font-size:10px; line-height:1.6 }
.admin-video-price-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px }
.admin-video-price-grid label { display:grid; gap:6px; color:#aaa7b6; font-size:10px }
.admin-video-price-grid input { width:100%; height:36px; padding:0 9px; border:1px solid #343442; border-radius:7px; outline:0; background:#101119; color:#eeeaf5; font:inherit; font-size:11px }
.admin-video-price-grid input:focus { border-color:#9876ea; box-shadow:0 0 0 3px #9876ea17 }
.admin-stats article,.admin-table-card { border:1px solid #2b2937; border-radius:14px; background:#13141d; padding:19px; box-shadow:0 10px 30px #0003 }
.admin-stats article { display:grid; gap:9px }
.admin-stats article span { color:#aaa7b6; font-size:11px }
.admin-stats article b { color:#eeeaf8; font-size:25px }
.admin-table-card { margin:13px 0 }
.admin-table-card .wallet-title { margin-bottom:14px }
.admin-table-wrap { width:100%; overflow:auto }
.admin-table-wrap table { width:100%; border-collapse:collapse; font-size:11px; text-align:left; white-space:nowrap }
.admin-table-wrap th,.admin-table-wrap td { padding:11px 12px; border-bottom:1px solid #2b2937 }
.admin-table-wrap th { color:#aaa7b6; font-weight:600 }
.admin-table-wrap td { color:#e4e0eb }
.admin-table-wrap tbody tr:last-child td { border-bottom:0 }
.admin-table-wrap tbody tr:hover { background:#1a1924 }
.admin-page .form-message:empty { display:none }
.admin-page .form-message { margin:12px 0; color:#d7ccf3 }
.admin-page .form-message.error { color:#ff9aa7 }
@media(max-width:800px) { .admin-stats { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(max-width:700px) { .admin-api-grid { grid-template-columns:1fr } .admin-video-price-grid { grid-template-columns:repeat(2,minmax(0,1fr)) } .admin-api-actions { align-items:stretch; flex-direction:column } .admin-api-actions .create-button { justify-content:center } }