/* ============================================================
WIZARD ADS Studio — cinematic glass SMM editor shell
Obsidian glass · neon indigo · floating depth · no-scroll
Fonts are loaded via + in the HTML
(faster than @import) — see WIZARD ADS Studio.html.
============================================================ */
:root{
/* surfaces — deep cinematic base */
--bg: #05060a;
--bg-grad-a: #0c0f18;
--bg-grad-b: #060709;
/* glass tints (semi-transparent over the lit gradient) */
--glass: rgba(16,18,27,.55);
--glass-2: rgba(22,25,37,.5);
--glass-3: rgba(28,31,46,.55);
--glass-head: rgba(11,13,20,.6);
--glass-rail: rgba(13,15,24,.62);
--blur: blur(22px) saturate(150%);
/* shared film-grain texture — referenced by .app::after and .mod-main::after */
--noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
--blur-lg: blur(34px) saturate(160%);
/* legacy solid fallbacks still referenced in places */
--panel: rgba(18,20,30,.55);
--panel-2: rgba(24,27,40,.5);
--elev: rgba(30,33,49,.82);
--hover: rgba(255,255,255,.05);
--hover-2: rgba(255,255,255,.085);
/* lines */
--line: rgba(255,255,255,.08);
--line-soft: rgba(255,255,255,.05);
--line-strong: rgba(255,255,255,.15);
/* ink — landing parity */
--ink: #eef1f7;
--ink-2: #a7afc2;
--ink-3: #6c7488;
--ink-4: #474e60;
/* accent — glacial cyan → aqua (the one accent, matches landing) */
--acc: #16c0d8;
--acc-2: #2ed3c6;
--acc-ink: #7fe6f1;
--acc-soft: rgba(22,192,216,.16);
--acc-line: rgba(22,192,216,.5);
--acc-glow: rgba(22,192,216,.55);
--on-acc: #04181d;
/* violet — secondary glow only (landing parity) */
--vio: #8b7dff;
--vio-glow: rgba(139,125,255,.42);
/* AI gradient — collapsed onto the one cyan→aqua accent */
--ai-a: #2f9fe0;
--ai-b: #16c0d8;
--ai-c: #2ed3c6;
--ai-grad: linear-gradient(118deg,#2f9fe0 0%,#16c0d8 50%,#2ed3c6 100%);
--ai-glow: rgba(22,192,216,.5);
/* status */
--good: #2fd39a;
--warn: #ffb454;
--bad: #ff6b7d;
/* radii */
--r-xs: 6px; --r-sm: 9px; --r-md: 13px; --r-lg: 18px; --r-xl: 24px;
/* depth */
--shadow-pop: 0 24px 70px -16px rgba(0,0,0,.82), 0 4px 14px rgba(0,0,0,.5);
--shadow-soft: 0 10px 34px -12px rgba(0,0,0,.7);
--shadow-float: 0 40px 90px -28px rgba(0,0,0,.88), 0 12px 30px -10px rgba(0,0,0,.6);
/* easing */
--spring: cubic-bezier(.34,1.56,.64,1);
--out: cubic-bezier(.22,.61,.36,1);
}
*{ box-sizing:border-box; }
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.08); border-radius:20px; border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.18); background-clip:content-box; }
html,body{ height:100%; margin:0; overflow:hidden; }
body{
font-family:'Manrope',system-ui,sans-serif;
background:var(--bg);
color:var(--ink);
-webkit-font-smoothing:antialiased;
font-size:var(--fs-body);
letter-spacing:-0.01em;
user-select:none;
}
#root{ height:100vh; width:100vw; }
.mono{ font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; letter-spacing:0; }
button{ font-family:inherit; color:inherit; border:none; background:none; cursor:pointer; }
input,textarea{ font-family:inherit; color:inherit; }
svg{ display:block; }
/* ============================================================ SHELL */
.app{
position:relative;
display:flex; height:100vh; width:100vw;
isolation:isolate;
background:
radial-gradient(1100px 720px at 16% -12%, rgba(22,192,216,.14), transparent 58%),
radial-gradient(900px 620px at 102% 8%, rgba(47,159,224,.10), transparent 55%),
radial-gradient(1100px 760px at 108% 116%, rgba(46,211,198,.10), transparent 56%),
radial-gradient(760px 520px at -8% 112%, rgba(47,159,224,.07), transparent 55%),
linear-gradient(155deg,var(--bg-grad-a),var(--bg-grad-b));
}
/* fine film grain for that expensive, textured feel */
.app::after{
content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
background-image:var(--noise);
}
.app > *{ position:relative; z-index:1; }
body.rz-dragging{ user-select:none; -webkit-user-select:none; }
body.rz-dragging *{ cursor:inherit !important; }
.resizer{ flex:0 0 7px; cursor:col-resize; position:relative; z-index:5; align-self:stretch; }
.resizer::after{ content:''; position:absolute; inset:0 3px; border-radius:4px; transition:background .18s var(--out); }
.resizer:hover::after,.resizer.drag::after{ background:var(--acc-line); box-shadow:0 0 14px var(--acc-glow); }
.resizer-h{ height:7px; cursor:row-resize; flex:0 0 7px; position:relative; }
.resizer-h::after{ content:''; position:absolute; inset:3px 0; border-radius:4px; transition:background .18s var(--out); }
.resizer-h:hover::after,.resizer-h.drag::after{ background:var(--acc-line); box-shadow:0 0 14px var(--acc-glow); }
.pane{
background:var(--glass); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
border:1px solid var(--line-soft); display:flex; flex-direction:column; min-height:0;
box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.app > .vault, .app > .right{ display:flex; flex:0 0 auto; min-height:0; }
.app > .vault > .pane, .app > .right > .pane{ flex:1; width:100%; min-height:0; }
.timeline-wrap > .timeline{ flex:1; width:100%; }
.pane-head{
display:flex; align-items:center; gap:10px; height:52px; padding:0 14px; flex:0 0 52px;
border-bottom:1px solid var(--line-soft);
background:linear-gradient(180deg,rgba(255,255,255,.025),transparent);
}
.pane-title{ font-size:var(--fs-base); font-weight:var(--fw-bold); letter-spacing:.02em; }
.pane-sub{ font-size:var(--fs-label); color:var(--ink-3); font-weight:var(--fw-med); }
/* ============================================================ SIDEBAR */
.sidebar{
flex:0 0 80px; width:80px; display:flex; flex-direction:column; align-items:center;
padding:14px 0 16px; gap:6px;
background:var(--glass-rail); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
border-right:1px solid var(--line); position:relative; z-index:30;
box-shadow:inset -1px 0 0 rgba(255,255,255,.03), 18px 0 50px -30px rgba(0,0,0,.8);
}
.brand-tile{
width:48px; height:48px; border-radius:14px; display:grid; place-items:center; position:relative;
background:var(--ai-grad); color:var(--on-acc); font-weight:var(--fw-black); font-size:var(--fs-xl); cursor:pointer;
box-shadow:0 8px 26px -6px var(--ai-glow), 0 0 22px -4px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.3);
transition:transform .26s var(--spring), box-shadow .26s var(--out);
}
.brand-tile:hover{ transform:translateY(-2px) scale(1.05); box-shadow:0 12px 32px -6px var(--ai-glow), 0 0 34px -2px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.35); }
.brand-tile:active{ transform:translateY(0) scale(.98); }
.brand-tile .chev{ position:absolute; bottom:-3px; right:-3px; width:17px; height:17px; border-radius:6px; background:var(--elev); backdrop-filter:blur(8px); border:1px solid var(--line-strong); display:grid; place-items:center; color:var(--ink-2); }
.brand-name-mini{ font-size:var(--fs-micro); color:var(--ink-3); font-weight:var(--fw-bold); margin-top:2px; letter-spacing:.02em; max-width:74px; text-align:center; line-height:1.1; }
.nav-rail{ display:flex; flex-direction:column; gap:7px; margin-top:14px; width:100%; align-items:center; flex:1; }
.nav-item{
width:58px; height:54px; border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
color:var(--ink-3); position:relative;
transition:color .2s var(--out), background .2s var(--out), transform .24s var(--spring);
}
.nav-item .lbl{ font-size:var(--fs-micro); font-weight:var(--fw-bold); letter-spacing:.01em; }
.nav-item:hover{ color:var(--ink); background:var(--hover); transform:translateY(-1px); }
.nav-item:active{ transform:translateY(0) scale(.96); }
.nav-item.on{ color:#fff; background:linear-gradient(180deg,rgba(22,192,216,.24),rgba(22,192,216,.1)); box-shadow:inset 0 0 0 1px var(--acc-line), 0 6px 20px -10px var(--acc-glow); }
.nav-item.on::before{ content:''; position:absolute; left:-12px; top:50%; transform:translateY(-50%); width:3.5px; height:22px; border-radius:4px; background:var(--acc); box-shadow:0 0 14px 1px var(--acc-glow); }
.nav-item.on svg{ filter:drop-shadow(0 0 8px var(--acc-glow)); }
.side-foot{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.lang-switch{ display:flex; flex-direction:column; padding:3px; border-radius:12px;
background:var(--glass); border:1px solid var(--line); gap:2px; width:42px; backdrop-filter:var(--blur); }
.lang-switch .lang-opt{ font-family:var(--font-mono,ui-monospace,monospace); font-size:11px; font-weight:700;
letter-spacing:.04em; color:var(--ink-3); padding:5px 0; border-radius:8px; border:0; cursor:pointer;
background:transparent; transition:color .16s var(--out), background .16s var(--out); line-height:1; }
.lang-switch .lang-opt:hover{ color:var(--ink); }
.lang-switch .lang-opt.on{ color:var(--on-acc); background:var(--ai-grad);
box-shadow:0 2px 9px -3px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.35); }
.icon-btn{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:var(--ink-3); transition:color .18s var(--out), background .18s var(--out), transform .2s var(--spring); }
.icon-btn:hover{ color:var(--ink); background:var(--hover); transform:translateY(-1px); }
.icon-btn:active{ transform:scale(.94); }
.avatar{ width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,#3a3f55,#222637); display:grid; place-items:center; font-weight:var(--fw-bold); font-size:var(--fs-body); color:var(--ink); border:1.5px solid var(--line-strong); cursor:pointer; transition:.24s var(--out); position:relative; }
.avatar:hover{ border-color:var(--acc-line); box-shadow:0 0 18px -4px var(--acc-glow); }
.avatar .dot{ position:absolute; bottom:0; right:0; width:11px; height:11px; border-radius:50%; background:var(--good); border:2.5px solid var(--bg); box-shadow:0 0 8px rgba(70,217,160,.7); }
/* brand popover */
.popover{ position:absolute; background:rgba(20,22,33,.97); border:1px solid var(--line-strong); border-radius:16px; box-shadow:var(--shadow-pop); padding:8px; z-index:200; backdrop-filter:var(--blur-lg); -webkit-backdrop-filter:var(--blur-lg); animation:pop .2s var(--spring); }
@keyframes pop{ from{ opacity:0; transform:translateY(8px) scale(.96);} to{ opacity:1; transform:none;} }
.pop-head{ font-size:var(--fs-eyebrow); font-weight:var(--fw-bold); color:var(--ink-3); text-transform:uppercase; letter-spacing:.08em; padding:6px 10px 8px; }
.brand-row{ display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:11px; cursor:pointer; transition:.16s var(--out); min-width:218px; }
.brand-row:hover{ background:var(--hover); }
.brand-row.on{ background:var(--acc-soft); box-shadow:inset 0 0 0 1px var(--acc-line); }
.brand-logo{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; font-weight:var(--fw-black); font-size:var(--fs-body); color:#fff; flex:0 0 34px; box-shadow:0 4px 14px -6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.25); }
.brand-meta{ flex:1; min-width:0; }
.brand-meta .n{ font-size:var(--fs-base); font-weight:var(--fw-bold); }
.brand-meta .s{ font-size:var(--fs-label); color:var(--ink-3); font-weight:var(--fw-reg); }
.pop-divider{ height:1px; background:var(--line); margin:6px 4px; }
.pop-action{ display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:11px; cursor:pointer; color:var(--ink-2); font-size:var(--fs-base); font-weight:var(--fw-med); width:100%; transition:.16s var(--out); }
.pop-action:hover{ background:var(--hover); color:var(--ink); }
/* ============================================================ VAULT */
.seg{ display:flex; gap:2px; background:var(--well); border:1px solid var(--line); border-radius:9px; padding:2px; }
.seg button{ width:30px; height:26px; border-radius:7px; display:grid; place-items:center; color:var(--ink-3); transition:.16s var(--out); }
.seg button.on{ background:var(--elev); color:var(--ink); box-shadow:0 1px 4px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06); }
.seg button:hover:not(.on){ color:var(--ink-2); }
.search{ flex:1; display:flex; align-items:center; gap:8px; height:34px; padding:0 11px; background:var(--well); border:1px solid var(--line); border-radius:10px; color:var(--ink-3); transition:.2s var(--out); }
.search:focus-within{ border-color:var(--acc-line); box-shadow:0 0 0 3px var(--acc-soft), 0 0 18px -6px var(--acc-glow); }
.search input{ flex:1; background:none; border:none; outline:none; font-size:var(--fs-base); font-weight:var(--fw-reg); color:var(--ink); min-width:0; }
.search input::placeholder{ color:var(--ink-4); }
.vault-body{ flex:1; overflow-y:auto; padding:12px; min-height:0; }
.folder-strip{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:13px; }
.folder-chip{ display:flex; align-items:center; gap:7px; height:30px; padding:0 11px; border-radius:9px; background:var(--panel-2); border:1px solid var(--line); font-size:var(--fs-sub); font-weight:var(--fw-med); color:var(--ink-2); cursor:pointer; transition:.18s var(--out); }
.folder-chip:hover{ background:var(--hover-2); color:var(--ink); border-color:var(--line-strong); transform:translateY(-1px); }
.folder-chip.on{ background:var(--acc-soft); border-color:var(--acc-line); color:#fff; box-shadow:0 4px 16px -8px var(--acc-glow); }
.folder-chip .ct{ font-size:var(--fs-eyebrow); color:var(--ink-3); font-weight:var(--fw-bold); }
.drop{
border:1.5px dashed var(--line-strong); border-radius:var(--r-md); padding:18px 14px; text-align:center; margin-bottom:14px;
display:flex; flex-direction:column; align-items:center; gap:7px; cursor:pointer; position:relative; overflow:hidden;
transition:.24s var(--out); background:rgba(255,255,255,.015);
}
.drop:hover,.drop.over{ border-color:var(--acc-line); background:var(--acc-soft); box-shadow:0 0 26px -10px var(--acc-glow); }
.drop.over{ box-shadow:inset 0 0 36px var(--acc-soft), 0 0 30px -8px var(--acc-glow); }
.drop .ring{ width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:var(--ai-grad); color:var(--on-acc); box-shadow:0 8px 22px -6px var(--ai-glow), 0 0 18px -4px var(--acc-glow); transition:transform .28s var(--spring); }
.drop:hover .ring{ transform:translateY(-3px) scale(1.05); }
.drop .t{ font-size:var(--fs-base); font-weight:var(--fw-bold); }
.drop .s{ font-size:var(--fs-label); color:var(--ink-3); font-weight:var(--fw-reg); }
.sec-label{ font-size:var(--fs-eyebrow); font-weight:var(--fw-bold); color:var(--ink-3); text-transform:uppercase; letter-spacing:.08em; margin:4px 2px 9px; display:flex; justify-content:space-between; white-space:nowrap; }
/* grid view */
.file-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.file-grid.masonry{ display:block; position:relative; gap:0; grid-template-columns:none; --masonry-gap:10px; --masonry-min:150px; }
.fcard{
border-radius:var(--r-sm); overflow:hidden; cursor:pointer;
background:var(--panel-2); border:1px solid var(--line); position:relative;
box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
transition:transform .26s var(--spring), box-shadow .26s var(--out), border-color .2s var(--out);
}
.fcard:hover{ border-color:var(--line-strong); transform:translateY(-4px) scale(1.015); box-shadow:var(--shadow-soft), 0 0 22px -10px var(--acc-glow); }
.fcard:active{ transform:translateY(-1px) scale(.99); }
.fcard.on{ border-color:var(--acc-line); box-shadow:0 0 0 1px var(--acc-line), 0 12px 30px -12px var(--acc-glow), 0 0 26px -8px var(--acc-glow); }
.thumb{ aspect-ratio:var(--ar, 9/16); position:relative; overflow:hidden; background:
repeating-linear-gradient(135deg,#1b1e2b 0 9px,#171a26 9px 18px); }
.thumb::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 30%,rgba(0,0,0,.25)); pointer-events:none; }
.thumb .dur{ position:absolute; bottom:6px; right:6px; background:rgba(0,0,0,.66); backdrop-filter:blur(6px); padding:2px 6px; border-radius:6px; font-size:var(--fs-micro); font-weight:var(--fw-med); color:rgba(255,255,255,.95); z-index:2; }
.thumb .res{ position:absolute; top:6px; left:6px; background:rgba(0,0,0,.5); backdrop-filter:blur(6px); padding:2px 6px; border-radius:6px; font-size:var(--fs-micro); font-weight:var(--fw-bold); color:rgba(255,255,255,.85); letter-spacing:.03em; opacity:0; transition:.2s var(--out); z-index:2; }
.fcard:hover .res{ opacity:1; }
.thumb .play-ov{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(8,9,14,.4); opacity:0; transition:.22s var(--out); z-index:2; }
.fcard:hover .play-ov{ opacity:1; }
.thumb .play-ov .pbtn{ width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.18); backdrop-filter:blur(8px); display:grid; place-items:center; border:1px solid rgba(255,255,255,.3); transform:scale(.85); transition:transform .26s var(--spring); box-shadow:0 6px 18px -6px rgba(0,0,0,.6); }
.fcard:hover .play-ov .pbtn{ transform:scale(1); }
.thumb .scrub{ position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.12); opacity:0; transition:.2s var(--out); z-index:2; }
.fcard:hover .scrub{ opacity:1; }
.thumb .scrub i{ display:block; height:100%; width:38%; background:var(--acc); box-shadow:0 0 10px var(--acc-glow); animation:scrub 2.4s linear infinite; }
@keyframes scrub{ 0%{width:6%} 100%{width:96%} }
.fcard .meta{ padding:7px 8px 8px; }
.fcard .meta .nm{ font-size:var(--fs-label); font-weight:var(--fw-med); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fcard .meta .sz{ font-size:var(--fs-micro); color:var(--ink-3); font-weight:var(--fw-med); margin-top:2px; }
/* list view */
.file-list{ display:flex; flex-direction:column; gap:4px; }
.frow{ display:flex; align-items:center; gap:11px; padding:8px; border-radius:10px; cursor:pointer; border:1px solid transparent; transition:background .16s var(--out), transform .2s var(--spring), box-shadow .2s var(--out); }
.frow:hover{ background:var(--hover); transform:translateX(2px); }
.frow.on{ background:var(--acc-soft); border-color:var(--acc-line); box-shadow:0 0 18px -8px var(--acc-glow); }
.frow .ft{ width:34px; height:48px; border-radius:6px; flex:0 0 34px; position:relative; overflow:hidden; background:repeating-linear-gradient(135deg,#1b1e2b 0 7px,#171a26 7px 14px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); }
.frow .ft .pl{ position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.55); opacity:0; transition:.18s var(--out); }
.frow:hover .ft .pl{ opacity:1; }
.frow .fmeta{ flex:1; min-width:0; }
.frow .fmeta .nm{ font-size:var(--fs-base); font-weight:var(--fw-med); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.frow .fmeta .sub{ font-size:var(--fs-label); color:var(--ink-3); font-weight:var(--fw-reg); margin-top:2px; display:flex; gap:8px; }
.frow .fmeta .sub .mono{ color:var(--ink-3); }
/* ============================================================ CENTER / CANVAS */
.center{ flex:1 1 auto; min-width:0; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.stage-wrap{
flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
background:var(--glass-2); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
border:1px solid var(--line-soft); box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.canvas-toolbar{ display:flex; align-items:center; gap:6px; height:52px; flex:0 0 52px; padding:0 14px; border-bottom:1px solid var(--line-soft); background:linear-gradient(180deg,rgba(255,255,255,.022),transparent); }
.tool{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:var(--ink-2); transition:background .16s var(--out), color .16s var(--out), transform .2s var(--spring); position:relative; }
.tool:hover{ background:var(--hover); color:var(--ink); transform:translateY(-1px); }
.tool:active{ transform:scale(.92); }
.tool.on{ background:var(--acc-soft); color:#fff; box-shadow:inset 0 0 0 1px var(--acc-line), 0 4px 16px -8px var(--acc-glow); }
.tool.on svg{ filter:drop-shadow(0 0 6px var(--acc-glow)); }
.tool.locked{ color:var(--ink-4); cursor:not-allowed; }
.tool.locked:hover{ background:transparent; color:var(--ink-4); transform:none; }
.tool.locked .lk{ position:absolute; bottom:3px; right:3px; }
.tool-ai{ width:auto; padding:0 13px; gap:7px; display:flex; align-items:center; height:36px; border-radius:10px; font-size:var(--fs-sub); font-weight:var(--fw-bold);
color:#fff; background:rgba(22,192,216,.14); border:1px solid var(--acc-line); position:relative; overflow:hidden;
box-shadow:0 0 16px -6px var(--ai-glow); transition:box-shadow .22s var(--out), transform .2s var(--spring); }
.tool-ai:hover{ box-shadow:0 0 24px -4px var(--ai-glow); transform:translateY(-1px); }
.tool-ai .spark{ color:var(--ai-b); filter:drop-shadow(0 0 6px var(--ai-b)); }
.tool-sep{ width:1px; height:24px; background:var(--line); margin:0 5px; }
/* container-type:size turns the stage into a query container so the frame can
size itself from BOTH stage axes at once — true object-fit:contain in CSS. */
.stage{ flex:1; min-height:0; min-width:0; display:grid; place-items:center; container-type:size; padding:clamp(12px,2.2vmin,28px);
background:
radial-gradient(58% 56% at 50% 42%, var(--acc-soft), transparent 70%),
radial-gradient(40% 40% at 50% 100%, var(--acc-soft), transparent 70%),
repeating-linear-gradient(0deg,transparent 0 27px,rgba(255,255,255,.016) 27px 28px),
repeating-linear-gradient(90deg,transparent 0 27px,rgba(255,255,255,.016) 27px 28px);
position:relative; overflow:hidden; }
.stage::after{ content:''; position:absolute; inset:0; pointer-events:none; box-shadow:none; }
/* The Aspect-Ratio Safe Zone: height is the SMALLER of the stage's height and
the height a 9:16 box may be before its width exceeds the stage's width
(100cqw * 16/9). It therefore shrinks/grows proportionally and can never
overflow its parent or spawn a scrollbar, on any pane width. */
.frame{ position:relative; aspect-ratio:var(--arw,9) / var(--arh,16); height:min(100cqh, 100cqw * var(--arh,16) / var(--arw,9)); width:auto; max-height:100%; max-width:100%; border-radius:clamp(13px,1.7cqw,21px); overflow:hidden; z-index:1;
background:repeating-linear-gradient(135deg,#191c28 0 13px,#15171f 13px 26px);
box-shadow:
0 50px 110px -30px rgba(0,0,0,.92),
0 24px 60px -24px rgba(0,0,0,.7),
0 0 70px -8px var(--acc-glow),
0 0 0 1px var(--line-strong),
inset 0 0 0 1px rgba(255,255,255,.05),
inset 0 1px 0 rgba(255,255,255,.08); }
.frame::before{ content:''; position:absolute; inset:0; pointer-events:none; z-index:5; border-radius:20px;
background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 22%,transparent 78%,rgba(0,0,0,.35)); }
.frame-ph{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; color:var(--ink-3); }
.frame-ph .ic{ width:50px; height:50px; border-radius:15px; display:grid; place-items:center; background:rgba(255,255,255,.05); border:1px solid var(--line); box-shadow:0 8px 24px -10px rgba(0,0,0,.6); }
.frame-ph .ph-t{ font-size:var(--fs-sub); font-weight:var(--fw-bold); color:var(--ink-2); }
.frame-ph .ph-s{ font-size:var(--fs-label); font-weight:var(--fw-med); letter-spacing:.04em; }
.safe-zone{ position:absolute; inset:7% 6% 16%; border:1px dashed rgba(255,255,255,.1); border-radius:10px; pointer-events:none; }
.frame[data-orient="land"] .safe-zone{ inset:8% 7% 14%; }
.ui-caption{ position:absolute; left:7%; right:24%; bottom:9%; }
.frame[data-orient="land"] .ui-caption{ left:6%; right:46%; bottom:10%; }
.ui-caption .bar{ height:9px; border-radius:6px; background:rgba(255,255,255,.16); margin-bottom:6px; box-shadow:0 1px 3px rgba(0,0,0,.4); }
.ui-caption .bar.s{ width:62%; }
/* watermark bounding box */
.wm{ position:absolute; cursor:grab; touch-action:none; z-index:6; }
.wm:active{ cursor:grabbing; }
.wm-box{ width:100%; height:100%; border:1.5px solid var(--acc); border-radius:8px; display:grid; place-items:center;
background:var(--acc-soft); backdrop-filter:blur(4px); box-shadow:0 0 0 1px rgba(0,0,0,.3),0 8px 26px -8px var(--acc-glow), 0 0 20px -4px var(--acc-glow); position:relative; }
.wm-logo{ font-weight:var(--fw-black); font-size:var(--fs-base); letter-spacing:.04em; color:#fff; opacity:.95; display:flex; align-items:center; gap:5px; text-shadow:0 0 12px var(--acc-glow); }
.wm-handle{ position:absolute; width:11px; height:11px; border-radius:3px; background:#fff; border:1.5px solid var(--acc); box-shadow:0 1px 5px rgba(0,0,0,.5), 0 0 8px var(--acc-glow); }
.wm-handle.tl{ top:-6px; left:-6px; cursor:nwse-resize; }
.wm-handle.tr{ top:-6px; right:-6px; cursor:nesw-resize; }
.wm-handle.bl{ bottom:-6px; left:-6px; cursor:nesw-resize; }
.wm-handle.br{ bottom:-6px; right:-6px; cursor:nwse-resize; }
.wm-toolbar{ position:absolute; top:-42px; left:50%; transform:translateX(-50%) translateY(5px); display:flex; align-items:center; gap:8px;
background:var(--glass-3); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); border:1px solid var(--line-strong); border-radius:10px; padding:6px 10px; box-shadow:var(--shadow-pop); white-space:nowrap;
opacity:0; pointer-events:none; transition:opacity .18s var(--out), transform .18s var(--out); }
.wm:hover .wm-toolbar, .wm:focus-within .wm-toolbar{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.wm-toolbar .lab{ font-size:var(--fs-eyebrow); font-weight:var(--fw-bold); color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; }
.wm-toolbar input[type=range]{ width:74px; }
.wm-toolbar .val{ font-size:var(--fs-label); font-weight:var(--fw-bold); color:var(--ink-2); width:30px; }
/* range styling */
input[type=range]{ -webkit-appearance:none; appearance:none; height:4px; border-radius:4px; background:var(--line-strong); outline:none; cursor:pointer; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:13px; height:13px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px var(--acc-soft),0 1px 4px rgba(0,0,0,.5), 0 0 10px var(--acc-glow); transition:.16s var(--out); }
input[type=range]::-webkit-slider-thumb:hover{ box-shadow:0 0 0 5px var(--acc-soft),0 1px 4px rgba(0,0,0,.5), 0 0 14px var(--acc-glow); }
/* playback bar */
.playbar{ display:flex; align-items:center; gap:14px; height:54px; flex:0 0 54px; padding:0 16px; border-top:1px solid var(--line-soft);
background:var(--glass-head); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); }
.pbtn-main{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:#fff; color:#0c0d11; transition:transform .22s var(--spring), box-shadow .22s var(--out); box-shadow:0 6px 18px -4px rgba(255,255,255,.35), 0 0 20px -6px rgba(255,255,255,.4); }
.pbtn-main:hover{ transform:scale(1.08); box-shadow:0 8px 24px -4px rgba(255,255,255,.45), 0 0 28px -4px rgba(255,255,255,.5); }
.pbtn-main:active{ transform:scale(.96); }
.pp-ctl{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:var(--ink-2); transition:background .16s var(--out), color .16s var(--out), transform .2s var(--spring); }
.pp-ctl:hover{ background:var(--hover); color:var(--ink); transform:translateY(-1px); }
.pp-ctl:active{ transform:scale(.92); }
.pp-ctl.on{ color:var(--acc-2); background:var(--acc-soft); box-shadow:inset 0 0 0 1px var(--acc-line); }
.pp-ctl.on svg{ filter:drop-shadow(0 0 5px var(--acc-glow)); }
.tc{ font-size:var(--fs-base); font-weight:var(--fw-med); color:var(--ink); }
.tc .sep{ color:var(--ink-3); margin:0 4px; }
.scrub-line{ flex:1; height:5px; border-radius:5px; background:var(--line-strong); position:relative; cursor:pointer; }
.scrub-line .fill{ position:absolute; left:0; top:0; bottom:0; border-radius:5px; background:linear-gradient(90deg,var(--acc),var(--acc-2)); box-shadow:0 0 14px var(--acc-glow); }
.scrub-line .head{ position:absolute; top:50%; transform:translate(-50%,-50%); width:13px; height:13px; border-radius:50%; background:#fff; box-shadow:0 1px 5px rgba(0,0,0,.5), 0 0 12px var(--acc-glow); }
/* ============================================================ TIMELINE */
.timeline{ flex:0 0 auto; background:var(--glass); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); border:1px solid var(--line-soft); display:flex; flex-direction:column; min-height:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
.tl-head{ display:flex; align-items:center; gap:8px; height:46px; flex:0 0 46px; padding:0 13px; border-bottom:1px solid var(--line-soft); background:linear-gradient(180deg,rgba(255,255,255,.022),transparent); }
.tl-tools{ display:flex; gap:3px; }
.tl-tool{ display:flex; align-items:center; gap:6px; height:30px; padding:0 10px; border-radius:8px; color:var(--ink-2); font-size:var(--fs-sub); font-weight:var(--fw-med); transition:background .16s var(--out), color .16s var(--out), transform .18s var(--spring); }
.tl-tool:hover{ background:var(--hover); color:var(--ink); transform:translateY(-1px); }
.tl-tool.danger:hover{ background:rgba(255,107,125,.14); color:var(--bad); box-shadow:0 0 16px -8px rgba(255,107,125,.6); }
.tl-zoom{ display:flex; align-items:center; gap:8px; margin-left:auto; color:var(--ink-3); }
.tl-body{ flex:1; overflow:auto; min-height:0; position:relative; }
.tl-inner{ position:relative; }
.tl-ruler{ height:24px; position:sticky; top:0; z-index:5; background:var(--glass-head); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); border-bottom:1px solid var(--line-soft); display:flex; cursor:pointer; }
.tl-ruler .ruler-pad{ flex:0 0 78px; width:78px; position:sticky; left:0; z-index:2; background:var(--glass-head); border-right:1px solid var(--line-soft); }
.tl-ruler .ruler-ticks{ position:relative; flex:1 1 auto; height:100%; }
.tl-ruler .tick{ position:absolute; top:0; bottom:0; border-left:1px solid var(--line-soft); font-size:var(--fs-micro); color:var(--ink-4); font-weight:var(--fw-med); padding:5px 0 0 5px; font-family:'JetBrains Mono',monospace; white-space:nowrap; }
.track{ height:56px; display:flex; align-items:stretch; border-bottom:1px solid var(--line-soft); position:relative; }
.track-label{ flex:0 0 78px; width:78px; position:sticky; left:0; z-index:3; display:flex; flex-direction:column; justify-content:center; gap:3px; padding-left:13px; background:var(--glass-head); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); border-right:1px solid var(--line-soft); }
.track-label .tn{ font-size:var(--fs-label); font-weight:var(--fw-bold); }
.track-label .tt{ font-size:var(--fs-micro); font-weight:var(--fw-bold); color:var(--ink-4); text-transform:uppercase; letter-spacing:.05em; }
.track-label .mute{ width:22px; height:22px; border-radius:6px; display:grid; place-items:center; color:var(--ink-3); margin-top:2px; transition:.16s var(--out); }
.track-label .mute:hover{ background:var(--hover); color:var(--ink); }
.track-label .mute.on{ color:var(--bad); }
.track-area{ flex:1; height:100%; position:relative; padding:7px 0; }
.clip{ position:absolute; top:7px; bottom:7px; border-radius:9px; overflow:hidden; cursor:pointer; border:1.5px solid transparent; transition:border .16s var(--out), box-shadow .2s var(--out), transform .2s var(--spring); }
.clip:hover{ transform:translateY(-1px); box-shadow:0 8px 22px -10px rgba(0,0,0,.7); }
.clip.sel{ border-color:var(--acc); box-shadow:0 0 0 1.5px var(--acc), 0 10px 26px -8px rgba(0,0,0,.45), 0 0 24px -6px var(--acc-glow); }
.clip.video{ background:linear-gradient(180deg,#2a2f44,#1c2030); box-shadow:inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.05); }
.clip .clip-grad{ position:absolute; inset:0; }
.clip.audio{ background:linear-gradient(180deg,rgba(70,217,160,.16),rgba(70,217,160,.07)); border:1.5px solid rgba(70,217,160,.4); display:flex; align-items:center; padding:0 8px; gap:2px; box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(70,217,160,.1); }
.clip.audio.sel{ border-color:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 0 24px -6px rgba(70,217,160,.6); }
.wave{ display:flex; align-items:center; gap:2px; height:100%; }
.wave i{ width:2.5px; border-radius:2px; background:var(--good); opacity:.8; box-shadow:0 0 5px rgba(70,217,160,.4); }
.clip.overlay{ background:linear-gradient(180deg,rgba(46,211,198,.18),rgba(46,211,198,.08)); border:1.5px solid rgba(46,211,198,.4); display:flex; align-items:center; gap:7px; padding:0 10px; box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 0 1px rgba(46,211,198,.12); }
.clip.overlay.sel{ border-color:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 0 24px -6px var(--ai-glow); }
.clip.overlay .ov-i{ color:var(--ai-b); filter:drop-shadow(0 0 5px var(--ai-b)); }
.clip.overlay .ov-t{ font-size:var(--fs-label); font-weight:var(--fw-bold); color:#d6f7f3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.clip-name{ position:absolute; top:5px; left:8px; right:8px; font-size:var(--fs-eyebrow); font-weight:var(--fw-bold); color:rgba(255,255,255,.9); z-index:2; display:flex; align-items:center; gap:5px; text-shadow:0 1px 3px rgba(0,0,0,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.clip-thumbs{ position:absolute; inset:0; display:flex; opacity:.55; }
.clip-thumbs i{ flex:1; border-right:1px solid rgba(0,0,0,.25); background:repeating-linear-gradient(135deg,#2b3043 0 6px,#262a3a 6px 12px); }
.trim{ position:absolute; top:0; bottom:0; width:9px; display:grid; place-items:center; cursor:ew-resize; z-index:3; }
.trim.l{ left:0; } .trim.r{ right:0; }
.trim::before{ content:''; width:3px; height:40%; border-radius:3px; background:rgba(255,255,255,.6); }
.clip.sel .trim::before{ background:var(--acc); box-shadow:0 0 6px var(--acc-glow); }
.tl-playhead{ position:absolute; top:0; bottom:0; width:2px; z-index:6; pointer-events:none;
background:linear-gradient(180deg,var(--acc-2),var(--acc));
box-shadow:0 0 12px 1px var(--acc-glow), 0 0 28px 2px var(--acc-glow); }
.tl-playhead::before{ content:''; position:absolute; top:0; bottom:0; left:-3px; right:-3px; background:var(--acc-soft); filter:blur(4px); }
.tl-playhead .ph-grip{ position:absolute; top:-1px; left:50%; transform:translateX(-50%); width:13px; height:14px; background:var(--acc-2); border-radius:3px 3px 5px 5px; box-shadow:0 2px 8px rgba(0,0,0,.55), 0 0 12px var(--acc-glow); }
/* ============================================================ RIGHT PANEL */
.right-body{ flex:1; overflow-y:auto; min-height:0; padding:16px 15px 22px; display:flex; flex-direction:column; gap:18px; }
.right-body > *{ flex-shrink:0; }
/* virality */
.virality{ display:flex; align-items:center; gap:16px; padding:15px; border-radius:var(--r-md); position:relative; overflow:hidden;
background:linear-gradient(135deg,rgba(22,192,216,.16),rgba(46,211,198,.08)); border:1px solid var(--acc-line);
box-shadow:0 14px 40px -16px var(--ai-glow), inset 0 1px 0 rgba(255,255,255,.06); }
.virality::after{ content:''; position:absolute; right:-30px; top:-30px; width:130px; height:130px; border-radius:50%; background:radial-gradient(circle,rgba(46,211,198,.28),transparent 70%); z-index:0; }
.virality > *{ position:relative; z-index:1; }
.vi-ring{ position:relative; width:78px; height:78px; flex:0 0 78px; }
.vi-ring .pct{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.vi-ring .pct b{ font-size:var(--fs-stat-1); font-weight:var(--fw-black); line-height:1; text-shadow:0 0 14px var(--ai-glow); }
.vi-ring .pct s{ font-size:var(--fs-micro); font-weight:var(--fw-bold); color:var(--ink-3); text-decoration:none; letter-spacing:.06em; margin-top:2px; }
.vi-pulse{ position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 var(--acc-glow); animation:vpulse 2.6s ease-out infinite; }
@keyframes vpulse{ 0%{box-shadow:0 0 0 0 rgba(22,192,216,.45)} 70%{box-shadow:0 0 0 16px rgba(22,192,216,0)} 100%{box-shadow:0 0 0 0 rgba(22,192,216,0)} }
.vi-meta{ flex:1; }
.vi-meta .vt{ font-size:var(--fs-base); font-weight:var(--fw-black); display:flex; align-items:center; gap:6px; white-space:nowrap; }
.vi-meta .vt .badge{ font-size:var(--fs-micro); font-weight:var(--fw-black); padding:2px 6px; border-radius:5px; background:var(--ai-grad); color:var(--on-acc); letter-spacing:.04em; flex:0 0 auto; box-shadow:0 2px 10px -2px var(--ai-glow); }
.vi-meta .vs{ font-size:var(--fs-label); color:var(--ink-2); font-weight:var(--fw-reg); margin-top:7px; line-height:1.4; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field-label{ display:flex; align-items:center; justify-content:space-between; }
.field-label .fl{ font-size:var(--fs-label); font-weight:var(--fw-bold); color:var(--ink-2); text-transform:uppercase; letter-spacing:.06em; }
.ai-btn{ display:flex; align-items:center; gap:6px; height:25px; padding:0 9px; border-radius:7px; font-size:var(--fs-label); font-weight:var(--fw-bold); color:#fff;
background:rgba(22,192,216,.16); border:1px solid var(--acc-line); position:relative; overflow:hidden;
box-shadow:0 0 14px -5px var(--ai-glow); transition:background .22s var(--out), box-shadow .22s var(--out), transform .2s var(--spring); }
.ai-btn .spark{ color:var(--ai-b); filter:drop-shadow(0 0 5px var(--ai-b)); }
.ai-btn:hover{ background:var(--ai-grad); border-color:transparent; box-shadow:0 6px 20px -4px var(--ai-glow), 0 0 26px -4px var(--ai-glow); transform:translateY(-1px); }
.ai-btn:active{ transform:translateY(0) scale(.96); }
.ai-btn:hover .spark{ color:#fff; filter:drop-shadow(0 0 7px #fff); }
.ai-btn .shine{ position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.4) 50%,transparent 70%); transform:translateX(-120%); }
.ai-btn:hover .shine{ animation:shine 1s ease; }
@keyframes shine{ to{ transform:translateX(120%);} }
.inp{ background:var(--well); border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-size:var(--fs-base); font-weight:var(--fw-reg); color:var(--ink); outline:none; transition:.2s var(--out); width:100%; resize:none; }
.inp::placeholder{ color:var(--ink-4); }
.inp:focus{ border-color:var(--acc-line); box-shadow:0 0 0 3px var(--acc-soft), 0 0 20px -6px var(--acc-glow); }
textarea.inp{ line-height:1.5; min-height:84px; }
.char-ct{ font-size:var(--fs-eyebrow); color:var(--ink-4); font-weight:var(--fw-med); align-self:flex-end; }
.tags{ display:flex; flex-wrap:wrap; gap:6px; background:var(--well); border:1px solid var(--line); border-radius:10px; padding:8px; min-height:42px; transition:.2s var(--out); }
.tags:focus-within{ border-color:var(--acc-line); box-shadow:0 0 0 3px var(--acc-soft), 0 0 20px -6px var(--acc-glow); }
.tag{ display:flex; align-items:center; gap:5px; height:24px; padding:0 4px 0 9px; border-radius:7px; background:var(--acc-soft); border:1px solid var(--acc-line); font-size:var(--fs-sub); font-weight:var(--fw-med); color:var(--ink); transition:.18s var(--out); }
.tag:hover{ box-shadow:0 0 14px -6px var(--acc-glow); }
.tag .x{ width:17px; height:17px; border-radius:5px; display:grid; place-items:center; color:var(--ink-3); transition:.14s var(--out); }
.tag .x:hover{ background:rgba(255,255,255,.12); color:var(--ink); }
.tags input{ flex:1; min-width:60px; background:none; border:none; outline:none; font-size:var(--fs-base); color:var(--ink); }
.tags input::placeholder{ color:var(--ink-4); }
/* platform toggles */
.platforms{ display:flex; flex-direction:column; gap:8px; }
.plat{ display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:12px; background:var(--panel-2); border:1px solid var(--line); cursor:pointer; transition:background .18s var(--out), border-color .18s var(--out), transform .22s var(--spring), box-shadow .22s var(--out); }
.plat:hover{ border-color:var(--line-strong); transform:translateY(-2px); box-shadow:var(--shadow-soft); }
.plat:active{ transform:translateY(0) scale(.99); }
.plat.on{ background:var(--acc-soft); border-color:var(--acc-line); box-shadow:0 8px 26px -12px var(--acc-glow), inset 0 0 0 1px var(--acc-line); }
.plat-ic{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:0 0 34px; color:#fff; box-shadow:0 6px 18px -8px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.25); transition:transform .22s var(--spring); }
.plat:hover .plat-ic{ transform:scale(1.06); }
.plat-meta{ flex:1; }
.plat-meta .pn{ font-size:var(--fs-base); font-weight:var(--fw-bold); }
.plat-meta .pd{ font-size:var(--fs-label); color:var(--ink-3); font-weight:var(--fw-reg); margin-top:1px; }
.switch{ width:42px; height:24px; border-radius:14px; background:var(--line-strong); position:relative; flex:0 0 42px; transition:background .24s var(--out), box-shadow .24s var(--out); }
.switch i{ position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .26s var(--spring); box-shadow:0 1px 4px rgba(0,0,0,.4); }
.plat.on .switch{ background:var(--acc); box-shadow:0 0 16px var(--acc-glow), inset 0 0 0 1px rgba(255,255,255,.15); }
.plat.on .switch i{ transform:translateX(18px); }
/* export */
.export-card{ background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-md); padding:14px; display:flex; flex-direction:column; gap:12px; box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
.sel-row{ display:flex; flex-direction:column; gap:8px; }
.select{ display:flex; align-items:center; justify-content:space-between; height:38px; padding:0 12px; background:var(--well); border:1px solid var(--line); border-radius:10px; font-size:var(--fs-base); font-weight:var(--fw-med); color:var(--ink); cursor:pointer; transition:.18s var(--out); }
.select:hover{ border-color:var(--line-strong); background:var(--well-2); }
.select .sv{ color:var(--ink-2); }
.export-stats{ display:flex; gap:10px; }
.estat{ flex:1; text-align:center; padding:8px; border-radius:9px; background:var(--well); border:1px solid var(--line-soft); }
.estat .ev{ font-size:var(--fs-base); font-weight:var(--fw-black); }
.estat .el{ font-size:var(--fs-micro); font-weight:var(--fw-bold); color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; margin-top:2px; }
.export-btn{ height:48px; border-radius:13px; background:var(--ai-grad); color:#fff; font-size:var(--fs-body); font-weight:var(--fw-black); letter-spacing:.01em;
display:flex; align-items:center; justify-content:center; gap:9px; position:relative; overflow:hidden; transition:transform .2s var(--spring), box-shadow .3s var(--out);
box-shadow:0 14px 34px -8px var(--ai-glow), 0 0 28px -6px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.25);
animation:expglow 3.4s ease-in-out infinite; }
@keyframes expglow{ 0%,100%{ box-shadow:0 14px 34px -8px var(--ai-glow), 0 0 24px -8px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.25);} 50%{ box-shadow:0 16px 40px -8px var(--ai-glow), 0 0 40px -4px var(--ai-glow), inset 0 1px 0 rgba(255,255,255,.3);} }
.export-btn:hover{ transform:translateY(-2px); box-shadow:0 20px 48px -8px var(--ai-glow), 0 0 48px -2px var(--ai-glow), inset 0 1px 0 rgba(255,255,255,.3); }
.export-btn:active{ transform:translateY(0) scale(.99); }
.export-btn .ex-fill{ position:absolute; left:0; top:0; bottom:0; width:0; background:rgba(255,255,255,.24); transition:width .1s linear; }
.export-btn .ex-content{ position:relative; z-index:2; display:flex; align-items:center; gap:9px; }
.export-btn.busy{ pointer-events:none; animation:none; }
.export-btn.done{ background:var(--good); box-shadow:0 14px 34px -8px rgba(70,217,160,.55), 0 0 30px -6px rgba(70,217,160,.6); animation:none; }
.spin{ animation:spin 1s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg);} }
/* ============================================================ LAYOUT ENGINE */
/* splitter grip — a subtle handle dotting that reveals on hover/drag */
.resizer .rz-grip,.resizer-h .rz-grip{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
display:flex; gap:3px; opacity:0; transition:opacity .18s var(--out); pointer-events:none; }
.resizer .rz-grip{ flex-direction:column; }
.resizer .rz-grip::before,.resizer .rz-grip::after,
.resizer-h .rz-grip::before,.resizer-h .rz-grip::after{ content:''; width:3px; height:3px; border-radius:50%; background:rgba(255,255,255,.55); box-shadow:0 0 6px var(--acc-glow); }
.resizer-h .rz-grip::before,.resizer-h .rz-grip::after{ width:3px; height:3px; }
.resizer:hover .rz-grip,.resizer.drag .rz-grip,
.resizer-h:hover .rz-grip,.resizer-h.drag .rz-grip{ opacity:1; }
/* live size read-out that follows the cursor while dragging — proves the math */
.resize-readout{ position:fixed; z-index:400; transform:translate(14px,-32px); pointer-events:none;
background:var(--glass-3); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
border:1px solid var(--acc-line); border-radius:8px; padding:4px 9px; font-size:var(--fs-label); font-weight:var(--fw-bold);
color:var(--ink); box-shadow:var(--shadow-pop), 0 0 18px -6px var(--acc-glow); letter-spacing:.02em; white-space:nowrap; }
/* ----- collapsed Library rail (icon-only state) ----- */
.vault.collapsed{ transition:width .02s linear; }
.vault-rail{ align-items:center; padding:12px 0; gap:8px;
background:var(--glass-rail); border-right:1px solid var(--line); }
.vr-expand{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; color:var(--ink-2);
background:rgba(22,192,216,.12); border:1px solid var(--acc-line); flex:0 0 auto;
box-shadow:0 0 16px -8px var(--acc-glow); transition:.2s var(--out); }
.vr-expand:hover{ color:#fff; background:var(--acc-soft); transform:translateY(-1px); box-shadow:0 0 22px -4px var(--acc-glow); }
.vr-expand:active{ transform:scale(.94); }
.vr-icons{ display:flex; flex-direction:column; gap:6px; margin-top:6px; align-items:center; flex:1; width:100%; }
.vr-ic{ width:46px; height:44px; border-radius:12px; display:grid; place-items:center; color:var(--ink-3);
transition:color .18s var(--out), background .18s var(--out), transform .22s var(--spring); }
.vr-ic:hover{ color:var(--ink); background:var(--hover); transform:translateY(-1px); }
.vr-ic.on{ color:#fff; background:linear-gradient(180deg,rgba(22,192,216,.22),rgba(22,192,216,.08));
box-shadow:inset 0 0 0 1px var(--acc-line); }
.vr-foot{ font-size:var(--fs-label); font-weight:var(--fw-bold); color:var(--ink-3); padding:6px 0; border-top:1px solid var(--line-soft); width:36px; text-align:center; }
/* utility */
.row{ display:flex; align-items:center; }
.gap6{ gap:6px; } .gap8{ gap:8px; } .gap10{ gap:10px; }
.spacer{ flex:1; }
.dim{ color:var(--ink-3); }
/* ============================================================ STUDIO P0/P1/P2 ADDITIONS */
/* timeline tool states */
.tl-tool.on{ background:var(--acc-soft); color:var(--ink); box-shadow:inset 0 0 0 1px var(--acc-line); }
.tl-tool.on svg{ color:var(--acc-2); filter:drop-shadow(0 0 5px var(--acc-glow)); }
.tl-tool.off,.tl-tool:disabled{ opacity:.4; pointer-events:none; }
/* Library: add-to-timeline affordances */
.card-add{ position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; z-index:3;
background:var(--ai-grad); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:0 6px 16px -6px var(--ai-glow);
opacity:0; transform:translateY(-4px) scale(.85); transition:opacity .2s var(--out), transform .2s var(--spring); }
.fcard:hover .card-add{ opacity:1; transform:translateY(0) scale(1); }
.card-add:hover{ transform:scale(1.12); }
.card-add:active{ transform:scale(.9); }
.row-add{ width:30px; height:30px; border-radius:8px; flex:0 0 30px; display:grid; place-items:center; color:var(--ink-3);
opacity:0; transition:.16s var(--out); }
.frow:hover .row-add{ opacity:1; }
.row-add:hover{ background:var(--acc-soft); color:var(--acc-2); }
.row-add:active{ transform:scale(.9); }
/* search clear */
.search-x{ width:18px; height:18px; border-radius:5px; display:grid; place-items:center; color:var(--ink-4); flex:0 0 18px; transition:.14s var(--out); }
.search-x:hover{ background:var(--hover); color:var(--ink); }
/* compact upload bar (shown when the library already has clips) */
.drop.compact{ width:100%; flex-direction:row; align-items:center; justify-content:flex-start; gap:10px; padding:9px 12px; text-align:left; }
.drop.compact .ring{ width:30px; height:30px; border-radius:9px; flex:0 0 30px; box-shadow:0 6px 16px -6px var(--ai-glow); }
.drop.compact:hover .ring{ transform:translateY(0) scale(1.05); }
.drop.compact .t{ font-size:var(--fs-sub); font-weight:var(--fw-bold); }
.drop.compact .s{ font-size:var(--fs-label); color:var(--ink-3); margin-left:auto; }
/* empty / no-results state */
.vault-empty{ display:flex; flex-direction:column; align-items:center; gap:9px; padding:30px 16px; color:var(--ink-4); text-align:center; }
.vault-empty .ve-t{ font-size:var(--fs-sub); font-weight:var(--fw-med); color:var(--ink-3); }
.vault-empty .ve-clear{ font-size:var(--fs-label); font-weight:var(--fw-bold); color:var(--acc-2); padding:5px 11px; border-radius:8px; background:var(--acc-soft); border:1px solid var(--acc-line); transition:.16s var(--out); }
.vault-empty .ve-clear:hover{ background:var(--acc-line); color:#fff; }
/* export dropdown (Quality / Format) */
.select-wrap{ position:relative; }
.select-wrap .select{ width:100%; }
.select-wrap.open .select{ border-color:var(--acc-line); box-shadow:0 0 0 3px var(--acc-soft); }
.select-wrap.open .select svg{ transform:rotate(180deg); }
.select .row svg{ transition:transform .2s var(--out); }
.dd-menu{ position:absolute; left:0; right:0; bottom:calc(100% + 6px); z-index:40; padding:5px;
background:var(--glass-3); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
border:1px solid var(--line-strong); border-radius:11px; box-shadow:var(--shadow-pop);
display:flex; flex-direction:column; gap:2px; animation:ddpop .16s var(--out); }
@keyframes ddpop{ from{ opacity:0; transform:translateY(4px);} to{ opacity:1; transform:translateY(0);} }
.dd-opt{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-radius:8px;
font-size:var(--fs-sub); font-weight:var(--fw-med); color:var(--ink-2); text-align:left; transition:.14s var(--out); }
.dd-opt:hover{ background:var(--hover); color:var(--ink); }
.dd-opt.on{ background:var(--acc-soft); color:var(--ink); }
.dd-opt.on svg{ color:var(--acc-2); }