/* studio.css — dark audio library / player for daleadkins.net/studio */
[hidden]{display:none!important}
:root{
  --bg:#0d1117; --panel:#161b22; --panel2:#1b2230; --ink:#e6edf3; --muted:#8b949e;
  --line:#273040; --accent:#f0b429; --accent-ink:#1b1200; --hover:#212a3a; --danger:#f85149;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
.wrap{max-width:1400px;margin:0 auto;padding:22px 18px 90px}
.ptitle{font-size:30px;font-weight:800;margin:4px 0 18px;letter-spacing:-.02em}
.crumb{color:var(--muted);font-size:14px;margin-bottom:2px}
.crumb a:hover{color:var(--accent)}
.empty{color:var(--muted);padding:34px 0;text-align:center}

/* ---- lock / admin gate ---- */
.lock-box{max-width:340px;margin:16vh auto 0;text-align:center}
.lock-box .music{font-size:40px;color:var(--accent)}
.lock-box h1{font-size:22px;margin:10px 0 4px}
.lock-box p{color:var(--muted);font-size:14px;margin:0 0 16px}
.lock-box input{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel);color:var(--ink);font-size:16px;margin-bottom:10px}
.lock-box button{width:100%;padding:11px;border:0;border-radius:9px;background:var(--accent);
  color:var(--accent-ink);font-weight:700;font-size:16px}
.lock-box button:disabled{opacity:.6}
.lock-err{color:var(--danger);font-size:13px;margin-top:10px;min-height:16px}

/* ---- admin library ---- */
.lib-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.lib-head h1{font-size:26px;font-weight:800;margin:0;letter-spacing:-.02em}
.btn{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:9px;
  padding:8px 13px;font-size:14px;font-weight:600}
.btn:hover{background:var(--hover);border-color:var(--accent)}
.btn-accent{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn-accent:hover{filter:brightness(1.05);background:var(--accent)}
.btn-sm{padding:5px 9px;font-size:13px}
.iconbtn{border:0;background:none;color:var(--muted);font-size:16px;padding:5px 7px;border-radius:7px}
.iconbtn:hover{background:var(--hover);color:var(--ink)}
.iconbtn.danger:hover{color:var(--danger)}

/* library grid (level 1) */
.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.proj-card{cursor:pointer}
.pg-cover{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:14px;background:var(--panel2);display:block;
  border:1px solid var(--line)}
.pg-empty{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:38px}
.proj-card:hover .pg-cover{border-color:var(--accent)}
.pg-name{font-weight:700;margin-top:9px;line-height:1.25}
.pg-sub{color:var(--muted);font-size:13px}

/* detail header (levels 2 & 3) */
.crumb-row{margin-bottom:14px}
.linkback{background:var(--panel);border:1px solid var(--line);color:var(--ink);font-size:14px;font-weight:600;padding:8px 14px;border-radius:9px}
.linkback:hover{border-color:var(--accent);color:var(--accent)}

/* per-track trim editor (admin) */
.trim-toggle.trimmed{color:var(--accent)}
.trim-ed{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px;margin:2px 0 8px}
.trim-row{display:flex;align-items:center;gap:10px;margin-bottom:9px;flex-wrap:wrap}
.trim-row:last-child{margin-bottom:0}
.te-seek{flex:1;min-width:130px;-webkit-appearance:none;appearance:none;height:5px;border-radius:3px;background:var(--line)}
.te-seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer}
.te-time,.te-start,.te-end{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.te-status{color:var(--accent);font-size:13px}
.detail-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:18px}
.detail-head.simple{gap:0}
.pr-cover-lg{width:96px;height:96px;border-radius:14px;object-fit:cover;flex:0 0 auto;background:var(--panel2);border:1px solid var(--line)}
.dh-meta{flex:1;min-width:0}
.detail-name{width:100%;font-size:24px;font-weight:800;letter-spacing:-.02em;background:none;border:1px solid transparent;
  color:var(--ink);border-radius:8px;padding:4px 6px;margin-bottom:8px}
.detail-name:focus{outline:none;border-color:var(--line);background:var(--panel2)}
.dh-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ord-inline{color:var(--muted);font-size:13px;display:inline-flex;align-items:center;gap:5px}
.ord-inline input{width:44px;padding:4px 5px;border:1px solid var(--line);border-radius:6px;background:var(--panel2);color:var(--ink);text-align:center}
.sec-title{font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 8px}
.folderlist-admin{display:flex;flex-direction:column;gap:8px}
.folder-row-admin{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:9px 12px}
.folder-row-admin .open-folder{margin-left:auto}

.project{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;margin-bottom:16px}
.project-head{display:flex;align-items:center;gap:8px}
.pr-cover{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:0 0 auto;background:var(--panel2)}
.pr-cover-empty{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:20px}
.set-img{font-size:15px}
.project-name{flex:1;font-size:19px;font-weight:700;background:none;border:1px solid transparent;
  color:var(--ink);border-radius:7px;padding:4px 6px}
.project-name:focus{outline:none;border-color:var(--line);background:var(--panel2)}
.folders{margin:10px 0 0}
.folder{border-top:1px solid var(--line);padding:11px 0}
.folder-head{display:flex;align-items:center;gap:8px}
.folder-ic{color:var(--muted)}
.folder-name{flex:1;font-size:16px;font-weight:600;background:none;border:1px solid transparent;
  color:var(--ink);border-radius:7px;padding:3px 6px}
