/* W Studio (wht-ai.com/studio/) - its own sheet; WAI navy + orange */
:root{
  --bg:#070C1A; --bg2:#0B1328; --card:#101B36; --card2:#15234A; --line:rgba(150,175,230,.14); --line2:rgba(150,175,230,.26);
  --tx:#E9EEF9; --mut:#8F9CBC; --acc:#FF7A29; --acc2:#FFA366; --ok:#3DD68C; --bad:#FF5C6C; --sel:#4C8DFF;
  --r:14px; --font:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--tx);font:14px/1.45 var(--font);-webkit-font-smoothing:antialiased}
body{min-height:100vh;background:radial-gradient(1200px 600px at 80% -10%,rgba(255,122,41,.10),transparent 60%),radial-gradient(900px 600px at -10% 10%,rgba(76,141,255,.10),transparent 60%),var(--bg)}
button,input,select,textarea{font:inherit;color:inherit}
.hidden{display:none!important}
.muted{color:var(--mut)}

/* top bar */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;padding:10px 18px;background:rgba(7,12,26,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;color:var(--tx);text-decoration:none;font-size:18px;letter-spacing:.2px}
.brand b{color:var(--acc)}
.tabs{display:flex;gap:4px;background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:4px}
.tab{border:0;background:transparent;padding:7px 14px;border-radius:999px;cursor:pointer;color:var(--mut);display:flex;gap:6px;align-items:center;font-weight:600}
.tab.on{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#1a0d03}
.top-r{margin-left:auto;display:flex;gap:10px;align-items:center}
.lang{border:1px solid var(--line2);background:transparent;border-radius:8px;padding:5px 9px;cursor:pointer;font-weight:700;font-size:12px}
.acct{color:var(--tx);text-decoration:none;border:1px solid var(--line2);border-radius:999px;padding:6px 13px;font-weight:600;white-space:nowrap}
.acct.in{border-color:rgba(61,214,140,.4)}
.acct small{color:var(--mut);font-weight:500;margin-left:6px}

.banner{margin:12px 18px 0;padding:10px 14px;border-radius:12px;background:rgba(255,122,41,.12);border:1px solid rgba(255,122,41,.35);display:flex;gap:10px;align-items:center}
.banner a{color:var(--acc2);font-weight:700}
.banner button{margin-left:auto;background:none;border:0;cursor:pointer;color:var(--mut);font-size:15px}

.pane{display:none;padding:16px 18px 40px}
.pane.on{display:block}

/* buttons / inputs */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line2);background:var(--card2);padding:8px 13px;border-radius:10px;cursor:pointer;font-weight:600;text-decoration:none;color:var(--tx);transition:transform .08s,border-color .15s,background .15s;white-space:nowrap}
.btn:hover{border-color:rgba(255,163,102,.6)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.pri{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#1a0d03;border:0}
.btn.ghost{background:transparent}
.btn.sm{padding:5px 10px;font-size:12.5px;border-radius:8px}
.btn.wide{width:100%;margin-top:8px}
.ic{width:38px;height:38px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--acc),var(--acc2));color:#1a0d03;font-size:15px;cursor:pointer;flex:none}
.ic.sm{width:32px;height:32px;background:var(--card2);color:var(--tx);border:1px solid var(--line2)}
input[type=text],textarea,select{width:100%;background:var(--bg2);border:1px solid var(--line2);border-radius:10px;padding:9px 11px;outline:none}
textarea{resize:vertical}
input[type=text]:focus,textarea:focus,select:focus{border-color:rgba(255,163,102,.7)}
select{padding:7px 9px;width:auto;max-width:100%}
input[type=range]{accent-color:var(--acc);width:100%}
.sw{appearance:none;width:38px;height:22px;border-radius:999px;background:#2a3658;position:relative;cursor:pointer;flex:none;transition:background .15s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.sw:checked{background:var(--acc)}
.sw:checked::after{left:19px}
.seg{display:flex;flex-wrap:wrap;gap:4px}
.seg button{border:1px solid var(--line2);background:transparent;border-radius:8px;padding:5px 9px;cursor:pointer;font-weight:600;font-size:12.5px}
.seg button.on{background:rgba(255,122,41,.18);border-color:var(--acc);color:var(--acc2)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{border:1px solid var(--line2);background:rgba(255,255,255,.03);border-radius:999px;padding:5px 11px;cursor:pointer;font-size:12.5px;color:var(--mut)}
.chip:hover{color:var(--tx);border-color:rgba(255,163,102,.6)}
.note{color:var(--mut);font-size:12.5px;margin:8px 0 0;min-height:0}
.note.bad{color:var(--bad)}
.note.ok{color:var(--ok)}

/* editor layout */
.ed{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start}
.ed-main{min-width:0}
.stage{position:relative;background:#02040a;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;max-height:62vh}
.stage canvas{display:block;max-width:100%;max-height:100%;width:auto;height:100%;margin:auto;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.drop{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:20px;cursor:pointer;background:radial-gradient(600px 300px at 50% 40%,rgba(255,122,41,.10),transparent 70%),#050913;border:2px dashed transparent;border-radius:var(--r)}
.drop.over{border-color:var(--acc)}
.drop b{font-size:19px}
.drop-ico{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--acc),var(--acc2));color:#1a0d03;font-size:24px;font-weight:800;margin-bottom:6px}
.drop span{color:var(--mut)}
.drop .drop-priv{margin-top:10px;font-size:12.5px;color:#9fd9bd}
.stage.has .drop{display:none}
.stage.dragging .drop{display:flex;background:rgba(5,9,19,.85)}
.busy{position:absolute;inset:auto 14px 14px 14px;background:rgba(7,12,26,.9);border:1px solid var(--line2);border-radius:12px;padding:10px 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.busy .bar{flex-basis:100%;height:4px;background:#1c2748;border-radius:4px;overflow:hidden}
.busy .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .2s}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.2);border-top-color:var(--acc);animation:sp 0.8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

.transport{display:flex;align-items:center;gap:10px;margin:10px 0}
.transport input[type=range]{flex:1}
.time{font-variant-numeric:tabular-nums;color:var(--mut);min-width:42px;text-align:center;font-size:12.5px}

.cmd{background:linear-gradient(180deg,var(--card),var(--bg2));border:1px solid var(--line2);border-radius:var(--r);padding:12px}
.cmd-row{display:flex;gap:10px;align-items:stretch}
.cmd-row textarea{flex:1;border-radius:10px;min-height:48px}
.cmd-row .btn{padding:0 20px}
.cmd-say{margin-top:10px;padding:9px 12px;border-radius:10px;background:rgba(61,214,140,.08);border:1px solid rgba(61,214,140,.25);font-size:13px}
.cmd-say.bad{background:rgba(255,92,108,.08);border-color:rgba(255,92,108,.3)}

.tl-wrap{margin-top:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.tl-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.tl-head .btn{margin-left:auto}
.tl{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;min-height:20px}
.clip{flex:none;width:150px;border-radius:10px;border:1px solid var(--line2);background:var(--bg2);overflow:hidden;cursor:pointer;position:relative;user-select:none}
.clip.on{border-color:var(--acc);box-shadow:0 0 0 2px rgba(255,122,41,.25)}
.clip.drag{opacity:.4}
.clip .th{height:72px;background:#000 center/cover no-repeat;position:relative}
.clip .th .k{position:absolute;left:6px;top:6px;font-size:10.5px;background:rgba(0,0,0,.6);padding:1px 6px;border-radius:6px}
.clip .th .an{position:absolute;right:6px;top:6px;font-size:10.5px;background:rgba(0,0,0,.6);padding:1px 6px;border-radius:6px}
.clip .meta{padding:6px 8px;font-size:11.5px;display:flex;justify-content:space-between;gap:6px}
.clip .meta span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clip .x{position:absolute;right:4px;bottom:28px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(0,0,0,.65);color:#fff;cursor:pointer;font-size:11px}
.clip-props{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:10px;font-size:12.5px;color:var(--mut)}
.clip-props input[type=range]{width:110px}
.clip-props input[type=number]{width:64px;background:var(--bg2);border:1px solid var(--line2);border-radius:8px;padding:4px 6px}
.wave-wrap{margin-top:10px}
#wave{width:100%;height:84px;display:block;background:#060b18;border:1px solid var(--line);border-radius:10px;cursor:crosshair}
.wave-tools{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:8px}
.wave-tools .muted{margin-right:auto;font-size:12px}

/* side panels */
.ed-side{display:flex;flex-direction:column;gap:10px;position:sticky;top:70px;max-height:calc(100vh - 84px);overflow-y:auto;padding-right:2px}
.pnl{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:0 12px}
.pnl[open]{padding-bottom:12px}
.pnl summary{list-style:none;cursor:pointer;display:flex;gap:8px;align-items:center;padding:11px 0;font-size:14px}
.pnl summary::-webkit-details-marker{display:none}
.pnl summary::after{content:"▾";margin-left:auto;color:var(--mut);transition:transform .15s}
.pnl:not([open]) summary::after{transform:rotate(-90deg)}
.pnl.export{border-color:rgba(255,122,41,.35)}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0}
.row label{color:var(--mut);font-size:12.8px}
.row > input[type=range]{width:150px}
.btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pnl input[type=text]{margin-top:6px}
.tx-tools{display:flex;flex-direction:column;gap:6px;margin-top:10px;font-size:12px}
.tx{max-height:320px;overflow-y:auto;margin-top:8px;font-size:13.5px;line-height:1.75}
.tx:empty{display:none}
.tx h4{margin:10px 0 2px;font-size:11.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.6px}
.tx p{margin:0 0 6px}
.tx .w{cursor:pointer;border-radius:4px;padding:0 1px}
.tx .w:hover{background:rgba(255,255,255,.07)}
.tx .w.x{text-decoration:line-through;color:#6c7799;background:rgba(255,92,108,.08)}
.tx .w.s{background:rgba(76,141,255,.35)}
.tx .w.now{color:var(--acc2)}
.tx .w[contenteditable=true]{outline:1px solid var(--acc);background:var(--bg2)}
.tx .tr{display:block;color:#9fd9bd;font-size:12.5px;margin:-2px 0 6px}

/* image + clip */
.im{display:grid;grid-template-columns:400px minmax(0,1fr);gap:18px;align-items:start}
.im-form{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.im-form h2{margin:0 0 6px;font-size:19px}
.im-form textarea{margin-top:10px}
.up{display:block;margin-top:10px;padding:10px;border:1px dashed var(--line2);border-radius:10px;cursor:pointer;color:var(--mut);text-align:center}
.up:hover{border-color:var(--acc)}
.im-src{display:flex;gap:10px;align-items:center;margin-top:8px}
.im-src img{width:64px;height:64px;object-fit:cover;border-radius:8px}
.im-out{min-width:0}
.im-stage{background:#02040a;border:1px solid var(--line);border-radius:var(--r);min-height:420px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.im-stage.empty{color:var(--mut);background:repeating-linear-gradient(45deg,#050913 0 14px,#070c19 14px 28px)}
.im-stage img,.im-stage video{max-width:100%;max-height:70vh;display:block}
.im-refine{display:flex;gap:8px;margin-top:10px}
.hist{display:flex;gap:8px;margin-top:12px;overflow-x:auto}
.hist img{width:84px;height:84px;object-fit:cover;border-radius:8px;border:2px solid transparent;cursor:pointer;flex:none}
.hist img.on{border-color:var(--acc)}

.media-pool{position:fixed;left:0;bottom:0;width:2px;height:2px;overflow:hidden;opacity:.01;pointer-events:none}
.media-pool video{width:2px;height:2px}

@media (max-width:1060px){
  .ed{grid-template-columns:1fr}
  .ed-side{position:static;max-height:none}
  .im{grid-template-columns:1fr}
}
@media (max-width:640px){
  .top{flex-wrap:wrap;gap:8px;padding:8px 12px}
  .tabs{order:3;width:100%;justify-content:space-between}
  .tab{flex:1;justify-content:center;padding:7px 6px;font-size:12.5px}
  .pane{padding:12px}
  .cmd-row{flex-direction:column}
  .cmd-row .btn{padding:10px}
  .stage,.stage canvas{max-height:56vh}
}

/* inside WAI (iframe ?embed=1): WAI's own page has the header */
body.embed{background:var(--bg)}
body.embed .top .brand,body.embed .top .acct{display:none}
body.embed .top{border:0;background:transparent;backdrop-filter:none;padding:4px 2px}
body.embed .top{position:static;padding:8px 12px}
body.embed .ed-side{top:10px;max-height:none}
.note a,.cmd-say a{color:var(--acc2);font-weight:700}

/* Wai Studio look (default; matches WAI's Wai Studio page: white cards, navy actions, gold accents, Cormorant titles) - ?theme=dark keeps the old one */
body.light{--bg:#F3F5F8;--bg2:#FFFFFF;--card:#FFFFFF;--card2:#FAFAF9;--line:#E5E7EB;--line2:#E2DED3;--tx:#0F172A;--mut:#6B7280;--acc:#C5A059;--acc2:#D4AF37;--navy:#0F172A;--gold:#C5A059;--goldL:#FDFBF7;--goldB:#E6D8BC;--r:16px}
body.light{background:var(--bg)}
body.light .top{background:rgba(243,245,248,.9);border-bottom:1px solid var(--line)}
body.light .brand{color:var(--navy);font-family:'Cormorant Garamond',Georgia,serif;font-weight:700;font-size:24px;letter-spacing:-.01em}
body.light .tabs{background:transparent;border:0;padding:0;gap:8px}
body.light .tab{background:#fff;border:1px solid var(--line);color:#334155;padding:9px 18px;font-size:12.5px;font-weight:600}
body.light .tab.on{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 4px 12px rgba(15,23,42,.15)}
body.light .lang,body.light .acct{background:#fff;border-color:var(--line);color:#334155}
body.light .pnl,body.light .tl-wrap,body.light .im-form,body.light .cmd{background:#fff;border:1px solid rgba(229,231,235,.8);box-shadow:0 1px 2px rgba(0,0,0,.04);border-radius:16px}
body.light .pnl summary b,body.light .im-form h2,body.light .tl-head b{font-family:'Cormorant Garamond',Georgia,serif;font-weight:700;font-size:19px;color:var(--navy);letter-spacing:-.005em}
body.light .row label,body.light .tx h4{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:#6B7280}
body.light input[type=text],body.light textarea,body.light select{background:var(--card2);border-color:var(--line)}
body.light textarea{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12.5px}
body.light input[type=text]:focus,body.light textarea:focus,body.light select:focus{border-color:var(--navy);box-shadow:0 0 0 2px rgba(15,23,42,.12)}
body.light .btn{background:#fff;border-color:var(--line);color:#334155}
body.light .btn:hover{border-color:#cbd5e1}
body.light .btn.pri{background:var(--navy);color:#fff;border:0;box-shadow:0 8px 18px rgba(15,23,42,.12)}
body.light .btn.pri:hover{background:#1e293b}
body.light .ic{background:var(--navy);color:#fff}
body.light .ic.sm{background:#fff;color:#334155;border:1px solid var(--line)}
body.light .seg button{background:#fff;border-color:var(--line);color:#374151}
body.light .seg button.on{background:var(--navy);border-color:var(--navy);color:#fff}
body.light .chip{background:#fff;border-color:var(--line);color:#475569}
body.light .chip:hover{border-color:var(--gold);color:var(--navy)}
body.light .stage{background:var(--goldL);border:1px solid rgba(230,216,188,.6);padding:10px;border-radius:16px}
body.light .stage canvas{border-radius:10px;box-shadow:0 6px 18px rgba(15,23,42,.12);background:#0B1328}
body.light .drop{background:var(--goldL);color:var(--tx);border:2px dashed rgba(197,160,89,.6);border-radius:12px}
body.light .drop b{font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;color:var(--navy)}
body.light .drop span{color:#6B7280}
body.light .drop-ico{background:#FEF3C7;border:1px solid #FDE68A;color:#92400E;border-radius:12px}
body.light .drop .drop-priv{color:#047857}
body.light .busy{background:#fff;border-color:var(--line)}
body.light .im-stage{background:var(--goldL);border:1px solid rgba(230,216,188,.6);border-radius:16px}
body.light .im-stage.empty{color:#64748B;background:var(--goldL);font-family:'Cormorant Garamond',Georgia,serif;font-size:19px}
body.light .up{background:var(--goldL);border:2px dashed rgba(197,160,89,.6);color:#57534E}
body.light #wave{background:#0F172A}
body.light .sw{background:#d1d5db}
body.light .sw:checked{background:var(--navy)}
body.light .clip{background:#fff;border-color:var(--line)}
body.light .clip.on{border-color:var(--navy);box-shadow:0 0 0 2px rgba(15,23,42,.15)}
body.light .eng button{background:#fff;border-color:var(--line)}
body.light .eng button.on{border-color:var(--navy);box-shadow:0 0 0 2px rgba(15,23,42,.12)}
body.light .eng button i{color:#047857}
body.light .cmd-say{background:#ECFDF5;border-color:#A7F3D0;color:#065F46}
body.light .cmd-say.bad{background:#FEF2F2;border-color:#FECACA;color:#991B1B}
body.light .note.ok{color:#047857}
body.light .banner{background:var(--goldL);border-color:var(--goldB)}
body.light .tx .w.x{color:#9CA3AF;background:#FEF2F2}
body.light .tx .w.s{background:#DBEAFE}
body.light .tx .w.now{color:#B45309}
body.light .tx .tr{color:#047857}
body.light .pnl.export{border-color:var(--goldB)}
body.light .time{color:#64748B}
body.light input[type=range]{accent-color:var(--navy)}

/* W Studio engines */
.eng{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.eng button{text-align:left;border:1px solid var(--line2);background:var(--bg2);border-radius:12px;padding:9px 11px;cursor:pointer;color:var(--tx)}
.eng button b{display:block;font-size:13.5px}
.eng button span{display:block;font-size:11.5px;color:var(--mut);margin-top:2px}
.eng button i{font-style:normal;font-size:11px;font-weight:700;color:var(--ok)}
.eng button.on{border-color:var(--acc);box-shadow:0 0 0 2px rgba(255,122,41,.2)}
.refs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.refs:empty{display:none}
.refs div{position:relative}
.refs img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--line2)}
.refs small{position:absolute;left:4px;bottom:4px;background:rgba(0,0,0,.7);color:#fff;font-size:10px;padding:0 5px;border-radius:5px}
.refs button{position:absolute;right:-6px;top:-6px;width:20px;height:20px;border-radius:50%;border:0;background:#000;color:#fff;cursor:pointer;font-size:10px}
.hist-h{display:flex;gap:8px;align-items:baseline;margin-top:16px;font-size:13px}
.hist-h .muted{font-size:12px}

.sep{border:0;border-top:1px solid var(--line2);margin:18px 0 14px}

.mini{display:block;font-size:13px;margin:4px 0 2px}
body.light .mini{font-family:'Cormorant Garamond',Georgia,serif;font-size:17px;color:var(--navy)}
.pnl textarea{margin-top:6px}