:root{
  --bg:#0e0f13; --panel:#15171d; --panel2:#1b1e26; --line:#262a33;
  --txt:#e9eaee; --mut:#8b93a3; --accent:#2b6cff; --hi:#ffe14d; --danger:#ff4d5e;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:system-ui,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--txt);
  -webkit-tap-highlight-color:transparent}
button{font-family:inherit}
.btn{background:var(--accent);color:#fff;border:0;padding:10px 16px;border-radius:9px;
  font-size:14px;font-weight:600;cursor:pointer}
.btn:hover{filter:brightness(1.1)}
.btn.sec{background:var(--panel2);color:var(--txt);border:1px solid var(--line)}
.btn.ghost{background:transparent;color:var(--mut);border:1px solid var(--line)}
.btn.danger{background:transparent;color:var(--danger);border:1px solid #402}
.btn:disabled{opacity:.5;cursor:default}
input,select{background:var(--panel2);border:1px solid var(--line);color:var(--txt);
  padding:10px 12px;border-radius:8px;font-size:14px;width:100%}
label.fld{display:block;margin:10px 0}
label.fld span{display:block;font-size:12px;color:var(--mut);margin-bottom:5px}

/* ---- Centrinės formos (login/setup) ---- */
.center{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px;
  width:100%;max-width:380px}
.card h1{font-size:20px;margin:0 0 4px}
.card p.sub{color:var(--mut);font-size:13px;margin:0 0 18px}
.err{color:var(--danger);font-size:13px;margin-top:10px;min-height:16px}

/* ---- Topbar ---- */
.topbar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--panel);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.topbar .logo{font-weight:700;font-size:16px}
.topbar .sp{flex:1}
.topbar .name{font-size:14px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40vw}

/* ---- Projektų sąrašas ---- */
.wrap{max-width:1100px;margin:0 auto;padding:18px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:16px}
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;cursor:pointer;
  position:relative}
