/* style.css V13 - PWA + Pesquisa + GC */
[hidden]{ display:none !important; }
#qrModal[hidden], #playerOverlay[hidden], #activePlaylist[hidden]{ display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; }
*{ margin:0; padding:0; box-sizing:border-box; }
body{ font-family:'Outfit', system-ui, sans-serif; background:#0a0a0f; color:#fff; min-height:100vh; padding:16px; padding-bottom:90px; line-height:1.5; -webkit-font-smoothing:antialiased; }
a{ color:#ff8cc8; text-decoration:none; } a:hover{color:#ffb3d9;}
button{ cursor:pointer; font-family:inherit; }
::-webkit-scrollbar{width:6px;height:6px;} ::-webkit-scrollbar-track{background:rgba(255,255,255,0.05);border-radius:8px;} ::-webkit-scrollbar-thumb{background:#ff0080;border-radius:8px;}
.app{ max-width:1400px; margin:0 auto; }
.header{ display:flex; justify-content:space-between; align-items:center; padding:14px 20px; background:rgba(255,255,255,0.06); border-radius:16px; margin-bottom:16px; flex-wrap:wrap; gap:10px; backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.05); }
.logo{ font-size:1.6rem; font-weight:900; background:linear-gradient(135deg,#ff0080,#ff6b8a); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.logo span{ font-weight:400; -webkit-text-fill-color:#888; }
.actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.badge{ background:rgba(255,255,255,0.1); padding:6px 12px; border-radius:20px; font-size:0.75rem; font-weight:600; color:#ccc; white-space:nowrap; }
.badge.tenant{ background:rgba(255,0,128,0.2); color:#ff8cc8; } .badge.user{ background:rgba(100,200,255,0.15); color:#6bcbff; }
.toggle-switch{ display:flex; align-items:center; gap:6px; font-size:0.8rem; color:#aaa; cursor:pointer; }
.toggle-switch input[type="checkbox"]{ appearance:none; width:40px; height:22px; background:#333; border-radius:12px; position:relative; transition:background 0.3s; flex-shrink:0; }
.toggle-switch input[type="checkbox"]::after{ content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; background:#888; border-radius:50%; transition:transform 0.3s; }
.toggle-switch input[type="checkbox"]:checked{ background:#ff0080; } .toggle-switch input[type="checkbox"]:checked::after{ transform:translateX(18px); background:#fff; }
.btn{ border:0; border-radius:8px; padding:8px 16px; background:#2a2a35; color:#fff; font-weight:700; font-size:0.85rem; transition:background 0.2s; }
.btn:hover{ background:#3a3a48; } .btn.primary{ background:#ff0080; } .btn.primary:hover{ background:#e60073; }
.btn.small{ font-size:0.75rem; padding:4px 10px; } .btn.danger{ background:#ff0040; } .btn.success{ background:#00d2a0; }
.search-wrap{ margin-bottom:20px; } .search-box{ display:flex; gap:10px; margin-bottom:10px; }
.search-box input{ flex:1; padding:14px 18px; border-radius:12px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.06); color:#fff; font-size:1rem; outline:none; }
.search-box input:focus{ border-color:#ff0080; box-shadow:0 0 0 3px rgba(255,0,128,0.2); }
.search-box button{ padding:14px 28px; border:0; border-radius:12px; background:#ff0080; color:#fff; font-weight:700; font-size:1rem; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; } .chips button{ padding:6px 16px; border-radius:20px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.04); color:#ccc; font-size:0.8rem; }
.chips button:hover{ background:rgba(255,0,128,0.15); border-color:#ff0080; color:#fff; }
.status{ font-size:0.85rem; color:#888; padding:4px 0; }
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; } @media (max-width:1024px){ .grid{grid-template-columns:1fr;} }
.results-area{ margin-bottom:20px; min-height:50px; }
.results{ display:flex; flex-direction:column; gap:10px; max-height:600px; overflow-y:auto; padding-right:4px; padding:4px; }
.result-card{ display:flex; gap:14px; background:rgba(255,255,255,0.06); border-radius:14px; padding:12px; border:1px solid rgba(255,255,255,0.08); transition:all 0.2s; }
.result-card:hover{ background:rgba(255,255,255,0.1); border-color:rgba(255,0,128,0.4); transform:translateY(-1px); }
.result-card img{ width:160px; height:90px; object-fit:cover; border-radius:10px; flex-shrink:0; background:#222; display:block; }
.result-card .info{ flex:1; min-width:0; } .result-card .info h4{ font-size:0.95rem; font-weight:700; margin-bottom:4px; line-height:1.3; }
.result-card .info p{ font-size:0.8rem; color:#aaa; margin-bottom:8px; }
.result-card .actions{ display:flex; gap:8px; flex-wrap:wrap; }
.queue-area, .playlists-area, .requests-area, .ranking-area{ background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); border-radius:16px; padding:16px; margin-bottom:16px; }
.section-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; flex-wrap:wrap; gap:8px; }
.count-badge{ background:#ff0080; color:#fff; padding:2px 8px; border-radius:12px; font-size:0.75rem; margin-left:6px; }
.queue-list, .playlists-list, .requests-list, #rankingList, #activePlaylistItems{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.queue-list li, .requests-list .request-card, .playlists-list div, #activePlaylistItems li, #rankingList div{ background:rgba(255,255,255,0.05); border-radius:10px; padding:10px 12px; font-size:0.85rem; display:flex; justify-content:space-between; align-items:center; gap:8px; border:1px solid rgba(255,255,255,0.05); }
.request-card.new{ animation: newPulse 2s ease; }
@keyframes newPulse{ 0%{ background:rgba(110,255,184,0.3); } 100%{ background:rgba(255,255,255,0.05); } }
.player-overlay{ position:fixed; top:0; left:0; width:100%; height:100%; background:#000; z-index:9999; display:none; flex-direction:column; }
.player-overlay:not([hidden]){ display:flex !important; }
#player{ flex:1; width:100%; background:#000; }
.player-ui{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; pointer-events:none; padding:20px; background:linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.8) 100%); }
.player-top, .player-bottom{ pointer-events:auto; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.player-top h2{ font-size:1.4rem; text-shadow:0 2px 10px rgba(0,0,0,0.8); } .player-top p{ font-size:0.9rem; color:#ccc; }
.player-top-actions{ display:flex; gap:8px; align-items:center; }
.like-btn, .close-btn{ border:0; border-radius:20px; padding:8px 16px; font-weight:700; backdrop-filter:blur(8px); }
.like-btn{ background:rgba(255,0,128,0.3); color:#fff; border:1px solid rgba(255,0,128,0.5); } .close-btn{ background:rgba(255,255,255,0.15); color:#fff; }
.controls{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; } .controls button{ border:0; border-radius:8px; padding:6px 14px; background:rgba(255,255,255,0.08); color:#ddd; font-weight:600; font-size:0.85rem; }
.controls #micBtn{ background:rgba(255,200,0,0.15); color:#ffd700; } .score-status{ font-size:0.85rem; color:#aaa; margin-left:6px; }
.live-badge{ font-size:0.85rem; color:#6effb8; background:rgba(0,255,136,0.1); padding:4px 12px; border-radius:20px; }
#scorePanel{ display:flex; align-items:center; gap:8px; background:rgba(0,0,0,0.5); padding:4px 12px; border-radius:20px; border:1px solid rgba(255,215,0,0.3); }
#micDot{ width:10px; height:10px; background:#ff0040; border-radius:50%; opacity:0.3; transition:all 0.2s; } #micDot.live{ background:#00ff88; box-shadow:0 0 10px #00ff88; animation: pulse 1s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.5; } }
#micBar{ height:4px; background:linear-gradient(90deg,#ffd700,#ff0080); border-radius:2px; width:0%; transition:width 0.2s; max-width:100px; }
.qr-modal{ position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); backdrop-filter:blur(8px); z-index:100000; display:none; align-items:center; justify-content:center; }
.qr-modal:not([hidden]){ display:flex !important; }
.qr-content{ background:#1a1a24; border-radius:24px; padding:24px; max-width:480px; width:90%; border:1px solid rgba(255,255,255,0.1); box-shadow:0 20px 60px rgba(0,0,0,0.8); }
.qr-header{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px; }
.qr-header h2{ font-size:1.3rem; } .qr-header p{ color:#aaa; font-size:0.85rem; margin:4px 0 0; }
.qr-header .close-x{ background:transparent; border:0; color:#aaa; font-size:1.8rem; }
.qr-body{ text-align:center; } .qr-body img{ max-width:100%; border-radius:12px; background:#fff; padding:8px; }
.qr-body p{ font-size:0.8rem; color:#888; word-break:break-all; margin:12px 0; }
.qr-body > div{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.qr-body > div button, .qr-body > div a{ border:0; border-radius:8px; padding:8px 16px; background:rgba(255,255,255,0.08); color:#ddd; font-weight:600; font-size:0.8rem; }
#ticker-bar{ position:fixed; bottom:0; left:0; width:100%; height:72px; background:rgba(0,0,0,0.96); backdrop-filter:blur(12px); border-top:4px solid #ff0080; box-shadow:0 -6px 30px rgba(0,0,0,0.9); z-index:99999; display:flex !important; align-items:center; overflow:hidden; transform:translateY(110%); opacity:0; transition:transform 0.45s cubic-bezier(0.34,1.2,0.64,1), opacity 0.35s ease; pointer-events:none; }
#ticker-bar.show{ transform:translateY(0); opacity:1; pointer-events:auto; }
#ticker-bar.hidden{ transform:translateY(110%); opacity:0; pointer-events:none; display:flex !important; }
.ticker-track{ display:inline-flex; align-items:center; gap:18px; white-space:nowrap; will-change:transform; position:absolute; top:0; left:0; height:100%; transform:translateX(100vw); }
.ticker-icon{ font-size:2.2rem; flex-shrink:0; }
.ticker-text{ font-family:'Outfit', system-ui; font-size:1.55rem; font-weight:800; color:#fff; text-shadow:0 0 20px rgba(255,255,255,0.25), 0 2px 4px rgba(0,0,0,0.8); white-space:nowrap; }
#ticker-bar.type-request{ border-top-color:#6effb8; } #ticker-bar.type-like{ border-top-color:#ff6b8a; }
#ticker-bar.type-vote{ border-top-color:#ffb86b; } #ticker-bar.type-score{ border-top-color:#ffd700; }
#ticker-bar.type-info{ border-top-color:#6bcbff; }
.player-overlay:fullscreen #ticker-bar{ position:absolute !important; bottom:0 !important; left:0 !important; width:100% !important; z-index:2147483647 !important; }
.player-overlay #ticker-bar{ position:absolute; bottom:0; left:0; width:100%; z-index:2147483647; }
#rankingList div{ display:flex; flex-direction:column; align-items:stretch; gap:4px; background:linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border-left:3px solid #ff0080; }
#rankingList div.top1{ border-left-color:#ffd700; background:linear-gradient(135deg, rgba(255,215,0,0.15), rgba(255,255,255,0.02)); }
#rankingList div.top2{ border-left-color:#c0c0c0; } #rankingList div.top3{ border-left-color:#cd7f32; }
.ranking-main{ display:flex; justify-content:space-between; align-items:center; width:100%; }
.ranking-stats{ display:flex; gap:8px; font-size:0.7rem; color:#aaa; }
.ranking-stats span{ background:rgba(255,255,255,0.08); padding:2px 6px; border-radius:10px; }
.ranking-score{ font-weight:900; color:#ffd700; }
@media (max-width:768px){
  #ticker-bar{height:62px;} .ticker-text{font-size:1.2rem;} .ticker-icon{font-size:1.7rem;}
  body{padding:10px; padding-bottom:80px;} .header{flex-direction:column; align-items:stretch;}
  .actions{justify-content:center;} .search-box{flex-direction:column;} .search-box button{width:100%;}
  .result-card{flex-direction:column;} .result-card img{width:100%; height:auto; aspect-ratio:16/9;}
}
.hidden{ display:none !important; } #ticker-bar.hidden{ display:flex !important; }

/* ===== V17 tema claro/escuro + player nav ===== */
:root, [data-theme="dark"] {
  --bg: #0a0a0f; --card: rgba(255,255,255,0.06); --fg: #f4f1f6; --muted: #9a93a3;
  --pink: #ff0080; --gold: #ffd700; --line: rgba(255,255,255,0.1); --surface-2: #1e1e2a;
}
[data-theme="light"] {
  --bg: #f5f3f8; --card: rgba(255,255,255,0.9); --fg: #1a1520; --muted: #6b6575;
  --pink: #e00070; --gold: #c9a000; --line: rgba(0,0,0,0.1); --surface-2: #f0eef5;
}
[data-theme="light"] body { background: var(--bg); color: var(--fg); }
[data-theme="light"] .header, [data-theme="light"] .queue-area,
[data-theme="light"] .playlists-area, [data-theme="light"] .requests-area,
[data-theme="light"] .ranking-area, [data-theme="light"] .result-card {
  background: var(--card); border-color: var(--line); color: var(--fg);
}
[data-theme="light"] input, [data-theme="light"] select {
  background: var(--surface-2); color: var(--fg); border-color: var(--line);
}
.fab-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 56px; height: 80px; border: 0; border-radius: 16px;
  background: rgba(0,0,0,0.5); color: #fff; font-size: 2rem; font-weight: 900;
  z-index: 10001; pointer-events: auto; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.2);
}
.fab-prev { left: 12px; } .fab-next { right: 12px; }
.fab-nav:hover, .fab-nav:active { background: rgba(255,0,128,0.55); }
.countdown-overlay {
  position: absolute; inset: 0; z-index: 10002;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.88); color: #fff;
}
.countdown-overlay[hidden] { display: none !important; }
.countdown-label { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: #aaa; }
.countdown-num { font-size: 6rem; font-weight: 900; color: #ff0080; line-height: 1; }
@media (max-width: 768px) {
  .fab-nav { width: 48px; height: 72px; }
}

/* ===== v17.1 selects legíveis (opções visíveis no dropdown) ===== */
select,
.venue-select,
#modeSelect,
#venueSelect {
  background-color: #1e1e2a !important;
  color: #f4f1f6 !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
}
select option,
.venue-select option,
#modeSelect option,
#venueSelect option {
  background-color: #1e1e2a !important;
  color: #f4f1f6 !important;
}
[data-theme="light"] select,
[data-theme="light"] .venue-select,
[data-theme="light"] #modeSelect,
[data-theme="light"] #venueSelect {
  background-color: #ffffff !important;
  color: #1a1520 !important;
  border-color: rgba(0,0,0,0.15) !important;
}
[data-theme="light"] select option,
[data-theme="light"] .venue-select option,
[data-theme="light"] #modeSelect option,
[data-theme="light"] #venueSelect option {
  background-color: #ffffff !important;
  color: #1a1520 !important;
}