:root{
 --bg:#f4f6fb;--surface:#fff;--surface-2:#f8f9fc;--ink:#141827;--muted:#6f7587;--line:#e3e7f0;
 --nav:#101320;--nav-2:#171b2c;--primary:#6c5ce7;--primary-2:#8b7cf7;--primary-soft:#efedff;
 --success:#1fa971;--warn:#d99118;--danger:#d94b60;--info:#3a78e8;--radius:18px;--shadow:0 14px 40px rgba(25,31,54,.08);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}button,input,select,textarea{font:inherit}a{color:inherit;text-decoration:none}svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.muted{color:var(--muted)}code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#eff1f6;padding:.15rem .35rem;border-radius:6px}.eyebrow{font-size:.72rem;letter-spacing:.11em;text-transform:uppercase;font-weight:800;color:var(--primary)}
.brand-lockup{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.05rem}.brand-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;color:#fff;background:linear-gradient(135deg,var(--primary),#b56ef2);box-shadow:0 8px 20px rgba(108,92,231,.28)}
.btn{border:0;border-radius:11px;padding:.78rem 1rem;font-weight:750;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;transition:.2s ease}.btn:hover{transform:translateY(-1px)}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;box-shadow:0 9px 20px rgba(108,92,231,.22)}.btn-secondary{background:#eef0f6;color:#34394c}.btn-ghost{background:transparent;color:var(--muted)}.btn-ghost:hover{background:#f0f2f7}.btn-small{padding:.52rem .72rem;font-size:.78rem;border-radius:9px}.btn-block{width:100%}.danger{color:var(--danger)!important}
.alert{padding:.85rem 1rem;border-radius:11px;font-size:.9rem;margin:.75rem 0}.alert-danger{color:#9e263b;background:#fff0f2;border:1px solid #ffd3db}.alert-success{color:#127551;background:#ecfbf4;border:1px solid #c4efda}.inline-error{margin-top:.75rem;padding:.65rem .75rem;border-radius:9px;color:#9e263b;background:#fff0f2;font-size:.78rem}
.form-stack{display:grid;gap:1rem}.form-stack h3{margin:.55rem 0 -.35rem;font-size:.85rem;color:#383d50}.field-grid{display:grid;gap:.9rem}.field-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.field-grid.four{grid-template-columns:1.25fr repeat(3,minmax(0,.85fr))}label{display:grid;gap:.45rem;font-size:.78rem;font-weight:750;color:#3c4153}input,select,textarea{width:100%;border:1px solid var(--line);background:#fff;border-radius:11px;padding:.78rem .88rem;color:var(--ink);outline:0;transition:.2s}textarea{resize:vertical;line-height:1.5}input:focus,select:focus,textarea:focus{border-color:#a99ef8;box-shadow:0 0 0 4px rgba(108,92,231,.1)}input::placeholder,textarea::placeholder{color:#a2a7b6}.field-help,label small{font-weight:500;color:var(--muted)}
/* Setup and login */
.setup-body,.login-body{min-height:100vh;background:#0f1220}.setup-shell,.login-shell{min-height:100vh;display:grid;grid-template-columns:minmax(340px,.9fr) minmax(500px,1.1fr)}.setup-hero,.login-promo{position:relative;overflow:hidden;padding:8vh 7vw;color:#fff;background:radial-gradient(circle at 15% 20%,rgba(139,124,247,.28),transparent 35%),radial-gradient(circle at 85% 85%,rgba(70,195,255,.18),transparent 35%),#101320;display:flex;flex-direction:column;justify-content:space-between}.setup-hero:after,.login-promo:after{content:"";position:absolute;inset:auto -150px -180px auto;width:500px;height:500px;border-radius:50%;border:1px solid rgba(255,255,255,.1);box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.018)}.setup-hero h1,.login-promo h1{font-size:clamp(2.5rem,5vw,5.5rem);line-height:.98;max-width:800px;margin:.7rem 0 1.25rem;letter-spacing:-.055em}.setup-hero p,.login-promo p{font-size:1.05rem;max-width:560px;color:#bcc2d3;line-height:1.65}.setup-points{display:flex;flex-wrap:wrap;gap:.6rem}.setup-points span{padding:.55rem .75rem;border-radius:100px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);font-size:.78rem}.setup-card,.login-card{background:#f7f8fc;padding:8vh 9vw;display:flex;flex-direction:column;justify-content:center}.setup-card{overflow:auto}.setup-card h2,.login-card h2{font-size:2rem;margin:.35rem 0}.setup-card h3{border-top:1px solid var(--line);padding-top:1rem}.login-card{max-width:none}.login-card .form-stack{margin-top:1.2rem}.login-metrics{display:flex;gap:2.5rem;position:relative;z-index:1}.login-metrics div{display:grid;gap:.25rem}.login-metrics strong{font-size:1.25rem}.login-metrics span{font-size:.72rem;color:#999fb1;text-transform:uppercase;letter-spacing:.09em}.mobile-brand{display:none}.security-note{text-align:center;font-size:.75rem;color:var(--muted);margin-top:1.5rem}.login-glow{position:fixed;width:350px;height:350px;border-radius:50%;filter:blur(100px);opacity:.3;pointer-events:none}.glow-one{background:#745ee9;left:15%;top:5%}.glow-two{background:#2da8c7;left:35%;bottom:0}
/* Main app */
.app-shell{min-height:100vh;display:grid;grid-template-columns:248px minmax(0,1fr)}.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,var(--nav),#0d101b);color:#d9dced;padding:1.35rem 1rem;display:flex;flex-direction:column;z-index:30}.sidebar-brand{padding:.3rem .55rem 1.3rem}.sidebar-nav{display:grid;gap:.3rem}.nav-caption{padding:.75rem .65rem .35rem;color:#6e7387;font-size:.65rem;text-transform:uppercase;letter-spacing:.12em;font-weight:800}.nav-link{display:flex;align-items:center;gap:.75rem;padding:.72rem .75rem;border-radius:11px;color:#8f95aa;font-size:.85rem;font-weight:650}.nav-link svg{width:19px;height:19px}.nav-link:hover{background:rgba(255,255,255,.05);color:#fff}.nav-link.active{color:#fff;background:linear-gradient(90deg,rgba(108,92,231,.28),rgba(108,92,231,.08));box-shadow:inset 3px 0 0 #8b7cf7}.sidebar-usage{margin-top:auto;padding:1rem;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06);border-radius:13px}.usage-head{display:flex;justify-content:space-between;font-size:.72rem}.usage-head strong{color:#fff}.sidebar-usage small{color:#747a8f;font-size:.65rem}.progress{height:6px;background:#e9ecf3;border-radius:100px;overflow:hidden;margin:.65rem 0}.sidebar .progress{background:rgba(255,255,255,.08)}.progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),#aa74f1)}.sidebar-user{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.7rem;padding:1rem .25rem 0}.avatar{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,#34394d,#555c79);color:#fff;font-weight:800}.avatar.small{width:32px;height:32px;border-radius:9px}.sidebar-user div:nth-child(2){display:grid}.sidebar-user strong{font-size:.78rem}.sidebar-user span{font-size:.65rem;color:#747a8f}.logout-link{color:#757b91;font-size:1.05rem}.main-column{min-width:0;display:flex;flex-direction:column}.topbar{height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;background:rgba(255,255,255,.88);backdrop-filter:blur(15px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.topbar h1{font-size:1.05rem;margin:0}.topbar p{font-size:.7rem;color:var(--muted);margin:.25rem 0 0}.topbar-actions{display:flex;align-items:center;gap:.8rem}.api-state{display:flex;align-items:center;gap:.45rem;font-size:.72rem;color:#476255}.api-state i{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 5px rgba(31,169,113,.1)}.api-state.demo{color:#866421}.api-state.demo i{background:var(--warn);box-shadow:0 0 0 5px rgba(217,145,24,.12)}.balance-pill{display:flex;align-items:center;gap:.55rem;border:1px solid var(--line);background:#fff;border-radius:100px;padding:.5rem .75rem;cursor:pointer}.balance-pill span{font-size:.65rem;color:var(--muted)}.balance-pill strong{font-size:.78rem;white-space:nowrap}.menu-toggle{display:none;border:0;background:transparent;font-size:1.2rem}.content{padding:1.6rem 2rem 3rem;max-width:1600px;width:100%;margin:0 auto}.app-footer{margin-top:auto;padding:1rem 2rem;border-top:1px solid var(--line);color:var(--muted);font-size:.68rem;display:flex;justify-content:space-between;background:#fff}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-bottom:1.15rem}.metric-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.15rem;box-shadow:0 5px 18px rgba(25,31,54,.035);min-width:0}.metric-label,.metric-card>span{display:block;font-size:.72rem;color:var(--muted);font-weight:700}.metric-card strong{font-size:1.6rem;letter-spacing:-.04em;display:inline-block;margin:.45rem .35rem .1rem 0}.metric-card small{color:var(--muted);font-size:.68rem}.metric-spark{height:22px;display:flex;gap:4px;align-items:end;margin-top:.45rem}.metric-spark i{width:9%;background:#a59af8;border-radius:3px 3px 0 0}.metric-spark i:nth-child(1){height:25%}.metric-spark i:nth-child(2){height:55%}.metric-spark i:nth-child(3){height:40%}.metric-spark i:nth-child(4){height:85%}.metric-spark i:nth-child(5){height:68%}.metric-spark.alt i{background:#74bde7}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 7px 24px rgba(25,31,54,.045);overflow:hidden}.panel-head{display:flex;align-items:start;justify-content:space-between;gap:1rem;padding:1.2rem 1.25rem;border-bottom:1px solid var(--line)}.panel-head h2{font-size:1.05rem;margin:.3rem 0 0}.model-chip,.count-badge{background:var(--primary-soft);color:var(--primary);border-radius:100px;padding:.4rem .65rem;font-size:.68rem;font-weight:800}.count-badge{min-width:29px;text-align:center}.console-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.65fr);gap:1.1rem}.generation-panel form{padding:1.25rem}.toggle-row{display:flex;align-items:center;gap:.7rem;padding:.75rem .85rem;background:var(--surface-2);border:1px solid var(--line);border-radius:12px}.toggle-row>div{display:grid}.toggle-row strong{font-size:.78rem}.toggle-row small{font-size:.66rem;color:var(--muted)}.switch input{display:none}.switch{display:block}.switch span{display:block;width:40px;height:23px;border-radius:100px;background:#c9cedb;position:relative;cursor:pointer}.switch span:after{content:"";position:absolute;width:17px;height:17px;background:#fff;border-radius:50%;left:3px;top:3px;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:.2s}.switch input:checked+span{background:var(--primary)}.switch input:checked+span:after{transform:translateX(17px)}.seed-field{display:flex;align-items:center;gap:.5rem;margin-left:auto}.seed-field input{width:95px;padding:.5rem .6rem}.upload-zone{position:relative;border:1.5px dashed #cfd3df;background:#fafbfe;border-radius:14px;padding:1.35rem;text-align:center;display:grid;place-items:center;gap:.3rem;transition:.2s}.upload-zone.dragover{border-color:var(--primary);background:var(--primary-soft)}.upload-zone input{position:absolute;inset:0;opacity:0;cursor:pointer}.upload-zone strong{font-size:.82rem}.upload-zone>span{font-size:.67rem;color:var(--muted)}.upload-icon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-size:1.15rem}.selected-files{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.35rem;position:relative;z-index:1}.selected-files span{background:#edf0f6;border-radius:8px;padding:.35rem .5rem;font-size:.65rem}.checkline{display:flex;align-items:center;gap:.55rem}.checkline input{width:auto}.asset-picker{border:1px solid var(--line);border-radius:12px}.asset-picker summary{padding:.75rem .9rem;cursor:pointer;font-size:.76rem;font-weight:750;display:flex;justify-content:space-between}.asset-picker summary span{color:var(--muted);font-weight:500}.asset-picker-grid{border-top:1px solid var(--line);padding:.75rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}.asset-option{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:.55rem;border:1px solid var(--line);border-radius:10px;padding:.55rem}.asset-option input{width:auto}.asset-option>span:last-child{display:grid;min-width:0}.asset-option strong{font-size:.7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.asset-option small{font-size:.6rem}.asset-type{font-size:.56rem;color:var(--primary);font-weight:900}.estimate-bar{display:grid;grid-template-columns:repeat(3,minmax(100px,.65fr)) minmax(170px,1fr);align-items:center;gap:.75rem;background:#171b2c;color:#fff;padding:.9rem;border-radius:14px}.estimate-bar>div{display:grid;gap:.1rem}.estimate-bar span{font-size:.62rem;color:#8d93a9}.estimate-bar strong{font-size:1rem}.estimate-bar small{font-size:.58rem;color:#71778d}.generate-btn{height:100%;min-height:54px}.queue-panel{display:flex;flex-direction:column}.queue-list{padding:.4rem 1rem}.queue-item{display:grid;grid-template-columns:auto 1fr auto;gap:.75rem;align-items:start;padding:1rem 0;border-bottom:1px solid var(--line)}.queue-item:last-child{border-bottom:0}.queue-orb{width:33px;height:33px;border-radius:10px;background:radial-gradient(circle at 35% 30%,#c3bbff,#6c5ce7 55%,#2c265c);box-shadow:0 5px 13px rgba(108,92,231,.25)}.queue-item>div:nth-child(2){min-width:0}.queue-item strong{font-size:.75rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queue-item span{font-size:.62rem;color:var(--muted)}.queue-item b{font-size:.7rem}.queue-item .progress{margin:.45rem 0 0;height:4px}.progress.animated i{background:linear-gradient(90deg,var(--primary),#9b8df8,#6c5ce7);background-size:200% 100%;animation:flow 1.5s linear infinite}@keyframes flow{to{background-position:-200% 0}}.queue-note{margin:auto 1rem 1rem;padding:.85rem;background:#f5f4ff;border-radius:12px;border:1px solid #e2ddff}.queue-note strong{font-size:.72rem;color:var(--primary)}.queue-note p{font-size:.65rem;line-height:1.5;color:var(--muted);margin:.35rem 0 0}.section-head,.page-intro{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin:1.8rem 0 .9rem}.section-head h2,.page-intro h2{margin:.25rem 0 0;font-size:1.25rem}.page-intro{align-items:center;margin:.2rem 0 1.25rem}.page-intro p{margin:.35rem 0 0;color:var(--muted);font-size:.78rem}.text-link{font-size:.72rem;color:var(--primary);font-weight:750}.video-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.video-card{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden;box-shadow:0 6px 20px rgba(25,31,54,.04)}.video-thumb{aspect-ratio:16/9;background:radial-gradient(circle at 20% 30%,rgba(111,86,229,.7),transparent 35%),radial-gradient(circle at 75% 60%,rgba(42,153,213,.45),transparent 40%),#171b2c;position:relative;overflow:hidden;display:grid;place-items:center}.video-thumb video{width:100%;height:100%;object-fit:cover}.render-orb{width:54px;height:54px;border-radius:18px;background:radial-gradient(circle at 35% 30%,#d7d1ff,#7765ef 55%,#2c265c);box-shadow:0 12px 35px rgba(108,92,231,.35);animation:pulse 2.4s ease-in-out infinite}@keyframes pulse{50%{transform:scale(1.06);filter:brightness(1.08)}}.thumb-duration{position:absolute;right:.55rem;bottom:.5rem;background:rgba(8,10,18,.65);color:#fff;border-radius:6px;padding:.25rem .38rem;font-size:.58rem}.play-button{position:absolute;inset:auto auto 12px 12px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.88);color:#1c2031;font-size:.7rem}.video-card-body{padding:.85rem}.card-title-line{display:flex;align-items:start;justify-content:space-between;gap:.5rem}.video-card h3{font-size:.82rem;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:68%}.video-card p{font-size:.67rem;color:var(--muted);line-height:1.45;min-height:2em}.line-clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.status{display:inline-flex;align-items:center;gap:.3rem;border-radius:100px;padding:.28rem .45rem;font-size:.56rem;font-weight:800;white-space:nowrap;background:#eef1f6;color:#5e6475}.status i{width:6px;height:6px;border-radius:50%;background:currentColor}.status-completed{background:#e9f8f1;color:var(--success)}.status-in_progress{background:#ece9ff;color:var(--primary)}.status-pending,.status-queued,.status-submitting{background:#fff5df;color:#b2730e}.status-failed,.status-cancelled,.status-expired{background:#fff0f2;color:var(--danger)}.tag-row{display:flex;gap:.3rem;flex-wrap:wrap;margin:.55rem 0}.tag{background:#f0effb;color:#6556c9;padding:.25rem .4rem;border-radius:6px;font-size:.58rem;font-weight:700}.video-meta{display:flex;justify-content:space-between;gap:.35rem;color:#858a9a;font-size:.57rem;border-top:1px solid var(--line);padding-top:.65rem}.card-actions{display:flex;justify-content:flex-end;gap:.35rem;margin-top:.65rem}.empty-state{display:grid;place-items:center;text-align:center;color:var(--muted);padding:2rem;gap:.35rem}.empty-state>div{width:42px;height:42px;border-radius:13px;background:var(--primary-soft);display:grid;place-items:center;color:var(--primary)}.empty-state strong{color:#4c5265;font-size:.8rem}.empty-state span{font-size:.68rem}.empty-state.compact{padding:1.5rem}.empty-state.wide{grid-column:1/-1;background:#fff;border:1px dashed var(--line);border-radius:15px}
.toolbar{display:flex;gap:.7rem;align-items:center;margin-bottom:1rem}.toolbar input{max-width:340px}.toolbar select{max-width:180px}.toolbar span{margin-left:auto;color:var(--muted);font-size:.7rem}.data-table-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:auto;box-shadow:0 7px 24px rgba(25,31,54,.04)}.data-table-wrap.flush{border:0;border-radius:0;box-shadow:none}.data-table{width:100%;border-collapse:collapse;min-width:780px}.data-table th,.data-table td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--line);vertical-align:middle;font-size:.72rem}.data-table th{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:#858b9c;background:#fafbfc}.data-table tr:last-child td{border-bottom:0}.data-table td>small,.data-table td div>small{display:block;color:var(--muted);margin-top:.2rem}.file-cell,.user-cell{display:flex;align-items:center;gap:.7rem}.file-cell>span{width:35px;height:35px;border-radius:10px;background:#f0effb;color:var(--primary);display:grid;place-items:center}.file-cell>div,.user-cell>div{min-width:0}.file-cell strong{display:block;max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.usage-cards{margin-bottom:1.15rem}.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.settings-card .panel-head{padding:1rem 1.2rem}.settings-card p{padding:0 1.2rem 1.2rem;color:var(--muted);font-size:.78rem;line-height:1.6}.settings-list{margin:0}.settings-list div{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 1.2rem;border-bottom:1px solid var(--line);font-size:.72rem}.settings-list div:last-child{border-bottom:0}.settings-list dt{color:var(--muted)}.settings-list dd{margin:0;font-weight:700;text-align:right;overflow-wrap:anywhere}.warning-card{background:linear-gradient(135deg,#fffdf7,#fff)}
.modal{width:min(560px,calc(100vw - 2rem));border:0;border-radius:18px;padding:0;box-shadow:0 25px 80px rgba(15,18,32,.25)}.modal::backdrop{background:rgba(10,12,20,.55);backdrop-filter:blur(3px)}.modal-head{padding:1.2rem 1.35rem;border-bottom:1px solid var(--line)}.modal-head h2{margin:.25rem 0 0}.modal>.form-stack{padding:1.25rem}.modal-close{position:absolute;right:1rem;top:1rem;border:0;background:#f0f2f6;width:30px;height:30px;border-radius:9px;cursor:pointer}.toast-region{position:fixed;right:1rem;bottom:1rem;z-index:100;display:grid;gap:.5rem}.toast{background:#1a1e2e;color:#fff;padding:.8rem 1rem;border-radius:11px;box-shadow:var(--shadow);font-size:.76rem;animation:toastin .25s ease}.toast.error{background:#9e263b}@keyframes toastin{from{transform:translateY(8px);opacity:0}}
@media(max-width:1250px){.video-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.console-grid{grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr)}.field-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}.estimate-bar{grid-template-columns:repeat(3,1fr)}.generate-btn{grid-column:1/-1}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:960px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-270px;transition:.25s;width:248px}.sidebar.open{left:0;box-shadow:20px 0 50px rgba(0,0,0,.25)}.menu-toggle{display:block}.topbar{padding:0 1rem}.topbar>div:nth-child(2){margin-right:auto;margin-left:.75rem}.content{padding:1.2rem}.console-grid{grid-template-columns:1fr}.queue-panel{min-height:300px}.video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.setup-shell,.login-shell{grid-template-columns:1fr}.setup-hero,.login-promo{display:none}.setup-card,.login-card{padding:2rem;min-height:100vh}.mobile-brand{display:flex;margin-bottom:3rem}.settings-grid{grid-template-columns:1fr}}
@media(max-width:650px){.topbar-actions .api-state{display:none}.balance-pill span{display:none}.balance-pill{padding:.48rem .62rem}.balance-pill strong{font-size:.7rem}.metric-grid{grid-template-columns:1fr 1fr;gap:.65rem}.metric-card{padding:.9rem}.metric-card strong{font-size:1.25rem}.content{padding:1rem}.field-grid.two,.field-grid.four,.asset-picker-grid{grid-template-columns:1fr}.toggle-row{align-items:flex-start;flex-wrap:wrap}.seed-field{margin-left:0;width:100%}.seed-field input{flex:1}.estimate-bar{grid-template-columns:1fr 1fr}.estimate-bar>div:nth-child(3){display:none}.generate-btn{grid-column:1/-1}.video-grid{grid-template-columns:1fr}.toolbar{flex-wrap:wrap}.toolbar input,.toolbar select{max-width:none}.toolbar span{margin-left:0;width:100%}.page-intro{align-items:flex-start;flex-direction:column}.app-footer{padding:1rem;flex-direction:column;gap:.25rem}.login-card h2{font-size:1.6rem}.setup-card{padding:1.2rem}.login-metrics{gap:1rem}}