.pcard:hover{border-color:#37507e}
.pcard h3{margin:0 0 6px;font-size:15px}
.pcard .meta{font-size:12px;color:var(--mut)}
.pcard .badges{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}
.badge{font-size:11px;padding:2px 8px;border-radius:20px;background:var(--panel2);color:var(--mut)}
.badge.ok{color:#7ee081;background:#132a16}
.pcard .del{position:absolute;top:10px;right:10px;background:transparent;border:0;color:var(--mut);
  cursor:pointer;font-size:16px;padding:4px}
.newcard{display:flex;align-items:center;justify-content:center;border:1.5px dashed var(--line);
  color:var(--mut);font-weight:600;min-height:110px}

/* ---- Redaktorius ---- */
.editor{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.85fr);gap:14px;
  max-width:1400px;margin:0 auto;padding:14px}
@media(max-width:920px){ .editor{grid-template-columns:1fr} }
.stage{position:relative;background:#000;border-radius:12px;overflow:hidden}
.stage video{width:100%;display:block;max-height:60vh;margin:0 auto}
#capOverlay{position:absolute;left:0;right:0;text-align:center;padding:0 6%;pointer-events:none}
#capOverlay span{font-weight:800;color:#fff;padding:0 3px;display:inline-block;
  text-shadow:0 2px 6px rgba(0,0,0,.9),0 0 2px #000;line-height:1.25}
#capOverlay span.on{color:var(--hi);transform:scale(1.1)}

.pctrl{display:flex;align-items:center;gap:10px;padding:8px 4px}
.pctrl .t{font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums}
.iconbtn{background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:8px;
  width:38px;height:34px;cursor:pointer;font-size:14px}

/* timeline */
.timeline{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px;margin-top:8px}
.track{position:relative;height:34px;background:var(--panel2);border-radius:6px;overflow:hidden;cursor:pointer}
.track .seg{position:absolute;top:3px;bottom:3px;background:#26406e;border:1px solid #3a5fa0;border-radius:4px;
  font-size:10px;color:#cfe;overflow:hidden;white-space:nowrap;padding:2px 4px}
.track .play{position:absolute;top:0;bottom:0;width:2px;background:var(--hi);pointer-events:none}
.track .trim{position:absolute;top:0;bottom:0;background:rgba(255,225,77,.10);border-left:2px solid var(--hi);
  border-right:2px solid var(--hi)}
.tl-row{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.tl-row small{color:var(--mut);font-size:11px}

/* dešinė panelė */
.side{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;max-height:calc(100dvh - 90px)}
.tabs{display:flex;border-bottom:1px solid var(--line)}
.tabs button{flex:1;background:transparent;border:0;color:var(--mut);padding:12px;cursor:pointer;font-weight:600;font-size:13px}
.tabs button.on{color:var(--txt);box-shadow:inset 0 -2px 0 var(--accent)}
.tabpane{padding:12px;overflow:auto}

/* captionų sąrašas */
.line{display:flex;gap:8px;padding:7px 6px;border-radius:8px}
.line.cur{background:var(--panel2)}
.line .pl{flex:0 0 auto;background:var(--panel2);border:1px solid var(--line);color:var(--mut);
  border-radius:6px;width:26px;height:26px;cursor:pointer;font-size:11px;margin-top:2px}
.line .ws{flex:1;line-height:1.85}
.w{padding:1px 3px;border-radius:5px;outline:none;cursor:text}
.w:hover{background:var(--panel2)}
.w.on{background:var(--hi);color:#111;font-weight:700}
.w:focus{box-shadow:0 0 0 2px var(--accent) inset}
.tline{color:var(--mut);font-size:11px;margin-right:6px;font-variant-numeric:tabular-nums}

.empty{color:var(--mut);text-align:center;padding:30px 10px;font-size:14px}
.row2{display:flex;gap:8px}
.row2>*{flex:1}
.color{display:flex;align-items:center;gap:8px}
.color input[type=color]{width:42px;height:34px;padding:2px;border-radius:6px}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#222630;
  border:1px solid var(--line);padding:10px 16px;border-radius:10px;font-size:13px;z-index:50;opacity:0;
  transition:opacity .2s;pointer-events:none}
.toast.show{opacity:1}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--mut);border-top-color:var(--txt);
  border-radius:50%;animation:sp 0.7s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ================= v2 redaktorius ================= */
.ed{max-width:1400px;margin:0 auto;padding:12px;display:grid;gap:12px;
  grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"stage insp" "transport insp" "timeline insp";}
@media(max-width:900px){.ed{grid-template-columns:minmax(0,1fr);grid-template-areas:"stage" "transport" "timeline" "insp";gap:8px;padding:8px}}
.ed>*{min-width:0}
.tl2{min-width:0;max-width:100%}
.tlscroll{max-width:100%}
.stage2{grid-area:stage;position:relative;background:#000;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:200px}
.media{position:relative;aspect-ratio:9/16;height:58vh;max-height:58vh;max-width:100%;margin:0 auto;background:#000}
.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .12s}
.media audio{display:none}
.ov{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.capbox{position:absolute;left:0;right:0;text-align:center;padding:0 6%}
.capbox span{font-weight:800;color:#fff;display:inline;padding:0;text-shadow:0 2px 6px rgba(0,0,0,.9),0 0 2px #000}
.txov{position:absolute;transform:translate(-50%,-50%);white-space:pre;text-shadow:0 2px 6px rgba(0,0,0,.9),0 0 2px #000;text-align:center}
.transport{grid-area:transport;display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.transport .t{font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums}

.tl2{grid-area:timeline;position:relative;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px}
.tltoolbar{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.tlbtn{min-width:32px;height:30px;padding:0 8px;background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:7px;cursor:pointer;font-size:14px}
.tlbtn:hover{border-color:#37507e}
.tlscroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.tlcontent{position:relative}
.trk{display:flex;align-items:stretch;gap:0;margin:4px 0;min-height:36px}
.rrow{min-height:20px;margin:0 0 2px}
.trklab{position:sticky;left:0;z-index:5;display:flex;align-items:center;justify-content:center;color:var(--mut);font-size:13px;background:var(--panel);border-radius:5px}
.trkbody{position:relative;background:var(--panel2);border-radius:5px;min-height:36px;flex:none}
.rulerbody{min-height:18px;background:transparent}
.tick{position:absolute;top:0;bottom:0;font-size:9px;color:var(--mut);border-left:1px solid #2c313c;padding-left:3px;padding-top:2px;pointer-events:none;white-space:nowrap}
.blk{position:absolute;top:3px;bottom:3px;border-radius:5px;font-size:10px;color:#dfe6ff;overflow:hidden;white-space:nowrap;cursor:grab;border:1px solid transparent;touch-action:none}
.blk .blklbl{display:inline-block;padding:3px 6px;pointer-events:none}
.blk.vid{background:#26406e;border-color:#3a5fa0}
.blk.aud{background:#2a5e3a;border-color:#3f8f57}
.blk.txt{background:#5e3a6e;border-color:#8f57a0}
.blk.sel{outline:2px solid var(--hi);z-index:3}
.blk .tflag{position:absolute;left:2px;top:2px;color:var(--hi);font-size:11px;pointer-events:none}
.trim{position:absolute;top:0;bottom:0;width:12px;background:var(--hi);cursor:ew-resize;z-index:6;display:flex;align-items:center;justify-content:center}
.trim::after{content:'';width:2px;height:40%;background:rgba(0,0,0,.5);border-radius:1px}
.trim.l{left:0;border-radius:5px 0 0 5px}
.trim.r{right:0;border-radius:0 5px 5px 0}
.ph2{position:absolute;top:0;bottom:0;width:2px;background:var(--hi);z-index:7;pointer-events:none;box-shadow:0 0 5px var(--hi)}
.ph2::before{content:'';position:absolute;top:0;left:-4px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid var(--hi)}

.insp{grid-area:insp;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;
  overflow:auto;max-height:calc(100dvh - 80px)}
.ihead{font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;margin:14px 0 6px;font-weight:700}
.ihead:first-child{margin-top:0}
.caplist{max-height:34vh;overflow:auto}
.cline{display:flex;gap:6px;padding:5px 4px;border-radius:6px}
.cline .pl{flex:0 0 auto;background:var(--panel2);border:1px solid var(--line);color:var(--mut);border-radius:5px;width:24px;height:24px;cursor:pointer;font-size:10px}
.cline .ws{flex:1;line-height:1.8;font-size:13px}
.cline .w{padding:1px 3px;border-radius:4px;outline:none}
.cline .w:hover{background:var(--panel2)}
.cline .w:focus{box-shadow:0 0 0 2px var(--accent) inset}

/* ---- captionų šriftai (tie patys kaip serveryje) ---- */
@font-face{font-family:'capSans';src:url('fonts/sans.ttf');font-display:swap}
@font-face{font-family:'capSerif';src:url('fonts/serif.ttf');font-display:swap}
@font-face{font-family:'capDejavu';src:url('fonts/dejavu.ttf');font-display:swap}
.capbox span{font-weight:inherit;color:#fff;display:inline;padding:0;text-shadow:0 1px 3px rgba(0,0,0,.55);line-height:1.2}
.capbox span.on{}
.txov{font-family:'capSans'}

/* ---- inspektoriaus kortelės ---- */
.insptabs{display:flex;gap:4px;margin:-2px 0 12px;flex-wrap:wrap}
.itab{background:var(--panel2);border:1px solid var(--line);color:var(--mut);padding:7px 11px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:600}
.itab.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.inspane{}

/* ================= MOBILE patogumas ================= */
@media(max-width:900px){
  .topbar{padding:10px 12px}
  .stage2{min-height:0}
  .media{height:42vh;max-height:42vh}
  .transport{flex-wrap:wrap;gap:8px;padding:8px}
  .transport .t{order:3;width:100%;text-align:center}
  .iconbtn{width:46px;height:42px;font-size:16px}
  .transport .btn,.transport .btn.sec{padding:11px 14px;font-size:14px}
  /* laiko juosta – patogi pirštui */
  .tl2{padding:8px 6px}
  .tltoolbar{gap:5px}
  .tlbtn{min-width:42px;height:40px;font-size:16px}
  .tlscroll{touch-action:pan-x;padding-bottom:4px}
  .trk{min-height:48px;margin:5px 0}
  .trkbody{min-height:48px}
  .rrow,.rulerbody{min-height:22px}
  .trklab{font-size:16px}
  .blk{font-size:12px}
  .blk .blklbl{padding:5px 7px}
  .trim{width:22px}
  .ph2{width:3px}
  .ph2::before{border-left:7px solid transparent;border-right:7px solid transparent;border-top:9px solid var(--hi);left:-6px}
  .tick{font-size:10px}
  /* inspektorius – natūralus aukštis, lipnios kortelės, didesni valdikliai */
  .insp{max-height:none;overflow:visible;border-radius:14px;padding:10px 12px 40px}
  .insptabs{position:sticky;top:0;background:var(--panel);margin:0 -12px 10px;padding:8px 12px;z-index:6;border-bottom:1px solid var(--line);gap:6px}
  .itab{padding:10px 14px;font-size:13px;flex:1;text-align:center}
  label.fld{margin:14px 0}
  label.fld span{font-size:13px}
  input,select{padding:12px;font-size:15px}
  input[type=range]{height:34px}
  input[type=color]{height:44px}
  .btn,.btn.sec,.btn.ghost,.btn.danger{padding:13px 16px;font-size:15px}
  .cline{padding:9px 6px}
  .cline .ws{font-size:15px;line-height:2}
  .cline .pl{width:30px;height:30px}
}
/* didesnės trim rankenėlės liečiamuose ekranuose */
@media(pointer:coarse){ .trim{width:22px} .blk .blklbl{padding:5px 7px} }

/* greičio valdiklis */
.spdgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:2px 0 8px}
.spdbtn{padding:9px 0;background:var(--panel2);border:1px solid var(--line);color:var(--txt);border-radius:7px;cursor:pointer;font-size:13px}
.spdbtn:hover{border-color:#37507e}
.spdbtn.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
@media(max-width:900px){.spdbtn{padding:12px 0;font-size:14px}}

/* ================= CapCut tipo mobile: apatinė juosta + bottom sheet ================= */
.mobar{display:none}
.msheet{display:none}
@media(max-width:900px){
  .insp{display:none}
  .insptabs{display:none}
  .ed{padding-bottom:72px}
  .mobar{display:flex;position:fixed;left:0;right:0;bottom:0;height:62px;background:var(--panel);
    border-top:1px solid var(--line);overflow-x:auto;z-index:40;gap:0;
    padding:4px 2px calc(4px + env(safe-area-inset-bottom));align-items:stretch;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .mobar::-webkit-scrollbar{display:none}
  .moitem{flex:1 0 auto;min-width:50px;max-width:74px;background:transparent;border:0;color:var(--txt);display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:2px;cursor:pointer;border-radius:8px;padding:2px 3px}
  .moitem:active{background:var(--panel2)}
  .moico{font-size:17px;line-height:1}
  .molbl{font-size:9.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70px}
  .msheet{display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:62px;z-index:39;
    background:var(--panel);border-top:1px solid var(--line);border-radius:14px 14px 0 0;max-height:34vh;
    transform:translateY(130%);transition:transform .22s ease;box-shadow:0 -8px 24px rgba(0,0,0,.45)}
  .msheet.open{transform:translateY(0)}
  .msheet-hd{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;border-bottom:1px solid var(--line)}
  .msheet-title{font-weight:700;font-size:13px}
  .msheet-x{background:var(--accent);color:#fff;border:0;padding:6px 13px;border-radius:7px;font-weight:700;cursor:pointer;font-size:13px}
  .msheet-body{padding:8px 12px calc(12px + env(safe-area-inset-bottom));overflow:auto}
  .msheet-body .ihead:first-child{margin-top:0}
}

/* potemių "Atgal" mygtukas */
@media(max-width:900px){
  .moback{border-right:1px solid var(--line);border-radius:0;margin-right:4px;padding-right:10px}
  .moback .moico{color:var(--hi);font-size:24px}
}

/* kai atidarytas sheet – video susitraukia ir lieka matomas */
@media(max-width:900px){
  body.sheet-open .media{height:48vh;max-height:48vh}
  body.sheet-open .tl2{display:none}
  body.sheet-open .transport{display:none}
  .moback{padding-right:6px;margin-right:2px}
}

/* kompaktiški valdikliai bottom sheet'e – kad užimtų mažai vietos */
@media(max-width:900px){
  .msheet-body label.fld{margin:7px 0}
  .msheet-body label.fld span{font-size:11px;margin-bottom:3px}
  .msheet-body input,.msheet-body select{padding:8px 10px;font-size:13px}
  .msheet-body input[type=range]{height:26px;padding:0}
  .msheet-body input[type=color]{height:36px;padding:2px}
  .msheet-body .btn,.msheet-body .btn.sec,.msheet-body .btn.ghost,.msheet-body .btn.danger{padding:9px 12px;font-size:13px}
  .msheet-body .spdbtn{padding:8px 0;font-size:12px}
  .msheet-body .ihead{margin:9px 0 4px;font-size:11px}
  .msheet-body .empty{padding:8px 6px;font-size:11px}
  .msheet-body .cline{padding:5px 4px}
  .msheet-body .cline .ws{font-size:13px;line-height:1.7}
  .msheet-body .row2{gap:6px}
}

/* įkėlimo progreso juosta */
.upbar{position:fixed;top:0;left:0;right:0;height:34px;background:var(--panel2);z-index:70;
  border-bottom:1px solid var(--line);overflow:hidden}
.upbar-fill{position:absolute;top:0;left:0;bottom:0;width:0%;background:var(--accent);opacity:.35;transition:width .2s}
.upbar-txt{position:relative;display:flex;align-items:center;justify-content:center;height:100%;
  font-size:12.5px;font-weight:600;color:var(--txt)}

/* kirpimui pažymėti žodžiai */
.w.cutw{text-decoration:line-through;background:#43141c;color:#ff8f9c;border-radius:4px;padding:1px 3px}