:root{--bg:#08080d;--bg2:#0e0e16;--panel:#12121b;--panel2:#181824;--bd:rgba(255,255,255,.08);--bd2:rgba(255,255,255,.14);--tx:#f2f2f7;--mu:#9a9ab0;--mu2:#6d6d84;
--v:#7c5cff;--p:#ff4d8d;--a:#ffb547;--ok:#22c55e;--err:#ef4444;--warn:#f59e0b;--grad:linear-gradient(100deg,#8b6dff 0%,#ff4d8d 55%,#ffb547 100%);--r:14px;--sb:248px}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:14.5px/1.55 Inter,'Hind Siliguri',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#c4b5fd;text-decoration:none}a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-family:Sora,Inter,'Anek Bangla',sans-serif;letter-spacing:-.02em}
h1{font-size:26px}h2{font-size:20px}h3{font-size:16px}
.muted{color:var(--mu)}.small{font-size:12.5px}.tiny{font-size:11.5px}.c{text-align:center}.right{text-align:right}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.boot{height:100vh;display:grid;place-items:center}
.spin{width:28px;height:28px;border:3px solid rgba(255,255,255,.12);border-top-color:var(--p);border-radius:50%;animation:sp .8s linear infinite}.spin.sm{width:16px;height:16px;border-width:2px}
@keyframes sp{to{transform:rotate(360deg)}}
/* ---------- layout ---------- */
.shell{display:grid;grid-template-columns:var(--sb) 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;background:var(--bg2);border-right:1px solid var(--bd);display:flex;flex-direction:column;padding:16px 12px;overflow:auto}
.logo{display:flex;align-items:center;gap:10px;padding:6px 10px 18px;font:700 18px Sora;color:var(--tx)!important;text-decoration:none!important}.logo svg{width:30px;height:30px}
.side .newbtn{margin:0 4px 16px}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;color:var(--mu);text-decoration:none!important;font-weight:500;margin-bottom:2px}
.nav a:hover{background:rgba(255,255,255,.04);color:var(--tx)}.nav a.on{background:rgba(124,92,255,.14);color:#fff}
.nav a svg{width:19px;height:19px;flex:none;opacity:.9}
.nav .sec{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--mu2);padding:16px 12px 6px}
.side .foot{margin-top:auto;padding:12px 6px 0;border-top:1px solid var(--bd)}
.ws{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;cursor:pointer}.ws:hover{background:rgba(255,255,255,.04)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-weight:700;color:#fff;flex:none}
.main{min-width:0;display:flex;flex-direction:column}
.top{height:60px;display:flex;align-items:center;gap:14px;padding:0 26px;border-bottom:1px solid var(--bd);position:sticky;top:0;background:rgba(8,8,13,.85);backdrop-filter:blur(12px);z-index:20}
.top .title{flex:1;min-width:0;font:600 16px Sora;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.burger{display:none;background:none;border:0;padding:6px;cursor:pointer}
.page{padding:26px;max-width:1240px;width:100%;margin:0 auto}
.page.wide{max-width:none}
/* ---------- ui ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;border-radius:11px;border:1px solid transparent;background:var(--grad);color:#fff;font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:none!important;transition:filter .15s,transform .1s}
.btn:hover{filter:brightness(1.08)}.btn:active{transform:translateY(1px)}
.btn.ghost{background:rgba(255,255,255,.04);border-color:var(--bd2);color:var(--tx)}.btn.ghost:hover{background:rgba(255,255,255,.08)}
.btn.plain{background:none;color:var(--mu);border:0;padding:0 8px}.btn.plain:hover{color:var(--tx)}
.btn.danger{background:rgba(239,68,68,.12);color:#fca5a5;border-color:rgba(239,68,68,.3)}
.btn.sm{height:30px;padding:0 11px;font-size:13px;border-radius:9px}.btn.lg{height:48px;padding:0 24px;font-size:16px;border-radius:13px}
.btn.block{width:100%}.btn[disabled]{opacity:.5;pointer-events:none}
.btn svg{width:17px;height:17px}
.iconbtn{width:32px;height:32px;border-radius:9px;border:1px solid var(--bd);background:rgba(255,255,255,.03);display:inline-grid;place-items:center;cursor:pointer;color:var(--mu)}.iconbtn:hover{color:#fff;border-color:var(--bd2)}.iconbtn svg{width:16px;height:16px}
.panelc{background:var(--panel);border:1px solid var(--bd);border-radius:18px;padding:20px}
.panelc.hover:hover{border-color:var(--bd2)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.row.between{justify-content:space-between}.row.nowrap{flex-wrap:nowrap}
.col{display:flex;flex-direction:column;gap:12px}
.grid{display:grid;gap:16px}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.sp{flex:1}
label.f{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--mu);font-weight:500}
.in,select.in,textarea.in{width:100%;background:#0b0b12;border:1px solid var(--bd2);border-radius:11px;padding:10px 12px;color:var(--tx);outline:none;transition:border-color .15s}
.in:focus{border-color:var(--v);box-shadow:0 0 0 3px rgba(124,92,255,.18)}
textarea.in{resize:vertical;min-height:80px;line-height:1.55}
select.in{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#888 50%),linear-gradient(135deg,#888 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px}
input[type=range]{accent-color:var(--p);width:100%}input[type=checkbox]{accent-color:var(--p);width:16px;height:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.tchip{padding:7px 13px;border-radius:99px;border:1px solid var(--bd2);background:rgba(255,255,255,.03);cursor:pointer;font-size:13.5px;color:var(--mu);user-select:none}
.tchip:hover{color:var(--tx)}.tchip.on{background:rgba(124,92,255,.18);border-color:rgba(124,92,255,.7);color:#fff}
.tag{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;font-size:11.5px;font-weight:600;background:rgba(255,255,255,.07);color:var(--mu)}
.tag.ok{background:rgba(34,197,94,.14);color:#86efac}.tag.err{background:rgba(239,68,68,.14);color:#fca5a5}.tag.warn{background:rgba(245,158,11,.14);color:#fcd34d}.tag.v{background:rgba(124,92,255,.18);color:#c4b5fd}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--bd);margin-bottom:18px;overflow-x:auto}
.tabs button{background:none;border:0;padding:10px 14px;color:var(--mu);cursor:pointer;border-bottom:2px solid transparent;font-weight:600;white-space:nowrap}
.tabs button.on{color:#fff;border-bottom-color:var(--p)}
.seg{display:inline-flex;padding:3px;border-radius:11px;background:rgba(255,255,255,.04);border:1px solid var(--bd)}
.seg button{border:0;background:none;color:var(--mu);padding:6px 12px;border-radius:8px;cursor:pointer;font-weight:600;font-size:13px}.seg button.on{background:rgba(255,255,255,.1);color:#fff}
.note{padding:11px 14px;border-radius:12px;background:rgba(124,92,255,.1);border:1px solid rgba(124,92,255,.25);font-size:13.5px}
.note.warn{background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.3)}.note.err{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3)}.note.ok{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.3)}
.empty{padding:50px 20px;text-align:center;color:var(--mu)}.empty .big{font-size:40px;margin-bottom:10px}
.prog{height:8px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}.prog i{display:block;height:100%;background:var(--grad);transition:width .4s}
table.t{width:100%;border-collapse:collapse}table.t th,table.t td{text-align:left;padding:10px 10px;border-bottom:1px solid var(--bd);font-size:13.5px;vertical-align:middle}table.t th{color:var(--mu);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.kbd{font:12px 'JetBrains Mono',monospace;padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.08)}
/* modal & toast */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:100;display:grid;place-items:center;padding:20px;animation:fi .15s}
.modal{width:min(560px,100%);max-height:90vh;overflow:auto;background:var(--panel);border:1px solid var(--bd2);border-radius:20px;padding:22px;box-shadow:0 40px 100px rgba(0,0,0,.6)}
.modal.wide{width:min(980px,100%)}
.modal .mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
@keyframes fi{from{opacity:0}}
.toasts{position:fixed;right:18px;bottom:18px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{padding:12px 16px;border-radius:12px;background:var(--panel2);border:1px solid var(--bd2);box-shadow:0 20px 50px rgba(0,0,0,.5);max-width:380px;animation:fi .2s}
.toast.err{border-color:rgba(239,68,68,.5)}.toast.ok{border-color:rgba(34,197,94,.5)}
/* auth */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.auth .art{position:relative;overflow:hidden;background:radial-gradient(60% 60% at 30% 30%,rgba(124,92,255,.35),transparent 70%),radial-gradient(50% 50% at 80% 70%,rgba(255,77,141,.28),transparent 70%),var(--bg2);display:flex;flex-direction:column;justify-content:flex-end;padding:50px}
.auth .art h2{font-size:34px;line-height:1.15;margin-bottom:12px}
.auth .form{display:grid;place-items:center;padding:40px 22px}
.auth .box{width:min(400px,100%)}
.auth .box h1{margin-bottom:6px}
/* dashboard */
.hero{position:relative;overflow:hidden;border-radius:22px;padding:30px;background:radial-gradient(70% 120% at 0% 0%,rgba(124,92,255,.32),transparent 60%),radial-gradient(60% 120% at 100% 100%,rgba(255,77,141,.22),transparent 60%),var(--panel);border:1px solid var(--bd)}
.hero h1{font-size:28px;margin-bottom:6px}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
.qc{padding:14px;border-radius:14px;background:rgba(0,0,0,.25);border:1px solid var(--bd);cursor:pointer;text-align:left;color:var(--tx)}.qc:hover{border-color:var(--bd2)}.qc b{display:block;margin-bottom:2px}.qc span{color:var(--mu);font-size:12.5px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.vcard{border-radius:16px;overflow:hidden;background:var(--panel);border:1px solid var(--bd);cursor:pointer;transition:border-color .15s,transform .15s;display:flex;flex-direction:column}
.vcard:hover{border-color:var(--bd2);transform:translateY(-2px)}
.vthumb{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg,#1b1530,#2a1424);display:grid;place-items:center;overflow:hidden}
.vthumb img,.vthumb video{width:100%;height:100%;object-fit:cover}.vthumb .ph{font:800 22px Sora;color:rgba(255,255,255,.18)}
.vthumb .badge{position:absolute;left:10px;top:10px}
.vmeta{padding:12px 14px}.vmeta b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
/* wizard */
.wsteps{display:flex;gap:6px;margin-bottom:22px;flex-wrap:wrap}
.wsteps .wst{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:99px;background:rgba(255,255,255,.03);border:1px solid var(--bd);color:var(--mu);font-size:13px;font-weight:600}
.wsteps .wst b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);font-size:12px}
.wsteps .wst.on{color:#fff;border-color:rgba(124,92,255,.6);background:rgba(124,92,255,.12)}.wsteps .wst.on b{background:var(--grad)}
.wsteps .wst.done{color:#cfcfe0}.wsteps .wst.done b{background:rgba(34,197,94,.3)}
.fmt{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.fmtc{padding:14px;border-radius:14px;border:1px solid var(--bd2);background:rgba(255,255,255,.02);cursor:pointer;display:flex;gap:12px;align-items:center}
.fmtc.on{border-color:var(--v);background:rgba(124,92,255,.12)}.fmtc i{flex:none;border:2px solid currentColor;border-radius:4px;opacity:.8}
.idea{border-radius:18px;border:1px solid var(--bd);background:var(--panel);padding:18px;display:flex;flex-direction:column;gap:10px}
.idea:hover{border-color:var(--bd2)}
.idea h3{font-size:17px}.idea .hook{font-size:15px;color:#e9e3ff;padding:10px 12px;border-left:3px solid var(--p);background:rgba(255,77,141,.06);border-radius:0 10px 10px 0}
.sctab{width:100%;border-collapse:collapse;font-size:13.5px}.sctab td{padding:8px 8px;border-top:1px solid var(--bd);vertical-align:top}.sctab td:first-child{width:28px;color:var(--mu2);font-weight:700}.sctab td.v{color:var(--mu)}
.sceneed{display:grid;grid-template-columns:28px 1fr 1.4fr auto;gap:10px;align-items:start;padding:12px;border:1px solid var(--bd);border-radius:14px;background:var(--panel);margin-bottom:10px}
.sceneed .n{width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.06);display:grid;place-items:center;font-weight:700;font-size:12px;color:var(--mu)}
.sceneed.ch{background:rgba(124,92,255,.07);border-color:rgba(124,92,255,.25)}
.sceneed textarea.in{min-height:64px;font-size:14px}
.tools{display:flex;flex-direction:column;gap:4px}
/* pickers */
.pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.pick{border-radius:14px;border:1.5px solid var(--bd);background:var(--panel2);cursor:pointer;overflow:hidden;transition:border-color .15s}
.pick:hover{border-color:var(--bd2)}.pick.on{border-color:var(--p);box-shadow:0 0 0 3px rgba(255,77,141,.18)}
.swatch{height:84px;position:relative;padding:12px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.swatch b{font:700 15px Sora;position:relative}.swatch i{position:absolute;width:90px;height:90px;border-radius:50%;filter:blur(18px);opacity:.75}
.pick .pl{padding:8px 10px;font-size:12.5px;display:flex;justify-content:space-between;gap:6px;align-items:center}
.voice{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid var(--bd);background:var(--panel2);cursor:pointer}
.voice.on{border-color:var(--p);background:rgba(255,77,141,.07)}.voice .vi{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);font-size:18px;flex:none}
.voice .vn{flex:1;min-width:0}.voice .vn b{display:block}
.music{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1px solid var(--bd);background:var(--panel2);cursor:pointer}
.music.on{border-color:var(--p)}
.iconcell{aspect-ratio:1;border-radius:12px;border:1px solid var(--bd);background:var(--panel2);display:grid;place-items:center;cursor:pointer;padding:12px;color:#ddd}
.iconcell:hover{border-color:var(--p);color:#fff}.iconcell svg,.iconcell img{width:30px;height:30px}
.icongrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.hookc{padding:14px;border-radius:14px;border:1px solid var(--bd);background:var(--panel);display:flex;gap:12px;align-items:flex-start}
.hookc p{margin:0;flex:1;font-size:15px}
/* editor */
.ed{display:grid;grid-template-columns:300px 1fr 360px;height:calc(100vh - 60px)}
.ed>div{min-height:0}
.edl,.edr{overflow:auto;border-right:1px solid var(--bd);background:var(--bg2)}
.edr{border-right:0;border-left:1px solid var(--bd)}
.edc{display:flex;flex-direction:column;min-width:0;background:#050508}
.stagebox{flex:1;min-height:0;display:grid;place-items:center;padding:18px;position:relative}
.stagewrap{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6);background:#000}
.stagewrap .vg-stage{position:absolute;left:0;top:0;transform-origin:0 0}
.transport{display:flex;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid var(--bd);background:var(--bg2)}
.playbtn{width:42px;height:42px;border-radius:50%;border:0;background:var(--grad);display:grid;place-items:center;cursor:pointer;color:#fff;flex:none}.playbtn svg{width:18px;height:18px}
.scrub{flex:1;position:relative;height:36px;cursor:pointer}
.scrub .track{position:absolute;left:0;right:0;top:50%;height:6px;margin-top:-3px;border-radius:99px;background:rgba(255,255,255,.08)}
.scrub .seg{position:absolute;top:50%;height:16px;margin-top:-8px;border-radius:4px;background:rgba(124,92,255,.22);border:1px solid rgba(124,92,255,.35);padding:0}
.scrub .seg.on{background:rgba(255,77,141,.35);border-color:var(--p)}
.scrub .head{position:absolute;top:2px;bottom:2px;width:2px;background:#fff;border-radius:2px;pointer-events:none}
.time{font:600 12.5px 'JetBrains Mono',monospace;color:var(--mu);min-width:90px;text-align:right}
.slist{padding:10px}
.sitem{display:flex;gap:10px;padding:10px;border-radius:12px;border:1px solid transparent;cursor:pointer;margin-bottom:4px}
.sitem:hover{background:rgba(255,255,255,.03)}.sitem.on{background:rgba(124,92,255,.12);border-color:rgba(124,92,255,.4)}
.sitem .num{width:24px;height:24px;border-radius:7px;background:rgba(255,255,255,.07);display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--mu);flex:none}
.sitem .st{min-width:0;flex:1}.sitem .st b{font-size:12.5px;display:block;color:#c4b5fd;font-weight:600}
.sitem .st p{margin:2px 0 0;font-size:12.5px;color:var(--mu);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sitem .dur{font:11px 'JetBrains Mono';color:var(--mu2)}
.panel{padding:16px;border-bottom:1px solid var(--bd)}
.panel h4{font:700 12px Inter;text-transform:uppercase;letter-spacing:.08em;color:var(--mu);margin-bottom:12px}
.plist{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--bd);border-radius:12px;background:rgba(0,0,0,.2)}
.plist .pi{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:10px;background:var(--panel2);border:1px solid var(--bd)}
.iconfield{display:flex;gap:8px;align-items:center}.iconfield .prev{width:38px;height:38px;border-radius:10px;border:1px solid var(--bd2);display:grid;place-items:center;flex:none;cursor:pointer;background:#0b0b12}.iconfield .prev svg,.iconfield .prev img{width:22px;height:22px}
.compcat{font:700 11px Inter;text-transform:uppercase;letter-spacing:.08em;color:var(--mu2);margin:14px 0 8px}
.compgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.compc{padding:10px 12px;border-radius:12px;border:1px solid var(--bd);background:var(--panel2);cursor:pointer;font-size:13px}.compc:hover{border-color:var(--p)}.compc b{display:block}.compc span{color:var(--mu);font-size:11.5px}
.rendering{display:flex;flex-direction:column;align-items:center;gap:14px;padding:20px 0}
.rendering video{width:100%;max-height:60vh;border-radius:14px;background:#000}
.mobile-only{display:none}
@media (max-width:1180px){.ed{grid-template-columns:240px 1fr 320px}}
@media (max-width:980px){
  .shell{grid-template-columns:1fr}.side{position:fixed;left:0;top:0;bottom:0;width:var(--sb);z-index:90;transform:translateX(-100%);transition:transform .2s}
  body.menu .side{transform:none;box-shadow:0 0 0 100vmax rgba(0,0,0,.5)}.burger{display:block}.mobile-only{display:initial}
  .ed{grid-template-columns:1fr;height:auto}.edl{max-height:260px}.edc{min-height:55vh}
  .g3,.g4,.quick{grid-template-columns:1fr 1fr}.auth{grid-template-columns:1fr}.auth .art{display:none}
  .sceneed{grid-template-columns:28px 1fr}.sceneed .tools{flex-direction:row;grid-column:2}
  .sceneed>textarea:nth-of-type(2),.sceneed>.vbox{grid-column:2}
}
@media (max-width:620px){.page{padding:16px}.g2,.g3,.g4,.quick,.fmt{grid-template-columns:1fr}.top{padding:0 14px}.hero{padding:20px}}