:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f9fafb;
  background: #0b1020;
  --card: rgba(17, 24, 39, 0.9);
  --muted: #9ca3af;
  --line: rgba(255,255,255,.08);
  --accent: #22c55e;
  --accent2: #10b981;
  --danger: #ef4444;
}
* { box-sizing: border-box; }
html { background:#070b14; }
body { margin:0; min-height:100vh; min-height:100dvh; background:radial-gradient(circle at top,#18233f 0,#0b1020 42%,#070b14 100%); }
button,input { font:inherit; }
button { cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:disabled,input:disabled { opacity:.55; cursor:not-allowed; }
.app-shell { max-width:1180px; margin:0 auto; padding:20px; padding-top:max(20px,env(safe-area-inset-top)); padding-bottom:max(20px,env(safe-area-inset-bottom)); }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:18px; }
.top-actions { display:flex; align-items:center; gap:10px; }
h1,h2,h3,p { margin:0; }
h1 { font-size:clamp(30px,4vw,46px); letter-spacing:-.035em; }
.eyebrow,.section-label { font-size:12px; letter-spacing:.18em; color:#8ea0bf; font-weight:800; }
.layout { display:grid; grid-template-columns:1.05fr .95fr; gap:18px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:24px; padding:20px; backdrop-filter:blur(10px); box-shadow:0 14px 40px rgba(0,0,0,.22); }
.connect-card,.activation-card { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:18px; }
.connect-card h2,.activation-card h2 { margin-top:5px; }
.connect-card p,.activation-card p { margin-top:7px; color:var(--muted); max-width:700px; }
.now-playing { grid-column:1 / -1; }
.track-row { display:flex; align-items:center; gap:18px; margin-top:14px; }
.cover { width:104px; height:104px; border-radius:20px; display:grid; place-items:center; font-size:44px; background:linear-gradient(145deg,#7c3aed,#2563eb); background-size:cover; background-position:center; flex:0 0 auto; box-shadow:0 10px 24px rgba(0,0,0,.25); }
.track-meta { min-width:0; flex:1; }
.track-meta h2 { font-size:clamp(24px,4vw,38px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.track-meta p { color:var(--muted); font-size:18px; margin-top:4px; }
.progress-wrap { height:8px; background:#202a3a; border-radius:99px; overflow:hidden; margin-top:16px; }
.progress { width:0%; height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width .35s linear; }
.time-label { margin-top:7px; color:var(--muted); font-size:12px; text-align:right; }
.search-box { display:flex; gap:10px; margin-top:14px; }
.search-box input,.admin-panel input { width:100%; border:1px solid var(--line); background:#0f172a; color:#fff; border-radius:16px; padding:15px 16px; outline:none; }
.search-box input:focus,.admin-panel input:focus { border-color:#4ade80; box-shadow:0 0 0 3px rgba(74,222,128,.12); }
.results { display:grid; gap:10px; margin-top:14px; max-height:540px; overflow:auto; overscroll-behavior:contain; }
.result-item,.queue-item { display:flex; align-items:center; gap:12px; background:#0f172a; border:1px solid var(--line); border-radius:16px; padding:12px; }
.result-cover,.mini-cover { object-fit:cover; flex:0 0 auto; }
.result-cover { width:54px; height:54px; border-radius:11px; }
.mini-cover { width:42px; height:42px; border-radius:9px; }
.result-meta,.queue-meta { min-width:0; flex:1; }
.result-meta strong,.queue-meta strong { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.result-meta span,.queue-meta span { color:var(--muted); font-size:14px; }
.add-btn,.primary-btn,.danger-btn,.ghost-btn,.icon-btn,.spotify-btn { border:0; border-radius:14px; padding:12px 15px; color:white; min-height:44px; }
.add-btn,.primary-btn { background:var(--accent); color:#06280f; font-weight:900; }
.spotify-btn { background:#1ed760; color:#061b0c; font-weight:900; white-space:nowrap; }
.add-btn:hover,.primary-btn:hover,.spotify-btn:hover { filter:brightness(1.08); }
.ghost-btn,.icon-btn { background:#1f2937; }
.danger-btn { background:var(--danger); font-weight:800; }
.icon-btn { width:44px; height:44px; padding:0; }
.queue-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.queue-header h3 { margin-top:6px; }
.badge { background:#172554; color:#bfdbfe; border:1px solid #1d4ed8; border-radius:999px; padding:6px 10px; font-size:12px; font-weight:800; }
.status-pill { border-radius:999px; padding:8px 11px; font-size:12px; font-weight:800; border:1px solid var(--line); }
.status-pill.online { background:rgba(34,197,94,.12); color:#86efac; border-color:rgba(34,197,94,.3); }
.status-pill.offline { background:rgba(148,163,184,.1); color:#cbd5e1; }
.queue-list { display:grid; gap:10px; margin-top:14px; max-height:540px; overflow:auto; overscroll-behavior:contain; }
.empty-state { color:var(--muted); border:1px dashed var(--line); border-radius:16px; padding:18px; }
.queue-index { width:34px; height:34px; border-radius:10px; background:#1f2937; display:grid; place-items:center; font-weight:800; flex:0 0 auto; }
.toast { position:fixed; z-index:30; left:50%; bottom:max(24px,env(safe-area-inset-bottom)); transform:translate(-50%,20px); background:#111827; border:1px solid var(--line); border-radius:14px; padding:12px 16px; opacity:0; pointer-events:none; transition:.2s; box-shadow:0 10px 30px rgba(0,0,0,.3); max-width:min(92vw,620px); text-align:center; }
.toast.show { opacity:1; transform:translate(-50%,0); }
dialog { border:1px solid var(--line); border-radius:22px; background:#0b1020; color:#fff; width:min(92vw,460px); max-height:90vh; overflow:auto; }
dialog::backdrop { background:rgba(0,0,0,.68); }
.admin-panel { display:grid; gap:14px; }
.dialog-head { display:flex; justify-content:space-between; align-items:center; }
.admin-panel label,#adminLock { display:grid; gap:8px; color:var(--muted); }
.admin-controls { display:grid; gap:10px; padding-top:8px; }
.admin-divider { height:1px; background:var(--line); margin:4px 0; }
.hidden { display:none !important; }
.wide { width:100%; }
.hint { color:var(--muted); font-size:13px; text-align:center; line-height:1.45; }
@media (max-width:760px) {
  .app-shell { padding:12px; padding-top:max(12px,env(safe-area-inset-top)); }
  .layout { grid-template-columns:1fr; }
  .card { border-radius:20px; padding:16px; }
  .topbar { align-items:flex-start; }
  .status-pill { display:none; }
  .connect-card,.activation-card { align-items:stretch; flex-direction:column; }
  .spotify-btn,.activation-card .primary-btn { width:100%; }
  .track-row { align-items:flex-start; }
  .cover { width:80px; height:80px; font-size:34px; }
  .track-meta h2 { white-space:normal; font-size:25px; }
  .track-meta p { font-size:16px; }
  .result-item { align-items:center; }
  .result-cover { width:48px; height:48px; }
  .add-btn { align-self:center; padding-inline:12px; }
}
@media (min-width:900px) {
  .search-card,.queue-card { min-height:560px; }
}

.toggle-row{display:flex!important;align-items:center;justify-content:space-between;gap:16px;padding:14px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.035)}
.toggle-row span{flex:1}.toggle-row small{opacity:.72;line-height:1.35}.toggle-row input[type="checkbox"]{width:28px;height:28px;flex:0 0 auto;accent-color:#1ed760}

/* BezDJa v2 */
.mood-card{margin-bottom:18px}.mood-head{display:flex;align-items:center;justify-content:space-between;gap:16px}.mood-head h3{margin-top:6px}.mood-buttons{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.mood-buttons button{border:1px solid var(--line);background:#182235;color:#fff;border-radius:999px;padding:10px 13px;font-weight:800}.mood-buttons button.active{background:#1ed760;color:#061b0c;border-color:#1ed760}
.history-card{margin-top:18px}.history-list{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.history-item{display:grid;gap:3px;background:#0f172a;border:1px solid var(--line);padding:10px 12px;border-radius:13px;min-width:0}.history-item strong,.history-item span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-item span{font-size:12px;color:var(--muted)}
.result-flags{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}.explicit-badge{background:#fff;color:#111;padding:2px 5px;border-radius:4px;font-weight:900}
.queue-remove{border:0;background:#3a1b24;color:#fecaca;border-radius:10px;width:36px;height:36px;cursor:pointer}.hidden-admin{display:none}.admin-unlocked .hidden-admin{display:block}
.exit-tv{display:none;position:fixed;right:18px;top:18px;z-index:40;border:1px solid var(--line);background:#111827;color:#fff;border-radius:12px;padding:10px 14px}
body.tv-mode .top-actions,body.tv-mode .connect-card,body.tv-mode .activation-card,body.tv-mode .mood-card,body.tv-mode .search-card,body.tv-mode .queue-card,body.tv-mode .history-card{display:none!important}
body.tv-mode .layout{display:block}body.tv-mode .now-playing{min-height:calc(100vh - 120px);display:flex;flex-direction:column;justify-content:center}body.tv-mode .track-row{gap:34px}body.tv-mode .cover{width:min(34vw,420px);height:min(34vw,420px);border-radius:34px}body.tv-mode .track-meta h2{font-size:clamp(44px,7vw,92px);white-space:normal}body.tv-mode .track-meta p{font-size:clamp(24px,3vw,42px)}body.tv-mode .exit-tv{display:block}
@media(max-width:760px){.mood-head{align-items:flex-start;flex-direction:column}.mood-buttons{justify-content:flex-start}.history-list{grid-template-columns:1fr 1fr}.result-flags{display:none}}

/* BezDJa v2.2 — głosowanie */
.queue-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.vote-cooldown-info{font-size:12px;color:#86efac;border:1px solid rgba(34,197,94,.35);background:rgba(34,197,94,.08);padding:6px 9px;border-radius:999px;font-weight:800}
.vote-cooldown-info.cooldown-active{color:#fbbf24;border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.08)}
.queue-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.vote-btn{min-width:64px;height:40px;border:1px solid rgba(99,102,241,.42);background:#182235;color:#fff;border-radius:12px;font-size:16px;font-weight:900;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:transform .12s ease,opacity .12s ease,background .12s ease}
.vote-btn:not(:disabled):active{transform:scale(.95)}
.vote-btn:not(:disabled){background:#202d49}
.vote-btn:disabled{opacity:.42;cursor:not-allowed}
.vote-btn span{font-size:13px;min-width:12px}
.queue-item{gap:10px}
@media(max-width:560px){
  .queue-head-actions{justify-content:flex-start}
  .vote-cooldown-info{font-size:11px}
  .queue-actions{gap:6px}
  .vote-btn{min-width:58px;height:44px}
}

/* BezDJa v2.3 — HOT */
.queue-title-line{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:wrap}
.hot-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:999px;font-size:11px;font-weight:1000;letter-spacing:.04em;background:rgba(239,68,68,.14);border:1px solid rgba(239,68,68,.38);color:#fecaca}
.queue-item.hot-track{border-color:rgba(239,68,68,.48);background:linear-gradient(90deg, rgba(127,29,29,.13), rgba(15,23,42,.92))}
.queue-item.hot-track .vote-btn{border-color:rgba(239,68,68,.5)}

/* BezDJa v2.4 — blokada ustawień */
.admin-only-note{display:block;color:var(--muted);margin-top:5px}
body:not(.admin-unlocked) [data-mood]{position:relative;opacity:.72}
body:not(.admin-unlocked) [data-mood]::after{content:"🔒";font-size:10px;margin-left:5px}
body:not(.admin-unlocked) .admin-panel-locked{pointer-events:none;filter:blur(1.5px);opacity:.28;user-select:none}
body.admin-unlocked .admin-panel-locked{pointer-events:auto;filter:none;opacity:1}


/* BezDJa v2.6 — Losuj mnie: kompaktowy popup */
.search-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.random-mini-btn{border:1px solid rgba(99,102,241,.4);background:rgba(99,102,241,.1);color:inherit;border-radius:999px;min-height:36px;padding:6px 12px;font-weight:900;cursor:pointer;white-space:nowrap}
.random-mini-btn:active{transform:scale(.97)}

.random-dialog{width:min(680px,calc(100% - 24px));max-width:680px;border:0;padding:0;background:transparent;color:inherit}
.random-dialog::backdrop{background:rgba(2,6,23,.76);backdrop-filter:blur(4px)}
.random-dialog-shell{background:#101827;border:1px solid var(--line);border-radius:20px;padding:18px}
.random-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.random-dialog-head h2{margin:4px 0 4px;font-size:22px}
.random-dialog-head p{margin:0;color:var(--muted);font-size:13px}
.random-close-btn{flex:0 0 auto}
.random-suggestions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px}
.random-card{display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-areas:"cover meta" "button button";gap:10px;background:#0f172a;border:1px solid var(--line);border-radius:14px;padding:10px;min-width:0}
.random-cover{grid-area:cover;width:56px;height:56px;border-radius:10px;object-fit:cover;background:#182235}
.random-cover-placeholder{display:flex;align-items:center;justify-content:center;font-size:24px}
.random-meta{grid-area:meta;display:grid;align-content:center;min-width:0}
.random-meta strong,.random-meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.random-meta span,.random-meta small{color:var(--muted)}
.random-meta span{font-size:13px}
.random-meta small{font-size:11px;margin-top:3px}
.random-add-btn{grid-area:button;border:1px solid rgba(34,197,94,.42);background:rgba(34,197,94,.1);color:#dcfce7;border-radius:11px;min-height:42px;font-weight:900;cursor:pointer}
.random-add-btn:active{transform:scale(.98)}
.random-dialog-footer{display:flex;justify-content:center;margin-top:14px}

@media(max-width:680px){
  .random-dialog{width:calc(100% - 16px)}
  .random-dialog-shell{padding:14px}
  .random-suggestions{grid-template-columns:1fr}
  .random-card{grid-template-columns:54px minmax(0,1fr) auto;grid-template-areas:"cover meta button";align-items:center}
  .random-cover{width:54px;height:54px}
  .random-add-btn{min-width:92px;min-height:44px;padding:0 10px}
}
@media(max-width:430px){
  .random-mini-btn{padding:6px 10px}
  .random-card{grid-template-columns:50px minmax(0,1fr);grid-template-areas:"cover meta" "button button"}
  .random-add-btn{width:100%}
}

/* BezDJa v2.7 — odświeżenie nie gubi muzyki */
.resume-refresh-btn{border:1px solid rgba(34,197,94,.5);background:rgba(34,197,94,.12);color:#dcfce7;border-radius:999px;min-height:36px;padding:6px 12px;font-weight:900;cursor:pointer}
.resume-refresh-btn.hidden{display:none!important}

/* BezDJa v2.8 — miksowanie i jingle */
.admin-inline-actions{display:flex;gap:8px;flex-wrap:wrap}
.admin-inline-actions .ghost-btn,.admin-inline-actions .danger-btn{flex:1 1 140px}
#jingleFileInput{padding:10px}
#jingleStatus{margin-top:-4px}

/* BezDJa v2.9 — ETA */
.queue-eta{display:inline-flex;align-items:center;width:max-content;margin-top:4px;padding:3px 7px;border-radius:999px;border:1px solid rgba(34,197,94,.25);background:rgba(34,197,94,.07);color:#86efac!important;font-size:11px!important;font-weight:800}

/* BezDJa v3.0 — biblioteka losowych jingli */
.jingle-list{display:grid;gap:6px;margin:8px 0 12px}
.jingle-list-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);background:#0f172a;border-radius:10px;padding:7px 9px;font-size:12px}
.jingle-list-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jingle-remove-one{flex:0 0 auto;width:32px;height:32px;border-radius:8px;border:1px solid rgba(239,68,68,.35);background:rgba(239,68,68,.08);color:#fecaca;cursor:pointer}

/* BezDJa v4.0 — QR / telefony */
.guest-qr-card{display:flex;align-items:center;justify-content:space-between;gap:22px}
.guest-qr-copy{min-width:0;flex:1}
.guest-qr-copy h3{margin:4px 0 6px}
.guest-qr-copy p{margin:0;opacity:.78}
.guest-room-label{display:inline-flex;margin-top:10px;padding:5px 9px;border:1px solid var(--line);border-radius:999px;font-size:12px;font-weight:800}
.guest-qr{flex:0 0 auto;background:#fff;padding:10px;border-radius:14px;min-width:200px;min-height:200px;display:grid;place-items:center}
.guest-qr img,.guest-qr canvas{display:block}
@media(max-width:700px){.guest-qr-card{flex-direction:column;text-align:center}.guest-qr{margin:auto}}

/* BezDJa v4.1 — QR zawsze widoczny */
.guest-qr-card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(34,197,94,.32);
  background:linear-gradient(135deg,rgba(34,197,94,.08),rgba(15,23,42,.94));
}
.guest-qr-card::before{
  content:"📱 ZAMÓW Z TELEFONU";
  position:absolute;
  top:10px;
  right:12px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  opacity:.7;
}
.guest-qr-copy h3{font-size:20px}
.guest-qr{box-shadow:0 10px 30px rgba(0,0,0,.22)}
.guest-qr-placeholder{
  width:180px;
  height:180px;
  display:grid;
  place-items:center;
  text-align:center;
  color:#0f172a;
  font-size:42px;
  line-height:1.2;
}
.guest-qr-placeholder small{
  display:block;
  max-width:140px;
  font-size:12px;
  font-weight:900;
}
@media(max-width:700px){
  .guest-qr-card::before{position:static;display:block;margin-bottom:8px}
  .guest-qr{min-width:180px;min-height:180px}
}