@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Sarabun:wght@300;400;500;600;700&display=swap');

:root {
  --bg: #0d0f14;
  --surface: #13161d;
  --border: #1e2330;
  --chord: #f0c040;
  --chord-dim: #4a3e10;
  --lyric: #e8eaf0;
  --lyric-dim: #252830;
  --section-color: #5b8dee;
  --note-color: #7ed9a0;
  --accent: #f0c040;
  --muted: #8a90a2;   /* secondary text — 5.9:1 on --bg (was #4a4f60, 2.35:1) */
  --faint: #4a4f60;   /* non-text only: dividers, disabled outlines */
  --text: #e8eaf0;
  --fs: 1;
  --fsx: var(--fs);   /* --fs (A+/A−) × screen factor, see LAYOUT v2 */
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: var(--bg); }
html { touch-action: manipulation; }   /* pinch-zoom allowed, double-tap zoom off (no accidental zoom on stage) */
body { font-family: 'Sarabun', sans-serif; display: flex; flex-direction: column; color: var(--lyric); }
.mono { font-family: 'IBM Plex Mono', 'Sarabun', monospace; }

/* scrollbar */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ── SCREENS ── */
.screen { display: none; flex: 1; flex-direction: column; overflow: hidden; min-height: 0; }
.screen.active { display: flex; }

