/* Take7 — design system. Brand v2: Nunito headlines + Plus Jakarta Sans body + Geist Mono labels. All self-hosted (variable), no third-party font CDN. */
@font-face{
  font-family:'Nunito'; font-style:normal; font-weight:200 1000; font-display:swap;
  src:url('/static/fonts/nunito.woff2') format('woff2');
}
@font-face{
  font-family:'Geist'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('/static/fonts/geist.woff2') format('woff2');
}
@font-face{
  font-family:'Geist Mono'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('/static/fonts/geistmono.woff2') format('woff2');
}
@font-face{
  font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:200 800; font-display:swap;
  src:url('/static/fonts/jakarta.woff2') format('woff2');
}
:root{
  --ink:#F7F5F0; --panel:#FFFFFF; --panel-2:#EFEDE6; --line:#E6E2D9;
  --paper:#211E17; --muted:#6B6458;
  --purple:#7C5CD6; --purple-hi:#6E51CC; --orange:#F9534B; --red:#E5322B; --mint:#1FA877;
  /* --mint-ink: darker mint reserved for small text on light surfaces (bright --mint fails
     AA on white below ~14px). Use for counters/labels, not chips/borders. */
  --mint-ink:#0F7A52;
  --amber:#FFCB5E; --lav:#ECE6FB;
  --off:#D7D2C6; --bar:rgba(247,245,240,.9); --glow:rgba(255,203,94,.14); --shadow:0 6px 22px rgba(60,50,30,.09);
  /* Brand v2 type: Nunito headlines, Plus Jakarta Sans body, Geist Mono labels.
     (v1 was --disp:"Nunito"; --body:"Plus Jakarta Sans"; --mono:"Space Mono") */
  --disp:"Nunito",system-ui,sans-serif;
  --body:"Plus Jakarta Sans",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,monospace;

  /* Fly-style shell system (dashboard restyle). Public API — names frozen for the
     Editor lane; see docs/DESIGN-SYSTEM.md before renaming any of these. */
  --surface-grad:linear-gradient(160deg, #FCFBFF 0%, #F6F1FC 42%, #EBE4FA 100%);
  --card-bg:#FFFFFF;
  --card-radius:16px;
  --card-shadow:0 1px 2px rgba(40,28,80,.05), 0 10px 30px rgba(96,72,180,.07);
  --card-pad:24px;
  --btn-radius:999px;
  --input-radius:12px;
  --sidebar-w:242px;
  --topnav-h:58px;
}
body.dark{
  --ink:#15130F; --panel:#211D17; --panel-2:#2B261E; --line:#3A3327;
  --paper:#F6F1E7; --muted:#A79E90;
  --purple:#7C5CD6; --purple-hi:#9A80E4; --orange:#F9534B; --red:#E5322B; --mint:#57D9A3;
  --mint-ink:#57D9A3; /* on the dark surface the bright mint already clears AA */
  --amber:#FFCB5E; --off:#403930;
  --bar:rgba(21,19,15,.86); --glow:rgba(255,203,94,.07); --shadow:none;
  /* Dark equivalents of the shell tokens: warm film-bay instead of lavender. */
  --surface-grad:var(--ink);
  --card-bg:var(--panel);
  --card-shadow:0 1px 2px rgba(0,0,0,.30), 0 12px 34px rgba(0,0,0,.38);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background-color:var(--ink); color:var(--paper); font-family:var(--body);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased;
  background-image:var(--surface-grad);
  background-repeat:no-repeat;
  min-height:100vh;
}
/* Dark keeps the warm tungsten glow over near-black instead of the lavender wash. */
body.dark{background-image:radial-gradient(1200px 500px at 70% -10%, var(--glow), transparent 60%)}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px}
a{color:inherit}

/* App bar */
.bar{border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bar); backdrop-filter:blur(8px); z-index:10}
.bar .wrap{display:flex; align-items:center; justify-content:center; gap:18px; padding:18px 28px}
.brand{display:flex; align-items:center; gap:9px; font-family:'Geist',var(--disp); font-weight:600; letter-spacing:-.02em; font-size:20px; text-transform:lowercase; text-decoration:none}
.brand svg{display:block}
.brand-mark{display:block; height:28px; width:auto}
.brand .b7{color:var(--purple)}
.scene{color:var(--muted); font-size:13px; font-family:var(--mono); letter-spacing:.02em; padding-left:18px; border-left:1px solid var(--line)}
.scene b{color:var(--paper); font-weight:400}

/* Hero header */
.head{padding:40px 0 26px}
h1{font-family:var(--disp); font-weight:800; font-size:48px; line-height:1.06; margin:0 0 10px; letter-spacing:-.02em; text-wrap:balance}
h1 b{font-weight:900}
.sub{color:var(--muted); font-size:16px; max-width:48ch; margin:0; text-wrap:balance}

