*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0d0800;--surface:#1c1000;--surface2:#231500;--border:#3d2600;--text:#fff5e6;--muted:#b07030;--dim:#6b3f10;--orange:#ff7a00;--yellow:#ffd000;--danger:#ff4466;--ok:#00d68f;--warn:#ffaa00;--r:12px;--font:'Nunito',sans-serif;--display:'Righteous',sans-serif;--hdr:#120900;--accent:var(--orange);--accent2:var(--yellow);--on-accent:#0d0800;}
html[data-theme="neon"]{--bg:#07071a;--surface:#0f1235;--surface2:#151a45;--border:#2a2f6b;--text:#f2f5ff;--muted:#9aa6ff;--dim:#5c67d9;--orange:#00e5ff;--yellow:#ff3df2;--danger:#ff3b5c;--ok:#27ffb1;--warn:#ffd166;--hdr:#070821;--accent:#00e5ff;--accent2:#ff3df2;--on-accent:#030316;}
html[data-theme="tropical"]{--bg:#061b1a;--surface:#0a2b2a;--surface2:#0c3432;--border:#135652;--text:#eafffb;--muted:#86efe1;--dim:#3aa79b;--orange:#00f5d4;--yellow:#ffd166;--danger:#ff4d6d;--ok:#7dff63;--warn:#ffd166;--hdr:#062221;--accent:#00f5d4;--accent2:#ffd166;--on-accent:#062221;}
html[data-theme="violet"]{--bg:#0b0616;--surface:#140b2a;--surface2:#1a0f36;--border:#34215f;--text:#f7f3ff;--muted:#c0a6ff;--dim:#7a5bd1;--orange:#b7ff3c;--yellow:#a855ff;--danger:#ff4d8d;--ok:#37f6ff;--warn:#ffcf5a;--hdr:#0f0720;--accent:#b7ff3c;--accent2:#a855ff;--on-accent:#0b0616;}
html[data-theme="tricolor"]{--bg:#070707;--surface:#111111;--surface2:#161616;--border:#2a2a2a;--text:#ffffff;--muted:#d8d8d8;--dim:#8d8d8d;--orange:#ff1a2d;--yellow:#ffffff;--danger:#ff1a2d;--ok:#ffffff;--warn:#ffffff;--hdr:#000000;--accent:#ff1a2d;--accent2:#ffffff;--on-accent:#000000;}
html,body{min-height:100%;background:var(--bg);color:var(--text);font-family:var(--font);-webkit-tap-highlight-color:transparent}
body{max-width:480px;margin:0 auto;padding-bottom:env(safe-area-inset-bottom,0)}
.hidden{display:none!important}

@keyframes pop{0%{transform:scale(0)}100%{transform:scale(1)}}
@keyframes fall{0%{transform:translateY(-20px) rotate(0deg);opacity:1}100%{transform:translateY(110vh) rotate(720deg);opacity:0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

body.page-visitor .hdr{position:sticky;top:0;z-index:20;background:var(--hdr);border-bottom:1px solid var(--border);padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
body.page-visitor .logo{font-family:var(--display);font-size:22px;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
body.page-visitor .logo-sub{font-size:11px;color:var(--muted);font-weight:700;margin-top:1px}
body.page-visitor .hdr-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
body.page-visitor .dj-link{background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--on-accent);padding:7px 16px;border-radius:20px;font-family:var(--font);font-size:12px;font-weight:800;text-decoration:none;display:inline-block;white-space:nowrap}
body.page-visitor .card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px 18px;margin:12px 16px}
body.page-visitor .lbl{display:block;font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
body.page-visitor input[type=text],body.page-visitor input[type=password],body.page-visitor input[type=search]{width:100%;background:var(--surface2);border:1.5px solid var(--border);border-radius:var(--r);padding:12px 15px;color:var(--text);font-size:15px;font-family:var(--font);font-weight:600;outline:none;appearance:none;-webkit-appearance:none;-moz-appearance:none;transition:border-color .2s}
body.page-visitor input:focus{border-color:var(--accent)}
body.page-visitor input::placeholder{color:var(--dim);font-weight:400}
body.page-visitor .btn-primary{width:100%;padding:14px 0;border-radius:var(--r);border:none;background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--on-accent);font-family:var(--font);font-size:15px;font-weight:800;cursor:pointer;margin-top:10px;transition:opacity .15s,transform .1s}
body.page-visitor .btn-primary:active{transform:scale(.98)}
body.page-visitor .btn-primary:disabled{opacity:.35;cursor:not-allowed}
body.page-visitor .mode-wrap{display:flex;gap:10px;padding:14px 16px 0}
body.page-visitor .mode-btn{flex:1;padding:12px 0;border-radius:var(--r);border:1.5px solid var(--border);background:var(--surface);color:var(--muted);font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;transition:all .2s}
body.page-visitor .mode-btn.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%, transparent);color:var(--accent)}
body.page-visitor .pills{display:flex;flex-wrap:wrap;gap:8px}
body.page-visitor .pill{padding:8px 16px;border-radius:20px;border:1.5px solid var(--border);background:var(--surface2);color:var(--muted);font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;position:relative}
body.page-visitor .pill.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%, transparent);color:var(--accent2)}
body.page-visitor .pill.maxed{opacity:.45;cursor:not-allowed}
body.page-visitor .track-row{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:var(--r);border:1.5px solid var(--border);background:var(--surface2);cursor:pointer;margin-bottom:8px;transition:all .15s;position:relative}
body.page-visitor .track-row:active:not(.blocked-row):not(.maxed-row){transform:scale(.99)}
body.page-visitor .track-row.selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%, transparent)}
body.page-visitor .track-row.blocked-row{opacity:.4;cursor:not-allowed}
body.page-visitor .track-row.maxed-row{opacity:.55;cursor:not-allowed}
body.page-visitor .thumb{width:46px;height:46px;border-radius:8px;flex-shrink:0;object-fit:cover}
body.page-visitor .thumb-ph{width:46px;height:46px;border-radius:8px;background:var(--surface);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:22px}
body.page-visitor .track-info{flex:1;min-width:0}
body.page-visitor .track-name{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.page-visitor .track-artist{font-size:12px;color:var(--muted);margin-top:2px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.page-visitor .badges{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
body.page-visitor .badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:800}
body.page-visitor .badge-orange{background:#ff7a0025;color:var(--orange)}
body.page-visitor .badge-yellow{background:#ffd00025;color:var(--yellow)}
body.page-visitor .badge-danger{background:#ff446625;color:var(--danger)}
body.page-visitor .badge-muted{background:#b0703025;color:var(--muted)}
body.page-visitor .clear-btn{background:none;border:none;color:var(--muted);cursor:pointer;font-size:18px;padding:4px;flex-shrink:0}
body.page-visitor .msg-err{color:var(--danger);font-size:13px;font-weight:700;padding:6px 0;line-height:1.5}
body.page-visitor .msg-muted{color:var(--dim);text-align:center;padding:32px 16px;font-size:14px;font-weight:600}
body.page-visitor .loading{color:var(--muted);text-align:center;font-size:13px;padding:10px 0;font-weight:600}
body.page-visitor .success{text-align:center;padding:70px 24px}
body.page-visitor .success-icon{font-size:72px;margin-bottom:16px;display:block;animation:pop .4s cubic-bezier(.175,.885,.32,1.275)}
body.page-visitor .success-title{font-family:var(--display);font-size:30px;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}
body.page-visitor .success-sub{color:var(--muted);font-size:14px;font-weight:600}
body.page-visitor .success-back{max-width:220px;margin:22px auto 0}
body.page-visitor .confetti{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:99;overflow:hidden}
body.page-visitor .confetti span{position:absolute;animation:fall linear forwards}

body.page-dj .hdr{position:sticky;top:0;z-index:20;background:var(--hdr);border-bottom:1px solid var(--border);padding:14px 18px;display:flex;align-items:center;justify-content:space-between}
body.page-dj .logo{font-family:var(--display);font-size:22px;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
body.page-dj .logo-sub{font-size:11px;color:var(--muted);font-weight:700;margin-top:1px;display:flex;align-items:center;gap:5px}
body.page-dj .live-dot{width:6px;height:6px;border-radius:50%;background:var(--ok);display:inline-block;animation:pulse 2s infinite}
body.page-dj .btn-ghost{background:transparent;border:1.5px solid var(--border);color:var(--muted);padding:6px 14px;border-radius:20px;cursor:pointer;font-size:12px;font-family:var(--font);font-weight:700}
body.page-dj .tabs{display:flex;background:var(--hdr);border-bottom:1px solid var(--border);position:sticky;top:61px;z-index:10}
body.page-dj .tab{flex:1;padding:10px 4px;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--dim);font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:.05em;cursor:pointer;text-transform:uppercase;transition:color .15s}
body.page-dj .tab.active{border-bottom-color:var(--accent);color:var(--accent)}
body.page-dj .card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px 18px;margin:12px 16px}
body.page-dj .lbl{display:block;font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
body.page-dj input[type=text],body.page-dj input[type=password],body.page-dj input[type=search]{width:100%;background:var(--surface2);border:1.5px solid var(--border);border-radius:var(--r);padding:12px 15px;color:var(--text);font-size:15px;font-family:var(--font);font-weight:600;outline:none;appearance:none;-webkit-appearance:none;-moz-appearance:none;transition:border-color .2s}
body.page-dj input:focus{border-color:var(--accent)}
body.page-dj input::placeholder{color:var(--dim);font-weight:400}
body.page-dj .btn-primary{width:100%;padding:14px 0;border-radius:var(--r);border:none;background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--on-accent);font-family:var(--font);font-size:15px;font-weight:800;cursor:pointer;margin-top:10px}
body.page-dj .btn-primary.saved{background:linear-gradient(135deg,var(--ok),#00b07a)}
body.page-dj .req-row{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:12px 14px;margin:0 16px 10px}
body.page-dj .req-main{display:flex;align-items:center;gap:12px}
body.page-dj .thumb{width:46px;height:46px;border-radius:8px;flex-shrink:0;object-fit:cover}
body.page-dj .thumb-ph{width:46px;height:46px;border-radius:8px;background:var(--surface2);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:22px}
body.page-dj .info{flex:1;min-width:0}
body.page-dj .info-name{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.page-dj .info-artist{font-size:12px;color:var(--muted);margin-top:2px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.page-dj .info-meta{display:flex;align-items:center;gap:6px;margin-top:5px;flex-wrap:wrap}
body.page-dj .badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:800}
body.page-dj .badge-orange{background:color-mix(in srgb,var(--accent) 16%, transparent);color:var(--accent)}
body.page-dj .badge-yellow{background:color-mix(in srgb,var(--accent2) 16%, transparent);color:var(--accent2)}
body.page-dj .badge-hot{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 24%, transparent),color-mix(in srgb,var(--accent2) 18%, transparent));color:var(--accent2);border:1px solid color-mix(in srgb,var(--accent2) 18%, transparent)}
body.page-dj .badge-warn{background:#ffaa0025;color:var(--warn)}
body.page-dj .badge-danger{background:#ff446625;color:var(--danger)}
body.page-dj .meta-time{color:var(--dim);font-size:11px;font-weight:600}
body.page-dj .count-bubble{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));color:var(--on-accent);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--display)}
body.page-dj .count-bubble .cnt{font-size:18px;line-height:1}
body.page-dj .count-bubble .cnt-lbl{font-size:8px;font-weight:700;opacity:.7;font-family:var(--font);margin-top:1px}
body.page-dj .requesters-bar{margin-top:8px;padding-top:8px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px}
body.page-dj .requesters-names{font-size:12px;color:var(--muted);font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.page-dj .actions{display:flex;gap:6px;flex-shrink:0}
body.page-dj .act-btn{background:transparent;border:1.5px solid;border-radius:8px;padding:6px 11px;cursor:pointer;font-size:12px;font-family:var(--font);font-weight:700;white-space:nowrap}
body.page-dj .act-btn.remove{border-color:#ff446630;color:var(--danger)}
body.page-dj .act-btn.block{border-color:#ffaa0030;color:var(--warn)}
body.page-dj .act-btn.unblock{border-color:#ff7a0030;color:var(--orange)}
body.page-dj .track-row{display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:var(--r);border:1.5px solid var(--border);background:var(--surface2);margin-bottom:8px}
body.page-dj .pin-screen{padding:48px 16px 16px;max-width:360px;margin:0 auto}
body.page-dj .pin-title{color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.08em;text-align:center;margin-bottom:24px;text-transform:uppercase}
body.page-dj .pin-inp{text-align:center;letter-spacing:.4em;font-size:22px}
body.page-dj .pin-err{color:var(--danger);font-size:13px;font-weight:700;text-align:center;margin-top:8px}
body.page-dj .note{color:var(--dim);font-size:12px;font-weight:600;line-height:1.7;margin-bottom:12px}
body.page-dj .note a{color:var(--orange);text-decoration:none}
body.page-dj .status-ok{color:var(--ok);font-size:12px;font-weight:700;margin:4px 0}
body.page-dj .empty{text-align:center;color:var(--dim);font-size:14px;font-weight:600;padding:40px 16px}
body.page-dj .loading{color:var(--muted);text-align:center;font-size:13px;font-weight:600;padding:8px 16px}

@media (max-width:380px){
  body.page-visitor .hdr{padding:12px 14px}
  body.page-visitor .logo{font-size:20px}
}