/* ── CONN DOT ── */
.conn-dot { width: 7px; height: 7px; border-radius: 50%; background: #444; transition: background .3s; flex-shrink: 0; }
.conn-dot.ok  { background: #4caf50; }
.conn-dot.err { background: #ff5555; }

/* ── CONNECTION BANNER (live screen) ── */
.live-net-banner { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); z-index: 20; width: max-content; max-width: calc(100% - 32px); padding: 9px 14px; border-radius: 10px; background: #4a1717; border: 1px solid #ff5555; color: #fff; font-size: 13px; font-weight: 600; text-align: center; line-height: 1.45; box-shadow: 0 4px 16px rgba(0,0,0,.45); cursor: pointer; }
.live-net-banner.is-viewer { background: #3d3210; border-color: var(--accent); cursor: default; }

/* ── LIVE-IN-PROGRESS BANNER (home) ── */
.home-live-banner { display: flex; align-items: center; gap: 10px; margin: 8px 16px 0; padding: 10px 14px; min-height: 44px; background: rgba(255,68,68,.08); border: 1px solid rgba(255,68,68,.4); border-radius: 12px; color: var(--text); font-family: inherit; font-size: 13px; text-align: left; cursor: pointer; flex-shrink: 0; }
.home-live-banner .hlb-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.5; }
.home-live-banner .hlb-label { color: #f55; font-weight: 700; }
.home-live-banner .hlb-action { color: var(--accent); font-weight: 700; flex-shrink: 0; }

/* ── LIVE BADGE ── */
.live-badge { display: flex; align-items: center; gap: 4px; border: 1px solid #f33; color: #f55; font-size: 10px; font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-weight: 700; padding: 3px 7px; border-radius: 4px; }
.live-dot { width: 5px; height: 5px; background: #f44; border-radius: 50%; animation: blink 1s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── SONG NAV STRIP ── */
.song-nav-strip { display: flex; align-items: center; height: 52px; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; user-select: none; }
.song-nav-adj { display: flex; align-items: center; gap: 5px; padding: 0 12px; width: 30%; flex-shrink: 0; overflow: hidden; cursor: pointer; height: 100%; }
.song-nav-adj:active { background: rgba(255,255,255,.05); }
#songNavNext { justify-content: flex-end; }
/* phones: the current song title gets the room — neighbours shrink to their content (max 28%) */
@media (max-width: 480px) { .song-nav-adj { width: auto; max-width: 28%; padding: 0 10px; } .song-nav-adj-title { font-size: 13px; } }
.song-nav-adj-title { font-size: 14px; color: rgba(255,255,255,.55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-nav-adj svg { flex-shrink: 0; opacity: .45; }
.song-nav-cur { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; overflow: hidden; height: 100%; border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.song-nav-cur.clickable { cursor: pointer; }
.song-nav-cur.clickable:active { background: rgba(255,255,255,.04); }
.song-nav-pos { font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 13px; color: var(--accent); flex-shrink: 0; }
.song-nav-title { font-size: 16px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── SONG PICKER SHEET ── */
.song-picker-panel { position: absolute; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 1px solid var(--border); border-radius: 12px 12px 0 0; max-height: 60vh; max-height: 60dvh; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); }
.song-picker-list { overflow-y: auto; flex: 1; }
.song-picker-item { display: flex; align-items: center; gap: 12px; padding: 13px 20px; cursor: pointer; border-bottom: 1px solid var(--border); }
.song-picker-item:last-child { border-bottom: none; }
.song-picker-item:active { background: rgba(255,255,255,.04); }
.song-picker-item.active { background: rgba(240,192,64,.06); }
.song-picker-num { font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 12px; color: var(--muted); width: 24px; flex-shrink: 0; }
.song-picker-item.active .song-picker-num { color: var(--accent); }
.song-picker-name { font-size: 14px; color: var(--text); flex: 1; }
.song-picker-item.active .song-picker-name { color: var(--accent); font-weight: 500; }
.song-picker-key { font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 11px; color: var(--muted); }
.song-picker-close { padding: 14px; text-align: center; font-size: 14px; color: var(--muted); cursor: pointer; border-top: 1px solid var(--border); flex-shrink: 0; }

/* ── SONG SCROLL ── */
.song-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.song-scroll::-webkit-scrollbar { display: none; }

/* ── BLOCKS ── */
.block { padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.04); transition: opacity .3s ease, background .3s ease; }

.block.is-past  { opacity: .3; }
.block.is-prev1 { opacity: .55; }
.block.is-cur   { background: rgba(22,28,46,.9); border-left: 3px solid var(--accent); padding-left: 15px; }
/* upcoming lines stay readable — musicians read 3–4 lines ahead */
.block.is-next1 { opacity: .92; }
.block.is-next2 { opacity: .82; }
.block.is-next3 { opacity: .7; }
.block.is-far   { opacity: .5; }

.block.is-leader-click { cursor: pointer; }
.block.is-leader-click:hover { background: rgba(255,255,255,.03); }

/* block elements */
.b-sec   { font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: calc(13px * var(--fsx)); font-weight: 700; color: var(--section-color); letter-spacing: .15em; text-transform: uppercase; margin-bottom: 5px; }
.b-note  { font-size: calc(14px * var(--fsx)); font-weight: 600; color: #ff6b6b; font-style: italic; padding: 3px 9px; background: rgba(255,107,107,.07); border-left: 2px solid rgba(255,107,107,.4); border-radius: 0 3px 3px 0; margin: 2px 0; display: block; }
.b-cmt   { font-size: calc(13px * var(--fsx)); color: #7eb8d9; font-style: italic; padding: 3px 9px; background: rgba(91,141,238,.07); border-left: 2px solid rgba(91,141,238,.3); border-radius: 0 3px 3px 0; margin: 2px 0; display: block; }
.b-chord { font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: calc(13px * var(--fsx)); font-weight: 600; color: var(--chord); white-space: pre-wrap; word-break: break-word; line-height: 1.5; margin-bottom: 2px; }
.b-lyric { font-size: calc(18px * var(--fsx)); color: var(--lyric); white-space: pre-wrap; word-break: break-word; line-height: 1.65; }

/* current block larger */
.block.is-cur .b-chord { font-size: calc(15px * var(--fsx)); color: var(--accent); }
.block.is-cur .b-lyric  { font-size: calc(24px * var(--fsx)); font-weight: 700; color: white; }
.block.is-cur .b-sec    { color: var(--accent); }

/* ── LEADER BAR ── */
.leader-bar { display: flex; flex-direction: column; gap: 0; background: var(--surface); border-top: 1px solid var(--border); flex-shrink: 0; }
.ldr-row { display: flex; align-items: center; }

/* Next is the biggest target and sits apart from the other buttons (mis-tap safety).
   Song changes live on the song strip / picker, not next to Next. */
.ldr-next-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ldr-gap { width: 8px; flex-shrink: 0; }
.leader-bar { padding-bottom: env(safe-area-inset-bottom); }



/* ── SECTION DRAWER ── */
.sec-drawer { width: 190px; background: var(--surface); border-left: 1px solid var(--border); overflow-y: auto; flex-shrink: 0; padding: 12px; }
@media (max-width: 1023px) { .sec-drawer { display: none !important; } }

/* section chips — leader on phones (the side drawer is hidden there) */
.sec-chips { display: flex; gap: 6px; overflow-x: auto; padding: 6px 8px 0; scrollbar-width: none; }
.sec-chips::-webkit-scrollbar { display: none; }
.sec-chip { flex-shrink: 0; height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: 99px; background: var(--bg); color: var(--section-color); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.sec-chip.is-cur { border-color: var(--accent); color: var(--accent); background: rgba(240,192,64,.08); }
@media (min-width: 1024px) { .sec-chips { display: none !important; } }

/* current section label — always visible while the section's first line scrolls away */
.sec-now { position: absolute; top: 8px; left: 10px; z-index: 5; padding: 3px 10px; border-radius: 99px; background: rgba(13,15,20,.88); border: 1px solid var(--border); color: var(--section-color); font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }

/* touch: first tap arms a line, second tap jumps (no accidental jumps while scrolling) */
.block.is-armed { outline: 2px dashed var(--accent); outline-offset: -4px; opacity: 1; }
.block.is-armed::after { content: 'แตะอีกครั้งเพื่อไปบรรทัดนี้'; display: block; margin-top: 6px; color: var(--accent); font-size: 12px; font-weight: 600; }

/* viewer (musician) — strip arrows aren't buttons while following */
#songNavStrip.is-viewer .song-nav-adj { cursor: default; pointer-events: none; }
.viewer-blank-badge { position: absolute; top: 8px; right: 10px; z-index: 5; padding: 4px 10px; border-radius: 99px; background: rgba(240,192,64,.14); border: 1px solid var(--accent); color: var(--accent); font-size: 12px; font-weight: 700; pointer-events: none; }

/* current key — visible in every mode; flashes when the leader transposes */
.song-nav-key { flex-shrink: 0; font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 12px; font-weight: 700; color: var(--accent); background: rgba(240,192,64,.1); border-radius: 4px; padding: 2px 6px; }
.song-nav-key:empty { display: none; }
.song-nav-key.flash { animation: keyflash 1.2s ease 2; }
@keyframes keyflash { 50% { background: var(--accent); color: #000; } }
.sp-btn { display: flex; align-items: center; gap: 6px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg); color: var(--section-color); font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 11px; cursor: pointer; margin-bottom: 6px; transition: background .1s; }
.sp-btn:hover { background: var(--border); color: white; }

/* ── VIEWER FLOAT ── */
.vf-btn { width: 40px; height: 40px; background: rgba(13,15,20,.85); border: 1px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 12px; font-weight: 700; transition: all .15s; flex-shrink: 0; }
.vf-btn:hover { color: white; border-color: var(--muted); }

/* ── HOME ── */
/* favourite star (setlist) */
.sl-star { flex-shrink: 0; background: none; border: none; cursor: pointer; padding: 2px; color: var(--muted); display: flex; align-items: center; justify-content: center; transition: color .15s, transform .1s; -webkit-tap-highlight-color: transparent; }
.sl-star:hover { color: var(--accent); }
.sl-star.starred { color: var(--accent); }
.sl-star:active { transform: scale(.82); }

.setlist-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; margin-bottom: 9px; transition: background .15s, border-color .15s; }
.setlist-card:hover { background: rgba(255,255,255,.025); border-color: rgba(240,192,64,.4); }
.setlist-card-latest { border-left: 3px solid var(--accent); padding-left: 15px; }

/* card internal layout */
.sc-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.sc-title { flex: 1; font-size: 17px; font-weight: 700; color: white; line-height: 1.35; letter-spacing: -.01em; }
.sc-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; flex-wrap: wrap; }
.sc-meta-item { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.sc-meta-item svg { flex-shrink: 0; opacity: .55; }
.sc-date { font-family: 'IBM Plex Mono', 'Sarabun', monospace; }
.sc-dot { font-size: 10px; color: var(--border); line-height: 1; }
.sc-actions { display: flex; align-items: center; gap: 7px; margin-top: 9px; border-top: 1px solid var(--border); padding-top: 9px; }
.sc-btn-group { display: flex; align-items: center; gap: 7px; flex: 1; }
.sc-live-btn { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; background: var(--accent); color: #000; border: none; border-radius: 8px; font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 13px; font-weight: 700; cursor: pointer; flex-shrink: 0; -webkit-tap-highlight-color: transparent; transition: opacity .15s, transform .1s; }
.sc-live-btn:hover { opacity: .9; }
.sc-live-btn:active { opacity: .75; transform: scale(.97); }
.sc-edit-btn { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; background: transparent; border: 1px solid var(--border); border-radius: 8px; color: rgba(255,255,255,.8); font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .15s, color .15s; }
.sc-edit-btn:hover { border-color: rgba(255,255,255,.4); color: white; }
.sc-more-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: transparent; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); font-size: 17px; cursor: pointer; -webkit-tap-highlight-color: transparent; letter-spacing: 1px; transition: border-color .15s, color .15s; }
.sc-more-btn:hover { border-color: rgba(255,255,255,.4); color: white; }
.sc-expand-btn { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; background: transparent; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 12px; cursor: pointer; flex-shrink: 0; -webkit-tap-highlight-color: transparent; transition: color .15s, border-color .15s; }
.sc-expand-btn:hover { color: white; border-color: rgba(255,255,255,.3); }
.sc-count { font-size: 12px; }

/* ── ADMIN DRAWER ── */
.admin-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 40; display: none; }
.admin-overlay.show { display: block; }
.admin-drawer { position: fixed; top: 0; right: -100%; bottom: 0; width: min(420px, 100vw); background: var(--surface); border-left: 1px solid var(--border); z-index: 50; transition: right .25s ease; display: flex; flex-direction: column; }
.admin-drawer.show { right: 0; }

/* ── SETLIST EDITOR POPUP ── */
.editor-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 60; display: none; align-items: center; justify-content: center; padding: 16px; }
.editor-overlay.show { display: flex; }
.editor-modal { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; width: min(480px, 100%); max-height: 85vh; max-height: 85dvh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,.6); }
.drag-handle { cursor: grab; color: var(--muted); padding: 4px; }
.drag-handle:active { cursor: grabbing; }
.sortable-ghost { opacity: .3; background: rgba(240,192,64,.1); }

/* ── INSERT ITEM ── */
.insert-item { display: flex; align-items: center; padding: 13px 16px; border-bottom: 1px solid var(--border); cursor: pointer; gap: 12px; transition: background .1s; min-height: 56px; }
.insert-item:hover { background: rgba(255,255,255,.04); }

/* ── INLINE COLOR HIGHLIGHT ── */
.c-red    { color: #ff6b6b; }
.c-yellow { color: var(--accent); }
.c-green  { color: var(--note-color); }

/* ── GUIDE BOX ── */
.guide-box { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px; font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 11px; line-height: 2; }

/* ── HOME TABS ── */
.home-tab-bar { display: flex; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.home-tab { flex: 1; padding: 13px 8px; font-size: 13px; font-family: 'IBM Plex Mono', 'Sarabun', monospace; color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; background: none; border-left: none; border-right: none; border-top: none; transition: all .15s; letter-spacing: .03em; }
.home-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.home-panel { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; }

/* ── SETLIST PREVIEW (legacy — kept for compact row) ── */
.setlist-preview { font-size: 12px; color: var(--muted); font-family: 'IBM Plex Mono', 'Sarabun', monospace; }

/* ── SETLIST DROPDOWN MENU ── */

/* ── SETLIST EXPANDED SONG LIST ── */
.sl-song-list { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 4px; }
.sl-song-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.sl-song-row:last-child { border-bottom: none; }
.sl-song-num { width: 18px; text-align: right; font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 11px; color: var(--muted); flex-shrink: 0; }
.sl-song-thumb { width: 56px; height: 32px; border-radius: 3px; overflow: hidden; flex-shrink: 0; display: block; background: var(--border); text-decoration: none; cursor: pointer; padding: 0; border: none; }
.sl-song-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .15s; }
.sl-song-thumb:hover img { opacity: .8; }
.sl-song-thumb-empty { width: 56px; height: 32px; flex-shrink: 0; border-radius: 3px; background: var(--border); opacity: .3; }
.sl-song-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; }
.sl-song-title { flex: 1; font-size: 13px; color: white; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-song-key { font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 11px; color: var(--accent); flex-shrink: 0; }
.sl-song-bpm { font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 10px; color: var(--muted); flex-shrink: 0; }

/* ── SETLIST NOTES ── */
.sl-notes-text { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 3px; line-height: 1.5; }

/* ── SETLIST BADGES ── */
.sl-badge { font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 10px; border-radius: 99px; padding: 1px 8px; flex-shrink: 0; }
.sl-badge-live { color: #4caf50; border: 1px solid #4caf50; background: rgba(76,175,80,.08); }
.sl-badge-recent { color: var(--muted); border: 1px solid var(--border); }
.sl-badge-archived { color: var(--muted); border: 1px solid var(--border); }

/* ── LEADER LABEL ── */
.sl-card-leader { font-family: 'Sarabun', sans-serif; font-size: 11px; color: var(--muted); flex-shrink: 0; }
.sl-row-leader { font-family: 'Sarabun', sans-serif; font-size: 11px; color: var(--muted); }

/* ── SETLIST CARD TAGS ── */
.sc-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.sc-tag { font-size: 11px; font-family: 'IBM Plex Mono', 'Sarabun', monospace; color: var(--muted); border: 1px solid rgba(255,255,255,.1); border-radius: 4px; padding: 2px 8px; transition: all .15s; cursor: pointer; }
.sc-tag.active { color: var(--accent); border-color: rgba(240,192,64,.4); background: rgba(240,192,64,.07); }

/* ── SEARCH AREA ── */
.lib-search-area { background: var(--surface); border-bottom: 1px solid var(--border); padding: 10px 14px 8px; }
.search-wrap { position: relative; display: flex; align-items: center; }
.search-icon { position: absolute; left: 13px; color: var(--muted); pointer-events: none; flex-shrink: 0; }
.search-input { width: 100%; height: 48px; background: var(--bg); border: 1.5px solid var(--border); border-radius: 10px; color: white; font-family: 'Sarabun', sans-serif; font-size: 15px; padding: 0 42px; outline: none; transition: border-color .15s; }
.search-input:focus { border-color: var(--accent); }
.search-input::placeholder { color: var(--muted); }
.search-clear { position: absolute; right: 8px; width: 32px; height: 32px; background: rgba(255,255,255,.06); border: none; border-radius: 50%; color: var(--muted); cursor: pointer; font-size: 16px; display: none; align-items: center; justify-content: center; transition: all .1s; }
.search-clear.show { display: flex; }
.search-clear:hover { color: white; background: rgba(255,255,255,.12); }
.search-meta { display: flex; align-items: center; padding: 6px 0 4px; min-height: 34px; gap: 8px; overflow: hidden; }
.meta-divider { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; }   /* separates view-controls from the add action */
.search-count { font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 11px; color: var(--muted); flex-shrink: 0; }
.view-toggle-btn { height: 28px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--border); background: none; color: var(--muted); cursor: pointer; font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 11px; display: flex; align-items: center; gap: 5px; transition: all .15s; flex-shrink: 0; }
.view-toggle-btn.active { color: var(--accent); border-color: var(--accent); background: rgba(240,192,64,.06); }
.sort-select { height: 28px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--muted); font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 11px; cursor: pointer; outline: none; }
.sort-select:focus { border-color: var(--accent); color: white; }

/* ── SEARCH HIGHLIGHT ── */
mark.search-hl { background: rgba(240,192,64,.22); color: var(--accent); border-radius: 2px; padding: 0 1px; }

/* ── COMPACT SETLIST ROWS ── */
.sl-row { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--border); transition: background .1s; }
.sl-row:hover { background: rgba(255,255,255,.03); }
.sl-row-info { flex: 1; min-width: 0; }
.sl-row-title { font-size: 14px; font-weight: 600; color: white; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-row-sub { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.sl-row-date { font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 11px; color: var(--muted); }
.sl-row-count { font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 11px; color: var(--muted); flex-shrink: 0; }
.sl-row-live { height: 34px; padding: 0 14px; background: var(--accent); color: #000; border: none; border-radius: 6px; font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 12px; font-weight: 700; cursor: pointer; flex-shrink: 0; }
.sl-row-menu { height: 34px; width: 34px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--muted); cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ── SCROLL TO TOP ── */
.scroll-top-wrap { padding: 14px; display: flex; justify-content: center; }
.scroll-top-btn { background: none; border: 1px solid var(--border); border-radius: 20px; color: var(--muted); padding: 7px 20px; font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 11px; cursor: pointer; transition: all .15s; display: flex; align-items: center; gap: 6px; }
.scroll-top-btn:hover { color: white; border-color: var(--muted); }

/* ── LIBRARY TAGS (inline in search-meta) ── */
.lib-tags-inline { flex: 1; min-width: 0; display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; padding: 1px 0; }
.lib-tags-inline::-webkit-scrollbar { display: none; }
.lib-tag { padding: 3px 10px; border-radius: 99px; border: 1px solid var(--border); font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 11px; color: var(--muted); cursor: pointer; white-space: nowrap; flex-shrink: 0; background: none; transition: all .15s; min-height: 26px; display: inline-flex; align-items: center; -webkit-tap-highlight-color: transparent; }
.lib-tag.active { color: var(--accent); border-color: var(--accent); background: rgba(240,192,64,.08); }
.lib-tag-n { margin-left: 5px; font-size: 9.5px; opacity: .55; font-variant-numeric: tabular-nums; }
.lib-tag.active .lib-tag-n { opacity: .8; }
.lib-row { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--border); transition: background .15s; }
.lib-row:hover { background: rgba(255,255,255,.04); }
.lib-row-num { width: 20px; text-align: right; color: var(--muted); flex-shrink: 0; font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 12px; opacity: .6; }
.lib-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lib-title { font-size: 15px; font-weight: 600; color: white; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-sub { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.lib-key-badge { display: inline-flex; align-items: center; gap: 4px; font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 12px; color: var(--accent); font-weight: 600; flex-shrink: 0; }
.lib-key-badge svg { opacity: .65; }
.lib-author-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); flex-shrink: 0; }
.lib-author-badge svg { opacity: .5; }
.lib-speed-badge, .lib-ts-badge { display: inline-flex; align-items: center; gap: 4px; font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 12px; font-weight: 600; color: var(--muted); flex-shrink: 0; }
.lib-speed-badge svg, .lib-ts-badge svg { opacity: .6; }
.lib-tags-icon { display: inline-flex; align-items: center; color: var(--muted); flex-shrink: 0; }
.lib-tags-icon svg { opacity: .55; }
.lib-sep { color: var(--border); font-size: 12px; user-select: none; flex-shrink: 0; }
.lib-tags-group { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; min-width: 0; }
.lib-meta-line { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }

/* ── Setlist editor: per-song key picker ── */
.sl-key-chip {
  flex-shrink: 0; min-width: 46px; height: 28px; padding: 0 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 7px;
  color: var(--muted); font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 12px; font-weight: 700;
  cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.sl-key-chip:hover { color: white; border-color: var(--muted); }
.sl-key-chip-set { color: var(--accent); border-color: rgba(240,192,64,.45); background: rgba(240,192,64,.08); }
/* grid styled to match the Practice key picker */
.sl-key-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  padding: 10px; margin-top: 5px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
}
.sl-key-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 58px; border-radius: 10px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: white;
  cursor: pointer; transition: background .1s, border-color .1s;
  -webkit-tap-highlight-color: transparent;
}
.sl-key-cell:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); }
.sl-key-cell.active { background: var(--accent); border-color: var(--accent); }
.sl-key-cell-name { font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 18px; font-weight: 700; line-height: 1; }
.sl-key-cell-offset { font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 10px; color: rgba(255,255,255,.45); margin-top: 4px; }
.sl-key-cell.active .sl-key-cell-name { color: #0d0f14; }
.sl-key-cell.active .sl-key-cell-offset { color: rgba(0,0,0,.55); }
.lib-tags-row { display: flex; flex-wrap: wrap; gap: 4px; }
.lib-song-tag { font-size: 11px; font-family: 'IBM Plex Mono', 'Sarabun', monospace; color: var(--muted); border: 1px solid rgba(255,255,255,.1); border-radius: 4px; padding: 1px 7px; cursor: pointer; transition: all .15s; -webkit-tap-highlight-color: transparent; }
.lib-song-tag.active { color: var(--accent); border-color: rgba(240,192,64,.4); background: rgba(240,192,64,.07); }
.lib-actions { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.lib-add-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: all .15s; -webkit-tap-highlight-color: transparent; }
.lib-add-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(240,192,64,.08); }
.lib-live-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; background: var(--accent); color: #000; border: none; border-radius: 8px; font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 13px; font-weight: 700; cursor: pointer; flex-shrink: 0; -webkit-tap-highlight-color: transparent; transition: opacity .15s, transform .1s; }
.lib-live-btn:hover { opacity: .9; }
.lib-live-btn:active { opacity: .75; transform: scale(.97); }
.lib-edit-btn { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; background: transparent; border: 1px solid var(--border); border-radius: 8px; color: rgba(255,255,255,.8); font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 12px; cursor: pointer; flex-shrink: 0; -webkit-tap-highlight-color: transparent; transition: border-color .15s, color .15s; }
.lib-edit-btn:hover { border-color: rgba(255,255,255,.35); color: white; }
.lib-practice-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: all .15s; -webkit-tap-highlight-color: transparent; }
.lib-practice-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(240,192,64,.08); }

/* ── SONG DROPDOWN (PC 3-dot menu) ── */
.song-dropdown {
  position: fixed;
  z-index: 300;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
  min-width: 188px;
  box-shadow: 0 8px 28px rgba(0,0,0,.55);
  animation: sdropIn .12s ease;
}
@keyframes sdropIn {
  from { opacity: 0; transform: scale(.95) translateY(-4px); }
  to   { opacity: 1; transform: scale(1)   translateY(0);    }
}
.sdrop-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 12px;
  background: none; border: none;
  color: var(--text); font-size: 14px;
  font-family: 'Sarabun', sans-serif;
  cursor: pointer; border-radius: 7px; text-align: left;
  transition: background .1s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.sdrop-item:hover { background: rgba(255,255,255,.07); }
.sdrop-item svg { color: var(--muted); flex-shrink: 0; }
.sdrop-danger { color: #e05252; }
.sdrop-danger svg { color: #e05252; }
.sdrop-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* ── ADD TO SETLIST MODAL (YouTube-style) ── */
.atl-panel { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; width: min(320px, 90vw); overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,.6); }
.atl-header { padding: 16px 18px 13px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; font-family: 'Sarabun', sans-serif; }
.atl-action { font-size: 12px; color: var(--muted); font-weight: 500; }
.atl-title-row { display: flex; align-items: center; gap: 7px; }
.atl-title-icon { color: var(--accent); flex-shrink: 0; }
.atl-song-title { min-width: 0; color: var(--accent); font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atl-goto { font-size: 12px; color: var(--muted); flex-shrink: 0; }
.atl-list { max-height: 300px; overflow-y: auto; padding-bottom: 4px; }
.atl-item { display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer; transition: background .1s; }
.atl-item:hover { background: rgba(255,255,255,.05); }
.atl-status { width: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.atl-item-name { flex: 1; font-size: 14px; color: white; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atl-item-count { font-size: 12px; color: var(--muted); flex-shrink: 0; }
.atl-new { width: 100%; padding: 13px 16px; border: none; border-top: 1px solid var(--border); background: none; color: var(--accent); font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 13px; cursor: pointer; text-align: left; display: flex; align-items: center; gap: 8px; transition: background .1s; }
.atl-new:hover { background: rgba(240,192,64,.06); }
.atl-handle { display: none; }

/* ── Add-song modal (from Library header) ── */
/* I-1 · 05 add song; queue markup remains owned by Claude */
#addSongModal { position:fixed; inset:0; z-index:80; align-items:center; justify-content:center; padding:20px 16px; }
.add-song-backdrop { position:absolute; inset:0; background:rgba(13,15,20,.78); }
.add-song-panel { min-width:0; position:relative; width:min(420px,100%); max-height:100%; overflow:auto; padding:20px; display:grid; gap:20px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); font:15px/1.5 var(--font-ui); }
.add-song-head { display:flex; align-items:center; gap:12px; }
.add-song-head h2 { flex:1; margin:0; font-size:21px; font-weight:700; line-height:1.5; }
.add-song-close { flex:none; width:44px; height:44px; border:1px solid var(--border); border-radius:var(--r-md); display:grid; place-items:center; background:none; color:var(--muted); cursor:pointer; }
.add-song-intro { margin:0; color:var(--muted); }
.add-song-opt { display:flex; align-items:flex-start; gap:12px; width:100%; padding:20px; border:1px solid var(--accent); border-radius:var(--r-lg); background:var(--surface); color:var(--text); text-align:left; font-family:inherit; cursor:pointer; }
.add-song-opt-ic { display:grid; place-items:center; width:36px; height:36px; flex:none; color:var(--accent); }
.add-song-opt-body { display:grid; gap:12px; flex:1; min-width:0; }
.add-song-opt-title { font-size:21px; font-weight:700; line-height:1.5; }
.add-song-opt-sub { font-size:15px; color:var(--muted); line-height:1.5; }
.add-song-write { display:flex; justify-content:center; align-items:center; min-height:48px; border-radius:var(--r-md); background:var(--accent); color:var(--bg); font-size:16px; font-weight:700; }
.add-song-drop { padding:20px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); text-align:left; cursor:pointer; }
.add-song-drop > svg { display:none; }
.add-song-drop h3 { margin:0 0 12px; font-size:21px; line-height:1.5; font-weight:700; }
.add-song-file-label { display:flex; align-items:center; min-height:44px; padding:8px 12px; border:1px solid var(--border); border-radius:var(--r-md); font-size:16px; }
.add-song-help { margin:12px 0 0; color:var(--muted); font-size:13px; line-height:1.5; }
.add-song-status { color:var(--accent); font:13px/1.5 var(--font-ui); overflow-wrap:anywhere; }
.add-song-status:empty { display:none; }
.add-song-drop:hover, .add-song-drop.drag { border-color:var(--accent); }
.add-song-link { margin-top:12px; cursor:default; }
.add-song-link:hover { border-color:var(--border); }
.add-song-link-row { display:flex; gap:8px; }
.add-song-link-input { flex:1; min-width:0; background:var(--bg); color:var(--text); font-family:var(--font-ui); }
.add-song-link-row .btn-secondary { flex:none; min-height:44px; padding:0 16px; }
#addSongModal input { font-size:16px; }


/* empty Library call-to-action */
.lib-empty-cta { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 56px 24px; text-align: center; color: rgba(255,255,255,.2); }
.lib-empty-title { color: var(--muted); font-size: 15px; font-weight: 600; font-family: 'Sarabun', sans-serif; margin-top: 4px; }
.lib-empty-sub { color: rgba(255,255,255,.3); font-size: 13px; font-family: 'Sarabun', sans-serif; margin-bottom: 6px; }
.lib-empty-btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 20px; border-radius: 10px; border: 1px solid var(--accent); background: rgba(240,192,64,.08); color: var(--accent); font-family: 'Sarabun', sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s; -webkit-tap-highlight-color: transparent; }
.lib-empty-btn:hover { background: rgba(240,192,64,.16); }
#addToListModal { align-items: center; }   /* desktop: centered modal */

/* ── Add-to-setlist as a draggable bottom sheet on mobile ── */
@media (max-width: 768px) {
  /* mobile: floating sheet near the bottom with a gap below it */
  #addToListModal { align-items: flex-end; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .atl-panel {
    width: calc(100% - 32px); max-width: 560px; margin: 0 auto;
    border-radius: 16px;                     /* floats → round all corners */
    display: flex; flex-direction: column;
    height: 72vh; max-height: 92vh;          /* snap 1 = 72%, snap 2 = 92% */
    transform: translateY(calc(100% + 16px + env(safe-area-inset-bottom, 0px)));
    transition: transform .3s cubic-bezier(.32,0,.67,0), height .25s cubic-bezier(.33,1,.68,1);
    box-sizing: border-box; touch-action: none;
  }
  .atl-panel.show { transform: translateY(0); transition-timing-function: cubic-bezier(.33,1,.68,1), cubic-bezier(.33,1,.68,1); }
  .atl-panel.atl-dragging { transition: none; }
  .atl-handle { display: block; width: 38px; height: 4px; background: var(--border); border-radius: 2px; margin: 10px auto 4px; flex-shrink: 0; }
  .atl-header, #atlSearch, .atl-new { flex-shrink: 0; }
  /* list scrolls only at the 2nd ceiling; at peek you swipe up to expand instead */
  .atl-list { max-height: none; flex: 1 1 auto; min-height: 0; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .atl-panel.atl-expanded .atl-list { overflow-y: auto; touch-action: pan-y; }
}

/* ── LIBRARY YOUTUBE THUMBNAIL ── */
/* ── YOUTUBE POPUP PLAYER ── */
.yt-modal-backdrop { display:none; position:fixed; inset:0; z-index:9000; background:rgba(0,0,0,.8); align-items:center; justify-content:center; padding:16px; }
@media (max-width: 540px) {
  .yt-modal-backdrop { padding: 40px 20px; }
  .yt-modal-head { padding: 8px 10px; min-height: 38px; }
  .yt-modal-title { font-size: 12px; }
  .yt-modal-ext-btn { padding: 4px 8px; font-size: 10px; gap: 4px; }
}
.yt-modal-backdrop.show { display:flex; }
.yt-modal { background:var(--surface); border:1px solid var(--border); border-radius:12px; width:100%; max-width:720px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 24px 64px rgba(0,0,0,.7); }
.yt-modal-head { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--border); min-height:46px; }
.yt-modal-title { flex:1; font-size:13px; font-weight:600; color:white; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.yt-modal-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.yt-modal-ext-btn { display:flex; align-items:center; gap:5px; padding:5px 11px; border-radius:6px; background:rgba(255,255,255,.07); color:rgba(255,255,255,.65); font-size:11px; text-decoration:none; border:1px solid var(--border); transition:background .15s,color .15s; }
.yt-modal-ext-btn:hover { background:rgba(255,0,0,.18); color:#ff4444; border-color:rgba(255,0,0,.3); }
.yt-modal-close-btn { display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:6px; background:transparent; border:none; color:rgba(255,255,255,.45); cursor:pointer; transition:background .15s,color .15s; padding:0; }
.yt-modal-close-btn:hover { background:rgba(255,255,255,.1); color:white; }
.yt-modal-player { position:relative; width:100%; aspect-ratio:16/9; background:#000; }
.yt-modal-player iframe { position:absolute; inset:0; width:100%; height:100%; border:none; }
.yt-blocked { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:rgba(0,0,0,.92); }
.yt-blocked p { color:rgba(255,255,255,.55); font-size:13px; margin:0; }
.yt-blocked-btn { display:inline-flex; align-items:center; gap:7px; padding:9px 20px; border-radius:8px; background:#cc0000; color:white; font-size:13px; font-weight:600; text-decoration:none; transition:background .15s; }
.yt-blocked-btn:hover { background:#ff0000; }

.lib-thumb { position: relative; width: 108px; height: 61px; border-radius: 8px; overflow: hidden; flex-shrink: 0; display: block; text-decoration: none; background: var(--border); cursor: pointer; padding: 0; border: none; }
.lib-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.lib-thumb:hover img { transform: scale(1.04); }
.lib-thumb-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .15s; }
.lib-thumb:hover .lib-thumb-overlay { opacity: 1; }
.lib-thumb-play-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: rgba(255,255,255,.15); border-radius: 50%; backdrop-filter: blur(4px); }
.lib-thumb-empty { width: 108px; height: 61px; flex-shrink: 0; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid var(--border); }
.lib-key-ph { display: flex; align-items: center; justify-content: center; border: none; }
.lib-menu-btn { display: flex; width: 44px; height: 44px; flex-shrink: 0; align-items: center; justify-content: center; background: none; border: none; color: var(--muted); cursor: pointer; border-radius: 8px; -webkit-tap-highlight-color: transparent; }
.lib-menu-btn:hover { background: rgba(255,255,255,.06); color: white; }
.lib-menu-btn:active { background: rgba(255,255,255,.06); }
@media (max-width: 768px) {
  /* Tabs */
  .home-tab { padding: 9px 8px; font-size: 12px; }
  /* Search */
  .lib-search-area { padding: 8px 12px 6px; }
  .search-input { height: 40px; font-size: 14px; padding: 0 38px; }
  .search-meta { padding: 4px 0 2px; min-height: 28px; }
  /* Library list */
  #homeLibList .lib-row { padding: 11px 14px; gap: 12px; align-items: center; }
  #homeLibList .lib-row-num { display: none; }
  #homeLibList .lib-thumb, #homeLibList .lib-thumb-empty { width: 100px; height: 56px; }
  #homeLibList .lib-thumb img { object-position: center center; }
  #homeLibList .lib-actions { display: none; }
  #homeLibList .lib-menu-btn { display: flex; align-self: center; }
  #homeLibList .lib-song-tag { flex-shrink: 0; }
  /* meta (key | bpm | timesig) stays on one line; tags drop to a second, clipped line */
  .lib-sub { flex-wrap: wrap; overflow: visible; row-gap: 3px; }
  .lib-sub .lib-meta-line { flex-wrap: nowrap; overflow: hidden; max-width: 100%; }
  .lib-sub .lib-tags-group { flex-basis: 100%; flex-wrap: nowrap; overflow: hidden; }
  .lib-tags-sep { display: none; }
}

/* ── SONG BOTTOM SHEET ── */
.sheet-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 200; }
.sheet-overlay.show { opacity: 1; pointer-events: auto; }
.bottom-sheet { position: fixed; bottom: 0; left: 16px; right: 16px; background: var(--surface); border: 1px solid var(--border); border-bottom: none; border-radius: 16px 16px 0 0; transform: translateY(100%); transition: transform .3s cubic-bezier(.32,0,.67,0); z-index: 201; padding-bottom: env(safe-area-inset-bottom, 0px); max-width: 560px; margin: 0 auto; }
.bottom-sheet.show { transform: translateY(0); transition-timing-function: cubic-bezier(.33,1,.68,1); }
.sheet-handle { width: 36px; height: 4px; background: var(--border); border-radius: 2px; margin: 12px auto 16px; }
.sheet-header { display: flex; align-items: center; gap: 12px; padding: 0 16px 16px; }
.sheet-thumb { width: 80px; height: 45px; border-radius: 8px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--border); }
.sheet-header-info { flex: 1; min-width: 0; }
.sheet-title { font-size: 15px; font-weight: 600; color: white; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet-key { font-size: 13px; color: var(--accent); margin-top: 2px; }
.sheet-close { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.08); border: none; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; -webkit-tap-highlight-color: transparent; }
.sheet-divider { height: 1px; background: var(--border); }
.sheet-quick-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 12px 6px; background: rgba(255,255,255,.06); border: 1px solid var(--border); border-radius: 10px; color: white; font-size: 12px; font-family: 'Sarabun', sans-serif; cursor: pointer; min-height: 64px; transition: background .15s; -webkit-tap-highlight-color: transparent; }
.sheet-quick-btn:active { background: rgba(255,255,255,.12); }
.sheet-quick-disabled { opacity: .3; cursor: not-allowed; }
.sheet-action-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 0 8px; background: none; border: none; color: var(--text); font-size: 15px; font-family: 'Sarabun', sans-serif; cursor: pointer; border-radius: 8px; min-height: 50px; transition: background .15s; -webkit-tap-highlight-color: transparent; }
.sheet-action-item:active { background: rgba(255,255,255,.06); }
.sheet-action-item svg { color: var(--muted); flex-shrink: 0; }
.sheet-action-danger { color: #e05252; }
.sheet-action-danger svg { color: #e05252; }

/* ══════════════════════════════════════════════
   PRACTICE MODE OVERLAY  (busk.town-inspired)
   ══════════════════════════════════════════════ */
.practice-overlay {
  position: fixed; inset: 0; z-index: 250;
  background: #0d0f14;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s ease;
}
.practice-overlay.show { transform: translateX(0); }

/* ── Floating back button ── */
.practice-float-back {
  position: fixed; top: 12px; left: 12px; z-index: 300;
  width: 38px; height: 38px;
  background: rgba(13,15,20,.75);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  color: rgba(255,255,255,.85);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -webkit-tap-highlight-color: transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.practice-float-back:hover { background: rgba(13,15,20,.95); color: white; border-color: rgba(255,255,255,.3); }

/* ── Info card ── */
.practice-info-card {
  display: flex; align-items: stretch;
  max-width: 1080px;
  margin: 20px auto 0;
  background: #13161d;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  overflow: hidden;
}
.pic-left {
  flex: 1; min-width: 0;
  padding: 32px 40px;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
}
.pic-title {
  font-size: 34px; font-weight: 800; color: white; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pic-author {
  display: flex; align-items: center; gap: 7px;
  font-size: 16px; color: rgba(255,255,255,.5);
}
.pic-author svg { flex-shrink: 0; }
.pic-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pic-tag {
  padding: 3px 10px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px; color: rgba(255,255,255,.5);
  font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 11px;
}
.pic-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.pic-meta-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-size: 16px; font-weight: 600;
  color: rgba(255,255,255,.9);
}
.pic-meta-item svg { flex-shrink: 0; color: rgba(255,255,255,.85); }
.pic-meta-sep { color: rgba(255,255,255,.25); font-size: 15px; user-select: none; }
.pic-yt {
  width: 340px; flex-shrink: 0;
  background: transparent;
  display: flex; align-items: stretch;
  border-left: 1px solid rgba(255,255,255,.07);
  padding: 16px 16px 16px 0;
}
.pic-yt-inner { flex: 1; position: relative; min-height: 175px; border-radius: 8px; overflow: hidden; background: #000; }
.pic-yt-inner iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; display: block; }
.pic-yt-lazy { cursor: pointer; }
.pic-yt-lazy img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pic-yt-play {
  position: absolute; inset: 0; margin: auto;
  width: 52px; height: 52px;
  background: rgba(0,0,0,.65); border: none; border-radius: 50%;
  color: white; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .15s;
}
.pic-yt-lazy:hover .pic-yt-play { background: rgba(220,0,0,.85); transform: scale(1.08); }
/* Desktop sticky mini-player — card video floats bottom-right when scrolled out of view */
.pic-yt-float-close { display: none; }
@media (min-width: 769px) {
  .pic-yt-inner.pic-yt-floating {
    position: fixed; bottom: 20px; right: 20px;
    width: 340px; height: 191px; min-height: 0; z-index: 320;
    border-radius: 10px; overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 14px 44px rgba(0,0,0,.7);
  }
  .pic-yt-inner.pic-yt-floating .pic-yt-float-close {
    display: flex; position: absolute; top: 6px; right: 6px; z-index: 3;
    width: 26px; height: 26px; border-radius: 6px;
    background: rgba(0,0,0,.6); border: none; color: #fff;
    align-items: center; justify-content: center; cursor: pointer;
    transition: background .15s;
  }
  .pic-yt-inner.pic-yt-floating .pic-yt-float-close:hover { background: rgba(0,0,0,.9); }
}

/* ── Practice: Floating YouTube mini player (mobile only) ── */
.pyt-float {
  position: fixed; bottom: 20px; right: 14px; z-index: 310;
  flex-direction: column; align-items: flex-end; gap: 8px;
  pointer-events: none;
  display: none; /* hidden on desktop — shown only on mobile via class */
}
.pyt-float.pyt-has-yt { display: flex; }
.pyt-float > * { pointer-events: auto; }
.pyt-pill {
  display: flex; align-items: center; gap: 7px;
  background: rgba(19,22,29,.92); color: var(--text);
  border: 1px solid var(--border);
  padding: 8px 14px; border-radius: 99px;
  font-size: 12px; font-weight: 700;
  font-family: 'IBM Plex Mono', 'Sarabun', monospace; letter-spacing: .03em;
  cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.55);
  transition: transform .12s, border-color .15s;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pyt-pill svg { color: #ff3d3d; }   /* YouTube-red icon for recognizability */
.pyt-pill:hover { transform: scale(1.04); border-color: var(--muted); }
.pyt-pill:active { transform: scale(.97); }
.pyt-player {
  width: 240px; background: #0d0f14;
  border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 32px rgba(0,0,0,.75);
  transform-origin: bottom right;
  animation: pytIn .18s cubic-bezier(.2,.8,.4,1);
  display: none;
}
.pyt-float.pyt-open .pyt-player { display: block; }
.pyt-float.pyt-open .pyt-pill { display: none; }
/* minimized: keep iframe alive (audio keeps playing) but move offscreen — NOT display:none */
.pyt-float.pyt-min .pyt-player {
  display: block; position: fixed;
  left: -9999px; top: -9999px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; overflow: hidden;
}
.pyt-float.pyt-min .pyt-pill { display: flex; }
@keyframes pytIn {
  from { opacity: 0; transform: scale(.88) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.pyt-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 8px 8px 10px;
  background: rgba(180,0,0,.22); border-bottom: 1px solid rgba(255,255,255,.08);
}
.pyt-bar-icon { color: #ff4444; flex-shrink: 0; }
.pyt-bar-title {
  flex: 1; font-size: 11px; color: rgba(255,255,255,.75);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pyt-bar-btn {
  width: 24px; height: 24px; border-radius: 5px;
  background: rgba(255,255,255,.08); border: none;
  color: rgba(255,255,255,.55); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s; flex-shrink: 0;
}
.pyt-bar-btn:hover { background: rgba(255,255,255,.18); color: white; }
.pyt-iframe-wrap { position: relative; padding-bottom: 56.25%; background: #000; }
.pyt-iframe-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
/* desktop: float hidden — YouTube is in the info card instead */
@media (min-width: 769px) { .pyt-float { display: none !important; } }

/* ── Toolbar: tab-bar (sticky inside scroll) ── */
.practice-toolbar {
  height: 62px;
  background: #111318;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,.5);
  display: flex; justify-content: center;
  margin-top: 12px;
}
.practice-toolbar-inner {
  width: 100%; max-width: 1080px;
  display: flex;
}
.ptab {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  background: none; border: none;
  border-right: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.9);
  font-family: 'Sarabun', sans-serif; font-size: 15px; font-weight: 500;
  cursor: pointer; padding: 0 16px;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.practice-toolbar-inner .ptab:last-child { border-right: none; }
.ptab:not([disabled]):not(.ptab-as):hover { background: rgba(255,255,255,.06); }
.ptab-dim { color: rgba(255,255,255,.28); cursor: default; }
.ptab-chevron { flex-shrink: 0; opacity: .5; }
/* Key tab layout */
.ptab-key-text { display: flex; align-items: center; gap: 4px; font-weight: 500; }
.ptab-key-text strong { font-weight: 700; font-size: 16px; }
.ptab-key-sub { font-size: 13px; color: rgba(255,255,255,.45); }
.ptab-sub { font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 12px; font-weight: 600; }
.ptab-sub.is-transposed { color: var(--accent); }

/* Autoscroll tab */
.ptab-as { cursor: default; gap: 0; }
.ptab-active { background: rgba(240,192,64,.06) !important; }
.pas-toggle {
  background: none; border: none;
  color: rgba(255,255,255,.9);
  font-family: 'Sarabun', sans-serif; font-size: 15px; font-weight: 500;
  cursor: pointer; padding: 0;
  display: flex; align-items: center; gap: 7px;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s;
}
.pas-toggle:hover { color: white; }
.ptab-active .pas-toggle { color: var(--accent); }
.pas-speeds {
  display: none;
  align-items: center; gap: 3px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; padding: 3px;
  margin-left: 10px;
}
.pas-speeds.visible { display: flex; }
.pas-speed {
  height: 28px; padding: 0 9px;
  background: none; border: none; border-radius: 6px;
  color: rgba(255,255,255,.5);
  font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background .1s, color .1s;
  -webkit-tap-highlight-color: transparent;
}
.pas-speed:hover { background: rgba(255,255,255,.1); color: rgba(255,255,255,.9); }
.pas-speed.active { background: var(--accent); color: #0d0f14; }

/* ── Key picker popup ── */
.key-picker {
  position: fixed; z-index: 500;
  background: #1a1d25;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,.8);
  display: none;
  animation: kpIn .12s ease;
}
.key-picker.kp-show { display: block; }
@keyframes kpIn { from { opacity: 0; transform: scale(.96) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.key-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.key-btn {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  width: 68px; height: 66px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; color: white;
  cursor: pointer;
  transition: background .1s, border-color .1s;
  -webkit-tap-highlight-color: transparent;
}
.key-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); }
.key-btn.active { background: var(--accent); border-color: var(--accent); }
.key-btn-name { font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 20px; font-weight: 700; line-height: 1; }
.key-btn-offset { font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 11px; color: rgba(255,255,255,.45); margin-top: 5px; }
.key-btn.active .key-btn-name { color: #0d0f14; }
.key-btn.active .key-btn-offset { color: rgba(0,0,0,.55); }

/* ── Tools menu ── */
.tools-menu {
  position: fixed; z-index: 500;
  background: #1a1d25;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 10px;
  min-width: 180px;
  box-shadow: 0 16px 48px rgba(0,0,0,.8);
  display: none;
  animation: kpIn .12s ease;
}
.tools-menu.tm-show { display: block; }
.tm-section-label {
  font-family: 'IBM Plex Mono', 'Sarabun', monospace;
  font-size: 10px; font-weight: 600;
  color: rgba(255,255,255,.3);
  text-transform: uppercase; letter-spacing: .1em;
  padding: 4px 6px 8px;
}
.tm-row { display: flex; align-items: center; gap: 6px; padding: 0 4px 4px; }
.tm-btn {
  flex: 1; height: 38px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; color: white;
  font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background .1s;
  -webkit-tap-highlight-color: transparent;
}
.tm-btn:hover  { background: rgba(255,255,255,.14); }
.tm-btn:active { background: rgba(255,255,255,.22); }
.tm-btn.tm-active { background: var(--accent); border-color: var(--accent); color: #0d0f14; }
.tm-btn.tm-active:hover { background: var(--accent); }
.tm-divider { height: 1px; background: rgba(255,255,255,.07); margin: 6px 2px; }
.tm-font-val {
  flex: 1; text-align: center;
  font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 15px; font-weight: 700;
  color: rgba(255,255,255,.85);
}
.tm-pdf-btn {
  width: 100%; height: 42px; margin-top: 4px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px; color: rgba(255,255,255,.85);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Sarabun', sans-serif; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: background .1s;
  -webkit-tap-highlight-color: transparent;
}
.tm-pdf-btn:hover { background: rgba(255,255,255,.14); }

/* ── Body layout ── */
.practice-body { flex: 1; overflow: hidden; }
.practice-scroll { height: 100%; overflow-y: auto; }
.practice-main {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  min-height: 100%;
}

/* ── Left section nav ── */
.practice-nav {
  width: 180px; flex-shrink: 0;
  align-self: flex-start;
  position: sticky; top: 56px;
  height: calc(100vh - 56px);
  overflow-y: auto;
  border-right: 1px solid rgba(255,255,255,.06);
  padding: 20px 0;
}
.pnav-item {
  display: block; width: 100%;
  padding: 9px 16px 9px 12px;
  background: none; border: none;
  border-right: 3px solid transparent;
  color: rgba(255,255,255,.32);
  font-family: 'IBM Plex Mono', 'Sarabun', monospace;
  font-size: 12px; font-weight: 500;
  text-align: right; cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.5;
}
.pnav-item:hover { color: rgba(255,255,255,.65); background: rgba(255,255,255,.04); }
.pnav-item.active {
  color: var(--accent); border-right-color: var(--accent);
  background: rgba(240,192,64,.06); font-weight: 700;
}

/* ── Chord sheet content ── */
.practice-content {
  flex: 1; min-width: 0;
  padding: 32px 52px 120px;
  --pfs: 1;
}

/* ── Block overrides: full opacity, compact, no live-mode fading ── */
.practice-content .block {
  opacity: 1 !important;
  background: none !important;
  border-left: none !important;
  border-bottom: none !important;
  padding: 3px 0 !important;
}
.practice-content .block.is-cur { background: none !important; border-left: none !important; padding: 3px 0 !important; }
.practice-content .block:has(.b-sec) { padding-top: 28px !important; }
.practice-content .block:first-child:has(.b-sec) { padding-top: 0 !important; }

/* ── Font sizes via --pfs ── */
.practice-content .b-chord-over  { font-size: calc(12px * var(--pfsx)); min-height: calc(14px * var(--pfsx)); color: var(--chord); }
.practice-content .b-lyric-seg   { font-size: calc(17px * var(--pfsx)); color: var(--lyric); }
.practice-content .b-lyric-only  { font-size: calc(17px * var(--pfsx)); color: var(--lyric); }
.practice-content .b-chord-only  { font-size: calc(17px * var(--pfsx)); color: var(--chord); }
.practice-content .b-seg-rest    { min-width: calc(1.6em * var(--pfsx)); }
.practice-content .b-note { font-size: calc(13px * var(--pfsx)); }
.practice-content .b-cmt  { font-size: calc(12px * var(--pfsx)); }
.practice-content .b-sec {
  font-size: calc(13px * var(--pfsx)); font-weight: 600;
  color: rgba(255,255,255,.55); text-transform: none; letter-spacing: .02em;
  border-left: 3px solid var(--accent); padding-left: 10px; margin-bottom: 8px;
}
.practice-content .block.is-cur .b-chord-over { font-size: calc(12px * var(--pfsx)); color: var(--chord); }
.practice-content .block.is-cur .b-lyric-seg  { font-size: calc(17px * var(--pfsx)); font-weight: normal; color: var(--lyric); }
.practice-content .block.is-cur .b-lyric-only { font-size: calc(17px * var(--pfsx)); font-weight: normal; color: var(--lyric); }
.practice-content .block.is-cur .b-chord-only { font-size: calc(17px * var(--pfsx)); color: var(--chord); }
.practice-content .block.is-cur .b-sec { color: rgba(255,255,255,.55); }

/* ── Metronome popup ── */
.metro-popup {
  position: fixed; z-index: 500;
  background: #1a1d25;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,.8);
  display: none;
  animation: kpIn .12s ease;
  width: 240px;
}
.metro-popup.mp-show { display: block; }
.metro-bpm-row {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; margin-bottom: 12px;
}
.metro-adj {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; color: white;
  font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 14px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .1s; -webkit-tap-highlight-color: transparent;
}
.metro-adj:hover { background: rgba(255,255,255,.14); }
.metro-adj:active { background: rgba(255,255,255,.22); }
.metro-adj-sm { font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 11px; width: auto; padding: 0 9px; }
.metro-bpm-display { display: flex; align-items: baseline; gap: 4px; min-width: 90px; justify-content: center; }
.metro-bpm-val { font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 28px; font-weight: 400; color: white; line-height: 1; }
.metro-bpm-unit { font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 12px; color: rgba(255,255,255,.35); }
.metro-start {
  width: 100%; height: 46px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; color: white;
  font-family: 'Sarabun', sans-serif; font-size: 16px; font-weight: 600;
  cursor: pointer; transition: background .15s, border-color .15s;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  -webkit-tap-highlight-color: transparent;
}
.metro-start:hover { background: rgba(255,255,255,.14); }
.metro-start.mp-running { background: var(--accent); border-color: var(--accent); color: #0d0f14; }
.metro-start.mp-running:hover { background: #e6b838; }
/* beat flash — offbeat = pale gold, downbeat (หัวห้อง) = white + glow */
.metro-start-flash { background: #ffe08a !important; border-color: #ffe08a !important; color: #0d0f14 !important; transition: background 0s, border-color 0s !important; }
.metro-start-accent-flash { background: #fff !important; border-color: #fff !important; color: #0d0f14 !important; box-shadow: 0 0 16px rgba(255,255,255,.7) !important; transition: background 0s, border-color 0s, box-shadow 0s !important; }
.ptab-metro-flash { background: rgba(240,192,64,.45) !important; transition: background 0s !important; }
.ptab-metro-accent-flash { background: rgba(255,255,255,.9) !important; color: #0d0f14 !important; transition: background 0s, color 0s !important; }

/* ── Live (Musician) metronome float — accent pill showing live BPM ── */
.live-metro-fab {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 48px; padding: 0 20px; border-radius: 99px; flex-shrink: 0;
  background: rgba(13,15,20,.85); border: 1.5px solid rgba(240,192,64,.55);
  color: var(--accent); cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.5);
  -webkit-tap-highlight-color: transparent;
  margin-top: 6px;   /* separate the metronome from the back/settings group */
  transition: background .15s, border-color .15s, color .15s;
}
.live-metro-fab:hover { border-color: var(--accent); }
.lmf-bpm { font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 19px; font-weight: 700; line-height: 1; }
.lmf-unit { font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 9px; letter-spacing: .08em; opacity: .65; }
.live-metro-fab.metro-on { background: var(--accent); border-color: var(--accent); color: #0d0f14; }
/* screen-edge beat pulse — peripheral, doesn't cover chords. downbeat = big white, offbeat = gold */
.beat-edge { position: fixed; inset: 0; pointer-events: none; z-index: 20; box-shadow: inset 0 0 0 0 transparent; }
.beat-edge.pulse-off { animation: beatEdgeOff .22s ease-out; }
.beat-edge.pulse-accent { animation: beatEdgeAccent .3s ease-out; }
@keyframes beatEdgeOff {
  0%   { box-shadow: inset 0 0 var(--beat-off-blur,60px) var(--beat-off-spread,5px) rgba(240,192,64, var(--beat-off-alpha,.55)); }
  100% { box-shadow: inset 0 0 var(--beat-off-blur,60px) var(--beat-off-spread,5px) rgba(240,192,64, 0); }
}
@keyframes beatEdgeAccent {
  0%   { box-shadow: inset 0 0 var(--beat-accent-blur,110px) var(--beat-accent-spread,16px) rgba(255,255,255, var(--beat-accent-alpha,.92)); }
  100% { box-shadow: inset 0 0 var(--beat-accent-blur,110px) var(--beat-accent-spread,16px) rgba(255,255,255, 0); }
}
.live-metro-fab.live-metro-flash { background: #ffe08a; border-color: #ffe08a; color: #0d0f14; transition: background 0s, border-color 0s, color 0s; }
.live-metro-fab.live-metro-flash-accent { background: #fff; border-color: #fff; color: #0d0f14; box-shadow: 0 0 16px rgba(255,255,255,.7); transition: background 0s, border-color 0s, color 0s, box-shadow 0s; }
.metro-pop-divider { height: 1px; background: rgba(255,255,255,.1); margin: 13px 0; }
.metro-pop-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.metro-pop-label { font-family: 'Sarabun', sans-serif; font-size: 13px; color: rgba(255,255,255,.7); }
.metro-seg { display: inline-flex; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; overflow: hidden; }
.metro-seg-btn {
  padding: 6px 12px; background: none; border: none; cursor: pointer;
  font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 11.5px; color: rgba(255,255,255,.55);
  -webkit-tap-highlight-color: transparent; transition: background .12s, color .12s;
}
.metro-seg-btn.on { background: rgba(240,192,64,.18); color: var(--accent); }
.metro-vol { display: inline-flex; align-items: center; gap: 8px; }
.metro-vol-val { font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 12px; color: white; min-width: 40px; text-align: center; }

/* ── Tools: toggle switch ── */
.tm-row-switch { justify-content: space-between; padding: 4px 4px 6px; }
.tm-switch-label { font-family: 'Sarabun', sans-serif; font-size: 14px; color: rgba(255,255,255,.75); }
.tm-switch {
  width: 42px; height: 24px;
  background: rgba(255,255,255,.12); border: none; border-radius: 12px;
  cursor: pointer; position: relative; transition: background .2s; padding: 0;
  flex-shrink: 0; -webkit-tap-highlight-color: transparent;
}
.tm-switch.tm-switch-on { background: var(--accent); }
.tm-switch-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px;
  background: white; border-radius: 50%;
  transition: transform .2s; display: block; pointer-events: none;
}
.tm-switch.tm-switch-on .tm-switch-thumb { transform: translateX(18px); }

/* ── Mobile ── */
@media (max-width: 768px) {
  /* Floating back: slightly smaller on mobile */
  .practice-float-back { width: 40px; height: 40px; top: 10px; left: 10px; }

  /* Info card: centered, larger text */
  .practice-info-card { min-height: 0; margin: 10px 10px 0; border-radius: 12px; }
  .pic-left { padding: 20px 20px 16px; gap: 10px; align-items: center; text-align: center; }
  .pic-title { font-size: 26px; white-space: normal; line-height: 1.2; }
  .pic-author { font-size: 15px; justify-content: center; }
  .pic-tags { justify-content: center; }
  .pic-meta { justify-content: center; }
  .pic-yt { display: none; }

  /* Toolbar: 58px, sticky — pad-left clears the fixed back button (40px + 10px margin) */
  .practice-toolbar { height: 58px; padding-left: 52px; }
  /* Nav sticky top + height (no header) */
  .practice-nav { top: 58px; height: calc(100vh - 58px); }
  .ptab { font-size: 14px; padding: 0 10px; gap: 5px; }
  .ptab-key-text strong { font-size: 14px; }
  .ptab-key-sub { display: none; }
  .ptab-dim { display: none; }
  .pas-speeds { display: none !important; }
  /* Autoscroll tab active: glow instead of speeds */
  #practiceAutoscrollTab.ptab-active { background: rgba(240,192,64,.1) !important; }
  /* Metronome: hide text label, show only icon + chevron */
  .ptab-metro-label { display: none; }
  #practiceMetroBtn { gap: 4px; }

  /* Nav: hidden */
  .practice-nav { display: none; }

  /* Content: full width, safe area bottom */
  .practice-content {
    padding: 20px 18px calc(72px + env(safe-area-inset-bottom, 0px));
  }

  /* Key picker: centered */
  /* Practice popup position comes from its trigger in practice.js. */
  .key-btn { width: 62px; height: 62px; }
  .key-btn-name { font-size: 18px; }
  .key-btn-offset { font-size: 10px; margin-top: 4px; }

  /* Tools menu: right-anchored, full-ish width */
  /* Practice tools width is scoped in I-6. */
  .tm-row { gap: 8px; }
  .tm-btn { height: 42px; font-size: 15px; }

  /* Font sizes: slightly larger default on mobile */
  .practice-content .b-lyric-seg,
  .practice-content .b-lyric-only { font-size: calc(18px * var(--pfsx)); }
  .practice-content .b-chord-over { font-size: calc(13px * var(--pfsx)); min-height: calc(15px * var(--pfsx)); }
}

/* ── MUSICIAN SCREEN ── */
.mus-topbar {
  height: 52px; flex-shrink: 0;
  display: flex; align-items: center; gap: 10px; padding: 0 16px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.mus-topbar-brand {
  flex: 1; display: flex; align-items: center; gap: 9px;
  color: white; font-weight: 700; font-size: 15px;
}
/* tab bar — desktop hidden */
.mus-tab-bar { display: none; }

.mus-body { flex: 1; display: flex; overflow: hidden; min-height: 0; }

/* sidebar */
.mus-sidebar {
  width: 280px; flex-shrink: 0;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow-y: auto; padding: 16px; gap: 0;
}
.mus-sidebar-label {
  font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 10px; font-weight: 700;
  color: var(--muted); letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 12px;
}

/* library */
.mus-library { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.mus-library-search {
  padding: 10px 16px; border-bottom: 1px solid var(--border);
  flex-shrink: 0; display: flex; align-items: center; gap: 8px;
}
.mus-library-search input {
  flex: 1; height: 34px; background: rgba(255,255,255,.06);
  border: 1px solid var(--border); border-radius: 8px; padding: 0 12px;
  color: white; font-size: 14px; font-family: 'Sarabun', sans-serif; outline: none;
}
.mus-library-search input::placeholder { color: var(--muted); }
.mus-library-search input:focus { border-color: rgba(240,192,64,.4); }
.mus-lib-count { font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 11px; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.mus-lib-tags { display: flex; align-items: center; padding: 8px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap; gap: 6px; }
.mus-library-list { flex: 1; overflow-y: auto; padding: 0; }
/* rows reuse lib-row — just add cursor + click style */
.mus-lib-row { cursor: pointer; }
.mus-lib-row:hover { background: rgba(255,255,255,.06) !important; }
/* thumbnail static (no play overlay) */
.mus-thumb-static { cursor: default; pointer-events: none; }
.mus-thumb-static img { transition: none; }
.mus-empty { color: var(--muted); font-size: 14px; text-align: center; padding: 40px 20px; }

/* mobile — tab layout */
@media (max-width: 680px) {
  .mus-tab-bar {
    display: flex; flex-shrink: 0;
    background: var(--surface); border-bottom: 1px solid var(--border);
  }
  .mus-tab {
    flex: 1; padding: 13px 8px;
    font-size: 14px; font-family: 'IBM Plex Mono', 'Sarabun', monospace;
    color: var(--muted); border-bottom: 2px solid transparent;
    cursor: pointer; background: none;
    border-left: none; border-right: none; border-top: none;
    transition: all .15s; letter-spacing: .04em;
  }
  .mus-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

  .mus-body { flex-direction: column; }

  /* each panel hidden by default; show only active tab */
  .mus-sidebar {
    width: 100%; border-right: none; border-bottom: none;
    padding: 16px; max-height: none; flex-shrink: 0;
    flex-direction: column; flex-wrap: nowrap; gap: 0;
    overflow-y: auto; flex: 1; display: none;
  }
  .mus-sidebar.mus-tab-active { display: flex; }
  .mus-library { display: none; }
  .mus-library.mus-tab-active { display: flex; }

  .mus-sidebar-label { display: none; }
  /* hide song number in front of thumbnail on mobile (saves space; kept on PC) */
  #musLibraryList .lib-row-num { display: none; }
}

/* ── PRINT / PDF ── */
#slPrintSheet { display: none; }
@media print {
  @page { margin: 1.5cm; }
  body.is-printing-setlist { margin: 0 !important; background: #fff !important; color: #000 !important; font-family: 'Sarabun', sans-serif !important; }
  body.is-printing-setlist > :not(#slPrintSheet) { display: none !important; }
  body.is-printing-setlist #slPrintSheet { display: block !important; width: 100%; color: #000 !important; background: #fff !important; font: 12pt/1.5 'Sarabun', sans-serif !important; }
  body.is-printing-setlist .sl-print-title { margin: 0 0 4pt; color: #000 !important; font: 700 22pt/1.35 'Sarabun', sans-serif !important; }
  body.is-printing-setlist .sl-print-meta { margin: 0 0 16pt; color: #333 !important; font: 400 11pt/1.5 'Sarabun', sans-serif !important; }
  body.is-printing-setlist .sl-print-songs { margin: 0; padding: 0; list-style: none; }
  body.is-printing-setlist .sl-print-songs li { display: grid; grid-template-columns: 2em minmax(0,1fr) 3em; align-items: baseline; gap: 8pt; padding: 7pt 0; border-bottom: .5pt solid #ccc; break-inside: avoid; color: #000 !important; font: 400 12pt/1.5 'Sarabun', sans-serif !important; }
  body.is-printing-setlist .sl-print-num { color: #333 !important; text-align: right; }
  body.is-printing-setlist .sl-print-name,
  body.is-printing-setlist .sl-print-key { color: #000 !important; font-weight: 700 !important; }
  body.is-printing-setlist .sl-print-key { text-align: right; }
  body.is-printing-setlist .sl-print-notes { margin: 16pt 0 0; padding-top: 10pt; border-top: .5pt solid #ccc; color: #222 !important; white-space: pre-wrap; font: 400 11pt/1.6 'Sarabun', sans-serif !important; }

  .screen, #toastWrap, .practice-float-back, .practice-toolbar, .practice-nav, .practice-info-card { display: none !important; }
  .practice-overlay:not(.show) { display: none !important; }
  .practice-overlay.show { position: static !important; transform: none !important; background: white !important; }
  .practice-body, .practice-scroll, .practice-main { display: block !important; }
  .practice-content { padding: 0 !important; background: white !important; }
  .practice-content .block { padding: 2px 0 !important; }
  .practice-content .b-sec { color: #333 !important; border-left-color: #333 !important; }
  .practice-content .b-chord-over,
  .practice-content .b-chord-only { color: #1565c0 !important; }
  .practice-content .b-lyric-seg,
  .practice-content .b-lyric-only { color: #000 !important; }
  .practice-content .b-sec  { color: #444 !important; }
  .practice-content .b-note,
  .practice-content .b-cmt  { color: #c62828 !important; background: none !important; border: none !important; }
}
/* I-1 · 01 mode selection — approved mockup */
#screenModeSelect { align-items:center; overflow:auto; padding:32px 20px; }
.ms-wrap { grid-template-columns:minmax(0,1fr); min-width:0; width:100%; max-width:520px; margin:auto; display:grid; gap:20px; font-family:var(--font-ui); }
.ms-header { display:grid; gap:20px; }
.ms-logo { color:var(--accent); font-size:15px; line-height:1.5; margin:0; }
.ms-tagline { font-size:21px; font-weight:700; line-height:1.5; margin:0; }
.ms-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.ms-card { display:grid; gap:8px; padding:20px; text-align:left; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); font-family:inherit; cursor:pointer; }
.ms-card > svg { width:24px; height:24px; }
.ms-card-name { font-size:21px; font-weight:700; line-height:1.5; }
.ms-card-desc { color:var(--muted); font-size:15px; line-height:1.5; }
.ms-card:hover { border-color:var(--muted); }
.ms-output { display:grid; gap:8px; }
.ms-output h2 { margin:0; font-size:13px; font-weight:400; line-height:1.5; color:var(--muted); }
.ms-output-actions { display:flex; flex-wrap:wrap; gap:12px; }
.ms-output-actions .btn-secondary { min-height:44px; font-size:16px; }
@media (min-width:1100px) { .ms-wrap { max-width:760px; } .ms-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* I-10 · Output only. Projection colours are deliberate broadcast values. */
#screenOutput { position: relative; background: #000; color: #fff; align-items: stretch; justify-content: center; font-family: var(--font-ui); }
#screenOutput .out-content { box-sizing: border-box; width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: clamp(24px,5.21vw,100px); text-align: center; gap: 0; }
#screenOutput .out-block { width: 100%; flex-shrink: 0; }
#screenOutput .out-cur { margin: 0; }
#screenOutput .out-next { opacity: 1; }
#screenOutput .out-lyric { font-family: var(--font-ui); font-size: calc(clamp(24px,3.9583vw,76px) * var(--out-scale,1)); font-weight: 600; line-height: 1.65; color: #fff; white-space: pre-line; overflow-wrap: anywhere; }
#screenOutput .out-sec { display: none; }
[data-output="stream"] #screenOutput .out-content { justify-content: flex-end; padding: clamp(24px,5.21vw,100px) clamp(24px,6.25vw,120px); }
[data-output="stream"] #screenOutput .out-lyric { font-size: calc(clamp(22px,3.3333vw,64px) * var(--out-scale,1)); }
[data-chroma="green"] #screenOutput { background: #00b140; }
[data-chroma="blue"] #screenOutput { background: #0047AB; }
#screenOutput .out-gear { position: absolute; top: 12px; right: 12px; z-index: 90; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; visibility: hidden; opacity: 0; pointer-events: none; }
body.out-ui #screenOutput .out-gear, #screenOutput:has(.out-settings.show) .out-gear { visibility: visible; opacity: 1; pointer-events: auto; }
#screenOutput .out-gear svg { width: 24px; height: 24px; }
#screenOutput .out-settings { position: absolute; top: 64px; right: 12px; z-index: 90; box-sizing: border-box; width: 320px; max-width: calc(100% - 24px); max-height: calc(100% - 76px); overflow-y: auto; display: none; padding: 16px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 16px; }
#screenOutput .out-settings.show { display: block; }
#screenOutput .out-settings-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; font: 600 16px/1.5 var(--font-ui); }
#screenOutput .out-close { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text); cursor: pointer; }
#screenOutput .out-settings-title { font: 400 13px/1.5 var(--font-ui); color: var(--muted); letter-spacing: normal; text-transform: none; margin: 0 0 8px; }
#screenOutput .out-settings-row { display: flex; gap: 8px; margin-bottom: 24px; }
#screenOutput .out-settings-btn { flex: 1; min-width: 44px; min-height: 44px; padding: 8px 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text); font: 400 14px/1.5 var(--font-ui); cursor: pointer; }
#screenOutput .out-settings-btn:hover, #screenOutput .out-close:hover { border-color: var(--muted); }
#screenOutput .out-settings-btn.active { border-color: var(--text); background: var(--border); color: #fff; font-weight: 700; }
#screenOutput .out-chroma-btn::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border: 1px solid var(--muted); border-radius: 50%; background: #000; }
#screenOutput .out-chroma-btn[data-chroma="green"]::before { background: #00b140; }
#screenOutput .out-chroma-btn[data-chroma="blue"]::before { background: #0047AB; }
#screenOutput .out-settings-mode { border-top: 1px solid var(--border); padding-top: 16px; }
#screenOutput .out-settings-mode .out-settings-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
#screenOutput .out-settings-mode svg { width: 20px; height: 20px; flex-shrink: 0; }
#screenOutput button:focus-visible { outline: 2px solid var(--section-color); outline-offset: -3px; }
#screenOutput .out-meta { display: none; }
[data-output="monitor"] #screenOutput .out-meta { position: absolute; top: clamp(20px,2.5vw,48px); left: clamp(24px,3.3333vw,64px); right: clamp(24px,3.3333vw,64px); display: flex; flex-wrap: wrap; gap: 8px clamp(16px,1.6667vw,32px); align-items: center; padding-bottom: clamp(12px,1.25vw,24px); border-bottom: 1px solid var(--border); font: 400 clamp(16px,1.4583vw,28px)/1.5 var(--font-ui); color: var(--text); white-space: normal; overflow: visible; }
[data-output="monitor"] #screenOutput .out-meta-title { flex: 1; min-width: 0; font-size: clamp(22px,1.875vw,36px); font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; color: #fff; }
[data-output="monitor"] #screenOutput .out-meta-key { color: var(--accent); font-weight: 600; }
[data-output="monitor"] #screenOutput .out-meta > .out-meta-key::before { content: 'คีย์ '; }
[data-output="monitor"] #screenOutput .out-meta-next { position: fixed; left: clamp(24px,3.3333vw,64px); right: clamp(24px,3.3333vw,64px); bottom: clamp(20px,2.5vw,48px); display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px clamp(16px,1.6667vw,32px); margin: 0; border-top: 1px solid var(--border); padding-top: clamp(12px,1.25vw,24px); line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
[data-output="monitor"] #screenOutput .out-meta-next-label { color: var(--muted); font-size: .75em; font-weight: 400; }
[data-output="monitor"] #screenOutput .out-meta-next-title { flex: 1 1 240px; min-width: 0; color: #fff; font-weight: 700; }
[data-output="monitor"] #screenOutput .out-meta-next .out-meta-key::before { content: none; }
[data-output="monitor"] #screenOutput .out-meta-next-bpm { white-space: nowrap; }
[data-output="monitor"] #screenOutput .out-content { padding-block: clamp(140px,12vw,230px); }
[data-output="monitor"] #screenOutput .out-blank-badge { position: absolute; top: clamp(112px,8.3333vw,160px); left: clamp(24px,3.3333vw,64px); padding: 0; border: 0; border-radius: 0; background: transparent; transform: none; color: var(--accent); font: 400 clamp(16px,1.25vw,24px)/1.5 var(--font-ui); }
[data-output="monitor"] #screenOutput .out-waiting { width: 100%; text-align: center; color: var(--text); font: 600 clamp(24px,1.6667vw,32px)/1.5 var(--font-ui); }
[data-output="monitor"] #screenOutput .out-waiting-sub { margin: 8px 0 0; color: var(--muted); font: 400 clamp(16px,1.25vw,24px)/1.5 var(--font-ui); }
@media (max-width: 768px) {
  [data-output="monitor"] #screenOutput .out-meta-title { flex-basis: 100%; padding-right: 36px; }
  [data-output="monitor"] #screenOutput .out-content { padding: 170px 24px 130px; }
  [data-output="monitor"] #screenOutput .out-blank-badge { top: 132px; }
}

.live-waiting { font-family: 'IBM Plex Mono', 'Sarabun', monospace; font-size: 15px; color: rgba(255,255,255,.25); text-align: center; padding: 60px 20px; }

/* ── DESKTOP (≥768px) ── */
@media (min-width: 769px) {
  /* Search area */
  .lib-search-area { padding: 16px 24px 8px; }
  .search-input { height: 52px; font-size: 16px; padding: 0 48px; }
  .search-meta { padding: 8px 0 4px; }
  .search-count { font-size: 12px; }

  /* Setlist list container */
  #homeSetlists { padding: 20px 24px; }

  /* Setlist card */
  .setlist-card { padding: 15px 20px; margin-bottom: 12px; }
  .sc-title { font-size: 20px; }
  .sc-meta-item { font-size: 13px; }
  .sc-meta-item svg { width: 12px; height: 12px; }
  .sc-live-btn { height: 40px; font-size: 14px; padding: 0 20px; gap: 8px; }
  .sc-edit-btn { height: 40px; font-size: 13px; padding: 0 16px; }
  .sc-more-btn { width: 40px; height: 40px; }
  .sc-expand-btn { height: 40px; font-size: 13px; padding: 0 14px; }
  .sc-count { font-size: 13px; }
  .sl-notes-text { font-size: 13px; }

  /* Expanded song list */
  .sl-song-row { padding: 8px 0; }
  .sl-song-title { font-size: 14px; }
  .sl-song-key { font-size: 12px; }

  /* Compact rows */
  .sl-row { padding: 14px 24px; }
  .sl-row-title { font-size: 15px; }
  .sl-row-date { font-size: 12px; }

  /* Library */
  #homeLibList .lib-row { padding: 13px 24px; gap: 16px; }
  .lib-title { font-size: 16px; }
  .lib-key-badge { font-size: 13px; }
  .lib-author-badge { font-size: 13px; }
  .lib-speed-badge, .lib-ts-badge { font-size: 13px; }
  .lib-song-tag { font-size: 12px; padding: 2px 8px; }
  .lib-row-num { font-size: 13px; width: 26px; }
  .lib-live-btn { height: 38px; font-size: 14px; padding: 0 16px; }
  .lib-edit-btn { height: 38px; font-size: 13px; padding: 0 14px; }
  .lib-add-btn { width: 38px; height: 38px; }
  .lib-thumb { width: 120px; height: 68px; }
  .lib-thumb-empty { width: 120px; height: 68px; }

  /* Home tabs */
  .home-tab { font-size: 14px; padding: 15px 12px; }
  .home-tab-bar { border-bottom-width: 1px; }
}

/* ── Touch devices in landscape (phones + iPads rotated): the airy header stack
   eats the short viewport. Compact it. Placed AFTER the desktop block so it wins;
   pointer:coarse keeps mouse desktops/laptops on the full-size header. ── */
@media (orientation: landscape) and (pointer: coarse) and (max-height: 1030px) {
  .home-topbar { padding-top: 3px; padding-bottom: 3px; }
  .home-topbar .vf-btn { width: 32px; height: 32px; }
  .home-tab { padding: 5px 8px; font-size: 12.5px; }
  .lib-search-area { padding: 5px 16px 4px; }
  .search-input { height: 36px; font-size: 14px; }
  .search-meta { padding: 3px 0 2px; min-height: 24px; }
  .lib-tag { min-height: 23px; padding: 2px 9px; }
  #homeSetlists { padding-top: 8px; }
  #liveTopbar { padding-top: 3px; padding-bottom: 3px; }
  .song-nav-strip { height: 40px; }
  .mus-topbar { height: 40px; }
  .mus-tab { padding: 8px 8px; }
  .mus-library-search { padding-top: 5px; padding-bottom: 5px; }

  /* content — trim vertical space so cards/rows balance with the compact header */
  #homeSetlists { padding: 8px 20px; }
  .setlist-card { padding: 12px 18px; margin-bottom: 10px; }
  .sc-title { font-size: 17px; }
  .sl-row { padding: 9px 20px; }
  #homeLibList .lib-row { padding: 9px 20px; }
  .lib-thumb, .lib-thumb-empty { width: 104px; height: 59px; }
  .mus-sidebar { padding: 12px; }
}

/* toasts above every overlay / editor (they carry save errors) */
#toastWrap { z-index: 10000 !important; }

/* musician: "leader started Live" banner (hub / practice) */
.mus-live-banner { position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 400; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px); padding: 10px 12px 10px 14px; border-radius: 12px; background: #2a1414; border: 1px solid rgba(255,68,68,.55); color: var(--text); font-size: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.mus-live-banner .mlb-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mus-live-banner .mlb-join { flex-shrink: 0; height: 36px; padding: 0 14px; border: none; border-radius: 8px; background: var(--accent); color: #000; font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.mus-live-banner .mlb-close { flex-shrink: 0; width: 32px; height: 32px; border: none; background: none; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* offline: app opened from the copy saved on this device (live screen has its own banner) */
.offline-banner { position: fixed; bottom: calc(14px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); z-index: 350; padding: 7px 14px; border-radius: 99px; background: #3d3210; border: 1px solid var(--accent); color: var(--text); font-size: 13px; font-weight: 600; white-space: nowrap; pointer-events: none; }
body:has(#screenLive.active) .offline-banner,
body:has(#screenOutput.active) .offline-banner { display: none !important; }

/* follower offline (manual mode): the song strip becomes tappable to change song locally */
#screenLive.is-manual #songNavStrip.is-viewer .song-nav-adj { pointer-events: auto; cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════
   DESIGN SYSTEM (Sprint 5) — one look for every screen
   • text: Sarabun everywhere; mono only for chords on the sheet
   • one primary action (gold), one secondary (outline), one row, one card
   • radius 12 (controls) / 16 (cards); spacing 4·8·12·16
   • breakpoints: ≤768 phone + portrait tablet / ≥769 wide · ≤1023 / ≥1024 editor split
     (small-phone tweaks 480/540, live drawer 640/641, musician tabs 680/681) — never mix 767/768
   ═══════════════════════════════════════════════════════════════ */
:root {
  --font-ui: 'Sarabun', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Sarabun', monospace;
  --surface-2: #1a1e28;
  --r-md: 12px;
  --r-lg: 16px;
}

/* UI chrome speaks the same font as the content (mono stays on chords: .b-chord*, .chord-btn) */
.mono, .home-tab, .mus-tab, .view-toggle-btn, .search-count, .sort-select, .sl-badge, .sc-tag,
.sc-date, .sc-live-btn, .sc-edit-btn, .sc-expand-btn, .setlist-preview, .sl-row-date, .sl-row-count,
.sl-row-live, .lib-tag, .lib-song-tag, .lib-live-btn, .lib-edit-btn, .lib-speed-badge, .lib-ts-badge,
.lib-key-badge, .atl-new, .ptab-sub, .live-badge, .ldr-btn, .sp-btn, .b-sec, .sec-now, .song-nav-key,
.out-settings-title, .out-settings-btn, .out-waiting, .live-waiting, .mus-lib-count, .ms-logo,
.out-sec, .out-meta, .seq-pos, .scroll-top-btn, .guide-box,
.sl-song-key, .sl-song-bpm, .metro-pop-label, .metro-seg-btn {
  font-family: var(--font-ui);
  letter-spacing: normal;
}
.b-sec, .sec-now { text-transform: none; font-weight: 700; }

/* tabs: one segmented control (leader + musician) */
.home-tab-bar { padding: 6px 16px 0; gap: 4px; border-bottom: 1px solid var(--border); }
.home-tab { font-size: 15px; font-weight: 600; padding: 11px 8px; }
.mus-tab { font-size: 15px; font-weight: 600; }

/* buttons */
.btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px; border-radius: var(--r-md);
  font-family: var(--font-ui); font-size: 16px; font-weight: 700; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary { background: var(--accent); color: #0d0f14; border: 0; }
.btn-primary:active { transform: scale(.98); }
.btn-secondary { background: transparent; color: var(--text); border: 1px solid #343a4a; font-weight: 600; }
.view-toggle-btn { border-radius: var(--r-md); }

/* setlist home: today card */
.today-card { margin: 4px 0 18px; padding: 18px; border-radius: var(--r-lg); background: #191a1c; border: 1px solid #3a321c; }
.today-label { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--accent); }
.today-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.today-title { margin: 6px 0 2px; font-size: 21px; font-weight: 700; line-height: 1.35; color: #fff; }
.today-meta { font-size: 14px; color: var(--muted); }
.today-actions { display: flex; gap: 8px; margin-top: 14px; }
.today-live { flex: 1; min-height: 54px; font-size: 17px; }
.today-actions .btn-secondary { min-height: 54px; }

/* numbered song list (today card + expanded row) */
.sls-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sls-item { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 1.45; }
.sls-num { width: 18px; flex-shrink: 0; color: var(--muted); font-size: 13px; text-align: right; }
.sls-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sls-key { flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--accent); }

/* setlist rows */
.sl-section { margin: 14px 4px 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.slr { border-bottom: 1px solid var(--surface-2); }
.slr.is-open { background: rgba(255,255,255,.02); border-radius: var(--r-md); }
.slr-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 6px 4px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.slr-date { width: 46px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; padding: 5px 0; border-radius: 10px; background: var(--surface-2); }
.slr-day { font-size: 18px; font-weight: 700; color: var(--accent); line-height: 1.15; }
.slr-mon { font-size: 12px; color: var(--muted); }
.slr-main { flex: 1; min-width: 0; }
.slr-title { display: flex; align-items: center; gap: 5px; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--text); }
.slr-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.slr-star { display: inline-block; color: var(--accent); vertical-align: -1px; margin-right: 4px; }
.slr-meta { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slr-recent { color: var(--accent); }
.slr-live { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--accent); background: transparent; color: var(--accent); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.slr-live:active { background: rgba(240,192,64,.15); }
.slr-menu { width: 40px; height: 44px; flex-shrink: 0; border: 0; background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.slr-songs { margin: 0 8px 12px 62px; }

/* library: calm key placeholder, live as a secondary action */
.lib-key-ph { background: var(--surface-2) !important; border: 1px solid #262b38 !important; }
.lib-key-ph { color: #5d6478; }
.lib-live-btn { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
@media (max-width: 768px) {
  #homeLibList .lib-thumb, #homeLibList .lib-thumb-empty { width: 72px; height: 44px; }
}

/* practice: the floating back button must not sit on the title */
.pic-left { padding-left: 64px; }
@media (max-width: 768px) { .pic-title { font-size: 24px; white-space: normal; } }

/* setlist rows as buttons (musician: whole row expands) + tappable songs (→ Practice) */
button.slr-row { width: 100%; background: none; border: 0; color: inherit; font: inherit; text-align: left; }
.slr-chev { flex-shrink: 0; margin-right: 8px; color: var(--muted); }
.slr.is-open .slr-chev { transform: rotate(180deg); }
.sls-tap { width: 100%; min-height: 44px; padding: 0 8px; margin: 0 -8px; box-sizing: content-box; background: none; border: 0; border-radius: 10px; color: var(--text); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sls-tap:hover, .sls-tap:active { background: rgba(255,255,255,.05); }
.sls-list:has(.sls-tap) { gap: 0; }
.slr-row:focus-visible, .sls-tap:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.today-card.is-live { border-color: rgba(224,85,85,.45); }
.today-card.is-live .today-label { color: #e05555; }
.today-card.is-live .today-dot { background: #e05555; }

/* musician hub uses the same rows as the Leader */
.mus-sidebar-label { font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: normal; text-transform: none; }

/* forms (setlist editor): one label, one input, Thai date on top of the native picker */
.form-label { display: block; margin-bottom: 6px; font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--muted); }
.form-input { display: block; width: 100%; min-height: 44px; padding: 8px 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: 16px; line-height: 1.45; outline: none; }
.form-input::placeholder { color: var(--muted); }
.form-input:focus, .form-date:focus-within { border-color: rgba(240,192,64,.6); }
.form-textarea { resize: none; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.form-date { position: relative; padding-top: 0; padding-bottom: 0; display: flex; align-items: center; gap: 8px; color: var(--muted); cursor: pointer; }
.form-date-text { flex: 1; min-width: 0; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.form-date-text.is-empty { color: var(--muted); }
.form-date-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.form-date-native::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: auto; height: auto; opacity: 0; cursor: pointer; }
.form-date-clear { position: relative; z-index: 1; width: 32px; height: 32px; margin-right: -6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.form-close { position: static !important; width: 44px !important; height: 44px !important; }
.form-add-song { width: 100%; color: var(--accent); }
.form-empty { padding: 16px 0; text-align: center; font-size: 14px; color: var(--muted); }
.form-actions { display: flex; gap: 8px; padding: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); flex-shrink: 0; }
.form-actions > * { flex: 1; }
#editorTitle { font-size: 18px; }
.sl-song-item .truncate { font-size: 15px; line-height: 1.5; }
.sl-key-chip { font-family: var(--font-ui); height: 40px; min-width: 52px; font-size: 14px; border-radius: 10px; }
.sl-remove-btn { position: static !important; color: var(--muted); flex-shrink: 0; }
.sl-key-cell-name, .sl-key-cell-offset { font-family: var(--font-ui); }

/* Live (leader): font size lives in the top bar — never floats over the lyrics */
.ldr-font { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.ldr-font-btn { width: 40px; height: 36px; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--muted); font-family: var(--font-ui); font-size: 14px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ldr-font-btn + .ldr-font-btn { border-left: 1px solid var(--border); }
.ldr-font-btn:active { background: rgba(255,255,255,.08); color: var(--text); }
.vf-btn { font-family: var(--font-ui); }
button.vf-btn { padding: 0; }
button.live-metro-fab { font-family: var(--font-ui); }

/* keyboard focus: one visible ring everywhere (mouse/touch taps stay clean) */
:where(button, [role="button"], a, input, select, textarea, .slr-row, .lib-row):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Thai tone marks (ไม้เอก/สระบน) need line-height ≥ 1.45 wherever text is clipped */
.slr-title { line-height: 1.5; }
.pic-title { line-height: 1.45; }
#liveSetlistName { line-height: 1.5; }

/* library on desktop: one gold "เริ่ม Live" at a time — the row under the pointer / keyboard focus */
@media (hover: hover) and (pointer: fine) {
  .lib-live-btn { color: var(--muted); border-color: #343a4a; }
  .lib-row:hover .lib-live-btn, .lib-row:focus-within .lib-live-btn, .lib-live-btn:focus-visible { color: var(--accent); border-color: var(--accent); }
}

/* practice: section menu in the UI font; phones get the back button inside the sticky bar */
.pnav-item { font-family: var(--font-ui); letter-spacing: normal; }
.ptab-back { display: none; }
@media (max-width: 768px) {
  .practice-float-back { display: none; }
  .practice-toolbar { padding-left: 0; }
  .ptab.ptab-back { display: flex; flex: 0 0 48px; padding: 0; color: var(--muted); }
  .ptab { flex: 1 1 auto; padding: 0 8px; }
  .ptab-tools-label { display: none; }
  #practiceToolsBtn svg:first-child { display: block; }
  .pic-left { padding-left: 20px; }
}

/* keep a Thai word/phrase on one line where the browser dictionary splits it (e.g. คริสตจักร) */
.nowrap { white-space: nowrap; }

/* "เก็บทุกเพลงไว้ในเครื่อง" — icon button in both library toolbars; green check once the library is saved */
.dl-btn { min-width: 36px; justify-content: center; }
.dl-btn.is-ready { color: var(--note-color); border-color: rgba(126,217,160,.4); }
.dl-prog { font-family: var(--font-ui); font-size: 12px; font-weight: 700; color: var(--accent); white-space: nowrap; }

/* ── review fixes (UX/UI + user walkthrough, 2026-11-02) ── */
/* performance notes are cues, not errors → note colour (green) everywhere */
.b-note { color: var(--note-color); background: rgba(126,217,160,.07); border-left-color: rgba(126,217,160,.4); }
/* section chips: 44px tall (they jump the whole team) */
.sec-chip { height: 44px; padding: 0 16px; font-size: 14px; }
.sec-chip.is-armed { border-color: var(--accent); color: var(--accent); border-style: dashed; }
/* the floating section label is for followers; the leader's current line already shows its section */
#screenLive:not(.is-viewer) .sec-now { display: none !important; }
.sec-now, .song-nav-pos, .live-badge, .sp-btn, .out-sec, .out-meta, .pic-tag, .tm-section-label { font-family: var(--font-ui); letter-spacing: normal; }
.sec-now { text-transform: none; font-size: 13px; }
.sp-btn { font-size: 14px; }
.sp-btn.is-cur { border-color: var(--accent); color: var(--accent); }
.live-badge { font-size: 12px; }
/* follower offline banner: a warning, not the gold action colour */
.live-net-banner.is-viewer { background: var(--surface); border-color: #e0a040; color: var(--text); }
/* practice: chords ≥16px like the stage, section names in the section colour like Live */
.practice-content .b-chord-over, .practice-content .block.is-cur .b-chord-over { font-size: calc(16px * var(--pfsx)); min-height: calc(18px * var(--pfsx)); }
.practice-content .b-sec { color: var(--section-color); border-left-color: var(--section-color); font-family: var(--font-ui); }
.pic-tag { font-size: 13px; }
.tm-section-label { font-size: 13px; color: var(--muted); text-transform: none; }
/* leader home: full setlist names (2 lines) instead of hard truncation */
.slr-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; }
/* the row ▶ is quiet; gold stays on the today card. Desktop: gold under the pointer */
.slr-live { border-color: #3a4152; color: var(--text); }
@media (hover: hover) and (pointer: fine) { .slr-row:hover .slr-live, .slr-live:focus-visible { border-color: var(--accent); color: var(--accent); } }
/* library offline button carries a word, not only an icon */
.dl-btn .dl-word { font-family: var(--font-ui); font-size: 13px; font-weight: 600; }
/* musician hub: the song the leader is on now */
.sls-tap.is-now { background: rgba(240,192,64,.08); }
.sls-tap.is-now .sls-num { color: var(--accent); font-weight: 700; }
/* practice: the autoscroll toggle fills its tab (was a 23px target) */
.pas-toggle { align-self: stretch; padding: 0 6px; }

/* Live (leader): key button + picker — re-keying the team takes two deliberate taps */
.ldr-key { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; flex-shrink: 0; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ldr-key strong { font-size: 16px; font-weight: 700; color: var(--accent); }
.ldr-key-label { color: var(--muted); }
.ldr-key-amt { font-size: 12px; font-weight: 700; color: var(--accent); }
.ldr-key-amt:empty { display: none; }
.ldr-key svg { color: var(--muted); }
.ldr-key[aria-expanded="true"] { border-color: var(--accent); }
.live-key-pop { display: none; position: fixed; left: 50%; transform: translateX(-50%); width: min(420px, calc(100% - 16px)); z-index: 60; padding: 12px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid #343a4a; box-shadow: 0 8px 32px rgba(0,0,0,.6); }
.live-key-pop.show { display: block; }
.lkp-head { font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: var(--muted); margin: 0 2px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.5; }
.lkp-grid { margin-top: 0; }
.lkp-empty { font-family: var(--font-ui); font-size: 15px; color: var(--muted); text-align: center; padding: 12px; }
@media (max-width: 768px) { .ldr-key { padding: 0 10px; } .ldr-key-label { display: none; } }
.lkp-grid { background: none; border: 0; padding: 0; }


/* ═══════════════════════════════════════════════════════════════
   LAYOUT v2 (2026-11-02) — one container, one bar, one toolbar, one row
   • every bar and list shares the same edges: --page-w centred, --gutter at the sides
   • phones 16px edges · tablets 720 · desktop 920 · controls 44 · chips 36 · rows 64
   ═══════════════════════════════════════════════════════════════ */
:root { --gutter: 16px; --page-w: 100%; --ctl-h: 44px; --chip-h: 36px; --row-h: 64px; --bar-h: 52px;
        --edge: max(var(--gutter), calc((100% - var(--page-w)) / 2)); }
@media (min-width: 769px) { :root { --gutter: 24px; --page-w: 720px; --bar-h: 56px; } }
@media (min-width: 1024px) { :root { --page-w: 920px; } }

/* app bar: brand · tabs · offline + mode. <1024: tabs take a second row; ≥1024: one row */
.app-bar { display: grid !important; grid-template-columns: 1fr auto; grid-template-areas: "brand actions" "tabs tabs";
  align-items: center; column-gap: 12px; height: auto !important; padding: 0 var(--edge) !important;
  background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.app-brand { grid-area: brand; display: flex; align-items: center; gap: 8px; height: var(--bar-h); min-width: 0;
  font-family: var(--font-ui); font-size: 16px; font-weight: 700; color: var(--text); }
.app-actions { grid-area: actions; display: flex; align-items: center; gap: 10px; }
.app-actions .vf-btn { width: 40px; height: 40px; }
.app-tabs { grid-area: tabs; display: flex; gap: 0; padding: 0 !important; margin: 0; border: 0 !important; background: none !important; }
.app-tabs .home-tab, .app-tabs .mus-tab { flex: 1; height: 48px; padding: 0 8px; background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--muted); font-family: var(--font-ui); font-size: 15px; font-weight: 600; cursor: pointer; }
.app-tabs .home-tab.active, .app-tabs .mus-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
@media (min-width: 1024px) {
  .app-bar { grid-template-columns: 1fr auto 1fr; grid-template-areas: "brand tabs actions"; }
  .app-actions { justify-self: end; }
  .app-tabs { align-self: stretch; }
  .app-tabs .home-tab, .app-tabs .mus-tab { flex: 0 0 140px; height: var(--bar-h); }
}
/* offline button in the bar */
.app-actions .dl-btn { height: 36px; padding: 0 12px; border-radius: 99px; font-size: 13px; gap: 6px; }
@media (max-width: 420px) { .app-actions .dl-btn .dl-word { display: none; } .app-actions .dl-btn { width: 36px; padding: 0; } }

/* toolbar: [search][+ add] / count · chips · (sort | เก็บถาวร) */
.lib-search-area { display: flex; flex-direction: column; gap: 8px; padding: 12px var(--edge) 10px !important; background: var(--surface); }
.tb-row { display: flex; align-items: center; gap: 8px; }
.tb-row .search-wrap { flex: 1; min-width: 0; }
.search-input { height: var(--ctl-h) !important; font-size: 16px !important; border-radius: var(--r-md) !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.tb-add { height: var(--ctl-h); min-height: var(--ctl-h); padding: 0 16px; flex-shrink: 0; color: var(--accent); border-color: rgba(240,192,64,.6); font-size: 15px; gap: 6px; }
.search-meta { display: flex; align-items: center; gap: 8px; min-height: var(--chip-h); padding: 0 !important; flex-wrap: nowrap; overflow: visible; }
.search-count { flex-shrink: 0; font-size: 13px !important; color: var(--muted); white-space: nowrap; }
.lib-tags-inline { flex: 1; min-width: 0; gap: 6px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.lib-tag { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; height: var(--chip-h); min-height: var(--chip-h); padding: 0 14px; font-family: var(--font-ui); font-size: 13px; }
.lib-tag-n { font-size: 12px; margin-left: 0; color: var(--muted); opacity: 1; }
.tb-archive { flex-shrink: 0; color: var(--muted); }
.tb-archive.active { color: var(--accent); border-color: var(--accent); }
.sort-select { flex-shrink: 0; height: var(--chip-h); padding: 0 10px; border-radius: 99px; font-family: var(--font-ui); font-size: 13px; }

/* lists: same edges as the bars; a stable scrollbar gutter so edges don't shift */
#homeSetlists, #homeLibList, .mus-sidebar, .mus-library-list { padding: 8px var(--edge) 24px !important; scrollbar-gutter: stable; }

/* one song row: key badge · title + one meta line · (≥1024 BPM / time columns) · actions */
.lib-row { min-height: var(--row-h); padding: 10px 8px !important; margin-inline: -8px; gap: 12px !important; border-bottom: 1px solid var(--surface-2); background: none; }
.lib-key { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px;
  background: var(--surface-2); border: 1px solid #262b38; color: var(--accent); font-family: var(--font-ui); font-size: 15px; font-weight: 700; }
.lib-key.is-empty { color: var(--faint); }
.lib-info { gap: 2px; }
.lib-title { font-size: 16px !important; font-weight: 600; line-height: 1.45; }
.lib-sub { display: flex; align-items: center; flex-wrap: nowrap !important; overflow: hidden; white-space: nowrap; gap: 0 !important;
  font-family: var(--font-ui); font-size: 13px; color: var(--muted); line-height: 1.45; }
.lib-sub > span { overflow: hidden; text-overflow: ellipsis; }
.lib-sub > span + span::before { content: '·'; margin: 0 6px; }
.lib-yt { flex-shrink: 0; margin-left: 10px; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 99px; background: none; color: var(--muted); font-family: var(--font-ui); font-size: 12px; cursor: pointer; }
.lib-sub > .lib-yt:first-child { margin-left: 0; }
.lib-yt:hover { color: var(--text); border-color: var(--muted); }
.lib-cols { display: none; }
.lib-live-btn { height: 40px; padding: 0 14px; flex-shrink: 0; border-radius: var(--r-md); font-family: var(--font-ui); font-size: 14px; }
@media (max-width: 768px) { .lib-live-btn { display: none !important; } }
@media (min-width: 1024px) {
  .lib-cols { display: grid; grid-template-columns: 76px 44px; gap: 8px; flex-shrink: 0; font-family: var(--font-ui); font-size: 13px; color: var(--muted); text-align: right; }
  .lib-m-narrow { display: none; }
}

/* setlist rows: same rhythm as song rows */
.slr-row { min-height: var(--row-h); padding: 10px 8px; margin-inline: -8px; }
.sl-section { margin: 16px 0 8px; }
.today-card { margin: 8px 0 16px; }

/* Live: stage text grows with the screen (A+/A− still multiply on top); the reading column stays a readable width */
@media (min-width: 600px) { #screenLive { --fsx: calc(var(--fs) * 1.2); } }   /* iPad portrait too */
@media (min-width: 1440px) { #screenLive { --fsx: calc(var(--fs) * 1.35); } }
@media (min-width: 1024px) {
  #songBlocks { max-width: 960px; margin-inline: auto; }
}
/* Practice proportions consolidated in I-6. */
/* meta line: only the author shrinks (…); BPM / time stay whole */
.lib-sub > span { flex-shrink: 0; }
.lib-sub > span:first-child { flex-shrink: 1; min-width: 0; }

/* practice text grows on tablets/desktop too (the tools-menu size % still multiplies on top) */
.practice-content > * { --pfsx: var(--pfs); }
@media (min-width: 600px) { .practice-content > * { --pfsx: calc(var(--pfs) * 1.2); } }
@media (min-width: 1440px) { .practice-content > * { --pfsx: calc(var(--pfs) * 1.3); } }

/* ═══ LAYOUT v3 (2026-11-02) — second proportion audit: PC · tablet · mobile ═══ */
/* A1 Musician: top-tab single panel below the I-4 dashboard breakpoint. */
@media (max-width: 1099px) {

.mus-body { flex-direction: column !important; }
.mus-sidebar { width: 100% !important; border-right: 0 !important; flex: 1; min-height: 0; display: none !important; }
.mus-sidebar.mus-tab-active { display: flex !important; }
.mus-library { display: none !important; }
.mus-library.mus-tab-active { display: flex !important; }
.mus-sidebar-label { display: none !important; }
}
/* A2 the bar's old flex gap became a grid row-gap (Musician bar 10px taller) */
.app-bar { row-gap: 0 !important; }
/* A3 DaisyUI's scrollbar-color made Chrome draw 15px arrow scrollbars — back to the thin themed one */
html:root { scrollbar-color: auto; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #2a3040; border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }
/* A4 a <button> row ignores the negative margins' extra width */
button.slr-row { width: calc(100% + 16px); }

/* A5 Live on a phone held sideways: text scale needs height too; controls get compact */
@media (min-width: 600px) and (max-height: 599px) { #screenLive { --fsx: var(--fs); } }
@media (max-height: 500px) {
  .sec-chips { display: none !important; }
  #songNavStrip { height: 36px; }
  #liveTopbar { padding-top: 2px !important; padding-bottom: 2px !important; }
}
/* A6 Home sideways (wide but short): one-row bar, tighter toolbar */
@media (min-width: 640px) and (max-height: 500px) {
  .app-bar { grid-template-columns: 1fr auto 1fr; grid-template-areas: "brand tabs actions"; }
  .app-actions { justify-self: end; }
  .app-tabs .home-tab, .app-tabs .mus-tab { flex: 0 0 120px; height: var(--bar-h); }
  .lib-search-area { padding-top: 8px !important; padding-bottom: 6px !important; gap: 6px; }
}

/* B1 wide today / Live cards: a button sized to its job, songs list near the titles */
@media (min-width: 769px) {
  .today-actions .btn-primary { flex: 0 1 320px; }
  .today-card .sls-list, .slr .sls-list { max-width: 560px; }
}
/* B2 library ▶ = round quiet button like setlist rows; phones use the ⋮ sheet */
@media (max-width: 768px) { .lib-row .lib-go { display: none; } }
/* B3 Practice width consolidated in I-6. */
@media (min-width: 769px) {
  .pic-yt-inner { min-height: 0; max-height: 140px; aspect-ratio: 16 / 9; }
  .pnav-item { font-size: 14px; min-height: 40px; display: flex; align-items: center; justify-content: flex-end; }
}
/* B5 dialogs: two sizes only — S 420 (add song, add to setlist, key) · M 520 (song picker, song sheet) */
.atl-panel { width: min(420px, calc(100vw - 32px)) !important; }
#songPickerModal .modal-box { width: min(520px, calc(100vw - 32px)); max-width: none; }
@media (min-width: 769px) {
  .bottom-sheet { left: 50% !important; right: auto !important; width: 520px; margin-left: -260px; bottom: 24px !important;
    border-radius: var(--r-lg) !important; border-bottom: 1px solid var(--border) !important; }
}
/* B7 ≥1440: Live controls grow with the text */
@media (min-width: 1440px) {
  #liveSetlistName { font-size: 16px; }
  .sec-drawer { width: 220px; }
  .sp-btn { font-size: 15px; }
  .ldr-font-btn { width: 44px; height: 44px; }
}
/* B8 song strip: equal sides so the current song is always centred (prev is hidden, not removed) */
.song-nav-adj { width: 28% !important; max-width: none !important; flex: 0 0 28%; }

/* C1 Practice phone card consolidated in I-6. */
/* C3 superseded by scoped I-5 mobile layout below. */
/* C4 small phones: give setlist titles the room */
@media (max-width: 480px) { .slr-row { gap: 8px; } }

/* D1 touch targets ≥44 */
.app-actions .vf-btn, .search-clear, .add-song-close, .sheet-close, .yt-modal-close-btn { min-width: 44px; min-height: 44px; }
.app-actions .dl-btn { height: 40px; }
.lib-yt { position: relative; }
.lib-yt::after { content: ''; position: absolute; inset: -9px -4px; }
/* D2 nothing under 12px */

.sl-badge-archived, .key-btn-offset, .yt-modal-ext-btn { font-size: 12px !important; }
.sl-key-cell-offset { font-size: 12px !important; }
@media (min-width: 769px) { .bottom-sheet:not(.show) { transform: translateY(calc(100% + 48px)) !important; } }   /* floats 24px up → hide fully */
.sheet-key { color: var(--muted) !important; font-weight: 400; }   /* author · BPM · time (the key is on the badge) */

/* I-1 · 13 shared feedback — class contract in collab/LOG.md.
   Preserve DaisyUI toast width/transform/translate resets below. */
#toastWrap.wl-toast-wrap { width: auto; min-width: 0; max-width: none; transform: none; translate: none; flex-direction: column; align-items: center; position: fixed; left: 16px; right: 16px; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); justify-content: center; pointer-events: none; padding: 0; }
.wl-toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; width: 100%; max-width: 480px; min-height: 52px;
  padding: 16px 20px; border-radius: var(--r-md); background: var(--surface-2); color: var(--text);
  border-left: 3px solid var(--note-color); font: 400 15px/1.5 var(--font-ui); }
/* #toastMsg retains legacy inline background/border outside the allowed HTML scope. */
#toastMsg.wl-toast { background:var(--surface-2) !important; border:0 !important; border-left:3px solid var(--wl-toast-edge,var(--note-color)) !important; }
.wl-toast.is-err { --wl-toast-edge:#e05555; }
.wl-toast-text { flex: 1; min-width: 0; overflow-wrap:anywhere; }
.wl-toast-close { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; border-radius: var(--r-md); color: var(--muted); cursor: pointer; }
.connection-state { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: rgba(13,15,20,.94); text-align: center; padding: 24px; font: 15px/1.5 var(--font-ui); color: var(--muted); }
.connection-spinner { width: 36px; height: 36px; border: 3px solid rgba(255,255,255,.15); border-top-color: var(--accent); border-radius: 50%; animation: wl-spin .8s linear infinite; }
@keyframes wl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .connection-spinner { animation-duration: 2.4s; } }
.wl-dialog-backdrop { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(13,15,20,.78); }
.wl-dialog { width: 420px; max-width: 100%; max-height:100%; overflow:auto; display: grid; gap: 24px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); font-family: var(--font-ui); }
.wl-dialog .sheet-handle { display: none; margin: 0 auto -12px; }
.wl-dialog-head { display: flex; align-items: center; gap: 12px; }
.wl-dialog-icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-md); background: var(--surface-2); color: #e05555; }
.wl-dialog-title { flex: 1; min-width: 0; font-size: 19px; font-weight: 700; line-height: 1.5; color: var(--text); }
.wl-dialog-close { flex: none; width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 1px solid var(--border); border-radius: var(--r-md); color: var(--muted); cursor: pointer; }
.wl-dialog-body { font-size: 15px; line-height: 1.6; color: var(--muted); white-space: pre-line; }
.wl-dialog-actions { display: grid; gap: 12px; }
.wl-dialog .wl-dialog-actions > * { width: 100%; min-height: 52px; }
.btn-danger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 0; border-radius: var(--r-md);
  background: #e05555; color: #fff; font: 700 16px/1.5 var(--font-ui); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.btn-danger:active { transform: scale(.98); }
@media (max-width: 768px) {
  .wl-dialog-backdrop { align-items: flex-end; padding: 0; }
  .wl-dialog { width: 100%; border-radius: 20px 20px 0 0; border-bottom: 0; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  .wl-dialog .sheet-handle { display: block; }
}

.connection-text { max-width:420px; overflow-wrap:anywhere; }
.ms-card:focus-visible, .ms-output-actions button:focus-visible, #addSongModal button:focus-visible, .wl-toast-close:focus-visible, .wl-dialog button:focus-visible { outline:2px solid var(--section-color); outline-offset:2px; }

/* I-2 · Leader Setlist — top tabs <1100, dashboard ≥1100.
   Scoped to Home: Musician / Practice retain their shared layout. */
#screenHome { --home-edge: max(16px, calc((100% - 720px) / 2)); }
#screenHome .lib-search-area { padding: 16px var(--home-edge) 12px !important; }
#screenHome #homeSetlists, #screenHome #homeLibList { padding: 8px var(--home-edge) 24px !important; }
#screenHome .app-bar { padding-inline: var(--home-edge) !important; }
#screenHome .app-actions .dl-btn { min-width: 44px; min-height: 44px; height: 44px; }
#screenHome .slr-menu { width: 44px; min-width: 44px; }
#screenHome .slr-row { margin: 0; padding: 10px 0; gap: 8px; }
#screenHome .slr-date { min-height: 48px; border-radius: 12px; }
#screenHome .slr-day { color: var(--text); line-height: 1.45; }
#screenHome .slr-title { line-height: 1.55; }
#screenHome .slr-meta { line-height: 1.5; }
#screenHome .today-card { padding: 20px; margin: 8px 0 24px; background: var(--surface); border-color: var(--accent); }
#screenHome .today-title { line-height: 1.5; }
#screenHome .sls-item { min-height: 48px; padding: 10px 0; border-bottom: 1px solid var(--border); }
#screenHome .sls-title { white-space: normal; overflow-wrap: anywhere; }
#screenHome .today-actions .btn-primary { flex: 1; }
#screenHome .tb-add { color: var(--text); border-color: #343a4a; min-height: 44px; }
#screenHome .lib-tag, #screenHome .sort-select { min-height: 44px; }
#screenHome .detail-pane[hidden] { display: none; }
@media (min-width: 769px) and (max-width: 1099px) {
  #screenHome .today-actions .btn-primary { flex: 0 1 320px; }
}
@media (min-width: 1100px) {
  #screenHome.active { display: grid; grid-template-columns: 232px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  #screenHome { --home-edge: 24px; }
  #screenHome .app-bar.home-topbar { grid-column: 1; grid-row: 1 / -1; display: flex !important; flex-direction: column; align-items: stretch; gap: 24px; padding: 24px 16px !important; border-bottom: 0; border-right: 1px solid var(--border); min-height: 0; }
  #screenHome .app-brand { height: auto; min-height: 44px; padding-inline: 12px; }
  #screenHome .app-tabs { flex-direction: column; align-self: stretch; gap: 8px; }
  #screenHome .app-tabs .home-tab { flex: none; width: 100%; height: 48px; padding: 10px 12px; border: 0; border-radius: 0 12px 12px 0; text-align: left; }
  #screenHome .app-tabs .home-tab.active { color: var(--text); background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
  #screenHome .app-actions { margin-top: auto; display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  #screenHome .app-actions .dl-btn { width: 100%; justify-content: flex-start; border-radius: 12px; }
  #screenHome .app-actions .vf-btn { width: 100%; height: 48px; display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 0 12px; border-radius: 12px; }
  #screenHome .app-actions .vf-btn::after { content: 'เปลี่ยนโหมด'; font: 15px/1.5 var(--font-ui); }
  #screenHome #homeLiveBanner { grid-column: 2; grid-row: 1; margin: 16px 24px; }
  #screenHome .home-panel { grid-column: 2; grid-row: 2; min-width: 0; }
  #screenHome #panelSetlists { display: grid; grid-template-columns: 440px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  #screenHome #panelSetlists > .lib-search-area { grid-column: 1; grid-row: 1; min-width: 0; border-right: 1px solid var(--border); padding-top: 24px !important; }
  #screenHome #homeSetlists { grid-column: 1; grid-row: 2; min-height: 0; min-width: 0; overflow-y: auto; border-right: 1px solid var(--border); }
  #screenHome #panelSetlists:has(> .detail-pane[hidden]) { grid-template-columns: minmax(0, 1fr); }
  #screenHome #panelSetlists:has(> .detail-pane[hidden]) > .lib-search-area,
  #screenHome #panelSetlists:has(> .detail-pane[hidden]) > #homeSetlists { border-right: 0; }
  #screenHome #homeSetlists > .today-card { display: none; }
  #screenHome .slr.is-selected { background: var(--surface-2); border-radius: 0; box-shadow: inset 3px 0 0 var(--accent); }
  #screenHome .slr-row { padding-inline: 12px; }
  #screenHome .detail-pane { grid-column: 2; grid-row: 1 / -1; min-height: 0; min-width: 0; overflow-y: auto; padding: 32px; }
  #screenHome .detail-kicker { color: var(--accent); font-size: 14px; margin: 0 0 12px; line-height: 1.5; }
  #screenHome .detail-title { font-size: 28px; line-height: 1.5; font-weight: 700; overflow-wrap: anywhere; margin: 0 0 12px; }
  #screenHome .detail-meta, #screenHome .detail-empty { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0 0 8px; }
  #screenHome .detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0; }
  #screenHome .detail-actions > button { flex: none; min-height: 48px; }
  #screenHome .detail-h { margin: 24px 0 8px; font-size: 16px; line-height: 1.5; font-weight: 700; }
  #screenHome .detail-pane .sls-list { max-width: none; margin-top: 8px; gap: 0; }
  #screenHome .detail-pane .sls-item { min-height: 56px; }
  #screenHome .detail-notes { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); font-size: 15px; line-height: 1.6; }
  #screenHome #panelLibrary { width: 100%; }
  #screenHome #homeLibList { min-height: 0; }
}
@media (min-width: 1440px) {
  #screenHome #panelSetlists { grid-template-columns: minmax(480px, 520px) minmax(0, 1fr); }
  #screenHome .detail-pane > *, #screenHome .detail-pane .sls-list { max-width: 760px; }   /* Claude: .sls-list max-width:none above outranks "> *" */
}

/* I-3 · Leader library: keep the I-2 pane rhythm; all overrides scoped to Home. */
#screenHome #panelLibrary { min-width: 0; }
#screenHome #homeLibList .lib-row { cursor: pointer; min-height: 68px; }
#screenHome #homeLibList .lib-title { line-height: 1.55; }
#screenHome #homeLibList .lib-yt { min-height: 44px; min-width: 44px; }
#screenHome #homeLibList .lib-go,
#screenHome #homeLibList .lib-menu-btn { min-height: 44px; min-width: 44px; }
#screenHome #homeLibList .lib-sub { min-width: 0; }
@media (min-width: 1100px) {
  #screenHome #panelLibrary { display: grid; width: 100%; grid-template-columns: 440px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  #screenHome #panelLibrary > .lib-search-area { grid-column: 1; grid-row: 1; min-width: 0; border-right: 1px solid var(--border); padding-top: 24px !important; }
  #screenHome #homeLibList { grid-column: 1; grid-row: 2; min-width: 0; min-height: 0; overflow-y: auto; border-right: 1px solid var(--border); }
  #screenHome #homeLibList .lib-row.is-selected { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); border-radius: 0; }
  #screenHome #homeLibList .lib-cols { display: none; }
  #screenHome #homeLibList .lib-m-narrow { display: inline; }
  #screenHome #songDetail > * { max-width: 760px; }
  #screenHome #songDetail .detail-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
  #screenHome #songDetail .detail-meta { margin: 0; }
  #screenHome #songDetail .lib-yt { min-width: 44px; min-height: 44px; margin: 0; }
  #screenHome #songDetail .detail-actions { gap: 8px; }
  #screenHome #songDetail .detail-actions > button { min-width: 44px; min-height: 48px; }
  #screenHome #songDetail .detail-more { width: 48px; padding: 0; }
  #screenHome #songDetail .song-preview { --fsx: 1; max-width: 760px; padding-top: 8px; border-top: 1px solid var(--border); }
  #screenHome #songDetail .song-preview .block { opacity: 1; padding: 8px 0; border: 0; background: none; transition: none; }
  #screenHome #songDetail .song-preview .b-sec { font: 600 14px/1.5 var(--font-ui); color: var(--section-color); letter-spacing: 0; text-transform: none; margin: 16px 0 8px; }
  #screenHome #songDetail .song-preview .b-chord-line { line-height: 1.5; }
  #screenHome #songDetail .song-preview .b-chord-over,
  #screenHome #songDetail .song-preview .b-chord-only { color: var(--accent); font: 600 16px/1.5 'IBM Plex Mono', monospace; min-height: 24px; }
  #screenHome #songDetail .song-preview .b-lyric-seg,
  #screenHome #songDetail .song-preview .b-lyric-only { color: var(--text); font: 400 17px/1.65 var(--font-ui); }
  #screenHome #songDetail .song-preview .b-note { color: var(--note-color); font: 400 14px/1.6 var(--font-ui); }
  #screenHome #songDetail .song-preview .b-cmt { color: var(--muted); font: 400 14px/1.6 var(--font-ui); }
}
@media (min-width: 1440px) {
  #screenHome #panelLibrary { grid-template-columns: minmax(480px, 520px) minmax(0, 1fr); }
}
/* Song commands: one primary action, quiet action rows, danger separated below. */
#songBottomSheet { left: 0; right: 0; max-width: 560px; max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0; visibility: hidden; }
#songBottomSheet.show { visibility: visible; }
#songBottomSheet .sheet-handle { margin: 12px auto 20px; }
#songBottomSheet .sheet-header { padding: 0 20px 20px; align-items: flex-start; }
#songBottomSheet .sheet-thumb { width: 44px; height: 44px; border-radius: 12px; }
#songBottomSheet .sheet-title { color: var(--text); font-size: 18px; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; }
#songBottomSheet .sheet-key { font: 400 13px/1.55 var(--font-ui); }
#songBottomSheet .sheet-close { width: 44px; height: 44px; border-radius: 12px; }
#songBottomSheet .sheet-command-group { margin: 24px 20px 0; }
#songBottomSheet .sheet-group-label { margin: 0 0 8px; color: var(--muted); font-size: 13px; line-height: 1.5; }
#songBottomSheet .sheet-quick-actions,
#songBottomSheet .sheet-list-actions { display: flex; flex-direction: column; gap: 0; padding: 0; }
#songBottomSheet .sheet-quick-btn,
#songBottomSheet .sheet-action-item { flex: none; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; min-height: 56px; padding: 10px 12px; font: 400 16px/1.5 var(--font-ui); border: 0; border-radius: 0; background: none; color: var(--text); }
#songBottomSheet .sheet-quick-btn + .sheet-quick-btn { border-bottom: 1px solid var(--border); }
#songBottomSheet .sheet-quick-btn svg,
#songBottomSheet .sheet-action-item svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--muted); }
#songBottomSheet #sheetBtnLive { min-height: 52px; margin-bottom: 8px; background: var(--accent); color: var(--bg); border-radius: 12px; font-weight: 700; justify-content: center; }
#songBottomSheet #sheetBtnLive svg { color: currentColor; }
#songBottomSheet .sheet-danger-zone { margin: 16px 20px 0; padding-top: 8px; border-top: 1px solid var(--border); }
#songBottomSheet .sheet-action-danger,
#songBottomSheet .sheet-action-danger svg { color: var(--live, #e05555); }
#songBottomSheet button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#songBottomSheet .sheet-quick-btn:not(#sheetBtnLive):hover,
#songBottomSheet .sheet-action-item:hover { background: var(--surface-2); }
@media (prefers-reduced-motion: reduce) {
  #songBottomSheet, #songSheetOverlay { transition: none; }
}
/* I-3 command rows use the same 36px icon well as the approved sheet pattern. */
#songBottomSheet .sheet-quick-btn:not(#sheetBtnLive) svg,
#songBottomSheet #sheetBtnEdit svg { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--surface-2); }
#songBottomSheet .sheet-quick-btn:not(#sheetBtnLive)::after,
#songBottomSheet #sheetBtnEdit::after { content: ''; width: 7px; height: 7px; margin-left: auto; border-top: 1.5px solid var(--muted); border-right: 1.5px solid var(--muted); transform: rotate(45deg); flex-shrink: 0; }

/* I-4 · Musician hub: existing JS owns selection and preview; CSS owns layout. */
#screenMusician { --mus-edge: max(16px, calc((100% - 720px) / 2)); }
#screenMusician .app-bar { padding-inline: var(--mus-edge) !important; }
#screenMusician .app-actions button { min-width: 44px; min-height: 44px; height: 44px; }
#screenMusician .mus-sidebar, #screenMusician .mus-library-list { padding: 8px var(--mus-edge) 24px !important; }
#screenMusician .lib-search-area { padding: 16px var(--mus-edge) 12px !important; }
#screenMusician .mus-sidebar-label { display: none; }
#screenMusician #musDetail[hidden] { display: none; }
#screenMusician .today-card { padding: 20px; margin: 8px 0 24px; background: var(--surface); }
#screenMusician .today-card.is-live { border-color: #e05555; }
#screenMusician .today-title { line-height: 1.5; }
#screenMusician .today-live { min-height: 52px; flex: 1; }
#screenMusician .slr-row { min-height: 64px; margin: 0; padding: 10px 0; gap: 8px; }
#screenMusician .slr-title, #screenMusician .lib-title { line-height: 1.55; }
#screenMusician .slr-meta { line-height: 1.5; }
#screenMusician .sls-tap { box-sizing: border-box; width: calc(100% + 16px); min-height: 48px; padding: 8px; }
#screenMusician .sls-title { white-space: normal; overflow-wrap: anywhere; }
#screenMusician .lib-row { cursor: pointer; min-height: 68px; }
#screenMusician .lib-tag, #screenMusician .lib-yt { min-width: 44px; min-height: 44px; }
#screenMusician .lib-yt::after { inset: 0; }
#screenMusician button:focus-visible, #screenMusician .lib-row:focus-visible { outline: 2px solid var(--section-color); outline-offset: -2px; }
/* A selected row uses surface-2 too: retain the video button's visible outline. */
#screenHome #homeLibList .lib-row.is-selected .lib-yt,
#screenMusician #musLibraryList .lib-row.is-selected .lib-yt { border-color: #4a4f60; }
@media (max-width: 1099px) {
  #screenMusician #musDetail { display: none; }
}
@media (min-width: 769px) and (max-width: 1099px) {
  #screenMusician .today-live { flex: 0 1 320px; }
}
@media (min-width: 1100px) {
  #screenMusician.active { display: grid; grid-template-columns: 232px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  #screenMusician { --mus-edge: 24px; }
  #screenMusician .app-bar.mus-topbar { grid-column: 1; grid-row: 1; display: flex !important; flex-direction: column; align-items: stretch; gap: 24px; padding: 24px 16px !important; border-bottom: 0; border-right: 1px solid var(--border); min-height: 0; }
  #screenMusician .app-brand { height: auto; min-height: 44px; padding-inline: 12px; }
  #screenMusician .app-tabs { flex-direction: column; align-self: stretch; gap: 8px; }
  #screenMusician .app-tabs .mus-tab { flex: none; width: 100%; height: 48px; padding: 10px 12px; border: 0; border-radius: 0 12px 12px 0; text-align: left; }
  #screenMusician .app-tabs .mus-tab.active { color: var(--text); background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
  #screenMusician .app-actions { margin-top: auto; display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  #screenMusician .app-actions .dl-btn { width: 100%; justify-content: flex-start; border-radius: 12px; }
  #screenMusician .app-actions .vf-btn { width: 100%; height: 48px; display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 0 12px; border-radius: 12px; }
  #screenMusician .app-actions .vf-btn::after { content: 'เปลี่ยนโหมด'; font: 15px/1.5 var(--font-ui); }
  #screenMusician .mus-body { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: 440px minmax(0, 1fr); min-width: 0; min-height: 0; }
  #screenMusician .mus-sidebar, #screenMusician .mus-library { grid-column: 1; grid-row: 1; display: none; width: auto; min-width: 0; min-height: 0; border-right: 1px solid var(--border); }
  #screenMusician .mus-sidebar.mus-tab-active, #screenMusician .mus-library.mus-tab-active { display: flex; }
  #screenMusician .mus-sidebar { padding-top: 24px !important; }
  #screenMusician .mus-library > .lib-search-area { padding-top: 24px !important; }
  #screenMusician #musLibraryList { min-height: 0; overflow-y: auto; }
  #screenMusician #musLibraryList .lib-cols { display: none; }
  #screenMusician #musLibraryList .lib-m-narrow { display: inline; }
  #screenMusician .sls-tap.is-selected, #screenMusician #musLibraryList .lib-row.is-selected { background: var(--surface-2); border-radius: 0; box-shadow: inset 3px 0 0 var(--accent); }
  #screenMusician .sls-tap.is-selected:hover, #screenMusician #musLibraryList .lib-row.is-selected:hover { background: var(--surface-2) !important; }
  #screenMusician #musDetail { grid-column: 2; grid-row: 1; min-height: 0; min-width: 0; overflow-y: auto; padding: 32px; overscroll-behavior: contain; }
  #screenMusician #musDetail .detail-kicker { color: var(--muted); font-size: 14px; margin: 0 0 12px; line-height: 1.5; }
  #screenMusician #musDetail .detail-title { font-size: 28px; line-height: 1.5; font-weight: 700; overflow-wrap: anywhere; margin: 0 0 12px; }
  #screenMusician #musDetail .detail-meta, #screenMusician #musDetail .detail-empty { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0 0 8px; }
  #screenMusician #musDetail .detail-actions { display: flex; flex-wrap: wrap; margin: 24px 0; }
  #screenMusician #musDetail .detail-actions > button { flex: none; }
  #screenMusician #musDetail > * { max-width: 760px; }
  #screenMusician #musDetail .detail-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
  #screenMusician #musDetail .detail-meta { margin: 0; }
  #screenMusician #musDetail .lib-yt { min-width: 44px; min-height: 44px; margin: 0; }
  #screenMusician #musDetail .detail-actions { gap: 8px; }
  #screenMusician #musDetail .detail-actions > button { min-width: 44px; min-height: 48px; }
  #screenMusician #musDetail .song-preview { --fsx: 1; max-width: 760px; padding-top: 8px; border-top: 1px solid var(--border); }
  #screenMusician #musDetail .song-preview .block { opacity: 1; padding: 8px 0; border: 0; background: none; transition: none; }
  #screenMusician #musDetail .song-preview .b-sec { font: 600 14px/1.5 var(--font-ui); color: var(--section-color); letter-spacing: 0; text-transform: none; margin: 16px 0 8px; }
  #screenMusician #musDetail .song-preview .b-chord-line { line-height: 1.5; }
  #screenMusician #musDetail .song-preview .b-chord-over,
  #screenMusician #musDetail .song-preview .b-chord-only { color: var(--accent); font: 600 16px/1.5 'IBM Plex Mono', monospace; min-height: 24px; }
  #screenMusician #musDetail .song-preview .b-lyric-seg,
  #screenMusician #musDetail .song-preview .b-lyric-only { color: var(--text); font: 400 17px/1.65 var(--font-ui); }
  #screenMusician #musDetail .song-preview .b-note { color: var(--note-color); font: 400 14px/1.6 var(--font-ui); }
  #screenMusician #musDetail .song-preview .b-cmt { color: var(--muted); font: 400 14px/1.6 var(--font-ui); }
}
@media (min-width: 1440px) {
  #screenMusician .mus-body { grid-template-columns: minmax(480px, 520px) minmax(0, 1fr); }
}
/* I-5 — Setlist editor and song picker. Scoped to preserve shared Live grids. */
#editorOverlay { padding: 0; }
#editorOverlay .editor-modal { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; box-shadow: none; }
#editorOverlay .sl-editor-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
#editorOverlay #editorTitle { font-size: 21px; line-height: 1.5; }
#editorOverlay .sl-editor-body { flex: 1; min-height: 0; overflow: auto; padding: 20px 16px; scroll-padding-block: 16px; }
#editorOverlay .sl-editor-grid { display: grid; gap: 24px; max-width: 1180px; margin-inline: auto; }
#editorOverlay .sl-editor-fields { display: grid; align-content: start; gap: 16px; min-width: 0; }
#editorOverlay .sl-editor-songs { min-width: 0; }
#editorOverlay .sl-editor-section-title { margin: 0; font: 600 16px/1.5 var(--font-ui); color: var(--text); }
#editorOverlay .sl-editor-song-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#editorOverlay .form-add-song { width: auto; min-height: 44px; color: var(--text); flex-shrink: 0; }
#editorOverlay .sl-editor-hint, #songPickerModal .sl-editor-hint { margin: 8px 0 12px; color: var(--muted); font: 13px/1.5 var(--font-ui); }
#editorOverlay .form-input { min-height: 48px; font-size: 16px; }
#editorOverlay .form-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px; }
#editorOverlay .form-textarea { min-height: 88px; resize: vertical; }
#editorOverlay .form-date { padding-right: 4px; gap: 6px; }
#editorOverlay .form-date-clear { width: 44px; height: 44px; margin: 0; }
#editorOverlay .form-date-native { font-size: 16px; }
#editorOverlay .form-actions { justify-content: flex-end; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
#editorOverlay .form-actions > button { min-height: 48px; }
#editorOverlay #slSongList { display: grid; gap: 8px; margin: 0; padding-bottom: 12px; }
#editorOverlay .sl-song-wrap { margin: 0; min-width: 0; }
#editorOverlay .sl-song-item { padding: 8px 4px; gap: 4px; min-height: 64px; border-radius: 12px; }
#editorOverlay .sl-song-item .truncate { font: 600 16px/1.5 var(--font-ui); white-space: normal; overflow-wrap: anywhere; }
#editorOverlay .drag-handle { display: flex; align-items: center; justify-content: center; width: 44px; min-height: 44px; padding: 0; flex-shrink: 0; }
#editorOverlay .sl-remove-btn { width: 44px; height: 44px; border-radius: 12px; background: transparent; border-color: transparent; }
#editorOverlay .sl-remove-btn:hover { color: var(--danger, #e05555); border-color: var(--border); }
#editorOverlay .sl-key-wrap { position: relative; flex-shrink: 0; }
#editorOverlay .sl-key-wrap:has(.sl-key-pop) { z-index: 5; }
#editorOverlay .sl-key-chip { min-width: 52px; height: 44px; border-radius: 12px; font: 600 15px/1.5 var(--font-ui); color: var(--accent); }
#editorOverlay .sl-key-chip[aria-expanded="true"] { border-color: var(--accent); }
#editorOverlay .sl-key-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 6; width: min(280px, calc(100vw - 32px)); padding: 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); }
#editorOverlay .sl-key-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 13px/1.5 var(--font-ui); }
#editorOverlay .sl-key-pop-head b { color: var(--accent); }
#editorOverlay .sl-key-pop-close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border); border-radius: 12px; background: transparent; color: var(--muted); flex-shrink: 0; cursor: pointer; }
#editorOverlay .sl-key-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 4px; margin: 8px 0 0; padding: 0; border: 0; background: transparent; }
#editorOverlay .sl-key-cell { height: 56px; min-width: 44px; padding: 4px; background: var(--surface-2); border-color: var(--border); color: var(--text); }
#editorOverlay .sl-key-cell-name { font: 600 18px/1.45 var(--font-ui); }
#editorOverlay .sl-key-cell-offset { margin: 0; font-family: var(--font-ui); line-height: 1.45; color: var(--muted); }
#editorOverlay .sl-key-cell.active { background: var(--surface-2); border-color: var(--accent); }
#editorOverlay .sl-key-cell.active .sl-key-cell-name, #editorOverlay .sl-key-cell.active .sl-key-cell-offset { color: var(--accent); }
#editorOverlay .sl-song-wrap:nth-child(n+4):last-child .sl-key-pop { top: auto; bottom: calc(100% + 8px); }
#songPickerModal .sl-picker-box { display: flex; flex-direction: column; padding: 0; width: min(520px,calc(100vw - 32px)); max-width: none; max-height: min(720px, calc(100dvh - 32px)); border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); }
#songPickerModal .sl-picker-head { padding: 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
#songPickerModal .sl-picker-title { margin-bottom: 12px; font: 600 19px/1.5 var(--font-ui); }
#songPickerModal .form-input { min-height: 48px; font-size: 16px; }
#songPickerModal .sl-picker-list { flex: 1; min-height: 0; overflow: auto; }
#songPickerModal .picker-row { width: 100%; min-height: 64px; padding: 12px 16px; gap: 12px; background: transparent; color: var(--text); text-align: left; font: 16px/1.5 var(--font-ui); border: 0; border-bottom: 1px solid var(--border); border-radius: 0; }
#songPickerModal .picker-row:hover, #songPickerModal .picker-row:focus-visible { background: var(--surface-2); }
#songPickerModal .lib-key { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: var(--surface-2); color: var(--accent); font: 600 16px/1.5 var(--font-ui); }
#songPickerModal .lib-key.is-empty { color: var(--muted); }
#songPickerModal .picker-title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
#songPickerModal .picker-state { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; color: var(--muted); font-size: 13px; }
#songPickerModal .picker-row.is-in { color: var(--muted); }
#songPickerModal .picker-row.is-in .picker-state { color: var(--note-color); }
#songPickerModal .sl-picker-foot { padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); flex-shrink: 0; }
#songPickerModal .sl-picker-foot .sl-editor-hint { margin-top: 0; }
#songPickerModal .sl-picker-foot button { width: 100%; min-height: 44px; }
@media (min-width: 769px) {
  #editorOverlay { padding: 24px; }
  #editorOverlay .editor-modal { height: min(860px, calc(100dvh - 48px)); max-height: calc(100dvh - 48px); width: min(1240px,100%); border: 1px solid var(--border); border-radius: 16px; }
  #editorOverlay .sl-editor-body { padding: 24px; }
  #editorOverlay .sl-editor-head { padding-inline: 24px; }
  #editorOverlay .form-actions { padding-inline: 24px; }
  #editorOverlay .form-actions > button { flex: 0 0 auto; min-width: 140px; }
}
@media (min-width: 1100px) {
  #editorOverlay .sl-editor-grid { grid-template-columns: 400px minmax(0,1fr); gap: 40px; }
}
@media (max-width: 480px) {
  /* Anchor to the row so even narrow phones keep all four columns on screen. */
  #editorOverlay .sl-song-item { position: relative; }
  #editorOverlay .sl-key-wrap { position: static; }
  #editorOverlay .sl-song-item:has(.sl-key-pop) { z-index: 5; }
  #editorOverlay .sl-key-pop { right: 4px; width: min(280px, calc(100vw - 48px)); }
}

/* I-6 · 09 Practice. UI only; popup coordinates and --pfs/--pfsx stay with JS.
   Screen media keeps these proportions out of the existing print stylesheet. */
@media screen {
  #practiceOverlay { background: var(--bg); font-family: var(--font-ui); transition: none; }
  #practiceOverlay .practice-header {
    display: flex; align-items: center; gap: 12px; flex-shrink: 0;
    min-height: 68px; padding: 8px max(16px, calc((100vw - 1000px) / 2));
    padding-top: max(8px, env(safe-area-inset-top, 0px));
    background: var(--surface); border-bottom: 1px solid var(--border);
  }
  #practiceOverlay .practice-header h1 { margin: 0; font: 700 19px/1.5 var(--font-ui); }
  #practiceOverlay .practice-float-back {
    position: static; display: flex; flex: 0 0 44px; width: 44px; height: 44px;
    border-radius: 12px; background: var(--surface); border-color: var(--border);
    color: var(--text); backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  #practiceOverlay .practice-body { min-height: 0; }
  #practiceOverlay .practice-scroll { overscroll-behavior: contain; scroll-padding-top: 76px; }
  #practiceInfoCard {
    max-width: 1000px; margin: 20px auto 0; border: 0; border-radius: 0;
    background: none; overflow: visible; align-items: flex-start;
  }
  #practiceInfoCard .pic-left { padding: 0; gap: 6px; align-items: flex-start; text-align: left; }
  #practiceInfoCard .pic-title { font-size: 24px; line-height: 1.5; color: var(--text); white-space: normal; overflow-wrap: anywhere; }
  #practiceInfoCard .pic-author { font-size: 14px; line-height: 1.5; color: var(--muted); justify-content: flex-start; }
  #practiceInfoCard .pic-tags { justify-content: flex-start; }
  #practiceInfoCard .pic-tag { font: 400 12px/1.5 var(--font-ui); color: var(--muted); background: var(--surface-2); border-color: var(--border); }
  #practiceInfoCard .pic-meta { justify-content: flex-start; gap: 6px 12px; }
  #practiceInfoCard .pic-meta-item { font-size: 13px; line-height: 1.5; font-weight: 400; color: var(--muted); }
  #practiceInfoCard .pic-meta-item svg { width: 16px; height: 16px; color: var(--muted); }
  #practiceInfoCard .pic-meta-sep { color: var(--muted); }
  #practiceInfoCard #picKey { color: var(--accent); }
  #practiceInfoCard .pic-yt { width: 240px; padding: 0; margin-left: 24px; border: 0; }
  #practiceInfoCard .pic-yt-inner { min-height: 0; max-height: none; aspect-ratio: 16 / 9; border-radius: 12px; }
  #practiceInfoCard .pic-yt-play { min-width: 44px; min-height: 44px; background: var(--surface); color: var(--text); }
  #practiceInfoCard .pic-yt-lazy:hover .pic-yt-play { transform: none; background: var(--surface-2); }
  #practiceOverlay .practice-toolbar {
    height: auto; min-height: 64px; padding: 8px 16px; margin-top: 16px;
    background: var(--bg); border-color: var(--border); box-shadow: none;
  }
  #practiceOverlay .practice-toolbar-inner { max-width: 1000px; gap: 8px; align-items: center; flex-wrap: wrap; }
  #practiceOverlay .ptab {
    flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 8px 12px;
    border: 1px solid var(--border); border-radius: 12px; gap: 6px;
    background: var(--surface); color: var(--text); font: 400 14px/1.5 var(--font-ui);
  }
  #practiceOverlay .ptab.ptab-back { display: none; }
  #practiceOverlay .ptab-key-text strong { color: var(--accent); font-size: 16px; }
  #practiceOverlay .ptab-key-sub { color: var(--muted); }
  #practiceOverlay .ptab-sub { font-family: var(--font-ui); }
  #practiceOverlay .ptab-as { padding: 0; gap: 0; }
  #practiceOverlay .pas-toggle { min-width: 44px; min-height: 44px; padding: 8px 12px; font: 400 14px/1.5 var(--font-ui); color: var(--text); }
  #practiceOverlay .pas-speeds { padding: 0; gap: 0; margin: 0 4px 0 0; background: none; border: 0; }
  #practiceOverlay .pas-speed { min-width: 44px; height: 44px; padding: 4px 8px; color: var(--muted); font: 400 12px/1.5 var(--font-ui); }
  #practiceOverlay .pas-speed.active { background: var(--surface-2); color: var(--accent); }
  #practiceOverlay .ptab-metro-label, #practiceOverlay .ptab-tools-label { display: inline; }
  #practiceOverlay .practice-local-note { max-width: 1000px; margin: 8px auto 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
  #practiceOverlay .practice-main { max-width: 1000px; min-height: 0; gap: 24px; padding-top: 24px; }
  #practiceNav { width: 140px; top: 76px; height: calc(100dvh - 160px); padding: 0; border-color: var(--border); }
  #practiceNav:empty { display: none; }
  #practiceNav .pnav-item { min-height: 44px; padding: 10px 12px; font: 400 14px/1.5 var(--font-ui); color: var(--muted); text-align: left; justify-content: flex-start; }
  #practiceNav .pnav-item.active { color: var(--accent); border-right-color: var(--accent); background: var(--surface-2); }
  #practiceContent { padding: 0 0 calc(120px + env(safe-area-inset-bottom, 0px)); }
  /* Practice has no distance fade/scale: retain full-song reading at every line. */
  #practiceContent .block { transform: none; filter: none; }
  #practiceContent .b-sec { color: var(--section-color); line-height: 1.5; letter-spacing: normal; }
  #practiceContent .b-note { color: var(--note-color); line-height: 1.5; }
  #practiceOverlay button:focus-visible { outline: 2px solid var(--section-color); outline-offset: 2px; }
  #practiceKeyPicker, #practiceToolsMenu, #practiceMetroPop {
    box-sizing: border-box; background: var(--surface); border-color: var(--border);
    border-radius: 16px; padding: 12px; box-shadow: none; animation: none;
    max-width: calc(100vw - 16px); max-height: calc(100dvh - 160px); overflow-y: auto;
    font-family: var(--font-ui);
  }
  /* Widths match practice.js's 308 / 292 positioning calculations. */
  #practiceKeyPicker { width: 308px; }
  #practiceKeyPicker .key-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  #practiceKeyPicker .key-btn { width: 100%; min-width: 44px; height: 60px; background: var(--surface-2); border-color: var(--border); color: var(--text); }
  #practiceKeyPicker .key-btn.active { border-color: var(--accent); background: var(--surface-2); }
  #practiceKeyPicker .key-btn-name { color: var(--text); font: 700 18px/1.5 var(--font-ui); }
  #practiceKeyPicker .key-btn.active .key-btn-name { color: var(--accent); }
  #practiceKeyPicker .key-btn-offset { margin-top: 0; color: var(--muted); font: 400 12px/1.5 var(--font-ui); }
  #practiceToolsMenu { width: 292px; min-width: 0; }
  #practiceToolsMenu .tm-section-label { padding: 4px 0 8px; color: var(--muted); font: 400 13px/1.5 var(--font-ui); text-transform: none; letter-spacing: normal; }
  #practiceToolsMenu .tm-row { gap: 8px; padding: 0; }
  #practiceToolsMenu .tm-btn { min-width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); border-color: var(--border); color: var(--text); font-family: var(--font-ui); }
  #practiceToolsMenu .tm-btn.tm-active { color: var(--accent); border-color: var(--accent); }
  #practiceToolsMenu .tm-font-val { font: 600 15px/1.5 var(--font-ui); color: var(--text); }
  #practiceToolsMenu .tm-divider { background: var(--border); margin: 12px 0; }
  #practiceToolsMenu .tm-switch-label { color: var(--text); font: 400 14px/1.5 var(--font-ui); }
  #practiceToolsMenu .tm-switch { width: 48px; height: 44px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
  #practiceToolsMenu .tm-switch-thumb { top: 12px; left: 5px; background: var(--muted); }
  #practiceToolsMenu .tm-switch.tm-switch-on { border-color: var(--accent); }
  #practiceToolsMenu .tm-switch-on .tm-switch-thumb { background: var(--accent); }
  #practiceToolsMenu .tm-pdf-btn { min-height: 44px; height: auto; padding: 8px; background: var(--surface-2); border-color: var(--border); color: var(--text); }
  #practiceMetroPop { width: 292px; }
  #practiceMetroPop .metro-adj { width: 44px; height: 44px; flex-shrink: 0; background: var(--surface-2); border-color: var(--border); border-radius: 12px; }
  #practiceMetroPop .metro-bpm-val { font: 600 28px/1.5 var(--font-ui); color: var(--text); }
  #practiceMetroPop .metro-bpm-unit { font: 400 12px/1.5 var(--font-ui); color: var(--muted); }
  #practiceMetroPop .metro-start { min-height: 48px; border-radius: 12px; background: var(--surface-2); border-color: var(--border); color: var(--text); }
  #practiceMetroPop .metro-start.mp-running { color: var(--accent); border-color: var(--accent); }
  #practiceOverlay .pyt-player { animation: none; box-shadow: none; width: min(280px, calc(100vw - 32px)); }
  #practiceOverlay .pyt-float { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  #practiceOverlay .pyt-bar { background: var(--surface); padding: 4px; }
  #practiceOverlay .pyt-bar-title { font: 400 12px/1.5 var(--font-ui); color: var(--text); }
  #practiceOverlay .pyt-bar-btn { width: 44px; height: 44px; color: var(--text); background: var(--surface-2); }
  #practiceOverlay .pyt-pill { min-height: 44px; font: 400 13px/1.5 var(--font-ui); letter-spacing: normal; box-shadow: none; }
  #practiceOverlay .pyt-pill:hover, #practiceOverlay .pyt-pill:active { transform: none; }
}
@media screen and (max-width: 1099px) {
  #practiceInfoCard, #practiceOverlay .practice-local-note, #practiceOverlay .practice-main { margin-left: 16px; margin-right: 16px; }
}
@media screen and (max-width: 768px) {
  #practiceInfoCard { margin-top: 16px; }
  #practiceInfoCard .pic-title { font-size: 21px; }
  #practiceInfoCard .pic-author, #practiceInfoCard .pic-tags { display: none; }
  #practiceOverlay .practice-toolbar-inner { flex-wrap: nowrap; gap: 6px; }
  #practiceOverlay .ptab { padding: 8px; }
  #practiceOverlay .ptab-as { flex: 1 1 auto; padding: 0; }
  #practiceOverlay .pas-toggle { width: 100%; justify-content: center; padding: 8px; }
  #practiceOverlay .ptab-key-sub, #practiceOverlay .ptab-chevron,
  #practiceOverlay .ptab-metro-label, #practiceOverlay .ptab-tools-label { display: none; }
  #practiceOverlay .practice-main { padding-top: 16px; }
}
@media screen and (min-width: 769px) {
  #practiceInfoCard .pic-yt-inner.pic-yt-floating { width: 300px; height: auto; bottom: 20px; right: 20px; border-color: var(--border); box-shadow: none; }
  #practiceInfoCard .pic-yt-inner.pic-yt-floating .pic-yt-float-close { width: 44px; height: 44px; }
}
@media screen and (max-height: 500px) {
  #practiceOverlay .practice-header {
    min-height: 48px; padding-top: max(2px, env(safe-area-inset-top, 0px)); padding-bottom: 2px;
  }
  #practiceOverlay .practice-header h1 { font-size: 16px; line-height: 1.4; }
  #practiceOverlay .practice-float-back { width: 40px; height: 40px; flex-basis: 40px; }
  #practiceInfoCard { margin-top: 6px; }
  #practiceInfoCard .pic-left { gap: 2px; }
  #practiceInfoCard .pic-title { font-size: 18px; line-height: 1.35; }
  #practiceInfoCard .pic-author, #practiceInfoCard .pic-tags,
  #practiceInfoCard .pic-yt { display: none; }
  #practiceOverlay .practice-toolbar { min-height: 48px; padding: 2px 12px; margin-top: 4px; }
  #practiceOverlay .practice-local-note { display: none; }
  #practiceOverlay .practice-main { padding-top: 6px; }
}
@media screen and (max-width: 359px) {
  #practiceOverlay .practice-toolbar-inner { flex-wrap: wrap; }
  #practiceOverlay .ptab-as { flex: 0 1 auto; }
}
@media print {
  #practiceOverlay .practice-header, #practiceOverlay .practice-local-note { display: none !important; }
}

/* I-7 · headers emitted by Practice popup renderers (practice.js v41). */
@media screen {
  .practice-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
  .practice-pop-title { min-width: 0; color: var(--text); font: 600 14px/1.5 var(--font-ui); overflow-wrap: anywhere; }
  .practice-pop-title b { color: var(--accent); }
  .practice-pop-close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--muted); cursor: pointer; }
  .practice-pop-close:hover { background: var(--surface-2); color: var(--text); }
  .practice-pop-close:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
}

/* I-9 · Musician: the body flex footer reduces the screen and songScroll clientHeight.
   Status rows participate in layout; no controls or warnings cover the song. */
#viewerFloat { position: static; flex: 0 0 auto; flex-direction: row; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); }
#viewerFloat .ctl-btn { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; flex-direction: column; gap: 2px; width: auto; min-width: 44px; max-width: 240px; height: auto; min-height: 52px; margin: 0; padding: 4px 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text); box-shadow: none; font: 600 14px/1.5 var(--font-ui); cursor: pointer; }
#viewerFloat .ctl-btn:first-child { flex: 0 0 44px; }
#viewerFloat .viewer-font-down { order: 1; }
#viewerFloat .viewer-font-up { order: 2; }
#viewerFloat #liveMetroFab { order: 3; flex-direction: row; flex-wrap: wrap; column-gap: 5px; }
#viewerFloat #liveMetroFab .ctl-label { flex-basis: calc(100% - 28px); text-align: left; }
#viewerFloat .ctl-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
#viewerFloat .ctl-key { font: 700 18px/1.5 var(--font-ui); color: var(--accent); }
#viewerFloat .ctl-label, #viewerFloat .lmf-unit { font: 12px/1.5 var(--font-ui); letter-spacing: normal; opacity: 1; }
#viewerFloat .lmf-bpm { font: 600 12px/1.5 var(--font-ui); }
#viewerFloat .ctl-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
#viewerFloat .ctl-btn:active { background: var(--border); }
#viewerFloat #liveMetroFab.metro-on { background: var(--accent); border-color: var(--accent); color: var(--bg); }
#viewerFloat #liveMetroFab.live-metro-flash { background: #ffe08a; color: var(--bg); }
#viewerFloat #liveMetroFab.live-metro-flash-accent { background: white; color: var(--bg); }
#screenLive .viewer-role { display: none; }
#screenLive.is-viewer #liveTopbar { min-height: 52px; padding: 4px 12px; gap: 8px; }
#screenLive.is-viewer .viewer-role { display: block; font: 700 16px/1.5 var(--font-ui); }
#screenLive.is-viewer #liveTopbar .live-badge::after { content: ' · ตาม Leader'; }
#screenLive.is-viewer.is-manual #liveTopbar .live-badge::after { content: ' · เลื่อนเอง'; }
#screenLive.is-viewer #liveTopbar > .vf-btn, #screenLive.is-viewer #liveKey { display: none; }
#screenLive.is-viewer #liveSetlistName { font: 600 14px/1.5 var(--font-ui); }
#screenLive.is-viewer .song-nav-strip { height: 48px; }
#screenLive.is-viewer .song-nav-title { line-height: 1.5; }
#screenLive.is-viewer .song-nav-adj-title { line-height: 1.5; color: var(--muted); }
#screenLive.is-viewer .song-nav-key { font-family: var(--font-ui); font-size: 13px; }
#screenLive.is-viewer #liveContent { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto auto minmax(0,1fr); }
#screenLive.is-viewer #liveNetBanner { grid-column: 1 / -1; grid-row: 1; position: static; transform: none; width: 100%; max-width: none; padding: 8px 12px; min-height: 36px; border-radius: 0; box-shadow: none; background: var(--surface); border-color: #e0a040; color: var(--text); cursor: default; }
#screenLive.is-viewer #viewerBlankBadge { grid-column: 1 / -1; grid-row: 2; position: static; padding: 6px 12px; border-radius: 0; background: #302313; border: 0; border-bottom: 1px solid #825626; color: #efad65; font: 600 13px/1.5 var(--font-ui); text-align: center; }
#screenLive.is-viewer #liveSecNow { grid-column: 1; grid-row: 3; position: static; box-sizing: border-box; width: fit-content; max-width: calc(100% - 32px); justify-self: start; margin-left: max(16px, calc((100% - 960px) / 2 + 40px)) !important; /* Claude: a chip in line with the lyrics, not a 960px bar */ margin: 4px 0; background: var(--surface); font: 600 13px/1.5 var(--font-ui); letter-spacing: normal; text-transform: none; }
#screenLive.is-viewer #songScroll { grid-column: 1; grid-row: 4; min-height: 0; }
#screenLive.is-viewer #secDrawer { grid-column: 2; grid-row: 4; }
#screenLive.is-viewer .block { transform: none; border: 0; padding: 12px 20px; background: none; }
#screenLive.is-viewer .block.is-cur { background: none; }
#screenLive.is-viewer .block :is(.b-lyric-seg,.b-lyric-only,.b-lyric) { font-size: calc(22px * var(--fsx)); line-height: 1.65; }
#screenLive.is-viewer .block .b-chord-over { font-size: calc(19px * var(--fsx)); }
#screenLive.is-viewer .block .b-chord-only { font-size: calc(22px * var(--fsx)); }
#screenLive.is-viewer .block .b-sec { font: 600 calc(14px * var(--fsx))/1.5 var(--font-ui); color: var(--section-color); letter-spacing: normal; text-transform: none; }
#screenLive.is-viewer .block.is-cur :is(.b-lyric-seg,.b-lyric-only,.b-lyric) { color: white; font-weight: 700; }
/* Keep upcoming chords at full size, with the shared .92/.82/.70 opacity steps. */
#liveMetroPop { background: var(--surface); border: 1px solid var(--border); box-shadow: none; border-radius: 16px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 80px - env(safe-area-inset-bottom)); overflow-y: auto; animation: none; }
#liveMetroPop button { min-width: 44px; min-height: 44px; font-family: var(--font-ui); font-size: 14px; line-height: 1.5; }
#liveMetroPop .metro-bpm-val, #liveMetroPop .metro-bpm-unit, #liveMetroPop .metro-vol-val { font-family: var(--font-ui); }
#liveMetroPop .metro-seg { flex-shrink: 0; }
#liveMetroPop .metro-seg-btn { padding-inline: 8px; }
#liveMetroPop .metro-pop-label { color: var(--muted); line-height: 1.5; }
@media (min-width: 769px) {
  #viewerFloat .ctl-btn { min-height: 48px; flex-direction: row; gap: 8px; padding: 8px 12px; }
  #viewerFloat #liveMetroFab { flex-wrap: nowrap; }
  #viewerFloat #liveMetroFab .ctl-label { flex-basis: auto; }
  #screenLive.is-viewer .block { padding-inline: 40px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  #screenLive.is-viewer #liveTopbar { min-height: 44px; }
  #screenLive.is-viewer .song-nav-strip { height: 44px; }
  #viewerFloat { padding-top: 4px; padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
  #viewerFloat .ctl-btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  #screenLive.is-viewer .block, #screenLive.is-viewer .block *, #screenLive.is-viewer .live-dot, #viewerFloat .ctl-btn { transition: none; animation: none; }
}

/* I-8 · stage Leader only. Layout boxes never scale: Renderer measures them at 42%. */
#screenLive:not(.is-viewer) { position: relative; }
#screenLive:not(.is-viewer) #liveTopbar { min-height: 52px; padding: 4px 12px; gap: 8px; }
#screenLive:not(.is-viewer) #liveTopbar > .vf-btn,
#screenLive:not(.is-viewer) #liveKey { display: none; }
#screenLive:not(.is-viewer) #liveSetlistName { font: 600 14px/1.5 var(--font-ui); }
#screenLive:not(.is-viewer) .song-nav-strip { height: 48px; }
#screenLive:not(.is-viewer) .song-nav-cur { min-width: 0; }
#screenLive:not(.is-viewer) .song-nav-title { font-size: 16px; line-height: 1.5; }
#screenLive:not(.is-viewer) .song-nav-adj-title { line-height: 1.5; color: var(--muted); }
#screenLive:not(.is-viewer) .song-nav-key { font-family: var(--font-ui); font-size: 13px; }
#screenLive:not(.is-viewer) #liveContent { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto minmax(0,1fr); }
#screenLive:not(.is-viewer) #songScroll { grid-column: 1; grid-row: 2; }
#screenLive:not(.is-viewer) #secDrawer { grid-column: 2; grid-row: 2; }
#screenLive:not(.is-viewer) #liveNetBanner { grid-column: 1 / -1; grid-row: 1; }
#screenLive:not(.is-viewer) #liveNetBanner { position: static; transform: none; flex-shrink: 0; width: 100%; max-width: none; min-height: 44px; margin: 0; padding: 10px 12px; border-radius: 0; box-shadow: none; }
#screenLive:not(.is-viewer) #blankWarning { position: static; flex-shrink: 0; min-height: 36px; padding: 6px 12px; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 12px; background: #302313; border-bottom: 1px solid #825626; color: #efad65; font: 600 14px/1.5 var(--font-ui); }
#screenLive:not(.is-viewer) #blankWarning span + span { font-size: 12px; font-weight: 400; }
#screenLive:not(.is-viewer) .block { transform: none; border: 0; padding: 12px 20px; background: none; transition: opacity .18s ease; }
#screenLive:not(.is-viewer) .block > .line-content { transform-origin: left center; transform: scale(.75); transition: transform .18s ease; }
#screenLive:not(.is-viewer) .block.is-cur { opacity: 1; background: none; }
#screenLive:not(.is-viewer) .block.is-cur > .line-content { transform: scale(1); }
#screenLive:not(.is-viewer) .block.is-prev1 { opacity: .55; }
#screenLive:not(.is-viewer) .block.is-next1 { opacity: .92; }
#screenLive:not(.is-viewer) :is(.block.is-prev1,.block.is-next1) > .line-content { transform: scale(.88); }
#screenLive:not(.is-viewer) .block.is-next2 { opacity: .82; }
#screenLive:not(.is-viewer) .block.is-next2 > .line-content,
#screenLive:not(.is-viewer) .block.is-past:has(+ .block.is-prev1) > .line-content { transform: scale(.80); }
#screenLive:not(.is-viewer) .block.is-next3 { opacity: .70; }
#screenLive:not(.is-viewer) .block.is-far { opacity: .50; }
#screenLive:not(.is-viewer) .block.is-past { opacity: .30; }
/* Uniform source sizes avoid compounding distance scale with legacy current-line sizes. */
#screenLive:not(.is-viewer) .block :is(.b-lyric-seg,.b-lyric-only,.b-lyric) { font-size: calc(22px * var(--fsx)); color: var(--text); font-weight: 600; line-height: 1.65; }
#screenLive:not(.is-viewer) .block .b-chord-over { font-size: calc(19px * var(--fsx)); color: var(--chord); }
#screenLive:not(.is-viewer) .block .b-chord-only { font-size: calc(22px * var(--fsx)); }
#screenLive:not(.is-viewer) .block .b-sec { font: 600 calc(14px * var(--fsx))/1.5 var(--font-ui); color: var(--section-color); letter-spacing: normal; text-transform: none; }
#screenLive:not(.is-viewer) .block.is-cur :is(.b-lyric-seg,.b-lyric-only,.b-lyric) { color: white; font-weight: 700; }
#screenLive:not(.is-viewer) .leader-bar { position: relative; }
#screenLive:not(.is-viewer) .ldr-row { gap: 8px; padding: 8px 12px; }
#screenLive:not(.is-viewer) .ctl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 48px; height: auto; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); color: var(--text); font: 600 14px/1.5 var(--font-ui); cursor: pointer; flex-shrink: 0; white-space: nowrap; }
#screenLive:not(.is-viewer) .ctl-btn svg { flex-shrink: 0; width: 20px; height: 20px; }
#screenLive:not(.is-viewer) .ctl-btn:focus-visible,
#screenLive:not(.is-viewer) .ldr-font-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
#screenLive:not(.is-viewer) .ctl-btn:active { background: var(--border); }
#screenLive:not(.is-viewer) .ctl-btn.ldr-next { flex: 1; min-width: 0; background: var(--accent); border-color: var(--accent); color: var(--bg); font-size: 18px; }
#screenLive:not(.is-viewer) #ldrClearBtn.is-blank { background: #302313; border-color: #b57937; color: #efad65; }
#screenLive:not(.is-viewer) .live-end { color: #f08a8a; background: transparent; border-color: transparent; }
#screenLive:not(.is-viewer) .live-wide { display: none; }
/* JS sets display:flex on the font group. Keep its mobile duplicate in the tools panel only. */
@media (max-width: 640px) {
  #screenLive:not(.is-viewer) #ldrFontFloat { display: none !important; }
}
#screenLive:not(.is-viewer) .live-tools-panel { position: absolute; bottom: calc(100% + 8px); right: 8px; z-index: 40; width: min(330px,calc(100vw - 16px)); max-height: min(55dvh,460px); overflow-y: auto; padding: 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
#screenLive:not(.is-viewer) .live-tools-panel[hidden] { display: none; }
#screenLive:not(.is-viewer) .live-tools-panel header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#screenLive:not(.is-viewer) .live-tools-panel h2 { margin: 0; font: 700 16px/1.5 var(--font-ui); }
#screenLive:not(.is-viewer) .live-tool-label { margin: 12px 0 8px; color: var(--muted); font: 13px/1.5 var(--font-ui); }
#screenLive:not(.is-viewer) .live-tool-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
#screenLive:not(.is-viewer) .live-tool-personal { grid-template-columns: 64px 64px; }
#screenLive:not(.is-viewer) .live-tools-panel > .live-end { margin-top: 16px; border-top: 1px solid var(--border); border-radius: 0; width: 100%; justify-content: flex-start; }
#screenLive:not(.is-viewer) #liveExitModal button { min-height: 44px; min-width: 44px; }
#screenLive:not(.is-viewer) #liveExitModal button[onclick="Live.exitEndSession()"] { background: #b73737 !important; border-color: #b73737 !important; color: white; }
@media (min-width: 641px) {
  #screenLive:not(.is-viewer) .live-wide { display: inline-flex; }
  #screenLive:not(.is-viewer) .live-tools-toggle,
  #screenLive:not(.is-viewer) #liveToolsPanel { display: none; }
  #screenLive:not(.is-viewer) .ldr-row { gap: 6px; }
  #screenLive:not(.is-viewer) .ldr-gap { flex: 1; min-width: 8px; }
  #screenLive:not(.is-viewer) .ctl-btn.ldr-next { flex: 1 1 240px; max-width: 440px; }
  #screenLive:not(.is-viewer) .ldr-font-btn { width: 44px; height: 48px; }
  #screenLive:not(.is-viewer) #secDrawer { display: block !important; width: 170px; }
  #screenLive:not(.is-viewer) #secChips { display: none; }
}
@media (min-width: 641px) and (max-width: 1023px) {
  #screenLive:not(.is-viewer) .ctl-secondary-label { display: none; }
  #screenLive:not(.is-viewer) .ctl-btn { padding: 8px; font-size: 13px; }
  #screenLive:not(.is-viewer) .ldr-row { gap: 4px; padding-inline: 8px; }
  #screenLive:not(.is-viewer) .ctl-btn.ldr-next { font-size: 16px; }
}
@media (min-width: 1100px) {
  #screenLive:not(.is-viewer) #secDrawer { width: 220px; padding: 20px; }
  #screenLive:not(.is-viewer) .block { padding-inline: 40px; }
  #screenLive:not(.is-viewer) .song-nav-title { font-size: 20px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  #screenLive:not(.is-viewer) #liveTopbar { min-height: 44px; }
  #screenLive:not(.is-viewer) .song-nav-strip { height: 44px; }
  #screenLive:not(.is-viewer) .ldr-row { padding-block: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  #screenLive:not(.is-viewer) .block,
  #screenLive:not(.is-viewer) .block > .line-content,
  #screenLive:not(.is-viewer) .block * { transition: none; animation: none; }
  #screenLive:not(.is-viewer) .live-dot { animation: none; }
  #screenLive:not(.is-viewer) #songScroll { scroll-behavior: auto; }
}