/* Undercover Zest — mobile view (breakpoint-mounted alternate UI of the same site).
   Stage 1: shell frame + theme tokens + a read render of the shared v2 song on one bar ruler.
   Theme is driven by the key's mode (major ⇒ Bright, minor ⇒ Shadow), not a manual toggle.
   All UI lives under #app-mobile so it never collides with the (hidden) desktop styles. */

/* ── theme tokens (brief §4.1) ───────────────────────────────────────────── */
#app-mobile.uz-bright {
  --bg:#fbf7ee; --panel:#fffdf8; --panel2:#ffffff; --line:#e7e0d2; --line2:#ece3cf;
  --ink:#2b2b2b; --muted:#6f685a; --faint:#8a8378; --rail:#fbf7ee; --gold:#c8a04a; --goldDeep:#a98432;
  --goldSoft:#faf3e2; --grid:#ece3cf; --chordBg:#ffffff; --chordBorder:#dddddd;
  --red:#c0392b; --selBg:#fdf3df; --barline:#cfc6ae; --keyW:#ffffff;
}
/* real-device touch polish: no gray tap flash, no text-selection/callout storm on press-and-drag
   (chord drags + the 480ms lyric long-press both hold a finger on text), no rubber-band chaining
   out of the fixed app shell. Inputs/textareas re-enable selection so typing/caret still work. */
#app-mobile { -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none; overscroll-behavior:none; }
#app-mobile input, #app-mobile textarea { -webkit-user-select:text; user-select:text; }
#app-mobile.uz-shadow {
  --bg:#1f222b; --panel:#20232c; --panel2:#232732; --line:#343845; --line2:#2c2f3a;
  --ink:#f0ece2; --muted:#a59e90; --faint:#938b7d; --rail:#262a34; --gold:#c8a04a; --goldDeep:#e0c878;
  --goldSoft:#2a2d1f; --grid:#2c2f3a; --chordBg:#262a34; --chordBorder:#3c4150;
  --red:#e06b5e; --selBg:#2c2a22; --barline:#4a4f5e; --keyW:#e9e4d8;
}