.folder-name:focus{outline:none;border-color:var(--line);background:var(--panel2)}
.folder-count{color:var(--muted);font-size:13px;margin-right:2px}
.folder-tracks{margin:8px 0 2px;padding-left:6px}
.ft-row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:14px}
.ft-num{width:56px;flex:0 0 auto}
.ft-num input{width:56px;padding:4px 4px 4px 7px;border:1px solid var(--line);border-radius:6px;
  background:var(--panel2);color:var(--ink);font-size:13px;text-align:left}
.ft-title{flex:1;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-name{flex:1;min-width:0;background:none;border:1px solid transparent;color:var(--ink);
  border-radius:7px;padding:5px 7px;font-size:14px}
.tk-name:hover{border-color:var(--line)}
.tk-name:focus{outline:none;border-color:var(--accent);background:var(--panel2)}
.uprow{display:flex;align-items:center;gap:10px;margin-top:8px}
.upstatus{color:var(--accent);font-size:13px}
.addfolder{margin-top:12px}
.hint{color:var(--muted);font-size:13px;margin:2px 0 0}

/* ---- shared player ---- */
.player-page .crumb a:hover{color:var(--accent)}
.fold-top{display:flex;gap:14px;align-items:flex-start;margin-bottom:8px}
.fold-art{width:88px;height:88px;border-radius:12px;object-fit:cover;flex:0 0 auto}
.fold-meta{flex:1;min-width:0}
.fold-meta .ptitle{margin:2px 0 8px}
.add-lib{display:inline-block;margin-top:12px}
.offline-btn.saved{background:#12261a;border-color:#1f7a34;color:#4ade80}
.offline-btn:disabled{opacity:.7;cursor:default}
.proj-hero{width:100%;max-height:240px;object-fit:cover;border-radius:16px;margin-bottom:14px;display:block}
.player{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 12px;margin-top:6px}
/* One line: title over a capped-width scrubber, transport at the end. A progress
   bar the width of the window is harder to aim at, not easier. */
.pbar{display:flex;align-items:center;gap:12px}
/* Matches the app's 48pt cover in its bar. */
.pbar-art{width:48px;height:48px;border-radius:7px;object-fit:cover;flex:0 0 auto;
  background:var(--panel2);border:1px solid var(--line)}
.pbar-main{flex:1 1 auto;min-width:0}
.np{margin:0 0 3px;min-height:0;display:flex;align-items:baseline;gap:8px;min-width:0}
.np-title{font-size:13px;font-weight:600;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-sub{color:var(--muted);font-size:11px;white-space:nowrap}
.scrub{display:flex;align-items:center;gap:8px;margin-bottom:0}
.scrub .cur,.scrub .dur{font-variant-numeric:tabular-nums;color:var(--muted);font-size:11px;width:32px}
.scrub .dur{text-align:right}
.seek{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:3px;background:var(--line)}
.seek::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--accent);cursor:pointer}
.seek::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:var(--accent);cursor:pointer}
.ctrls{display:flex;align-items:center;justify-content:flex-end;gap:2px;margin:0;flex:0 0 auto}
/* Big targets everywhere — 44px is what matters on a touch screen — but Play
   and Record carry far more visual weight than the rest. Those two are what you
   reach for with an instrument in your hands and the device across the room;
   restart and skip are rare. Play used to be the SMALLEST thing in the bar. */
.pbtn{border:0;background:none;color:var(--muted);font-size:13px;width:44px;height:44px;padding:0;
  display:flex;align-items:center;justify-content:center}
.pbtn:hover{color:var(--ink)}
.pbtn.pp{width:54px;height:54px;margin:0 6px;border-radius:50%;background:var(--accent);
  color:var(--accent-ink);font-size:21px;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.pbtn.pp:hover{color:var(--accent-ink);filter:brightness(1.07)}
.pmore-btn{display:flex;align-items:center;gap:5px;flex:0 0 auto;height:34px;padding:0 10px;
  background:var(--panel2);border:1px solid var(--line);color:var(--muted);border-radius:17px;font-size:13px}
.pmore-btn:hover{border-color:var(--accent);color:var(--ink)}
.pmore-btn.has-state,.pmore-btn.open{color:var(--accent);border-color:var(--accent)}
.pmore-badge{font-variant-numeric:tabular-nums;font-size:12px}
.pmore-chev{font-size:10px;transition:transform .15s}
.pmore-btn.open .pmore-chev{transform:rotate(180deg)}
.pmore{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);max-height:460px;overflow-y:auto}
.pbtn:hover{color:var(--accent)}
.pbtn.pp:hover{color:var(--accent-ink);filter:brightness(1.06)}
.speeds{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:10px}
.spd{background:var(--panel2);border:1px solid var(--line);color:var(--muted);border-radius:13px;padding:4px 10px;font-size:13px}
.spd:hover{border-color:var(--accent);color:var(--ink)}
.spd.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}
.xpose{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:4px}
.xp-lbl{color:var(--muted);font-size:13px}
.xp-unit{color:var(--muted);font-size:12px}
.xp-btn{width:30px;height:30px;background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  border-radius:50%;font-size:17px;line-height:1;display:flex;align-items:center;justify-content:center}
.xp-btn:hover{border-color:var(--accent);color:var(--accent)}
.xp-val{min-width:30px;text-align:center;font-variant-numeric:tabular-nums;font-size:15px;font-weight:700;
  color:var(--muted);cursor:pointer}
