:root{--primary:#ff2b8a;--secondary:#6d3cff;--accent:#ffd166;--bg:#060611;--panel:rgba(18,18,36,.82);--panel-strong:#111126;--text:#f8f7ff;--muted:#b6b4c7;--line:rgba(255,255,255,.11);--radius:22px;--shadow:0 24px 70px rgba(0,0,0,.4)}
*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}body{margin:0;min-height:100vh;color:var(--text);font-family:Inter,Arial,Helvetica,sans-serif;background:radial-gradient(circle at 12% 10%,rgba(109,60,255,.24),transparent 32%),radial-gradient(circle at 88% 4%,rgba(255,43,138,.2),transparent 30%),linear-gradient(180deg,#090919,#05050d);overflow-x:hidden}body::before{content:"";position:fixed;inset:0;background-size:cover;background-position:center;z-index:-2}body::after{content:"";position:fixed;inset:0;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:46px 46px;mask-image:linear-gradient(to bottom,#000,transparent 82%);z-index:-1;pointer-events:none}button,input,a{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;color:inherit}.hidden{display:none!important}.glass{background:linear-gradient(145deg,rgba(28,28,56,.84),rgba(11,11,27,.88));border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(18px)}.app-shell{width:min(1500px,calc(100% - 32px));margin:0 auto;padding:24px 0 30px}.topbar{border-radius:var(--radius);padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand-wrap{display:flex;align-items:center;gap:18px;min-width:0}.brand-logo{width:78px;height:78px;object-fit:contain;border-radius:18px;background:rgba(255,255,255,.05);padding:6px}.eyebrow{display:block;color:var(--accent);font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em}.topbar h1{margin:3px 0 4px;font-size:clamp(1.55rem,3vw,2.55rem);line-height:1}.topbar p{margin:0;color:var(--muted)}.top-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px}.device-strip{margin-top:12px;border-radius:16px;padding:11px 16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;color:var(--muted);box-shadow:none}.device-strip strong{color:#fff;letter-spacing:.08em}.admin-link{margin-left:auto;color:var(--muted);text-decoration:none}.badge{display:inline-flex;align-items:center;border:1px solid var(--line);background:rgba(255,255,255,.055);border-radius:999px;padding:6px 10px;font-size:.8rem}.search-panel{margin-top:16px;border-radius:var(--radius);padding:16px}.search-row{display:grid;grid-template-columns:minmax(220px,1fr) auto auto auto;gap:10px}.search-row input,.dialog-card input{width:100%;border:1px solid var(--line);background:#0d0d20;color:#fff;border-radius:14px;padding:15px 16px;outline:none}.search-row input:focus,.dialog-card input:focus{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 20%,transparent)}button,.ghost,.primary,.secondary{border:1px solid var(--line);border-radius:13px;padding:12px 16px;background:rgba(255,255,255,.06);font-weight:800;transition:.18s ease}.primary{background:linear-gradient(135deg,var(--primary),color-mix(in srgb,var(--secondary) 65%,var(--primary)));border-color:transparent;box-shadow:0 10px 26px color-mix(in srgb,var(--primary) 24%,transparent)}.secondary{background:rgba(109,60,255,.18)}button:hover,a:hover{transform:translateY(-1px);filter:brightness(1.08)}button:focus-visible,a:focus-visible,input:focus-visible,.song-card:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.categories{display:flex;gap:9px;overflow:auto;padding:13px 2px 1px;scrollbar-width:thin}.categories button{white-space:nowrap;padding:9px 14px;border-radius:999px}.main-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;margin-top:18px}.content-panel{min-width:0}.section-title{display:flex;align-items:end;justify-content:space-between;margin:2px 2px 12px}.section-title h2{margin:4px 0 0}.muted{color:var(--muted)}.song-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:15px}.song-card{min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:linear-gradient(150deg,rgba(30,30,58,.95),rgba(11,11,25,.96));box-shadow:0 14px 34px rgba(0,0,0,.24);transition:.18s ease}.song-card:hover,.song-card:focus{transform:translateY(-4px);border-color:color-mix(in srgb,var(--primary) 70%,white 8%)}.song-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;background:#151529;display:block}.song-body{padding:13px}.song-body h3{font-size:.98rem;line-height:1.3;margin:0 0 7px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.55em}.song-body p{margin:0;color:var(--muted);font-size:.83rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-actions{display:grid;grid-template-columns:1fr auto auto;gap:7px;margin-top:12px}.song-actions button{padding:9px 10px;font-size:.82rem}.side-panel{border-radius:var(--radius);padding:17px;height:max-content;position:sticky;top:12px}.side-panel section+section{border-top:1px solid var(--line);margin-top:18px;padding-top:16px}.side-panel h3{margin:0 0 10px;font-size:1rem}.side-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.mini{padding:6px 9px;border-radius:9px;font-size:.75rem}.compact-list{margin:0;padding-left:22px;display:grid;gap:9px}.compact-list li{padding-left:2px;line-height:1.25}.compact-list small{color:var(--muted)}.queue-item{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}.queue-item button{padding:4px 7px;font-size:.7rem}.empty-state{grid-column:1/-1;border:1px dashed var(--line);border-radius:18px;padding:40px;text-align:center;color:var(--muted);background:rgba(255,255,255,.025)}.sponsor-strip{margin-top:18px;border-radius:18px;padding:14px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}.sponsor-strip>div{min-width:150px;text-align:center}.sponsor-strip span{display:block;color:var(--muted);font-size:.78rem;margin-top:3px}footer{text-align:center;color:var(--muted);font-size:.78rem;padding:24px 10px 0}.dialog,.stage{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:18px;background:rgba(0,0,0,.78);backdrop-filter:blur(11px)}.dialog-card,.stage-card,.score-card{width:min(560px,100%);border-radius:26px;padding:26px}.center{text-align:center}.dialog-card h2,.stage-card h1,.score-card h2{margin:8px 0 16px}.dialog-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:18px}.avatar-grid{display:flex;justify-content:center;gap:10px;margin-top:14px}.avatar{font-size:1.6rem;padding:10px 13px}.avatar.selected{border-color:var(--accent);background:rgba(255,209,102,.15)}.qr-image{width:230px;height:230px;max-width:100%;border-radius:16px;background:#fff;padding:10px}.break-url{word-break:break-all;color:var(--muted);font-size:.78rem}.stage{overflow:hidden;background:radial-gradient(circle at center,rgba(255,43,138,.28),rgba(0,0,0,.88) 56%)}.stage-light{position:absolute;top:-20%;width:38vw;height:120%;background:linear-gradient(to bottom,rgba(255,255,255,.34),transparent 72%);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);filter:blur(12px);animation:sway 3.5s ease-in-out infinite alternate}.stage-card{position:relative;z-index:2}.big-avatar{font-size:4.8rem}.countdown{font-size:5rem;font-weight:950;color:var(--accent);text-shadow:0 0 30px color-mix(in srgb,var(--accent) 55%,transparent)}@keyframes sway{from{transform:translateX(-18%) rotate(-5deg)}to{transform:translateX(18%) rotate(5deg)}}.player-modal{position:fixed;inset:0;z-index:90;background:#000;display:block;overflow:hidden;width:100vw;height:100vh}.video-wrap{position:absolute;inset:0;z-index:1;width:100vw;height:100vh;background:#000}.video-wrap iframe{position:absolute;inset:0;width:100vw;height:100vh;border:0;background:#000}.player-bar{position:absolute;left:0;right:0;top:0;z-index:4;padding:10px 14px;background:linear-gradient(180deg,rgba(3,3,10,.96),rgba(3,3,10,.82),transparent);display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;border-bottom:1px solid rgba(255,255,255,.12);transition:opacity .25s ease,transform .25s ease}.player-bar>div:first-child{display:grid;min-width:0}.player-bar span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-status,.player-actions{display:flex;gap:9px;align-items:center}.player-actions button{padding:9px 11px}.player-modal.controls-hidden .player-bar{opacity:0;transform:translateY(-110%);pointer-events:none}.player-hint{position:absolute;left:50%;bottom:26px;z-index:5;transform:translateX(-50%);max-width:min(92vw,720px);padding:10px 16px;border-radius:999px;background:rgba(0,0,0,.72);color:#fff;text-align:center;font-size:.84rem;opacity:1;transition:opacity .35s ease;pointer-events:none}.player-modal.controls-hidden .player-hint{opacity:0}.player-modal:fullscreen,.player-modal:-webkit-full-screen{width:100vw;height:100vh;background:#000}.player-modal:fullscreen .video-wrap,.player-modal:-webkit-full-screen .video-wrap,.player-modal:fullscreen iframe,.player-modal:-webkit-full-screen iframe{width:100vw;height:100vh}.score-card{width:min(670px,100%)}.celebration{font-size:2rem;letter-spacing:.2em;animation:pulse 1s ease-in-out infinite alternate}.score-number{font-size:clamp(5rem,16vw,9rem);font-weight:950;line-height:1;color:var(--accent);text-shadow:0 0 35px color-mix(in srgb,var(--accent) 60%,transparent)}.score-stars{font-size:1.7rem;color:var(--accent);letter-spacing:.12em}.metric-list{display:grid;gap:10px;text-align:left;margin-top:20px}.metric-list>div{display:grid;grid-template-columns:130px 1fr 42px;gap:10px;align-items:center;font-size:.84rem}.meter{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}.meter i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--secondary),var(--primary),var(--accent));border-radius:inherit;transition:width 1s ease}.toast{position:fixed;left:50%;bottom:24px;z-index:120;transform:translateX(-50%);background:#17172b;color:#fff;border:1px solid var(--line);box-shadow:var(--shadow);padding:12px 18px;border-radius:13px;max-width:min(90vw,540px);text-align:center}.offline-banner{position:fixed;left:0;right:0;top:0;z-index:130;background:#a52a2a;color:#fff;text-align:center;padding:8px}.loading-card{aspect-ratio:16/9;border-radius:18px;background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.1),rgba(255,255,255,.04));background-size:200% 100%;animation:shimmer 1.2s linear infinite}@keyframes shimmer{to{background-position:-200% 0}}@keyframes pulse{to{transform:scale(1.07)}}
body[data-theme="igreja"]{--primary:#d9a441;--secondary:#5a3e9d;--accent:#fff0a6}body[data-theme="infantil"]{--primary:#ff5e7d;--secondary:#3f8cff;--accent:#ffe35d}body[data-theme="luxo"]{--primary:#d7b56d;--secondary:#33244f;--accent:#fff0b8}
@media(max-width:1050px){.main-grid{grid-template-columns:1fr}.side-panel{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.side-panel section+section{border-top:0;margin-top:0;padding-top:0}.search-row{grid-template-columns:1fr auto auto}.search-row #surpriseBtn{grid-column:2/4}}
@media(max-width:720px){.app-shell{width:min(100% - 18px,1500px);padding-top:10px}.topbar{align-items:flex-start;padding:17px;flex-direction:column}.brand-logo{width:58px;height:58px}.top-actions{justify-content:flex-start}.search-row{grid-template-columns:1fr 1fr}.search-row input{grid-column:1/-1}.search-row button{padding:11px 8px;font-size:.82rem}.main-grid{margin-top:14px}.song-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.song-body{padding:10px}.song-actions{grid-template-columns:1fr auto}.song-actions .queue-action{grid-column:1/-1}.side-panel{grid-template-columns:1fr}.player-bar{grid-template-columns:1fr auto}.player-actions{grid-column:1/-1;justify-content:space-between}.player-actions button{font-size:.78rem;padding:8px}.player-status{align-self:start}.metric-list>div{grid-template-columns:100px 1fr 38px}.device-strip .admin-link{margin-left:0}.dialog-card,.stage-card,.score-card{padding:20px}.countdown{font-size:4rem}}
@media(max-width:420px){.song-grid{grid-template-columns:1fr}.top-actions button{flex:1}.song-body h3{min-height:auto}.device-strip{font-size:.78rem}.player-bar{padding:8px}.player-actions #favoriteCurrentBtn{display:none}}
@media(hover:none){button:hover,a:hover,.song-card:hover{transform:none}}