:root { --bg:#14151a; --fg:#f2f1ec; --muted:#a2a29c; --card:#1f2128; --line:#2e3039; --accent:#f0a35e; --accent-fg:#1a1208; --ok:#6fcf97; --err:#ef7b7b; }
* { box-sizing:border-box; }
html { color-scheme:dark; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; padding-bottom:env(safe-area-inset-bottom); }
header.top { display:flex; align-items:center; gap:.8rem; padding:.7rem 1rem; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); }
.brand { font-weight:800; letter-spacing:.05em; }
header .link { margin-left:auto; }
main { max-width:640px; margin:0 auto; padding:1rem; }
h1 { font-size:1.4rem; margin:.3rem 0 .8rem; } h2 { font-size:1.05rem; margin:0 0 .5rem; } h3 { font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0 0 .4rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1rem; margin-bottom:1rem; }
.muted { color:var(--muted); font-size:.9rem; } .error { color:var(--err); } .notice { text-align:center; }
label { display:block; font-size:.85rem; color:var(--muted); margin:.5rem 0 .2rem; }
input[type=text], input[type=search] { width:100%; padding:.7rem .8rem; font:inherit; font-size:1.05rem; border:1px solid var(--line); border-radius:10px; background:#12131a; color:var(--fg); }
#code { text-transform:uppercase; letter-spacing:.25em; font-family:ui-monospace,Menlo,monospace; font-size:1.4rem; text-align:center; }
button { font:inherit; padding:.7rem 1rem; border-radius:10px; border:1px solid var(--accent); background:var(--accent); color:var(--accent-fg); font-weight:600; cursor:pointer; }
button.link { background:none; border:none; color:var(--accent); padding:.2rem .4rem; font-weight:500; }
button.wide { width:100%; } button.small { padding:.4rem .7rem; font-size:.9rem; } button:disabled { opacity:.5; }
.tabs { display:flex; gap:.4rem; margin-bottom:1rem; }
.tabs button { flex:1; background:var(--card); color:var(--fg); border-color:var(--line); padding:.6rem .3rem; font-size:.95rem; }
.tabs button.active { background:var(--accent); color:var(--accent-fg); border-color:var(--accent); }
.badge { display:inline-block; min-width:1.3em; padding:0 .35em; border-radius:999px; background:#000; color:#fff; font-size:.75rem; margin-left:.2em; }
.badge:empty { display:none; }
ul.list { list-style:none; margin:0; padding:0; }
ul.list li { display:flex; align-items:center; gap:.6rem; padding:.6rem 0; border-top:1px solid var(--line); }
ul.list li:first-child { border-top:none; }
ul.list .t { flex:1; } ul.list .t strong { display:block; } ul.list .t span { color:var(--muted); font-size:.85rem; }
.tag { display:inline-block; font-size:.75rem; padding:.1rem .5rem; border-radius:999px; background:#2b2e3a; margin-right:.25rem; }
.tag.st-angenommen, .tag.st-spielt { background:#234a35; color:var(--ok); } .tag.st-abgelehnt, .tag.st-uebersprungen { background:#4a2323; color:var(--err); }
.now { font-size:1.3rem; font-weight:700; }
.lyrics { white-space:pre-wrap; font:inherit; font-size:1.25rem; line-height:1.5; margin:0; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:flex-end; justify-content:center; z-index:10; }
.modal-box { background:var(--card); border-radius:16px 16px 0 0; padding:1.2rem 1rem 1.5rem; width:100%; max-width:640px; }
[hidden] { display:none !important; }
.update { position:fixed; left:1rem; right:1rem; bottom:1rem; background:var(--accent); color:var(--accent-fg); padding:.6rem .8rem; border-radius:10px; text-align:center; z-index:20; }