:root { --bg:#0e0d12; --card:#18171d; --line:#2c2a33; --text:#f4f3f6; --muted:#9d9aa6; --ok:#3ddc84; --warn:#f2b84b; --bad:#ff7a7a; }
* { box-sizing:border-box; }
html,body { margin:0; background:var(--bg); color:var(--text);
  font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif; }
main { max-width:560px; margin:0 auto; padding:20px 16px 60px; }
h1 { font-size:32px; line-height:1.1; margin:8px 0 8px; letter-spacing:-.01em; }
h3 { margin:26px 0 8px; font-size:17px; }
p.sub { color:var(--muted); margin:0 0 22px; }
.top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
select, input { font:inherit; color:var(--text); background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; width:100%; }
input:focus, select:focus { outline:none; border-color:#fff; }
.top select { width:auto; padding:6px 8px; font-size:14px; }
.field { display:block; margin:0 0 14px; }
.lab { display:block; font-size:14px; color:var(--muted); margin:0 0 6px; }
.help { display:block; font-size:13px; color:var(--muted); margin-top:5px; }
.help.ok { color:var(--ok); } .help.warn { color:var(--warn); }
.grid2 { display:grid; grid-template-columns:1fr 1.6fr; gap:8px; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.grid3 .field { margin:0; }
.slugrow { display:flex; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.slugrow .pre { padding:0 0 0 14px; color:var(--muted); font-size:14px; white-space:nowrap; max-width:55%; overflow:hidden; text-overflow:ellipsis; }
.slugrow input { border:0; padding-left:2px; }
fieldset { border:1px solid var(--line); border-radius:14px; padding:12px 14px 4px; margin:0 0 14px; }
legend { padding:0 6px; font-size:14px; }
.check { display:flex; gap:10px; align-items:center; margin:0 0 14px; }
.check input { width:20px; height:20px; accent-color:#fff; }
button { font:inherit; cursor:pointer; border-radius:12px; padding:12px 16px; border:1px solid var(--line); background:transparent; color:var(--text); }
button.main { width:100%; background:#fff; color:#0e0d12; border:0; font-weight:700; font-size:17px; padding:15px; margin-top:6px; }
button.main:disabled { opacity:.5; }
button.wide { width:100%; margin-top:8px; }
button.danger { color:var(--bad); border-color:#4a2a2e; }
.err { color:var(--bad); min-height:1.2em; margin-top:8px; font-size:14px; }
.note { background:#1f1d14; border:1px solid #4b4220; color:#f1e3b5; border-radius:12px; padding:12px 14px; font-size:14px; margin:0 0 16px; }

/* пульт */
.brand { font-weight:800; font-size:22px; }
.tabs { display:flex; gap:6px; margin:16px 0 18px; }
.tabs button { flex:1; padding:10px; }
.tabs button.on { background:#fff; color:#0e0d12; border-color:#fff; font-weight:700; }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px; margin:0 0 10px; }
.card.new { border-color:#fff; }
.card.paid { border-color:var(--ok); background:#11261b; }
.card.um { border-color:#6a5420; background:#211b0c; }
.song { font-weight:700; font-size:18px; word-break:break-word; }
.small { color:var(--muted); font-size:13px; }
.paidline { color:var(--ok); font-weight:800; margin-bottom:4px; }
.waitline { color:var(--warn); margin:4px 0; font-size:14px; }
.row { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; align-items:center; }
.row button { padding:10px 14px; }
.price { background:#fff; color:#0e0d12; border:0; font-weight:800; min-width:70px; }
.ok-btn { background:var(--ok); color:#06180e; border:0; font-weight:700; }
.stepper { display:flex; align-items:center; gap:4px; }
.stepper span { min-width:64px; text-align:center; font-weight:700; }
.right { margin-left:auto; }
.empty { color:var(--muted); text-align:center; padding:30px 10px; }
.hist { margin-top:18px; }
.hist .item { display:flex; justify-content:space-between; gap:10px; padding:8px 2px; border-bottom:1px solid var(--line); font-size:14px; }
.qrbox { background:#fff; border-radius:16px; padding:14px; text-align:center; }
.qrbox svg { width:100%; height:auto; display:block; }
.link { word-break:break-all; color:var(--muted); font-size:14px; margin:10px 0; text-align:center; }
.full { position:fixed; inset:0; background:#fff; display:flex; align-items:center; justify-content:center; z-index:9; padding:20px; }
.full svg { max-width:min(92vw,92vh); max-height:92vh; }
.hidden { display:none !important; }
details { margin:4px 0 12px; }
details summary { cursor:pointer; color:var(--text); font-size:14px; padding:8px 0; list-style:none; }
details summary::before { content:"＋ "; color:var(--muted); }
details[open] summary::before { content:"− "; }
.field .lab:empty { display:none; }
.grid2.even { grid-template-columns:1fr 1fr; }
.grid2.even .field { margin-bottom:14px; }
.fab { position:fixed; right:16px; bottom:calc(18px + env(safe-area-inset-bottom)); z-index:8; width:76px; height:76px; border-radius:50%;
  border:0; background:#fff; color:#0e0d12; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-weight:800; font-size:13px; box-shadow:0 10px 30px rgba(0,0,0,.5), 0 0 0 6px rgba(255,255,255,.08); transition:transform .15s cubic-bezier(.2,.8,.2,1); }
.fab:active { transform:scale(.92); }
.fab svg { width:30px; height:30px; }
main { padding-bottom:120px; }
.full { animation:qrin .3s cubic-bezier(.2,.8,.2,1); }
@keyframes qrin { from { opacity:0; transform:scale(.96); } }
.tabs button { font-size:14px; padding:10px 4px; }
.hgroup { margin:0 0 18px; }
.hhead { display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:6px 2px 8px; border-bottom:1px solid var(--line); font-weight:700; text-transform:capitalize; }
.hhead .small { text-transform:none; font-weight:500; }
.hrow { display:grid; grid-template-columns:48px 1fr auto; gap:10px; align-items:center; padding:10px 2px; border-bottom:1px solid var(--line); }
.hrow .htime { color:var(--muted); font-size:14px; font-variant-numeric:tabular-nums; }
.hrow .hsong { font-weight:600; word-break:break-word; }
.hrow .hsum { font-weight:700; color:var(--muted); white-space:nowrap; }
.hrow.ok .hsum { color:var(--ok); }