/* Upload */
.drop{margin:34px 0 60px; border:1.5px dashed var(--line); border-radius:16px; background:var(--panel); box-shadow:var(--shadow); padding:64px 28px; text-align:center; transition:border-color .15s, background .15s}
.drop.over{border-color:var(--purple); background:var(--panel-2)}
.drop h2{font-family:var(--disp); font-weight:800; font-size:24px; margin:18px 0 8px}
.drop p{color:var(--muted); margin:0 0 22px}
.bigclap{width:54px; height:54px}
.pick{font-family:var(--body); font-weight:700; font-size:15px; border:none; border-radius:13px; padding:13px 22px; cursor:pointer; background:var(--purple); color:#fff}
.pick:hover{background:var(--purple-hi)}
.hint{font-family:var(--mono); font-size:11.5px; color:var(--muted); margin-top:18px}

/* Processing state */
.state{margin:60px 0; text-align:center; color:var(--muted)}
.state .step{font-family:var(--mono); font-size:13px; letter-spacing:.04em; color:var(--paper); margin-top:14px}
#procstep.swap{animation:msgfade .5s ease}
@keyframes msgfade{from{opacity:0; transform:translateY(2px)}to{opacity:1; transform:none}}
.spinner{width:34px; height:34px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--purple); margin:0 auto; animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.substep{font-family:var(--mono); font-size:11.5px; color:var(--muted); margin-top:8px}

/* Progress bar (shared: upload + processing) */
.upbar{height:8px; border-radius:999px; background:var(--panel-2); border:1px solid var(--line); overflow:hidden; position:relative}
.upbar.big{height:10px; max-width:420px; margin:0 auto}
.upbar > span{display:block; height:100%; width:0; border-radius:999px; position:relative;
  background:linear-gradient(90deg,var(--purple),var(--purple-hi)); transition:width .2s linear}
.upbar > span::after{content:""; position:absolute; inset:0; border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent); animation:shimmer 1.4s linear infinite}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* Upload card */
.drop.uploading{text-align:center}
.drop.uploading h2{margin:0 0 6px}
.up-name{font-family:var(--mono); font-size:12px; color:var(--muted); margin:0 0 22px}
.upmeta{display:flex; justify-content:space-between; gap:12px; margin-top:12px; max-width:420px; margin-left:auto; margin-right:auto;
  font-family:var(--mono); font-size:12px; color:var(--muted)}
#up-pct{color:var(--paper); font-weight:700}