/* ── frame ───────────────────────────────────────────────────────────────── */
#app-mobile {
  font-family:'Outfit',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--ink);
  -webkit-text-size-adjust:100%; box-sizing:border-box;
  display:flex; flex-direction:column; min-height:100%;
}
#app-mobile *, #app-mobile *::before, #app-mobile *::after { box-sizing:border-box; }
/* zero-specificity reset (via :where) so component class colors/backgrounds always win */
:where(#app-mobile button) { font:inherit; color:inherit; border:none; cursor:pointer; -webkit-appearance:none; appearance:none; }

/* ── top bar ─────────────────────────────────────────────────────────────── */
.m-topbar { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:10px;
  padding:6px 16px 10px; background:var(--panel); border-bottom:1px solid var(--line); }
.m-mark { font-size:22px; line-height:1; }
.m-titlewrap { flex:1; min-width:0; display:flex; align-items:center; gap:6px; background:transparent; padding:0; }
.m-title { min-width:0; font:600 13px 'Outfit',sans-serif; color:var(--faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-renamepip { flex:none; width:22px; height:22px; border-radius:50%; background:var(--rail); display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--faint); }
/* KEY pill = a bordered container with two tap segments: root cycler + maj/min mode */
.m-keypill { flex:none; display:inline-flex; align-items:stretch; border:1px solid var(--line); border-radius:13px; overflow:hidden; background:var(--goldSoft); }
.m-keyroot { display:flex; align-items:center; gap:4px; white-space:nowrap; font:700 12px 'Outfit',sans-serif; color:var(--goldDeep); padding:6px 9px; background:transparent; }
.m-keycv { font-size:8px; opacity:.7; }
.m-keypill .m-mode { font:700 10px 'Outfit',sans-serif; padding:7px 8px; border-left:1px solid var(--line); color:var(--muted); background:var(--panel); }
.m-keypill .m-mode.on { color:#fff; background:var(--gold); }
.m-selbtn { min-height:34px; font:700 12px 'Outfit',sans-serif; border-radius:13px; padding:6px 11px; color:var(--muted); background:var(--panel); border:1px solid var(--line); }
.m-selbtn.on { color:#fff; background:var(--ink); border-color:var(--ink); }

/* ── section chips ───────────────────────────────────────────────────────── */
.m-sections { display:flex; gap:7px; padding:9px 16px; overflow-x:auto; background:var(--bg);
  border-bottom:1px solid var(--line2); -webkit-overflow-scrolling:touch; }
.m-chip { flex:none; min-height:34px; padding:7px 13px; border-radius:14px; border:1px solid var(--line);
  background:var(--panel); color:var(--muted); font-size:12px; font-weight:600; white-space:nowrap; }
.m-chip.active { background:var(--ink); color:var(--panel); border-color:var(--ink); font-weight:700; }
.m-chip.m-add { color:var(--goldDeep); font-weight:700; }

/* ── lane canvas: shared ruler + full-height active lane (the hero) + peek strips ── */
.m-canvas { flex:1; display:flex; flex-direction:column; min-height:0; background:var(--bg); overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
.m-zoomw { flex:1; display:flex; flex-direction:column; min-height:0; min-width:100%; }   /* width set inline = nbars/zoom × 100% */
/* rails + gutters pin left while the zoomed canvas scrolls under them */
.m-rail-sp, .m-rail, .m-pk-rail, .m-tlbl, .m-mlbl { position:sticky; left:0; z-index:4; }
.m-tlbl, .m-mlbl { background:var(--bg); }
.m-ruler { flex:none; display:flex; height:26px; border-bottom:2px solid var(--barline); }
.m-rail-sp { width:var(--gut); flex:none; border-right:1px solid var(--line); background:var(--rail); }
.m-rulerbars { flex:1; display:flex; }
.m-rulerbar { flex:1; border-left:1px solid var(--barline); font:700 11px 'Outfit',sans-serif; color:var(--faint); padding:4px 0 0 7px; }
.m-lane { flex:1; display:flex; align-items:stretch; min-height:0; position:relative; border-bottom:1px solid var(--line2); }
.m-rail { width:var(--gut); flex:none; border-right:1px solid var(--line); background:var(--rail); display:flex; align-items:center; justify-content:center; }
.m-rail-v { font:700 9px 'Outfit',sans-serif; letter-spacing:.14em; color:var(--faint); writing-mode:vertical-rl; transform:rotate(180deg); }
.m-lanearea { flex:1; position:relative; min-width:0; }
.m-gridlines { position:absolute; inset:0; pointer-events:none; }
.m-gl { position:absolute; top:0; bottom:0; width:1px; background:var(--grid); }
.m-gl.bar { background:var(--barline); }
.m-chips-abs { position:absolute; inset:0; }
.m-chordpos { position:absolute; top:10px; bottom:10px; padding:0 4px; transition:left .08s, top .08s, bottom .08s; }
.m-chordpos.tight { top:6px; bottom:6px; }
.m-cdia { margin-top:3px; display:flex; justify-content:center; }
.m-chord { width:100%; height:100%; border-radius:9px; border:1px solid var(--chordBorder);
  background:var(--chordBg); display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px; overflow:hidden; box-shadow:0 1px 2px rgba(80,65,30,.06); }
.m-chord.ook { border:1.5px solid #d98a3a; }
.m-chord .m-cn { font-weight:700; font-size:17px; color:var(--goldDeep); line-height:1; }
.m-chord .m-rm { font-size:10px; color:var(--faint); font-weight:600; }
.m-chord .m-len { position:absolute; bottom:3px; left:5px; font:700 8px 'JetBrains Mono',ui-monospace,monospace;
  color:var(--goldDeep); background:var(--goldSoft); border-radius:5px; padding:1px 4px; }
.m-chord .m-ook { position:absolute; top:3px; right:4px; width:14px; height:14px; border-radius:50%;
  background:#d98a3a; color:#fff; font:700 10px/14px 'Outfit',sans-serif; text-align:center; }
.m-empty { color:var(--faint); font-size:13px; font-style:italic; padding:30px 0; text-align:center; }

/* ── transport / status strip (Stage 1: read + save proof) ───────────────── */
.m-status { display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-top:1px solid var(--line); background:var(--panel); font-size:12px; color:var(--muted); }
.m-status .m-bpm { font-weight:700; color:var(--ink); }
.m-status .m-spacer { flex:1; }
.m-savedot { width:8px; height:8px; border-radius:50%; background:#5ec269; }

/* ── Stage 2: lane toolbar ────────────────────────────────────────────────── */
.m-lanebar { display:flex; align-items:center; gap:9px; padding:9px 14px; background:var(--panel2);
  border-bottom:1px solid var(--line); }
.m-lanetag { font:700 11px/1 'Outfit',sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--goldDeep); }
.m-lanedot { width:7px; height:7px; border-radius:50%; background:var(--gold); flex:none; }
.m-spacer { flex:1; }
.m-metchip { min-height:32px; padding:5px 10px; border:1px solid var(--line); border-radius:8px;
  background:var(--panel2); font:700 12px 'JetBrains Mono',ui-monospace,monospace; color:var(--muted); }
.m-btn { min-height:38px; padding:9px 15px; border:1px solid var(--line); border-radius:13px;
  background:var(--panel2); color:var(--ink); font-weight:600; font-size:13px; }
.m-btn.m-addchord { min-height:34px; padding:6px 11px; font:600 12px 'Outfit',sans-serif; color:var(--muted); background:var(--panel); border-color:var(--line); }
.m-btn.m-primary { background:var(--gold); color:#fff; border-color:var(--gold); font-weight:700; }
.m-btn.m-danger { color:var(--red); border-color:var(--red); }

/* chord chip states */
.m-chord { position:relative; cursor:grab; touch-action:none; }
.m-chord:active { cursor:grabbing; }
.m-chord.sel { border:2px solid var(--gold); box-shadow:0 0 0 3px rgba(200,160,74,.28); background:var(--selBg); }
.m-chord.insel { border:2px solid #4a6fa5; background:rgba(74,111,165,.08); }
.m-chord .m-acc { position:absolute; top:3px; left:5px; font-size:10px; color:var(--gold); }

/* ── bottom sheets ────────────────────────────────────────────────────────── */
.m-scrim { position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.38); }
.m-sheet { position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--bg);
  border-top:1px solid var(--line); border-radius:18px 18px 0 0; box-shadow:0 -6px 20px rgba(80,65,30,.18);
  max-height:80%; display:flex; flex-direction:column; }
.m-grab { flex:none; width:38px; height:4px; border-radius:2px; background:var(--line); margin:9px auto 4px; }
.m-sheet-hd { flex:none; display:flex; align-items:center; gap:10px; padding:4px 18px 12px; border-bottom:1px solid var(--line2); }
.m-sheet-title { font:700 18px 'Outfit',sans-serif; color:var(--ink); }
/* compact chord editor (panel2 card, no header/footer) */
.m-edsheet { position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--panel2); border-top:1px solid var(--line);
  border-radius:18px 18px 0 0; box-shadow:0 -6px 20px rgba(80,65,30,.18); padding:8px 16px calc(18px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; gap:11px; }
.m-ed-hd { display:flex; align-items:baseline; gap:8px; }
.m-ed-cn { font:700 20px 'Outfit',sans-serif; color:var(--goldDeep); }
.m-ed-meta { font:600 11px 'Outfit',sans-serif; color:var(--faint); }
.m-ed-row { display:flex; align-items:center; gap:10px; }
.m-ed-rlbl { width:50px; flex:none; font:600 11.5px 'Outfit',sans-serif; color:var(--faint); }
.m-ed-read { font:700 13px 'Outfit',sans-serif; color:var(--ink); }
.m-ed-beat { min-width:60px; text-align:center; }
.m-ed-segs { display:flex; gap:6px; }
.m-eseg { font:600 11px 'Outfit',sans-serif; border-radius:12px; padding:6px 10px; min-width:40px; color:var(--muted); background:var(--panel); border:1px solid var(--line); }
.m-eseg.on { color:#fff; background:var(--ink); border-color:var(--ink); font-weight:700; }
.m-ed-box { width:32px; height:32px; flex:none; border-radius:9px; border:1px solid var(--line); background:var(--panel); font:700 16px 'Outfit',sans-serif; color:var(--muted); }
.m-ed-actions { display:flex; gap:11px; margin-top:2px; }
.m-ed-dup { flex:1; min-height:42px; font:600 12px 'Outfit',sans-serif; border-radius:13px; padding:9px 0; color:var(--ink); background:var(--panel); border:1px solid var(--line); }
.m-ed-rm { flex:1; min-height:42px; font:600 12px 'Outfit',sans-serif; border-radius:13px; padding:9px 0; color:#a04030; background:#faf1ee; border:1px solid #ecd9d2; }
/* diatonic "Add a chord" palette */
.m-dp-keypill { font:700 11px 'Outfit',sans-serif; color:var(--goldDeep); background:var(--goldSoft); border:1px solid var(--line); border-radius:11px; padding:4px 9px; margin-left:8px; }
.m-dp-lbl { font:700 10px 'Outfit',sans-serif; letter-spacing:.12em; color:var(--faint); }
.m-dp-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.m-dp-card { display:flex; flex-direction:column; gap:8px; border:1px solid var(--line); background:var(--panel2); border-radius:10px; padding:9px 11px; box-shadow:0 1px 2px rgba(80,65,30,.06); text-align:left; }
.m-dp-top { display:flex; align-items:baseline; gap:6px; }
.m-dp-name { font:700 15px 'Outfit',sans-serif; color:var(--goldDeep); }
.m-dp-rm { font:600 9px 'Outfit',sans-serif; color:var(--faint); }
.m-dp-tones { display:flex; gap:4px; }
.m-dp-tone { font:700 8px 'JetBrains Mono',ui-monospace,monospace; color:#fff; background:#6fcf86; border-radius:3px; padding:1px 4px; }
.m-pick-add { box-shadow:0 2px 6px rgba(200,160,74,.4); border-radius:14px; padding:11px 20px; }
.m-x { margin-left:auto; width:30px; height:30px; border-radius:50%; background:var(--rail);
  border:none; font:700 14px 'Outfit',sans-serif; color:var(--faint); }
.m-sheet-body { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:14px 18px; display:flex; flex-direction:column; gap:14px; }
.m-sheet-ft { flex:none; display:flex; align-items:center; gap:11px; padding:12px 18px calc(18px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line2); background:var(--panel); }

/* editor sheet */
.m-ed-name { display:flex; align-items:baseline; gap:8px; }
.m-ed-name .m-cn { font-weight:800; font-size:26px; color:var(--gold); }
.m-ed-name .m-rm { font-size:13px; color:var(--muted); font-weight:600; }
.m-ed-row { display:flex; align-items:center; gap:12px; }
.m-ed-lbl { font-size:12px; font-weight:600; color:var(--muted); min-width:56px; }
.m-seg-group, .m-nudge { display:flex; gap:6px; align-items:center; flex:1; }
.m-seg { min-height:40px; min-width:44px; padding:9px 14px; border:1px solid var(--line); border-radius:11px;
  background:var(--panel2); color:var(--ink); font-weight:600; font-size:13px; }
.m-seg.on { background:var(--ink); color:var(--panel); border-color:var(--ink); }
.m-nudval { font:600 12px 'Outfit',sans-serif; color:var(--ink); min-width:64px; text-align:center; }

/* palette sheet */
.m-pick { display:flex; flex-direction:row; gap:16px; align-items:flex-start; }
.m-pick-roots { flex:none; width:172px; }
.m-pick-lbl { font:700 10px 'Outfit',sans-serif; letter-spacing:.12em; color:var(--faint); margin:0 0 8px; }
.m-pick-qe { flex:1; display:flex; flex-direction:column; gap:13px; }
.m-root-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.m-pk { min-height:40px; border:1px solid var(--line); border-radius:9px; background:var(--panel2);
  font:700 13px 'JetBrains Mono',ui-monospace,monospace; color:var(--ink); }
.m-pk.on { background:var(--gold); color:#fff; border-color:var(--gold); }
.m-pillrow { display:flex; gap:7px; flex-wrap:wrap; }
.m-pill { min-height:38px; padding:9px 13px; border:1px solid var(--line); border-radius:11px;
  background:var(--panel2); color:var(--ink); font-weight:600; font-size:13px; }
.m-pill.on { background:var(--ink); color:var(--panel); border-color:var(--ink); }
.m-pick-result { font-weight:800; font-size:26px; color:var(--goldDeep); }

/* ── Stage 3: shape pip + mini diagram on chips ───────────────────────────── */
.m-shapepip { position:absolute; bottom:-5px; right:-4px; font-size:11px; color:var(--gold); opacity:.75; cursor:pointer; padding:10px; touch-action:none; }   /* ~31px hit area; negative offsets keep the glyph where it was */
.m-mini { position:absolute; top:3px; left:0; right:0; height:13px; }
.m-md { position:absolute; transform:translateX(-50%); font:700 7px 'JetBrains Mono',ui-monospace,monospace; color:var(--muted); }
.m-md.x { color:var(--faint); } .m-md.o { color:var(--muted); } .m-md.d { color:var(--gold); }

/* ── Stage 3: shape editor sheet ──────────────────────────────────────────── */
.m-sh-nav { display:flex; align-items:center; gap:9px; }
.m-sh-winlbl { font-weight:700; font-size:13px; color:var(--ink); }
.m-sh-type { display:flex; align-items:center; gap:10px; background:var(--panel2); border:1px solid var(--line); border-radius:9px; padding:9px 12px; }
.m-sh-typestr { flex:1; font:700 18px 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.18em; color:var(--ink); }
.m-sh-titlename { color:var(--goldDeep); }
.m-sh-win { width:34px; height:32px; flex:none; display:flex; align-items:center; justify-content:center; padding:0; border:1px solid var(--line); border-radius:8px; background:var(--panel2); font:700 14px 'Outfit',sans-serif; color:var(--goldDeep); }
.m-sh-shiftlbl { font:600 10px 'Outfit',sans-serif; color:var(--faint); }
.m-sh-shift { font:700 11px 'Outfit',sans-serif; color:var(--goldDeep); border:1px solid var(--line); background:var(--panel2); border-radius:8px; padding:7px 9px; }
.m-sh-lbl { font:700 9px 'Outfit',sans-serif; letter-spacing:.08em; color:var(--faint); }
.m-sh-lbl-ck { font-size:10px; letter-spacing:.1em; }
.m-sh-byname { display:flex; align-items:center; gap:10px; border:1.5px dashed var(--line); border-radius:11px; padding:11px 13px; }
.m-sh-byname-lbl { font:600 12px 'Outfit',sans-serif; color:var(--muted); }
.m-sh-byname-btn { font:700 11px 'Outfit',sans-serif; color:var(--goldDeep); background:var(--goldSoft); border:1px solid var(--line); border-radius:9px; padding:7px 11px; }
.m-sh-clear { border-radius:11px; padding:10px 16px; font:600 12px 'Outfit',sans-serif; color:var(--muted); }
.m-sh-save { box-shadow:0 2px 6px rgba(200,160,74,.4); border-radius:13px; padding:11px 22px; font:700 13px 'Outfit',sans-serif; }
.m-sh-dot { width:17px; height:17px; border-radius:50%; background:var(--goldDeep); display:none; }
.m-sh-cell.on .m-sh-dot { display:block; }
.m-sh-typehint { font-size:9px; color:var(--faint); }
.m-sh-fb { border:1px solid var(--line); border-radius:9px; padding:3px 4px; background:var(--bg); }
.m-sh-row { display:flex; align-items:center; gap:6px; position:relative; min-height:34px; }
.m-sh-slbl { width:18px; flex:none; text-align:center; font:700 12px 'Outfit',sans-serif; color:var(--ink); }
.m-sh-val { min-width:30px; flex:none; min-height:30px; padding:0 6px; border:1px solid var(--line); border-radius:7px; background:var(--panel2); font:700 13px 'JetBrains Mono',ui-monospace,monospace; color:var(--ink); }
.m-sh-val.muted { color:#a04030; }
.m-sh-cols { flex:1; display:flex; }
.m-sh-col { flex:1; text-align:center; font:700 11px 'Outfit',sans-serif; color:var(--faint); }
.m-sh-cell { flex:1; height:38px; margin:2px; border-radius:7px; border:1px solid var(--line); background:var(--panel2); display:flex; align-items:center; justify-content:center; }
.m-sh-cell.on { background:var(--goldSoft); border-color:var(--gold); }
.m-sh-pickpop { position:absolute; top:34px; left:22px; z-index:60; background:var(--panel2); border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 22px rgba(30,26,15,.3); padding:7px; display:grid; grid-template-columns:repeat(7,30px); gap:4px; }
.m-sh-pk { width:30px; height:30px; border-radius:6px; border:1px solid var(--line); background:var(--bg); font:700 12px 'JetBrains Mono',ui-monospace,monospace; color:var(--ink); }
.m-sh-info { background:var(--panel2); border:1px solid var(--line); border-radius:11px; padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
.m-sh-check { display:flex; align-items:center; gap:10px; }
.m-sh-ok { font:700 12px 'Outfit',sans-serif; color:#2f8a4c; background:#e8f3ea; border-radius:8px; padding:5px 10px; }
.m-sh-mism { font:700 11px 'Outfit',sans-serif; color:#fff; background:#d98a3a; border-radius:8px; padding:5px 9px; }
.m-faint { color:var(--faint); }
.m-sh-chips { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.m-sh-note, .m-sh-alt { display:inline-flex; align-items:baseline; gap:3px; font:700 12px 'Outfit',sans-serif; color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:4px 8px; }
.m-sh-alt { color:var(--muted); border-radius:13px; }
.m-sh-note small { font:700 8px 'Outfit',sans-serif; color:var(--goldDeep); }
.m-sh-alt small { font:600 8px 'JetBrains Mono',ui-monospace,monospace; color:var(--faint); }

/* ── Stage 4: 3-lane accordion (Chords/Tab/Melody on one shared ruler) ──────── */
#app-mobile { --gut: 44px; }

/* ── Tablet: the mobile shell with more room (coarse pointer, ~601–1024px) ──
   Same single code path; this block just makes everything roomier. Chords + the active
   precision lane are both expanded (see laneBlock), so the extra height is used, not wasted. */
#app-mobile.uz-tablet { --gut: 62px; }
#app-mobile.uz-tablet .m-topbar { padding:calc(12px + env(safe-area-inset-top,0px)) 22px 12px; gap:14px; }
#app-mobile.uz-tablet .m-title { font-size:19px; }
#app-mobile.uz-tablet .m-lanebar { padding:11px 22px; }
#app-mobile.uz-tablet .m-canvas { padding:0; }
#app-mobile.uz-tablet .m-cn { font-size:19px; }
#app-mobile.uz-tablet .m-tlbl, #app-mobile.uz-tablet .m-mlbl { font-size:13px; }
#app-mobile.uz-tablet .m-peek { height:60px; }
#app-mobile.uz-tablet .m-tgrid { max-height:320px; }
/* bottom controls sit on a comfortable centered band */
#app-mobile.uz-tablet .m-transport, #app-mobile.uz-tablet .m-bottombar { padding-left:22px; padding-right:22px; }
#app-mobile.uz-tablet .m-lanetab { min-height:58px; }
#app-mobile.uz-tablet .m-lanetab-ic { font-size:18px; }
#app-mobile.uz-tablet .m-lanetab-nm { font-size:13px; }
/* sheets become centred, width-capped cards instead of edge-to-edge bottom sheets */
#app-mobile.uz-tablet .m-sheet, #app-mobile.uz-tablet .m-edsheet {
  left:50%; right:auto; transform:translateX(-50%); width:min(600px,94%); bottom:20px;
  border-radius:18px; border:1px solid var(--line); }
#app-mobile.uz-tablet .m-coach-card { max-width:460px; }

/* ── Short phones (iPhone SE / 8 / SE2, ≤700px tall): reclaim header/footer chrome and shrink the
   peek strips so the ACTIVE editing lane isn't squeezed. Tall phones (>700) keep the roomy spacing.
   Scoped to #app-mobile (only mounted on phones / ?mobile=1), non-tablet, so desktop is untouched. */
@media (max-height:700px) {
  #app-mobile:not(.uz-tablet) .m-topbar { padding-top:calc(4px + env(safe-area-inset-top,0px)); padding-bottom:6px; }
  #app-mobile:not(.uz-tablet) .m-quickbar { padding:3px 12px; }
  #app-mobile:not(.uz-tablet) .m-qtab { min-height:36px; }
  #app-mobile:not(.uz-tablet) .m-sections { padding:5px 16px; }
  #app-mobile:not(.uz-tablet) .m-lanebar { padding:5px 14px; }
  #app-mobile:not(.uz-tablet) .m-peek { height:36px; }
  #app-mobile:not(.uz-tablet) .m-transport { padding:6px 12px; }
  #app-mobile:not(.uz-tablet) .m-bottombar { padding-top:5px; padding-bottom:calc(6px + env(safe-area-inset-bottom,0px)); }
}
.m-lanehint { font-size:11px; color:var(--faint); font-style:italic; }
/* collapsed lane → 46px content-peek strip (rail + content preview + ⌄) */
.m-peek { flex:none; display:flex; align-items:stretch; width:100%; height:46px; background:var(--panel); border-bottom:1px solid var(--line2); text-align:left; }
.m-pk-rail { width:var(--gut); flex:none; border-right:1px solid var(--line); background:var(--rail); display:flex; align-items:center; justify-content:space-between; padding:0 5px 0 0; }
.m-pk-v { font:700 8px 'Outfit',sans-serif; letter-spacing:.08em; color:var(--faint); writing-mode:vertical-rl; transform:rotate(180deg); margin-left:5px; }
.m-pk-cv { font:700 11px 'Outfit',sans-serif; color:var(--faint); }
.m-pk-area { flex:1; position:relative; }
.m-pk-grid { position:absolute; inset:0; background-image:linear-gradient(90deg, transparent 0 calc(100% - 1px), var(--grid) calc(100% - 1px) 100%); background-repeat:repeat-x; pointer-events:none; }   /* background-size set inline = one tile per bar (was hardcoded 4 bars → misaligned peeks) */
.m-pk-cn { position:absolute; top:50%; transform:translateY(-50%); font:700 12px 'Outfit',sans-serif; color:var(--goldDeep); }
.m-pk-tab { position:absolute; transform:translate(-30%,-50%); font:700 10px 'JetBrains Mono',ui-monospace,monospace; color:var(--muted); background:var(--panel); padding:1px 2px; border-radius:3px; }   /* -30% keeps the beat-0 digit clear of the rail (was −50% → first column half-clipped) */
.m-pk-mel { position:absolute; top:50%; transform:translateY(-50%); min-width:16px; text-align:center; font:700 9px 'Outfit',sans-serif; border-radius:4px; padding:1px 3px; }

/* tab lane */
.m-tgrid { position:relative; flex:1; min-width:0; display:flex; flex-direction:column; max-height:270px; }   /* real-tab line spacing — an uncapped grid spread 6 strings over ~500px and read as a void */
.m-trow { display:flex; align-items:center; flex:1; min-height:24px; }
.m-tlbl { width:var(--gut); flex:none; display:flex; align-items:center; justify-content:flex-end; gap:5px; padding-right:6px; font:700 11px 'JetBrains Mono',ui-monospace,monospace; color:var(--faint); }
.m-tgauge { width:12px; flex:none; border-radius:2.3px; background:var(--faint); }
.m-tcells { flex:1; display:flex; position:relative; height:100%; }
/* cells MUST be transparent: the UA's default ButtonFace gray painted over the string-line
   gradient on .m-tcells, so the whole grid read as a disabled spreadsheet on device */
.m-tcell, .m-mcell { background:transparent; }
.m-tcell { flex:1; border-right:1px solid transparent; }
.m-tcell:nth-child(2n) { border-right:1px solid var(--line2); }   /* beat-level verticals only — per-slot columns were visual noise */
.m-tcell.barstart { border-left:1px solid var(--barline); }
.m-tcell:active { background:var(--selBg); }
.m-tmarks { position:absolute; left:var(--gut); right:0; top:0; bottom:0; pointer-events:none; }
.m-tmark { position:absolute; transform:translate(-50%,-50%); padding:0 3px; background:var(--bg); border:none; border-radius:0; font:700 12px 'JetBrains Mono',ui-monospace,monospace; color:var(--muted); }

/* melody lane */
.m-mgrid { position:relative; flex:1; min-width:0; }
.m-mrow { display:flex; align-items:stretch; min-height:14px; }
.m-mlbl { width:var(--gut); flex:none; display:flex; align-items:center; justify-content:center; font:700 9px 'JetBrains Mono',ui-monospace,monospace; color:var(--faint); }
.m-mcells { flex:1; display:flex; border-top:1px solid var(--line2); }
.m-mcell { flex:1; border-left:1px solid transparent; }
.m-mcell.barstart { border-left:1px solid var(--grid); }
.m-mcell:active { background:var(--selBg); }
.m-mnotes { position:absolute; left:var(--gut); right:0; top:0; bottom:0; pointer-events:none; }
.m-mnote { position:absolute; border-radius:4px; font:700 9px 'Outfit',sans-serif; display:flex; align-items:center; justify-content:center; overflow:hidden;
  pointer-events:auto; touch-action:none; cursor:ew-resize; }   /* chips take the pointer: sideways drag = stretch len, tap = remove */
.m-mnote.off { opacity:.5; }
.m-mnote.narrow { font-size:0; z-index:1; border-radius:2px; }   /* run-tail block: no label, sits after its labeled head */
.m-mrow.oband .m-mcells { background:rgba(120,100,60,.05); }     /* alternate-octave banding for orientation */
.uz-shadow .m-mrow.oband .m-mcells { background:rgba(0,0,0,.15); }
.m-oct { font-size:7px; opacity:.75; margin-left:1px; }
.m-emptyhint { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding-left:var(--gut); color:var(--faint); font:500 13px 'Outfit',sans-serif; pointer-events:none; }
.m-pk-tline { position:absolute; left:0; right:0; height:1px; background:var(--barline); opacity:.5; }
.m-undobtn { width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:var(--panel2); color:var(--muted); font-size:16px; }
.m-undobtn.off { opacity:.35; pointer-events:none; }
/* zoom segment (lane bar): bars visible across the viewport */
.m-zoomseg { display:flex; align-items:center; gap:3px; margin-right:2px; }
.m-zoombtn { min-width:26px; min-height:26px; border:1px solid var(--line); border-radius:8px; background:var(--panel2); color:var(--muted); font:700 11px 'Outfit',sans-serif; }
.m-zoombtn.on { background:var(--goldSoft); border-color:var(--gold); color:var(--goldDeep); }
.m-zoomlbl { font:600 9px 'Outfit',sans-serif; color:var(--faint); }
@media (max-width:359px) {   /* make room for the zoom seg on SE-width */
  .m-lanehint, .m-zoomlbl { display:none; }
  .m-zoombtn { min-width:22px; min-height:24px; }
  .m-zoomseg { gap:2px; }
  .m-lanebar { gap:6px; padding:9px 8px; }
  .m-btn.m-addchord, .m-selbtn { padding:6px 8px; }
}
/* first-run coach overlay */
.m-coach { position:fixed; inset:0; z-index:70; background:rgba(20,16,8,.45); display:flex; align-items:center; justify-content:center; padding:22px; }
.m-coach-card { background:var(--bg); border:1px solid var(--line); border-radius:18px; padding:20px 18px calc(16px + env(safe-area-inset-bottom,0px)); max-width:340px; display:flex; flex-direction:column; gap:13px; box-shadow:0 12px 40px rgba(40,30,10,.35); }
.m-coach-t { font:700 18px 'Outfit',sans-serif; color:var(--ink); }
.m-coach-row { display:flex; gap:11px; align-items:flex-start; font:400 13px/1.5 'Outfit',sans-serif; color:var(--muted); }
.m-coach-ic { flex:none; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:9px; background:var(--goldSoft); color:var(--goldDeep); font-size:14px; }
.m-coach-go { margin-top:3px; }

/* fret keypad sheet */
.m-fk-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.m-fk { min-height:44px; border:1px solid var(--line); border-radius:9px; background:var(--panel2); font:700 16px 'JetBrains Mono',ui-monospace,monospace; color:var(--ink); }
.m-fk:active { background:var(--gold); color:#fff; }
.m-fk-row { display:flex; align-items:center; gap:10px; }
.m-fk-arts { display:flex; align-items:center; gap:7px; margin-bottom:2px; }
.m-fk-artlbl { font:700 10px 'Outfit',sans-serif; letter-spacing:.1em; color:var(--faint); }
.m-fkart { min-width:38px; min-height:38px; border:1px solid var(--line); border-radius:9px; background:var(--panel2); font:700 15px 'JetBrains Mono',ui-monospace,monospace; color:var(--muted); }
.m-fkart.on { background:var(--goldSoft); border-color:var(--gold); color:var(--goldDeep); }
.m-fk-arthint { font:500 10px 'Outfit',sans-serif; color:var(--faint); margin-left:auto; }
.m-tart { font-size:8px; vertical-align:super; color:var(--goldDeep); margin-left:1px; }
/* key / time / bars menus + the bars chip */
.m-barchip { flex:none; min-height:32px; padding:5px 11px; border:1px solid var(--line); border-radius:12px; background:var(--panel2); color:var(--muted); font:700 12px 'Outfit',sans-serif; }
.m-keygrid, .m-bargrid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.m-keyopt, .m-baropt { min-height:46px; border:1px solid var(--line); border-radius:11px; background:var(--panel2); color:var(--ink); font:700 15px 'Outfit',sans-serif; }
.m-keyopt.on, .m-baropt.on { background:var(--goldSoft); border-color:var(--gold); color:var(--goldDeep); }
.m-timelist { display:flex; flex-direction:column; gap:8px; }
.m-timeopt { min-height:48px; border:1px solid var(--line); border-radius:12px; background:var(--panel2); color:var(--ink); font:700 17px 'JetBrains Mono',ui-monospace,monospace; }
.m-timeopt.on { background:var(--goldSoft); border-color:var(--gold); color:var(--goldDeep); }
.m-menu-note { margin-top:12px; color:var(--faint); font:500 12px 'Outfit',sans-serif; line-height:1.5; }
/* quick-access bar (Song / Lyrics / Scale / Arp / Tuner) — one tap between views + tools */
.m-quickbar { flex:none; display:flex; gap:6px; padding:6px 12px; background:var(--panel); border-bottom:1px solid var(--line2); }
.m-qtab { flex:1; display:flex; flex-direction:column; align-items:center; gap:1px; min-height:40px; border:1px solid var(--line); border-radius:11px; background:var(--panel2); color:var(--muted); }
.m-qtab-ic { font-size:15px; line-height:1.2; }
.m-qtab-nm { font:700 10px 'Outfit',sans-serif; }
.m-qtab:active { background:var(--goldSoft); border-color:var(--gold); color:var(--goldDeep); }
#app-mobile.uz-tablet .m-qtab { min-height:48px; }
#app-mobile.uz-tablet .m-qtab-ic { font-size:18px; }
#app-mobile.uz-tablet .m-qtab-nm { font-size:12px; }
/* options sheet */
.m-optrow { display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:13px 14px; border:1px solid var(--line); border-radius:12px; background:var(--panel2); }
.m-optmeta { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.m-optname { font-weight:700; font-size:15px; color:var(--ink); }
.m-optdesc { font:400 12px 'Outfit',sans-serif; color:var(--faint); line-height:1.45; }
.m-toggle { flex:none; width:46px; height:28px; border-radius:999px; background:var(--line); position:relative; transition:background .15s; }
.m-toggle.on { background:var(--gold); }
.m-toggle-knob { position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:left .15s; }
.m-toggle.on .m-toggle-knob { left:21px; }
/* section rename pen + delete; saved-song delete */
.m-songpen { font-size:10px; opacity:.55; }
.m-songdel { flex:none; width:34px; height:34px; margin-left:2px; border:1px solid var(--line); border-radius:10px; background:var(--panel2); color:var(--muted); font:600 16px/1 'Outfit',sans-serif; }
.m-songdel:active { color:var(--red); border-color:var(--red); }
.m-msrow { cursor:pointer; }
.m-msdel { flex:none; width:34px; height:34px; margin-left:4px; border:1px solid var(--line); border-radius:10px; background:var(--panel2); color:var(--muted); font:600 16px/1 'Outfit',sans-serif; }
.m-msdel:active { color:var(--red); border-color:var(--red); }
/* selection toolbar + paste + rests + section repeats */
.m-selcount { font:700 12px 'Outfit',sans-serif; color:var(--goldDeep); white-space:nowrap; }
.m-pastebtn { color:var(--goldDeep); border-color:var(--gold); background:var(--goldSoft); }
.m-chord.m-rest { background:transparent; border-style:dashed; border-color:var(--barline); box-shadow:none; }
.m-chord.m-rest .m-cn { color:var(--faint); }
.m-songchip.m-restchip { background:transparent; border-style:dashed; }
.m-songreps { flex:none; min-height:28px; padding:3px 8px; margin-left:6px; border:1px solid var(--line); border-radius:10px; background:var(--panel2); color:var(--muted); font:700 11px 'Outfit',sans-serif; }
.m-songreps.on { background:var(--goldSoft); border-color:var(--gold); color:var(--goldDeep); }

/* bottom dock = lane-switcher + More (prototype) */
.m-bottombar { flex:none; display:flex; align-items:center; gap:8px; background:var(--panel2); border-top:1px solid var(--line); padding:8px 12px calc(10px + env(safe-area-inset-bottom,0px)); }
.m-laneseg { flex:1; display:flex; gap:6px; }
.m-lanetab { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-height:50px;
  background:var(--bg); border:1px solid var(--line); border-radius:13px; color:var(--muted); }
.m-lanetab-ic { font-size:15px; line-height:1.2; }
.m-lanetab-nm { font:700 11px 'Outfit',sans-serif; }
.m-lanetab.on { background:var(--goldSoft); border-color:var(--gold); color:var(--goldDeep); }
.m-lanecyc-swap { font-size:18px; color:var(--goldDeep); }
.m-morebtn { width:48px; height:48px; flex:none; border-radius:13px; border:1px solid var(--line); background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:var(--faint); }
.m-more-ic { font-size:16px; } .m-more-lbl { font:600 9px 'Outfit',sans-serif; }

/* ── Stage 5: transport + playhead ────────────────────────────────────────── */
.m-transport { display:flex; align-items:center; gap:8px; padding:9px 12px; background:var(--panel); border-top:1px solid var(--line); }
.m-play { min-height:40px; padding:9px 16px; border-radius:20px; background:var(--gold); color:#fff; font:700 13px 'Outfit',sans-serif; box-shadow:0 2px 6px rgba(200,160,74,.4); }
.m-play.on { background:var(--red); }
.m-tchip { min-width:38px; min-height:36px; padding:6px 10px; border:1px solid var(--line); border-radius:9px; background:var(--panel2); color:var(--muted); font-weight:700; font-size:14px; }
.m-tchip.on { color:var(--gold); border-color:var(--gold); }
.m-loopbtn { width:34px; height:34px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:17px; border:1px solid var(--line); background:var(--panel); color:var(--muted); font:700 14px 'Outfit',sans-serif; }
.m-loopbtn.on { background:var(--goldDeep); color:#fff; border-color:var(--goldDeep); }
.m-bpm { font:600 12px 'Outfit',sans-serif; color:var(--muted); min-height:34px; padding:6px 8px; border:1px solid transparent; border-radius:10px; }
.m-bpm:active { border-color:var(--line); background:var(--panel2); }
.m-bpmedit { display:flex; align-items:center; gap:4px; }
.m-bpmstep { width:32px; height:32px; border-radius:10px; border:1px solid var(--line); background:var(--panel2); color:var(--ink); font:700 16px 'Outfit',sans-serif; }
.m-bpmval { min-width:44px; min-height:32px; border:1px solid var(--gold); border-radius:10px; background:var(--goldSoft); color:var(--goldDeep); font:700 13px 'Outfit',sans-serif; }
.m-bpmunit { font:600 10px 'Outfit',sans-serif; color:var(--faint); margin-left:2px; }
.m-timechip { display:flex; align-items:center; gap:3px; font:700 12px 'JetBrains Mono',ui-monospace,monospace; color:var(--muted); border:1px solid var(--line); border-radius:8px; padding:4px 8px; background:var(--panel); }
.m-timelbl { font-size:8px; color:var(--faint); }
.m-pianobtn { font:700 14px 'Outfit',sans-serif; color:var(--goldDeep); border:1px solid var(--line); background:var(--panel2); border-radius:11px; padding:5px 9px; }
.m-chord.playing { background:var(--selBg); border:2px solid var(--gold); box-shadow:0 0 16px rgba(200,160,74,.5); }
.m-playhead { position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--red); box-shadow:0 0 8px rgba(192,57,43,.5); z-index:6; pointer-events:none; }

/* ── Stage 5b: piano dock + REC ───────────────────────────────────────────── */
.m-piano { display:flex; flex-direction:column; background:#2b2b2b; }
.m-piano-ctl { display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--panel); border-top:1px solid var(--line); }
.m-recbtn { min-height:34px; padding:7px 12px; border-radius:13px; color:#fff; background:#5a3a37; font-weight:700; font-size:11px; }
.m-recbtn.on { background:#c0392b; animation:m-recblink 1.1s infinite; }
@keyframes m-recblink { 50% { opacity:.55; } }
.m-curchord { display:flex; align-items:center; gap:6px; background:var(--goldSoft); border:1px solid var(--line); border-radius:9px; padding:4px 8px; }
.m-curchord b { font:800 15px 'Outfit',sans-serif; color:var(--goldDeep); }
.m-ptones { display:flex; gap:3px; }
.m-ptone { font:700 8px 'JetBrains Mono',ui-monospace,monospace; color:#fff; background:#6fcf86; border-radius:3px; padding:1px 4px; }
.m-octctl { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:13px; overflow:hidden; }
.m-octlbl { font:700 10px 'Outfit',sans-serif; color:var(--faint); padding:0 6px; }
.m-keys { height:150px; position:relative; padding:9px 8px 10px; }
.m-keys-inner { position:relative; height:100%; display:flex; gap:3px; }
.m-pkey { flex:1; position:relative; background:var(--keyW); border-radius:0 0 6px 6px; box-shadow:0 2px 3px rgba(0,0,0,.28); display:flex; flex-direction:column; justify-content:flex-end; align-items:center; padding-bottom:7px; gap:3px; }
.m-pkey.dis, .m-pkeyb.dis { opacity:.32; }
.m-pkeyb { position:absolute; top:0; width:7.2%; height:62%; background:linear-gradient(#3a3a3a,#1a1a1a); border-radius:0 0 4px 4px; box-shadow:0 3px 4px rgba(0,0,0,.5); display:flex; flex-direction:column; justify-content:flex-end; align-items:center; padding-bottom:4px; }
.m-pdot { width:8px; height:8px; border-radius:50%; }
.m-pkeyb .m-pdot { width:5px; height:5px; }
.m-plabel { font:700 10px 'Outfit',sans-serif; color:#2b2b2b; }
.m-piano-ft { display:flex; align-items:center; gap:8px; padding:8px 12px calc(14px + env(safe-area-inset-bottom,0px)); background:#2b2b2b; }
.m-leg { font:600 10px 'Outfit',sans-serif; } .m-leg.c { color:#7fd894; } .m-leg.s { color:#edc56a; } .m-leg.p { color:#c2a6e0; } .m-leg.o { color:#e8917f; }
.m-piano-ft .m-btn { background:transparent; color:#cfc7b5; border-color:#4a4a44; }
.m-piano-ft .m-keep { background:#6fcf86; color:#1f1f1f; border-color:#6fcf86; font-weight:700; }

/* ── Stage 6: Song view (full-screen arrange) ─────────────────────────────── */
.m-songbtn { flex:none; min-height:36px; padding:6px 9px; border:1px solid var(--line); border-radius:13px;
  background:var(--goldSoft); color:var(--goldDeep); font:700 11px 'Outfit',sans-serif; white-space:nowrap; }
.m-song { position:fixed; inset:0; z-index:30; display:flex; flex-direction:column;
  background:var(--bg); color:var(--ink); }
.m-song-hd { position:sticky; top:0; display:flex; align-items:center; gap:8px; flex-wrap:wrap;   /* wraps at 320px — otherwise ✕ Builder lands 42px off-screen */
  padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px; background:var(--panel); border-bottom:1px solid var(--line); }
.m-song-mark { font-size:22px; line-height:1; }
.m-song-title { font:700 14px 'Outfit',sans-serif; color:var(--goldDeep); white-space:nowrap; }
.m-song-back { min-height:40px; padding:7px 12px; border:1px solid var(--line); border-radius:13px;
  background:var(--bg); color:var(--muted); font:700 12px 'Outfit',sans-serif; white-space:nowrap; }
.m-song-tg { flex:none; min-height:40px; padding:7px 12px; border:1px solid var(--line); border-radius:13px;
  background:var(--goldSoft); color:var(--goldDeep); font:700 12px 'Outfit',sans-serif; white-space:nowrap; }
.m-song-tg.on { background:var(--gold); color:#fff; border-color:var(--gold); }
.m-song-hint { padding:10px 16px 4px; font:600 12px 'Outfit',sans-serif; color:var(--faint); }
.m-song-hintg { color:var(--ink); font-weight:700; }
.m-song-list { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:8px 16px 20px;
  display:flex; flex-direction:column; gap:11px; }
.m-songrow { background:var(--panel2); border:1px solid var(--line); border-radius:14px;
  padding:11px 12px 12px; display:flex; flex-direction:column; gap:8px; }
.m-songrow.active { background:var(--goldSoft); border:1.5px solid var(--gold); }
.m-songrow.dragging { box-shadow:0 12px 28px rgba(30,26,15,.28); opacity:.92; }
.m-songrow-hd { display:flex; align-items:center; gap:9px; }
.m-songhandle { flex:none; min-width:30px; min-height:44px; display:flex; align-items:center; justify-content:center;
  color:var(--faint); font:700 16px 'Outfit',sans-serif; cursor:grab; touch-action:none; margin:-6px 0; }
.m-songhandle:active { cursor:grabbing; }
.m-songname { flex:0 1 auto; min-width:0; font:700 16px 'Outfit',sans-serif; color:var(--ink); background:transparent;
  padding:0; text-align:left; min-height:44px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-songmeta { flex:none; font:600 11px 'Outfit',sans-serif; color:var(--faint); white-space:nowrap; }
.m-songopen { flex:none; padding:5px 9px; border:1px solid var(--line); border-radius:10px;
  background:transparent; color:var(--goldDeep); font:700 11px 'Outfit',sans-serif; white-space:nowrap; }
.m-songchips { display:flex; gap:6px; align-items:stretch; min-height:48px; }
.m-songchips.ly { min-height:68px; } .m-songchips.sh { min-height:74px; } .m-songchips.sh.ly { min-height:92px; }
.m-songchip { position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:2px; padding:6px 4px; border:1px solid var(--chordBorder); border-radius:9px;
  background:var(--chordBg); cursor:grab; touch-action:none; overflow:hidden; }
.m-songchip:active { cursor:grabbing; }
.m-songchip.ook { border:1.5px solid #d98a3a; }
.m-songcn { font-weight:700; font-size:16px; color:var(--goldDeep); line-height:1.05; }
.m-songrm { font-size:9px; color:var(--faint); font-weight:600; line-height:1; }
.m-songbang { position:absolute; top:3px; right:4px; width:13px; height:13px; border-radius:50%;
  background:#d98a3a; color:#fff; font:700 9px/13px 'Outfit',sans-serif; text-align:center; }
.m-songdia { display:flex; justify-content:center; margin-top:2px; }
.m-songly { margin-top:3px; padding-top:3px; border-top:1px solid var(--line2); max-width:94%; font-size:10px; font-weight:600; color:var(--line);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-songly.has { color:#5ec269; }
.m-songnochords { color:var(--faint); font-size:12px; font-style:italic; padding:13px 2px; }
.m-song-addrow { display:flex; align-items:center; justify-content:center; gap:7px; min-height:50px; padding:14px 0;
  border:1.5px dashed var(--gold); border-radius:14px; background:transparent; color:var(--goldDeep); font:700 13px 'Outfit',sans-serif; }
.m-song-addplus { font-size:16px; font-weight:700; }
/* song-view mini fret diagram (real grid, from chord name) */
/* mini fret diagram — single 30×34 box, markers absolute at top, grid at top:7px, vertical string lines */
.m-sd { position:relative; width:30px; height:34px; }
.m-sd-mks { position:absolute; top:0; left:0; right:0; height:7px; }
.m-sd-mk { position:absolute; top:0; transform:translateX(-50%); font:700 6px 'Outfit',sans-serif; color:var(--faint); }
.m-sd-grid { position:absolute; top:7px; left:0; right:0; bottom:1px; border:1px solid var(--chordBorder); border-top:2px solid var(--faint); border-radius:0 0 2px 2px; }
.m-sd-str { position:absolute; top:0; bottom:0; width:1px; background:var(--chordBorder); }
.m-sd-dot { position:absolute; width:6px; height:6px; border-radius:50%; background:var(--goldDeep); transform:translate(-50%,-50%); }

/* ── Stage 7: Lyrics / RhymeForge (ALWAYS dark, independent of the app key-mode theme) ──────── */
.m-lyrbtn { color:#d4a853; }
.m-lyr { position:fixed; inset:0; z-index:31; display:flex; flex-direction:column;
  background:#0e0e14; color:#ebe8e2; font-family:'Outfit',sans-serif; }
.m-lyr-hd { display:flex; align-items:center; gap:8px;
  padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px; background:#14141e; border-bottom:1px solid #252530; }
.m-lyr-mark { font-family:'Playfair Display',serif; font-size:16px; font-weight:700; color:#d4a853; letter-spacing:.03em; }
.m-lyr-back { min-height:40px; padding:6px 11px; border:1px solid #252530; border-radius:11px;
  background:transparent; color:#a0a0a8; font:700 12px 'Outfit',sans-serif; white-space:nowrap; }
.m-lyr-tabs { display:flex; background:#14141e; border-bottom:1px solid #252530; }
.m-lyr-tab { min-height:46px; padding:10px 16px; background:transparent; color:#606068; font-weight:600; font-size:12px;
  text-transform:uppercase; letter-spacing:.04em; border-bottom:2px solid transparent; }
.m-lyr-tab.on { color:#d4a853; border-bottom-color:#d4a853; }
.m-lyr-views { display:flex; gap:4px; padding:10px 16px; border-bottom:1px solid #1a1a28; }
.m-lyr-vw { flex:1; min-height:44px; padding:7px 10px; border:1px solid #252530; border-radius:5px;
  background:#14141e; color:#a0a0a8; font-weight:600; font-size:11px; }
.m-lyr-vw.on { background:rgba(212,168,83,.15); color:#d4a853; border-color:#d4a853; }
.m-lyr-body { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:4px 14px calc(20px + env(safe-area-inset-bottom,0px)); }
.m-lyr-rhymeslot { flex:1; }   /* the persistent iframe (in document.body) overlays this area */
/* free-write */
.m-lyr-secbtns { display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:8px 0; }
.m-lyr-il { font-size:10px; color:#606068; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.m-lyr-secbtn { padding:7px 12px; border:1px solid #252530; border-radius:5px;
  background:#14141e; color:#d4a853; font:600 11px 'Outfit',sans-serif; white-space:nowrap; }
.m-lyr-import { min-height:38px; padding:8px 13px; border:1px dashed #4a4636; border-radius:6px;
  background:transparent; color:#a0a0a8; font-weight:700; font-size:12px; white-space:nowrap; }
.m-lyr-impopts { display:flex; flex-direction:column; gap:8px; }
.m-lyr-impopt { min-height:46px; padding:12px 14px; border:1px solid #252530; border-radius:10px;
  background:#14141e; color:#ebe8e2; font-weight:700; font-size:14px; text-align:left; }
.m-lyr-impopt.dis { opacity:.4; }
.m-lyr-toast { position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); z-index:36;
  max-width:88%; padding:10px 16px; border-radius:11px; background:#14141e; border:1px solid #d4a853; color:#ebe8e2; font:600 13px 'Outfit',sans-serif; box-shadow:0 8px 24px rgba(0,0,0,.5); }
.m-lyr-ta { width:100%; min-height:240px; resize:none; padding:16px; border:1px solid #252530; border-radius:6px;
  background:#12121c; color:#ebe8e2; font:500 16px/1.7 'JetBrains Mono',ui-monospace,monospace; }  /* 16px min: iOS auto-zooms focused inputs below 16px, which jams the fixed shell */
.m-lyr-ta:focus { outline:none; border-color:#d4a853; }
.m-lyr-hint { font-size:11px; color:#606068; padding:9px 2px 12px; line-height:1.5; }
.m-lyr-parse { align-self:flex-start; padding:9px 16px; background:rgba(212,168,83,.15); border:1px solid #d4a853; color:#d4a853; font:600 11px 'Outfit',sans-serif; border-radius:5px; margin-top:10px; }
.m-lyr-howto { margin-top:16px; border:1px solid rgba(212,168,83,.18); border-radius:8px; background:rgba(212,168,83,.04); padding:6px 16px 14px; }
.m-lyr-howtohd { display:block; width:100%; text-align:left; padding:10px 0 6px;
  background:transparent; color:#d4a853; font-weight:700; font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
.m-lyr-howtocv { color:#d4a853; }
.m-lyr-howtol { margin:0; padding:0 0 0 18px; color:#b8b3a8; font-size:12px; line-height:1.55; }
.m-lyr-howtol li { margin-bottom:5px; }
.m-lyr-howtol b { color:#e4bc6c; }
.m-lyr-tip { margin-top:8px; font-size:12px; color:#8a8378; line-height:1.5; }
/* structured */
.m-lyr-empty { color:#606068; font-size:13px; text-align:center; padding:40px 14px; line-height:1.8; }
.m-lyr-empty b { color:#d4a853; }
.m-lyr-sec { background:#14141e; border:1px solid #252530; border-radius:8px; margin:0 0 16px; overflow:hidden; }
.m-lyr-sechd { display:flex; align-items:center; gap:8px; padding:9px 12px; background:#1a1a28; }
.m-lyr-seclbl { font-weight:700; font-size:12px; color:#d4a853; letter-spacing:.03em; }
.m-lyr-linked { font-size:11px; color:#5ec269; font-weight:600; }
.m-lyr-unlinked { font-size:11px; color:#606068; font-style:italic; }
.m-lyr-line { display:flex; flex-wrap:wrap; align-items:stretch; padding:6px 12px; border-bottom:1px solid #1a1a28; }
.m-lyr-line:last-child { border-bottom:none; }
.m-lyr-stack { display:inline-flex; flex-direction:column; align-items:stretch; }
.m-lyr-stack.m-lyr-sp { pointer-events:none; }
.m-lyr-ch { min-height:14px; margin-bottom:2px; text-align:center; font-family:'JetBrains Mono',ui-monospace,monospace; font-weight:700; font-size:11px; color:#5ec269; line-height:1.3; }
.m-lyr-w { min-height:30px; display:flex; align-items:center; justify-content:center; text-align:center; padding:4px 3px; border-radius:4px; background:transparent; color:#ebe8e2;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:14px; line-height:1.5; white-space:pre; }
.m-lyr-w:active { background:rgba(212,168,83,.15); }
.m-lyr-w.has { color:#d4a853; font-weight:700; }
.m-lyr-sp .m-lyr-w { color:transparent; }
/* chord-pick bottom sheet */
.m-lyr-pscrim { position:fixed; inset:0; z-index:34; background:rgba(0,0,0,.55); }
.m-lyr-psheet { position:fixed; left:0; right:0; bottom:0; z-index:35; background:#14141e; border-top:2px solid #d4a853;
  border-radius:16px 16px 0 0; padding:8px 16px calc(18px + env(safe-area-inset-bottom,0px)); }
.m-lyr-psheet .m-grab { width:36px; height:4px; border-radius:2px; background:#3a3a46; margin:2px auto 10px; }
.m-lyr-pshd { display:flex; align-items:center; justify-content:space-between; font:700 13px 'Outfit',sans-serif; color:#d4a853; margin-bottom:12px; }
.m-lyr-pshd .m-x { width:28px; height:28px; border-radius:50%; background:#1a1a28; color:#606068; font:700 13px 'Outfit',sans-serif; }
.m-lyr-pchips { display:flex; flex-wrap:wrap; gap:8px; }
.m-lyr-pickchip { padding:9px 14px; border:1px solid #252530; border-radius:5px; background:#1a1a28; color:#ebe8e2; font:600 13px 'JetBrains Mono',ui-monospace,monospace; }
.m-lyr-pickchip.on { border-color:#d4a853; color:#d4a853; background:rgba(212,168,83,.14); }
.m-lyr-pickempty { color:#a0a0a8; font-size:12px; line-height:1.6; padding:4px 2px; }
.m-lyr-psft { margin-top:12px; }
.m-lyr-pickrm { padding:9px 14px; border:1px solid rgba(224,107,94,.3); border-radius:5px; background:transparent; color:#e06b5e; font:600 13px 'Outfit',sans-serif; }

/* ── Stage 8: Tools (More menu + Chord Picker / Key Finder / Progression Analysis / Show Scale) ── */
/* More menu (bottom sheet list) */
.m-toollist { display:flex; flex-direction:column; gap:8px; }
.m-toolrow { display:flex; align-items:center; gap:12px; width:100%; text-align:left; min-height:60px; padding:13px 14px;
  border:1px solid var(--line); border-radius:12px; background:var(--panel2); }
.m-toolico { flex:none; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border-radius:10px; background:var(--goldSoft); color:var(--goldDeep); font-size:18px; }
.m-toolico-rail { background:var(--rail); color:var(--muted); }
.m-toolmeta { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.m-toolname { font-weight:700; font-size:15px; color:var(--ink); }
.m-tooldesc { font:400 12px 'Outfit',sans-serif; color:var(--faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-toolbadge { flex:none; align-self:center; font:700 11px 'Outfit',sans-serif; color:var(--goldDeep);
  background:var(--goldSoft); border-radius:999px; padding:3px 9px; }
/* File sheet */
.m-file-name { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.m-file-input { flex:1; min-width:0; min-height:38px; padding:8px 12px; border:1px solid var(--line); border-radius:11px;
  background:var(--panel2); color:var(--ink); font:600 16px 'Outfit',sans-serif; }  /* 16px min: prevents iOS focus auto-zoom */
.m-filegrid { display:flex; flex-direction:column; gap:8px; }
.m-filebtn { display:flex; align-items:center; gap:12px; width:100%; text-align:left; min-height:58px; padding:12px 14px;
  border:1px solid var(--line); border-radius:12px; background:var(--panel2); }
.m-fileico { flex:none; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border-radius:10px; background:var(--goldSoft); font-size:18px; }
.m-filemeta { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.m-filename { font-weight:700; font-size:15px; color:var(--ink); }
.m-filedesc { font:400 12px 'Outfit',sans-serif; color:var(--faint); }
.m-file-msg { margin-top:12px; padding:9px 12px; border-radius:10px; background:var(--goldSoft); color:var(--goldDeep);
  font:600 13px 'Outfit',sans-serif; white-space:pre-line; }
/* My Songs sheet */
.m-mslist { display:flex; flex-direction:column; gap:8px; }
.m-msrow { display:flex; align-items:center; gap:10px; width:100%; text-align:left; min-height:54px; padding:11px 14px;
  border:1px solid var(--line); border-radius:12px; background:var(--panel2); }
.m-msrow.on { border-color:var(--gold); background:var(--goldSoft); }
.m-msmeta { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.m-msname { font-weight:700; font-size:15px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-mscur { font:700 11px 'Outfit',sans-serif; color:var(--goldDeep); }
.m-msdesc { font:400 12px 'Outfit',sans-serif; color:var(--faint); }
.m-msgo { flex:none; font:700 12px 'Outfit',sans-serif; color:var(--goldDeep); }
.m-ms-empty { padding:18px 14px; text-align:center; color:var(--muted); font:400 13px 'Outfit',sans-serif; line-height:1.5; }
/* Tutorial sheet */
.m-tut { display:flex; flex-direction:column; gap:12px; }
.m-tutrow { display:flex; flex-direction:column; gap:4px; padding:11px 13px; border:1px solid var(--line); border-radius:12px; background:var(--panel2); }
.m-tuthd { font-weight:700; font-size:14px; color:var(--goldDeep); }
.m-tuttxt { font:400 13px 'Outfit',sans-serif; color:var(--muted); line-height:1.5; }
/* Shapes display modes (chord cards): compact hides the diagram, names hides length too */
.m-chord.m-disp-names { justify-content:center; }
.m-chord.m-disp-names .m-cn, .m-chord.m-disp-compact .m-cn { font-size:16px; }
/* full-screen tool frame */
.m-tool { position:fixed; inset:0; z-index:31; display:flex; flex-direction:column; background:var(--bg); color:var(--ink); }
.m-tool-hd { display:flex; align-items:center; gap:8px; padding:calc(10px + env(safe-area-inset-top,0px)) 14px 10px;
  background:var(--panel); border-bottom:1px solid var(--line); }
.m-tool-mark { font-size:22px; line-height:1; }
.m-tool-zest { font:700 19px 'Playfair Display',serif; color:var(--ink); }
.m-tool-title { font:700 14px 'Outfit',sans-serif; color:var(--goldDeep); }
.m-tool-back { min-height:40px; padding:7px 12px; border:1px solid var(--line); border-radius:13px;
  background:var(--bg); color:var(--muted); font:700 12px 'Outfit',sans-serif; white-space:nowrap; }
.m-tool-body { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:12px 14px calc(20px + env(safe-area-inset-bottom,0px)); }
.m-tool-body .m-pick-lbl { font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--faint); text-transform:uppercase; margin:14px 0 7px; }
/* Key Finder */
.m-kfroots { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
.m-kfroot { min-height:44px; border:1px solid var(--line); border-radius:10px; background:var(--panel2); color:var(--ink); font-weight:700; font-size:13px; }
.m-kfroot.on { background:var(--gold); color:#fff; border-color:var(--gold); }
.m-kfquals { display:flex; flex-wrap:wrap; gap:6px; }
.m-kfqual { min-height:44px; padding:9px 14px; border:1px solid var(--line); border-radius:11px; background:var(--panel2); color:var(--muted); font-weight:700; font-size:13px; }
.m-kfqual.on { background:var(--ink); color:var(--panel); border-color:var(--ink); }
.m-kf-addrow { display:flex; align-items:center; gap:10px; margin-top:12px; }
.m-kf-prev { flex:1; font-weight:800; font-size:18px; color:var(--gold); }
.m-kfchips { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px; min-height:30px; }
.m-kfchip { display:inline-flex; align-items:center; gap:5px; padding:6px 6px 6px 11px; border:1px solid var(--line); border-radius:12px; background:var(--selBg); font-weight:700; font-size:13px; }
.m-kfx { width:24px; height:24px; border-radius:50%; background:var(--line); color:var(--ink); font-size:13px; line-height:1; }
.m-kfsep { color:var(--faint); font-size:13px; }
.m-kf-empty, .m-kf-none { color:var(--faint); font-size:12px; font-style:italic; padding:4px 2px; }
.m-kfkey { border:1px solid var(--line); border-radius:12px; background:var(--panel2); padding:10px 11px; margin-bottom:9px; }
.m-kfkey.sel { border:1.5px solid var(--gold); background:var(--goldSoft); }
.m-kfkeyhd { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.m-kfkeyname { font-weight:800; font-size:15px; text-transform:capitalize; }
.m-kfselbtn { min-height:38px; padding:7px 13px; font-size:12px; }
.m-kfdias { display:flex; flex-wrap:wrap; gap:5px; }
.m-kfdia { display:inline-flex; flex-direction:column; align-items:center; gap:1px; min-width:42px; padding:5px 7px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--muted); font-size:12px; font-weight:600; }
.m-kfdia.matched { border-color:var(--gold); color:var(--gold); background:var(--selBg); font-weight:800; }
.m-kfrm { font:700 9px 'JetBrains Mono',ui-monospace,monospace; color:var(--faint); }
.m-kfdia.matched .m-kfrm { color:var(--goldDeep); }
.m-kf-foot { display:flex; align-items:center; gap:10px; margin-top:16px; }
/* Progression Analysis */
.m-an-empty { color:var(--faint); font-size:13px; text-align:center; padding:40px 14px; line-height:1.7; }
.m-an-key { font-weight:800; font-size:18px; color:var(--gold); }
.m-an-char { font-size:13px; color:var(--ink); font-weight:600; margin-top:2px; }
.m-an-roman { font:700 14px 'JetBrains Mono',ui-monospace,monospace; color:var(--muted); margin-top:10px; word-spacing:2px; }
.m-an-arc { display:flex; align-items:flex-end; gap:6px; height:80px; margin:14px 0 4px; padding:8px; border:1px solid var(--line); border-radius:10px; background:var(--panel2); }
.m-an-bar { flex:1; min-width:6px; border-radius:4px 4px 0 0; }
.m-an-narr { font-size:12px; color:var(--muted); line-height:1.6; margin-top:4px; }
.m-an-sec { margin-top:16px; }
.m-an-lbl { font:700 11px 'Outfit',sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin-bottom:7px; }
.m-an-pills { display:flex; flex-wrap:wrap; gap:6px; }
.m-an-pill.out { padding:6px 11px; border-radius:11px; border:1px solid #d98a3a; color:#c0742a; background:var(--panel2); font-weight:700; font-size:13px; }
.m-an-row { padding:9px 11px; border:1px solid var(--line); border-radius:10px; background:var(--panel2); margin-bottom:7px; font-size:13px; }
.m-an-row b { color:var(--ink); }
.m-an-strength { float:right; font-size:11px; color:var(--gold); font-weight:700; text-transform:capitalize; }
.m-an-tip { font-size:12px; color:var(--muted); margin-top:3px; line-height:1.5; }
.m-an-vl { font-size:12px; color:var(--goldDeep); margin-top:3px; }
/* Show Scale */
.m-sc-chips { display:flex; flex-wrap:wrap; gap:7px; }
.m-sc-chip { min-height:40px; padding:8px 13px; border:1px solid var(--line); border-radius:10px; background:var(--panel2); color:var(--muted); font:700 13px 'Outfit',sans-serif; }
.m-sc-chip.on { background:var(--ink); color:var(--panel); border-color:var(--ink); }
.m-sc-head { display:flex; align-items:center; font:800 16px 'Outfit',sans-serif; color:var(--ink); margin:18px 0 12px; }
.m-sc-over { font:600 11px 'Outfit',sans-serif; color:var(--faint); }
.m-sc-tiles { display:flex; flex-wrap:wrap; gap:7px; }
.m-sc-tile { display:flex; flex-direction:column; align-items:center; gap:2px; min-width:40px; padding:9px 6px; border-radius:10px; }
.m-sc-note { font:700 14px 'Outfit',sans-serif; }
.m-sc-deg { font:600 9px 'Outfit',sans-serif; opacity:.8; }
.m-sc-legend { display:flex; gap:16px; margin-top:18px; font:600 11px 'Outfit',sans-serif; }
.m-sc-leg.chord { color:#2f8a4c; } .m-sc-leg.scale { color:#b3892a; }
/* Arpeggiator (fretboard visualizer) */
.m-arp-top { display:flex; align-items:center; margin-bottom:4px; }
.m-arp-rot { min-height:36px; padding:8px 13px; border:1px solid var(--line); border-radius:10px; background:var(--panel2); color:var(--muted); font:700 12px 'Outfit',sans-serif; }
.m-arp-rot.on { background:var(--gold); color:#fff; border-color:var(--gold); }
/* fit (landscape) mode: shrink fret columns so all 15 frets show without horizontal scroll */
.m-arp-neck.fit { overflow-x:hidden; }
.m-arp-neck.fit .m-arp-fnum, .m-arp-neck.fit .m-arp-cell { width:21px; }
.m-arp-neck.fit .m-arp-dot { width:19px; height:19px; }
.m-arp-neck.fit .m-arp-dot b { font-size:8px; } .m-arp-neck.fit .m-arp-dot i { font-size:6px; }
.m-arp-viewseg { display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-bottom:4px; }
.m-arp-vw { min-height:36px; padding:8px 16px; background:var(--panel2); color:var(--muted); font:700 12px 'Outfit',sans-serif; }
.m-arp-vw.on { background:var(--ink); color:var(--panel); }
.m-arp-shapes { display:flex; gap:7px; }
.m-arp-shape { width:44px; min-height:44px; border:1px solid var(--line); border-radius:10px; background:var(--panel2); color:var(--muted); font:800 15px 'Outfit',sans-serif; }
.m-arp-shape.on { background:var(--gold); color:#fff; border-color:var(--gold); }
.m-arp-cell.inshape { background:rgba(200,160,74,.13); }
.m-arp-lock { color:var(--goldDeep); border-color:var(--gold); }
.m-arp-locked { margin-bottom:10px; }
.m-arp-lockhd { display:flex; align-items:center; gap:8px; margin-bottom:5px; }
.m-arp-lockname { font:700 13px 'Outfit',sans-serif; color:var(--goldDeep); }
.m-arp-unlock { margin-left:auto; width:26px; height:26px; border-radius:50%; background:var(--rail); color:var(--faint); font:700 14px 'Outfit',sans-serif; }
.m-arproots { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
.m-arproot { min-height:44px; border:1px solid var(--line); border-radius:10px; background:var(--panel2); color:var(--ink); font-weight:700; font-size:13px; }
.m-arproot.on { background:var(--gold); color:#fff; border-color:var(--gold); }
.m-arpquals { display:flex; flex-wrap:wrap; gap:6px; }
.m-arpqual { min-height:44px; padding:9px 13px; border:1px solid var(--line); border-radius:11px; background:var(--panel2); color:var(--muted); font-weight:700; font-size:13px; }
.m-arpqual.on { background:var(--ink); color:var(--panel); border-color:var(--ink); }
.m-arp-result { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:14px; }
.m-arp-name { font-weight:800; font-size:18px; color:var(--gold); }
.m-arp-chips { display:flex; flex-wrap:wrap; gap:5px; flex:1; }
.m-arpchip { display:inline-flex; align-items:baseline; gap:3px; padding:4px 9px; border-radius:11px; color:#fff; font-weight:700; font-size:12px; text-shadow:0 1px 1px rgba(0,0,0,.35); }
.m-arpchip small { font-size:9px; opacity:.9; }
.m-arp-play { flex:none; }
.m-arp-neck { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid #2a2418; border-radius:10px; background:#15120c; padding:8px 6px; }
.m-arp-row { display:flex; align-items:center; gap:0; }
.m-arp-slbl { flex:none; width:20px; font:700 11px 'JetBrains Mono',ui-monospace,monospace; color:#8a8270; text-align:center; }
.m-arp-cells { flex:1; display:flex; align-items:center; }
.m-arp-fnum { flex:none; width:30px; text-align:center; font:700 9px 'JetBrains Mono',ui-monospace,monospace; color:#6b6b6b; }
.m-arp-fnum.mk { color:var(--gold); }
.m-arp-cell { flex:none; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-left:1px solid #241f15; }
.m-arp-cell.mk { background:rgba(200,160,74,.08); }
.m-arp-head .m-arp-fnum { height:18px; }
.m-arp-dot { width:24px; height:24px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1;
  color:#fff; text-shadow:0 1px 1px rgba(0,0,0,.45); }
.m-arp-dot b { font:800 9px 'Outfit',sans-serif; }
.m-arp-dot i { font:700 7px 'Outfit',sans-serif; font-style:normal; opacity:.85; }
.m-arp-dot.root { box-shadow:0 0 0 2px #fff, 0 0 8px rgba(255,255,255,.4); }
/* Tuner — permanently dark instrument panel (TOOLS-SPEC §A3), independent of app theme */
.m-tun { display:flex; flex-direction:column; align-items:center; gap:12px; padding:16px 14px;
  background:#0c0e12; border:1px solid rgba(200,160,74,.15); border-radius:12px; color:#d8d8d8; }
.m-tun-err { width:100%; padding:10px 12px; border:1px solid var(--red); border-radius:10px; background:rgba(224,107,94,.12); color:#e8917f; font-size:13px; text-align:center; }
.m-tun-ctl { display:flex; align-items:center; width:100%; gap:8px; }
.m-tun-seg { display:flex; border:1px solid rgba(255,255,255,.14); border-radius:9px; overflow:hidden; }
.m-tun-mode { min-height:34px; padding:7px 14px; background:transparent; color:#8a8a8a; font:700 12px 'Outfit',sans-serif; }
.m-tun-mode.on { background:var(--gold); color:#1a1a1a; }
.m-tun-pick { min-height:34px; padding:7px 12px; border:1px solid rgba(255,255,255,.14); border-radius:9px; background:#16181d; color:#d8d8d8; font:700 12px 'Outfit',sans-serif; }
.m-tun-readout { display:flex; align-items:center; justify-content:center; gap:18px; margin-top:6px; }
.m-tun-note { font-weight:800; font-size:72px; letter-spacing:-.03em; line-height:1; color:#d8d8d8; }
.m-tun-note small { font-size:26px; vertical-align:super; opacity:.7; }
.m-tun-centsbox { display:flex; flex-direction:column; align-items:center; min-width:62px; padding:7px 10px; border:1px solid rgba(76,175,80,.4); border-radius:10px; }
.m-tun-cents { font:800 28px 'JetBrains Mono',ui-monospace,monospace; color:#d8d8d8; line-height:1; }
.m-tun-centslbl { font:700 9px 'Outfit',sans-serif; letter-spacing:.12em; color:#6b6b6b; margin-top:3px; }
.m-tun-tscrim { position:fixed; inset:0; z-index:34; background:rgba(0,0,0,.6); }
.m-tun-tsheet { position:fixed; left:0; right:0; bottom:0; z-index:35; max-height:74%; overflow-y:auto; overscroll-behavior:contain; background:#14141a; border-top:2px solid var(--gold); border-radius:16px 16px 0 0; padding:8px 16px calc(18px + env(safe-area-inset-bottom,0px)); }
.m-tun-tshd { display:flex; align-items:center; padding:6px 0 12px; font:700 14px 'Outfit',sans-serif; color:#d8d8d8; }
.m-tun-tshd span { flex:1; }
.m-tun-tgrp { margin-bottom:14px; }
.m-tun-tcat { font:700 10px 'Outfit',sans-serif; letter-spacing:.1em; text-transform:uppercase; color:#6b6b6b; margin-bottom:7px; }
.m-tun-tns { display:flex; flex-wrap:wrap; gap:7px; }
.m-tun-tn { min-height:40px; padding:8px 12px; border:1px solid rgba(255,255,255,.12); border-radius:10px; background:#16181d; color:#cfcabf; font:700 12px 'Outfit',sans-serif; }
.m-tun-tn.on { background:var(--gold); color:#1a1a1a; border-color:var(--gold); }
.m-tun-strobe { position:relative; width:100%; height:64px; border:1px solid rgba(255,255,255,.06); border-radius:8px; background:#0a0b0e; overflow:hidden; }
.m-tun-strobe-track { position:absolute; top:0; bottom:0; left:-20px; right:-20px; will-change:transform;
  background:repeating-linear-gradient(90deg, var(--sc,#3a3f4c) 0 7px, transparent 7px 18px); opacity:.55; }
.m-tun-strobe-zone { position:absolute; top:0; bottom:0; left:46%; width:8%; background:rgba(76,175,80,.14); }
.m-tun-strobe-center { position:absolute; top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%); background:#3a3f4c; box-shadow:0 0 8px rgba(76,175,80,.35); }
.m-tun-scale { display:flex; width:100%; font-size:11px; color:#6b6b6b; }
.m-tun-status { font-weight:700; font-size:15px; color:#b8b3a8; min-height:20px; }
.m-tun-det { font:600 11px 'JetBrains Mono',ui-monospace,monospace; color:#555; min-height:14px; }
.m-tun-level { width:100%; height:6px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden; }
.m-tun-levelbar { display:block; height:100%; width:0%; background:var(--gold); transition:width .06s linear; }
.m-tun-strings { display:flex; gap:8px; }
.m-tun-str { min-width:46px; min-height:46px; border:1px solid rgba(255,255,255,.1); border-radius:11px; background:#16181d; color:#b8b3a8; font-weight:700; font-size:15px; }
.m-tun-str small { font-size:9px; vertical-align:super; }
.m-tun-str.on { background:var(--gold); color:#1a1a1a; border-color:var(--gold); }
.m-tun-toggle { width:100%; margin-top:4px; }
.m-tun-foot { font-size:11px; color:#6b6b6b; text-align:center; line-height:1.5; padding:0 8px; }
.m-tun-toggle.m-primary { background:var(--gold); border-color:var(--gold); }
.m-tun-toggle.m-danger { background:rgba(224,107,94,.12); color:#e8917f; border-color:#e8917f; }

/* playback options sheet */
.m-pb-lbl { font:700 10px 'Outfit',sans-serif; letter-spacing:.12em; color:var(--faint); margin:4px 0 -6px; }
.m-pbrow { display:flex; flex-wrap:wrap; gap:8px; }
.m-pbstyle, .m-pbvar, .m-pbtrk { min-height:42px; padding:8px 14px; border:1px solid var(--line); border-radius:12px; background:var(--panel2); color:var(--ink); font:600 13px 'Outfit',sans-serif; }
.m-pbstyle.on, .m-pbvar.on, .m-pbtrk.on { background:var(--goldSoft); border-color:var(--gold); color:var(--goldDeep); font-weight:700; }
/* options: strum pattern row */
.m-optcol { flex-direction:column; align-items:stretch; gap:6px; }
.m-strumrow { display:flex; flex-wrap:wrap; gap:7px; margin-top:3px; }
.m-strumbtn { min-height:38px; padding:7px 11px; border:1px solid var(--line); border-radius:11px; background:var(--panel2); color:var(--muted); font:600 12px 'Outfit',sans-serif; }
.m-strumbtn.on { background:var(--goldSoft); border-color:var(--gold); color:var(--goldDeep); font-weight:700; }
.m-strumprev { color:var(--goldDeep); }
/* metronome — dark, tuner-style */
.m-met { display:flex; flex-direction:column; gap:16px; align-items:stretch; background:#0c0e12; border:1px solid #23262e; border-radius:14px; padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px)); color:#e8e4da; }
.m-met-dots { display:flex; justify-content:center; gap:12px; }
.m-met-dot { width:16px; height:16px; border-radius:50%; background:#2a2e38; transition:background .05s, transform .05s; }
.m-met-dot.one { border:1px solid #d4a853; }
.m-met-dot.hit { background:#d4a853; transform:scale(1.25); }
.m-met-bpmrow { display:flex; align-items:center; justify-content:center; gap:18px; }
.m-met-step { width:52px; height:52px; border-radius:50%; border:1px solid #3a3e48; background:#171a20; color:#e8e4da; font:700 24px 'Outfit',sans-serif; }
.m-met-bpmwrap { display:flex; flex-direction:column; align-items:center; min-width:120px; }
.m-met-bpmval { font:800 64px/1 'Outfit',sans-serif; color:#f0ead8; }
.m-met-bpmval.tick { animation:metTick .1s ease-out; }
@keyframes metTick { from { color:#d4a853; } to { color:#f0ead8; } }
.m-met-bpmlbl { font:700 12px 'JetBrains Mono',ui-monospace,monospace; color:#8b8fa0; letter-spacing:.1em; }
.m-met-tap { min-height:76px; border:1px dashed #4a4130; border-radius:14px; background:#14161c; color:#d4a853; font:800 20px 'Outfit',sans-serif; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; touch-action:manipulation; }
.m-met-tap small { font:500 11px 'Outfit',sans-serif; color:#8b8fa0; }
.m-met-tap:active { background:#1d2027; }
.m-met-sndrow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.m-met-sndlbl { font:700 10px 'Outfit',sans-serif; letter-spacing:.12em; color:#8b8fa0; }
.m-met-snd { min-height:40px; padding:8px 14px; border:1px solid #3a3e48; border-radius:11px; background:#171a20; color:#c9c4b6; font:600 13px 'Outfit',sans-serif; }
.m-met-snd.on { background:#2b2416; border-color:#d4a853; color:#e8c86a; font-weight:700; }
.m-met-go { min-height:54px; border:none; border-radius:14px; background:#c8a04a; color:#fff; font:800 17px 'Outfit',sans-serif; }
.m-met-go.on { background:#a33d2f; }
.m-met-ci { background:#14161c; border-color:#3a3e48; }
.m-met-ci .m-optname { color:#e8e4da; }
.m-met-ci .m-optdesc { color:#8b8fa0; }

/* smooth playhead line (rAF-driven) spanning ruler + all lanes */
.m-zoomw { position:relative; }
.m-playline { position:absolute; top:0; bottom:0; left:var(--gut); width:2px; background:var(--red); box-shadow:0 0 8px rgba(192,57,43,.5); z-index:7; pointer-events:none; }

/* quick-bar icons: optically centre (emoji baselines sit high in the box) */
.m-qtab { justify-content:center; padding-top:3px; }
.m-qtab-ic { line-height:1; margin-top:1px; }
/* metronome/tap shortcut shown while editing BPM */
.m-bpmmet { min-height:32px; padding:5px 9px; margin-left:4px; border:1px solid var(--line); border-radius:10px; background:var(--panel2); color:var(--muted); font:700 11px 'Outfit',sans-serif; }

/* strum-pattern lane (↓/↑ per 8th slot, above the chords) */
.m-strumlane { flex:none; display:flex; align-items:stretch; height:30px; background:var(--panel); border-bottom:1px solid var(--line2); }
.m-strumlbl { width:var(--gut); flex:none; display:flex; align-items:center; justify-content:center; font:700 8px 'Outfit',sans-serif; letter-spacing:.1em; color:var(--faint); border-right:1px solid var(--line); background:var(--rail); position:sticky; left:0; z-index:4; }
.m-stcells { flex:1; display:flex; }
.m-stc { flex:1; border-right:1px solid var(--line2); background:transparent; color:var(--goldDeep); font:800 14px/1 'Outfit',sans-serif; padding:0; }
.m-stc.barstart { border-left:1px solid var(--barline); }
.m-stc.on { background:var(--goldSoft); }
.m-stc:active { background:var(--selBg); }

/* chord shape library */
.m-shlib-res { display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.m-shlib-row { display:flex; flex-direction:column; gap:5px; padding:9px 11px; border:1px solid var(--line); border-radius:12px; background:var(--panel2); }
.m-shlib-name { font:700 15px 'Outfit',sans-serif; color:var(--goldDeep); }
.m-shlib-vars { display:flex; gap:8px; flex-wrap:wrap; }
.m-shlib-var { display:flex; flex-direction:column; align-items:center; gap:2px; padding:7px 9px; border:1px solid var(--line); border-radius:10px; background:var(--bg); min-width:52px; }
.m-shlib-var:active { border-color:var(--gold); background:var(--goldSoft); }
.m-shlib-var .m-sd { transform:scale(1.35); margin:6px 4px; }
.m-shlib-fr { font:600 9px 'Outfit',sans-serif; color:var(--faint); }
.m-ed-shape { min-height:34px; padding:6px 10px; border:1px solid var(--gold); border-radius:11px; background:var(--goldSoft); color:var(--goldDeep); font:700 12px 'Outfit',sans-serif; margin-right:6px; }
.m-msexp { color:var(--goldDeep); }
.m-arp-dot.dim { opacity:.22; }

/* piano glissando */
.m-piano { touch-action:none; }
.m-pkey.hit, .m-pkeyb.hit { background:var(--gold) !important; transition:background .05s; }

/* section-loop chip */
.m-looplinebtn { min-width:38px; height:34px; border-radius:12px; border:1px solid var(--line); background:var(--panel2); color:var(--muted); font:700 11px 'Outfit',sans-serif; }
.m-looplinebtn.on { background:var(--goldSoft); border-color:var(--gold); color:var(--goldDeep); }

/* tuner: explicit action line + needle + zone hints */
.m-tun-action { text-align:center; font:800 21px 'Outfit',sans-serif; color:#8b8fa0; min-height:30px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
.m-tun-action small { font:500 11px 'Outfit',sans-serif; color:#8b8fa0; }
.m-tun-action.intune { animation:tunPulse .6s ease-out; }
@keyframes tunPulse { from { transform:scale(1.12); } to { transform:scale(1); } }
.m-tun-needle { position:absolute; top:-6px; bottom:-6px; width:3px; left:50%; transform:translateX(-50%); background:#3a3f4c; border-radius:2px; box-shadow:0 0 6px rgba(0,0,0,.4); transition:left .09s linear; z-index:3; }
.m-tun-zoneL, .m-tun-zoneR { font:700 10px 'Outfit',sans-serif; letter-spacing:.06em; color:#5a5e6c; transition:color .15s; }
.m-tun-zoneL.on { color:#e8c86a; }
.m-tun-zoneR.on { color:#e8c86a; }

/* shape editor: tappable rename suggestions */
.m-sh-mism { border:1px solid #d98a3a; border-radius:9px; background:transparent; color:#d98a3a; font:700 12px 'Outfit',sans-serif; padding:5px 9px; }
button.m-sh-alt { border:1px solid var(--line); cursor:pointer; }
button.m-sh-alt:active { border-color:var(--gold); background:var(--goldSoft); }
.m-sh-renamehint { font:500 10px 'Outfit',sans-serif; color:var(--faint); align-self:center; }