/* ClipPilot — clean light UI (white + ClipPilot blue) */
:root{
  --accent:#2563EB;          /* royal blue (primary) */
  --accent2:#4DA1FF;         /* sky blue */
  --accent3:#A7D4FF;         /* light blue */
  --grad:linear-gradient(135deg,#4DA1FF,#2563EB);
  --grad-soft:linear-gradient(135deg,#A7D4FF,#4DA1FF);
  --gold:#FFC400;            /* karaoke active-word fallback */
  --ink:#0B1220; --soft:#5b6b82; --faint:#93a1b5;
  --line:rgba(11,18,32,.08); --line2:rgba(11,18,32,.14);
  --panel:rgba(255,255,255,.7); --panel2:rgba(255,255,255,.92);
  --glass:rgba(255,255,255,.86); --glass-bd:rgba(11,18,32,.07);
  --bg:#F2F6FB;
  --good:#1fb866; --warn:#f59e0b; --danger:#ef4767;
  --r:14px; --r-lg:20px;
  --shadow:0 10px 30px rgba(37,99,235,.10);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font:14px/1.5 "Inter",-apple-system,"SF Pro Text",system-ui,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(760px 460px at 4% -16%, rgba(167,212,255,.32), transparent 62%),
    radial-gradient(680px 480px at 102% 4%, rgba(77,161,255,.12), transparent 58%),
    var(--bg);
  display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;
}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
input,select{font:inherit;color:var(--ink)}
.hidden{display:none !important}

/* ---------- top bar ---------- */
.topbar{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 22px;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px);
}
.brand-lockup{display:flex;align-items:center;gap:9px;cursor:pointer}
.topbar .logo{width:32px;height:32px;cursor:pointer;filter:drop-shadow(0 4px 9px rgba(37,99,235,.22))}
.topbar .wordmark{height:28px;width:auto;display:block;cursor:pointer}
.brand{font-weight:900;font-style:italic;letter-spacing:-.012em;font-size:22px;display:flex;cursor:pointer;line-height:1}
.brand .b1{color:var(--ink)}
.brand .b2{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.topbar-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.topbar-actions{display:flex;align-items:center;gap:10px}
.topbar .crumb{display:none}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:12px;
  background:var(--panel2);border:1px solid var(--line2);font-weight:600;transition:.15s;
}
.btn:hover{background:#fff;box-shadow:var(--shadow)}
.btn.primary{background:var(--grad);border:0;color:#fff;font-weight:800;box-shadow:0 10px 24px rgba(37,99,235,.32)}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent;border-color:var(--line)}
.btn.sm{padding:6px 11px;border-radius:10px;font-size:13px}
.btn:disabled{opacity:.5;cursor:default}

/* ---------- views ---------- */
.view{flex:1;min-height:0;display:none;flex-direction:column}
.view.active{display:flex}

/* ---------- studio ---------- */
#view-studio{align-items:center;justify-content:flex-start;overflow:auto;padding:40px 24px}
.studio-wrap{width:100%;max-width:880px;display:flex;flex-direction:column;gap:28px}
.hero{text-align:center;margin-top:6px;display:flex;flex-direction:column;align-items:center;gap:11px}
/* eyebrow pill — extra breathing room (padding + letter-spacing), per request */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:#41506a;background:#fff;border:1px solid var(--line2);
  padding:9px 20px;border-radius:999px;box-shadow:0 2px 10px rgba(37,99,235,.06)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--grad);box-shadow:0 0 0 3px rgba(37,99,235,.16)}
.eyebrow .spark{color:var(--accent2);flex:0 0 auto}
.topbar-center .eyebrow-top{box-shadow:0 4px 16px rgba(37,99,235,.08)}
/* home hero banner (ShortFlow lockup) — sits at the top of the studio home view */
.home-banner{align-self:center;width:100%;max-width:560px;height:auto;border-radius:20px;
  box-shadow:0 12px 34px rgba(37,99,235,.12),0 2px 8px rgba(20,30,60,.05)}
@media (max-width:600px){.home-banner{max-width:100%;border-radius:15px}}
.hero h1{font-size:33px;margin:0;font-weight:800;letter-spacing:-.022em;line-height:1.1}
.grad-ink{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--soft);margin:0;font-size:15px;max-width:48ch}
.drop{
  border:1.5px dashed var(--line2);border-radius:var(--r-lg);padding:34px 24px 28px;text-align:center;
  background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:var(--shadow);transition:.2s;display:flex;flex-direction:column;align-items:center;gap:16px;
}
.drop:hover{border-color:rgba(47,155,255,.5);box-shadow:0 18px 44px rgba(40,90,160,.18)}
.drop.drag{border-color:var(--accent);background:rgba(47,155,255,.10)}
.drop-ico{filter:drop-shadow(0 12px 22px rgba(47,130,230,.32));animation:dropfloat 3.4s ease-in-out infinite;line-height:0}
.drop:hover .drop-ico{animation-duration:1.9s}
@keyframes dropfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.drop .sub{color:var(--soft);font-size:13px}
.paste-row{display:flex;gap:8px;width:100%;max-width:560px}
.paste-row input{flex:1;padding:10px 13px;border-radius:11px;background:#fff;border:1px solid var(--line2)}
.recents-head{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.recents h3{color:var(--ink);font-weight:800;font-size:16px;margin:0;letter-spacing:-.01em}
.recents-count{color:var(--faint);font-size:12.5px;font-weight:600;background:var(--bg);border:1px solid var(--line);padding:2px 9px;border-radius:99px}
.recents-all{margin-left:auto;color:var(--accent);font-weight:700}
.recents-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:16px}

/* Instagram-style feed card: 9:16 frame (hover-plays, hook in its real colours) → title → blurb → actions */
.fcard{display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;background:var(--glass);
  border:1px solid var(--glass-bd);box-shadow:var(--shadow);cursor:pointer;transition:transform .16s,box-shadow .16s}
.fcard:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(40,80,140,.22)}
.fc-frame{position:relative;aspect-ratio:9/16;background:#0b1626;overflow:hidden}
.fc-frame img,.fc-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fc-frame video{opacity:0;transition:opacity .25s}
.fcard:hover .fc-frame video{opacity:1}
.fc-frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,16,34,.26),transparent 30%,transparent 62%,rgba(6,16,34,.44))}
.fc-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:38px;height:38px;
  display:grid;place-items:center;border-radius:50%;background:rgba(10,18,32,.42);color:#fff;font-size:12px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:.92;transition:opacity .2s}
.fcard:hover .fc-play{opacity:0}
.fc-body{padding:11px 12px 12px;display:flex;flex-direction:column;gap:5px;background:rgba(255,255,255,.5)}
.fc-title{font-weight:800;font-size:13.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc-blurb{color:var(--soft);font-size:12px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px}
.fc-acts{display:flex;gap:6px;margin-top:4px}
.fc-acts .btn.sm{padding:5px 9px;font-size:12px;border-radius:9px}
.fc-acts .edit{flex:1;justify-content:center}
.fc-acts .icon{padding:5px 8px}
.fc-acts .del{color:var(--danger);border-color:rgba(239,71,103,.4)}
.fc-acts .del:hover{background:rgba(239,71,103,.10)}

/* ---------- style picker (studio) ---------- */
.style-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--r);
  background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.style-row label{font-weight:600;font-size:13px;color:var(--soft);white-space:nowrap}
.style-row .sel{flex:1;min-width:0;padding:7px 10px;border-radius:9px;background:var(--panel2);border:1px solid var(--line2)}
#btn-set-default{white-space:nowrap;color:var(--soft)}
#btn-set-default.on{color:var(--accent);background:rgba(47,155,255,.10);border-color:rgba(47,155,255,.35)}
/* save-style field in inspector */
.save-style-row{display:flex;gap:7px;margin-top:5px}
.style-name-in{flex:1;padding:7px 10px;border-radius:9px;background:var(--panel2);border:1px solid var(--line2);font:inherit;color:var(--ink)}
.style-name-in:focus{outline:2px solid var(--accent);border-color:transparent}

/* ---------- prepare ---------- */
#view-prepare{align-items:center;justify-content:center;gap:22px;padding:24px}
.prep-wrap{display:flex;align-items:center;gap:40px;flex-wrap:wrap;justify-content:center}
.prep-phone{position:relative;height:min(46vh,420px);aspect-ratio:9/16;border-radius:26px;overflow:hidden;background:#000;
  box-shadow:0 20px 60px rgba(40,70,120,.30),0 0 0 6px rgba(255,255,255,.7),0 0 0 7px rgba(24,48,80,.10)}