/* Takes rail */
.takes{display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:16px; padding-bottom:8px}
.slate{background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden; position:relative; box-shadow:var(--shadow); transition:transform .15s ease, border-color .15s ease}
.slate:hover{transform:translateY(-3px)}
.slate .thumb{aspect-ratio:16/9; background-size:cover; background-position:center; position:relative; cursor:pointer}
.thumb::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(21,19,15,.55), transparent 55%)}
.dur{position:absolute; right:8px; bottom:8px; z-index:2; color:#F6F1E7; font-family:var(--mono); font-size:11px; background:rgba(21,19,15,.78); border:1px solid rgba(255,255,255,.08); padding:3px 7px; border-radius:6px}
.sbody{padding:13px 14px 15px}
.shead{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px}
.tk{font-family:var(--disp); font-weight:800; font-size:14px; letter-spacing:.1em}
.tk span{color:var(--muted); font-weight:600}
.chip{font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px; background:rgba(87,217,163,.14); color:var(--mint); border:1px solid rgba(87,217,163,.34)}
.meta{font-family:var(--mono); font-size:11.5px; color:var(--muted); letter-spacing:.01em; margin-bottom:13px; display:flex; gap:8px; flex-wrap:wrap}
.meta .ok{color:var(--mint)}
/* Shared pill button (frozen public API: .btn / .btn.primary — see docs/DESIGN-SYSTEM.md). */
.btn{font-family:var(--body); font-weight:600; font-size:13.5px; border-radius:var(--btn-radius); padding:10px 18px; border:1px solid var(--line); background:var(--card-bg); color:var(--paper); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; transition:background .15s,border-color .15s,transform .06s}
.btn:hover{background:var(--panel-2)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--purple); outline-offset:2px}
.btn.primary{background:var(--purple); color:#fff; border-color:var(--purple); font-weight:700}
.btn.primary:hover{background:var(--purple-hi); border-color:var(--purple-hi)}
/* Slates keep full-width action buttons (results/takes UI, Editor lane). */
.slate .btn{width:100%}

/* Selected slate */
.slate.sel{border-color:var(--purple)}
.slate.sel .stripe{position:absolute; top:0; left:0; right:0; height:6px; z-index:3;
  background:repeating-linear-gradient(115deg, var(--orange) 0 14px, #15130F 14px 28px)}

/* "Adjust takes" tool card — same frame as a slate, centered button(s) */
.slate.tool{display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; border:1.5px dashed var(--line); background:transparent; box-shadow:none;
  min-height:210px; padding:22px}
.slate.tool:hover{transform:none; border-color:var(--purple)}
.slate.tool .btn{width:auto; min-width:130px}
.slate.sel .thumb{margin-top:6px}
.btn.selbtn{background:var(--purple); color:#fff; border-color:var(--purple); font-weight:700}
.btn.selbtn:hover{background:var(--purple-hi)}

/* Polish panel */
/* NOTE: editor.css owns .polish layout (two-column grid). This legacy copy is base styling
   only — keep the grid definition in editor.css, not here. */
.polish{margin:30px 0 60px; background:var(--panel); border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:var(--shadow)}
.ptag{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--purple)}
.viewer{padding:22px}
.vhead{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 0 14px}
.vhead h2{font-family:var(--disp); font-weight:800; font-size:19px; margin:0}
.screen{aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#000; background-size:cover; background-position:center; position:relative; border:1px solid var(--line)}
.screen video{width:100%; height:100%; object-fit:contain; display:block; background:#000}
.screen.busy::after{content:""; position:absolute; inset:0; z-index:4; background:rgba(21,19,15,.5);
  border-radius:14px; background-image:none}
.screen.busy::before{content:""; position:absolute; left:50%; top:50%; width:36px; height:36px; margin:-18px 0 0 -18px;
  z-index:5; border-radius:50%; border:3px solid rgba(246,241,231,.3); border-top-color:var(--purple); animation:spin 1s linear infinite}
/* Before/After: dark pill, in the header (clear of the video's native scrubber) */
.ba{display:inline-flex; background:#211D17; border:1px solid rgba(255,255,255,.08); border-radius:999px; padding:3px; font-size:12.5px; font-weight:600; flex:none}
.ba button{font-family:var(--body); font-weight:600; font-size:12.5px; border:none; background:transparent; padding:5px 13px; border-radius:999px; color:rgba(246,241,231,.72); cursor:pointer}
.ba button.on{background:#F6F1E7; color:#1a1304}
/* Visual trim: draggable in/out handles under the video */
.trim{margin-top:14px}
.trim-track{position:relative; height:30px; background:var(--panel-2); border:1px solid var(--line); border-radius:8px; touch-action:none}
/* faint band marking what the detector originally picked; handles dragged outside it add footage back */
.trim-detected{position:absolute; top:0; bottom:0; background:rgba(255,255,255,.05); border-left:1px dashed var(--line); border-right:1px dashed var(--line)}
.trim-fill{position:absolute; top:0; bottom:0; background:rgba(124,92,214,.26); border-left:2px solid var(--purple); border-right:2px solid var(--purple)}
.trim-h{position:absolute; top:-3px; width:14px; height:36px; margin-left:-7px; border-radius:5px; background:var(--purple); border:1px solid var(--purple-hi); cursor:ew-resize}
.trim-h::after{content:""; position:absolute; left:5px; top:9px; width:2px; height:18px; background:#fff; border-radius:1px; box-shadow:2px 0 0 #fff,-2px 0 0 #fff}
.trim-row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px}
.trim-label{font-family:var(--mono); font-size:11.5px; color:var(--muted)}
.trim-apply{width:auto; padding:8px 16px}
.trim-apply[disabled]{opacity:.5; cursor:default}
.rail{padding:22px 22px 22px 8px; border-left:1px solid var(--line); display:flex; flex-direction:column; gap:4px}
.ctrl{display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:60px; padding:12px 0; border-bottom:1px solid var(--line)}
.ctrl > div:first-child{flex:1; min-width:0}   /* text column flexes; control stays pinned right */
.ctrl .seg{flex:none}
.ctrl .lab{font-weight:600; font-size:14.5px}
.ctrl .desc{color:var(--muted); font-size:12.5px; margin-top:2px}
.sw{width:46px; height:26px; border-radius:999px; background:var(--purple); position:relative; flex:none; cursor:pointer; border:none}
.sw::after{content:""; position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%; background:#fff}
.sw.off{background:var(--off)}
.sw.off::after{right:auto; left:3px; background:var(--muted)}
.seg{display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; font-size:12.5px; font-weight:600; flex:none}
.seg button{font-family:var(--body); font-weight:600; font-size:12.5px; border:none; background:transparent; padding:7px 12px; color:var(--muted); cursor:pointer}
.seg button.on{background:var(--purple); color:#fff}
.sw:focus-visible,.seg button:focus-visible,.ba button:focus-visible{outline:2px solid var(--purple); outline-offset:2px}
.actions{margin-top:auto; padding-top:18px; display:flex; flex-direction:column; gap:10px}
.dl{font-family:var(--body); font-weight:700; font-size:15px; border:none; border-radius:13px; padding:14px; cursor:pointer; background:var(--purple); color:#fff}
.dl:hover{background:var(--purple-hi)}
.dl[disabled]{opacity:.55; cursor:default}
.vert{font-family:var(--body); font-weight:600; font-size:14px; border-radius:13px; padding:12px; cursor:pointer; background:transparent; color:var(--paper); border:1px solid var(--line)}
.vert:hover{background:var(--panel-2)}
.dl:focus-visible,.vert:focus-visible{outline:2px solid var(--purple); outline-offset:2px}
.polish-state{font-family:var(--mono); font-size:12px; color:var(--muted); margin-top:10px; text-align:center}

/* Coaching (Lane S) */
.coach{margin:0 0 60px; background:var(--panel); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); overflow:hidden}
.coach-head{padding:22px 24px 0}
.coach-head h2{font-size:18px; font-weight:800}
.coach-head .desc{color:var(--muted); font-size:13px; margin-top:3px}
.coach-body{padding:16px 24px 26px; display:flex; flex-direction:column; gap:12px}
.coach-lab{font-size:13px; color:var(--muted)}
.scriptbox{font-family:var(--body); font-size:14px; line-height:1.5; color:var(--paper); background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:12px 14px; min-height:84px; resize:vertical; width:100%; box-sizing:border-box}
.scriptbox:focus-visible{outline:2px solid var(--purple); outline-offset:1px}
.coach-body .dl{align-self:flex-start; padding:12px 20px}
.coach-state{font-family:var(--mono); font-size:12px; color:var(--muted)}
.coach-state.err{color:var(--red)}
.score{display:flex; flex-direction:column; gap:12px; margin-top:6px}
.scard{border:1px solid var(--line); border-radius:14px; padding:14px 16px; background:var(--panel-2)}
.sc-h{font-weight:600; font-size:14px; display:flex; align-items:baseline; gap:8px}
.sc-h b{font-family:var(--mono); font-size:18px; color:var(--mint)}
.sc-sub{color:var(--muted); font-size:12.5px; margin-top:4px}
.sc-row{display:flex; flex-wrap:wrap; gap:18px; margin-top:8px; font-size:13.5px; color:var(--paper)}
.sc-row b{font-family:var(--mono); color:var(--purple)}
.lns{display:flex; flex-direction:column; gap:6px; margin-top:10px}
.ln{display:flex; gap:10px; align-items:baseline; font-size:13.5px; padding:6px 10px; border-radius:9px; border-left:3px solid var(--line); background:var(--panel)}
.ln .lncov{font-family:var(--mono); font-size:11.5px; color:var(--muted); min-width:42px}
.ln.hit{border-left-color:var(--mint)}
.ln.para{border-left-color:var(--amber)}
.ln.miss{border-left-color:var(--red)}
.notes{margin:8px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:7px}
.notes li{font-size:13.5px; line-height:1.5}
.disc{font-size:11.5px; color:var(--muted); line-height:1.5; margin-top:2px}

/* Zones */
.zone{margin:8px 0 22px}
.zhead{display:flex; align-items:baseline; gap:12px; margin:0 0 14px}
.ztitle{font-family:var(--disp); font-weight:800; font-size:20px; margin:0}
.zsub{font-family:var(--mono); font-size:11.5px; color:var(--muted)}

/* Card tools (star + trash), per-take label input */
.cardtools{position:absolute; top:8px; right:8px; z-index:4; display:flex; gap:6px; opacity:0; transition:opacity .12s}
.slate:hover .cardtools, .slate.sel .cardtools{opacity:1}
.ic{width:30px; height:30px; border-radius:9px; border:1px solid rgba(255,255,255,.14); background:rgba(21,19,15,.62);
  color:#F6F1E7; font-size:14px; line-height:1; cursor:pointer; display:grid; place-items:center; backdrop-filter:blur(3px)}
.ic:hover{background:rgba(21,19,15,.82)}
/* SVG icons (e.g. trash) size themselves rather than relying on the emoji-tuned font-size,
   so they sit optically centered in the 30px box regardless of glyph metrics. */
.ic svg{width:15px; height:15px; display:block}
.ic.star{color:rgba(246,241,231,.6)}
.ic.star.on{color:var(--amber); border-color:rgba(255,203,94,.5); opacity:1}
.slate .cardtools .ic.star.on{opacity:1}
.slate:has(.ic.star.on) .cardtools{opacity:1}
.ic:focus-visible{outline:2px solid var(--purple); outline-offset:2px}
.tklabel{font-family:var(--disp); font-weight:800; font-size:13.5px; letter-spacing:.02em; color:var(--paper);
  background:transparent; border:1px solid transparent; border-radius:7px; padding:3px 5px; min-width:0; flex:1; width:100%}
.tklabel:hover{border-color:var(--line)}
.tklabel:focus-visible{outline:none; border-color:var(--purple); background:var(--panel-2)}
.donetag{position:absolute; left:8px; bottom:8px; z-index:2; color:var(--mint); font-family:var(--mono); font-size:10.5px;
  background:rgba(21,19,15,.78); border:1px solid rgba(87,217,163,.3); padding:3px 7px; border-radius:6px}
.slate[draggable=true]{cursor:grab}
body.dragging-take .takes, body.dragging-take .trashdrawer{outline:2px dashed var(--purple); outline-offset:4px; border-radius:14px}

/* Indeterminate progress bar */
.prog{height:4px; background:var(--panel-2); overflow:hidden; position:relative}
.prog.wide{margin-top:12px; border-radius:999px}
.prog span{position:absolute; left:-40%; top:0; bottom:0; width:40%; background:var(--purple); border-radius:999px;
  animation:slide 1.1s ease-in-out infinite}
@keyframes slide{0%{left:-40%}50%{left:60%}100%{left:120%}}

/* Finished zone */
.finished{padding:18px 0 0; border-top:1px dashed var(--line)}
.fingrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; margin-bottom:36px}
.fincard{background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow)}
.fincard.starred{border-color:rgba(255,203,94,.5)}
.finscreen{aspect-ratio:16/9; background:#000; position:relative}
.finscreen video{width:100%; height:100%; object-fit:contain; display:block; background:#000}
.finbody{padding:13px 14px}
.finhead{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px}
.fintitle{font-family:var(--disp); font-weight:800; font-size:14px}
.finstar{color:var(--amber)}
.ba.small button{padding:4px 10px; font-size:11.5px}
.findl{display:flex; gap:8px}
.findl .dl{flex:1; text-align:center; text-decoration:none; padding:11px; font-size:13.5px}
.findl .vert{flex:1; text-align:center; text-decoration:none; padding:11px; font-size:13px}

/* Trash drawer */
.trashdrawer{margin:0 0 46px; border:1px solid var(--line); border-radius:14px; background:var(--panel); overflow:hidden}
.trashhead{width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 16px;
  background:transparent; border:none; color:var(--paper); font-family:var(--body); font-size:14px; cursor:pointer}
.trashhead b{font-family:var(--mono); color:var(--muted)}
.trasharrow{font-family:var(--mono); font-size:11.5px; color:var(--muted)}
.trashlist{padding:0 14px 14px; display:flex; flex-direction:column; gap:8px}
.trashitem{display:flex; align-items:center; gap:12px; padding:8px; border:1px solid var(--line); border-radius:11px; background:var(--panel-2)}
.trashthumb{width:64px; height:36px; border-radius:6px; background-size:cover; background-position:center; flex:none; filter:grayscale(.6); opacity:.8}
.trashmeta{flex:1; display:flex; flex-direction:column; gap:2px; font-size:13.5px}
.trashmeta .dim{font-family:var(--mono); font-size:11px; color:var(--muted)}

/* Toasts */
.toasts{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:50;
  display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none}
.toast{pointer-events:auto; display:flex; align-items:center; gap:14px; background:var(--paper); color:var(--ink);
  font-size:13.5px; font-weight:600; padding:11px 16px; border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.22);
  opacity:0; transform:translateY(10px); transition:opacity .2s, transform .2s; max-width:min(92vw,460px)}
.toast.in{opacity:1; transform:translateY(0)}
.toast.ok{box-shadow:0 8px 30px rgba(31,168,119,.28)}
.toast.err{background:var(--red); color:#fff}
.toast-undo{pointer-events:auto; background:transparent; border:1px solid currentColor; color:inherit;
  font-family:var(--body); font-weight:700; font-size:12.5px; border-radius:8px; padding:5px 11px; cursor:pointer; opacity:.85}
.toast-undo:hover{opacity:1}

/* Success confetti */
.confetti{position:fixed; inset:0; pointer-events:none; z-index:40; overflow:hidden}
.confetti i{position:absolute; top:-12px; width:9px; height:14px; border-radius:2px; animation:fall 1.5s ease-in forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg); opacity:.2}}

/* Multi-select pickbox (always visible — selection is the primary batch mechanism;
   the reveal/opacity behavior lives nowhere now, editor.css owns the final look). */
.pickbox{position:absolute; top:8px; left:8px; z-index:4; cursor:pointer}
.pickbox input{width:20px; height:20px; accent-color:var(--purple); cursor:pointer; margin:0}
.slate.picked{border-color:var(--purple); box-shadow:0 0 0 2px rgba(124,92,214,.35), var(--shadow)}

/* Batch progress banner (Apply-to-All "X of N") */
.batchbanner{margin:0 0 22px; padding:14px 18px; border:1px solid var(--purple); border-radius:14px;
  background:linear-gradient(0deg, var(--lav), var(--panel)); box-shadow:var(--shadow)}
.bb-row{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px}
.bb-label{font-size:14.5px; font-weight:600}
.bb-label b{font-weight:700}
.bb-count{font-family:var(--mono); font-size:12px; color:var(--muted)}

/* Queued / working tags + bar tint */
.donetag.queued{color:var(--muted); border-color:var(--line)}
.donetag.working{color:var(--purple); border-color:rgba(124,92,214,.35)}
.prog.queued > span{background:var(--off); animation-duration:1.8s; opacity:.7}

/* Playback row (loop + speed) */
.playrow{display:flex; align-items:center; gap:12px; margin-top:12px}
.loopbtn{font-family:var(--body); font-weight:600; font-size:12.5px; border:1px solid var(--line); background:transparent;
  color:var(--paper); border-radius:10px; padding:7px 13px; cursor:pointer}
.loopbtn.on{background:var(--purple); color:#fff; border-color:var(--purple)}
.loopbtn:focus-visible{outline:2px solid var(--purple); outline-offset:2px}
.seg.speed{margin-left:auto}

/* Floating trash drop zone (only while dragging) */
.trashzone{position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); z-index:45;
  display:none; align-items:center; gap:10px; padding:14px 22px; border-radius:14px; font-weight:700; font-size:14px;
  color:var(--red); background:var(--panel); border:2px dashed var(--red); box-shadow:0 10px 30px rgba(0,0,0,.18);
  pointer-events:none; opacity:0; transition:opacity .15s, transform .15s}
body.dragging-take .trashzone{display:flex; pointer-events:auto; opacity:1; transform:translateX(-50%) translateY(0)}
.trashzone .tz-ic{font-size:18px}

@media (max-width:760px){
  h1{font-size:27px}
  .scene{display:none}
  .takes{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
  .fingrid{grid-template-columns:1fr}
  .cardtools{opacity:1}              /* no hover on touch: always show tools */
  .wrap{padding:0 18px}
  .toasts{left:12px; right:12px; transform:none; bottom:14px}
  .toast{width:100%; max-width:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}
  .confetti{display:none}}

/* ============================================================
   Fly-style shell + card system (dashboard restyle, brand v1).
   Public API — class names frozen for the Editor lane.
   See docs/DESIGN-SYSTEM.md. Reuses existing tokens + the shell tokens
   added to :root above (--surface-grad / --card-* / --btn-radius / --input-radius).
   ============================================================ */

/* ---- Card: soft rounded surface on the lavender page ---- */
.card{background:var(--card-bg); border:1px solid var(--line); border-radius:var(--card-radius);
  box-shadow:var(--card-shadow); padding:var(--card-pad)}
.card-head{display:flex; align-items:center; gap:11px; margin:0 0 16px}
.card-head .gi{width:30px; height:30px; border-radius:9px; background:var(--lav); color:var(--purple);
  display:grid; place-items:center; flex:none}
.card-head .gi svg{display:block}
.card-head h2{font-family:var(--disp); font-weight:800; font-size:18px; margin:0; letter-spacing:-.01em}
.card-head .act{margin-left:auto; font-size:13.5px; color:var(--purple-hi); font-weight:700; text-decoration:none}
.card-head .act:hover{text-decoration:underline}
.card .lead{color:var(--muted); font-size:14.5px; margin:0}
.card-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px 28px}
.card-grid .klabel{font-size:12px; letter-spacing:.02em; color:var(--muted); margin:0 0 4px}
.card-grid .kval{font-size:15.5px; font-weight:600; margin:0}
.card-grid .kval.ok{color:var(--mint)}

/* ---- Vertical spacing helper ---- */
.stack{display:flex; flex-direction:column; gap:16px}
.stack.tight{gap:10px}
.stack.loose{gap:26px}

/* ---- Fields: rounded inputs with a label ---- */
.field{display:flex; flex-direction:column; gap:6px; margin:0 0 14px}
.field label{font-weight:600; font-size:13px; color:var(--paper)}
.field input, .field textarea, .field select{
  width:100%; box-sizing:border-box; font-family:var(--body); font-size:15px; color:var(--paper);
  background:var(--card-bg); border:1px solid var(--line); border-radius:var(--input-radius);
  padding:12px 14px; transition:border-color .15s, box-shadow .15s}
.field textarea{min-height:96px; resize:vertical; line-height:1.5}
.field input::placeholder, .field textarea::placeholder{color:var(--muted)}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--purple); box-shadow:0 0 0 3px rgba(124,92,214,.16)}
.field .hint{font-family:var(--mono); font-size:11.5px; color:var(--muted)}

/* ---- Shell: topnav over (sidebar + main) ---- */
.shell{display:flex; flex-direction:column; min-height:100vh}
.shell-body{display:flex; align-items:flex-start; flex:1}

/* Top navigation bar (Fly-style strip: brand left, quick links + profile right) */
.topnav{position:sticky; top:0; z-index:50; height:var(--topnav-h); display:flex; align-items:center;
  gap:18px; padding:0 22px; background:rgba(255,255,255,.72); border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px)}
body.dark .topnav{background:rgba(21,19,15,.72)}
.topnav .brand{flex:none}
.topnav-links{display:flex; align-items:center; gap:4px; margin-left:auto}
.tn-item{display:flex; align-items:center; gap:7px; padding:8px 13px; border-radius:10px;
  color:var(--muted); text-decoration:none; font-weight:600; font-size:13.5px;
  transition:background .12s,color .12s}
.tn-item svg{display:block}
.tn-item:hover{background:var(--lav); color:var(--purple-hi)}
.tn-item.active{color:var(--purple-hi)}
.topnav-signin{flex:none; padding:8px 18px}

/* Profile avatar + dropdown */
.avatar-wrap{position:relative; flex:none}
.avatar-btn{display:flex; align-items:center; gap:9px; padding:5px 10px 5px 5px; border-radius:999px;
  border:1px solid transparent; background:transparent; cursor:pointer; font-family:var(--body);
  transition:background .12s,border-color .12s}
.avatar-btn:hover, .avatar-wrap.open .avatar-btn{background:var(--lav); border-color:var(--line)}
.avatar-btn:focus-visible{outline:2px solid var(--purple); outline-offset:2px}
.avatar{width:30px; height:30px; border-radius:50%; background:var(--lav); color:var(--purple-hi);
  display:grid; place-items:center; font-family:var(--disp); font-weight:800; font-size:13.5px; flex:none;
  border:1px solid rgba(124,92,214,.28)}
.avatar-name{font-weight:600; font-size:13.5px; color:var(--paper); max-width:14ch;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.avatar-caret{color:var(--muted); transition:transform .15s}
.avatar-wrap.open .avatar-caret{transform:rotate(180deg)}
.avatar-menu{position:absolute; right:0; top:calc(100% + 8px); min-width:184px; display:none;
  flex-direction:column; gap:2px; padding:6px; background:var(--card-bg); border:1px solid var(--line);
  border-radius:14px; box-shadow:0 16px 44px rgba(60,40,120,.16)}
.avatar-wrap.open .avatar-menu{display:flex}
.avatar-menu form{margin:0; display:contents}
.am-item{display:flex; align-items:center; gap:10px; width:100%; padding:9px 11px; border-radius:9px;
  border:none; background:none; color:var(--paper); font-family:var(--body); font-weight:600;
  font-size:13.5px; text-align:left; cursor:pointer; transition:background .12s}
.am-item svg{color:var(--muted); flex:none}
.am-item:hover{background:var(--lav)}
.am-item.disabled{opacity:.55; pointer-events:none}
.am-item .soon{margin-left:auto; font-family:var(--mono); font-size:9px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:1px 6px}

.sidebar{position:sticky; top:var(--topnav-h); align-self:stretch; width:var(--sidebar-w); flex:none;
  min-height:calc(100vh - var(--topnav-h)); display:flex; flex-direction:column; gap:6px; padding:18px 16px 22px;
  background:rgba(255,255,255,.58); border-right:1px solid var(--line); backdrop-filter:blur(10px)}
body.dark .sidebar{background:rgba(21,19,15,.5)}

/* Identity selector chip (Fly's "Organization" box analog — static v1) */
.sidebar-id{margin:0 0 10px}
.sid-label{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); padding:0 2px 6px}
.sid-box{display:flex; align-items:center; gap:9px; padding:10px 12px; border:1px solid var(--line);
  border-radius:12px; background:var(--card-bg); box-shadow:var(--card-shadow)}
.sid-ic{width:22px; height:22px; border-radius:7px; background:var(--lav); color:var(--purple);
  display:grid; place-items:center; flex:none}
.sid-name{font-weight:700; font-size:13.5px; color:var(--paper); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}

/* Hairline divider between sidebar nav groups */
.sidebar-div{border-top:1px solid var(--line); margin:9px 8px}
.sidebar-cta{margin:2px 0 10px; width:100%; font-weight:800; padding:12px 16px;
  background:linear-gradient(180deg,#8B6BE6,var(--purple)); border-color:transparent; color:#fff}
.sidebar-cta:hover{background:linear-gradient(180deg,#7E5CDC,var(--purple-hi)); border-color:transparent}
.sidebar-nav{display:flex; flex-direction:column; gap:3px}
.sidebar-sec{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); padding:14px 10px 5px; border-top:1px solid var(--line); margin-top:9px}
.nav-item{display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:11px;
  color:var(--paper); text-decoration:none; font-weight:600; font-size:14px;
  transition:background .12s,color .12s}
.nav-item .ni{width:20px; height:20px; flex:none; color:var(--muted); display:grid; place-items:center}
.nav-item .ni svg{display:block}
.nav-item:hover{background:var(--lav)}
.nav-item.active{background:var(--lav); color:var(--purple-hi)}
.nav-item.active .ni{color:var(--purple)}
.nav-item.disabled{opacity:.5; pointer-events:none}
.nav-item .soon{margin-left:auto; font-family:var(--mono); font-size:9px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:1px 6px}
.sidebar-foot{margin-top:auto; padding-top:12px; border-top:1px solid var(--line)}
.sidebar-foot form{margin:0}
.sidebar-foot .nav-item{width:100%; background:none; border:none; font:inherit; font-weight:600;
  cursor:pointer; text-align:left}

.shell-main{flex:1; min-width:0; width:100%; padding:34px 40px 80px}
.shell-main > .inner{max-width:1040px; margin:0 auto}
/* The take editor's polish grid + takes tray need the pre-shell 1180px canvas. */
body.editor-page .shell-main > .inner{max-width:1180px}
.page-head{margin:0 0 24px}
.page-head h1{font-family:var(--disp); font-weight:800; font-size:30px; margin:0 0 6px; letter-spacing:-.02em; line-height:1.12; text-wrap:balance}
.page-head h1 b{font-weight:900}
.page-head .sub{color:var(--muted); font-size:15.5px; margin:0; max-width:56ch; text-wrap:balance}

/* ---- Mobile menu button (inline in the topnav) + drawer ---- */
.shell-menu{display:none; width:38px; height:38px; flex:none;
  border-radius:11px; border:1px solid var(--line); background:var(--card-bg);
  color:var(--paper); cursor:pointer; align-items:center; justify-content:center}
.shell-menu svg{display:block}
.shell-scrim{position:fixed; inset:0; background:rgba(33,30,23,.4); z-index:55; display:none}

@media (max-width:900px){
  .shell-menu{display:flex}
  .topnav{padding:0 14px; gap:12px}
  .topnav-links{display:none}    /* sidebar drawer carries nav on mobile; keep the bar to brand + avatar */
  .avatar-name{display:none}
  .sidebar{position:fixed; top:0; left:0; z-index:58; height:100vh; min-height:100vh;
    transform:translateX(-100%); transition:transform .22s ease; background:var(--card-bg)}
  body.dark .sidebar{background:var(--panel)}
  /* Shadow only while open: on the parked drawer its 44px blur bled a grey strip down the
     left edge of every page. */
  body.nav-open .sidebar{transform:none; box-shadow:0 12px 44px rgba(60,40,120,.20)}
  body.nav-open .shell-scrim{display:block}
  /* Clear the bottom tab bar (plus the home indicator on a notched phone). */
  .shell-main{padding:22px 18px calc(84px + env(safe-area-inset-bottom))}
  .page-head h1{font-size:25px}
  .card-grid{grid-template-columns:1fr; gap:14px}
}

/* Mobile primary nav: the five destinations, one thumb-tap away. Hidden on desktop,
   where the sidebar is always visible. */
.tabbar{display:none; position:fixed; left:0; right:0; bottom:0; z-index:59;
  align-items:stretch; background:var(--card-bg); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -6px 24px rgba(60,40,120,.10)}
body.dark .tabbar{background:var(--panel)}
.tb-item{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:9px 2px 7px; min-height:56px; text-decoration:none; color:var(--muted);
  font-size:10.5px; letter-spacing:.01em}
.tb-item.active{color:var(--purple)}
.tb-item:focus-visible{outline:2px solid var(--purple); outline-offset:-3px; border-radius:8px}
/* The drawer stays available for Profile and sign-out, so it must sit above the bar. */
body.nav-open .tabbar{z-index:57}
@media (max-width:900px){ .tabbar{display:flex} }

/* ---- Landing shell (signed-out Home): top bar is brand + Sign in, no sidebar or tab bar ---- */
.shell.landing .topnav-signin{margin-left:auto}
@media (max-width:900px){
  .shell.landing .shell-main{padding-bottom:calc(40px + env(safe-area-inset-bottom))}
}

/* ---- Bare shell (pre-auth: login / verify) — centered card, no rail ---- */
.shell.bare{display:block; min-height:100vh}
.shell.bare .shell-body{display:block}
.shell.bare .topbar{display:flex; justify-content:center; padding:26px 0 4px}
.shell.bare .shell-main{max-width:452px; margin:0 auto; padding:6vh 20px 60px}

/* Legal footer rendered by _shell.html on every page (suppressed on the legal pages
   themselves, which carry their own cross-links). Terms have to stay reachable from the
   sign-in and acceptance screens, so this sits in app.css rather than legal.css. */
.shell-legal {
  margin-top: 40px;
  padding: 18px 0 8px;
  border-top: 1px solid var(--line, #E7E2D8);
  font-size: .82rem;
  color: var(--muted);
  text-align: center;
}
.shell-legal a { color: var(--muted); text-decoration: none; }
.shell-legal a:hover { color: var(--purple-hi, #7C5CD6); text-decoration: underline; }