:root{color-scheme:dark;--bg:#090b13;--panel:#121522;
--border:#252a3a;--muted:#9099ae;--purple:#a881ff}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:#f4f3fb;
font-family:Inter,ui-sans-serif,system-ui,Arial,sans-serif;
font-size:14px}
[hidden]{display:none!important}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.55}
button:focus-visible,input:focus-visible,textarea:focus-visible,
select:focus-visible{outline:2px solid #ad87ff;outline-offset:2px}
h1,h2,h3,p{margin-top:0}
p{line-height:1.6;color:var(--muted)}
a{color:#cdb9ff}
.logo{font-size:17px;font-weight:850;letter-spacing:.65px;
white-space:nowrap}
.logo b{color:#a889ff}
.logo-icon{display:inline-grid;place-items:center;
width:33px;height:33px;border-radius:10px;margin-right:8px;
background:linear-gradient(135deg,#a275ff,#5839be);
color:white;font-size:21px}
.login-page{min-height:100vh;display:grid;place-items:center;
padding:20px;background:radial-gradient(ellipse at 50% 30%,
#2a1a50,#090b13 65%)}
.login-card{width:min(460px,100%);padding:38px;
background:#141625;border:1px solid #33334a;border-radius:24px}
.login-art{font-size:85px;text-align:center;margin:20px 0 8px;
color:#ab83ff;text-shadow:0 0 60px #7952ef}
.login-card h1{font-size:36px;line-height:1.13}
.login-card h1 em,.hero h1 em{font-style:normal;
background:linear-gradient(95deg,#ae86ff,#edacfc);
background-clip:text;-webkit-text-fill-color:transparent}
.login-card input{margin-bottom:16px}
.error{color:#ff9b9b}
#studio{display:flex;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;
width:249px;flex-shrink:0;padding:27px 16px;
border-right:1px solid #202434;background:#0d1019;
display:flex;flex-direction:column}
.sidebar .logo{padding:0 8px;margin-bottom:54px}
.sidebar-label{color:#636c81;font-size:10px;
font-weight:800;letter-spacing:1.8px;margin:0 16px 16px}
.nav{display:block;width:100%;text-align:left;
border:0;background:transparent;color:#9aa2b5;
padding:14px 17px;border-radius:12px;margin-bottom:6px}
.nav span{font-size:19px;margin-right:10px}
.nav.active{color:#d5c3ff;background:#241d3a}
.sidebar-bottom{margin-top:auto;border-top:1px solid #26293a;
padding:20px 8px}
.engine{background:#192522;border:1px solid #2a4538;
padding:12px;border-radius:10px;color:#b5e0c8;font-size:12px}
.dot,.status-pill i{display:inline-block;width:7px;height:7px;
background:#5ade9d;border-radius:50%;margin-right:8px}
.tiny{color:#69748a;font-size:11px;margin:15px 0}
.logout{padding-left:12px}
.content{width:100%;min-width:0;max-width:1700px;
margin:0 auto;padding:0 36px}
.topbar{min-height:75px;display:flex;justify-content:space-between;
align-items:center;border-bottom:1px solid #1c2030}
.breadcrumbs{color:#98a0b2;font-size:12px}
.breadcrumbs span{padding:0 12px;color:#555a70}
.topright{display:flex;align-items:center;gap:16px}
.status-pill{font-size:10px;letter-spacing:1px;color:#9cd2b4;
border:1px solid #284336;border-radius:30px;padding:9px 12px}
.avatar{display:grid;place-items:center;width:34px;height:34px;
border-radius:50%;background:#3a285f;color:#dec6ff;font-weight:bold}
.hero{position:relative;overflow:hidden;padding:43px 36px;
margin:28px 0 36px;border-radius:20px;
border:1px solid #34294e;
background:linear-gradient(110deg,#18142d,#231636 60%,#101325)}
.hero-glow{position:absolute;right:5%;top:-120px;
width:310px;height:310px;border-radius:50%;
background:#7541ba;filter:blur(100px);opacity:.35;pointer-events:none}
.hero h1{font-size:clamp(27px,3vw,45px);margin:10px 0 6px;
letter-spacing:-1.5px}
.hero p{margin-bottom:0}
.eyebrow{font-size:10px;letter-spacing:2px;
color:#b493ff;font-weight:850}
.section-heading{display:flex;justify-content:space-between;
align-items:center;margin-bottom:20px;gap:12px}
.section-heading h2{font-size:25px;margin:5px 0 0}
.outline-tag,.subtle-tag{border:1px solid #3b3450;
background:#221b32;color:#bda5ee;padding:8px 12px;
font-size:11px;border-radius:25px}
.studio-grid{display:grid;grid-template-columns:minmax(340px,440px)
minmax(0,1fr);gap:22px;align-items:start}
.panel{border:1px solid var(--border);border-radius:18px;
padding:24px;background:var(--panel);min-width:0}
.panel-heading{display:flex;justify-content:space-between;
align-items:center;gap:10px;margin-bottom:23px}
.panel-heading h3{font-size:16px;margin:0}
.mode-tabs{display:flex;padding:5px;background:#0c101a;
border:1px solid #252b3b;border-radius:13px;gap:5px}
.mode{flex:1;border:0;background:transparent;color:#9b9eae;
border-radius:9px;padding:12px 6px;font-size:12px}
.mode span{font-size:17px;vertical-align:middle}
.mode.active{background:#2d2447;color:#dbcaff}
label{display:block;color:#a1a8b9;font-size:10px;
font-weight:800;letter-spacing:1.35px;margin:23px 0 10px}
.label-line{display:flex;align-items:end;justify-content:space-between}
.label-line span{color:#707b92;font-size:11px}
textarea,input,select{width:100%;border:1px solid #33394d;
border-radius:11px;background:#0b101c;color:#eef0fa;padding:13px}
textarea{resize:vertical;min-height:150px;line-height:1.6}
textarea:focus,select:focus{border-color:#8463d2}
.prompt-actions{display:flex;justify-content:space-between;
align-items:center;margin-top:12px}
.small-button{background:#2a2147;color:#d9c3ff;border:1px solid #513b7d;
border-radius:9px;padding:10px 13px;font-size:12px}
.text-action{background:none;border:0;color:#a999d0;
padding:8px;font-size:12px}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chips button{background:#1b2030;border:1px solid #34394c;
border-radius:8px;color:#b7bacc;padding:9px 12px;font-size:11px}
.chips button.selected{background:#32264e;color:#ddceff;
border-color:#8862d2}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.model-info{display:flex;align-items:center;gap:12px;
padding:14px;background:#191c2b;border:1px solid #2e3348;
border-radius:12px;margin:25px 0}
.model-icon{display:grid;place-items:center;font-size:23px;
width:40px;height:40px;background:#34244e;border-radius:11px}
.model-info strong{display:block;font-size:13px}
.model-info small{display:block;font-size:11px;color:#8290a7;
margin-top:3px}
.model-ready{margin-left:auto;color:#7dd9a6;font-size:10px}
.primary{border:0;border-radius:11px;background:
linear-gradient(100deg,#6945e9,#ab5cde);color:white;
font-weight:800;padding:15px;box-shadow:0 10px 30px #5922a92d}
.generate-btn{width:100%;display:flex;justify-content:center;gap:15px}
.cost-note{text-align:center;font-size:11px;margin:12px 0 0}
.message{font-size:12px;color:#c7b1ff;overflow-wrap:anywhere}
.preview-panel{min-height:485px}
.video-stage{width:100%;aspect-ratio:16/9;overflow:hidden;
border:1px solid #36314e;border-radius:15px;
display:grid;place-items:center;text-align:center;
background:radial-gradient(ellipse at center,#271c46,#0a0d18 72%)}
.video-stage video{width:100%;height:100%;object-fit:contain}
.stage-empty{padding:25px}
.stage-orb{font-size:90px;color:#af89ff;text-shadow:0 0 45px #6540ba}
.stage-empty h3{margin:0;font-size:19px}
.stage-icons{color:#6e5c9e;letter-spacing:12px;margin-top:20px}
.preview-footer{padding:18px 0;color:#a5aec1}
.preview-description{overflow-wrap:anywhere;font-size:12px}
.preview-tip{border-radius:12px;background:#1b1b31;
display:flex;gap:12px;padding:15px;align-items:start}
.preview-tip span{color:#bc92ff;font-size:20px}
.preview-tip p{font-size:12px;margin:0}
.library-section{margin-top:44px}
.secondary{background:#211d32;color:#d4c4fa;
border:1px solid #473760;padding:11px 15px;border-radius:10px}
.count{font-size:13px;background:#32264e;padding:4px 9px;
border-radius:15px;color:#cab4fa;vertical-align:middle}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,
minmax(240px,1fr));gap:17px}
.gallery-card{background:#131725;border:1px solid #2a3041;
border-radius:15px;overflow:hidden;min-width:0}
.card-video{width:100%;aspect-ratio:16/9;
background:#1c2030;object-fit:cover;display:block}
.card-placeholder{aspect-ratio:16/9;background:
radial-gradient(circle,#322447,#121522);display:grid;
place-items:center;text-align:center;color:#c2a9f1;
padding:16px;font-size:13px}
.card-body{padding:15px}
.card-title{font-size:13px;font-weight:600;
overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;
-webkit-box-orient:vertical;min-height:38px}
.card-meta{font-size:11px;color:#8791a6;margin:10px 0}
.card-status{display:inline-block;font-size:11px;
color:#d5c5ff;margin-bottom:10px}
.card-status.succeeded{color:#79dfa9}
.card-status.failed{color:#f0a2a2}
.card-error{font-size:11px;color:#efaaa9;
overflow-wrap:anywhere;margin:7px 0 10px}
.card-actions{display:flex;gap:8px;flex-wrap:wrap}
.card-actions button,.card-actions a{flex:1;text-align:center;
border-radius:8px;padding:9px 10px;background:#2a2142;
border:1px solid #493565;color:#ddd0ff;
text-decoration:none;font-size:11px}
.empty-gallery{color:#7f8aa0;padding:36px;
border:1px dashed #36394a;border-radius:14px}
.dropzone{border:1px dashed #7158a2;background:#15152a;
border-radius:12px;text-align:center;cursor:pointer;
padding:20px;margin-bottom:6px;overflow:hidden}
.dropzone.dragging{background:#2d2250;border-color:#b69bff}
.upload-icon{font-size:34px;color:#ba9bff}
.dropzone p{margin:4px 0}
.dropzone small{color:#7f8ba0}
.dropzone img{display:block;width:100%;max-height:260px;
object-fit:contain}
footer{text-align:center;padding:35px 0;color:#606b80;font-size:11px}
@media(max-width:1050px){
.sidebar{width:205px}
.content{padding:0 20px}
.studio-grid{grid-template-columns:1fr}
}
@media(max-width:650px){
#studio{display:block}
.sidebar{position:static;width:100%;height:auto;
padding:16px;display:block}
.sidebar .logo{margin:0 0 12px}
.sidebar-label,.sidebar-bottom{display:none}
.nav{display:inline-block;width:auto;margin:0 5px 0 0}
.content{padding:0 14px}
.topbar{min-height:55px}
.status-pill{display:none}
.hero{padding:26px 18px;margin:15px 0 24px}
.panel{padding:17px}
.outline-tag{display:none}
.section-heading h2{font-size:20px}
.field-grid{grid-template-columns:1fr}
.login-card{padding:25px}
}