/* Titro Studio — the web surface. Same palette and type as titroshqip.com so the
   two don't feel like different products; app chrome rather than landing-page
   chrome (denser, work-first). */
:root{
  /* Same language as titroshqip.com: one typeface, one accent, hairlines
     instead of shadows. Coral is gone — black carries the actions, amber is
     reserved for what Titro actually does to a word. */
  --bg:#F7F7F8; --card:#FFFFFF; --ink:#0A0A0A; --t2:#5A5A5A; --t3:#8E8E8E;
  --line:#E8E8E8; --line2:#D8D8D8;
  --amber:#FFD400; --cyan:#00C2D4; --good:#0B6B44; --bad:#B00020;
  /* Restored: the redesign note above says "coral is gone", but .playhead, links
     and focus rings still paint with var(--coral) — an UNDEFINED variable, i.e.
     transparent. The playhead has been moving invisibly the whole time. Same
     pink as the app's playhead so the two editors read as one product. */
  --coral:#EE2B5B;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --r-sm:10px; --r:14px; --r-lg:20px;
  --sh-sm:0 1px 2px rgba(10,10,10,.04);
  --sh:0 8px 24px -12px rgba(10,10,10,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-size:16px;line-height:1.55;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--coral);font-weight:600}
.num{font-variant-numeric:tabular-nums}
[hidden]{display:none !important}

/* ---------- chrome ---------- */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  height:64px;padding:0 22px;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
.logo{display:inline-flex;align-items:center;font-size:22px;font-weight:800;letter-spacing:-.9px;text-decoration:none;color:var(--ink)}
.logo .logo-mark{width:26px;height:26px;display:block;margin-right:8px}
.logo em{color:var(--coral);font-style:normal}
.topbar-r{display:flex;align-items:center;gap:14px}
.meter{font-size:13px;font-weight:700;color:var(--t2);background:var(--bg);
  padding:7px 14px;border-radius:999px;white-space:nowrap}
.meter.low{background:#FFF1F3;color:var(--bad)}

.narrow{max-width:560px;margin:0 auto;padding:clamp(28px,5vw,56px) 22px 80px}
.wide{max-width:1180px;margin:0 auto;padding:clamp(24px,4vw,44px) 22px 80px}
.center{text-align:center}
h1{font-size:clamp(26px,4vw,38px);font-weight:800;letter-spacing:-.035em;line-height:1.1}
h2{font-size:20px;font-weight:800;letter-spacing:-.02em}
.sub{color:var(--t2);margin-top:8px}
.foot{margin-top:16px;font-size:13.5px;color:var(--t3);text-align:center}
.lbl{display:block;font-size:11.5px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--t3);margin:20px 0 9px}
.rowhead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin-bottom:22px}
.rowhead-btns{display:flex;gap:10px}

.card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh);padding:26px 24px;margin-top:22px}

/* ---------- controls ---------- */
/* Buttons size to their label. `width:100%` used to be baked into .btn, which
   is why "Projekt i ri" rendered as a full-width slab next to one small card —
   opt into that with .btn-block instead. */
.btn,.ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 22px;font:inherit;font-size:14.5px;font-weight:550;
  border:1px solid transparent;border-radius:999px;cursor:pointer;width:auto;
  transition:opacity .15s ease,background .15s ease,border-color .15s ease}
