:root{--bg:#111;--panel:#1b1b1b;--fg:#eee;--muted:#888;--chord:#ffb340;--acc:#3fa7ff;--fs:22px}
*{box-sizing:border-box}body{margin:0;display:flex;height:100vh;background:var(--bg);color:var(--fg);font-family:system-ui,sans-serif}
button{background:#2a2a2a;color:var(--fg);border:1px solid #3a3a3a;border-radius:6px;padding:6px 10px;cursor:pointer;font-size:14px}
button:hover{background:#353535}button.primary{background:var(--acc);border-color:var(--acc);color:#000}button.danger{color:#ff6b6b}
input,textarea{background:#0c0c0c;color:var(--fg);border:1px solid #333;border-radius:6px;padding:7px}
#sidebar{width:280px;background:var(--panel);padding:12px;display:flex;flex-direction:column;gap:8px;border-right:1px solid #2a2a2a}
#sidebar.hidden{display:none}h1{margin:0;font-size:20px;color:var(--chord)}
.row{display:flex;gap:6px}.row>*{flex:1}
.tabs{display:flex}.tabs button{flex:1;border-radius:0}.tabs .active{background:var(--acc);color:#000}
#songList{list-style:none;margin:0;padding:0;overflow:auto;flex:1}
.listwrap{flex:1;display:flex;min-height:0;gap:2px}
#azBar{display:flex;flex-direction:column;overflow:hidden;min-height:0}#azBar[hidden]{display:none}
#azBar button{padding:0 3px;font-size:10px;border:0;background:none;color:var(--acc);line-height:1;border-radius:3px;flex:1 1 0;min-height:0}
#azBar button:disabled{color:#444;cursor:default}#azBar button:not(:disabled):hover{background:#333}
#songList .grp-h{background:#222;color:var(--chord);font-weight:700;padding:3px 8px;cursor:default;position:sticky;top:0;font-size:13px}
#songList .empty{color:var(--muted);cursor:default}#songCount{color:var(--muted)}
.sortrow select{flex:1;background:#0c0c0c;color:var(--fg);border:1px solid #333;border-radius:6px;padding:6px}.sortrow .x{flex:0 0 36px}
#idxSettings{display:flex;flex-direction:column;gap:6px;font-size:13px;background:#151515;border:1px solid #2a2a2a;border-radius:6px;padding:8px}
#idxSettings[hidden]{display:none}#idxSettings select{background:#0c0c0c;color:var(--fg);border:1px solid #333;border-radius:4px;max-width:100%}
#songList li{padding:8px;border-bottom:1px solid #262626;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
#songList li:hover,#songList li.sel{background:#2a2a2a}#songList small{color:var(--muted);display:block}
#songList .x{padding:2px 6px;font-size:12px}
#main{flex:1;display:flex;flex-direction:column;min-width:0}
#toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px;background:var(--panel);border-bottom:1px solid #2a2a2a}
#songTitle{font-weight:600;margin-right:auto}.grp{display:flex;gap:4px;align-items:center;color:var(--muted)}
#keyLabel{min-width:34px;text-align:center;color:var(--chord)}
#viewer{flex:1;overflow:auto;padding:24px 32px 60vh}
#sheet{font-family:"Helvetica Neue",Arial,sans-serif;font-size:var(--fs);line-height:1.25}
.chordline{font-family:"Menlo","Consolas",monospace}
.line{white-space:pre;min-height:1em}.chordline{color:var(--chord);font-weight:700}
.section{color:var(--acc);font-weight:700;margin-top:.8em;font-family:system-ui}
.meta{color:var(--muted);font-family:system-ui;font-size:.7em;margin-bottom:1em}
.nochords .chordline{display:none}.hint{color:var(--muted);font-family:system-ui}
dialog{background:var(--panel);color:var(--fg);border:1px solid #333;border-radius:10px;width:min(900px,95vw)}
dialog form{display:flex;flex-direction:column;gap:8px}#edBody{height:60vh;font-family:monospace;font-size:14px;white-space:pre}
#gdocDialog{display:none}#gdocDialog[open]{display:flex;flex-direction:column;gap:8px}
#gdList{max-height:45vh;overflow:auto;display:flex;flex-direction:column;border:1px solid #333;border-radius:6px;padding:6px;min-height:60px}
#gdList label{padding:4px;cursor:pointer}#gdList small{color:var(--muted)}#gdLinks{font-family:monospace}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#333;color:#fff;padding:10px 16px;border-radius:8px;z-index:99;max-width:90vw}
dialog.ask{max-width:520px}dialog.ask .askIn{width:100%;margin:8px 0}
.easy{background:#202a20;border:1px solid #2f4f2f;border-radius:8px;padding:10px;line-height:1.6}.easy a{color:var(--acc)}
#gdocDialog h3{margin:6px 0 0;font-size:15px;color:var(--muted)}
.pair{margin:.15em 0}.seg{display:inline-flex;flex-direction:column;vertical-align:bottom}
.seg .c{color:var(--chord);font-weight:700;white-space:pre;padding-right:.35em;min-height:1.2em}.seg .l{white-space:pre}
.nochords .seg .c{display:none}
#storageBanner{background:#3a2c10;border-bottom:1px solid #6b4f16;padding:8px 12px;font-size:14px;line-height:1.8}
#storageBanner[hidden]{display:none}.lib{border-top:1px solid #2a2a2a;padding-top:6px;display:flex;flex-direction:column;gap:4px}
#libStatus{color:var(--muted)}#libStatus.warn{color:#ff9b6b}
#artistTool[open]{display:flex;flex-direction:column;gap:8px}.attable{max-height:55vh;overflow:auto;border:1px solid #333;border-radius:6px}
#artistTool table{width:100%;border-collapse:collapse}#artistTool td{padding:4px 8px;border-bottom:1px solid #262626}#artistTool td:last-child{width:40%}
#artistTool td input{width:100%}#artistTool input.sug{border-color:var(--chord)}#artistTool small{color:var(--muted)}
#songList .grp-h .cnt{color:var(--muted);font-weight:400;margin-left:4px}#songList .grp-h .fill{float:right;padding:0 6px;font-size:11px}
#btnArtists{margin-top:2px}

#setBar{display:flex;flex-direction:column;gap:6px;margin:6px 0}#setBar[hidden]{display:none}#setBar select{width:100%;background:#0c0c0c;color:var(--fg);border:1px solid #333;border-radius:6px;padding:6px}#setBar .row button{flex:1;padding:4px 2px;font-size:12px}

#bpm{width:58px;text-align:center;color:var(--chord);background:#111;border:1px solid #444;border-radius:4px;padding:3px}
#bpm::-webkit-inner-spin-button{opacity:.4}
#btnBeat{color:#555;transition:color .06s}#btnBeat.on{color:#7a3}#btnBeat.flash{color:#fff;text-shadow:0 0 8px #fff}#btnBeat.on.down{color:#f55;text-shadow:0 0 10px #f55}

#dupTool[open]{display:flex;flex-direction:column;gap:8px}.dupwrap{max-height:62vh;overflow:auto;display:flex;flex-direction:column;gap:10px}
.dupg{border:1px solid #333;border-radius:8px;padding:6px 8px}.dupg h3{margin:2px 0 6px;font-size:15px;display:flex;gap:8px;align-items:center}
.dupg h3 .why{font-weight:400;font-size:12px;color:var(--muted)}.dupg h3 button{margin-left:auto;font-size:12px;padding:2px 8px}
.dupr{display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;align-items:center;padding:5px 4px;border-top:1px solid #262626}
.dupr:first-of-type{border-top:0}.dupr label{display:flex;gap:4px;align-items:center;font-size:13px;white-space:nowrap}
.dupr.del{background:#3a1d1d;border-radius:6px}.dupr.keep .tag{color:#7c3}.dupr .tag{font-size:12px;color:#f77}
.dupr small{display:block;color:var(--muted)}.dupr pre{grid-column:1/-1;margin:4px 0 0;max-height:180px;overflow:auto;background:#111;padding:6px;border-radius:6px;font-size:12px;white-space:pre-wrap}
.dupr .acts{display:flex;gap:4px}.dupr .acts button{font-size:12px;padding:2px 8px}
