#openKaraoke{border-color:#587e90;background:#233f50;color:#edf8fc}
#karaokePanel{width:min(1040px,calc(100vw - 32px));height:min(850px,calc(100dvh - 32px));max-height:calc(100dvh - 32px);overflow:hidden}
#karaokePanel[open]{display:flex;flex-direction:column}
#karaokePanel .dialoghead{position:static;flex-shrink:0;gap:12px}
#karaokeSong{margin:3px 0 0;color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.karaoke-toolbar{padding:12px 20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#233846;border-bottom:1px solid #587888;flex-shrink:0}
.karaoke-toolbar button{min-height:40px}.karaoke-toolbar #karaokePlay{background:#edf4f4;color:#14373d;min-width:116px}
.karaoke-toolbar label{margin:0;display:flex;align-items:center;gap:7px;font-size:12px}.karaoke-toolbar label input{width:18px;height:18px}
#karaokeTime{font-size:12px;font-variant-numeric:tabular-nums;margin-right:auto;white-space:nowrap}
#karaokeLines{--karaoke-size:32px;position:relative;overflow:auto;min-height:0;flex:1;padding:24px 28px;scrollbar-color:#5b8b96 transparent;overscroll-behavior:contain;scroll-padding-block:40px}
#karaokeLines .karaoke-line{display:block;width:100%;text-align:center;border:1px solid transparent;border-radius:12px;background:transparent;color:#ccd8df;padding:18px 20px;margin:8px 0;font-size:var(--karaoke-size);font-weight:550;line-height:1.45;overflow-wrap:anywhere}
#karaokeLines .karaoke-line small{display:block;font-size:11px;color:#acbec8;font-weight:400;margin-bottom:4px}
#karaokeLines .karaoke-line.current{background:#204f4a;color:#f0fffa;border-color:#64cbbc;box-shadow:inset 4px 0 #64cbbc;font-weight:750}
#karaokeLines .karaoke-line.past{color:#9eb2bf}
#karaokeLines .karaoke-line:hover{border-color:#689d9d}
#karaokeEmpty{padding:32px 24px;text-align:center;flex:1}#karaokeEmpty h3{font-size:22px}
.karaoke-footer{padding:10px 20px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap;flex-shrink:0}
.karaoke-footer p{margin:0;flex-basis:100%;font-size:11px;color:var(--muted)}#karaokePhase{margin-right:auto;font-size:12px;color:var(--muted)}
html[data-theme=light] #openKaraoke{background:#d5e2e5;border-color:#879fa7;color:#183f4b}
html[data-theme=light] .karaoke-toolbar{background:#d5e2e5;border-color:#879fa7;color:#192d3a}
html[data-theme=light] .karaoke-toolbar #karaokePlay{background:#183f4b;color:#fff}
html[data-theme=light] #karaokeLines .karaoke-line{color:#334c55;background:transparent}
html[data-theme=light] #karaokeLines .karaoke-line small{color:#506772}
html[data-theme=light] #karaokeLines .karaoke-line.past{color:#62747a}
html[data-theme=light] #karaokeLines .karaoke-line.current{background:#cee5da;color:#163b30;border-color:#548d78;box-shadow:inset 4px 0 #548d78}
@media(max-width:600px){#karaokePanel{width:calc(100vw - 16px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px)}#karaokePanel .dialoghead{padding:12px}.karaoke-toolbar{gap:8px;padding:10px 12px}.karaoke-toolbar label{flex:1}.karaoke-toolbar button{padding:6px 10px}#karaokeLines{padding:8px 10px}#karaokeLines .karaoke-line{padding:14px 10px;font-size:calc(var(--karaoke-size) * .85)}.karaoke-footer{padding:9px 12px;gap:6px}.karaoke-footer button{font-size:11px;padding:6px 8px}.karaoke-footer p{font-size:10px}}