:root{
  --bg:#16140f; --panel:#1e1b14; --border:#3a3527; --text:#e9e2d0; --muted:#8f8770;
  --accent:#c99a3d; --chord:#8fd67f; --lyric:#dcd5c2; --danger:#c96a4f;
  --font-ui:-apple-system,system-ui,"Segoe UI",sans-serif; --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --row-alt:rgba(255,255,255,.035);
  --section:var(--muted); --cue:var(--muted); --sep:var(--muted); --lickc:var(--accent); --tabc:var(--chord);
  --nowrow:var(--accent); --progress:var(--accent); --nowchord:var(--chord); --nowchordtext:var(--bg);
  --chipbg:var(--panel); --chipborder:var(--border); --onaccent:#16140f; --accent-rgb:201,154,61;
  --song-scale:1; --song-lh:1.32; --chord-weight:800;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
:root[data-theme="light"]{ --bg:#f7f4ea; --panel:#eee8d6; --border:#d7cdac; --text:#2a2416; --muted:#7a7256; --accent:#8a5a12; --chord:#2f7a2a; --lyric:#2a2416; --danger:#a83f2a; --font-ui:"Helvetica Neue",Arial,sans-serif; --font-mono:"SF Mono",Menlo,Consolas,monospace; --row-alt:rgba(0,0,0,.035); }
:root[data-theme="white"]{ --bg:#ffffff; --panel:#f4f4f4; --border:#d6d6d6; --text:#141414; --muted:#5c5c5c; --accent:#9c4f00; --chord:#1e7a34; --lyric:#141414; --danger:#b23b2e; --font-ui:-apple-system,system-ui,"Segoe UI",sans-serif; --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --row-alt:rgba(0,0,0,.045); }
:root[data-theme="sky"]{ --bg:#eaf3fb; --panel:#d9e8f6; --border:#b4cde6; --text:#0f2338; --muted:#43617d; --accent:#1f6fc2; --onaccent:#ffffff; --chord:#0b5cad; --lyric:#0f2338; --danger:#b3382c; --font-ui:"Segoe UI","Helvetica Neue",Arial,sans-serif; --font-mono:"SF Mono",Menlo,Consolas,monospace; --row-alt:rgba(20,80,160,.06); --chipbg:#d9e8f6; --chipborder:#9fbfe0; }
:root[data-theme="forest"]{ --bg:#10180f; --panel:#182219; --border:#33422f; --text:#dfe8d5; --muted:#87a17c; --accent:#9fce6a; --chord:#d7e88c; --lyric:#dfe8d5; --danger:#e08a5f; --font-ui:"Iowan Old Style",Georgia,serif; --font-mono:"Courier New",Courier,monospace; --row-alt:rgba(255,255,255,.04); }
:root[data-theme="ocean"]{ --bg:#0b1720; --panel:#122232; --border:#2b4658; --text:#d9eaf2; --muted:#7ea0b0; --accent:#5fc2db; --chord:#8be8c9; --lyric:#d9eaf2; --danger:#f0916d; --font-ui:"Helvetica Neue",Arial,sans-serif; --font-mono:"SF Mono",Menlo,Consolas,monospace; --row-alt:rgba(255,255,255,.04); }
/* Midnight: true black for OLED / dark stages, high-contrast yellow chords, neo-grotesque sans */
:root[data-theme="midnight"]{ --bg:#000000; --panel:#0d0d0d; --border:#2b2b2b; --text:#f4f4f4; --muted:#9a9a9a; --accent:#ff9f0a; --onaccent:#000000; --chord:#ffe14d; --lyric:#f4f4f4; --danger:#ff6b5e; --font-ui:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif; --font-mono:"SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace; --row-alt:rgba(255,255,255,.05); }
/* Twilight: soft violet dusk, lavender accent, peach chords, rounded humanist sans */
:root[data-theme="twilight"]{ --bg:#15121e; --panel:#1f1a2c; --border:#3b3254; --text:#ebe6f7; --muted:#a39bbd; --accent:#c79bff; --onaccent:#15121e; --chord:#ffcf8a; --lyric:#ebe6f7; --danger:#ff7a90; --font-ui:"Avenir Next",Avenir,"Segoe UI",Nunito,"Helvetica Neue",sans-serif; --font-mono:"Cascadia Mono","Fira Mono",Menlo,Consolas,monospace; --row-alt:rgba(255,255,255,.04); }
/* Amber terminal: phosphor amber on near-black, cream chords, monospace everywhere */
:root[data-theme="amber"]{ --bg:#0b0700; --panel:#140d00; --border:#3d2a00; --text:#ffc15e; --muted:#a8782a; --accent:#ffdd66; --onaccent:#0b0700; --chord:#fff4cf; --lyric:#ffc15e; --danger:#ff6a3d; --font-ui:"Lucida Console","Courier New",Menlo,Consolas,monospace; --font-mono:"Lucida Console","Courier New",Menlo,Consolas,monospace; --row-alt:rgba(255,176,0,.07); }
/* Newsprint: grey paper and black ink, ink-blue chords, red accent, serif with a typewriter mono */
:root[data-theme="newsprint"]{ --bg:#e9e9e6; --panel:#d8d8d4; --border:#b4b4ae; --text:#121212; --muted:#555550; --accent:#b3261e; --onaccent:#ffffff; --chord:#1a4fa0; --lyric:#121212; --danger:#b3261e; --font-ui:"Times New Roman",Times,"Liberation Serif",serif; --font-mono:"Courier New",Courier,"Liberation Mono",monospace; --row-alt:rgba(0,0,0,.05); }
/* Blush: pale rose paper, deep-pink accent, plum text, violet chords, humanist sans */
:root[data-theme="blush"]{ --bg:#fdf3f5; --panel:#f6e1e7; --border:#e3bcc8; --text:#3b2430; --muted:#876574; --accent:#c2185b; --onaccent:#ffffff; --chord:#6a1b9a; --lyric:#3b2430; --danger:#c62828; --font-ui:"Trebuchet MS","Gill Sans","Segoe UI",sans-serif; --font-mono:Menlo,Consolas,"DejaVu Sans Mono","Liberation Mono",monospace; --row-alt:rgba(120,20,60,.05); }
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--text);font:15px/1.5 var(--font-ui);display:flex;flex-direction:column}
button,select,input{font-family:inherit}
header{padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--panel)}
h1{font-size:16px;letter-spacing:.02em;margin:0;color:var(--accent);font-weight:600}
#themeSel{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:5px 7px;font-size:12.5px}
#sidebarToggle{display:inline-block}
.wrap{display:flex;flex:1;min-height:0;position:relative}
aside{width:230px;border-right:1px solid var(--border);background:var(--panel);overflow-y:auto;flex-shrink:0}
aside.hidden{display:none}
#sbBackdrop{display:none}
.song-item{padding:9px 14px;border-bottom:1px solid var(--border);cursor:pointer;font-size:13.5px}
.song-item:hover{background:rgba(var(--accent-rgb),.08)}
.song-item.active{background:rgba(var(--accent-rgb),.16);color:var(--accent)}
.song-item .meta{color:var(--muted);font-size:11.5px}
button{background:transparent;border:1px solid var(--border);color:var(--text);padding:6px 11px;border-radius:4px;font-size:13px;cursor:pointer}
button:hover{border-color:var(--accent);color:var(--accent)}
button.primary{background:var(--accent);color:var(--onaccent);border-color:var(--accent);font-weight:600}
.live-banner{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:8px 14px;background:var(--panel);border-bottom:1px solid var(--border);font-size:13px;color:var(--text)}
.live-banner b{color:var(--accent)} .live-dot{color:var(--danger)} .live-wait{color:var(--muted);font-size:12px}
.live-banner button{padding:4px 10px;font-size:12.5px}
#liveBtn.on{background:var(--accent);color:var(--onaccent);border-color:var(--accent)}
.live-panel{position:fixed;top:60px;right:10px;width:min(340px,calc(100% - 20px));max-height:calc(100% - 80px);overflow-y:auto;z-index:46;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:0 14px 14px;box-shadow:0 8px 28px rgba(0,0,0,.4);font-size:13px}
.live-panel .ap-head{padding:12px 0 6px}
.live-link{flex:1;min-width:0;font-family:var(--font-mono);font-size:11.5px;padding:5px 6px;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:4px}
.live-err{color:var(--danger)}
body.following .autoctl{display:none!important}
.newrow{display:flex;border-bottom:1px solid var(--border)}
#newBtn{flex:1;border-radius:0;border:none;padding:10px}
#importPdfBtn{border:none;border-left:1px solid var(--border);border-radius:0;padding:10px 12px;white-space:nowrap}
.live-panel button[disabled]{opacity:.5;cursor:not-allowed}
.import-msg{position:relative;margin:8px 10px;padding:8px 26px 8px 10px;border:1px solid var(--border);border-left-width:3px;border-radius:5px;font-size:12px;line-height:1.4;background:var(--bg);color:var(--text)}
.import-msg.ok{border-left-color:var(--chord)} .import-msg.warn{border-left-color:var(--accent)} .import-msg.err{border-left-color:var(--danger)} .import-msg.info{border-left-color:var(--muted)}
.import-msg .import-x{position:absolute;top:2px;right:2px;border:none;padding:2px 6px;background:transparent;color:var(--muted)}
.import-msg div+div{margin-top:4px}
main{flex:1;overflow-y:auto;padding:20px 26px;min-width:0;--padtop:20px}
.tabs{position:relative;display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:16px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:7px 13px;font-size:13px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;flex-shrink:0}
.tab.active{color:var(--accent);border-color:var(--accent)}
.songhead{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px;flex-wrap:wrap;gap:10px}
.songhead h2{margin:0;font-size:clamp(19px,5vw,27px)}
.songhead .artist{color:var(--muted);font-size:13px}
.meta-row{color:var(--accent);font-weight:700;font-size:clamp(13px,3.4vw,16px);letter-spacing:.02em;margin-top:3px}
.meta-row span{margin-right:16px}
.controls{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:13px;color:var(--muted)}
.controls input[type=number]{width:34px;background:var(--bg);border:1px solid var(--border);color:var(--text);text-align:center;border-radius:3px;padding:3px}
.controls label{display:flex;align-items:center;gap:5px}
.controls select{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:4px 6px;font-size:12.5px}
#semitones{width:46px}
#capoFret{width:42px}
.meta-row small{font-weight:400;color:var(--muted)}
.song{font-family:var(--font-mono);font-size:calc(clamp(16px,4.3vw,21px)*var(--song-scale));overflow-x:auto;line-height:var(--song-lh);padding:8px 0;display:grid;grid-template-columns:max-content}   /* every row is as wide as the widest row (+2em of padding, below) - not the whole page */
.line-group{position:relative;margin-bottom:2px;padding:4px calc(6px + 2em) 8px 6px;border-radius:4px}
.song.wrapview .line-group{padding-right:6px}
.line-group.alt{background:var(--row-alt)}
.line-group{transition:box-shadow .2s ease}
.line-group.now{position:relative;box-shadow:inset 3px 0 0 var(--nowrow)}
.line-group::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:var(--nowrow);opacity:0;border-radius:4px;pointer-events:none;transition:opacity .2s ease}
.line-group.now::before{opacity:.16}
.line-group.now>*{position:relative;z-index:1}
.song.auto .line-group::after{content:'';position:absolute;left:6px;right:6px;width:calc(var(--tl)*1ch);max-width:calc(100% - 12px);bottom:2px;height:3px;border-radius:2px;background:linear-gradient(to right,var(--progress) calc(var(--p,0)*100%),var(--border) calc(var(--p,0)*100%));opacity:.5;transition:background .25s linear,opacity .4s ease}
.song.auto .line-group.now::after{opacity:1}
.song.auto .line-group.done::after{opacity:0}          /* once the clock has moved on, the row's bar is gone */
.chordtok.now{background:var(--nowchord);color:var(--nowchordtext);border-radius:3px;box-shadow:0 0 0 2px var(--nowchord);border-bottom-color:transparent;transform:scale(1.12)}
.line-group:last-child{margin-bottom:0}
.chordline{color:var(--chord);font-weight:var(--chord-weight);display:block;white-space:pre}   /* no letter-spacing: chords must advance exactly like the lyric line above/below them */
.lyricline{color:var(--lyric);display:block;white-space:pre}
.sectionlabel{color:var(--section);font-weight:600;display:block;white-space:pre;margin:14px 0 4px;font-size:.78em;text-transform:uppercase;letter-spacing:.08em}
.sectionlabel:first-child{margin-top:0}
.compactline{color:var(--chord);font-weight:var(--chord-weight);font-size:1.12em;letter-spacing:.01em;display:block;white-space:pre}
.barsline{color:var(--chord);font-weight:var(--chord-weight);font-size:1.1em;letter-spacing:.01em;display:block;white-space:normal;line-height:1.8}
.barline{color:var(--muted);font-weight:700;margin:0 1px}
.beatdot{color:var(--muted);opacity:.65;font-weight:400}
.cueline{color:var(--cue);font-style:italic;opacity:.85;display:block;white-space:pre}
textarea, .field input{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:8px;font-size:13.5px}
textarea{font-family:var(--font-mono);min-height:340px;resize:vertical}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.field label{font-size:11px;color:var(--muted);display:block;margin-bottom:3px}
.editbar{display:flex;gap:8px;margin-top:10px}
.note{color:var(--muted);font-size:12px;margin-top:14px;border-top:1px dashed var(--border);padding-top:10px}
.navtabs{display:flex;gap:2px;margin-left:auto}
.navtab{padding:6px 12px;font-size:13px;color:var(--muted);cursor:pointer;border-radius:4px}
.navtab.active{color:var(--accent);background:rgba(var(--accent-rgb),.12)}
.filterbar{padding:8px 12px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:6px}
.filterbar select{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:5px;font-size:12.5px}
.taggroup{margin-bottom:10px}
.taggroup summary{cursor:pointer;font-size:12px;color:var(--muted);margin-bottom:6px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--border);border-radius:12px;padding:3px 10px;font-size:12px;cursor:pointer;color:var(--muted)}
.chip.active{border-color:var(--accent);color:var(--accent);background:rgba(var(--accent-rgb),.1)}
.tagpills{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.pill{font-size:11px;color:var(--muted);border:1px solid var(--border);border-radius:10px;padding:1px 8px}
.phrase-row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;border:1px solid var(--border);border-radius:6px;padding:8px 10px;margin-bottom:6px}
.phrase-form{border:1px solid var(--border);border-radius:6px;padding:12px;margin-top:8px;background:var(--bg)}
.phrase-marker{color:var(--lickc);font-size:.85em;font-style:italic;opacity:.9;display:block;margin:2px 0 6px;white-space:pre}
.phrase-tab{font-style:normal;color:var(--tabc);font-family:var(--font-mono);opacity:1}
.phrases-panel{margin:10px 0}
.phrase-card{border:1px solid var(--border);border-radius:6px;padding:10px;margin-bottom:8px;background:var(--panel)}
.chordtok{cursor:pointer;border-bottom:1px dotted currentColor;display:inline-block;transition:background-color .25s ease,color .25s ease,box-shadow .25s ease,transform .25s ease}
.chordtok.licktok{border-bottom-style:solid;color:var(--lickc)}
.appearance-panel{position:fixed;top:0;right:0;bottom:0;width:min(360px,100%);z-index:45;background:var(--panel);border-left:1px solid var(--border);box-shadow:-6px 0 24px rgba(0,0,0,.35);overflow-y:auto;padding:0 16px 28px;font-size:13px}
@media (max-width:480px){.appearance-panel{width:100%}}
.ap-head{position:sticky;top:0;z-index:2;background:var(--panel);display:flex;align-items:center;justify-content:space-between;padding:14px 0 8px}
.ap-head h3{margin:0;font-size:15px;color:var(--accent)}
.ap-sec{margin-top:16px}
.ap-sec h4{margin:0 0 6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ap-note{color:var(--muted);font-size:12px;margin:8px 0}
.ap-row{display:flex;align-items:center;gap:8px;padding:4px 0}
.ap-row .name{flex:1;color:var(--text);font-size:12.5px}
.ap-row.changed .name::after{content:' \2022';color:var(--accent)}
.ap-row input[type=color]{width:34px;height:26px;padding:0;border:1px solid var(--border);border-radius:4px;background:transparent;cursor:pointer}
.ap-row .hex{width:78px;font-family:var(--font-mono);font-size:12px;padding:3px 5px;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:4px}
.ap-row .rst{visibility:hidden;padding:1px 7px;font-size:13px}
.ap-row.changed .rst{visibility:visible}
.ap-row select{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:4px 6px;font-size:12.5px;max-width:170px}
.ap-row input[type=range]{flex:1.2;accent-color:var(--accent)}
.ap-row .val{width:44px;text-align:right;color:var(--muted);font-size:12px}
.ap-sub{display:flex;align-items:center;gap:8px;padding:0 0 4px 12px;color:var(--muted);font-size:12px}
.ap-sub input[type=range]{flex:1;accent-color:var(--accent)}
.ap-sub .bandv{width:44px;text-align:right}
.appearance-panel textarea{min-height:90px;font-size:11.5px;margin-top:6px}
.chordsep{color:var(--sep);font-weight:400;opacity:.55}
.cnum{font-weight:calc(var(--chord-weight) + 100)}
.csuf{font-weight:400;opacity:.7}
.compactline .cnum,.barsline .cnum,.inlineline .cnum{font-size:1.18em}
.compactline .csuf,.barsline .csuf,.inlineline .csuf{font-size:.72em;opacity:.85}
.song.wrapview{grid-template-columns:minmax(0,1fr)}
.inlineline{display:block;white-space:normal;line-height:calc(var(--song-lh)*1.63);color:var(--lyric)}
.chordtok.inlinechord{color:var(--chord);font-weight:var(--chord-weight);font-size:.9em;padding:0 3px 0 5px;margin:0 4px 0 2px;border:1px solid var(--chipborder);border-radius:5px;background:var(--chipbg)}
.chordtok.inlinechord.adj{margin-left:0}
.inlineline .licktok{margin:0 4px 0 2px}
.chordtok.inlinechord.now{background:var(--nowchord);color:var(--nowchordtext);border-color:var(--nowchord)}
.chordtok:hover{opacity:.75}
.chord-popup{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:14px 20px;z-index:50;box-shadow:0 4px 20px rgba(0,0,0,.5);text-align:center}
.count-in-overlay{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.55);align-items:center;justify-content:center;font-size:min(30vw,180px);font-weight:800;color:var(--accent);font-family:var(--font-mono)}
.chord-popup .close{position:absolute;top:4px;right:9px;cursor:pointer;color:var(--muted);font-size:14px}
.chord-popup svg{color:var(--text)}
#songSearch{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:6px 8px;font-size:13px}
.setlist-item{border:1px solid var(--border);border-radius:6px;padding:10px;margin-bottom:8px;display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap}
.setlist-item .idx{color:var(--muted);font-size:12px;width:18px;flex-shrink:0}
.setlist-item .body{flex:1;min-width:180px}
.setlist-item .row{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.setlist-item select,.setlist-item input{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:4px 6px;font-size:12.5px}
.sectionbreak{color:var(--accent);font-weight:700;margin:16px 0 6px;text-transform:uppercase;font-size:12.5px;letter-spacing:.05em}
.iconbtn{padding:3px 7px;font-size:12px}
.setname{font-size:19px;font-weight:600;background:transparent;border:none;color:var(--text);border-bottom:1px solid var(--border);padding:2px 0}
.scrollbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:8px 4px;background:var(--panel);border:1px solid var(--border);border-radius:6px}
.scrollbar input[type=range]{accent-color:var(--accent)}
#scrollSpeedLabel{color:var(--muted);font-size:12.5px;min-width:44px;padding:0 12px;text-align:center;display:inline-block}
.lyricline .instr{color:var(--muted);font-style:italic;opacity:.8}
.sticky-head{position:sticky;top:var(--head-top,0px);z-index:6;background:var(--panel);padding-top:2px;margin-bottom:10px;transition:top .22s ease}
@media (prefers-reduced-motion:reduce){ .sticky-head{transition:none} }
.sticky-head .tabs{margin-bottom:8px}
.section-indicator{font-weight:800;color:var(--accent);font-size:15px;text-transform:uppercase;letter-spacing:.03em}
.modal-backdrop{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.modal{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:18px;width:min(420px,100%);max-height:calc(100% - 32px);overflow:auto;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.modal h3{margin:0 0 6px;color:var(--accent)} .modal p{font-size:13.5px;line-height:1.45;margin:8px 0}
.modal input.code{width:100%;font-size:18px;padding:10px 12px;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:6px;font-family:var(--font-mono)}
.modal-err{color:var(--danger);font-size:13px;min-height:18px;margin:6px 0}
.modal-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.live-code{font-family:var(--font-mono);font-size:22px;font-weight:700;color:var(--accent);padding:8px 10px;background:var(--bg);border:1px solid var(--border);border-radius:6px;margin:6px 0;word-break:break-all;user-select:all}
.float-anchor{position:sticky;top:0;height:0;z-index:7;pointer-events:none}
.float-stop{position:absolute;right:0;top:calc(6px - var(--padtop,20px));display:none;pointer-events:auto;align-items:center;gap:6px;background:var(--accent);color:var(--onaccent);border:none;border-radius:999px;padding:9px 16px;font-weight:700;box-shadow:0 3px 12px rgba(0,0,0,.45);cursor:pointer}
.indicator-row{display:flex;justify-content:space-between;align-items:baseline;padding:5px 14px 8px 0;gap:10px}
@media (max-width:700px){
  h1{display:none}
  .navtabs{margin-left:0}
  aside{position:fixed;left:0;top:var(--hdr-h,56px);bottom:0;z-index:20;box-shadow:2px 0 14px rgba(0,0,0,.4)}
  #sbBackdrop{position:fixed;left:0;right:0;top:var(--hdr-h,56px);bottom:0;z-index:19;background:rgba(0,0,0,.4)}
  aside:not(.hidden)+#sbBackdrop{display:block}
  main{padding:16px;--padtop:16px}
  .tab{padding:10px 14px;font-size:14px}
  .navtab{padding:9px 13px}
  button{padding:8px 13px}
  .controls{width:100%;order:3}
}
#optsBtn{display:none}
.apptools{display:contents}
.hdr-compact header{gap:8px 10px;padding-left:12px;padding-right:12px}
.hdr-compact #optsBtn{display:inline-flex;align-items:center;gap:6px;margin-left:auto;white-space:nowrap}
.hdr-compact .apptools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;width:100%;order:2;padding-top:8px;border-top:1px solid var(--border)}
.hdr-compact .controls{width:100%;order:3;padding-top:8px;border-top:1px solid var(--border)}
.hdr-compact body:not(.opts-open) :is(.apptools,#transposeBar){display:none!important}
.hdr-compact #sidebarToggle{padding:8px 11px}
.hdr-compact .navtab{padding:9px 10px}
#optsBtn .optsum{font-size:11.5px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:1px 7px;color:var(--accent);white-space:nowrap}
#optsBtn .optdot{display:none;color:var(--accent);font-size:10px}
#optsBtn .caret{font-size:10px;color:var(--muted)}
@media (max-width:480px){ #optsBtn .optsum{display:none} #optsBtn .optdot{display:inline} }
@media (max-width:359px){ #optsBtn .optlbl{display:none} }
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:5px}

/* count-in: a row above the song's first row that counts 1 2 3 4, lighting each beat */
.countin-row{display:flex;align-items:center;gap:.9em;padding:4px calc(6px + 2em) 8px 6px;margin-bottom:2px;border-radius:4px;background:rgba(var(--accent-rgb),.12);color:var(--muted)}
.countin-row .ci-label{font-size:.7em;letter-spacing:.08em;text-transform:uppercase;margin-right:.4em}
.countin-row .ci-n{display:inline-block;min-width:1.8em;padding:0 .3em;text-align:center;font-weight:800;border:1px solid var(--border);border-radius:4px;transition:background .08s,transform .08s}
.countin-row .ci-n.on{background:var(--nowchord);color:var(--nowchordtext);border-color:var(--nowchord);transform:scale(1.18)}

/* chord names written above a lick's tab (js/tabs.js) */
.tabchord{color:var(--accent);font-weight:700}

/* sharing between people (js/sharing.js) */
.sh-modal{width:min(520px,100%)}
.sh-modal h4{margin:12px 0 4px;font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.sh-sub{color:var(--muted)} .sh-note{color:var(--muted);font-size:13px}
.sh-items{margin-top:8px;max-height:46vh;overflow:auto}
.sh-sec{margin:10px 0 2px;font-size:12px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.04em}
.sh-row{display:flex;align-items:center;gap:6px;padding:6px 0;border-bottom:1px solid var(--border)}
.sh-row .sh-name{flex:1;min-width:0;font-size:13.5px;overflow-wrap:anywhere} .sh-by{color:var(--muted);font-size:12px}
.sh-row button{padding:3px 9px;font-size:12.5px;flex:none}
.sh-add{display:flex;gap:8px;margin-top:10px} .sh-add input{flex:1;min-width:0;font-size:15px}
.sh-tabs{display:flex;gap:6px;margin-bottom:10px} .sh-tabs button{flex:1;padding:6px 8px} .sh-tabs button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.sh-form{display:flex;flex-direction:column;gap:6px;margin-top:6px} .sh-form input{font-size:15px;min-width:0}
.sh-add select{flex:1;min-width:0;font-size:14px}

/* import review (js/importreview.js) */
.ir-modal{width:min(640px,100%)}
.ir-all{display:flex;gap:8px;align-items:center;margin:8px 0 4px;font-size:13.5px}
.ir-list{max-height:46vh;overflow:auto;border:1px solid var(--border);border-radius:6px;background:var(--bg)}
.ir-row{display:flex;gap:9px;align-items:flex-start;padding:7px 9px;border-bottom:1px solid var(--border);font-size:13.5px;cursor:pointer} .ir-row:last-child{border-bottom:none}
.ir-row input{margin-top:3px;flex:none} .ir-name{flex:1;min-width:0;overflow-wrap:anywhere}
.ir-by{color:var(--muted);font-size:12.5px;margin-left:4px} .ir-file{display:block;color:var(--muted);font-size:11.5px;overflow-wrap:anywhere}
.ir-tag{flex:none;max-width:42%;font-size:12px;text-align:right;color:var(--muted)} .ir-tag span{color:var(--muted)}
.ir-t-ok{color:#2e8b57} .ir-t-lyrics{color:#b7791f;font-weight:700} .ir-t-fail{color:#c0392b;font-weight:700}
.ir-fail{cursor:default;background:rgba(192,57,43,.06)} .ir-fail .ir-name{color:var(--muted)}
.ir-skipped{margin-top:8px;font-size:12px;color:var(--muted)} .ir-skipped div{max-height:110px;overflow:auto;margin-top:4px;overflow-wrap:anywhere}

.ir-note{margin:8px 0;padding:7px 10px;border-left:3px solid var(--accent);background:var(--bg);font-size:12.5px;border-radius:4px}
.import-msg .import-signin{padding:4px 10px;font-size:12px}

/* suggested classifications in the import review (js/autotag.js) */
.ir-top{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.ir-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.ir-chip{border:1px solid var(--border);background:var(--panel);color:var(--muted);border-radius:11px;padding:1px 9px;font-size:11.5px;line-height:1.5;cursor:pointer}
.ir-chip.on{background:var(--accent);border-color:var(--accent);color:#fff} .ir-c-medium{border-style:dashed}
.ir-tags-off .ir-chip{opacity:.35;pointer-events:none}

.searchlinks{margin-top:3px;font-size:12px;color:var(--muted)} .searchlinks a{color:var(--accent);text-decoration:none} .searchlinks a:hover{text-decoration:underline}
@media print{.searchlinks{display:none}}

/* comments written as notes in a chart ({c: text} or *text*): their own style, independent of the chord / lyric styling */
.song-note{display:block;margin:3px 0;padding:1px 0 1px 8px;border-left:2px solid var(--muted);font-family:inherit;font-style:italic;font-weight:400;font-size:.82em;line-height:1.35;letter-spacing:normal;text-transform:none;text-align:left;color:var(--muted);white-space:normal}

/* the edit page's song-body editor (js/editor.js) */
.rawed{margin:8px 0}
.rawtitle{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.rawbar{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:space-between;margin:4px 0 6px;font-size:12px}
.rb-group{display:flex;flex-wrap:wrap;gap:4px;align-items:center} .rb-right{margin-left:auto}
.rb-label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em;margin-right:2px}
.rawbar button{padding:3px 8px;font-size:12px}
.rb-check{display:inline-flex;gap:4px;align-items:center;color:var(--muted);cursor:pointer}
.rb-pos{color:var(--muted);font-variant-numeric:tabular-nums;min-width:78px;text-align:right}
.rawcols{display:flex;gap:10px;height:62vh;min-height:300px;min-width:300px;max-width:100%;resize:both;overflow:hidden;border-radius:4px}
.rawcols textarea{flex:1 1 0;min-width:0;height:100%;min-height:0;resize:none;font-size:var(--raw-fs,14px);line-height:1.45;white-space:pre;overflow:auto;tab-size:4}
.rawcols textarea.wrapped{white-space:pre-wrap}
.rawpreview{display:none;flex:1 1 0;min-width:0;height:100%;overflow:auto;border:1px solid var(--border);border-radius:4px;padding:6px 10px;background:var(--bg)}
.rawpreview .song{font-size:calc(var(--raw-fs,14px)*1.1);padding:0}
.rawcols.preview-on .rawpreview{display:block}
@media (max-width:900px){.rawcols.preview-on{flex-direction:column}}
.rawed.full{position:fixed;inset:0;z-index:70;margin:0;padding:10px 12px;background:var(--bg);display:flex;flex-direction:column}
.rawed.full .rawcols{flex:1;height:auto;resize:none;max-width:none}
.rawed.full .rawhelp{display:none}
.rawhelp{margin-top:6px;font-size:11.5px;color:var(--muted);line-height:1.5} .rawhelp summary{cursor:pointer;font-weight:600}
.rawhelp code{background:var(--bg);padding:0 3px;border-radius:3px}
.editbar{position:sticky;bottom:0;z-index:5;background:var(--panel);padding:8px 0;border-top:1px solid var(--border)}

/* the draggable divider between the song list and the song view (js/resizer.js) */
#sbResizer{flex:none;width:7px;margin:0 -3px 0 -4px;cursor:col-resize;position:relative;z-index:6;touch-action:none;outline:none}
#sbResizer::after{content:'';position:absolute;top:0;bottom:0;left:3px;width:2px;background:transparent;transition:background .15s}
#sbResizer:hover::after,#sbResizer:focus-visible::after,#sbResizer.dragging::after{background:var(--accent)}
aside.hidden ~ #sbResizer{display:none}
body.col-resizing{cursor:col-resize;user-select:none} body.col-resizing iframe{pointer-events:none}
@media (max-width:700px){#sbResizer{display:none}}

/* the preview's marker for where the cursor is in the text box (js/editor.js) */
.rawpreview .cur-line{background:rgba(128,128,128,.18);background:color-mix(in srgb,var(--accent) 15%,transparent);box-shadow:-4px 0 0 var(--accent);border-radius:2px}
.rawpreview .cur-ch{background:rgba(128,128,128,.45);background:color-mix(in srgb,var(--accent) 50%,transparent);outline:1px solid var(--accent);border-radius:2px}

/* while auto-scroll runs (or is paused) a click on a line jumps to it */
body.jumpable #viewport .song .line-group,body.jumpable #viewport .song .sectionlabel{cursor:pointer}
body.jumpable #viewport .song .line-group:hover{background:rgba(128,128,128,.12);background:color-mix(in srgb,var(--accent) 8%,transparent)}

/* sections of the song list: My Songs / Shared with me / one per group */
.song-sec{display:flex;align-items:center;gap:6px;padding:7px 12px;margin-top:4px;border-top:1px solid var(--border);background:var(--panel);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);cursor:pointer;user-select:none;position:sticky;top:0;z-index:2}
.song-sec:first-child{margin-top:0;border-top:none}
.song-sec:hover,.song-sec:focus-visible{color:var(--text);outline:none}
.song-sec .caret{width:10px;font-size:10px} .song-sec .n{margin-left:auto;font-weight:400;opacity:.8}
.song-item.shared .meta{font-style:italic}

/* the song page's three actions (+ Setlist, Share, Edit song) as one group on the right */
.songactions{display:inline-flex;flex-wrap:nowrap;margin-left:auto;align-self:flex-start}
.songactions button{margin:0 0 0 -1px;border-radius:0;white-space:nowrap}
.songactions button:first-child{margin-left:0;border-radius:4px 0 0 4px}
.songactions button:last-child{border-radius:0 4px 4px 0}
.songactions button:only-child{border-radius:4px}
.songactions button:hover,.songactions button:focus-visible{position:relative;z-index:1}

/* playing instructions on a chord line (hold, slide to C ...): a comment in place, not a chord */
.chord-instr{font-family:inherit;font-style:italic;font-weight:400;font-size:.82em;letter-spacing:normal;color:var(--muted);cursor:default}
.chord-instr.inlinenote{margin:0 .35em}
.repcount{color:var(--muted);font-weight:400;font-size:.85em;margin-right:.25em}

/* zoom: the page itself must not pinch-zoom over the song (the app zooms the text instead); scrolling is unaffected */
#main{touch-action:pan-x pan-y}
.zoomctl .iconbtn{min-width:2.4em}
#zoomVal{min-width:3.4em}