.btn{background:var(--ink);color:#fff}
.btn:hover:not(:disabled){opacity:.85}
.btn.danger{background:var(--bad)}
.ghost{background:var(--card);color:var(--ink);border-color:var(--line2)}
.ghost:hover:not(:disabled){background:var(--bg)}
.btn:disabled,.ghost:disabled{opacity:.4;cursor:not-allowed}
.btn-block{width:100%}
.ghost.sm,.btn.sm{min-height:36px;padding:0 15px;font-size:13.5px}

.field{display:block;margin-top:16px}
.field span{display:block;font-size:13.5px;font-weight:700;margin-bottom:7px}
.input{width:100%;height:52px;padding:0 16px;font:inherit;color:var(--ink);
  background:var(--bg);border:1.5px solid transparent;border-radius:var(--r-sm);outline:0}
.input:focus{border-color:var(--coral);background:var(--card);box-shadow:0 0 0 4px rgba(254,44,85,.12)}
form .btn{margin-top:22px}

.segbar{display:flex;gap:6px;background:var(--bg);padding:5px;border-radius:999px}
.segbar button{flex:1;min-height:40px;font:inherit;font-size:14px;font-weight:700;color:var(--t2);
  background:transparent;border:0;border-radius:999px;cursor:pointer}
.segbar button.on{background:var(--card);color:var(--ink);box-shadow:var(--sh-sm)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips button{font:inherit;font-size:13px;font-weight:700;color:var(--t2);background:var(--bg);
  border:0;border-radius:999px;padding:9px 15px;cursor:pointer}
.chips button.on{background:var(--ink);color:#fff}
.range{width:100%;accent-color:var(--coral)}
.swatches{display:flex;gap:9px}
.swatches button{width:34px;height:34px;border-radius:11px;border:2.5px solid transparent;cursor:pointer;
  box-shadow:var(--sh-sm)}
.swatches button.on{border-color:var(--ink)}
.check{display:flex;align-items:flex-start;gap:10px;margin-top:18px;font-size:14px;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--coral);flex:0 0 auto;margin-top:1px}
.check em{color:var(--t3);font-style:normal}

.msg{display:none;padding:14px 16px;border-radius:var(--r-sm);font-size:14.5px;margin-top:18px}
.msg.show{display:block}
.msg.err{background:#FFF1F3;color:var(--bad)}
.msg.ok{background:#EDFBF4;color:#0B6B44}

/* ---------- upload ---------- */
.drop{display:flex;flex-direction:column;align-items:center;gap:5px;padding:34px 18px;cursor:pointer;
  text-align:center;border:1.8px dashed var(--line2);border-radius:var(--r);background:var(--bg)}
.drop:hover,.drop.over{border-color:var(--coral);background:#FFF6F8}
.drop-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;margin-bottom:6px;
  background:rgba(254,44,85,.1);color:var(--coral);font-size:26px;font-weight:700}
.drop-t{font-size:16px;font-weight:750}
.drop-s{font-size:13px;color:var(--t2)}
.prog{display:flex;align-items:center;gap:12px;margin-top:18px}
.prog-bar{flex:1;height:8px;border-radius:99px;background:var(--bg);overflow:hidden}
.prog-bar i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--coral),#FF6A45);transition:width .2s ease}
.prog-n{font-size:13.5px;font-weight:750;min-width:44px;text-align:right}

/* ---------- steps ---------- */
.steps{list-style:none;display:flex;flex-direction:column;gap:9px;text-align:left}
.steps li{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--r);
  background:var(--bg);font-size:14.5px;font-weight:650}
.steps b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;flex:0 0 auto;
  background:var(--line);color:#fff;font-size:13px}
.steps li.done b{background:var(--good)}
.steps li.now{background:var(--card);box-shadow:var(--sh-sm)}
.steps li.now b{background:var(--cyan)}
.steps li.wait{opacity:.45}
.steps li.err b{background:var(--bad)}

/* ---------- projects ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.proj{text-align:left;font:inherit;color:inherit;cursor:pointer;padding:0;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:border-color .16s ease,box-shadow .16s ease}
.proj:hover{border-color:var(--line2);box-shadow:var(--sh)}
/* These are <span>s inside a <button> (a button may not contain block-level
   elements). Inline boxes ignore padding for layout purposes, so the card text
   escaped to the card's left edge until they were made blocks. */
.proj{display:block}
.proj-top{display:grid;aspect-ratio:16/10;background:#111116;position:relative;
  overflow:hidden;place-items:center}
.proj-top img{width:100%;height:100%;object-fit:cover}
.proj-top .ph{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.4)}
.proj-top .dur{position:absolute;right:9px;bottom:9px;font-family:var(--mono);font-size:10.5px;
  color:#fff;background:rgba(0,0,0,.55);padding:2px 7px;border-radius:5px;backdrop-filter:blur(4px)}
.proj-b{display:block;padding:14px 15px 16px}
.proj-b h3{font-size:14.5px;font-weight:600;letter-spacing:-.012em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj-b p{font-family:var(--mono);font-size:11px;color:var(--t3);margin-top:5px}
.pill{display:inline-block;font-family:var(--mono);font-size:10.5px;padding:3px 9px;
  border-radius:999px;background:var(--bg);color:var(--t2);margin-top:10px;border:1px solid var(--line)}
.pill.ok{background:#F2FBF6;color:var(--good);border-color:#CDE9DA}
.pill.work{background:#F0FBFC;color:#00707C;border-color:#C7E9ED}
.pill.err{background:#FFF5F6;color:var(--bad);border-color:#F3D3D8}

/* "new project" is the first tile — the same shape as the work it sits beside */
.proj.new{background:transparent;border-style:dashed;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;min-height:190px}
.proj.new:hover{border-color:var(--ink);background:var(--card)}
.proj.new .plus{width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-size:20px;line-height:1}
.proj.new span{font-size:14px;font-weight:550}
.proj.new em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--t3)}

.empty{grid-column:1/-1;text-align:center;padding:56px 20px;color:var(--t2);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg)}

/* ---------- export: video left, everything else inline right ---------- */
.exwrap{max-width:920px;margin:0 auto;padding:clamp(28px,5vw,56px) 22px 80px}
.ex-cols{display:flex;gap:24px;align-items:flex-start}
/* the video is a PREVIEW, not the page: a portrait phone clip is capped by
   height, a landscape one by column width; fullscreen is what the control bar
   is for. Without these caps the raw element rendered at source size and a
   1080x1920 export swallowed the whole screen. */
.ex-video{flex:0 1 340px;min-width:220px}
.ex-video video{display:block;width:100%;max-height:62vh;background:#000;
  border-radius:14px;object-fit:contain}
.ex-panel{flex:1;min-width:280px}
@media (max-width:720px){
  .ex-cols{flex-direction:column;align-items:stretch}
  .ex-video{flex:none;max-width:340px;margin:0 auto}
}

/* ---------- editor: rail + panel + stage + timeline ---------- */
/* Full-viewport app chrome. The page itself must never scroll here — only the
   panel and the timeline do, independently. */
.ed{position:fixed;inset:64px 0 0;display:flex;flex-direction:column;background:var(--bg)}
.ed-top{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--card);
  border-bottom:1px solid var(--line);flex:0 0 auto}
.ed-name{font:inherit;font-size:15px;font-weight:750;color:var(--ink);background:transparent;
  border:1.5px solid transparent;border-radius:9px;padding:6px 10px;min-width:160px;max-width:320px;outline:0}
.ed-name:hover{border-color:var(--line)}
.ed-name:focus{border-color:var(--coral);background:var(--bg)}
.ed-meta{font-size:12.5px;color:var(--t3);white-space:nowrap}
.grow{flex:1}
.icn{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 11px;font:inherit;
  font-size:15px;font-weight:700;color:var(--t2);background:transparent;border:0;border-radius:10px;cursor:pointer}
.icn em{font-style:normal;font-size:12.5px}
.icn:hover:not(:disabled){background:var(--bg);color:var(--ink)}
.icn:disabled{opacity:.3;cursor:default}

.ed-body{flex:1;min-height:0;display:flex}

/* tool rail */
.rail{flex:0 0 78px;background:var(--card);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:10px 0;gap:2px;overflow-y:auto}
.rail button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 4px;
  font:inherit;font-size:10.5px;font-weight:700;color:var(--t3);background:transparent;border:0;
  cursor:pointer;border-left:3px solid transparent}
.rail button span{font-size:19px;line-height:1}
.rail button:hover{color:var(--ink)}
.rail button.on{color:var(--coral);border-left-color:var(--coral);background:rgba(254,44,85,.05)}

/* panel */
.panel{flex:0 0 292px;background:var(--card);border-right:1px solid var(--line);
  overflow-y:auto;padding:18px}
.panel h3{font-size:15px;font-weight:800;letter-spacing:-.02em;margin-bottom:4px}
.panel .hint{font-size:12.5px;color:var(--t3);line-height:1.5;margin-bottom:16px}
.panel .lbl{margin-top:18px}
.panel .lbl:first-of-type{margin-top:0}
@media(max-width:900px){.panel{display:none}}

/* seg list inside the panel */
.seglist{list-style:none;display:flex;flex-direction:column;gap:4px}
.seglist li{display:flex;gap:9px;padding:9px 10px;border-radius:12px;cursor:pointer;
  border:1.5px solid transparent}
.seglist li:hover{background:var(--bg)}
.seglist li.on{background:#FFF9DB;border-color:var(--amber)}
.seglist .t{font-size:11px;font-weight:750;color:var(--t3);min-width:38px;padding-top:4px}
.seglist .x{flex:1;font:inherit;font-size:13.5px;color:var(--ink);background:transparent;border:0;
  resize:none;outline:0;line-height:1.4;overflow:hidden}

/* Caption faces — the same four files the app bundles and the server image bakes
   in, so the preview, the phone and the burn are the identical typeface. Declared
   as a 100–900 range because each family here has exactly ONE face: that stops the
   browser synthesising a bolder version of a file libass will draw as-is.
   Nothing downloads until a caption is actually set in that family. */
/* >>> caption-fonts: GENERATED by style/gen.py — do not edit by hand */
@font-face{font-family:'Montserrat';src:url('fonts/Montserrat-ExtraBold.ttf') format('truetype');
  font-weight:100 900;font-display:swap}
@font-face{font-family:'Anton';src:url('fonts/Anton-Regular.ttf') format('truetype');
  font-weight:100 900;font-display:swap}
@font-face{font-family:'Bebas Neue';src:url('fonts/BebasNeue-Regular.ttf') format('truetype');
  font-weight:100 900;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-Bold.ttf') format('truetype');
  font-weight:100 900;font-display:swap}
@font-face{font-family:'Titro Serif';src:url('fonts/TitroSerif-SemiBold.ttf') format('truetype');
  font-weight:100 900;font-display:swap}
@font-face{font-family:'Great Vibes';src:url('fonts/GreatVibes-Regular.ttf') format('truetype');
  font-weight:100 900;font-display:swap}
/* <<< caption-fonts */

.msg .msg-act{display:inline-block;margin-left:8px;font:inherit;font-weight:700;color:inherit;
  background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}
.msg .msg-act:disabled{opacity:.6;cursor:default;text-decoration:none}

/* stage */
.stagecol{flex:1;min-width:0;display:flex;flex-direction:column}
.canvaswrap{flex:1;min-height:0;display:grid;place-items:center;padding:20px;overflow:hidden}
.aspect{font:inherit;font-size:12.5px;font-weight:650;color:var(--t2);background:var(--bg);
  border:0;border-radius:9px;padding:8px 10px;cursor:pointer}
/* aspect-ratio is set from the SOURCE at runtime — see applyAspect() */
.canvas{position:relative;max-width:100%;max-height:100%;background:#0B0B10;
  border-radius:14px;overflow:hidden;box-shadow:var(--sh);display:grid;place-items:center}
.canvas video{width:100%;height:100%;object-fit:contain;background:#0B0B10;display:block}
.capwrap{position:absolute;inset:0;display:flex;justify-content:center;pointer-events:none;padding:5%}
.capwrap[data-pos="top"]{align-items:flex-start}
.capwrap[data-pos="middle"]{align-items:center}
.capwrap[data-pos="bottom"]{align-items:flex-end}
/* A dragged caption carries its own centre, so the flex box stops deciding for it.
   translate(-50%,-50%) makes left/top mean the CENTRE — the same thing \an5\pos()
   means in the burn, which is what keeps the drag honest. */
.capwrap.placed{display:block;padding:0}
.capwrap.placed .cap{position:absolute;transform:translate(-50%,-50%)}
.cap{font-weight:800;line-height:1.2;text-align:center;color:#fff;max-width:90%;
  text-shadow:0 2px 10px rgba(0,0,0,.7),0 0 3px rgba(0,0,0,.9);
  pointer-events:auto;cursor:grab;touch-action:none;user-select:none}
/* :empty already matched an emptied #cap, but it only killed pointer events —
   .cap.band kept painting its background and its .16em/.5em padding, so a
   caption with no words showed as a small empty box over the video. */
.cap:empty{display:none;pointer-events:none}
.cap.dragging{cursor:grabbing;outline:2px dashed rgba(255,255,255,.65);outline-offset:7px;
  border-radius:5px}
.capbar{position:absolute;left:10px;top:10px;display:flex;gap:6px;z-index:4}
.capbar.low{top:auto;bottom:10px}
.capbar button{font:inherit;font-size:11.5px;font-weight:700;color:#fff;cursor:pointer;
  background:rgba(12,12,18,.72);border:1px solid rgba(255,255,255,.22);border-radius:999px;
  padding:6px 11px;backdrop-filter:blur(6px)}
.capbar button:hover{background:rgba(12,12,18,.9)}
.cap.upper{text-transform:uppercase}
.cap.band{background:rgba(0,0,0,.55);padding:.16em .5em;border-radius:9px}

/* transport */
.transport{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--card);
  border-top:1px solid var(--line);flex:0 0 auto}
.play{width:40px;height:40px;border:0;border-radius:50%;background:var(--ink);color:#fff;
  font-size:14px;cursor:pointer;flex:0 0 auto}
.tc{font-size:12.5px;font-weight:650;color:var(--t2);white-space:nowrap;min-width:132px;text-align:center}
.zoom{width:112px;accent-color:var(--coral)}

/* timeline */
.tlwrap{flex:0 0 auto;height:186px;overflow-x:auto;overflow-y:hidden;background:var(--card);
  /* dragging the timeline used to select the ruler's own text — the labels
     turned blue and the drag fought the selection. Nothing in here is text
     anyone needs to copy. */
  user-select:none;-webkit-user-select:none;
  border-top:1px solid var(--line);position:relative}
.tl{position:relative;height:100%;min-width:100%}
.tlwrap.panning{cursor:grabbing}
.icn.danger{color:var(--bad,#C8102E)}
.icn.danger:hover:not(:disabled){background:#FFF1F3;color:var(--bad,#C8102E)}
.ruler{position:sticky;top:0;height:26px;border-bottom:1px solid var(--lineSoft,#ECECF1);
  background:var(--card);z-index:3}
.ruler i{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.ruler b{position:absolute;top:6px;font-size:10.5px;font-weight:650;color:var(--t3);
  transform:translateX(4px);font-variant-numeric:tabular-nums}
.tracks{position:relative;padding:10px 0 0}
.track{position:relative;height:38px;margin:0 0 8px}
.track.vid{height:44px}
.vidfill{position:absolute;top:0;bottom:0;left:0;border-radius:8px;
  background:repeating-linear-gradient(90deg,#372F4E 0 22px,#2B2540 22px 44px);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}

/* clips */
.clip{position:absolute;top:0;bottom:0;border-radius:9px;display:flex;align-items:center;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  padding:0 16px;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;
  cursor:grab;user-select:none;box-shadow:0 4px 12px -6px rgba(20,18,40,.5)}
.clip:active{cursor:grabbing}
.clip.amber{background:linear-gradient(135deg,#FFD34D,#FFB300);color:#3A2A00}
.clip.cyan{background:linear-gradient(135deg,#56E5EC,#00C2D4);color:#003A40}
.track.acc{height:30px}
.clip.violet{background:linear-gradient(135deg,#C9A6FF,#9B6BFF);color:#2A1060}
/* the accent overlay is ALWAYS positioned (x/y or the table default) */
.cap2{position:absolute;transform:translate(-50%,-50%);text-transform:none}
.cap2:empty{display:none}
.clip.sel{outline:2.5px solid var(--ink);outline-offset:1px;z-index:2}
.clip .lbl-t{pointer-events:none;overflow:hidden;text-overflow:ellipsis}
.clip .h{position:absolute;top:0;bottom:0;width:13px;cursor:ew-resize;display:grid;place-items:center}
.clip .h::before{content:"";width:3px;height:15px;border-radius:2px;background:rgba(0,0,0,.35)}
.clip .h.l{left:0}.clip .h.r{right:0}

/* playhead */
.playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--coral);z-index:6;
  pointer-events:none}
.playhead i{position:absolute;top:0;left:-6px;width:14px;height:11px;border-radius:3px;
  background:var(--coral)}

/* ---------- dialog (replaces the browser's own) ---------- */
.sheet-back{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;
  background:rgba(15,15,20,.42);backdrop-filter:blur(3px)}
.sheet{background:var(--card);border-radius:var(--r-lg);box-shadow:0 30px 70px rgba(15,15,20,.3);
  padding:28px 26px;max-width:400px;width:100%}
.sheet p{color:var(--t2);margin-top:10px;font-size:15px}
.sheet-btns{display:flex;gap:10px;margin-top:24px}
.sheet-btns .btn,.sheet-btns .ghost{flex:1;width:auto}

/* signed-in email in the topbar — small, muted, and honest about which account
   this session belongs to */
.who { font-size: 12.5px; color: #7C7D8C; font-weight: 600; max-width: 210px;
       overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .who { display: none; } }

/* per-word highlight — mirrors render_captions.py build_line() modes */
.cap span{color:#fff}
.cap[data-mode="color"] span.on{color:var(--capHi,#FFD400)}
.cap[data-mode="fill"] span.said, .cap[data-mode="fill"] span.on{color:var(--capHi,#FFD400)}
.cap[data-mode="scale"] span.on{color:var(--capHi,#FFD400);font-size:1.12em}
.cap[data-mode="box"] span.on{background:var(--capHi,#FFD400);color:var(--capOn,#000);
  border-radius:.14em;padding:0 .18em;box-decoration-break:clone;-webkit-box-decoration-break:clone}