.xpose.shifted .xp-val{color:var(--accent)}
.trk-search{width:100%;padding:7px 11px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel2);color:var(--ink);font-size:14px;margin:10px 0 8px}
.listwrap{max-height:58vh;overflow-y:auto;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.tracklist .track{display:flex;align-items:center;border-bottom:1px solid var(--line);overflow:hidden}
.tracklist .track:last-child{border-bottom:0}
/* min-width:0 on both, or the ellipsis on .track-title can never fire: a flex item
   refuses to shrink below its content, so a long title shoved the duration and the
   download arrow off the right edge instead of truncating. */
.track-play{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:12px;background:none;border:0;color:var(--ink);
  text-align:left;padding:11px 12px;font-size:15px}
.track-play:hover{background:var(--hover)}
.track.active .track-play{color:var(--accent);font-weight:600}
.track-num{width:22px;color:var(--muted);font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
.track.active .track-num{color:var(--accent)}
.track-title{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-dur{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;padding:0 4px;white-space:nowrap}
.track-dl{color:var(--muted);font-size:18px;padding:10px 14px}
.track-dl:hover{color:var(--accent)}

/* ---- recorder ---- */
.rec-mount{margin:0 0 14px}
.pub-rec{margin:6px 0 14px}
.rec-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rec-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--panel2);
  color:var(--ink);border-radius:22px;padding:9px 18px;font-weight:600}
.rec-btn:hover{border-color:var(--danger);color:var(--danger)}
.rec-btn.recording{background:var(--danger);border-color:var(--danger);color:#fff;
  animation:recpulse 1.4s ease-in-out infinite}
@keyframes recpulse{0%,100%{box-shadow:0 0 0 0 rgba(248,81,73,.5)}50%{box-shadow:0 0 0 7px rgba(248,81,73,0)}}
.rec-time{font-variant-numeric:tabular-nums;font-size:15px;color:var(--danger);font-weight:700}
.rec-wave{display:block;width:100%;height:48px;margin-top:10px;background:rgba(0,0,0,.28);
  border:1px solid var(--line);border-radius:10px}
.rec-status{color:var(--accent);font-size:13px}
.rec-nudge{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:10px;padding:11px 34px 11px 13px;margin-bottom:11px;color:var(--muted);font-size:13.5px;
  line-height:1.45;position:relative}
.rec-nudge em{color:var(--ink);font-style:normal}
.rec-nudge-x{position:absolute;top:6px;right:8px;background:none;border:0;color:var(--muted);font-size:18px;
  line-height:1;padding:2px 6px;border-radius:6px}
.rec-nudge-x:hover{color:var(--ink);background:var(--hover)}

/* ---- per-track share / duplicate (shared player + admin) ---- */
.track-share{background:none;border:0;color:var(--muted);font-size:15px;padding:10px 8px}
.track-share:hover{color:var(--accent)}

/* ---- duplicate folder picker ---- */
.picker-ov{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;
  padding:20px;z-index:50}
.picker{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px;width:100%;max-width:380px;
  max-height:80vh;display:flex;flex-direction:column}
.picker-h{font-weight:700;font-size:17px;margin-bottom:12px}
.picker-list{overflow-y:auto;flex:1;margin-bottom:12px;display:flex;flex-direction:column;gap:5px}
.pick-proj{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em;margin:8px 0 2px}
.pick-proj:first-child{margin-top:0}
.pick-folder{text-align:left;background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  border-radius:9px;padding:10px 12px;font-size:15px;font-weight:600}
.pick-folder:hover{border-color:var(--accent);background:var(--hover)}
.picker-cancel{align-self:flex-end}

/* ---- tree nav: view toggle, breadcrumb, list rows, player/edit tabs ---- */
.lib-head .head-right{display:flex;align-items:center;gap:10px}
.viewtog{display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.vt{background:var(--panel);color:var(--muted);border:0;padding:6px 11px;font-size:15px}
.vt+.vt{border-left:1px solid var(--line)}
.vt.on{background:var(--accent);color:var(--accent-ink)}
.vt:not(.on):hover{background:var(--hover);color:var(--ink)}

.crumb-row{margin-bottom:14px;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.crumblink{background:none;border:0;color:var(--muted);font-size:14px;font-weight:600;padding:4px 4px;border-radius:6px}
.crumblink:hover{color:var(--accent)}
.crumbsep{color:var(--muted);font-size:13px}

.detail-title{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-bottom:8px;word-break:break-word}

.fld-list{display:flex;flex-direction:column;gap:8px}
.fld-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--panel);
  border:1px solid var(--line);border-radius:11px;padding:12px 14px;color:var(--ink)}
.fld-row:hover{background:var(--hover);border-color:var(--accent)}
.fld-row .fr-ic{color:var(--accent)}
.fld-row .fr-name{flex:1;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fld-row .fr-n{color:var(--muted);font-size:13px}
.fld-row .fr-go{color:var(--muted);font-size:16px}

.pe-bar{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:2px 0 14px}
.pe-tab{background:var(--panel);color:var(--muted);border:0;padding:8px 18px;font-size:14px;font-weight:600}
.pe-tab+.pe-tab{border-left:1px solid var(--line)}
.pe-tab.on{background:var(--accent);color:var(--accent-ink)}
.pe-tab:not(.on):hover{background:var(--hover);color:var(--ink)}
.pe-tab.pe-add{background:var(--accent);color:var(--accent-ink);cursor:pointer}
.pe-tab.pe-add:hover{background:var(--accent);color:var(--accent-ink);filter:brightness(1.08)}
.edit-lbl{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;margin-bottom:10px}
.edit-lbl input{flex:1;font-size:16px;font-weight:600;background:var(--panel2);border:1px solid var(--line);
  color:var(--ink);border-radius:8px;padding:8px 10px}
.edit-lbl input:focus{outline:none;border-color:var(--accent)}
.track-area{margin-top:2px}

/* ---- busy overlay (export / import progress) ---- */
.busy-ov{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:60}
.busy-box{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 28px;text-align:center;min-width:200px}
.busy-msg{color:var(--ink);font-size:15px;font-weight:600}
.busy-box::before{content:"";display:block;width:26px;height:26px;margin:0 auto 12px;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--accent);animation:busyspin .8s linear infinite}
@keyframes busyspin{to{transform:rotate(360deg)}}

/* ---- brand footer ---- */
.share-cta{margin-top:34px;padding:18px 16px;text-align:center;background:var(--panel);
  border:1px solid var(--accent);border-radius:14px}
.share-cta-t{font-weight:800;font-size:17px;color:var(--ink)}
.share-cta-s{color:var(--muted);font-size:13.5px;line-height:1.5;max-width:380px;margin:6px auto 12px}
.share-cta .btn-accent{display:inline-block;text-decoration:none;padding:10px 18px;font-weight:700}
.cta-in{display:block;width:100%;max-width:280px;margin:0 auto 8px;padding:10px 12px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel2);color:var(--ink);font-size:15px}
.share-cta-msg{color:var(--muted);font-size:12.5px;margin-top:9px;min-height:1em}