.prep-phone video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scan{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.scan .scan-line{position:absolute;left:0;right:0;top:0;height:34%;
  background:linear-gradient(180deg,transparent,rgba(47,155,255,.10) 55%,rgba(80,200,255,.45) 94%,rgba(170,235,255,1) 100%);
  border-bottom:3px solid rgba(180,240,255,1);box-shadow:0 0 30px rgba(90,200,255,.95)}
.prep-stream{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.prep-stream .pw{position:absolute;font:800 13px/1 "Inter",system-ui,sans-serif;color:#eaf6ff;
  background:rgba(18,40,72,.5);padding:3px 8px;border-radius:7px;white-space:nowrap;
  border:1px solid rgba(160,225,255,.55);box-shadow:0 0 14px rgba(80,190,255,.55);
  opacity:0;animation:pw 1.7s ease-out forwards}
@keyframes pw{0%{opacity:0;transform:translateY(16px) scale(.9)}18%{opacity:1}100%{opacity:0;transform:translateY(-34px) scale(1)}}
/* listicle "Finding your list" + numbers "Adding up your numbers" prepare overlays (rAF-driven,
   immune to Reduce Motion — opacity/transform are set inline by prepAnimTick, no @keyframes) */
.prep-list{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;
  gap:8px;padding:0 16px;pointer-events:none;z-index:3}
.prep-list .pl-row{display:flex;align-items:center;gap:9px;opacity:0;transform:translateY(10px);
  background:rgba(18,40,72,.55);border:1px solid rgba(160,225,255,.5);border-radius:9px;padding:7px 10px;
  box-shadow:0 0 14px rgba(80,190,255,.4)}
.prep-list .pl-n{flex:none;width:18px;height:18px;border-radius:6px;display:grid;place-items:center;
  font:800 10px/1 "Inter",sans-serif;color:#06223f;background:rgba(170,235,255,.95)}
.prep-list .pl-bar{flex:1;height:7px;border-radius:6px;background:rgba(170,225,255,.32);overflow:hidden;position:relative}
.prep-list .pl-bar span{position:absolute;inset:0 100% 0 0;border-radius:6px;background:linear-gradient(90deg,var(--accent),#62cdff)}
.prep-list .pl-amt{flex:none;min-width:54px;text-align:right;font:800 12px/1 "Inter",sans-serif;color:#eaf6ff;
  text-shadow:0 1px 4px rgba(0,20,50,.7)}
/* numbers running total — the gold summing row at the bottom */
.prep-list .pl-row.pl-total{background:rgba(60,42,0,.5);border-color:rgba(255,212,0,.6)}
.prep-list .pl-row.pl-total .pl-n{background:rgba(255,212,0,.95);color:#3a2a00}
.prep-list .pl-row.pl-total .pl-amt{color:#ffe27a}
.prep-side{display:flex;flex-direction:column;gap:18px;min-width:280px}
/* cut timeline — reference "word-safe cutting" graphic: playhead scrubs the strip,
   a labelled pill pops over each clip, then flagged clips lift out + shrink to 0
   so the rest slide together to close the gap. ALL motion is rAF-driven (cutAnimTick). */
.cut-timeline{position:relative;display:flex;flex-direction:column;gap:9px;height:auto;padding:13px 15px 12px;border-radius:16px;
  background:var(--glass);border:1px solid var(--glass-bd);box-shadow:var(--shadow);width:560px;max-width:92vw;margin:0 auto;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.cut-cap{display:flex;align-items:center;gap:7px;font:700 9.5px/1 "Menlo","JetBrains Mono",monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint)}
.cut-cap b{color:var(--accent);font-weight:700}
.cut-cap .cdot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.cut-track{position:relative;display:flex;align-items:stretch;margin-top:30px;height:56px}
.cut-cell{position:relative;flex:1 1 0;min-width:0;margin-right:7px;border-radius:9px;overflow:visible;transform-origin:50% 100%}
.cut-cell:last-child{margin-right:0}
.cut-cell .cc-thumb{position:absolute;inset:0;border-radius:9px;background-color:#0b1626;background-size:cover;background-position:center;
  border:1px solid var(--glass-bd);box-shadow:0 6px 16px rgba(40,80,140,.18)}
.cut-cell .cc-thumb::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);background:linear-gradient(180deg,transparent 58%,rgba(10,25,50,.22))}
.cut-cell.flag .cc-thumb{outline:1.5px solid var(--mc,#ff4f9a);outline-offset:-1px}
/* leader-line callout that builds above each clip as the playhead passes */
.cut-call{position:absolute;left:50%;bottom:calc(100% + 3px);transform:translate(-50%,7px);z-index:7;
  display:flex;flex-direction:column;align-items:center;pointer-events:none;opacity:0}
.cut-pill{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font:700 8.5px/1 "Menlo","JetBrains Mono",monospace;
  letter-spacing:.05em;text-transform:uppercase;color:#fff;padding:3px 8px;border-radius:9999px}
.cut-lead{width:1.5px;height:13px;transform-origin:bottom;transform:scaleY(0);
  background:linear-gradient(180deg,var(--mc,#5fd4ff),transparent)}
.cut-call--keep{--mc:#2f9bff}
.cut-call--keep .cut-pill{color:var(--accent);background:rgba(47,155,255,.12);border:1px solid rgba(47,155,255,.36)}
.cut-call--keep .cut-lead{opacity:.6}
.cut-call--pause{--mc:#7c5cff}
.cut-call--pause .cut-pill{background:#7c5cff;box-shadow:0 5px 14px rgba(124,92,255,.45)}
.cut-call--mistake{--mc:#ff4f9a}
.cut-call--mistake .cut-pill{background:#ff4f9a;box-shadow:0 5px 14px rgba(255,79,154,.45)}
/* playhead scrubbing across (prepare animation only) */
.cut-ph{position:absolute;top:-7px;bottom:-7px;left:0;width:2px;z-index:6;opacity:0;border-radius:2px;
  background:linear-gradient(180deg,transparent,var(--accent),transparent);box-shadow:0 0 12px 1px rgba(47,155,255,.7)}
.cut-ph::before{content:"";position:absolute;top:-4px;left:50%;transform:translateX(-50%);
  width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
/* scrubber rail under the strip */
.cut-rail{position:relative;height:4px;border-radius:9999px;background:rgba(24,48,80,.10);overflow:hidden}
.cut-rail span{position:absolute;inset:0 100% 0 0;border-radius:9999px;background:linear-gradient(90deg,var(--accent),#7c5cff)}
/* face-scan target reticle */
.face-target{position:absolute;width:34%;height:24%;transform:translate(-50%,-50%);border:2.5px solid rgba(170,235,255,.98);border-radius:10px;
  box-shadow:0 0 22px rgba(80,190,255,.6),inset 0 0 18px rgba(80,190,255,.22);pointer-events:none;z-index:4}
.face-target::before,.face-target::after{content:"";position:absolute;width:10px;height:10px;border:2.5px solid #aef0ff}
.face-target::before{top:-2px;left:-2px;border-right:0;border-bottom:0}
.face-target::after{bottom:-2px;right:-2px;border-left:0;border-top:0}
.face-target .tplus{position:absolute;top:50%;left:50%;width:16px;height:16px;transform:translate(-50%,-50%)}
.face-target .tplus::before,.face-target .tplus::after{content:"";position:absolute;background:#aef0ff;box-shadow:0 0 6px rgba(120,210,255,.9)}
.face-target .tplus::before{left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%)}
.face-target .tplus::after{top:50%;left:0;right:0;height:2px;transform:translateY(-50%)}
/* "face found" confirmation — green check pops in (scale/opacity driven by rAF) */
.face-target.found{border-color:var(--good);box-shadow:0 0 26px rgba(31,184,102,.55),inset 0 0 18px rgba(31,184,102,.20)}
.face-target.found::before,.face-target.found::after{border-color:var(--good)}
.face-target.found .tplus{opacity:0}
.face-target .tcheck{position:absolute;top:50%;left:50%;width:30px;height:30px;border-radius:50%;
  transform:translate(-50%,-50%) scale(0);opacity:0;background:var(--good);
  box-shadow:0 4px 16px rgba(31,184,102,.55),0 0 0 5px rgba(31,184,102,.20);z-index:5}
.face-target .tcheck::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font:900 17px/1 "Inter",sans-serif}
.stages{display:flex;flex-direction:column;gap:14px;min-width:280px}
.stage-row{display:flex;align-items:center;gap:12px;color:var(--soft);transition:.2s}
.stage-row .dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--line2);display:grid;place-items:center;flex:none;background:#fff}
.stage-row.on{color:var(--ink)} .stage-row.on .dot{border-color:var(--accent);box-shadow:0 0 0 4px rgba(47,155,255,.18)}
.stage-row.done .dot{background:var(--good);border-color:var(--good)}
.stage-row.done .dot::after{content:"✓";color:#fff;font-size:12px;font-weight:900}
.prep-msg{color:var(--faint);font-size:13px}

/* ---------- editor layout ---------- */
.editor-main{flex:1;min-height:0;display:grid;grid-template-columns:1fr 416px;gap:18px;padding:18px 20px 10px}
.stage-col{display:flex;flex-direction:column;align-items:center;gap:14px;min-height:0}

/* phone / 9:16 stage (stays dark — it's the video) */
.stage{
  position:relative;height:min(64vh,720px);aspect-ratio:9/16;border-radius:30px;overflow:hidden;
  background:#000;box-shadow:0 24px 70px rgba(40,70,120,.32),0 0 0 8px rgba(255,255,255,.7),0 0 0 9px rgba(24,48,80,.10);
  container-type:size;
}
.cropper{position:absolute;inset:0;overflow:hidden}
#vid{position:absolute;left:0;top:0;will-change:left,top,width;background:#000}
.overlays{position:absolute;inset:0;container-type:size;pointer-events:none}
/* touch-action:none → a finger drag on these moves the element instead of scrolling the page */
.overlays .ov{pointer-events:auto;touch-action:none}
.overlays .handle,.numbers-stack,.numbers-stack .ns-handle,.numbers-stack .ns-whandle{touch-action:none}

/* ---- full-screen upload progress overlay (impossible to miss on a phone) ---- */
#up-overlay{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:24px;
  background:rgba(226,236,247,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.up-card{width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:34px 26px;border-radius:24px;background:var(--glass,rgba(255,255,255,.72));
  border:1px solid var(--glass-bd,rgba(255,255,255,.6));box-shadow:0 30px 80px rgba(40,70,120,.28);text-align:center}
.up-title{font-weight:800;font-size:20px;color:var(--ink,#12233b)}
.up-pct{font-weight:900;font-size:46px;line-height:1;color:var(--accent,#2f9bff);font-variant-numeric:tabular-nums}
.up-track{width:100%;height:12px;border-radius:99px;background:rgba(24,48,80,.10);overflow:hidden}
.up-fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#2f9bff,#6ad0ff);transition:width .25s ease}
/* indeterminate "still landing on the Mac" state: a moving stripe on a full-width bar */
#up-overlay.indet .up-fill{width:100%;background:linear-gradient(90deg,rgba(47,155,255,.22) 25%,#2f9bff 50%,rgba(47,155,255,.22) 75%);background-size:220% 100%;animation:upIndet 1.15s linear infinite}
@keyframes upIndet{0%{background-position:220% 0}100%{background-position:-220% 0}}
.up-sub{font-size:13.5px;line-height:1.5;color:var(--soft,#5b7089);max-width:34ch}

/* result preview — custom frosted-glass control bar (replaces native <video controls>). Pinned to
   the bottom of the 9:16 stage; translucent so the video shows through and the hook/captions stay
   visible (Nick: full video, glass volume). */
.rv-bar{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;align-items:center;gap:10px;
  padding:9px 12px;background:rgba(18,26,42,.34);backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);border-top:1px solid rgba(255,255,255,.16)}
.rv-btn{flex:none;width:30px;height:30px;border:0;border-radius:9px;cursor:pointer;color:#fff;font-size:12px;
  background:rgba(255,255,255,.16);display:grid;place-items:center;line-height:1;transition:background .15s}
.rv-btn:hover{background:rgba(255,255,255,.3)}
.rv-seek{flex:1;min-width:0;height:4px;-webkit-appearance:none;appearance:none;border-radius:3px;cursor:pointer;
  background:rgba(255,255,255,.28)}
.rv-seek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;
  background:#fff;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.rv-time{flex:none;color:#fff;font-size:11.5px;font-variant-numeric:tabular-nums;opacity:.92;white-space:nowrap}

/* hook overlay (mirrors ASS Hook style) — line breaks come from wrapHook (deterministic, WYSIWYG
   with the bake), NOT CSS auto-wrap. Each .hk-ln is its own nowrap block so the browser never
   re-wraps; the box hugs the widest line via width:max-content. */
.hook{
  position:absolute;transform:translateX(-50%);width:max-content;
  font-family:"Arial Black",Impact,system-ui,sans-serif;font-weight:900;
  text-transform:none;text-align:center;line-height:1.06;white-space:normal;
  overflow-wrap:normal;word-break:keep-all;padding:.14em .42em;border-radius:.14em;color:#fff;background:#E52626;
  cursor:grab;user-select:none;outline:2px dashed transparent;outline-offset:5px;
}
.hook .hk-tx{display:block}
.hook .hk-ln{display:block;white-space:nowrap}
.hook:hover{outline-color:rgba(255,255,255,.75)}
.hook.empty{opacity:.5}
/* listicle title card — same box as the hook, but a preview-only overlay (not draggable) */
.title-card{cursor:default;pointer-events:none;z-index:3}
.title-card:hover{outline-color:transparent}

/* numbers breakdown — cumulative stack in the TOP-LEFT (preview only; mirrors the burned ASS).
   Position/font are set inline by layoutNumbersStack so preview ≈ render. */
.numbers-stack{position:absolute;z-index:3;pointer-events:auto;cursor:grab;user-select:none;
  font-family:"Arial Black",Impact,sans-serif;line-height:1.32;color:#fff;text-align:left}
.numbers-stack.dragging{cursor:grabbing}
/* corner scale handle (bottom-right of the stack) — drag to scale the whole group */
.numbers-stack .ns-handle{position:absolute;width:16px;height:16px;right:-8px;bottom:-8px;
  border-radius:5px;background:var(--accent,#2f9bff);border:2px solid #fff;cursor:nwse-resize;
  box-shadow:0 1px 4px rgba(0,0,0,.4);z-index:4;pointer-events:auto}
/* width handle on the right edge of the box — drag to set the box width */
.numbers-stack .ns-whandle{position:absolute;width:8px;min-height:24px;border-radius:5px;
  background:var(--accent,#2f9bff);border:2px solid #fff;cursor:ew-resize;transform:translate(-2px,0);
  box-shadow:0 1px 4px rgba(0,0,0,.4);z-index:4;pointer-events:auto}
/* every row is absolutely placed (top set inline) so positions are FIXED while rows reveal one-by-one
   — mirrors the bake's cursor walk (summary, group titles, value-less rows, subtotals, grand total) */
.numbers-stack .ns-row{position:absolute;left:0;display:flex;align-items:baseline;gap:.42em;
  white-space:nowrap;z-index:1;font-weight:inherit;
  text-shadow:0 .04em .12em rgba(0,0,0,.85),0 0 .06em rgba(0,0,0,.9)}
.numbers-stack .ns-lab{opacity:.92;font-weight:inherit}
.numbers-stack .ns-val{font-weight:inherit}
/* faint backing panel so rows read over any background; sized to the full block, sits behind rows */
.numbers-stack .ns-panel{position:absolute;z-index:0;background:rgba(0,0,0,.55);
  border-radius:.34em;pointer-events:none}
/* super-thin divider; width + height + colour are set inline (animated draw-on left→right) */
.numbers-stack .ns-divider{position:absolute;left:0;min-height:2px;z-index:1;border-radius:1px;
  box-shadow:0 .02em .08em rgba(0,0,0,.6)}
/* titles (summary + group titles) STAND OUT — bright, full opacity, slight tracking */
.numbers-stack .ns-summary,.numbers-stack .ns-title{letter-spacing:.01em}
.numbers-stack .ns-summary .ns-lab,.numbers-stack .ns-summary .ns-val,
.numbers-stack .ns-title .ns-lab,.numbers-stack .ns-title .ns-val{opacity:1;color:inherit}

/* editable list of rows + prices in the Numbers inspector tab */
.nb-list{display:flex;flex-direction:column;gap:4px;max-height:300px;overflow-y:auto;padding:2px 1px}
.nb-list .nb-empty{font-size:11px;opacity:.6;margin:4px 2px}
.nb-grouphd{margin-top:6px}
.nb-grouphd .nb-gtitle{width:100%;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--accent,#2563EB);background:transparent;border:0;border-bottom:1px dashed rgba(120,140,170,.4);
  padding:2px 2px;outline:none}
.nb-erow{display:flex;align-items:center;gap:5px}
.nb-erow input{background:rgba(255,255,255,.55);border:1px solid rgba(120,140,170,.35);border-radius:6px;
  padding:4px 6px;font-size:11.5px;color:#0B1220;outline:none}
.nb-erow input:focus{border-color:var(--accent,#2563EB);background:#fff}
.nb-erow .nb-elab{flex:1 1 auto;min-width:0}
.nb-erow .nb-eval{flex:0 0 74px;width:74px;font-weight:700;text-align:right}
.nb-erow .nb-edel{flex:0 0 auto;background:transparent;border:0;color:#9aa6b6;cursor:pointer;
  font-size:11px;padding:2px 4px;line-height:1;border-radius:5px}
.nb-erow .nb-edel:hover{color:#e5484d;background:rgba(229,72,77,.1)}
.nb-erow .nb-ecol{flex:0 0 auto;width:26px;height:26px;padding:0;border:1px solid rgba(120,140,170,.4);
  border-radius:6px;background:none;cursor:pointer}
.nb-sec{font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#7e8aa0;
  margin:13px 2px 5px;border-top:1px solid rgba(120,140,170,.18);padding-top:9px}
.nb-esub,.nb-etot{margin-top:2px}
.nb-esublab{flex:1 1 auto;font-size:10.5px;font-weight:800;letter-spacing:.03em;opacity:.7;padding-left:2px}
.nb-etot .nb-esublab{opacity:1;color:#0B1220}
.nb-etot .nb-eval{color:#b07a00;border-color:rgba(176,122,0,.4)}

/* caption overlay (mirrors ASS Cap style) */
.caption{
  position:absolute;transform:translate(-50%,-50%);
  font-family:"Arial Black",Impact,system-ui,sans-serif;font-weight:900;
  text-transform:uppercase;text-align:center;line-height:1.05;white-space:normal;
  word-break:keep-all;
  color:#fff;cursor:grab;user-select:none;
  -webkit-text-stroke:.06em #000;paint-order:stroke fill;
  text-shadow:0 2px 6px rgba(0,0,0,.45);
  outline:2px dashed transparent;outline-offset:6px;
}
.caption:hover{outline-color:rgba(255,255,255,.7)}
.caption .w.active{color:var(--cap-active,#FFC400)}
.caption.editing{outline:2px solid var(--accent,#2f9bff);outline-offset:6px;cursor:text}
.caption.editing .cap-tx{user-select:text;-webkit-user-select:text;caret-color:var(--accent,#2f9bff);cursor:text}

/* drag handles (ported from OverlayText) */
.handle{position:absolute;background:#fff;border:1px solid rgba(0,0,0,.6);box-shadow:0 1px 3px rgba(0,0,0,.4);opacity:0;transition:opacity .12s}
.ov:hover .handle{opacity:1}
.handle.size{right:-9px;top:-9px;width:15px;height:15px;border-radius:3px;cursor:nwse-resize}
.handle.width{right:-9px;top:50%;transform:translateY(-50%);width:8px;height:26px;border-radius:9999px;cursor:ew-resize}

/* safe zones — pronounced, labelled */
.safez{position:absolute;pointer-events:none;display:flex;align-items:flex-start;justify-content:center}
.safez span{font:700 10px/1 "Inter",sans-serif;text-transform:uppercase;letter-spacing:.06em;color:#fff;
  background:rgba(0,0,0,.45);padding:3px 6px;border-radius:0 0 6px 6px;margin-top:0}
.safez.top{top:0;left:0;right:0;height:12%;border-bottom:2px dashed rgba(255,70,103,.85);background:rgba(255,70,103,.12)}
.safez.bottom{bottom:0;left:0;right:0;height:18%;border-top:2px dashed rgba(255,70,103,.85);background:rgba(255,70,103,.12);align-items:flex-end}
.safez.bottom span{border-radius:6px 6px 0 0}
.safez.right{top:0;bottom:0;right:0;width:12%;border-left:2px dashed rgba(255,180,32,.9);background:rgba(255,180,32,.12);align-items:center;writing-mode:vertical-rl}
.safez.right span{border-radius:6px}
.safez.left{top:0;bottom:0;left:0;width:6%;border-right:2px dashed rgba(255,255,255,.5);background:rgba(255,255,255,.06)}
.center-line{position:absolute;left:50%;top:0;bottom:0;width:0;border-left:2px dashed var(--accent);transform:translateX(-1px);pointer-events:none;z-index:6;box-shadow:0 0 10px rgba(47,155,255,.7)}
.reframing{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;
  background:rgba(255,255,255,.66);backdrop-filter:blur(3px);font-weight:700;color:var(--accent)}
.reframing .spin{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(47,155,255,.3);border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* transport */
.transport{display:flex;align-items:center;gap:12px;width:min(64vh*0.5625,405px);max-width:100%}
.play{width:42px;height:42px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#fff;flex:none;box-shadow:0 6px 18px rgba(47,155,255,.34)}
.play svg{width:18px;height:18px}
.scrub{flex:1}
input[type=range].rng{-webkit-appearance:none;appearance:none;height:5px;border-radius:5px;background:var(--line2);width:100%}
input[type=range].rng::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(47,155,255,.22)}
input[type=range].rng:disabled{opacity:.4}
.tlabel{color:var(--soft);font-variant-numeric:tabular-nums;font-size:12px;min-width:74px;text-align:right}
.stage-tools{display:flex;gap:8px}
.chip-toggle{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:9px;background:var(--panel2);border:1px solid var(--line2);font-size:12px;color:var(--soft)}
.chip-toggle.on{color:var(--accent);border-color:var(--accent);background:rgba(47,155,255,.12)}

/* inspector */
.inspector{display:flex;flex-direction:column;min-height:0;border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--glass-bd);box-shadow:var(--shadow);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);overflow:hidden}
.insp-title{padding:12px 14px 0}
.insp-title .title-in{font-size:14px}
.insp-tabs{display:flex;gap:2px;padding:8px 8px;border-bottom:1px solid var(--line)}
.insp-tabs .tab-ic{display:none}   /* tab icons show only on the mobile bottom bar */
.insp-tabs button{flex:1;padding:8px 4px;border-radius:9px;color:var(--soft);font-weight:600;font-size:12.5px}
.insp-tabs button.on{background:#fff;color:var(--accent);box-shadow:0 2px 8px rgba(40,80,140,.1)}
/* persistent template picker — visible from every inspector tab */
.insp-style{display:flex;align-items:center;gap:9px;padding:9px 12px;border-bottom:1px solid var(--line)}
.insp-style label{font-weight:700;font-size:12px;color:var(--soft);white-space:nowrap}
.insp-style .sel{flex:1;min-width:0;padding:6px 9px;border-radius:9px;background:var(--panel2);border:1px solid var(--line2);font-size:12.5px}
.insp-style .btn.sm{flex:none;padding:6px 10px;font-size:12px}
.insp-style .btn.sm.icon{padding:6px 9px;line-height:1}
.insp-body{flex:1;overflow:auto;padding:16px}
.insp-foot{padding:14px 16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px;background:rgba(255,255,255,.4)}
.title-in{width:100%;padding:9px 12px;border-radius:10px;background:#fff;border:1px solid var(--line2);font-weight:700}
.tabpane{display:none;flex-direction:column;gap:16px}
.tabpane.on{display:flex}
.fld{display:flex;flex-direction:column;gap:7px}
.fld label{font-size:12px;color:var(--soft);font-weight:600;display:flex;justify-content:space-between}
.fld label .val{color:var(--faint);font-variant-numeric:tabular-nums}
textarea.hook-text{width:100%;resize:none;height:54px;padding:9px 12px;border-radius:10px;background:#fff;border:1px solid var(--line2);font-weight:800;text-transform:uppercase}
.sel{width:100%;padding:9px 12px;border-radius:10px;background:#fff;border:1px solid var(--line2);font-weight:600}
.swatches{display:flex;gap:7px;flex-wrap:wrap}
.sw{width:24px;height:24px;border-radius:50%;border:2px solid rgba(24,48,80,.18);cursor:pointer;flex:none}
.sw.on{border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,155,255,.3)}
.seg{display:flex;background:#fff;border:1px solid var(--line2);border-radius:10px;overflow:hidden}
.seg button{flex:1;padding:7px;color:var(--soft);font-weight:600;font-size:12.5px}
.seg button.on{background:var(--grad);color:#fff}
.toggle-row{display:flex;align-items:center;justify-content:space-between}
.switch{width:42px;height:24px;border-radius:999px;background:var(--line2);position:relative;transition:.15s;flex:none;cursor:pointer}
.switch.on{background:var(--accent)}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch.on::after{left:20px}
.presets{display:flex;gap:8px;flex-wrap:wrap}
.preset{padding:8px 12px;border-radius:10px;background:var(--panel2);border:1px solid var(--line2);font-weight:600;font-size:12.5px}
.preset:hover{background:#fff}
.preset.on{border-color:var(--accent);background:rgba(47,155,255,.12)}

/* cut strip */
.cutstrip{border-top:1px solid var(--line);padding:12px 20px 16px;display:flex;flex-direction:column;gap:9px;max-height:30vh;background:rgba(255,255,255,.4)}
.cut-head{display:flex;align-items:center;gap:12px;color:var(--soft);font-size:12.5px}
.cut-head b{color:var(--ink)}
.cut-head .spacer{flex:1}
.len-ctl{display:flex;align-items:center;gap:8px;margin-left:6px}
.len-ctl label{font-weight:700;color:var(--soft)}
.len-ctl input[type=range]{width:130px}
.len-ctl .val{color:var(--accent);font-weight:700;min-width:38px}
.zoom-ctl{display:flex;align-items:center;gap:6px;margin-left:2px}
.zoom-ctl label{font-weight:700;color:var(--soft)}
.zoom-ctl input[type=range]{width:84px}
.zoom-ctl .zb{padding:2px 8px;min-width:24px;justify-content:center;font-weight:800;line-height:1}
.undo-ctl{display:flex;align-items:center;gap:6px;margin-left:4px}
.undo-ctl .btn{padding:5px 9px}
/* circular ℹ info button + glass help popup */
.tl-info{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;
  font:800 13px/1 Georgia,"Times New Roman",serif;font-style:italic;color:var(--accent);
  background:var(--panel2);border:1px solid var(--line2);transition:.13s}
.tl-info:hover{background:#fff;box-shadow:var(--shadow);color:var(--accent)}
.tl-help-back{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(20,40,70,.28);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.tl-help{position:relative;width:min(520px,92vw);max-height:80vh;overflow:auto;padding:24px 26px 22px;border-radius:var(--r-lg);
  background:var(--glass);border:1px solid var(--glass-bd);box-shadow:var(--shadow);
  backdrop-filter:saturate(160%) blur(24px);-webkit-backdrop-filter:saturate(160%) blur(24px)}
.tl-help h3{margin:0 0 14px;font-size:18px;font-weight:800}
.tl-help-x{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-size:13px;color:var(--soft);background:var(--panel2);border:1px solid var(--line2);transition:.13s}
.tl-help-x:hover{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.tl-help-body{display:flex;flex-direction:column;gap:14px}
.tl-help-sec h4{margin:0 0 5px;font-size:13px;font-weight:800;color:var(--accent);text-transform:uppercase;letter-spacing:.03em}
.tl-help-sec ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.tl-help-sec li{color:var(--soft);font-size:13px;line-height:1.45}
.tl-help-sec li b{color:var(--ink);font-weight:700}
/* anchor "meant-to-be" guide line for listicle/numbers blocks while dragging */
.tl-anchor-line{position:absolute;top:-3px;bottom:-3px;width:2px;z-index:6;pointer-events:none;transform:translateX(-1px);
  background:var(--accent);opacity:.35;transition:opacity .1s}
.tl-anchor-line.snapped{opacity:1;box-shadow:0 0 8px rgba(47,155,255,.85)}
.tl-anchor-line::before{content:"";position:absolute;top:-5px;left:-3px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.tl-anchor-line.snapped::after{content:"snaps here";position:absolute;top:-18px;left:50%;transform:translateX(-50%);
  font:800 9px/1 "Inter",sans-serif;color:var(--accent);white-space:nowrap;text-shadow:0 1px 2px rgba(255,255,255,.9)}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px}
.chip{
  flex:none;max-width:280px;padding:9px 12px;border-radius:12px;background:var(--panel2);
  border:1px solid var(--line);color:var(--soft);cursor:pointer;transition:.13s;font-size:12.5px;
  display:flex;flex-direction:column;gap:3px;
}
.chip:hover{border-color:var(--line2);background:#fff}
.chip.keep{background:rgba(47,155,255,.12);border-color:rgba(47,155,255,.55);color:var(--ink)}
.chip.trimmed{opacity:.5;border-style:dashed}
.chip .o{display:flex;align-items:center;gap:6px;font-weight:800;font-size:11px;color:var(--accent)}
.chip.keep .o .n{background:var(--accent);color:#fff;border-radius:6px;padding:0 6px}
.chip .tx{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:256px}

/* timeline = ONE clip card. footage painted as a single seamless canvas (no tiles, no seams). */
/* #timeline is the scroll viewport; .tl-content widens to viewport×zoom and holds every overlay. */
.timeline{position:relative;height:76px;overflow-x:auto;overflow-y:visible}
.timeline.scrubbing{cursor:grabbing}
.tl-content{position:absolute;top:0;bottom:0;left:0;width:100%;cursor:grab}
.tl-content.scrubbing{cursor:grabbing}
.tl-clip{position:absolute;inset:0;border-radius:13px;overflow:hidden;border:1px solid var(--line2);
  box-shadow:0 2px 10px rgba(20,60,120,.10),inset 0 0 0 1px rgba(255,255,255,.5);background:#dfe9f7}
.tl-film{position:absolute;inset:0;width:100%;height:100%;display:block}
.tl-glass{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(20,60,120,.10) 55%,rgba(20,60,120,.28))}
.tl-clip-label{position:absolute;top:7px;left:9px;display:flex;align-items:center;gap:4px;z-index:2;pointer-events:none;
  font:800 11px/1 "Inter",sans-serif;color:#fff;letter-spacing:.2px;text-shadow:0 1px 3px rgba(0,0,40,.55)}
.tl-clip-label svg{filter:drop-shadow(0 1px 2px rgba(0,0,40,.5))}
.tl-seg{position:absolute;top:0;bottom:0;cursor:pointer;z-index:3;border-radius:13px;transition:background .12s}
.tl-seg:hover{background:rgba(47,155,255,.18)}
.tl-seg.sel{background:rgba(255,59,107,.30);outline:2.5px solid #ff3b6b;outline-offset:-2px}
.tl-blade{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--accent);box-shadow:0 0 7px rgba(47,155,255,.85);z-index:4;pointer-events:none;transform:translateX(-1px)}
.tl-blade::before,.tl-blade::after{content:"";position:absolute;left:-3px;width:8px;height:8px;background:var(--accent);border-radius:2px}
.tl-blade::before{top:-5px}.tl-blade::after{bottom:-5px}
.tl-playhead{position:absolute;top:-3px;bottom:-3px;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(20,60,120,.45),0 0 8px rgba(20,60,120,.5);z-index:5;pointer-events:none;transform:translateX(-1px)}
/* stacked (vo/li/nb) timelines: rows can be taller than the viewport → the playhead spans the FULL
   content height (set inline by updatePlayhead) so you can grab/see it from any scroll position. */
.tl-content.tl-vo .tl-playhead,.tl-content.tl-li .tl-playhead,.tl-content.tl-nb .tl-playhead{top:0;bottom:auto}
.tl-playhead::after{content:"";position:absolute;top:-6px;left:-4px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(20,60,120,.45),0 1px 4px rgba(20,60,120,.5)}
/* wide invisible grab handle centred on the playhead → easy to grab without changing the look */
.tl-playhead::before{content:"";position:absolute;top:-7px;bottom:-7px;left:-7px;width:16px}
.tl-content.scrubbing .tl-playhead::after{box-shadow:0 0 0 1px rgba(20,60,120,.45),0 0 0 5px rgba(47,155,255,.30),0 1px 4px rgba(20,60,120,.5)}

/* result */
#view-result{align-items:center;justify-content:center;gap:18px}
.result-actions{display:flex;gap:10px}

/* rendering — the short full-screen with a progress ring tracing its edge (rAF-driven) */
#view-rendering{align-items:center;justify-content:center}
.render-frame{position:relative;height:min(66vh,740px);aspect-ratio:9/16;border-radius:30px;overflow:hidden;
  background:#000;box-shadow:0 24px 70px rgba(40,70,120,.32),0 0 0 8px rgba(255,255,255,.7),0 0 0 9px rgba(24,48,80,.10)}
.render-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.92) brightness(.82)}
.render-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,20,40,.18),rgba(8,20,40,.42));pointer-events:none}
/* the ring: an SVG rounded-rect stroke stretched to the frame; JS sets stroke-dashoffset 0..1000 */
.render-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
.render-ring rect{fill:none;vector-effect:non-scaling-stroke}
.render-ring .rr-track{stroke:rgba(255,255,255,.28);stroke-width:5}
.render-ring .rr-fill{stroke:var(--accent);stroke-width:5;stroke-linecap:round;
  filter:drop-shadow(0 0 7px rgba(47,155,255,.85))}
.render-badge{position:absolute;left:0;right:0;bottom:26px;z-index:4;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}
.render-pct{font-family:"Arial Black",Impact,sans-serif;font-weight:900;font-size:42px;color:#fff;
  letter-spacing:-.02em;text-shadow:0 3px 16px rgba(0,30,70,.6);font-variant-numeric:tabular-nums}
.render-lab{font-weight:700;font-size:13px;color:rgba(255,255,255,.92);text-shadow:0 1px 6px rgba(0,20,50,.6)}

/* history — scrollable grid of past shorts; each card plays its frame on hover */
#view-history{overflow:auto;align-items:center;padding:30px 24px 48px}
.hist-wrap{width:100%;max-width:1040px;display:flex;flex-direction:column;gap:20px}
.hist-head h2{font-size:24px;margin:0;font-weight:800}
.hist-head p{color:var(--soft);margin:4px 0 0;font-size:13px}
.hist-empty{color:var(--soft);text-align:center;padding:60px 0}
.hist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.hcard{display:flex;gap:14px;padding:12px;border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--glass-bd);
  box-shadow:var(--shadow);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);cursor:pointer;transition:transform .15s,box-shadow .15s}
.hcard:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(40,80,140,.20)}
/* left: the 9:16 frame with the hook overlaid; swaps to a muted looping <video> on hover */
.hc-frame{position:relative;flex:none;width:84px;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:#0b1626;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.hc-frame img,.hc-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hc-frame video{opacity:0;transition:opacity .2s}
.hcard:hover .hc-frame video{opacity:1}
.hc-hook{position:absolute;left:5px;right:5px;top:7px;z-index:2;font:900 8.5px/1.08 "Arial Black",Impact,sans-serif;
  text-transform:uppercase;color:#fff;text-align:left;word-break:break-word;
  text-shadow:0 1px 3px rgba(0,0,30,.85),0 0 8px rgba(0,0,30,.6)}
.hc-hook b{background:#E52626;padding:1px 3px;border-radius:3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hc-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,16,34,.30) 0%,transparent 34%,transparent 70%,rgba(6,16,34,.30));pointer-events:none}
/* right: title, blurb, action buttons */
.hc-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
/* published shorts: grayed-out card + a green "Published · platforms" badge */
.hcard.published{opacity:.62;filter:saturate(.6)}
.hcard.published:hover{opacity:.92;filter:none}
.hcard.published .hc-frame img{filter:grayscale(.35)}
.hc-pub{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;font-size:11px;font-weight:800;
  color:var(--good);background:rgba(31,184,102,.12);border:1px solid rgba(31,184,102,.3);
  padding:3px 9px;border-radius:99px;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hc-pub svg{flex:0 0 auto}
.hc-pub-dot{position:absolute;top:5px;right:5px;z-index:3;width:14px;height:14px;border-radius:50%;
  background:var(--good);border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.hc-title{font-weight:800;font-size:14.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-blurb{color:var(--soft);font-size:12.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hc-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px}
.hc-acts .btn.sm{padding:5px 10px;font-size:12px}
.hc-acts .btn.del{color:var(--danger);border-color:rgba(239,71,103,.4)}
.hc-acts .btn.del:hover{background:rgba(239,71,103,.10);color:#b21f3e}

/* toast */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--line2);box-shadow:var(--shadow);padding:11px 18px;border-radius:12px;font-weight:600;opacity:0;transition:.2s;pointer-events:none;z-index:50}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}
.toast.err{border-color:var(--danger);color:#b21f3e}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(24,48,80,.16);border-radius:8px;border:2px solid transparent;background-clip:content-box}

/* ================= Voiceover + B-roll mode ================= */
/* studio mode toggle */
.mode-row{display:inline-flex;align-self:center;gap:5px;padding:5px;border-radius:14px;
  background:#fff;border:1px solid var(--line2);box-shadow:0 4px 16px rgba(37,99,235,.07)}
.mode-tab{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:10px;color:var(--soft);font-weight:700;font-size:13px;transition:.14s}
.mode-tab:hover{color:var(--ink)}
.mode-tab .ico{width:15px;height:15px;flex:0 0 auto;display:inline-flex}
.mode-tab .ico svg{width:100%;height:100%}
.mode-tab.on{background:var(--grad);color:#fff;box-shadow:0 6px 16px rgba(37,99,235,.3)}
/* top-level studio switch: edit a raw clip vs post a finished short */
.studio-tabs{display:inline-flex;align-self:center;gap:5px;padding:5px;border-radius:14px;
  background:#fff;border:1px solid var(--line2);box-shadow:0 4px 16px rgba(37,99,235,.07)}
.studio-tab{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:10px;
  background:transparent;border:0;color:var(--soft);font-weight:700;font-size:14px;transition:.14s;cursor:pointer}
.studio-tab svg{flex:0 0 auto}
.studio-tab:hover{color:var(--ink)}
.studio-tab.on{background:var(--grad);color:#fff;box-shadow:0 6px 16px rgba(37,99,235,.3)}
.finished-drop{border-color:rgba(124,92,255,.45)}
.finished-drop.drag{border-color:#7c5cff;background:rgba(124,92,255,.10)}
/* which uploader shows depends on the studio tab (overrides recents' inline display) */
.studio-wrap.finished-mode .mode-section,
.studio-wrap.finished-mode #style-row,
.studio-wrap.finished-mode #drop,
.studio-wrap.finished-mode #vo-drop,
.studio-wrap.finished-mode #recents{display:none !important}
.studio-wrap:not(.finished-mode) #finished-drop{display:none}
/* format picker: heading + horizontal slider w/ "more" arrow on phones */
.mode-section{display:flex;flex-direction:column;align-items:center;gap:11px;width:100%}
.mode-head{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.mode-wrap{position:relative;display:flex;justify-content:center;max-width:100%}
.mode-arrow{display:none;align-items:center;justify-content:center;position:absolute;right:4px;top:50%;
  transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid var(--line2);
  box-shadow:0 4px 12px rgba(37,99,235,.2);color:var(--accent);font-size:18px;font-weight:900;line-height:1;
  pointer-events:none;transition:opacity .2s}
.mode-arrow.hide{opacity:0}

/* ---------- mobile / phones ---------- */
@media (max-width:600px){
  .topbar{padding:11px 15px;gap:10px}
  .topbar-center{display:none}          /* the eyebrow pill overlapped the logo + buttons on phones */
  .topbar .logo{width:32px;height:32px}
  .topbar .wordmark{height:27px}        /* logo a touch bigger + roomier bar (Nick) */
  .brand{font-size:20px}
  .topbar-actions{gap:8px}
  .btn.sm{padding:7px 12px;font-size:13px}
  #view-studio{padding:22px 14px;overflow-x:hidden}   /* kill the side-to-side page scroll */
  .studio-wrap{gap:20px}
  .hero h1{font-size:26px}
  .hero p{font-size:14px}
  .mode-wrap{width:100%}
  .mode-row{max-width:100%;overflow-x:auto;flex-wrap:nowrap;justify-content:flex-start;
    scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none}
  .mode-row::-webkit-scrollbar{display:none}
  .mode-tab{flex:0 0 auto;scroll-snap-align:start}
  .mode-arrow{display:flex}

  /* ---- HOME above the fold: eyebrow banner -> hero -> Choose-a-clip box; tabs/format/style/recents below ---- */
  .studio-wrap>.home-banner{order:1;max-height:172px;width:auto;max-width:100%;margin-bottom:6px}
  .studio-wrap>.hero{order:2;margin-top:0}
  .studio-wrap>#drop,.studio-wrap>#vo-drop,.studio-wrap>#finished-drop{order:3}
  .studio-wrap>#studio-tabs{order:4}
  .studio-wrap>.mode-section{order:5}
  .studio-wrap>#style-row{order:6}
  .studio-wrap>.recents{order:7}
  #view-studio .hero p{display:none}   /* drop the subtitle so Choose-a-clip sits right under the title */

  /* ===== EDITOR on a phone — Instagram-style: a FIXED-SIZE video (always visible) + timeline, a
     bottom ICON TAB BAR, and a settings SHEET that slides up OVER the timeline when you tap a tool
     (the video stays visible above it). No preview zoom. ===== */
  #view-editor{overflow:hidden;padding:0 0 62px}       /* leave room for the fixed bottom tab bar */
  .editor-main{display:contents}
  .inspector{display:contents}                          /* dissolve: the tab bar + sheet position themselves */
  .stage-col{order:1;flex:none;width:100%;padding:9px 10px 4px;gap:6px}
  .stage{height:46vh;transition:height .26s ease;border-radius:22px;
    box-shadow:0 10px 30px rgba(40,70,120,.28),0 0 0 6px rgba(255,255,255,.7),0 0 0 7px rgba(24,48,80,.10)}
  #view-editor.sheet-open .stage{height:37vh}   /* shrink the preview just enough to clear the open sheet */
  .transport{width:100%}
  .cutstrip{order:2;flex:none;max-height:none;padding:8px 12px;border-top:1px solid var(--line);background:rgba(255,255,255,.45)}
  .cut-head{flex-wrap:nowrap;overflow-x:auto;gap:10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cut-head::-webkit-scrollbar{display:none}
  .cut-head>*{flex:none}
  .cut-head .spacer{display:none}
  .timeline{height:84px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .insp-title,.insp-style,.insp-foot{display:none}      /* Render is in the top bar; declutter the rest */
  /* bottom ICON TAB BAR — always visible */
  .insp-tabs{position:fixed;left:0;right:0;bottom:0;z-index:41;height:62px;gap:0;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));border:0;border-top:1px solid var(--line);
    justify-content:space-around;background:rgba(250,252,254,.97);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 -6px 20px rgba(40,70,120,.10)}
  .insp-tabs button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;border:0;background:transparent;border-radius:12px;padding:2px;color:var(--soft);font-weight:700;font-size:9.5px}
  .insp-tabs button.on{color:var(--accent);background:transparent}
  .insp-tabs .tab-ic{display:block;width:21px;height:21px}
  .insp-tabs .tab-lb{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* slide-up SETTINGS SHEET — over the timeline, below the video (video stays visible) */
  .insp-body{position:fixed;left:0;right:0;bottom:62px;z-index:40;max-height:46vh;overflow-y:auto;
    -webkit-overflow-scrolling:touch;padding:16px 15px 22px;
    background:var(--glass,rgba(255,255,255,.94));backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
    border-top:1px solid var(--glass-bd,rgba(255,255,255,.6));border-radius:20px 20px 0 0;
    box-shadow:0 -18px 44px rgba(40,70,120,.22);
    transform:translateY(calc(100% + 62px));transition:transform .27s cubic-bezier(.4,0,.2,1)}
  #view-editor.sheet-open .insp-body{transform:translateY(0)}
  #view-editor.active ~ .winston-bubble{display:none}   /* the feedback bubble would cover the bottom tab bar */
}

/* VO uploader (two pick cards + create) */
.vo-drop{display:flex;flex-direction:column;gap:16px}
.vo-pick{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:var(--r-lg);
  background:var(--glass);border:1px solid var(--glass-bd);box-shadow:var(--shadow);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.vo-pick-head{display:flex;flex-direction:column;gap:3px}
.vo-pick-t{font-weight:800;font-size:15px}
.vo-pick-s{color:var(--soft);font-size:13px}
.vo-pick .btn{align-self:flex-start}
.vo-paste input{flex:1;padding:9px 12px;border-radius:10px;background:#fff;border:1px solid var(--line2)}
.vo-chosen{display:flex;align-items:center;gap:8px}
.vo-file{flex:1;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:rgba(47,155,255,.10);border:1px solid rgba(47,155,255,.30);padding:7px 11px;border-radius:9px}
.vo-list{display:flex;flex-direction:column;gap:6px}
.vo-li{display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:9px;background:var(--panel2);border:1px solid var(--line)}
.vo-li .vo-ic{color:var(--accent);font-weight:800;width:16px;text-align:center;flex:none}
.vo-li .vo-nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:13px}
.vo-x{flex:none;width:22px;height:22px;border-radius:50%;color:var(--soft);font-size:12px;line-height:1;
  background:rgba(24,48,80,.06);border:1px solid var(--line)}
.vo-x:hover{color:var(--danger);background:rgba(239,71,103,.10);border-color:rgba(239,71,103,.35)}
.vo-go{justify-content:center;align-self:stretch}

/* VO preview stage — b-roll fills the 9:16 frame (cover-fit), under the overlays */
.broll-stage{position:absolute;inset:0;background:#000;z-index:0}
.broll-stage img,.broll-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}

/* render-view b-roll visual (VO has no single source video) */
.render-broll{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.92) brightness(.82)}

/* ---- VO timeline: spine row + b-roll track ---- */
/* stacked modes: the content box grows to fit all rows (not clamped to the 76px viewport) so the
   playhead can span every row and #timeline scrolls vertically to reach them. */
.tl-content.tl-vo,.tl-content.tl-li,.tl-content.tl-nb{bottom:auto;min-height:100%}
.timeline:has(.tl-vo),.timeline:has(.tl-li),.timeline:has(.tl-nb){overflow-y:auto}
.tl-content.tl-vo{display:flex;flex-direction:column;gap:6px;cursor:default}
.tl-vo .tl-vrow{position:relative;width:100%}
.tl-vo .tl-spine{height:26px;flex:none}
.tl-vo .tl-broll{flex:1;min-height:42px}
.tl-spine-clip{position:absolute;inset:0;border-radius:9px;overflow:hidden;cursor:grab;
  background:linear-gradient(180deg,rgba(124,92,255,.9),rgba(95,120,255,.9));
  border:1px solid rgba(124,92,255,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.tl-spine-wave{position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.45) 0 1px,transparent 1px 5px)}
.tl-spine-label{position:absolute;left:9px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:5px;
  font:800 10.5px/1 "Inter",sans-serif;color:#fff;text-shadow:0 1px 3px rgba(0,0,40,.5);pointer-events:none}
/* b-roll blocks */
.tl-bblock{position:absolute;top:0;bottom:0;border-radius:9px;overflow:hidden;cursor:grab;
  background:#0b1626;border:1px solid var(--accent);
  box-shadow:0 2px 10px rgba(20,60,120,.16),inset 0 0 0 1px rgba(255,255,255,.18);
  min-width:10px;touch-action:none;user-select:none}
.tl-bblock.is-video{border-color:#7c5cff}
.tl-broll.dragging .tl-bblock{transition:none}
.bb-thumb{position:absolute;inset:0;background-color:#13233b;background-size:cover;background-position:center}
.bb-thumb .bb-vico{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:rgba(255,255,255,.92);
  font-size:15px;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.bb-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,16,34,.10),rgba(6,16,34,.55))}
.bb-label{position:absolute;left:7px;right:7px;bottom:5px;z-index:2;pointer-events:none;
  font:800 10px/1.1 "Inter",sans-serif;color:#fff;text-shadow:0 1px 3px rgba(0,0,30,.8);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ✕ delete — inset LEFT of the 11px right-edge trim strip (.bb-r) so the edge always trims, never deletes */
.bb-x{position:absolute;top:4px;right:13px;z-index:6;width:16px;height:16px;border-radius:50%;
  display:grid;place-items:center;font-size:9px;line-height:1;color:#fff;opacity:0;transition:opacity .12s;
  background:rgba(8,20,40,.6);border:1px solid rgba(255,255,255,.35)}
.tl-bblock:hover .bb-x{opacity:1}
.bb-x:hover{background:var(--danger);border-color:var(--danger)}
/* trim handles (visible on hover) — z-index ABOVE the ✕ so the very edge always grabs the trim */
.bb-h{position:absolute;top:0;bottom:0;width:11px;z-index:7;cursor:ew-resize;touch-action:none;
  opacity:0;transition:opacity .12s}
.tl-bblock:hover .bb-h{opacity:1}
.bb-h::after{content:"";position:absolute;top:50%;transform:translateY(-50%);width:3px;height:46%;border-radius:3px;
  background:#fff;box-shadow:0 0 0 1px rgba(20,60,120,.4)}
.bb-l{left:0;background:linear-gradient(90deg,rgba(47,155,255,.55),transparent)}
.bb-l::after{left:3px}
.bb-r{right:0;background:linear-gradient(270deg,rgba(47,155,255,.55),transparent)}
.bb-r::after{right:3px}
.tl-bblock.is-video .bb-l{background:linear-gradient(90deg,rgba(124,92,255,.55),transparent)}
.tl-bblock.is-video .bb-r{background:linear-gradient(270deg,rgba(124,92,255,.55),transparent)}

/* ---- Listicle timeline: clip row (top) + title track (bottom). Reuses the VO flex shell + bb-* handles ---- */
.tl-content.tl-li{display:flex;flex-direction:column;gap:6px;cursor:grab}
.tl-li .tl-cliprow{position:relative;width:100%;flex:1;min-height:40px}   /* the one talking-head clip (canvas + blade pieces) */
.tl-li .tl-litrack{position:relative;width:100%;height:26px;flex:none}    /* the title cards row */
/* title blocks — positioned by start_s/end_s (gaps allowed, never overlap); accent = listicle blue */
.tl-tblock{position:absolute;top:0;bottom:0;border-radius:9px;overflow:hidden;cursor:grab;
  display:flex;align-items:center;gap:5px;padding:0 7px;
  background:linear-gradient(180deg,rgba(47,155,255,.95),rgba(38,130,235,.95));
  border:1px solid rgba(47,155,255,.6);
  box-shadow:0 2px 10px rgba(20,60,120,.18),inset 0 0 0 1px rgba(255,255,255,.22);
  min-width:14px;touch-action:none;user-select:none}
.tl-litrack.dragging .tl-tblock{transition:none}
.tl-tblock.editing{cursor:text;outline:2px solid #fff;outline-offset:-2px}
.tb-num{flex:none;display:grid;place-items:center;min-width:15px;height:15px;padding:0 3px;border-radius:5px;
  background:rgba(255,255,255,.28);color:#fff;font:800 9.5px/1 "Inter",sans-serif}
.tb-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:800 10px/1.1 "Inter",sans-serif;color:#fff;text-shadow:0 1px 3px rgba(0,0,30,.7)}
.tl-tblock.editing .tb-label{user-select:text;-webkit-user-select:text;overflow:visible;text-overflow:clip;caret-color:#fff;cursor:text}
.tl-tblock .bb-x{background:rgba(8,20,40,.55);border-color:rgba(255,255,255,.4)}
.tl-tblock:hover .bb-x{opacity:1}
.tl-tblock:hover .bb-h{opacity:1}                       /* reveal trim handles on hover (same as b-roll) */
/* the MAIN-HOOK block: distinct (red/gold) so it reads as the opener, not a list item */
.tl-hookblock{cursor:pointer;
  background:linear-gradient(180deg,rgba(229,38,38,.96),rgba(196,26,26,.96));
  border:1px solid rgba(255,120,120,.65)}
.tb-hooknum{background:rgba(255,212,0,.92);color:#3a2a00}
/* selected text element (click a block → it binds the Hook tab) */
.tl-tblock.sel{outline:2.5px solid #fff;outline-offset:-2px;box-shadow:0 2px 14px rgba(20,60,120,.30),inset 0 0 0 1px rgba(255,255,255,.5)}

/* ---- Numbers timeline: clip row (bottom) + number track (top). Reuses the VO flex shell + bb-* ✕ ---- */
.tl-content.tl-nb{display:flex;flex-direction:column;gap:6px;cursor:grab}
.tl-nb .tl-cliprow{position:relative;width:100%;flex:1;min-height:40px}   /* the one talking-head clip */
.tl-nb .tl-nbtrack{position:relative;width:100%;flex:none}    /* stacked layer rows (height set inline) */
/* number layers — each amount is a BAR from its start_s to the shared end_s, stacked FCP-style
   (top/height set inline by _nbPlaceBar; earliest on the bottom row, the hook bar beneath all). */
.tl-nblock{position:absolute;border-radius:8px;overflow:hidden;cursor:grab;
  display:flex;align-items:center;gap:5px;padding:0 7px;
  background:linear-gradient(180deg,rgba(21,224,106,.95),rgba(16,180,86,.95));
  border:1px solid rgba(21,224,106,.6);
  box-shadow:0 2px 10px rgba(16,120,60,.20),inset 0 0 0 1px rgba(255,255,255,.22);
  min-width:14px;touch-action:none;user-select:none}
.tl-nbtrack.dragging .tl-nblock{transition:none}
/* the hook bar = the bottom layer, distinct (blue glass) so it reads as the persistent hook */
.tl-nbhookblock{cursor:pointer;
  background:linear-gradient(180deg,rgba(47,155,255,.95),rgba(30,120,220,.95));
  border:1px solid rgba(120,195,255,.7)}
.tl-nbhookblock .tb-hooknum{background:rgba(8,30,70,.7);color:#cfe6ff}
.tl-nbhookblock .nb-lab{color:#fff}
.tl-nblock.sel{outline:2.5px solid #fff;outline-offset:-2px;box-shadow:0 2px 14px rgba(20,60,120,.30),inset 0 0 0 1px rgba(255,255,255,.5)}
.tl-nblock:hover .bb-h{opacity:1}                       /* reveal the shared-end trim handle on hover */
.tl-nblock.editing{cursor:text;outline:2px solid #fff;outline-offset:-2px;max-width:none;z-index:5}
.tl-nblock .tb-num{background:rgba(255,255,255,.30);color:#063a1c}
.tl-nblock .nb-lab{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:800 10px/1.1 "Inter",sans-serif;color:#fff;text-shadow:0 1px 3px rgba(0,20,8,.7)}
.tl-nblock.editing .nb-lab{user-select:text;-webkit-user-select:text;overflow:visible;text-overflow:clip;caret-color:#fff}
.tl-nblock .bb-x{background:rgba(6,30,16,.55);border-color:rgba(255,255,255,.4)}
.tl-nblock:hover .bb-x{opacity:1}
/* the TOTAL marker: distinct gold so it reads as the sum, not another amount */
.tl-totalblock{background:linear-gradient(180deg,rgba(255,212,0,.96),rgba(240,190,0,.96));
  border:1px solid rgba(255,228,120,.7)}
.tl-totalblock .nb-lab{color:#3a2a00;text-shadow:none}
.tb-totalnum{background:rgba(58,42,0,.85);color:#FFD400}

/* ================= Winston feedback widget ================= */
/* The bubble + panel live in <body>, fixed, above everything; only they catch clicks. */
.winston-bubble{position:fixed;right:22px;bottom:22px;z-index:90;display:flex;align-items:center;gap:9px;
  padding:11px 16px 11px 13px;border-radius:9999px;cursor:pointer;color:#fff;font-weight:800;font-size:14px;
  background:var(--grad);border:0;box-shadow:0 10px 28px rgba(47,155,255,.42);transition:.16s;
  touch-action:none;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}   /* press-hold to drag */
.winston-bubble:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(47,155,255,.5)}
.winston-bubble.dragging{transform:scale(1.09);cursor:grabbing;opacity:.96;box-shadow:0 18px 42px rgba(47,155,255,.55)}
.winston-bubble svg{flex:none}
.winston-label{letter-spacing:.2px}
.winston-badge{position:absolute;top:-5px;right:-3px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;
  background:var(--danger);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 8px rgba(239,71,103,.5)}

.winston-panel{position:fixed;right:22px;bottom:84px;z-index:91;width:360px;max-width:calc(100vw - 44px);
  max-height:min(76vh,720px);display:flex;flex-direction:column;border-radius:var(--r-lg);
  background:var(--glass);border:1px solid var(--glass-bd);box-shadow:0 22px 60px rgba(40,70,120,.32);
  backdrop-filter:saturate(160%) blur(20px);-webkit-backdrop-filter:saturate(160%) blur(20px);overflow:hidden}
.winston-panel.hidden,.winston-badge.hidden{display:none}
.winston-head{display:flex;align-items:center;gap:8px;padding:13px 14px;border-bottom:1px solid var(--line)}
.winston-title{font-weight:800;font-size:15px;color:var(--ink)}
.winston-sub{font-weight:500;color:var(--soft);font-size:13px}
.winston-x{margin-left:auto;border:0;background:transparent;color:var(--soft);font-size:15px;cursor:pointer;
  width:26px;height:26px;border-radius:8px}
.winston-x:hover{background:rgba(24,48,80,.08);color:var(--ink)}

.winston-queue{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:9px;min-height:0}
.winston-empty{padding:14px 16px 4px;color:var(--soft);font-size:13px;line-height:1.45}
.winston-empty.hidden{display:none}
.wq-item{position:relative;display:flex;gap:9px;padding:9px;border-radius:12px;
  background:var(--panel2);border:1px solid var(--line)}
.wq-thumbs{display:flex;flex-direction:column;gap:4px;flex:none}
.wq-thumbs img{width:54px;height:54px;object-fit:cover;border-radius:7px;border:1px solid var(--line2);background:#fff}
.wq-body{flex:1;min-width:0}
.wq-comment{font-size:13px;color:var(--ink);line-height:1.4;white-space:pre-wrap;word-break:break-word}
.wq-tag{margin-top:5px;display:inline-block;font-size:11px;font-weight:700;color:var(--accent);
  background:rgba(47,155,255,.12);border:1px solid rgba(47,155,255,.3);padding:2px 7px;border-radius:7px}
.wq-x{position:absolute;top:6px;right:6px;border:0;background:rgba(24,48,80,.08);color:var(--soft);
  width:20px;height:20px;border-radius:6px;font-size:12px;cursor:pointer;line-height:1}
.wq-x:hover{background:var(--danger);color:#fff}

.winston-composer{border-top:1px solid var(--line);padding:11px 12px;display:flex;flex-direction:column;gap:8px;
  background:rgba(255,255,255,.5)}
/* draft screenshots show as a LARGE inline preview inside the note being composed (object-fit:contain
   so the whole captured window is visible, not a tiny square crop) */
.winston-shots{display:flex;gap:6px;flex-wrap:wrap}
.winston-shots:empty{display:none}
.winston-shots .ws-thumb{position:relative;width:100%}
.winston-shots img{display:block;width:100%;max-height:170px;object-fit:contain;border-radius:8px;
  border:1px solid var(--line2);background:#fff}
.winston-shots .ws-x{position:absolute;top:-5px;right:-5px;width:17px;height:17px;border-radius:50%;border:0;
  background:var(--danger);color:#fff;font-size:10px;cursor:pointer;line-height:1}
.winston-cap-row{display:flex;gap:7px}
.winston-cbtn{padding:7px 11px;border-radius:10px;border:1px solid var(--line2);background:var(--panel2);
  font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;transition:.14s}
.winston-cbtn:hover{background:#fff;box-shadow:var(--shadow)}
.winston-cbtn.add{margin-left:auto}
.winston-text{width:100%;min-height:56px;max-height:140px;resize:vertical;padding:9px 11px;border-radius:11px;
  background:#fff;border:1px solid var(--line2);font:inherit;font-size:13px;color:var(--ink)}
.winston-text:focus{outline:2px solid var(--accent);border-color:transparent}
.winston-add-row{display:flex;align-items:center;gap:8px}
.winston-ctx{font-size:11px;font-weight:700;color:var(--soft);background:rgba(24,48,80,.06);
  padding:3px 8px;border-radius:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.winston-make{padding:10px;border-radius:12px;border:0;background:var(--grad);color:#fff;font-weight:800;
  font-size:14px;cursor:pointer;box-shadow:0 8px 20px rgba(47,155,255,.34)}
.winston-make:hover{filter:brightness(1.05)}
.winston-make:disabled{opacity:.5;cursor:default;box-shadow:none}
/* Winston in-app agent: the working view (live log + result/restart), shown while "Make edits" runs */
.winston-work{display:flex;flex-direction:column;gap:9px;padding:11px 12px;min-height:0;flex:1}
.winston-work.hidden{display:none}
.winston-worktitle{display:flex;align-items:center;gap:8px;font-weight:800;font-size:13px;color:var(--ink)}
.winston-worktitle.done{color:var(--accent)}
.ws-spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--accent);
  animation:ws-spin .8s linear infinite;flex:none}
@keyframes ws-spin{to{transform:rotate(360deg)}}
.winston-log{flex:1 1 auto;min-height:80px;max-height:300px;overflow:auto;margin:0;padding:9px 11px;
  background:rgba(24,48,80,.05);border:1px solid var(--line2);border-radius:11px;white-space:pre-wrap;
  word-break:break-word;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}
.winston-result{display:flex;flex-direction:column;gap:9px}
.winston-result.hidden{display:none}
.ws-summary{font-size:13px;line-height:1.45;color:var(--ink)}
.ws-actions{display:flex;gap:7px;flex-wrap:wrap}
.winston-cbtn.primary{background:var(--grad);color:#fff;border:0;font-weight:800}
.winston-cbtn.primary:hover{filter:brightness(1.05)}
.winston-cbtn:disabled{opacity:.55;cursor:default;box-shadow:none}

/* in-app region selector (capture.js) — a full-window dim with a crosshair; drag draws the box */
#cap-select-overlay{position:fixed;inset:0;z-index:9999;cursor:crosshair;
  background:rgba(16,28,46,.30);-webkit-user-select:none;user-select:none}
#cap-select-box{position:absolute;display:none;border:2px solid var(--accent);border-radius:3px;
  background:rgba(47,155,255,.12);box-shadow:0 0 0 9999px rgba(16,28,46,.18)}
#cap-select-hint{position:absolute;top:18px;left:50%;transform:translateX(-50%);
  background:rgba(16,28,46,.86);color:#fff;font-size:13px;font-weight:700;padding:8px 14px;
  border-radius:999px;white-space:nowrap;pointer-events:none}

/* ====================================================================
   CHOOSE BRAND — its own screen after "Generate posts" (#view-brandpick)
   ==================================================================== */
#view-brandpick{overflow:auto;align-items:center;padding:22px 24px 56px}
.bp-wrap{width:100%;max-width:960px;display:flex;flex-direction:column;gap:18px}
.bp-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bp-intro{display:flex;flex-direction:column;gap:8px}
.bp-h2{font-size:26px;margin:0;font-weight:800;letter-spacing:-.02em}
.bp-sub{margin:0;color:var(--soft);font-size:14px;line-height:1.5;max-width:620px}
.bp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:4px}
.bp-loading,.bp-empty{grid-column:1/-1;display:flex;align-items:center;gap:10px;
  color:var(--soft);font-size:14px;padding:24px 4px}
.bp-empty{color:var(--danger)}
.bp-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;
  padding:18px;border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--glass-bd);
  box-shadow:var(--shadow);cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s}
.bp-card:hover:not(.disabled){transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(47,130,230,.22);border-color:rgba(47,155,255,.45)}
.bp-card.current{border-color:rgba(47,155,255,.6);box-shadow:0 0 0 2px rgba(47,155,255,.4),var(--shadow)}
.bp-card.disabled{opacity:.55;cursor:default;filter:grayscale(.45)}
.bp-avs{display:flex;align-items:center}
.bp-av{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid #fff;
  margin-left:-10px;background:#dce5f1;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.bp-avs .bp-av:first-child{margin-left:0}
.bp-av-ph{display:inline-flex;align-items:center;justify-content:center;font-weight:800;color:#fff;
  background:var(--grad);font-size:15px}
.bp-name{font-weight:800;font-size:16px;color:var(--ink);letter-spacing:-.01em}
.bp-card .bp-sub{font-size:12.5px;color:var(--soft);max-width:none}
.bp-go{margin-top:2px;font-weight:700;font-size:13px;color:var(--accent)}
.bp-locked{margin-top:2px;font-weight:600;font-size:12px;color:var(--soft)}

/* the in-posts brand switcher chip (distribute header) */
.dist-brandchip{display:inline-flex;align-items:center;gap:8px;padding:5px 11px 5px 6px;border-radius:999px;
  background:var(--panel2);border:1px solid var(--line2);font-weight:700;font-size:13px;color:var(--ink);
  cursor:pointer;transition:.15s;max-width:240px}
.dist-brandchip:hover:not(:disabled){background:#fff;box-shadow:var(--shadow)}
.dist-brandchip.busy{opacity:.6;cursor:default}
.dist-brandchip-av{width:26px;height:26px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;background:#dce5f1;font-size:12px;font-weight:800}
.dist-brandchip-av img{width:100%;height:100%;object-fit:cover;display:block}
.dist-brandchip-av.bp-av-ph{color:#fff;background:var(--grad)}
.dist-brandchip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dist-brandchip svg{color:var(--soft);flex:0 0 auto}

/* ====================================================================
   DISTRIBUTE — "Generate posts" screen (#view-distribute)
   ==================================================================== */
#view-distribute{overflow:auto;align-items:center;padding:22px 24px 56px}
.dist-wrap{width:100%;max-width:1180px;display:flex;flex-direction:column;gap:16px}
/* sticky header: stays pinned on scroll, fully OPAQUE so cards never bleed through it */
.dist-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  position:sticky;top:0;z-index:30;padding:12px 14px;margin:-22px -14px 2px;
  background:var(--bg);border-bottom:1px solid var(--line2);
  box-shadow:0 6px 18px -10px rgba(24,48,80,.30)}
.dist-head-l{display:flex;align-items:center;gap:12px;min-width:0}
.dist-head-r{display:flex;align-items:center;gap:10px}
#dist-publishall{white-space:nowrap}
.dist-h2{font-size:22px;margin:0;font-weight:800;letter-spacing:-.01em}
/* intro: eyebrow status-pill + one-line "what to do" copy, with room to breathe */
.dist-intro{display:flex;flex-direction:column;gap:11px;padding:10px 2px 2px}
.dist-intro .eyebrow{align-self:flex-start;font-size:11.5px;color:var(--accent);
  background:rgba(47,155,255,.1);border:1px solid rgba(47,155,255,.22);
  padding:6px 12px;border-radius:99px}
.dist-intro .eyebrow .dot{box-shadow:0 0 0 3px rgba(47,155,255,.16)}
.dist-introtxt{margin:0;color:var(--soft);font-size:13.5px;line-height:1.55;max-width:760px}
.dist-testchip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  color:#9a6b00;background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.30);
  padding:5px 11px;border-radius:999px}
.dist-grouplbl{font-size:12px;font-weight:700;color:var(--soft);text-transform:uppercase;letter-spacing:.04em}
.dist-group{padding:8px 12px;border-radius:11px;border:1px solid var(--line2);
  background:var(--panel2);min-width:200px;font-weight:600}
.dist-group:disabled{opacity:.6}

/* status line (loading / writing captions / warnings) */
.dist-status{display:flex;align-items:center;gap:10px;color:var(--soft);font-size:14px;
  min-height:0;padding:0 2px}
.dist-status:empty{display:none}
.dist-status.warn{color:var(--danger)}
.dist-status.writing,.dist-status.load{color:var(--accent);font-weight:600}
.dist-spin{width:16px;height:16px;border-radius:50%;flex:0 0 auto;
  border:2.5px solid rgba(47,155,255,.25);border-top-color:var(--accent);
  animation:dist-spin .7s linear infinite}
@keyframes dist-spin{to{transform:rotate(360deg)}}

/* horizontal carousel: cards slide left-right; ~3.4 show so the next card peeks ("more to slide") */
.dist-rail{position:relative;display:flex;align-items:stretch}
.dist-grid{--dcard-h:clamp(450px,62vh,580px);display:flex;gap:18px;align-items:flex-start;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;scroll-behavior:smooth;scroll-padding-left:2px;
  padding:6px 2px 16px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.dist-grid::-webkit-scrollbar{display:none}
.dist-grid > *{flex:0 0 clamp(280px,calc((100% - 2.4*18px)/3.4),350px);scroll-snap-align:start}
/* slide arrows (shown only when the row overflows) */
.dist-arrow{position:absolute;top:42%;transform:translateY(-50%);z-index:8;
  width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:700;line-height:1;color:var(--accent);padding-bottom:3px;
  background:rgba(255,255,255,.92);border:1px solid var(--line2);box-shadow:var(--shadow);
  cursor:pointer;transition:.15s}
.dist-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.dist-arrow-l{left:-8px}
.dist-arrow-r{right:-8px}
.dist-arrow[hidden]{display:none}

/* ---- caption-writing loading: progress bar + skeleton posts that "write" platform by platform ---- */
.dist-loadbar{flex-direction:column;align-items:stretch;gap:7px;width:100%;color:var(--ink)}
.dl-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.dl-label{font-weight:700;font-size:14px;color:var(--accent)}
.dl-pct{font-weight:700;font-size:13px;color:var(--soft);font-variant-numeric:tabular-nums}
.dl-track{height:7px;border-radius:99px;background:rgba(47,155,255,.14);overflow:hidden}
.dl-track i{display:block;height:100%;width:0;border-radius:99px;background:var(--grad);
  box-shadow:0 0 10px rgba(47,155,255,.5);transition:width .4s cubic-bezier(.4,0,.2,1)}
.dsk{display:flex;flex-direction:column;height:var(--dcard-h);border-radius:var(--r-lg);background:var(--glass);
  border:1px solid var(--glass-bd);box-shadow:var(--shadow);overflow:hidden;padding:11px;gap:9px;
  opacity:.6;transform:scale(.985);transition:opacity .35s,transform .35s,box-shadow .35s}
.dsk.active{opacity:1;transform:scale(1);
  box-shadow:0 16px 40px rgba(47,130,230,.26),0 0 0 2px rgba(47,155,255,.45)}
.dsk-head{display:flex;align-items:center;gap:9px}
.dsk-logo{width:22px;height:22px;flex:0 0 auto;display:inline-flex}
.dsk-logo svg{width:100%;height:100%}
.dsk-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.dsk-name{font-weight:700;font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dsk-acts{display:flex;gap:6px;flex:0 0 auto}
.sk-btn{height:26px;width:60px;border-radius:99px}
.dsk-media{position:relative;flex:1 1 auto;min-height:0;border-radius:12px;overflow:hidden;
  background:linear-gradient(135deg,#dde7f4,#eef3fb)}
.dsk-pen{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:24px;opacity:0;transition:opacity .3s}
.dsk.active .dsk-pen{opacity:1;animation:dsk-pen 1s ease-in-out infinite}
@keyframes dsk-pen{0%,100%{transform:translate(-50%,-50%) rotate(-9deg)}50%{transform:translate(-52%,-56%) rotate(9deg)}}
.dsk-cap{display:flex;flex-direction:column;gap:7px}
.dsk-tags{display:flex;gap:6px;opacity:0;transform:translateY(4px);transition:opacity .4s,transform .4s}
.dsk.tags-in .dsk-tags{opacity:1;transform:none}
.sk{position:relative;overflow:hidden;border-radius:6px;background:#dce5f1}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.78),transparent);animation:sk-shimmer 1.3s infinite}
.dsk.active .sk::after{animation-duration:.85s}
@keyframes sk-shimmer{100%{transform:translateX(100%)}}
.sk-l{height:9px}.sk-handle{height:9px;width:42%}
.w95{width:95%}.w85{width:85%}.w72{width:72%}.w52{width:52%}
.sk-tag{height:16px;width:48px;border-radius:99px}
@media (prefers-reduced-motion:reduce){
  .sk::after,.dsk.active .dsk-pen{animation:none}
}

/* a post card = preview on top, editable caption + publish below */
.dcard{position:relative;display:flex;flex-direction:column;height:var(--dcard-h);border-radius:var(--r-lg);
  background:var(--glass);border:1px solid var(--glass-bd);box-shadow:var(--shadow);
  overflow:hidden;transition:box-shadow .2s,transform .2s}
.dcard[data-state="publishing"]{box-shadow:0 0 0 2px rgba(47,155,255,.55),var(--shadow)}
.dcard[data-state="published"]{box-shadow:0 0 0 2px rgba(31,184,102,.55),var(--shadow)}
.dcard[data-state="failed"]{box-shadow:0 0 0 2px rgba(239,71,103,.45),var(--shadow)}

/* ---- card internals: header (logo + handle + Schedule/Publish) ---- */
.dcard-head{display:flex;align-items:center;gap:8px;padding:10px 12px 8px}
.dcard-logo{width:21px;height:21px;flex:0 0 auto;display:inline-flex}
.dcard-logo svg{width:100%;height:100%}
.dcard-id{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.18}
.dcard-name{font-weight:700;font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcard-handle{font-size:10.5px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dcard-acts{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.dcard-sched{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:11.5px;color:var(--accent);
  background:rgba(47,155,255,.1);border:1px solid rgba(47,155,255,.28);border-radius:99px;padding:5px 9px;
  cursor:pointer;white-space:nowrap;transition:.15s}
.dcard-sched svg{flex:0 0 auto}
.dcard-sched:hover:not(:disabled){background:rgba(47,155,255,.18)}
.dcard-sched:disabled{opacity:.5;cursor:default}
.dcard-pub{flex:0 0 auto}
.dcard-pub.publishing{opacity:.85}
.dcard-pub.scheduled{background:rgba(31,184,102,.14);color:var(--good);border:1px solid rgba(31,184,102,.4);box-shadow:none}

/* video fills the media box edge-to-edge (no side bars); cover-crops the 9:16 short to width */
.dcard-media{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:#0a1018}
.dcard-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#0a1018}
/* "See Posts" review card: hover overlay over the video — Post Published + Edit + Repost */
.dcard-pub-ov{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;background:rgba(8,18,36,.5);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  opacity:0;transition:opacity .15s;pointer-events:none}
.dcard.published:hover .dcard-pub-ov,.dcard-pub-ov:focus-within{opacity:1;pointer-events:auto}
.dcard-pub-lab{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:12.5px;color:#fff;
  background:rgba(31,184,102,.92);padding:6px 13px;border-radius:99px;box-shadow:0 4px 14px rgba(0,0,0,.32)}
.dcard-pub-btns{display:flex;gap:8px}
.dcard-pub-view{font-size:11.5px;font-weight:700;color:#fff;opacity:.9;cursor:pointer;text-decoration:underline}
.dcard-pub-view:hover{opacity:1}

/* clamped caption — click to open the in-card editor */
.dcard-cap{display:flex;align-items:flex-start;gap:8px;width:100%;text-align:left;cursor:pointer;
  padding:9px 12px;background:transparent;border:none;border-top:1px solid var(--line);transition:background .15s}
.dcard-cap:hover{background:rgba(47,155,255,.06)}
.dcard-cap-txt{flex:1;min-width:0;font-size:12px;line-height:1.4;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dcard-cap.empty .dcard-cap-txt{color:var(--soft)}
.dcard-cap-edit{flex:0 0 auto;font-size:10.5px;font-weight:700;color:var(--accent);opacity:.85;margin-top:1px}

.dcard-foot{display:flex;align-items:center;gap:10px;padding:0 12px 11px}
.dcard-regen{color:var(--accent);font-weight:700;font-size:12px;cursor:pointer;white-space:nowrap;flex:0 0 auto}
.dcard-regen:hover{text-decoration:underline}
.dcard-state{font-size:11.5px;font-weight:600;flex:1;min-width:0;text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--soft)}
.dcard-state.warn{color:var(--danger)}
.dcard-state.good{color:var(--good)}
.dcard-state.writing{color:var(--accent)}

/* ---- in-card overlays (editor + calendar): fill the card so its height never changes ---- */
.dcard-ovl{position:absolute;inset:0;z-index:14;display:flex;flex-direction:column;gap:9px;
  padding:12px;border-radius:var(--r-lg);background:rgba(252,253,255,.975);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);overflow:auto}
.dce-head{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:0 0 auto}
.dce-ttl{font-weight:800;font-size:13px;color:var(--ink)}
.dce-x{width:26px;height:26px;border-radius:50%;border:none;background:rgba(10,30,60,.07);color:var(--soft);
  font-size:12px;cursor:pointer;flex:0 0 auto;line-height:1}
.dce-x:hover{background:rgba(10,30,60,.14);color:var(--ink)}
.dce-title{width:100%;flex:0 0 auto;font:inherit;font-size:13px;font-weight:700;padding:8px 10px;
  border:1px solid var(--line2);border-radius:9px;background:#fff;color:var(--ink)}
.dce-area{flex:1 1 auto;min-height:110px;resize:none;font:inherit;font-size:12.5px;line-height:1.45;
  padding:9px 10px;border:1px solid var(--line2);border-radius:10px;background:#fff;color:var(--ink)}
.dce-area:focus,.dce-title:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(47,155,255,.25)}
.dce-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:0 0 auto}
.dce-count{font-size:11px;color:var(--soft);font-variant-numeric:tabular-nums}
.dce-btns{display:flex;gap:8px}

/* calendar (Schedule) */
.dcal-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:0 0 auto}
.dcal-month{font-weight:700;font-size:13px;color:var(--ink)}
.dcal-nav{width:28px;height:28px;border-radius:8px;border:1px solid var(--line2);background:#fff;
  color:var(--accent);font-size:17px;line-height:1;cursor:pointer}
.dcal-nav:disabled{opacity:.35;cursor:default;color:var(--soft)}
.dcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;flex:0 0 auto}
.dcal-dow{text-align:center;font-size:10px;font-weight:700;color:var(--soft);padding:2px 0}
.dcal-day{aspect-ratio:1;border:none;background:transparent;border-radius:8px;cursor:pointer;
  font-size:12px;color:var(--ink);font-weight:600;display:flex;align-items:center;justify-content:center}
.dcal-day:hover:not([disabled]){background:rgba(47,155,255,.14)}
.dcal-day.sel{background:var(--accent);color:#fff}
.dcal-day[disabled]{opacity:.28;cursor:default}
.dcal-pad{aspect-ratio:1}
.dcal-timerow{display:flex;align-items:center;gap:9px;flex:0 0 auto;margin-top:2px}
.dcal-tlab{font-size:12px;font-weight:700;color:var(--soft)}
.dcal-time{flex:1;font:inherit;font-size:12.5px;padding:7px 9px;border:1px solid var(--line2);
  border-radius:9px;background:#fff;color:var(--ink)}
.dcal-when{font-size:11.5px;font-weight:700;color:var(--accent)}
.dcard-view{flex:0 0 auto;color:var(--accent);border-color:rgba(47,155,255,.35)}
.dcard-ring{display:inline-block;width:13px;height:13px;border-radius:50%;margin-right:7px;
  vertical-align:-2px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;
  animation:dist-spin .65s linear infinite}

/* the go-live moment over the preview */
.dcard-golive{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;
  background:rgba(12,28,52,.42);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.dgl-ring{width:62px;height:62px;border-radius:50%;
  border:4px solid rgba(255,255,255,.30);border-top-color:#fff;
  animation:dist-spin .8s linear infinite;box-shadow:0 0 22px rgba(47,155,255,.6)}
.dgl-lab{color:#fff;font-weight:800;font-size:14px;letter-spacing:.01em;text-shadow:0 2px 8px rgba(0,20,50,.5)}
.dgl-lab.good{color:#bdf5d6}
.dcard-golive.done{background:rgba(8,40,24,.46)}
.dgl-check svg{display:block}
.dgl-c{stroke:#1fb866;stroke-width:3;stroke-dasharray:151;stroke-dashoffset:151;
  animation:dgl-circle .5s ease-out forwards}
.dgl-tick{stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:48;stroke-dashoffset:48;animation:dgl-tick .35s .42s ease-out forwards}
@keyframes dgl-circle{to{stroke-dashoffset:0}}
@keyframes dgl-tick{to{stroke-dashoffset:0}}

/* ===== edit-style picker (shown after upload) ===== */
.style-pick-wrap{width:100%;max-width:860px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.style-cards{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin:30px 0 22px;width:100%}
.style-card{position:relative;flex:1 1 320px;max-width:362px;text-align:left;
  background:var(--panel2);border:1px solid var(--line2);border-radius:22px;padding:20px;
  box-shadow:var(--shadow);transition:transform .15s,border-color .15s,box-shadow .15s}
.style-card:hover{transform:translateY(-4px);border-color:var(--accent2);box-shadow:0 18px 40px rgba(37,99,235,.22)}
.style-card.feat{border-color:rgba(37,99,235,.35);background:linear-gradient(180deg,rgba(77,161,255,.10),rgba(255,255,255,.92))}
.style-card-badge{position:absolute;top:16px;right:16px;z-index:2;padding:5px 11px;border-radius:999px;
  font-weight:800;font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--grad);
  box-shadow:0 6px 16px rgba(37,99,235,.3)}
.style-card-vis{height:172px;border-radius:16px;margin-bottom:16px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 0,#eaf3ff,#dbe7f6);overflow:hidden}
.style-card-vis.nick{background:radial-gradient(120% 120% at 50% 0,#e7f0ff,#cfe0f5)}
.sc-phone{position:relative;width:88px;height:150px;border-radius:16px;background:linear-gradient(160deg,#36506e,#22384f);
  box-shadow:0 10px 24px rgba(11,18,32,.28);overflow:hidden}
.sc-face{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#f0c9a8,#d99f73)}
.sc-cap{position:absolute;left:14%;right:14%;bottom:18%;height:9px;border-radius:4px;background:rgba(255,255,255,.92);
  box-shadow:0 0 0 2px rgba(0,0,0,.16)}
.sc-box{position:absolute;border-radius:7px;background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.85)}
.sc-box.b1{left:8%;top:11%;width:42%;height:30%}
.sc-box.b2{right:8%;top:23%;width:34%;height:22%;background:rgba(77,161,255,.55)}
.style-card-name{font-weight:800;font-size:20px;letter-spacing:-.01em}
.style-card-desc{margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--soft)}
.style-card-go{margin-top:14px;font-weight:800;font-size:13px;color:var(--accent)}
#btn-style-back{margin-top:4px}
@media(max-width:680px){.style-cards{flex-direction:column;align-items:center}.style-card{width:100%;max-width:420px}}