:root { --bg:#0b0c10; --card:#14161d; --text:#e7e7ea; --muted:#9aa0aa; --accent:#4aa3ff; --warn:#f6c343; --danger:#ff4d4d; }
* { box-sizing:border-box; font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial; }
body { margin:0; background:var(--bg); color:var(--text); }
.topbar { display:flex; align-items:center; gap:10px; padding:12px 14px; background:#0f1117; border-bottom:1px solid #222636; position:sticky; top:0; z-index:10; }
.title { font-weight:700; font-size:18px; flex:1; text-align:center; }
.container { padding:14px; max-width:900px; margin:0 auto; }
.card { background:var(--card); border:1px solid #222636; border-radius:14px; padding:14px; margin-bottom:14px; box-shadow:0 10px 30px rgba(0,0,0,.25); }
h2,h3 { margin:0 0 10px 0; }
.label { display:block; margin:10px 0 6px; color:var(--muted); font-size:13px; }
.input, select { width:100%; padding:12px; border-radius:12px; border:1px solid #2a3045; background:#0f1117; color:var(--text); }
.row { display:flex; gap:10px; align-items:center; margin-top:10px; }
.row.space { justify-content:space-between; }
.btn { padding:12px 14px; border:none; border-radius:12px; background:var(--accent); color:#06121f; font-weight:700; cursor:pointer; }
.btn.ghost { background:transparent; border:1px solid #2a3045; color:var(--text); }
.btn.warn { background:var(--warn); color:#1c1505; }
.btn.danger { background:var(--danger); color:#1a0606; }
.muted { color:var(--muted); font-size:13px; margin:8px 0 0; }
.status { margin-top:10px; padding:10px; border-radius:12px; background:#0f1117; border:1px dashed #2a3045; color:var(--muted); }
.list { margin-top:10px; display:flex; flex-direction:column; gap:10px; }
.player { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px; border-radius:14px; background:#0f1117; border:1px solid #2a3045; }
.big { font-size:18px; font-weight:800; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.small { font-size:12px; line-height:1.35; white-space:pre-wrap; }
hr { border:none; border-top:1px solid #222636; margin:14px 0; }

/* Bottom sheet */
.sheet { position:fixed; left:0; right:0; bottom:0; top:0; background:rgba(0,0,0,.55); display:flex; align-items:flex-end; }
.sheet.hidden { display:none; }
.sheet-inner { width:100%; background:var(--card); border-top-left-radius:18px; border-top-right-radius:18px; padding:14px; border:1px solid #222636; }