/* mix-review notes */
.notes-panel{margin-top:20px}
.notes-hint{color:var(--muted);font-size:13px;padding:8px 0}
.notes-h{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.notes-h span{color:var(--ink);text-transform:none;letter-spacing:0;font-weight:600}
.notes-list{display:flex;flex-direction:column;gap:8px}
.notes-empty{color:var(--muted);font-size:13px}
.note{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.note-meta{font-size:12px;color:var(--muted);margin-bottom:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.note-ts{background:var(--panel2);border:1px solid var(--line);color:var(--accent);border-radius:6px;
  font-size:11px;padding:1px 7px;cursor:pointer;font-variant-numeric:tabular-nums}
.note-body{color:var(--ink);font-size:14px;line-height:1.5;white-space:pre-wrap}
.note-file{display:inline-block;margin-top:6px;color:var(--accent);font-size:13px;text-decoration:none;
  background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:4px 9px}
.note-compose{margin-top:12px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px}
.note-in{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--ink);
  font-size:14px;padding:9px 10px;resize:vertical;font-family:inherit}
.note-actions{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap}
.note-actions .spacer{flex:1}
.note-ts-add,.note-attach{background:var(--panel2);border:1px solid var(--line);color:var(--muted);
  border-radius:7px;font-size:12px;padding:6px 10px;cursor:pointer;white-space:nowrap}
.note-ts-add:hover,.note-attach:hover{border-color:var(--accent);color:var(--ink)}
.note-ts-show{color:var(--accent);font-variant-numeric:tabular-nums}
.note-fname{font-size:12px;color:var(--muted);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.note-post{padding:6px 16px;font-weight:700}
.note-msg{color:var(--muted);font-size:12px;margin-top:6px;min-height:1em}
.fnotes-panel{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.fnotes-list{display:flex;flex-direction:column;gap:8px}
/* threaded replies + resolve lifecycle */
.note-reply{margin:8px 0 0 16px;border-left:2px solid var(--line);background:var(--panel2)}
.note.resolved{opacity:.55}
.note-resolved{display:inline-block;margin:4px 0 2px;font-size:11px;font-weight:700;color:var(--accent);
  background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:1px 7px}
.note-act{display:flex;gap:10px;margin-top:8px}
.note-reply-btn,.note-res-btn{background:none;border:0;color:var(--muted);cursor:pointer;font-size:12px;
  font-weight:600;padding:2px 0}
.note-reply-btn:hover,.note-res-btn:hover{color:var(--accent)}
.reply-compose{display:flex;gap:8px;margin-top:8px;align-items:flex-start}
.reply-in{flex:1;background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--ink);
  padding:8px 10px;font:inherit;resize:vertical}
.reply-send{padding:6px 14px;font-weight:700;white-space:nowrap}
/* Sticky, because a share page is long: your account state should not be a fact
   you have to scroll to the top to discover. */
.bf-hb-link{display:block;margin:10px 0 2px}
.bf-hb{width:140px;height:auto;opacity:.8}
.bf-hb-link:hover .bf-hb{opacity:1}
.acct-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:14px;color:var(--ink);padding:10px 14px;margin:0 0 16px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px}
.acct-dot{width:8px;height:8px;border-radius:50%;background:#3fb950;flex:none}
.acct-state{font-weight:600}
.acct-note{color:var(--muted)}
.acct-lib{margin-left:auto;color:var(--accent-ink);background:var(--accent);text-decoration:none;
  padding:6px 12px;border-radius:999px;font-weight:600;font-size:13px;white-space:nowrap}
.acct-btn{border:0;cursor:pointer;font-family:inherit}
.acct-out{background:none;border:1px solid var(--line);border-radius:999px;padding:6px 12px;
  font:inherit;font-size:13px;color:var(--muted);cursor:pointer}
.acct-out:hover{color:var(--ink)}
.acct-anon .acct-state{color:var(--muted)}
.track.not-saved .track-title{opacity:.62}
.ns-tag{font-size:11px;color:var(--muted);background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:1px 7px;margin-left:8px;white-space:nowrap}
.ver-badge{margin-left:8px;font-size:11px;color:var(--accent);background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:1px 7px;vertical-align:middle}
.ver-box{margin-top:8px}
.ver-open{background:none;border:0;color:var(--accent);cursor:pointer;font-size:13px;font-weight:600;padding:4px 2px}
.ver-opts{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.ver-opt{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:7px 11px;color:var(--ink);cursor:pointer;font-size:14px;text-align:left}
.ver-opt:hover{border-color:var(--accent)}
.ver-opt.active{border-color:var(--accent)}
.ver-opt .vo-play{color:var(--accent)}
.ver-opt .ver-cur{color:var(--accent);font-size:11px;margin-left:auto}
.add-ver{cursor:pointer;font-size:11px;white-space:nowrap}
.ver-strip{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:7px 6px 2px;font-size:12px}
.ver-lbl{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-size:10.5px}
.ver-chip{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:2px 8px;color:var(--ink)}
.ver-chip.cur{border-color:var(--accent);color:var(--accent)}
.ver-tag{color:var(--muted);font-size:10.5px;margin-left:3px}
.ver-name{background:transparent;border:0;border-bottom:1px dashed transparent;color:inherit;font-size:12.5px;padding:1px 2px;max-width:200px}
.ver-name:hover,.ver-name:focus{border-bottom-color:var(--line);outline:none}
.ver-chip .mkcur{background:none;border:0;color:var(--muted);cursor:pointer;font-size:11px;text-decoration:underline;padding:0 0 0 4px}
.ver-chip .mkcur:hover{color:var(--accent)}
.ver-toggle{background:none;border:0;color:var(--accent);cursor:pointer;font-size:13px;font-weight:600;padding:6px 2px}
.ver-list{display:flex;flex-direction:column;gap:6px;padding:4px 0 8px}
.ver-row{display:flex;align-items:center;gap:9px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:6px 10px}
.ver-row.cur{border-color:var(--accent)}
.ver-row.dragging{opacity:.45}
.ver-grip{color:var(--muted);cursor:grab;font-size:14px;flex:none}
.ver-play{background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:50%;width:28px;height:28px;cursor:pointer;flex:none;font-size:12px}
.ver-play:hover{border-color:var(--accent);color:var(--accent)}
.ver-row .ver-name{flex:1;max-width:none;font-size:14px}
.ver-cur{color:var(--accent);font-size:12px;font-weight:600;white-space:nowrap}
.bulk-bar{position:sticky;top:6px;z-index:5;display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--panel2);border:1px solid var(--accent);border-radius:10px;padding:9px 12px;margin:8px 0}
.bulk-n{color:var(--accent);font-weight:700;font-size:13px;margin-right:4px}
.tk-sel{width:16px;height:16px;accent-color:var(--accent);flex:none;margin-right:2px}
.tk-wrap{cursor:grab}
.tk-wrap.dragging{opacity:.45}
.tk-wrap.drop-tgt{outline:2px dashed var(--accent);outline-offset:-2px;border-radius:10px}
.ver-add{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 6px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;margin:6px 0}
.ver-or{color:var(--muted);font-size:12.5px}
.ver-pick{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px 9px;font-size:13px;max-width:220px}
.pmode{display:inline-flex;gap:0;margin-top:10px;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.pm{background:var(--panel);color:var(--muted);border:0;padding:6px 14px;font-size:13px;font-weight:600;cursor:pointer}
.pm.on{background:var(--accent);color:var(--accent-ink)}
.ref-dl{display:none;margin-top:10px;color:var(--accent);text-decoration:none;font-size:14px;font-weight:600}
.ref-mode .speeds,.ref-mode .xpose,.ref-mode .trk-search{display:none}
.ref-mode .ref-dl{display:inline-block}
.ref-panel{display:none;flex-direction:column;align-items:center;gap:12px;margin-top:14px}
.ref-mode .ref-panel{display:flex}
.ref-counter{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600;line-height:1}
.ref-cur{font-size:46px;color:var(--ink)}
.ref-dur{font-size:19px;color:var(--muted)}
.ref-goto{display:flex;gap:8px;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:6px 8px}
.goto-in{width:110px;background:transparent;border:0;color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px;text-align:center}
.goto-in:focus{outline:none}
.goto-btn{padding:6px 14px;font-weight:700;white-space:nowrap}
/* Locations — DAW-style memory markers */
.scrub.has-marks{position:relative}
.loc-marks{position:absolute;left:48px;right:48px;top:50%;height:5px;transform:translateY(-50%);pointer-events:none}
.loc-tick{position:absolute;top:-3px;width:2px;height:11px;background:var(--accent);border-radius:1px;transform:translateX(-1px);opacity:.85}
.loc-band{position:absolute;top:0;height:5px;background:var(--accent);opacity:.3;border-radius:3px}
.loc-band.on{opacity:.65}
.loc-section{margin:2px 0 12px}
.loc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.loc-title{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.loc-recall{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.loc-num{width:52px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:5px 8px;font-size:13px;text-align:center;font-variant-numeric:tabular-nums}
.loc-go{background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:5px 10px;font-size:12px;cursor:pointer}
.loc-add-btn{background:var(--accent);border:1px solid var(--accent);border-radius:8px;color:var(--accent-ink);padding:5px 11px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap}
.loc-cmt-btn{background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:5px 11px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.loc-cmt-btn:hover{border-color:var(--accent);color:var(--accent)}
.loc-rg{background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--muted);padding:4px 9px;font-size:14px;cursor:pointer;line-height:1}
.loc-rg.arming{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.loc-hint.armed{color:var(--accent)}
.loc-list{display:flex;flex-direction:column;gap:6px}
.loc-empty{color:var(--muted);font-size:13px;padding:4px 0}
.loc-row{display:flex;align-items:center;gap:6px}
.loc-jump{flex:1;display:flex;align-items:center;gap:10px;background:var(--panel2);border:1px solid var(--line);border-radius:9px;color:var(--ink);padding:7px 12px;font-size:13px;cursor:pointer;text-align:left;min-width:0}
.loc-jump:hover{border-color:var(--accent)}
.loc-n{font-variant-numeric:tabular-nums;font-weight:700;color:var(--accent);min-width:26px}
.loc-t{font-variant-numeric:tabular-nums;color:var(--muted);min-width:88px}
.loc-label{color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.loc-by{margin-left:auto;color:var(--muted);font-size:11px;white-space:nowrap}
.loc-loop,.loc-del,.loc-edit{background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--muted);width:32px;height:32px;cursor:pointer;font-size:14px;flex:0 0 auto}
.loc-edit:hover{color:var(--accent);border-color:var(--accent)}
.loc-hint{color:var(--muted);font-size:12px;margin:-2px 0 8px}
.loc-help{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1px solid var(--line);background:var(--panel2);color:var(--muted);font-size:11px;font-weight:700;cursor:pointer;vertical-align:middle;padding:0}
.loc-help:hover{color:var(--accent);border-color:var(--accent)}
.help-link{background:none;border:0;color:var(--muted);font-size:13px;text-decoration:underline;cursor:pointer;padding:4px;margin-bottom:8px}
.help-link:hover{color:var(--accent)}
.help-overlay{display:none;position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.55);align-items:center;justify-content:center;padding:20px}
.help-overlay.open{display:flex}
.help-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:16px;max-width:520px;width:100%;max-height:82vh;overflow-y:auto;padding:24px}
.help-card h2{margin:0 0 14px;color:var(--ink);font-size:20px}
.help-item{margin-bottom:16px}
.help-item h3{margin:0 0 3px;color:var(--accent);font-size:15px}
.help-item p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.help-x{position:absolute;top:14px;right:14px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--muted);width:30px;height:30px;cursor:pointer;font-size:14px}
.share-intro{position:relative;background:var(--panel);border:1px solid var(--accent);border-radius:14px;padding:18px 20px;margin:0 0 16px}
.share-intro h2{margin:0 0 10px;font-size:17px;color:var(--ink)}
.si-steps{margin:0 0 10px;padding-left:22px;color:var(--ink)}
.si-steps li{margin:5px 0;font-size:14px;line-height:1.5}
.si-foot{color:var(--muted);font-size:13px;margin:0 0 12px}
.si-more{background:none;border:0;color:var(--accent);text-decoration:underline;cursor:pointer;font-size:13px;padding:0}
.si-got{padding:7px 18px}
.si-x{position:absolute;top:12px;right:12px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--muted);width:28px;height:28px;cursor:pointer;font-size:13px}
.si-nudge{font-size:13px;color:var(--muted);margin:0 0 12px}
.si-signup{background:none;border:0;color:var(--accent);font-weight:600;text-decoration:underline;cursor:pointer;font-size:13px;padding:0}
.loc-loop.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.loc-del:hover{color:#e5484d;border-color:#e5484d}
.burin-foot{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);text-align:center}
.bf-logo-link{display:block}
.bf-logo{display:block;width:230px;max-width:72%;height:auto;margin:0 auto 8px}
.bf-name{font-weight:800;letter-spacing:-.01em;font-size:15px}
.bf-tag{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
.bf-etym{color:var(--muted);font-size:12.5px;line-height:1.55;max-width:440px;margin:10px auto 0}
.bf-etym em{color:var(--accent);font-style:normal;font-weight:600}

/* ---- project folder list (shared) ---- */
.folderlist{display:flex;flex-direction:column;gap:2px}
.folder-row{display:flex;align-items:center;gap:12px;padding:14px 14px;background:var(--panel);
  border:1px solid var(--line);border-radius:11px}
.folder-row:hover{background:var(--hover);border-color:var(--accent)}
.fr-ic{color:var(--accent)}
.fr-name{flex:1;font-weight:600}
.fr-n{color:var(--muted);font-size:13px}

/* Phone: the transport keeps its targets, so let the bar wrap instead of
   squeezing the scrubber down to nothing. */
@media (max-width:560px){
  .pbar{flex-wrap:wrap;gap:8px}
  .pbar-main{flex:1 1 100%;max-width:none;order:1}
  .ctrls{order:2;flex:1 1 auto;justify-content:flex-start}
  .pmore-btn{order:3}
}

/* ---- folder header: one strip, not four rows ----
   Cover, title, the four actions people use, the mode toggle and a ⋯ for the
   rest — the same split the Mac toolbar makes. */
.fhead{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.fhead .pr-cover-lg{width:48px;height:48px;border-radius:8px}
.fhead-title{font-size:19px;font-weight:700;letter-spacing:-.01em;margin-right:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:24ch}
.fmore-wrap{position:relative}
.fmore-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:190px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:5px;
  box-shadow:0 12px 30px rgba(0,0,0,.5)}
.fmore-item{display:block;width:100%;text-align:left;background:none;border:0;color:var(--ink);
  padding:8px 10px;border-radius:7px;font-size:14px;cursor:pointer}
.fmore-item:hover{background:var(--hover)}
.fmore-item.danger{color:var(--danger,#f07a6a)}
.fmore-sep{height:1px;background:var(--line);margin:4px 0}
/* The mode toggle rides in the strip now instead of owning a row. */
.fhead .pe-bar{margin:0}
.fhead .pe-tab{padding:5px 10px;font-size:13px}
/* Record sits under the player, where the meter belongs — not above it. */
.rec-mount{margin:8px 0 0}
/* On the bar: a compact button; the timer and meter appear beside it only once
   recording starts. */
.pbar .rec-mount{margin:0;flex:0 0 auto}
.pbar .rec-row{display:flex;align-items:center;gap:6px;margin:0}
/* Record reads as the other big one: same height as Play, its own colour, and
   a dot you can see from a music stand. */
.pbar .rec-btn{height:46px;padding:0 18px;font-size:17px;font-weight:600;white-space:nowrap;
  border-radius:23px;border-color:var(--danger);color:var(--danger);gap:8px}
.pbar .rec-btn.recording{color:#fff}
.pbar .rec-wave{max-width:110px;height:26px}
.pbar .rec-nudge{display:none}
.fhead-mode{margin-left:4px;display:flex;align-items:center}

/* ---- bulk "Add versions" plan ---- */
.picker.vp{max-width:520px}
.vp-sum{color:var(--muted);font-size:13px;margin:-4px 0 10px}
.vp-row{display:flex;align-items:center;gap:8px;background:var(--panel2);border:1px solid var(--line);
  border-radius:9px;padding:8px 10px}
.vp-main{flex:1;min-width:0}
.vp-name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-to{font-size:12px;color:var(--accent);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-new{font-size:12px;color:var(--muted);display:block}
.vp-pick{max-width:120px;background:var(--panel);color:var(--ink);border:1px solid var(--line);
  border-radius:7px;padding:4px 6px;font-size:12px}
.vp-x{background:transparent;border:0;color:var(--muted);font-size:15px;padding:4px 7px;border-radius:7px}
.vp-x:hover:not(:disabled){color:var(--ink);background:var(--hover)}
.vp-x:disabled{opacity:.25}
.vp-foot{font-size:12px;color:var(--muted);margin:2px 0 12px}
.vp-btns{display:flex;justify-content:flex-end;gap:8px}

/* ---- open comments: a count on the row, dots on the scrubber ---- */
.cmt-badge{margin-left:8px;font-size:11px;font-weight:700;color:var(--accent);
  background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:1px 7px;white-space:nowrap}
.note-marks{position:absolute;left:48px;right:48px;bottom:2px;height:5px;pointer-events:none}
.note-dot{position:absolute;top:0;width:5px;height:5px;margin-left:-2px;border-radius:50%;background:var(--ink);opacity:.75}
.proj-card{position:relative}
.cmt-dot{display:inline-block;min-width:18px;text-align:center;font-size:11px;font-weight:700;
  color:var(--bg,#1C1206);background:var(--accent);border-radius:999px;padding:1px 6px;line-height:1.4}
.proj-card>.cmt-dot{position:absolute;top:6px;right:6px;box-shadow:0 0 0 2px var(--panel)}
.fld-row .cmt-dot{margin-left:8px}

/* ---- player-mode row: version list + actions ---- */
button.ver-badge{cursor:pointer;background:var(--panel2);border:1px solid var(--line);color:var(--accent);
  font-size:11px;font-weight:700;border-radius:999px;padding:2px 9px;margin-right:8px;white-space:nowrap}
button.ver-badge:hover{border-color:var(--accent)}
button.ver-badge.open{background:var(--accent);color:var(--bg,#1C1206);border-color:var(--accent)}
.row-more{background:transparent;border:0;color:var(--muted);font-size:17px;line-height:1;
  padding:6px 12px;border-radius:8px}
.row-more:hover{color:var(--ink);background:var(--hover)}
.row-vers{border-bottom:1px solid var(--line);background:var(--panel2);padding:6px 10px 8px 46px;
  display:flex;flex-direction:column;gap:4px}
.rv-row{display:flex;align-items:center;gap:9px;text-align:left;background:var(--panel);
  border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:7px 10px;font-size:13px}
.rv-row:hover{border-color:var(--accent)}
.rv-play{color:var(--accent);font-size:11px}
.rv-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv-cur{font-size:10px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.05em}
.pick-folder.danger{color:var(--danger,#F07A6A)}
/* display:flex beats the `hidden` attribute, so say it explicitly or every
   version panel is open from the start. */
.row-vers[hidden]{display:none}
/* Each .track is now followed by its (usually hidden) version panel, so the
   last track is the second-to-last child, not the last. */
.tracklist .track:nth-last-child(2){border-bottom:0}

/* Practice / Reference lifted out of Tools, beside Player / Edit. */
.pmode.in-head{margin-top:0;margin-left:8px}
.pmode.in-head .pm{padding:5px 10px;font-size:13px}
.rv-row.playing{border-color:var(--accent);background:var(--hover)}
.rv-row.playing .rv-play{color:var(--accent)}
.row-addver{color:var(--muted);font-size:12px;font-weight:700;padding:8px 9px;border-radius:8px;
  cursor:pointer;white-space:nowrap}
.row-addver:hover{color:var(--accent);background:var(--hover)}

/* ---- folders shared with you: in the same list as your own, just marked ---- */
.proj-card.is-shared{position:relative}
.pg-shared,.fr-shared{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent);background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:1px 7px}
.proj-card.is-shared .pg-shared{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.6)}
.fr-row .fr-shared,.fld-row .fr-shared{margin-left:8px}
.add-lib{margin-left:8px}
.play-ago{margin-left:8px;font-size:11px;color:var(--muted);white-space:nowrap}

/* ---- one share dialog, and a line saying whose folder you're in ---- */
.share-dlg{max-width:440px}
.sd-what{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:12px}
.sd-name{font-weight:700;font-size:15px}
.sd-sub{color:var(--muted);font-size:12px;margin-top:2px}
.sd-opt{display:flex;gap:9px;align-items:flex-start;font-size:14px;margin-bottom:12px;cursor:pointer}
.sd-opt input{margin-top:3px}
.sd-opt em{display:block;font-style:normal;color:var(--muted);font-size:12px;margin-top:2px}
.sd-link{width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  border-radius:9px;padding:9px 11px;font-size:13px;margin-bottom:12px}
.share-dlg.writing .sd-link{border-color:var(--accent)}
.sd-btns{display:flex;justify-content:flex-end;gap:8px}
.whose{font-size:13px;color:var(--muted);margin-top:2px}
.whose-can{color:var(--accent)}
.name-nudge{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--panel2);
  border:1px solid var(--accent);border-radius:10px;padding:10px 13px;margin-bottom:14px;font-size:14px}
.name-nudge span{flex:1;min-width:220px}

/* ---- recover deleted audio ---- */
.recover-dlg{max-width:520px}
.rec-row{display:flex;align-items:center;gap:10px;background:var(--panel2);border:1px solid var(--line);
  border-radius:9px;padding:8px 10px}
.rec-play{background:transparent;border:0;color:var(--accent);font-size:13px;padding:4px 7px;border-radius:7px}
.rec-play:hover{background:var(--hover)}
.rec-meta{flex:1;min-width:0}
.rec-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec-when{font-size:11px;color:var(--muted)}

/* ---- big record: a button at the bottom edge, and the panel it raises ---- */
.rec-fab{position:fixed;right:20px;bottom:20px;z-index:45;width:64px;height:64px;border-radius:50%;
  border:0;background:var(--danger);display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.45);cursor:pointer}
.rec-fab:hover{filter:brightness(1.08)}
.rec-fab-dot{width:24px;height:24px;border-radius:50%;background:#fff}
.rec-sheet-ov{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.6);display:flex;
  align-items:flex-end;justify-content:center}
.rec-sheet{width:100%;max-width:560px;background:var(--panel);border:1px solid var(--line);
  border-bottom:0;border-radius:18px 18px 0 0;padding:18px 20px 26px;text-align:center}
.rec-sheet-h{font-weight:700;font-size:17px;margin-bottom:14px}
.rec-sheet-slot{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:18px}
.rec-sheet-slot .rec-mount,.rec-sheet-slot .rec-row{margin:0;width:100%;justify-content:center}
.rec-sheet-slot .rec-row{flex-direction:column;gap:14px}
/* The whole point: one target you cannot miss from a music stand. */
.rec-sheet-slot .rec-btn{width:168px;height:168px;border-radius:50%;flex-direction:column;gap:6px;
  font-size:19px;font-weight:700;border-width:3px;border-color:var(--danger);color:var(--danger);
  background:var(--panel2);padding:0}
.rec-sheet-slot .rec-btn.recording{background:var(--danger);color:#fff;border-color:var(--danger)}
.rec-sheet-slot .rec-time{font-size:30px;font-variant-numeric:tabular-nums;color:var(--ink)}
.rec-sheet-slot .rec-wave{max-width:100%;height:44px}
.rec-sheet-close{min-width:120px}
@media (max-width:560px){ .rec-fab{right:14px;bottom:14px} }

/* ---- Transport: the same controls, at rehearsal size ---- */
.tport-btn{display:flex;align-items:center;gap:5px;flex:0 0 auto;height:34px;padding:0 11px;
  background:var(--panel2);border:1px solid var(--line);color:var(--muted);border-radius:17px;
  font-size:13px;cursor:pointer}
.tport-btn:hover{border-color:var(--accent);color:var(--ink)}
.tport-chev{font-size:14px;line-height:1}
.tport-ov{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.65);display:flex;
  align-items:center;justify-content:center;padding:20px}
.tport{width:100%;max-width:460px;background:var(--panel);border:1px solid var(--line);
  border-radius:18px;padding:22px;text-align:center}
.tport-title{font-size:17px;font-weight:700;margin-bottom:16px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.tport-seek{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;
  background:var(--line)}
.tport-seek::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--accent);cursor:pointer}
.tport-times{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;
  font-variant-numeric:tabular-nums;margin:6px 0 20px}
.tport-row{display:flex;align-items:center;justify-content:center;gap:22px;margin-bottom:20px}
.tport-b{background:none;border:0;color:var(--ink);font-size:26px;width:64px;height:64px;
  border-radius:50%;cursor:pointer}
.tport-b:hover{background:var(--hover)}
.tport-pp{background:var(--accent);color:var(--accent-ink);width:96px;height:96px;font-size:36px;
  box-shadow:0 4px 16px rgba(0,0,0,.4)}
.tport-pp:hover{background:var(--accent);filter:brightness(1.07)}
.tport-rec-slot{display:flex;justify-content:center;margin-bottom:18px}
.tport-rec-slot .rec-row{flex-direction:column;gap:10px;align-items:center}
/* The other thing you do from across the room, at the same weight as Play. */
.tport-sep{height:1px;background:var(--line);margin:4px 30px 18px}
.tport-rec-slot .rec-btn{width:118px;height:118px;border-radius:50%;flex-direction:column;gap:5px;
  font-size:15px;font-weight:700;border-width:3px;border-color:var(--danger);color:var(--danger);
  background:var(--panel2);padding:0}
.tport-rec-slot .rec-btn.recording{background:var(--danger);color:#fff}
.tport-rec-slot .rec-time{font-size:24px;font-variant-numeric:tabular-nums}
.tport-rec-slot .rec-wave{max-width:100%;height:38px}
.tport-close{min-width:120px}
/* The word stays on a phone too: a bare chevron means nothing. */
.info-list{gap:0}
.info-row{display:flex;gap:14px;padding:8px 2px;border-bottom:1px solid var(--line);font-size:14px}
.info-row:last-child{border-bottom:0}
.info-k{width:112px;flex:0 0 auto;color:var(--muted);font-size:12px;padding-top:2px}
.info-v{flex:1;min-width:0;word-break:break-word;color:var(--ink)}