:root { --ink:#090d0a; --cream:#070a08; --paper:#101510; --green:#b8ef3c; --muted:#98a095; --line:#2b3329; --text:#edf2e9; --surface:#171d16; --soft:#20271f; }
* { box-sizing:border-box; }
body { margin:0; color:var(--text); background:radial-gradient(circle at 78% -10%,#1b2617 0,transparent 34%),var(--cream); font-family:"DM Sans",sans-serif; }
.topbar { height:76px; padding:0 max(28px,5vw); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(7,10,8,.9); }
.brand { color:inherit; text-decoration:none; display:flex; align-items:center; gap:12px; font:800 20px Manrope,sans-serif; }
.brand-mark { width:40px; height:40px; display:grid; place-items:center; color:#10150e; background:var(--green); border-radius:9px 9px 18px 9px; font-size:13px; letter-spacing:-1px; }
.beta,.kicker { font-size:11px; font-weight:700; letter-spacing:.15em; }
.topbar-actions,.account-menu { display:flex; align-items:center; gap:14px; }
.account-menu { padding-left:14px; border-left:1px solid var(--line); }
.account-menu span { max-width:240px; overflow:hidden; text-overflow:ellipsis; color:#aeb7aa; font-size:11px; white-space:nowrap; }
.account-menu button { padding:7px 9px; border:1px solid #3d493a; border-radius:7px; color:#d7ded4; background:#151b14; font-size:10px; }
.auth-view { width:min(1180px,92vw); min-height:calc(100vh - 76px); margin:auto; display:grid; place-items:center; padding:54px 0 80px; }
.auth-card { width:min(520px,100%); padding:38px; border:1px solid #2d382a; border-radius:24px; background:radial-gradient(circle at 90% 0,rgba(184,239,60,.1),transparent 38%),#101510; box-shadow:0 28px 90px rgba(0,0,0,.48); }
.auth-kicker { color:var(--green); font-size:9px; font-weight:800; letter-spacing:.15em; }
.auth-card h1 { margin:17px 0 14px; font-size:52px; line-height:.98; }
.auth-card>p { margin:0 0 24px; color:#9da69a; font-size:13px; line-height:1.6; }
.auth-card form { display:grid; gap:14px; }
.auth-card label>span { display:block; margin:0 0 7px 3px; color:#9ba499; font-size:9px; font-weight:800; letter-spacing:.1em; }
.auth-card .primary { margin-top:4px; }
.auth-switch { display:block; margin:17px auto 0; padding:7px; color:#b8c2b4; background:transparent; font-size:11px; text-decoration:underline; text-underline-offset:3px; }
.auth-card .auth-error { margin:14px 0 0; padding:10px 12px; border:1px solid #673f39; border-radius:8px; color:#ffad9e; background:#251714; font-size:11px; }
main { width:min(1180px,92vw); margin:auto; padding-bottom:80px; }
.hero { padding:82px 0 52px; max-width:900px; }
.eyebrow { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.09em; }
.eyebrow span { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 5px rgba(184,239,60,.22); }
h1 { font:800 clamp(48px,7vw,90px)/.97 Manrope,sans-serif; letter-spacing:-.065em; margin:24px 0; }
h1 em { font-style:normal; color:#9faa9b; }
.hero>p { max-width:680px; color:#a7afa4; font-size:18px; line-height:1.6; }
.workspace { border:1px solid #1f271e; border-radius:24px; background:var(--paper); padding:24px; box-shadow:0 24px 80px rgba(0,0,0,.4); }
.creator-step { margin-bottom:26px; padding-bottom:26px; border-bottom:1px solid var(--line); }
.step-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin:2px 2px 15px; }
.step-heading span { display:block; margin-bottom:5px; color:#879184; font-size:9px; font-weight:800; letter-spacing:.15em; }
.step-heading h2 { margin:0; font:800 24px Manrope,sans-serif; letter-spacing:-.035em; }
.step-heading p { max-width:390px; margin:0; color:var(--muted); font-size:11px; line-height:1.5; text-align:right; }
.upload-heading { margin-top:1px; }
.creator-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.creator-option { min-width:0; cursor:pointer; }
.creator-option input { position:absolute; opacity:0; pointer-events:none; }
.creator-card { position:relative; min-height:154px; display:flex; flex-direction:column; align-items:flex-start; padding:17px; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:linear-gradient(145deg,#171d16,#0d120e); transition:border-color .18s,transform .18s,box-shadow .18s,background .18s; }
.creator-card::after { content:""; position:absolute; width:90px; height:90px; right:-45px; bottom:-45px; border:1px solid #303a2d; border-radius:50%; transition:.18s; }
.creator-card:hover { transform:translateY(-2px); border-color:#56634f; }
.creator-option input:checked + .creator-card { border-color:var(--green); background:linear-gradient(145deg,#1d2818,#10160f); box-shadow:0 0 0 1px rgba(184,239,60,.18),0 13px 32px rgba(0,0,0,.28); }
.creator-option input:checked + .creator-card::after { border-color:rgba(184,239,60,.5); box-shadow:0 0 35px rgba(184,239,60,.12); }
.creator-option input:focus-visible + .creator-card { outline:2px solid var(--green); outline-offset:3px; }
.creator-icon { width:34px; height:34px; display:grid; place-items:center; margin-bottom:18px; border-radius:9px; color:#11180d; background:#6f7969; font-size:18px; }
.creator-option input:checked + .creator-card .creator-icon { background:var(--green); }
.creator-card strong { font:800 14px Manrope,sans-serif; }
.creator-card small { margin-top:4px; color:#929b90; font-size:10px; }
.creator-card em { margin-top:auto; color:#b7c2b2; font-size:9px; font-style:normal; font-weight:700; letter-spacing:.04em; }
.batch-recipe { margin:20px 0; padding:18px; border:1px solid var(--line); border-radius:16px; background:#0b100c; }
.recipe-heading { margin:0 1px 14px; }
.recipe-heading h2 { font-size:20px; }
.length-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.length-option { cursor:pointer; }
.length-option input { position:absolute; opacity:0; pointer-events:none; }
.length-option>span { min-height:70px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:1px solid var(--line); border-radius:11px; background:var(--surface); transition:.18s; }
.length-option>span:hover { border-color:#56634f; transform:translateY(-1px); }
.length-option input:checked + span { border-color:var(--green); color:#10160d; background:var(--green); box-shadow:0 8px 24px rgba(184,239,60,.11); }
.length-option input:focus-visible + span { outline:2px solid var(--green); outline-offset:3px; }
.length-option strong { font:800 16px Manrope,sans-serif; }
.length-option small { color:#949d91; font-size:9px; }
.length-option input:checked + span small { color:#334021; }
.batch-brand-grid { display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:12px; margin-top:13px; padding-top:13px; border-top:1px solid var(--line); }
.batch-brand-grid label>span { display:block; margin:0 0 7px 3px; color:#9ba499; font-size:9px; font-weight:800; letter-spacing:.1em; }
.batch-brand-grid label>span small { margin-left:4px; color:#6f786c; font-size:8px; }
.automix-builder { margin:20px 0; overflow:hidden; border:1px solid #364134; border-radius:16px; background:linear-gradient(135deg,#111811,#0a0f0b); transition:.2s; }
.automix-builder.enabled { border-color:var(--green); box-shadow:0 0 0 1px rgba(184,239,60,.12),0 18px 45px rgba(0,0,0,.24); }
.automix-toggle { display:grid; grid-template-columns:auto auto minmax(0,1fr) auto; align-items:center; gap:14px; padding:18px; cursor:pointer; }
.automix-toggle>input { position:absolute; opacity:0; pointer-events:none; }
.toggle-track { width:44px; height:24px; padding:3px; border-radius:999px; background:#333c31; transition:.18s; }
.toggle-track i { display:block; width:18px; height:18px; border-radius:50%; background:#949d91; transition:.18s; }
.automix-toggle>input:checked + .toggle-track { background:var(--green); }
.automix-toggle>input:checked + .toggle-track i { transform:translateX(20px); background:#10160d; }
.automix-toggle>input:focus-visible + .toggle-track { outline:2px solid var(--green); outline-offset:3px; }
.automix-copy { min-width:0; display:flex; flex-direction:column; }
.automix-copy small { color:#8f9a8c; font-size:9px; font-weight:800; letter-spacing:.13em; }
.automix-copy strong { margin-top:4px; font:800 18px Manrope,sans-serif; }
.automix-copy em { max-width:720px; margin-top:4px; color:#939d91; font-size:10px; font-style:normal; line-height:1.45; }
.automix-badge { padding:6px 8px; border-radius:6px; color:#b8c2b4; background:#293128; font-size:9px; letter-spacing:.08em; }
.automix-builder.enabled .automix-badge { color:#17200f; background:var(--green); }
.automix-controls { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:14px; max-height:0; padding:0 18px; overflow:hidden; border-top:1px solid transparent; opacity:0; pointer-events:none; transition:max-height .25s,padding .25s,opacity .2s,border-color .2s; }
.automix-builder.enabled .automix-controls { max-height:170px; padding:16px 18px 18px; border-top-color:var(--line); opacity:1; pointer-events:auto; }
.automix-control>span,.automix-style>span { display:block; margin:0 0 8px 3px; color:#9ba499; font-size:9px; font-weight:800; letter-spacing:.1em; }
.automix-length-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.automix-length-grid .length-option>span { min-height:62px; }
.automix-style select { min-height:62px; }
.dropzone { min-height:250px; border:1.5px dashed #566052; border-radius:18px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:9px; cursor:pointer; transition:.2s; background-color:#0b100c; background-image:radial-gradient(#263025 1px,transparent 1px); background-size:20px 20px; }
.dropzone:hover,.dropzone.drag { border-color:var(--green); background-color:#111a0f; box-shadow:inset 0 0 0 1px rgba(184,239,60,.12); }
.dropzone input { display:none; }
.upload-icon { width:54px; height:54px; display:grid; place-items:center; border-radius:50%; color:#0b100a; background:var(--green); font-size:24px; box-shadow:0 0 28px rgba(184,239,60,.18); }
.dropzone strong { font:700 20px Manrope,sans-serif; }
.dropzone small { color:var(--muted); }
.file-selection { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:14px; }
.file-selection>div { min-width:0; display:grid; grid-template-columns:28px minmax(0,1fr) auto auto 26px; align-items:center; gap:9px; padding:10px 10px 10px 12px; border:1px solid var(--line); border-radius:9px; background:var(--surface); }
.file-selection b { display:grid; place-items:center; width:25px; height:25px; border-radius:6px; color:#0b100a; background:var(--green); font-size:9px; }
.file-selection span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:700; }
.file-selection small { color:var(--muted); font-size:10px; }
.file-selection .file-mode { padding:6px 8px; border-radius:999px; font-size:9px; white-space:nowrap; }
.file-selection .file-mode.ai-mode { color:#cbed80; background:#283719; }
.file-selection .file-mode.manual-mode { color:#c0c8bd; background:#2a3029; }
.file-selection .remove-file { width:26px; height:26px; padding:0; border-radius:6px; color:#b2bab0; background:#293028; font-size:17px; line-height:1; }
.file-selection .remove-file:hover { color:white; background:#9b4038; }
.mode-help { margin:10px 3px 0; color:#899287; font-size:10px; line-height:1.5; }
.mode-help strong { color:#c3cdc0; }
.settings-grid { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:14px; margin:18px 0; }
.settings-grid label span { display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin:0 0 7px 4px; color:#9ba499; }
input,select { width:100%; padding:15px 14px; border:1px solid var(--line); background:var(--surface); border-radius:11px; font:500 14px DM Sans; color:var(--text); outline:none; color-scheme:dark; }
input:focus,select:focus { border-color:#74931f; box-shadow:0 0 0 3px rgba(184,239,60,.2); }
button,.download { border:0; font:700 14px DM Sans; cursor:pointer; }
.primary { width:100%; padding:17px 22px; border-radius:12px; background:var(--green); color:#10160d; display:flex; align-items:center; justify-content:center; gap:12px; box-shadow:0 12px 34px rgba(184,239,60,.11); }
.primary:hover { background:#c8fa58; transform:translateY(-1px); }
.primary b { color:#10160d; font-size:20px; }
.recent-projects { margin-top:28px; padding-top:24px; border-top:1px solid var(--line); }
.recent-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:13px; }
.recent-head span { color:#95a091; font-size:9px; font-weight:800; letter-spacing:.14em; }
.recent-head h2 { margin:5px 0 0; font:800 21px Manrope; letter-spacing:-.025em; }
.recent-head small { color:var(--muted); font-size:10px; }
.recent-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.recent-card { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:13px; border:1px solid var(--line); border-radius:11px; background:var(--surface); }
.recent-card h3 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0 0 5px; font:800 13px Manrope; }
.recent-card p { margin:0; color:var(--muted); font-size:10px; }
.recent-card button { padding:8px 10px; border-radius:7px; color:#11170e; background:var(--green); font-size:11px; }
.recent-card button:disabled { cursor:not-allowed; color:#7d867a; background:#293028; }
.recent-actions { display:flex; gap:6px; }
.recent-card .recent-delete,.delete-source,.delete-export,.automix-delete,.danger-secondary { color:#ffb4ad; border:1px solid #6b302d; background:#251312; }
.recent-card .recent-delete:hover,.delete-source:hover,.delete-export:hover,.automix-delete:hover,.danger-secondary:hover { color:#fff; background:#702d29; }
.results-controls,.source-actions { display:flex; align-items:center; gap:9px; }
.danger-secondary { padding:11px 14px; border-radius:9px; font-size:11px; font-weight:800; }
.delete-source { padding:7px 9px; border-radius:7px; font-size:9px; font-weight:800; }
.delete-export,.automix-delete { padding:10px 12px; border-radius:8px; font-size:10px; font-weight:800; }
.processing { margin-top:20px; min-height:410px; padding:54px 24px; border:1px solid #242d22; border-radius:24px; background:#0d120e; color:white; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; box-shadow:0 24px 80px rgba(0,0,0,.35); }
.processing h2 { font:700 28px Manrope; margin:10px 0 24px; }
.processing .kicker { color:var(--green); }
.spinner { width:72px; height:72px; border:1px solid #3a4537; border-radius:50%; display:grid; place-items:center; margin-bottom:28px; }
.spinner span { width:42px; height:42px; border:3px solid transparent; border-top-color:var(--green); border-radius:50%; animation:spin .9s linear infinite; }
.progress { width:min(480px,72vw); height:7px; border-radius:9px; overflow:hidden; background:#343c32; }
.progress i { display:block; height:100%; width:0; background:var(--green); transition:width .5s; }
.batch-status { width:min(760px,92%); display:grid; gap:7px; margin-top:20px; }
.batch-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(160px,1fr); gap:16px; align-items:center; padding:10px 12px; border:1px solid #354033; border-radius:8px; color:#cbd1c7; background:#1a2019; text-align:left; }
.batch-row span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.batch-row strong { color:#aeb7aa; font-size:10px; text-align:right; }
.batch-row.processing { min-height:0; margin:0; padding:10px 12px; border-radius:8px; display:grid; justify-content:stretch; text-align:left; background:#242c21; }
.batch-row.ready { border-color:#59751b; }
.batch-row.ready strong { color:var(--green); }
.batch-row.failed { border-color:#844a43; }
.batch-row.failed strong { color:#ff9f91; }
@keyframes spin { to { transform:rotate(360deg); } }
.results { padding-top:50px; }
.results-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:22px; }
.results h2 { font:800 38px Manrope; letter-spacing:-.04em; margin:6px 0 0; }
.secondary { padding:12px 16px; border:1px solid #465043; color:var(--text); background:#121812; border-radius:9px; }
.automix-result { display:grid; grid-template-columns:minmax(240px,.72fr) minmax(360px,1.28fr); gap:22px; align-items:center; margin-bottom:34px; padding:22px; border:1px solid #3c4938; border-radius:20px; background:radial-gradient(circle at 90% 0,rgba(184,239,60,.12),transparent 35%),linear-gradient(145deg,#151d13,#0b100c); box-shadow:0 20px 60px rgba(0,0,0,.3); }
.automix-result.failed { grid-template-columns:1fr; border-color:#66463f; }
.automix-result-copy span { color:var(--green); font-size:9px; font-weight:800; letter-spacing:.15em; }
.automix-result-copy h2 { margin:8px 0; font-size:30px; }
.automix-result-copy p { margin:0; color:#a1aba0; font-size:12px; line-height:1.55; }
.automix-player { width:100%; max-height:520px; aspect-ratio:16/9; object-fit:contain; border:1px solid #2a3428; border-radius:13px; background:#050806; }
.automix-result-actions { grid-column:2; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.automix-result-actions span { padding:6px 8px; border-radius:6px; color:#bfcaBB; background:#263025; font-size:9px; font-weight:800; text-transform:uppercase; }
.automix-review,.automix-download { padding:11px 14px; border-radius:8px; font-size:11px; text-decoration:none; text-align:center; }
.automix-review { margin-left:auto; color:#11170e; background:var(--green); }
.automix-review:hover { background:#c9fa59; }
.automix-download { color:#d7ded4; border:1px solid #3d493a; background:#182017; }
.automix-editor { grid-column:1/-1; margin-top:4px; padding:20px; border:1px solid #3d493a; border-radius:16px; background:#0a0f0b; }
.automix-editor-head { display:flex; align-items:start; justify-content:space-between; gap:24px; padding-bottom:17px; border-bottom:1px solid #2a3328; }
.automix-editor-head small,.automix-sequence-head small { color:var(--green); font-size:9px; font-weight:800; letter-spacing:.14em; }
.automix-editor-head h3 { margin:5px 0 6px; font:800 23px Manrope,sans-serif; }
.automix-editor-head p { max-width:680px; margin:0; color:#8e988b; font-size:11px; line-height:1.5; }
.automix-total { flex:none; min-width:112px; padding:10px 12px; border:1px solid #354131; border-radius:10px; background:#111811; text-align:right; }
.automix-total span,.automix-total small { display:block; color:#7f897c; font-size:8px; font-weight:800; letter-spacing:.1em; }
.automix-total strong { display:block; margin:3px 0; color:var(--green); font:800 22px Manrope,sans-serif; }
.automix-total strong.over { color:#ff8e7f; }
.automix-source-preview { display:grid; grid-template-columns:minmax(260px,.7fr) minmax(180px,.3fr); gap:16px; align-items:center; margin-top:16px; padding:12px; border:1px solid #3d493a; border-radius:13px; background:#111711; }
.automix-source-preview video { width:min(100%,250px); height:400px; margin:auto; aspect-ratio:9/16; object-fit:cover; object-position:50% center; border-radius:9px; background:#030503; }
.automix-source-preview div { display:flex; flex-direction:column; gap:6px; }
.automix-source-preview small { color:var(--green); font-size:8px; font-weight:800; letter-spacing:.12em; }
.automix-source-preview strong { overflow:hidden; text-overflow:ellipsis; font:800 15px Manrope,sans-serif; }
.automix-source-preview span { color:#9ba499; font-size:11px; }
.automix-master-controls { display:grid; grid-template-columns:1.25fr repeat(2,.7fr) 1fr .8fr; gap:10px; align-items:end; margin-top:16px; padding:14px; border:1px solid #2e382c; border-radius:12px; background:#111711; }
.automix-master-controls>label>span { display:block; margin:0 0 6px 3px; color:#899486; font-size:8px; font-weight:800; letter-spacing:.09em; }
.automix-master-controls input,.automix-master-controls select { min-height:42px; padding:10px; font-size:11px; }
.automix-master-controls .automix-caption-toggle { align-self:center; }
.automix-master-controls .automix-caption-toggle span { display:block; margin:0; }
.automix-master-controls .automix-caption-toggle b { color:#d9dfd6; font-size:10px; }
.automix-audio-mixer { margin-top:12px; overflow:hidden; border:1px solid #354230; border-radius:13px; background:linear-gradient(145deg,#111811,#0b100c); }
.automix-audio-head { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:13px 14px; border-bottom:1px solid #2b3528; }
.automix-audio-head div { display:flex; flex-direction:column; gap:3px; }
.automix-audio-head small { color:var(--green); font-size:8px; font-weight:800; letter-spacing:.14em; }
.automix-audio-head strong { font:800 14px Manrope,sans-serif; }
.automix-audio-head>span { padding:5px 7px; border-radius:5px; color:#aebb9f; background:#273124; font-size:8px; font-weight:800; letter-spacing:.08em; }
.automix-audio-grid { display:grid; grid-template-columns:1fr 1.2fr 1.2fr .7fr .6fr .6fr; gap:10px; align-items:end; padding:13px 14px; }
.automix-audio-grid label>span { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 6px 3px; color:#899486; font-size:8px; font-weight:800; letter-spacing:.08em; }
.automix-audio-grid output { color:var(--green); font-size:9px; }
.automix-audio-grid input,.automix-audio-grid select { min-height:40px; padding:9px; font-size:10px; }
.automix-audio-grid input[type="range"] { min-height:22px; padding:0; border:0; box-shadow:none; accent-color:var(--green); cursor:ew-resize; }
.automix-sound-track { display:grid; grid-template-columns:minmax(160px,.8fr) minmax(220px,1.2fr) auto auto; gap:10px; align-items:center; margin:0 14px; padding:11px; border:1px solid #303a2d; border-radius:10px; background:#090d0a; }
.automix-sound-copy { min-width:0; display:flex; flex-direction:column; gap:2px; }
.automix-sound-copy small { color:#788275; font-size:7px; font-weight:800; letter-spacing:.1em; }
.automix-sound-copy strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.automix-sound-copy span { color:#646e62; font-size:8px; }
.automix-audio-preview { width:100%; height:34px; }
.automix-audio-upload { cursor:pointer; }
.automix-audio-upload input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.automix-audio-upload span,.automix-audio-remove { display:block; padding:9px 11px; border-radius:7px; color:#11170e; background:var(--green); font-size:9px; font-weight:800; text-align:center; white-space:nowrap; }
.automix-audio-remove { color:#c9d0c6; background:#2a3328; }
.automix-audio-remove:hover { color:white; background:#9b4038; }
.automix-audio-options { display:flex; align-items:center; gap:18px; padding:11px 14px 13px; }
.automix-check { display:flex; align-items:center; gap:7px; color:#aeb7aa; font-size:9px; cursor:pointer; }
.automix-check input { width:14px; height:14px; padding:0; accent-color:var(--green); }
.automix-audio-options p { margin:0 0 0 auto; color:#687166; font-size:8px; }
.automix-sequence-head { display:flex; align-items:end; justify-content:space-between; gap:20px; margin:20px 0 9px; }
.automix-sequence-head strong { display:block; margin-top:3px; font:800 17px Manrope,sans-serif; }
.automix-sequence-head p { margin:0; color:#7f897c; font-size:9px; }
.automix-sequence { display:grid; gap:7px; }
.automix-moment { display:grid; grid-template-columns:minmax(170px,.9fr) 185px 145px minmax(220px,1.3fr) auto; gap:10px; align-items:center; padding:10px; border:1px solid #2e382c; border-radius:11px; background:#121812; }
.automix-moment-identity { min-width:0; display:flex; align-items:center; gap:10px; }
.automix-moment-identity>b { flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:7px; color:#11170e; background:var(--green); font-size:9px; }
.automix-moment-identity div { min-width:0; }
.automix-moment-identity strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.automix-moment-identity small { display:block; margin-top:3px; color:#778174; font-size:8px; }
.automix-moment-timing { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.automix-moment label>span { display:block; margin:0 0 4px 2px; color:#7f897c; font-size:7px; font-weight:800; letter-spacing:.09em; }
.automix-moment input,.automix-moment textarea { width:100%; padding:8px; border:1px solid #354031; border-radius:7px; color:var(--text); background:#090d0a; font:500 10px DM Sans,sans-serif; outline:none; }
.automix-moment textarea { min-height:48px; resize:vertical; line-height:1.35; }
.automix-moment input:focus,.automix-moment textarea:focus { border-color:#789622; box-shadow:0 0 0 2px rgba(184,239,60,.1); }
.automix-moment-tools { display:grid; grid-template-columns:auto repeat(3,30px); gap:5px; }
.automix-moment-tools button { min-height:30px; padding:0 8px; border-radius:6px; color:#cbd3c8; background:#293128; font-size:10px; }
.automix-moment-tools button:hover { color:#10160d; background:var(--green); }
.automix-moment-tools button:disabled { cursor:not-allowed; opacity:.35; }
.automix-moment-tools .remove:hover { color:white; background:#9b4038; }
.automix-editor-footer { display:flex; align-items:center; gap:12px; margin-top:15px; padding-top:15px; border-top:1px solid #2a3328; }
.automix-reset { padding:10px 12px; border:1px solid #3c4739; border-radius:8px; color:#c5cdc2; background:#171d16; font-size:10px; }
.automix-editor-note { margin-right:auto; color:#788175; font-size:9px; }
.automix-rebuild { padding:12px 15px; border-radius:8px; color:#11170e; background:var(--green); font-size:11px; }
.automix-rebuild:disabled { cursor:wait; color:#75806f; background:#343d31; }
.batch-results { display:grid; gap:42px; }
.project-result { display:grid; gap:14px; }
.source-head { display:flex; align-items:end; justify-content:space-between; gap:20px; padding:0 4px 12px; border-bottom:1px solid var(--line); }
.source-number { display:block; margin-bottom:5px; color:#96a092; font-size:9px; font-weight:800; letter-spacing:.14em; }
.source-name { max-width:850px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0; font:800 21px Manrope; }
.source-count { flex:none; padding:6px 8px; border-radius:6px; color:#d0f67d; background:#263518; font-size:10px; font-weight:800; letter-spacing:.08em; }
.project-clip-grid { display:grid; gap:14px; }
.clip-card { position:relative; display:grid; grid-template-columns:88px 110px 1fr; align-items:start; gap:18px; background:var(--paper); border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:0 18px 50px rgba(0,0,0,.2); }
.rank { width:54px; height:54px; background:#0a0e0a; color:var(--green); border:1px solid #2d372a; border-radius:10px 10px 22px 10px; display:grid; place-items:center; font:800 19px Manrope; }
.score-ring { --score:0deg; position:relative; width:92px; height:92px; border-radius:50%; display:flex; flex-direction:column; justify-content:center; align-items:center; background:conic-gradient(var(--green) var(--score),#283027 0); }
.score-ring::after { content:""; position:absolute; inset:7px; border-radius:50%; background:#121812; }
.score-ring strong { position:relative; z-index:1; font:800 24px Manrope; }
.score-ring small { position:relative; z-index:1; font-size:8px; font-weight:800; letter-spacing:.12em; color:var(--muted); }
.score-ring.manual-score { background:#323b30; }
.score-ring.manual-score strong { color:#b8c3b4; font-size:22px; }
.manual-card blockquote { border-left-color:#8e978a; }
.meta { display:flex; gap:8px; }
.meta { flex-wrap:wrap; }
.meta span { padding:5px 8px; border-radius:5px; color:#c5cdc2; background:#232b22; font-size:10px; font-weight:700; text-transform:uppercase; }
.clip-card h3 { font:800 22px Manrope; margin:12px 0 8px; }
blockquote { margin:0 0 9px; font-size:15px; color:#c1c9be; border-left:3px solid var(--green); padding-left:12px; }
.why { font-size:13px; color:var(--muted); line-height:1.5; }
.clip-editor { display:grid; grid-template-columns:minmax(280px,1.1fr) minmax(270px,.9fr); gap:14px; margin:18px 0; }
.preview-shell { min-width:0; padding:9px; border:1px solid #283126; border-radius:14px; background:#080c09; }
.preview-video { display:block; width:min(100%,360px); height:min(62vh,520px); margin:auto; aspect-ratio:9/16; object-fit:cover; object-position:50% center; background:#070907; border-radius:9px; }
.preview-placeholder { min-height:190px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:24px; border-radius:9px; color:#bec5b9; background:#070907; text-align:center; }
.preview-placeholder strong { max-width:420px; color:#edf1ea; font:700 14px Manrope; }
.preview-placeholder span { max-width:420px; color:#8f988b; font-size:11px; line-height:1.45; }
.retry-preview { margin-top:5px; padding:8px 11px; border-radius:7px; color:#18200f; background:var(--green); font-size:11px; }
.retry-preview:disabled { cursor:wait; color:#77806f; background:#343c31; }
.preview-cut { width:100%; margin-top:8px; padding:10px; color:white; border-radius:7px; background:#293126; }
.preview-cut span { color:var(--green); margin-right:6px; }
.preview-cut:hover { background:#374133; }
.preview-cut:disabled { cursor:not-allowed; opacity:.65; }
.trim-panel { display:flex; flex-direction:column; justify-content:center; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.trim-heading { display:flex; align-items:start; justify-content:space-between; gap:12px; padding-bottom:13px; border-bottom:1px solid var(--line); }
.trim-heading small { display:block; margin-bottom:4px; color:#9ba698; font-size:9px; font-weight:800; letter-spacing:.12em; }
.trim-heading strong { display:block; font:800 17px Manrope; }
.max-badge { flex:none; padding:5px 7px; border-radius:5px; color:#d4f68c; background:#263619; font-size:9px; font-weight:800; letter-spacing:.06em; }
.trim-control { display:block; margin-top:14px; }
.trim-control>span { display:flex; justify-content:space-between; color:#a2aba0; font-size:10px; font-weight:800; letter-spacing:.08em; }
.trim-control output { color:var(--text); font:800 12px Manrope; letter-spacing:0; }
.trim-control input[type="range"] { width:100%; height:22px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; accent-color:#789622; cursor:ew-resize; }
.trim-control input[type="range"]:focus { border:0; box-shadow:none; }
.trim-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:8px; }
.selection-length { font-size:11px; font-weight:800; color:var(--green); }
.reset-cut { padding:0; color:#aab3a6; background:transparent; font-size:11px; text-decoration:underline; text-underline-offset:3px; }
.trim-note { margin:12px 0 0; color:#888e84; font-size:10px; line-height:1.45; }
.framing-control { margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.framing-heading { display:flex; justify-content:space-between; align-items:end; gap:12px; }
.framing-heading small { display:block; margin-bottom:3px; color:#9ba698; font-size:8px; font-weight:800; letter-spacing:.12em; }
.framing-heading strong { font:800 14px Manrope; }
.framing-heading output { color:var(--green); font:800 10px Manrope; text-transform:uppercase; }
.focus-x { width:100%; height:22px; margin-top:8px; padding:0; border:0; background:transparent; accent-color:var(--green); }
.focus-presets { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:5px; }
.focus-presets button { padding:7px; border:1px solid #30392d; border-radius:6px; color:#aab3a6; background:#0c110d; font-size:9px; }
.focus-presets button.active { color:#12170f; border-color:var(--green); background:var(--green); }
.framing-control>p { margin:8px 0 0; color:#7f897c; font-size:9px; line-height:1.4; }
.automix-moment-framing { display:grid; grid-template-columns:1fr auto; align-items:center; gap:5px; }
.automix-moment-framing>span { grid-column:1/-1; }
.automix-moment-framing input { width:120px; padding:0; border:0; background:transparent; accent-color:var(--green); }
.automix-moment-framing output { color:var(--green); font:800 9px Manrope; }
.overlay-editor { margin:15px 0; padding:16px; border:1px solid var(--line); border-radius:14px; background:#121812; }
.overlay-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:13px; border-bottom:1px solid var(--line); }
.overlay-heading small { display:block; margin-bottom:4px; color:#9ba698; font-size:9px; font-weight:800; letter-spacing:.12em; }
.overlay-heading strong { display:block; font:800 17px Manrope,sans-serif; }
.caption-toggle { display:flex; align-items:center; gap:7px; cursor:pointer; }
.caption-toggle input { position:absolute; opacity:0; pointer-events:none; }
.caption-toggle span { width:40px; height:22px; padding:3px; border-radius:999px; background:#323b30; }
.caption-toggle span::after { content:""; display:block; width:16px; height:16px; border-radius:50%; background:#929c8f; transition:.18s; }
.caption-toggle input:checked + span { background:var(--green); }
.caption-toggle input:checked + span::after { transform:translateX(18px); background:#11170e; }
.caption-toggle b { font-size:10px; }
.caption-edit-grid { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:12px; margin-top:13px; }
.overlay-editor label>span { display:block; margin:0 0 6px 3px; color:#9ba499; font-size:9px; font-weight:800; letter-spacing:.09em; }
.caption-text { width:100%; min-height:112px; resize:vertical; padding:12px; border:1px solid var(--line); border-radius:10px; color:var(--text); background:#0b100c; font:500 12px/1.55 DM Sans,sans-serif; outline:none; }
.caption-text:focus { border-color:#74931f; box-shadow:0 0 0 3px rgba(184,239,60,.14); }
.caption-settings { display:grid; gap:10px; }
.caption-settings select { padding:12px; font-size:12px; }
.watermark-grid { display:grid; grid-template-columns:minmax(0,1fr) 220px auto; gap:12px; align-items:end; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.watermark-grid input,.watermark-grid select { padding:12px; font-size:12px; }
.watermark-grid label>span small { margin-left:4px; color:#6f786c; font-size:8px; }
.brand-policy { grid-column:1/-1; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; margin-top:12px; padding:12px; border:1px solid #435136; border-radius:11px; background:linear-gradient(135deg,#121a11,#0d130e); }
.brand-policy-mark { width:36px; height:36px; display:grid; place-items:center; border-radius:9px; color:#10160d; background:var(--green); font:800 11px Manrope,sans-serif; }
.brand-policy strong,.brand-policy small { display:block; }
.brand-policy strong { font:800 11px Manrope,sans-serif; }
.brand-policy small { margin-top:3px; color:#8d988a; font-size:9px; line-height:1.4; }
.brand-policy-badge { padding:5px 7px; border-radius:5px; color:#11170e; background:var(--green); font-size:8px; font-weight:800; letter-spacing:.09em; }
.brand-policy.paid { border-color:#315340; }
.brand-policy.paid .brand-policy-mark { color:#d8ffe8; background:#1b4a30; }
.brand-policy.paid .brand-policy-badge { color:#caffe0; background:#153825; }
.overlay-save-state { align-self:center; color:#778174; font-size:9px; }
.overlay-save-state.saving { color:#d8e1d4; }
.overlay-save-state.saved { color:var(--green); }
.score-bars { display:grid; grid-template-columns:repeat(3,1fr); gap:8px 15px; margin:16px 0; }
.score-line { font-size:10px; font-weight:700; text-transform:uppercase; color:#9ba498; }
.score-line i { height:4px; display:block; background:#293128; margin-top:5px; border-radius:9px; overflow:hidden; }
.score-line b { display:block; height:100%; background:#718d26; }
.actions { border-top:1px solid var(--line); padding-top:14px; display:flex; align-items:center; gap:10px; }
.render,.download { padding:11px 14px; color:#11170e; background:var(--green); border-radius:8px; text-decoration:none; }
.feedback { display:flex; gap:5px; margin-left:auto; }
.feedback button { width:34px; height:34px; color:#c8d0c5; border-radius:7px; background:#252d24; }
.feedback button.active { color:#10160d; background:var(--green); }
.toast { position:fixed; right:24px; bottom:24px; color:white; background:#151b14; padding:14px 18px; border-radius:10px; box-shadow:0 10px 40px #0003; }
.hidden { display:none!important; }
@media (max-width:1180px) { .automix-master-controls{grid-template-columns:1fr 1fr 1fr}.automix-audio-grid{grid-template-columns:1fr 1fr 1fr}.automix-moment{grid-template-columns:minmax(170px,.75fr) 185px minmax(230px,1.25fr)}.automix-moment-tools{grid-column:1/-1;justify-content:end} }
@media (max-width:960px) { .creator-grid{grid-template-columns:1fr 1fr}.length-grid{grid-template-columns:repeat(3,1fr)}.automix-controls{grid-template-columns:1fr}.automix-builder.enabled .automix-controls{max-height:280px}.automix-length-grid{grid-template-columns:repeat(5,1fr)}.settings-grid{grid-template-columns:1fr 1fr}.automix-result{grid-template-columns:1fr}.automix-result-actions{grid-column:1}.automix-source-preview{grid-template-columns:1fr}.automix-master-controls,.automix-audio-grid{grid-template-columns:1fr 1fr}.automix-sound-track{grid-template-columns:1fr auto auto}.automix-sound-copy{grid-column:1/-1}.automix-moment{grid-template-columns:1fr 185px 145px}.automix-moment-caption{grid-column:1/-1}.automix-moment-tools{grid-column:1/-1}.clip-editor{grid-template-columns:1fr}.caption-edit-grid{grid-template-columns:1fr}.watermark-grid{grid-template-columns:1fr 220px}.overlay-save-state{grid-column:1/-1}.preview-video{max-height:430px}.clip-card{grid-template-columns:70px 92px 1fr;gap:12px} }
@media (max-width:760px) { .beta{display:none}.hero{padding-top:55px}.step-heading{align-items:start;flex-direction:column;gap:7px}.step-heading p{text-align:left}.file-selection,.recent-grid{grid-template-columns:1fr}.recent-head{align-items:start}.settings-grid,.batch-brand-grid{grid-template-columns:1fr}.batch-row,.batch-row.processing{grid-template-columns:1fr;gap:4px}.batch-row strong{text-align:left}.automix-result-actions,.automix-editor-head,.automix-sequence-head,.automix-editor-footer,.automix-audio-head,.automix-audio-options{align-items:stretch;flex-direction:column}.automix-review{margin-left:0}.automix-total{text-align:left}.automix-master-controls,.automix-audio-grid{grid-template-columns:1fr}.automix-sound-track{grid-template-columns:1fr}.automix-sound-copy,.automix-sound-track audio{grid-column:1}.automix-audio-options p{margin-left:0}.automix-moment{grid-template-columns:1fr}.automix-moment-timing{grid-column:1}.automix-moment-caption{grid-column:1}.automix-moment-tools{grid-column:1;justify-content:stretch}.automix-editor-note{margin-right:0}.source-head{align-items:start}.source-name{font-size:17px}.clip-card{grid-template-columns:62px 1fr;padding:16px}.score-ring{width:70px;height:70px}.score-ring::after{inset:5px}.clip-copy{grid-column:1/-1}.clip-editor{grid-template-columns:1fr}.score-bars{grid-template-columns:1fr 1fr}.results-head{align-items:start;gap:20px}.results h2{font-size:28px}.actions{align-items:flex-start;flex-wrap:wrap}.feedback{margin-left:0} }
@media (max-width:520px) { .creator-grid{grid-template-columns:1fr}.length-grid,.automix-length-grid{grid-template-columns:1fr 1fr}.automix-toggle{grid-template-columns:auto minmax(0,1fr)}.automix-toggle>.toggle-track{grid-row:1/3}.automix-badge{display:none}.watermark-grid{grid-template-columns:1fr}.brand-policy{grid-template-columns:auto 1fr}.brand-policy-badge{grid-column:2}.creator-card{min-height:132px}.workspace{padding:16px}.batch-recipe{padding:14px} }