/* v1.2 overall balance + MYR display */
.balance-pill strong,
.estimate-bar strong {
  white-space: nowrap;
}
@media (max-width: 720px) {
  .balance-pill {
    max-width: 100%;
  }
  .balance-pill strong {
    font-size: .78rem;
  }
}

/* v1.3 compact sidebar usage summary */
.sidebar-metrics{
  margin-top:auto;
  display:grid;
  gap:.45rem;
  padding:.55rem;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.06);
  border-radius:13px;
}
.sidebar-metric{
  min-width:0;
  padding:.55rem .6rem;
  border-radius:10px;
  background:rgba(255,255,255,.035);
}
.sidebar-metric>span{
  display:block;
  color:#8f95aa;
  font-size:.61rem;
  font-weight:700;
}
.sidebar-metric>strong{
  display:block;
  margin:.18rem 0 .06rem;
  color:#fff;
  font-size:.86rem;
  letter-spacing:-.02em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sidebar-metric>small{
  display:block;
  color:#70768a;
  font-size:.56rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sidebar-metric .progress{
  height:4px;
  margin:.38rem 0 0;
  background:rgba(255,255,255,.08);
}
.sidebar-metric-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.45rem;
}
.sidebar-metric.compact{
  padding:.55rem;
}
.sidebar-metric.compact>strong{
  font-size:1rem;
}
.sidebar-user{
  flex-shrink:0;
}
@media (max-height: 720px) and (min-width: 961px) {
  .sidebar{
    overflow-y:auto;
  }
  .sidebar-metrics{
    margin-top:.75rem;
  }
  .sidebar-brand{
    padding-bottom:.7rem;
  }
  .nav-link{
    padding:.58rem .75rem;
  }
}

/* Video model catalog + creative controls */
.model-profile{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:.9rem 1rem;border:1px solid #dedaf8;background:linear-gradient(135deg,#f8f7ff,#fbfcff);border-radius:14px}.model-profile>div:first-child{min-width:0;max-width:66%}.model-profile .model-kicker{display:block;color:var(--primary);font-size:.58rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.25rem}.model-profile strong{font-size:.88rem}.model-profile p{margin:.3rem 0 0;color:var(--muted);font-size:.68rem;line-height:1.5}.capability-pills{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.35rem;max-width:38%}.capability-pills span{padding:.3rem .45rem;border:1px solid #ddd9f5;background:#fff;border-radius:100px;color:#665ac8;font-size:.57rem;font-weight:750;white-space:nowrap}.field-grid.model-settings{grid-template-columns:minmax(240px,1.6fr) repeat(3,minmax(110px,.65fr));align-items:start}.field-grid.model-settings .model-field small{line-height:1.35}.field-grid.model-settings .size-field{grid-column:2/-1}.creative-panel,.provider-panel{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}.creative-panel>summary,.provider-panel>summary{list-style:none;cursor:pointer;padding:.85rem .95rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:#fafaff}.creative-panel>summary::-webkit-details-marker,.provider-panel>summary::-webkit-details-marker{display:none}.creative-panel>summary>div,.provider-panel>summary>div{display:grid;gap:.18rem}.creative-panel>summary strong,.provider-panel>summary strong{font-size:.78rem}.creative-panel>summary span,.provider-panel>summary span{font-size:.62rem;color:var(--muted);font-weight:500}.creative-panel>summary b,.provider-panel>summary b{font-size:.62rem;color:var(--primary);background:var(--primary-soft);padding:.32rem .48rem;border-radius:100px}.creative-body{display:grid;gap:.8rem;padding:.9rem;border-top:1px solid var(--line)}.style-quick{display:flex;flex-wrap:wrap;gap:.4rem}.style-quick button{border:1px solid var(--line);background:#fff;color:#555b6e;border-radius:100px;padding:.42rem .62rem;font-size:.64rem;font-weight:750;cursor:pointer}.style-quick button:hover,.style-quick button.active{border-color:#a99ef8;background:var(--primary-soft);color:var(--primary)}.field-grid.creative-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.input-mode-row{display:grid;grid-template-columns:minmax(220px,.7fr) 1.3fr;align-items:end;gap:.8rem;padding:.8rem .9rem;border-radius:13px;background:#f7f8fc;border:1px solid var(--line)}.input-mode-row>div{display:grid;gap:.18rem;padding-bottom:.15rem}.input-mode-row>div strong{font-size:.74rem}.input-mode-row>div span{font-size:.64rem;color:var(--muted);line-height:1.45}.input-panel{display:grid;gap:.75rem}.input-panel[hidden],.frame-input-card[hidden],#keepFilesLine[hidden],#providerPanel[hidden],#sizeField[hidden],#seedField[hidden]{display:none!important}.frame-panel{grid-template-columns:repeat(2,minmax(0,1fr))}.frame-input-card{display:grid;gap:.75rem;border:1px solid var(--line);border-radius:14px;background:#fafbfe;padding:.9rem}.frame-input-card>div{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:.5rem}.frame-input-card>div small{grid-column:2;color:var(--muted);font-size:.61rem}.frame-badge{grid-row:1/3;width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:var(--primary-soft);color:var(--primary);font-size:.55rem;font-weight:900}.frame-input-card strong{font-size:.78rem}.frame-upload{position:relative;border:1px dashed #cfd3df;border-radius:11px;padding:.72rem .8rem;background:#fff;cursor:pointer}.frame-upload input{position:absolute;inset:0;opacity:0;cursor:pointer}.frame-upload span{color:var(--muted);font-size:.64rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.provider-panel>div{padding:.9rem;border-top:1px solid var(--line)}.provider-panel code{font-size:.62rem;background:#f0f1f5;padding:.1rem .25rem;border-radius:4px}.model-chip{max-width:52%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.generation-panel form{overflow:visible}

@media(max-width:1250px){.field-grid.model-settings{grid-template-columns:repeat(2,minmax(0,1fr))}.field-grid.model-settings .model-field{grid-column:1/-1}.field-grid.model-settings .size-field{grid-column:auto}.field-grid.creative-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.model-profile{flex-direction:column}.model-profile>div:first-child,.capability-pills{max-width:none}.capability-pills{justify-content:flex-start}}
@media(max-width:650px){.field-grid.model-settings,.field-grid.creative-grid,.input-mode-row,.frame-panel{grid-template-columns:1fr}.model-profile{padding:.8rem}.capability-pills{gap:.25rem}.creative-panel>summary b,.provider-panel>summary b{display:none}.model-chip{max-width:45%}.style-quick{overflow:auto;flex-wrap:nowrap;padding-bottom:.2rem}.style-quick button{white-space:nowrap}}


/* v1.6 clearer generation form + portrait defaults */
.generation-panel{
  background:#f7f9fd;
  border-color:#d8deea;
}
.generation-panel>.panel-head{
  background:linear-gradient(135deg,#ffffff 0%,#f4f1ff 100%);
  border-bottom-color:#d8deea;
}
.generation-panel form{
  padding:1.15rem;
  background:#edf1f7;
  gap:.9rem;
}
.form-section-card{
  display:grid;
  gap:.9rem;
  padding:1rem;
  background:#fff;
  border:1px solid #d7deeb;
  border-radius:15px;
  box-shadow:0 4px 14px rgba(34,42,70,.045);
}
.form-section-card.details-card{
  border-top:3px solid #7a6be9;
}
.form-section-card.model-control-card{
  border-top:3px solid #4a93d8;
  background:linear-gradient(180deg,#fff 0%,#fafdff 100%);
}
.form-section-card.input-source-card{
  border-top:3px solid #33a47b;
  background:linear-gradient(180deg,#fff 0%,#f9fffc 100%);
}
.form-section-head{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding-bottom:.75rem;
  border-bottom:1px solid #e4e8f1;
}
.form-section-head>div:last-child{
  display:grid;
  gap:.15rem;
}
.form-section-head strong{
  font-size:.84rem;
  color:#202538;
}
.form-section-head small{
  font-size:.64rem;
  font-weight:500;
  color:var(--muted);
}
.section-icon{
  flex:0 0 auto;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#efedff;
  color:var(--primary);
  font-size:.83rem;
  font-weight:900;
}
.model-control-card .section-icon{
  background:#eaf5ff;
  color:#2678bd;
}
.input-source-card .section-icon{
  background:#e8f8f1;
  color:#1e8b66;
}
.generation-panel label{
  color:#30364a;
}
.generation-panel input,
.generation-panel select,
.generation-panel textarea{
  background:#fbfcff;
  border-color:#cfd6e4;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.generation-panel input:hover,
.generation-panel select:hover,
.generation-panel textarea:hover{
  border-color:#b9c2d3;
}
.generation-panel textarea{
  min-height:112px;
}
.model-control-card .toggle-row{
  background:#edf6ff;
  border-color:#d3e4f4;
}
.creative-panel{
  border:1px solid #d8d1f6;
  background:#fbfaff;
  box-shadow:0 4px 14px rgba(71,57,150,.04);
}
.creative-panel>summary{
  background:linear-gradient(135deg,#f4f1ff,#faf9ff);
  border-left:3px solid #8b7cf7;
}
.creative-panel[open]>summary{
  border-bottom:1px solid #ded9f2;
}
.creative-body{
  background:#fff;
  border-top:0;
}
.input-mode-row{
  background:#eef7ff;
  border-color:#d1e3f3;
}
.upload-zone{
  min-height:132px;
  background:#fff;
  border:2px dashed #b8c4d8;
}
.upload-zone:hover{
  border-color:#8b7cf7;
  background:#fbfaff;
}
.asset-picker{
  background:#fff;
  border-color:#d5dce8;
}
.checkline{
  padding:.7rem .8rem;
  border-radius:10px;
  background:#eef9f4;
  border:1px solid #d2eadf;
}
.provider-panel{
  border-color:#e7dfc8;
  background:#fffdf7;
}
.provider-panel>summary{
  background:#fff9e8;
}
.model-profile{
  display:none!important;
}
.field-grid.model-settings{
  grid-template-columns:minmax(260px,1.7fr) repeat(3,minmax(110px,.65fr));
}
.field-grid.model-settings .model-field small{
  margin-top:.05rem;
}
@media(max-width:1250px){
  .field-grid.model-settings{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:650px){
  .generation-panel form{
    padding:.75rem;
  }
  .form-section-card{
    padding:.8rem;
  }
  .form-section-head{
    align-items:flex-start;
  }
}

/* v1.7 login branding and layout correction */
.brand-logo,
.brand-lockup > img,
.login-promo .brand-lockup > img,
.mobile-brand > img {
  display:block;
  width:38px !important;
  height:38px !important;
  min-width:38px;
  max-width:38px !important;
  max-height:38px !important;
  flex:0 0 38px;
  object-fit:contain;
  border-radius:10px;
}
.login-promo{
  padding:clamp(2.25rem,5vw,5.5rem);
  gap:2.5rem;
}
.login-brand{
  position:relative;
  z-index:2;
  align-self:flex-start;
}
.login-promo-copy{
  position:relative;
  z-index:2;
  width:min(100%,620px);
}
.login-promo-copy h1{
  max-width:620px;
  font-size:clamp(2.75rem,4.6vw,5rem);
  line-height:.96;
  overflow-wrap:normal;
}
.login-card{
  padding:clamp(2rem,7vw,7rem);
}
.login-card-inner{
  width:min(100%,620px);
  margin:0 auto;
}
.login-card input{
  min-height:48px;
}
.login-card .btn{
  min-height:48px;
}
@media (max-height:760px) and (min-width:961px){
  .login-promo{padding:2rem 4rem;gap:1.5rem}
  .login-promo-copy h1{font-size:clamp(2.5rem,4vw,4rem);margin:.5rem 0 1rem}
  .login-promo-copy p{font-size:.95rem;line-height:1.5}
  .login-metrics{gap:1.5rem}
}
@media (max-width:960px){
  .login-card-inner{width:min(100%,560px)}
  .mobile-brand{margin-bottom:2.25rem}
}
/* Video library search and tag filters */
.library-toolbar{display:grid;grid-template-columns:minmax(220px,1.35fr) minmax(200px,1fr) minmax(150px,.65fr) auto auto;align-items:end;gap:.75rem;padding:1rem;background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:0 6px 20px rgba(25,31,54,.04)}
.library-filter{display:grid;gap:.38rem;min-width:0}
.library-filter>span{font-size:.62rem;font-weight:800;color:#555d72;letter-spacing:.02em}
.library-toolbar input,.library-toolbar select{width:100%;max-width:none}
.library-clear{white-space:nowrap;min-height:42px}
.library-clear:disabled{opacity:.45;cursor:not-allowed}
.library-count{margin-left:0!important;white-space:nowrap;align-self:center;text-align:right}
.library-no-results[hidden]{display:none!important}
.video-card[hidden]{display:none!important}
@media(max-width:1100px){.library-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}.library-clear{justify-self:start}.library-count{justify-self:end}}
@media(max-width:650px){.library-toolbar{grid-template-columns:1fr}.library-clear{width:100%}.library-count{justify-self:start;text-align:left;width:auto!important}}

/* Reusable tag manager */
.tag-field{display:grid;gap:.45rem;min-width:0}
.field-label{font-size:.78rem;font-weight:750;color:#3c4153}
.tag-manager{display:grid;gap:.65rem;padding:.7rem;border:1px solid #d9d9ef;border-radius:13px;background:#fbfbff}
.selected-tag-list{display:flex;align-items:flex-start;align-content:flex-start;flex-wrap:wrap;gap:.38rem;min-height:40px;max-height:92px;overflow-y:auto;padding:.42rem;border:1px solid #e2e3ee;border-radius:10px;background:#fff}
.selected-tag-list.compact{min-height:42px;max-height:76px}
.tag-placeholder{align-self:center;color:#9499aa;font-size:.68rem;font-weight:600;padding:.25rem .32rem}
.selected-tag-chip{display:inline-flex;align-items:center;gap:.38rem;max-width:100%;border:1px solid #d9d3ff;background:#f0edff;color:#5d4fc5;border-radius:999px;padding:.34rem .48rem .34rem .58rem;font-size:.65rem;font-weight:800;cursor:pointer}
.selected-tag-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.selected-tag-chip b{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:#ded8ff;font-size:.72rem;line-height:1}
.selected-tag-chip:hover{border-color:#aea2f9;background:#e9e5ff}
.tag-add-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem}
.tag-add-row input{min-width:0}
.tag-add-button{white-space:nowrap}
.tag-existing-picker{position:relative;border:1px solid #e0e1ec;border-radius:10px;background:#fff}
.tag-existing-picker>summary{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.68rem .75rem;cursor:pointer;list-style:none;font-size:.7rem;font-weight:800;color:#42485b}
.tag-existing-picker>summary::-webkit-details-marker{display:none}
.tag-existing-picker>summary:after{content:'⌄';color:#7c70e8;font-size:.85rem;transition:transform .18s ease}
.tag-existing-picker[open]>summary:after{transform:rotate(180deg)}
.tag-existing-picker>summary small{margin-left:auto;color:#8a90a2;font-size:.6rem;font-weight:650}
.tag-picker-panel{display:grid;gap:.55rem;padding:.65rem;border-top:1px solid #ececf3}
.tag-picker-panel>input{padding:.62rem .7rem}
.tag-option-list{display:grid;gap:.32rem;max-height:180px;overflow-y:auto;padding-right:.25rem;scrollbar-width:thin;overscroll-behavior:contain}
.tag-option{display:flex;align-items:center;justify-content:space-between;gap:.75rem;width:100%;border:1px solid transparent;border-radius:8px;background:#f7f8fb;color:#4d5366;padding:.48rem .58rem;text-align:left;font-size:.66rem;font-weight:750;cursor:pointer}
.tag-option:hover{border-color:#d9d4ff;background:#f3f0ff;color:#5b4cc5}
.tag-option.active{border-color:#b9adff;background:#ece8ff;color:#5646c7}
.tag-option small{display:grid;place-items:center;min-width:23px;height:20px;border-radius:999px;background:#e8eaf1;color:#747a8c;font-size:.56rem}
.tag-option.active small{background:#d7d0ff;color:#5748bb}
.tag-option[hidden]{display:none!important}
.tag-options-empty{padding:.8rem;text-align:center;color:#969bad;font-size:.66rem;background:#fafafd;border-radius:8px}

/* Library tag filters */
.library-toolbar{grid-template-columns:minmax(220px,1.15fr) minmax(300px,1.3fr) minmax(150px,.62fr) auto auto}
.library-tag-control{display:grid;gap:.4rem;min-width:0}
.library-tag-picker>summary{min-height:42px}
.library-tag-picker .tag-picker-panel{position:absolute;left:-1px;right:-1px;top:calc(100% + 6px);z-index:30;border:1px solid #dcddea;border-radius:12px;background:#fff;box-shadow:0 18px 45px rgba(25,31,54,.16)}
.library-tag-picker[open]{z-index:31}
.library-tag-picker #clearTagFilters{justify-self:start}

/* Edit tags modal */
.tag-edit-modal{width:min(620px,calc(100vw - 2rem))}
.tag-edit-modal .modal-head p{margin:.35rem 0 0;color:var(--muted);font-size:.72rem}
.tag-edit-modal>.form-stack{padding:1.25rem}
.modal-actions{display:flex;justify-content:flex-end;gap:.6rem}
.card-actions{flex-wrap:wrap}

@media(max-width:1100px){
  .library-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .library-tag-picker .tag-picker-panel{position:static;border-width:1px 0 0;border-radius:0;box-shadow:none}
}
@media(max-width:650px){
  .tag-add-row{grid-template-columns:1fr}
  .tag-add-button{width:100%}
  .selected-tag-list{max-height:120px}
  .modal-actions{display:grid;grid-template-columns:1fr 1fr}
}


/* v1.9 simplified tags and Video Console naming */
.details-card .field-grid.two{align-items:start}
.details-card .field-grid.two>label>input{min-height:44px;height:44px}
.tag-manager-compact{gap:.5rem;padding:.58rem;background:#fff}
.tag-manager-compact .selected-tag-list{min-height:36px;max-height:72px;padding:.32rem}
.tag-entry-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(180px,.8fr);gap:.55rem;align-items:center}
.tag-entry-row input,.tag-entry-row select{min-height:44px}
.library-toolbar{grid-template-columns:minmax(260px,1.35fr) minmax(200px,.9fr) minmax(160px,.7fr) auto auto}
.library-tag-filter select{min-height:42px}
@media(max-width:1100px){.library-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.tag-entry-row{grid-template-columns:1fr}.library-toolbar{grid-template-columns:1fr}}

/* v2.0 combined tag textbox and existing-tag dropdown */
.tag-manager-combobox{
  position:relative;
  display:grid;
  gap:.42rem;
  padding:0;
  border:0;
  background:transparent;
}
.tag-combobox-shell{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.35rem;
  min-height:46px;
  padding:5px;
  border:1px solid #d9ddeb;
  border-radius:11px;
  background:#fff;
  transition:border-color .16s ease,box-shadow .16s ease;
  cursor:text;
}
.tag-combobox-shell:focus-within{
  border-color:#8f7cff;
  box-shadow:0 0 0 3px rgba(111,86,229,.11);
}
.tag-combobox-chips{
  display:contents;
}
.tag-manager-combobox .selected-tag-chip{
  flex:0 0 auto;
  min-height:32px;
  max-width:190px;
  border-radius:8px;
  padding:.31rem .42rem .31rem .52rem;
}
.tag-combobox-input{
  flex:1 1 190px;
  width:auto!important;
  min-width:150px;
  min-height:34px!important;
  height:34px!important;
  padding:.35rem .45rem!important;
  border:0!important;
  border-radius:7px!important;
  background:transparent!important;
  box-shadow:none!important;
  outline:0;
}
.tag-picker-toggle{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:.65rem;
  min-width:138px;
  min-height:36px;
  padding:.48rem .62rem;
  border:0;
  border-left:1px solid #e5e6ef;
  border-radius:8px;
  background:#f7f7fc;
  color:#41485d;
  font-size:.67rem;
  font-weight:800;
  cursor:pointer;
}
.tag-picker-toggle:hover,.tag-picker-toggle.open{
  background:#f0edff;
  color:#5d4cc9;
}
.tag-picker-toggle b{
  font-size:.82rem;
  line-height:1;
  transition:transform .16s ease;
}
.tag-picker-toggle.open b{transform:rotate(180deg)}
.tag-combobox-dropdown{
  position:absolute;
  z-index:50;
  top:52px;
  left:0;
  right:0;
  display:grid;
  gap:.55rem;
  padding:.68rem;
  border:1px solid #d9dbea;
  border-radius:12px;
  background:#fff;
  box-shadow:0 18px 46px rgba(25,31,54,.16);
}
.tag-combobox-dropdown[hidden]{display:none!important}
.tag-combobox-dropdown-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}
.tag-combobox-dropdown-head strong{font-size:.7rem;color:#3f465a}
.tag-combobox-dropdown-head small{font-size:.6rem;color:#8c92a3}
.tag-combobox-dropdown>input{
  min-height:38px;
  padding:.55rem .65rem;
}
.tag-combobox-options{
  max-height:210px;
  padding-right:.22rem;
}
.tag-manager-combobox .field-help{margin-left:1px}
@media(max-width:720px){
  .tag-combobox-shell{align-items:stretch}
  .tag-picker-toggle{flex:1 1 100%;border-left:0;border-top:1px solid #e5e6ef}
  .tag-combobox-input{flex-basis:160px}
}

/* v2.1 compact composer controls */
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.details-card .field-help{display:none}
.composer-control-card{
  position:relative;
  padding:.55rem;
  border:1px solid #d6dce8;
  border-radius:15px;
  background:#fff;
  box-shadow:0 4px 14px rgba(34,42,70,.04);
  overflow:visible;
  z-index:8;
}
.composer-toolbar{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.42rem;
}
.composer-pill,
.composer-toggle-pill,
.composer-popover>summary{
  min-height:40px;
  border:1px solid #dde1ea;
  border-radius:11px;
  background:#f8f9fc;
  color:#2f3547;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.composer-pill{
  display:flex;
  align-items:center;
  gap:.28rem;
  padding:0 .44rem 0 .56rem;
  cursor:pointer;
}
.composer-pill:hover,
.composer-toggle-pill:hover,
.composer-popover>summary:hover,
.composer-popover[open]>summary{
  border-color:#a99ef8;
  background:#f3f0ff;
  box-shadow:0 0 0 2px rgba(111,86,229,.07);
}
.composer-icon{
  flex:0 0 auto;
  color:#6555d6;
  font-size:.76rem;
  line-height:1;
}
.composer-pill select{
  width:auto!important;
  min-width:0!important;
  height:38px!important;
  min-height:38px!important;
  padding:.3rem 1.45rem .3rem .28rem!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#303648;
  font-size:.68rem;
  font-weight:750;
  cursor:pointer;
}
.composer-model{flex:1 1 270px;max-width:440px}
.composer-model select{width:100%!important}
.composer-mode{flex:0 1 190px}
.composer-mode select{max-width:170px}
.composer-pill.compact{flex:0 0 auto}
.composer-pill.compact select{max-width:92px}
.composer-toggle-pill{
  display:inline-flex;
  align-items:center;
  gap:.42rem;
  padding:.42rem .62rem;
  cursor:pointer;
  user-select:none;
}
.composer-toggle-pill input{position:absolute;opacity:0;pointer-events:none}
.composer-toggle-dot{
  width:24px;
  height:14px;
  border-radius:100px;
  background:#c6cad5;
  position:relative;
  transition:.18s ease;
}
.composer-toggle-dot:after{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  left:2px;
  top:2px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.22);
  transition:.18s ease;
}
.composer-toggle-pill input:checked+.composer-toggle-dot{background:#6f56e5}
.composer-toggle-pill input:checked+.composer-toggle-dot:after{transform:translateX(10px)}
.composer-toggle-pill:has(input:disabled){opacity:.45;cursor:not-allowed}
.composer-toggle-pill b{font-size:.65rem}
.composer-popover{
  position:relative;
  flex:0 0 auto;
}
.composer-popover[hidden]{display:none!important}
.composer-popover>summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.38rem;
  min-width:40px;
  padding:.48rem .62rem;
  cursor:pointer;
  font-size:.7rem;
  font-weight:800;
}
.composer-popover>summary::-webkit-details-marker{display:none}
.composer-popover>summary span{font-size:.86rem;color:#5b4dca}
.composer-popover>summary b{font-size:.64rem;color:#3d4356}
.composer-popover-card{
  position:absolute;
  z-index:80;
  right:0;
  top:calc(100% + 8px);
  display:grid;
  gap:.72rem;
  width:min(560px,calc(100vw - 3rem));
  padding:.9rem;
  border:1px solid #d8dce7;
  border-radius:14px;
  background:#fff;
  box-shadow:0 20px 54px rgba(23,27,44,.18);
}
.small-popover{width:270px}
.popover-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding-bottom:.55rem;
  border-bottom:1px solid #eceef4;
}
.popover-title strong{font-size:.78rem}
.popover-title span{font-size:.59rem;color:#858b9c;text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.composer-popover-card label{gap:.32rem}
.composer-popover-card input,
.composer-popover-card select{
  min-height:40px;
  background:#fafbfe;
}
.creative-popover-card{width:min(620px,calc(100vw - 3rem))}
.creative-popover-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.55rem;
}
.creative-popover-card .style-quick{gap:.32rem}
.creative-popover-card .style-quick button{padding:.38rem .52rem;font-size:.6rem}
.input-source-card .form-section-head small{display:none}
.input-source-card{z-index:1}
.compact-submit-bar{
  display:flex;
  align-items:center;
  gap:.65rem;
  padding:.58rem;
  border:1px solid #d9dee9;
  border-radius:14px;
  background:#171b2c;
  color:#fff;
}
.compact-estimate{
  display:grid;
  gap:.12rem;
  min-width:115px;
  padding:.2rem .55rem;
  border-right:1px solid rgba(255,255,255,.09);
}
.compact-estimate span{font-size:.57rem;color:#9298ad;text-transform:uppercase;letter-spacing:.06em;font-weight:750}
.compact-estimate strong{font-size:.82rem;white-space:nowrap}
.compact-submit-bar .generate-btn{
  min-width:150px;
  min-height:46px;
  margin-left:auto;
  border-radius:11px;
}
@media(max-width:1150px){
  .composer-model{max-width:none;flex-basis:100%}
  .composer-mode{flex:1 1 180px}
  .compact-submit-bar{flex-wrap:wrap}
  .compact-submit-bar .generate-btn{flex:1 1 100%;margin-left:0}
}
@media(max-width:720px){
  .composer-control-card{padding:.45rem}
  .composer-toolbar{gap:.34rem}
  .composer-model,.composer-mode{flex:1 1 100%}
  .composer-mode select{max-width:none;width:100%!important}
  .composer-pill.compact{flex:1 1 calc(33.333% - .34rem)}
  .composer-pill.compact select{width:100%!important;max-width:none}
  .composer-toggle-pill{flex:1 1 auto}
  .composer-popover{position:static}
  .composer-popover-card{left:0;right:0;width:100%;top:calc(100% + 6px)}
  .creative-popover-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .compact-estimate{flex:1 1 calc(50% - .65rem);border-right:0;background:rgba(255,255,255,.04);border-radius:8px;padding:.5rem}
  .compact-estimate:nth-child(3){flex-basis:100%}
}
@media(max-width:460px){
  .creative-popover-grid{grid-template-columns:1fr}
  .composer-pill.compact{flex-basis:calc(50% - .34rem)}
}

/* Compact priced model picker + visual reference tray */
.composer-model{
  flex:0 1 330px;
  width:min(330px,100%);
  max-width:330px;
  min-width:250px;
}
.composer-model select{
  width:100%!important;
  max-width:285px;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.composer-mode{flex:0 1 155px}
.composer-mode select{max-width:135px}

.composer-popover-backdrop{
  position:fixed;
  inset:0;
  z-index:90;
  background:rgba(13,17,29,.42);
  backdrop-filter:blur(2px);
}
.composer-modal-open{overflow:hidden}
.composer-modal-open .composer-control-card{z-index:100}
.creative-popover-card{
  position:fixed;
  z-index:110;
  left:50%;
  right:auto;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(620px,calc(100vw - 32px));
  max-height:min(78vh,720px);
  overflow:auto;
}

.upload-zone{
  min-height:176px;
  display:block;
  padding:14px;
  text-align:left;
  overflow:visible;
}
.upload-zone .upload-file-input{
  display:none!important;
  position:static!important;
  inset:auto!important;
  width:0!important;
  height:0!important;
  opacity:0!important;
  pointer-events:none!important;
}
.upload-zone-copy{
  min-height:92px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:.28rem;
  text-align:center;
}
.upload-zone-copy[hidden]{display:none!important}
.upload-zone-copy strong{font-size:.78rem}
.upload-zone-copy span{font-size:.63rem;color:var(--muted)}
.upload-action-row{
  display:flex;
  align-items:center;
  gap:.45rem;
  margin-top:.35rem;
  position:relative;
  z-index:4;
}
.upload-action-button,
.asset-picker-popover>summary{
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.38rem;
  padding:.45rem .68rem;
  border:1px solid #d9deea;
  border-radius:10px;
  background:#fff;
  color:#33394b;
  font:inherit;
  font-size:.66rem;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(28,34,54,.04);
}
.upload-action-button:hover,
.asset-picker-popover>summary:hover,
.asset-picker-popover[open]>summary{
  border-color:#a99ef8;
  color:#5c4dcc;
  background:#f7f5ff;
}
.upload-action-button span{font-size:.85rem;color:#6657d8}
.asset-picker-popover{
  position:relative;
  border:0;
  border-radius:0;
  background:transparent;
}
.asset-picker-popover>summary{
  padding:.45rem .68rem;
  list-style:none;
}
.asset-picker-popover>summary::-webkit-details-marker{display:none}
.asset-picker-popover>summary span{color:#6657d8;font-weight:900}
.asset-picker-popover>summary b{font-size:.66rem}
.asset-picker-popover>summary small{
  min-width:18px;
  height:18px;
  display:grid;
  place-items:center;
  padding:0 .25rem;
  border-radius:9px;
  background:#efedff;
  color:#6657d8;
  font-size:.52rem;
}
.asset-picker-popover-card{
  position:absolute;
  z-index:120;
  left:0;
  top:calc(100% + 8px);
  width:min(520px,calc(100vw - 64px));
  max-height:360px;
  overflow:auto;
  padding:.72rem;
  border:1px solid #d9deea;
  border-radius:14px;
  background:#fff;
  box-shadow:0 20px 55px rgba(22,28,46,.18);
}
.asset-picker-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  margin-bottom:.55rem;
}
.asset-picker-head strong{font-size:.75rem}
.asset-picker-head span{font-size:.58rem;color:var(--muted)}
.asset-picker-popover .asset-picker-grid{
  border:0;
  padding:0;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.42rem;
}
.asset-picker-popover .asset-option{
  grid-template-columns:auto 42px minmax(0,1fr);
  min-height:54px;
  padding:.4rem;
  cursor:pointer;
}
.asset-picker-popover .asset-option:has(input:checked){
  border-color:#8979ef;
  background:#f5f2ff;
  box-shadow:0 0 0 2px rgba(111,86,229,.07);
}
.asset-thumb{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#eef0f6;
  color:#6556d4;
  overflow:hidden;
  font-size:.9rem;
}
.asset-thumb img{width:100%;height:100%;object-fit:cover}
.asset-option-copy{display:grid;min-width:0}
.asset-option-copy strong{font-size:.63rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.asset-option-copy small{font-size:.55rem;color:var(--muted)}

.reference-preview-strip{
  display:flex;
  align-items:stretch;
  gap:.55rem;
  margin-top:.72rem;
  padding:.1rem .05rem .35rem;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scrollbar-width:thin;
}
.reference-preview-strip[hidden]{display:none!important}
.reference-preview-card{
  position:relative;
  flex:0 0 150px;
  min-width:0;
  padding:.38rem;
  border:1px solid #dce1eb;
  border-radius:12px;
  background:#fff;
  box-shadow:0 4px 13px rgba(27,34,54,.06);
}
.reference-preview-card.existing{background:#fbfaff;border-color:#ddd7ff}
.reference-preview-media{
  position:relative;
  height:82px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:9px;
  background:linear-gradient(135deg,#eef1f8,#e5e8f1);
  color:#6556d4;
  font-size:1.15rem;
}
.reference-preview-media img,
.reference-preview-media video{width:100%;height:100%;object-fit:cover}
.reference-preview-media>span{
  position:absolute;
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.9);
  box-shadow:0 3px 10px rgba(0,0,0,.12);
  color:#4d42b2;
  font-size:.7rem;
}
.reference-preview-card.audio .reference-preview-media{
  background:linear-gradient(135deg,#eeeaff,#dfe9ff);
}
.reference-preview-copy{display:grid;gap:.08rem;padding:.38rem .18rem .08rem;min-width:0}
.reference-preview-copy strong{font-size:.61rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reference-preview-copy small{font-size:.51rem;color:var(--muted);white-space:nowrap}
.reference-preview-remove{
  position:absolute;
  top:.15rem;
  right:.15rem;
  z-index:3;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  padding:0;
  border:2px solid #fff;
  border-radius:50%;
  background:#262b3b;
  color:#fff;
  cursor:pointer;
  font-size:.82rem;
  line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.reference-preview-remove:hover{background:#d64d64}
.upload-zone.has-previews{background:#fbfcff}
.upload-zone.dragover{border-color:#7564e6;background:#f7f5ff}

@media (max-width:900px){
  .composer-model{flex:1 1 280px;max-width:none;width:auto}
  .composer-model select{max-width:none}
  .asset-picker-popover-card{width:min(480px,calc(100vw - 40px))}
}
@media (max-width:620px){
  .creative-popover-card{top:16px;transform:translateX(-50%);max-height:calc(100vh - 32px)}
  .asset-picker-popover-card{position:fixed;left:16px;right:16px;top:50%;transform:translateY(-50%);width:auto;max-height:72vh}
  .asset-picker-popover .asset-picker-grid{grid-template-columns:1fr}
  .reference-preview-card{flex-basis:132px}
}

/* v2.3 clean composer, always-visible estimate, compact reference controls */
.generation-panel-compact{
  overflow:visible;
  background:#edf1f7;
}
.generation-panel-compact form{
  padding:.95rem;
  gap:.72rem;
  border-radius:inherit;
}
.generation-panel-compact .details-card{
  padding:.9rem;
}
.generation-panel-compact .composer-control-card{
  padding:.42rem;
  border-radius:13px;
}
@media (min-width:1151px){
  .generation-panel-compact .composer-toolbar{
    flex-wrap:nowrap;
  }
  .generation-panel-compact .composer-model{
    flex:1 1 245px;
    width:auto;
    min-width:210px;
    max-width:285px;
  }
  .generation-panel-compact .composer-model select{
    max-width:240px;
  }
  .generation-panel-compact .composer-mode{
    flex:0 1 145px;
  }
  .generation-panel-compact .composer-mode select{
    max-width:125px;
  }
  .generation-panel-compact .composer-pill.compact select{
    max-width:78px;
  }
}
.creative-icon-popover>summary{
  width:40px;
  min-width:40px;
  padding:.45rem;
}
.creative-icon-popover.has-value>summary{
  border-color:#8d7cf1;
  background:#efedff;
  box-shadow:0 0 0 2px rgba(111,86,229,.08);
}
.creative-icon-popover>summary span{
  font-size:1rem;
  line-height:1;
}

.composer-action-bar{
  position:sticky;
  top:92px;
  z-index:18;
  display:flex;
  align-items:center;
  gap:.35rem;
  padding:.42rem;
  border:1px solid #d8ddea;
  border-radius:13px;
  background:rgba(255,255,255,.96);
  color:#202538;
  box-shadow:0 10px 28px rgba(25,31,54,.11);
  backdrop-filter:blur(12px);
}
.composer-action-bar .compact-estimate{
  min-width:104px;
  padding:.16rem .62rem;
  border-right:1px solid #e5e8f0;
}
.composer-action-bar .compact-estimate span{
  color:#858b9c;
  font-size:.54rem;
}
.composer-action-bar .compact-estimate strong{
  color:#202538;
  font-size:.78rem;
}
.composer-action-bar .generate-btn{
  min-width:138px;
  min-height:40px;
  height:40px;
  margin-left:auto;
  border-radius:10px;
  padding:.55rem .9rem;
}

.input-source-compact{
  padding:.65rem;
  border-top:1px solid #d7deeb!important;
  background:#fff!important;
  box-shadow:0 4px 14px rgba(34,42,70,.035);
}
.input-source-compact .upload-zone{
  min-height:150px;
  padding:54px 12px 12px;
  border-width:1.5px;
  background:#fbfcff;
}
.input-source-compact .upload-zone-copy{
  min-height:70px;
  gap:.18rem;
}
.input-source-compact .upload-zone-copy strong{
  font-size:.72rem;
}
.input-source-compact .upload-zone-copy span{
  font-size:.58rem;
}
.compact-upload-actions{
  position:absolute;
  top:10px;
  left:10px;
  margin:0;
  gap:.38rem;
}
.icon-only-action,
.compact-upload-actions .asset-picker-popover>summary{
  width:36px;
  height:36px;
  min-height:36px;
  padding:0;
  border-radius:10px;
}
.icon-only-action span{
  font-size:1.15rem;
  line-height:1;
}
.compact-upload-actions .asset-picker-popover>summary{
  position:relative;
}
.compact-upload-actions .asset-picker-popover>summary>span{
  font-size:.9rem;
}
.compact-upload-actions .asset-picker-popover>summary>small{
  position:absolute;
  top:-5px;
  right:-6px;
  min-width:16px;
  height:16px;
  padding:0 .2rem;
  font-size:.48rem;
  border:1px solid #fff;
}
.input-source-compact .reference-preview-strip{
  margin-top:.2rem;
  padding-bottom:.15rem;
}
.input-source-compact .reference-preview-card{
  flex-basis:138px;
}

@media(max-width:1150px){
  .composer-action-bar{
    top:82px;
    flex-wrap:wrap;
  }
  .composer-action-bar .compact-estimate{
    flex:1 1 105px;
  }
  .composer-action-bar .generate-btn{
    flex:0 1 150px;
    margin-left:auto;
  }
}
@media(max-width:720px){
  .generation-panel-compact form{padding:.65rem}
  .composer-action-bar{
    position:static;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .composer-action-bar .compact-estimate{
    min-width:0;
    padding:.4rem;
    border-right:0;
    background:#f7f8fc;
    border-radius:8px;
  }
  .composer-action-bar .compact-estimate strong{
    font-size:.68rem;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .composer-action-bar .generate-btn{
    grid-column:1/-1;
    width:100%;
    margin:0;
  }
}

/* v2.4 simplified details, compact reference cards, bottom action bar */
.generation-panel-compact .details-card{
  gap:.72rem;
  padding:.85rem .9rem .9rem;
}

.provider-icon-popover>summary{
  width:40px;
  min-width:40px;
  padding:.45rem;
}
.provider-icon-popover>summary span{
  font-size:.88rem;
  line-height:1;
}
.provider-icon-popover.has-value>summary{
  border-color:#8d7cf1;
  background:#efedff;
  box-shadow:0 0 0 2px rgba(111,86,229,.08);
}
.provider-popover-card{
  position:fixed;
  z-index:110;
  left:50%;
  right:auto;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(520px,calc(100vw - 32px));
  max-height:min(76vh,620px);
  overflow:auto;
}
.provider-popover-card textarea{
  min-height:190px;
  resize:vertical;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  font-size:.7rem;
  line-height:1.5;
}
.provider-allowed-note{
  color:var(--muted);
  font-size:.61rem;
  line-height:1.45;
}

.input-source-compact .reference-preview-strip{
  gap:.42rem;
  min-height:112px;
  align-items:center;
  padding:.15rem .05rem .25rem;
}
.input-source-compact .reference-preview-card{
  flex:0 0 108px;
  width:108px;
  padding:.28rem;
  border-radius:10px;
}
.input-source-compact .reference-preview-media{
  height:66px;
  border-radius:8px;
  background:#f2f4f8;
}
.input-source-compact .reference-preview-media img,
.input-source-compact .reference-preview-media video{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#fff;
}
.input-source-compact .reference-preview-copy{
  padding:.28rem .12rem .04rem;
}
.input-source-compact .reference-preview-copy strong{font-size:.56rem}
.input-source-compact .reference-preview-copy small{font-size:.47rem}
.input-source-compact .reference-preview-remove{
  width:20px;
  height:20px;
  top:.08rem;
  right:.08rem;
  font-size:.68rem;
}

.bottom-submit-bar{
  margin-top:.05rem;
  box-shadow:0 7px 20px rgba(17,21,36,.12);
}
.bottom-submit-bar .generate-btn{
  min-height:50px;
}

@media(max-width:720px){
  .provider-popover-card{
    top:16px;
    transform:translateX(-50%);
    max-height:calc(100vh - 32px);
  }
  .input-source-compact .reference-preview-card{
    flex-basis:100px;
    width:100px;
  }
  .bottom-submit-bar{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .bottom-submit-bar .compact-estimate{
    min-width:0;
    border-right:0;
    background:rgba(255,255,255,.04);
    border-radius:8px;
    padding:.48rem;
  }
  .bottom-submit-bar .compact-estimate:nth-child(3){grid-column:1/-1}
  .bottom-submit-bar .generate-btn{grid-column:1/-1;width:100%;margin:0}
}


/* v2.5 unified compact popovers: Creative and Provider match Exact Output */
.composer-popover-backdrop{display:none!important}
.composer-modal-open{overflow:auto!important}
.composer-modal-open .composer-control-card{z-index:auto}

.creative-popover-card,
.provider-popover-card{
  position:absolute;
  z-index:80;
  left:auto;
  right:0;
  top:calc(100% + 8px);
  transform:none;
  max-height:min(68vh,560px);
  overflow:auto;
  padding:.9rem;
  border:1px solid #d8dce7;
  border-radius:14px;
  background:#fff;
  box-shadow:0 20px 54px rgba(23,27,44,.18);
}
.creative-popover-card{width:min(430px,calc(100vw - 3rem))}
.provider-popover-card{width:min(340px,calc(100vw - 3rem))}
.creative-popover-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.creative-popover-card .style-quick{
  flex-wrap:wrap;
  overflow:visible;
  padding-bottom:0;
}
.provider-popover-card textarea{
  min-height:135px;
  resize:vertical;
}
@media(max-width:620px){
  .creative-popover-card,
  .provider-popover-card{
    position:absolute;
    left:auto;
    right:0;
    top:calc(100% + 8px);
    transform:none;
    width:min(390px,calc(100vw - 2rem));
    max-height:64vh;
  }
  .creative-popover-grid{grid-template-columns:1fr}
}