:root{
  --bg:#07061A; --bg2:#0A0920; --panel:rgba(245,243,255,.025); --line:rgba(201,184,255,.12); --line2:rgba(201,184,255,.25);
  --violet:#5B2BFF; --lilac:#C9B8FF; --text:#F5F3FF; --muted:#A99CE0; --dim:#8F86BD; --spark:#FF4FD8; --err:#FFB4E6;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Onest,system-ui,sans-serif;font-size:15px}
a{color:var(--lilac)}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
.mono,.lbl{font-family:'JetBrains Mono',monospace}
.lbl{font-size:12px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.dots{background-image:radial-gradient(rgba(201,184,255,.11) 1px,transparent 1.3px);background-size:14px 14px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:20px}
.glass{background:linear-gradient(145deg,rgba(201,184,255,.2),rgba(91,43,255,.08) 45%,rgba(7,6,26,.6));border:1px solid rgba(201,184,255,.26);box-shadow:inset 0 1px 0 rgba(245,243,255,.2)}

/* layout */
.shell{display:flex;min-height:100vh}
.side{width:80px;flex:0 0 80px;border-right:1px solid rgba(201,184,255,.10);display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 0;position:sticky;top:0;height:100vh}
.logo{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:24px;color:var(--lilac);text-decoration:none;margin-bottom:12px}
.nav{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--muted);text-decoration:none;position:relative}
.nav:hover{color:var(--text);background:rgba(201,184,255,.06)}
.nav.on{color:var(--lilac);background:rgba(91,43,255,.22);box-shadow:inset 0 0 0 1px rgba(201,184,255,.35)}
.nav.off{opacity:.35}
.nav .tip{position:absolute;left:58px;white-space:nowrap;background:#14113A;border:1px solid var(--line2);padding:6px 10px;border-radius:8px;font-size:13px;color:var(--text);opacity:0;pointer-events:none;transition:opacity .15s;z-index:10}
.nav:hover .tip{opacity:1}
.sep{width:28px;height:1px;background:rgba(201,184,255,.18);margin:6px 0}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--violet);display:flex;align-items:center;justify-content:center;font-weight:700;border:0;cursor:pointer;overflow:hidden;padding:0}
.avatar img{width:100%;height:100%;object-fit:cover}
.main{flex:1 1 auto;min-width:0;min-height:100vh;position:relative;overflow-x:hidden;overflow-y:visible;display:flex;flex-direction:column;gap:20px;padding:28px 36px}
.flare{position:absolute;width:640px;height:640px;left:-260px;top:-300px;pointer-events:none;background:radial-gradient(closest-side,rgba(91,43,255,.45),rgba(91,43,255,.1) 60%,transparent)}
.aside{width:320px;flex:0 0 320px;border-left:1px solid rgba(201,184,255,.10);padding:28px 20px;display:flex;flex-direction:column;gap:16px;background:var(--bg2);max-height:100vh;overflow:auto;position:sticky;top:0}
h1{margin:0;font-size:32px;font-weight:800;letter-spacing:-.01em;position:relative}
.head{display:flex;flex-wrap:wrap;align-items:center;gap:14px;position:relative}
.grow{flex:1 1 auto}
@media (max-width:1100px){.aside{display:none}}
@media (max-width:760px){
  .shell{flex-direction:column}
  .side{width:100%;height:auto;flex-direction:row;flex-wrap:wrap;justify-content:center;position:static;border-right:0;border-bottom:1px solid rgba(201,184,255,.10);padding:10px}
  .logo{margin:0}.sep{display:none}.main{padding:20px 16px}
}

/* controls */
.btn{text-decoration:none;font-weight:700;color:var(--text);background:var(--violet);border:0;border-radius:14px;padding:13px 22px;min-height:44px;cursor:pointer;box-shadow:0 10px 30px rgba(91,43,255,.4);display:inline-flex;align-items:center;gap:10px}
.btn:disabled{opacity:.5;cursor:default;box-shadow:none}
.btn.ghost{background:rgba(91,43,255,.16);border:1px solid rgba(201,184,255,.35);box-shadow:none}
.btn.danger{background:transparent;border:1px solid rgba(255,79,216,.4);color:var(--err);box-shadow:none}
.btn.sm{padding:8px 12px;min-height:36px;font-size:13px;border-radius:10px;font-weight:600}
.chip{font-size:14px;color:var(--text);background:rgba(245,243,255,.04);border:1px solid rgba(201,184,255,.14);border-radius:12px;padding:9px 14px;min-height:42px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.chip .k{color:var(--muted)}
.chip.on{background:rgba(91,43,255,.2);color:var(--lilac);border-color:rgba(201,184,255,.5)}
.chip.off{color:var(--muted)}
.chip.dashed{border-style:dashed;color:#CFC8EE}
.seg{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:14px}
.seg button{font-size:14px;font-weight:600;padding:9px 14px;min-height:40px;border-radius:10px;border:0;cursor:pointer;background:transparent;color:var(--muted)}
.seg button.on{background:rgba(91,43,255,.3);color:var(--text)}
.field,.inp,.sel{width:100%;background:rgba(7,6,26,.6);border:1px solid rgba(201,184,255,.16);border-radius:14px;color:var(--text);padding:13px 15px}
.inp,.sel{border-radius:10px;padding:9px 11px;min-height:40px;width:auto;background:#0E0C28}
.field:focus,.inp:focus,.sel:focus,.btn:focus-visible,.chip:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.field::placeholder,.inp::placeholder{color:var(--dim)}
textarea.field{resize:vertical;line-height:1.5}
.drop{border:1px dashed var(--line2);border-radius:16px;background-color:rgba(7,6,26,.5);color:#CFC8EE;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;cursor:pointer;text-align:center;padding:16px;position:relative;overflow:hidden}
.drop.over{border-color:var(--lilac);background-color:rgba(91,43,255,.12)}
.drop img.preview{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.drop .x{position:absolute;top:8px;right:8px;z-index:2}
.ico{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--lilac)}
.muted{color:var(--muted)}.dim{color:var(--dim)}
.pop{position:absolute;bottom:calc(100% + 10px);left:0;z-index:20;padding:14px;background:#100E2A;box-shadow:0 20px 60px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:8px;min-width:300px}
.opt{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px;border-radius:12px;border:1px solid transparent;background:transparent;cursor:pointer;text-align:left;width:100%}
.opt.on{background:rgba(91,43,255,.18);border-color:rgba(201,184,255,.45)}
.grid-ratio{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.grid-ratio button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border-radius:12px;border:1px solid var(--line);background:rgba(245,243,255,.03);cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:12px;color:#CFC8EE}
.grid-ratio button.on{border-color:var(--lilac);color:var(--lilac);background:rgba(91,43,255,.18)}
.grid-ratio i{display:block;border:1.6px solid currentColor;border-radius:3px}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{font-weight:500;text-align:left;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;color:var(--muted);padding:12px 14px}
.tbl td{padding:12px 14px;border-top:1px solid rgba(201,184,255,.08);vertical-align:middle}
.tbl .r{text-align:right}
.scroll-x{overflow-x:auto}
.ini{width:32px;height:32px;border-radius:50%;border:1px solid rgba(201,184,255,.3);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex:0 0 32px}

/* results */
.thumbs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.thumb{border-radius:14px;border:1px solid var(--line);overflow:hidden;background:rgba(91,43,255,.08);position:relative;display:block;aspect-ratio:9/16}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .st{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;font-size:12px}
.spin{width:22px;height:22px;border:2px solid rgba(201,184,255,.25);border-top-color:var(--lilac);border-radius:50%;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.row-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;border:1px solid rgba(201,184,255,.10);background:rgba(7,6,26,.5)}
.bar{height:6px;border-radius:3px;background:rgba(201,184,255,.12);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--violet)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.kpi{padding:22px;display:flex;flex-direction:column;gap:10px}
.kpi b{font-size:40px;font-weight:800;line-height:1}
.chart{height:200px;display:flex;align-items:flex-end;gap:10px}
.chart>div{flex:1 1 0;border-radius:4px;background-image:radial-gradient(rgba(201,184,255,.55) 1.4px,transparent 1.8px);background-size:9px 9px;min-height:2px}
.chart>div.hot{background-image:radial-gradient(#C9B8FF 1.6px,transparent 2px)}
pre.json{margin:0;padding:18px;font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.65;white-space:pre-wrap;word-break:break-word}

/* login */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;overflow:hidden}
.login .card{position:relative;max-width:420px;width:100%;padding:36px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}

#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:8px;pointer-events:none}
#toast div{background:#17134A;border:1px solid var(--line2);padding:12px 18px;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.5);max-width:90vw}
#toast div.err{border-color:rgba(255,79,216,.5);color:var(--err)}
.empty{margin:auto;color:var(--muted);text-align:center;padding:30px}
.soon{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;flex:1 1 auto;text-align:center;color:var(--muted)}

/* history thumbs: квадраты + hover-кнопки */
.thumb.sq{aspect-ratio:1/1;cursor:pointer}
.thumb .hov{position:absolute;inset:auto 0 0 0;display:flex;justify-content:flex-end;gap:6px;padding:8px;background:linear-gradient(transparent,rgba(7,6,26,.85));opacity:0;transition:opacity .15s}
.thumb:hover .hov,.thumb:focus-within .hov{opacity:1}
.hb{width:34px;height:34px;border-radius:10px;border:1px solid rgba(201,184,255,.35);background:rgba(16,14,42,.85);color:var(--lilac);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hb:hover{background:var(--violet);color:var(--text);border-color:var(--violet)}
/* карточка генерации */
.modal{position:fixed;inset:0;z-index:90;background:rgba(4,3,14,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:28px 76px 28px 28px;animation:fade .15s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.mbody{display:flex;gap:20px;width:100%;height:100%;max-width:1600px;align-items:stretch;justify-content:center}
.mimg{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center}
.mimg img{max-width:100%;max-height:calc(100vh - 56px);border-radius:18px;border:1px solid var(--line);box-shadow:0 30px 90px rgba(91,43,255,.25);object-fit:contain;background:#000}
.mside{flex:0 0 380px;display:flex;flex-direction:column;gap:14px;padding:20px;max-height:calc(100vh - 56px);overflow:auto;border-radius:22px}
.mprompt{font-size:16px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.tag{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;padding:5px 9px;border-radius:999px;border:1px solid rgba(201,184,255,.3);color:var(--lilac);text-transform:uppercase}
.mrefs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mref{position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.mref img{width:100%;height:100%;object-fit:cover;display:block}
.mref .hb{position:absolute;right:6px;bottom:6px;width:28px;height:28px;opacity:0;transition:opacity .15s}
.mref:hover .hb{opacity:1}
.mclose{position:fixed;top:18px;right:18px;z-index:2;width:44px;height:44px;border-radius:50%;font-size:16px}
.mnav{position:fixed;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:64px;font-size:28px}
.mnav.prev{left:12px}.mnav.next{right:486px}
@media (max-width:900px){.modal{padding:60px 16px 16px}.mbody{flex-direction:column;overflow:auto}.mside{flex:0 0 auto;max-height:none}.mimg img{max-height:60vh}.mnav.next{right:12px}}

/* Image: всё помещается в экран, без скролла */
.main.fit{height:100vh;min-height:0;overflow:hidden}
#stage{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center}
.stage-img,.stage-box{max-width:100%;max-height:100%;height:100%;width:auto;border-radius:18px;border:1px solid var(--line)}
.stage-img{object-fit:contain;background:#000;cursor:zoom-in;box-shadow:0 20px 70px rgba(91,43,255,.18)}
.stage-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;background:rgba(7,6,26,.7);box-sizing:border-box}
@media (max-width:760px){.main.fit{height:auto;overflow:visible}#stage{min-height:50vh}.stage-img,.stage-box{height:auto;width:100%}}

/* слайдеры Resolution / Quality */
.sld{display:flex;flex-direction:column;gap:12px;min-width:320px;padding:2px 4px}
.sld input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(90deg,var(--violet) var(--p),rgba(201,184,255,.15) var(--p));outline:none;cursor:pointer}
.sld input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--text);border:4px solid var(--violet);box-shadow:0 0 0 4px rgba(91,43,255,.25),0 0 18px rgba(91,43,255,.6)}
.sld input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--text);border:4px solid var(--violet)}
.ticks{display:flex;justify-content:space-between}
.ticks button{background:none;border:0;color:var(--dim);font-family:'JetBrains Mono',monospace;font-size:12px;cursor:pointer;padding:4px 2px;min-width:36px}
.ticks button:first-child{text-align:left}.ticks button:last-child{text-align:right}
.ticks button.on{color:var(--lilac);font-weight:700}

/* уведомление о готовой генерации */
#notify{position:fixed;right:20px;bottom:20px;z-index:95;display:flex;flex-direction:column;gap:10px;width:min(380px,calc(100vw - 32px))}
.ntf{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 10px;border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 1px rgba(91,43,255,.25);animation:nin .25s ease-out;position:relative}
.ntf img{width:52px;height:52px;border-radius:12px;object-fit:cover;flex:0 0 52px;border:1px solid var(--line)}
.ntf-ic{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;border:1px solid var(--line);flex:0 0 52px}
.ntf-x{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;border:1px solid var(--line2);background:#14113A;color:var(--muted);cursor:pointer;font-size:11px}
.ntf.out{opacity:0;transform:translateY(8px);transition:all .2s}
@keyframes nin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.fname{font-size:13px;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badges{position:absolute;left:12px;bottom:56px;display:flex;gap:6px;z-index:2;pointer-events:none}
.badges span{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;background:rgba(7,6,26,.8);border:1px solid var(--line2);padding:5px 8px;border-radius:8px}
canvas.wave{width:90%;height:auto;max-height:150px}
/* выбор области сабов */
.rgn{position:absolute;z-index:2;cursor:crosshair;touch-action:none;overflow:hidden}
.rbox{position:absolute;border:2px dashed var(--lilac);background:rgba(91,43,255,.16);border-radius:6px;box-shadow:0 0 0 9999px rgba(4,3,14,.38);pointer-events:none}
.rbox span{position:absolute;left:6px;top:6px;font-size:11px;font-family:'JetBrains Mono',monospace;letter-spacing:.04em;color:#fff;background:rgba(14,12,36,.8);padding:3px 7px;border-radius:6px;white-space:nowrap}
.drop .badges,.drop .hb.x{z-index:3}
/* ---------- Subtitle Burner ---------- */
.sb{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) 260px;gap:18px;width:100%}
.sb-video{display:flex;flex-direction:column;gap:12px;min-height:0}
.sb-video .drop{flex:1 1 auto;min-height:0;padding:0}
.sb-video .drop.has{cursor:default;border-style:solid;background:#000}
.sb-stage{position:relative;max-width:100%;max-height:100%}
.sb-stage video{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer}
.sb-ov{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.capbox{position:absolute;pointer-events:auto;cursor:move;border:1.5px dashed transparent;border-radius:8px;touch-action:none}
.sb-stage:hover .capbox,.capbox:active{border-color:rgba(201,184,255,.7)}
.capbox i{position:absolute;width:12px;height:12px;background:#fff;border:2px solid var(--violet);border-radius:3px;opacity:0}
.sb-stage:hover .capbox i{opacity:1}
.capbox i[data-h=nw]{left:-7px;top:-7px;cursor:nwse-resize}.capbox i[data-h=ne]{right:-7px;top:-7px;cursor:nesw-resize}
.capbox i[data-h=sw]{left:-7px;bottom:-7px;cursor:nesw-resize}.capbox i[data-h=se]{right:-7px;bottom:-7px;cursor:nwse-resize}
.capbox i[data-h=w]{left:-5px;top:50%;margin-top:-9px;width:8px;height:18px;cursor:ew-resize}.capbox i[data-h=e]{right:-5px;top:50%;margin-top:-9px;width:8px;height:18px;cursor:ew-resize}
.sb-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;min-height:30px}
.sb-bar:empty{display:none}
.sb-bar .play{width:38px;height:38px;border-radius:50%;border:0;background:var(--violet);color:#fff;cursor:pointer;font-size:13px;flex:0 0 auto}
.sb-bar input[type=range]{flex:1 1 auto;accent-color:var(--violet)}
.sb-ed{display:flex;flex-direction:column;gap:10px;padding:14px;min-height:0}
.sb-top{display:flex;align-items:center;gap:10px;position:relative}
.seg.sm button{min-height:34px;padding:6px 14px}
.split-btn{display:flex;gap:4px;position:relative}
.split-btn .chip{min-height:38px}
.chip:disabled{opacity:.5;cursor:default}
.chip.xs{min-height:28px;padding:3px 10px;font-size:12px}
.hb.sm{width:28px;height:28px;border-radius:8px;font-size:15px}
.sb-menu{position:absolute;right:0;top:46px;z-index:20;width:290px;display:flex;flex-direction:column;gap:8px;padding:14px;background:#120F33}
.sb-menu .sel,.sb-menu .inp{width:100%;box-sizing:border-box}
.sb-mi{display:flex;flex-direction:column;gap:2px;margin-top:6px;border-top:1px solid var(--line);padding-top:8px}
.sb-mi .opt:disabled{opacity:.45;cursor:default}
.sb-err{color:var(--err);font-size:13px}
.sb-err:empty{display:none}
.sb-body{flex:1 1 auto;min-height:0;overflow:auto;padding-right:4px}
.sb-empty{height:100%;min-height:160px;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;color:var(--muted)}
.sb-empty.listening{background-image:radial-gradient(rgba(124,77,255,.55) 1.2px,transparent 1.3px);background-size:9px 9px;border-radius:14px;flex-direction:row}
.sb-lines{display:flex;flex-direction:column;gap:6px}
.sb-line{display:flex;align-items:center;gap:8px}
.sb-line .inp{flex:1 1 auto;min-width:0;min-height:38px;padding:7px 12px}
.sb-t{background:none;border:0;cursor:pointer;font-size:12px;width:48px;text-align:left;padding:0}
.sb-style{display:flex;flex-direction:column;gap:9px}
.sb-style .lbl{margin-top:8px}
.looks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.look{border:1px solid var(--line);background:rgba(0,0,0,.25);border-radius:14px;padding:0;cursor:pointer;overflow:hidden;color:var(--muted);font-size:12px;display:flex;flex-direction:column}
.look.on{border-color:var(--lilac);box-shadow:0 0 0 1px var(--lilac) inset;color:var(--lilac)}
.look-pv{height:62px;display:flex;align-items:center;justify-content:center;background:#0b0a14;overflow:hidden}
.look>span{padding:6px 0}
.sb-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;color:#D9D3F5}
.sb-row .val{color:var(--lilac);font-size:13px}
.sb-row.chk,.sb-row .chk{cursor:pointer}
.sb-row input[type=checkbox]{accent-color:var(--violet);width:16px;height:16px;vertical-align:-3px;margin-right:6px}
.sb-rng{width:100%;accent-color:var(--violet);margin:-2px 0 4px}
.sb-col{width:40px;height:26px;border:1px solid var(--line2);border-radius:6px;background:none;padding:0;cursor:pointer}
.step{display:flex;align-items:center;gap:10px}
.sel.sm{min-height:32px;padding:4px 8px;font-size:13px}
.sb-tl{padding:8px 10px;display:flex;flex-direction:column;gap:6px;flex:0 0 auto}
.sb-tlh{display:flex;align-items:center;gap:8px}
.sb-track{position:relative;height:46px;overflow-x:auto;overflow-y:hidden;background:rgba(0,0,0,.3);border-radius:10px;cursor:pointer}
.sb-lane{position:relative;height:100%;margin:0 8px}
.sb-ph{position:absolute;top:0;bottom:0;width:2px;background:var(--spark);margin-left:8px;pointer-events:none;box-shadow:0 0 8px var(--spark)}
.wchip{position:absolute;top:8px;height:30px;border-radius:7px;background:rgba(91,43,255,.35);border:1px solid rgba(201,184,255,.35);color:#fff;font-size:12px;display:flex;align-items:center;overflow:hidden;box-sizing:border-box;cursor:text}
.wchip.alt{background:rgba(255,79,216,.22);border-color:rgba(255,79,216,.35)}
.wchip.on{background:var(--violet);border-color:#fff}
.wchip span{flex:1 1 auto;padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.wchip .eg{flex:0 0 5px;align-self:stretch;cursor:ew-resize;background:rgba(255,255,255,.25)}
.wedit{width:100%;min-width:60px;background:#fff;color:#000;border:0;font-size:12px;padding:2px 4px;border-radius:4px}
.sb-foot{display:flex;align-items:center;gap:10px}
.sb-renders{padding:16px;display:flex;flex-direction:column;gap:12px;overflow:auto;min-height:0}
.row-item.col{flex-direction:column;align-items:stretch;gap:8px}
.row-item.col video{width:100%;border-radius:10px;background:#000;max-height:260px}
.rr{display:flex;align-items:center;gap:8px}
.ell{font-size:12px;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:1200px){.sb{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.sb-renders{grid-column:1/-1}}
@media (max-width:820px){.sb{grid-template-columns:1fr}.sb-video .drop{min-height:50vh}}
.sb-menu.pop{bottom:auto;left:auto}
.sb-mi .opt{color:var(--text);padding:9px 10px;font-size:14px}
.sb-mi .opt:hover:not(:disabled){background:rgba(91,43,255,.18)}
.caphost{position:absolute;inset:0}
.main.fit #body{min-height:0}
.sb{height:100%;grid-template-rows:minmax(0,1fr)}
.sb-ed{overflow:hidden}
/* меню профиля */
.me-wrap{position:relative}
.me-menu{position:absolute;left:54px;bottom:0;z-index:60;width:250px;padding:14px;display:flex;flex-direction:column;gap:10px;background:#120F33;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.me-head{display:flex;align-items:center;gap:10px}
.avatar.sm{width:34px;height:34px;flex:0 0 auto;cursor:default;font-size:14px}
.me-menu .seg{display:grid;grid-template-columns:1fr 1fr}
.me-menu #logout{justify-content:center}
.side{z-index:50}
.tgbtn{background:#2AABEE;box-shadow:0 10px 30px rgba(42,171,238,.35);justify-content:center;width:100%;box-sizing:border-box}
.tgwait{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
/* заявки на доступ */
.req-panel{position:relative;padding:16px 18px;display:flex;flex-direction:column;gap:10px;border-color:rgba(201,184,255,.4)}
.req{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;border-radius:12px;background:rgba(7,6,26,.5);border:1px solid rgba(201,184,255,.1);margin-top:6px}
.req-who{display:flex;flex-direction:column;flex:1 1 220px;min-width:0;font-size:14px}
.req-who .dim{font-size:12px}
.badge{background:var(--spark);color:#fff;border-radius:999px;padding:1px 8px;font-size:12px;font-weight:700}
/* история в статистике */
.hist{padding:18px;display:flex;flex-direction:column;gap:14px}
.hist-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ht{position:relative;aspect-ratio:1/1;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#0b0a1c;padding:0;cursor:pointer;color:var(--text);text-align:left}
.ht:hover{border-color:rgba(201,184,255,.55)}
.ht img,.ht video{width:100%;height:100%;object-fit:cover;display:block}
.ht-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);width:38px;height:38px;border-radius:50%;background:rgba(7,6,26,.65);display:flex;align-items:center;justify-content:center;font-size:13px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ht-text{padding:12px;font-size:12px;line-height:1.45;color:#D9D3F5;height:100%;box-sizing:border-box;overflow:hidden}
.ht-meta{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:6px;padding:18px 8px 7px;font-size:11px;background:linear-gradient(transparent,rgba(5,4,18,.85))}
.ht-k{font-family:'JetBrains Mono',monospace;letter-spacing:.06em;color:var(--lilac)}
.ht-who{max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
tr.pick{cursor:pointer}tr.pick:hover td{background:rgba(91,43,255,.08)}tr.sel td{background:rgba(91,43,255,.16)}
.hm{display:flex;gap:18px;width:100%;height:100%;max-width:1500px;align-items:center;justify-content:center}
.hm-media{max-width:calc(100% - 340px);max-height:calc(100vh - 56px);border-radius:16px;object-fit:contain;background:#000}
.hm-text{max-width:700px;padding:20px;white-space:pre-wrap;line-height:1.5}
.hm-side{flex:0 0 300px;display:flex;flex-direction:column;gap:10px;padding:18px;max-height:calc(100vh - 56px);overflow:auto}
@media (max-width:900px){.hm{flex-direction:column;overflow:auto}.hm-media{max-width:100%}.hm-side{flex:0 0 auto}}
.keychip{gap:7px}
.keychip b{color:var(--text);font-size:15px}
.keychip b.zero{color:var(--err)}
.keychip .kplus{margin-left:2px;color:var(--muted);font-weight:700}
.keyadd{display:flex;align-items:center;gap:10px;padding:14px;width:min(560px,100%)}
.keyadd .inp{flex:1 1 auto;min-width:0}
.keyadd-ico{color:var(--lilac);display:flex}
/* раскрывающаяся группа «Утилиты» в боковом меню */
.navgrp{display:flex;flex-direction:column;align-items:center}
.navsub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease, opacity .2s ease;opacity:0}
.navsub>div{overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:0;transition:padding .28s ease}
.navgrp.open .navsub{grid-template-rows:1fr;opacity:1}
.navgrp.open .navsub>div{padding-top:8px;overflow:visible}
.nav.sub{width:40px;height:40px;border-radius:12px;background:rgba(201,184,255,.04)}
.nav.sub.on{background:rgba(91,43,255,.22)}
/* ✕ удалить задачу с ошибкой */
.jdel{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:8px;border:1px solid rgba(201,184,255,.3);background:rgba(16,14,42,.85);color:var(--muted);cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;z-index:3}
.jdel:hover{color:#fff;background:var(--err);border-color:var(--err)}
.row-item{position:relative}
.row-item .jdel{position:absolute}
.jdel.inline{position:static}