:root{--accent:#ef406a;--accent-light:#ff7798;--accent-secondary:#8958ff;--background:#0c0a18;--border:#ffffff1a;--surface-raised:#ffffff14;--text-primary:#f9f7ff;--text-secondary:#aaa4bc;background:var(--background);color:var(--text-primary);font-synthesis:none;text-rendering:optimizelegibility;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html{background:var(--background)}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid var(--accent-light);outline-offset:3px}.visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.app-shell{min-height:100vh}.app-header{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--border);z-index:10;background:#0c0a18d1;justify-content:space-between;align-items:center;padding:18px clamp(20px,5vw,72px);display:flex;position:sticky;top:0}.brand{color:var(--text-primary);letter-spacing:-.03em;align-items:center;gap:10px;font-size:20px;font-weight:800;text-decoration:none;display:inline-flex}.brand-mark{border-radius:11px;flex-shrink:0;width:36px;height:36px;display:block;box-shadow:0 8px 32px #ef406a47}.primary-navigation{gap:6px;display:flex}.primary-navigation a{color:var(--text-secondary);border-radius:10px;padding:10px 14px;font-size:14px;font-weight:700;text-decoration:none}.primary-navigation a:hover,.primary-navigation a.active{background:var(--surface-raised);color:var(--text-primary)}.app-content{max-width:1280px;margin:0 auto;padding:clamp(32px,6vw,80px) clamp(20px,5vw,72px)}.page-heading{justify-content:space-between;align-items:flex-end;gap:24px;display:flex}.eyebrow{color:var(--accent-light);letter-spacing:.16em;text-transform:uppercase;margin:0 0 12px;font-size:12px;font-weight:800}h1,h2,p{margin-top:0}h1{letter-spacing:-.06em;margin-bottom:18px;font-size:clamp(36px,6vw,72px);line-height:.98}.page-description{color:var(--text-secondary);max-width:590px;line-height:1.6}.primary-button,.secondary-button{border-radius:12px;justify-content:center;padding:14px 20px;font-size:14px;font-weight:800;text-decoration:none;display:inline-flex}.primary-button{background:linear-gradient(135deg, var(--accent), var(--accent-secondary));color:#fff}.secondary-button{background:var(--surface-raised);border:1px solid var(--border);color:var(--text-primary)}.empty-state{border:1px solid var(--border);text-align:center;background:linear-gradient(145deg,#ffffff0e,#ffffff05);border-radius:28px;flex-direction:column;align-items:center;min-height:330px;margin-top:52px;padding:48px 24px;display:flex}.empty-state-icon{color:var(--accent-light);background:#ef406a1f;border:1px solid #ef406a4d;border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;margin-bottom:24px;font-size:30px;display:flex}.empty-state h2{margin-bottom:10px}.empty-state p,.player-copy p{color:var(--text-secondary)}.player-stage{aspect-ratio:16/9;border:1px solid var(--border);text-align:center;background:radial-gradient(circle at 75% 25%,#8958ff3d,#0000 32%),radial-gradient(circle at 20% 70%,#ef406a33,#0000 36%),#080710;border-radius:28px;flex-direction:column;justify-content:center;align-items:center;min-height:400px;padding:40px;display:flex;overflow:hidden}.player-placeholder{background:#ffffff14;border:1px solid #ffffff24;border-radius:50%;justify-content:center;align-items:center;width:88px;height:88px;margin-bottom:28px;padding-left:6px;display:flex}.player-copy h1{font-size:clamp(34px,5vw,64px)}.login-page{background:radial-gradient(circle at 20% 20%, #ef406a36, transparent 32%), radial-gradient(circle at 80% 80%, #8958ff33, transparent 34%), var(--background);justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.login-card{border:1px solid var(--border);background:#141123d6;border-radius:30px;max-width:580px;padding:clamp(32px,7vw,64px);box-shadow:0 32px 100px #00000059}.login-brand{margin-bottom:56px}.auth-form{gap:12px;display:grid}.auth-form input{background:var(--background);border:1px solid var(--border);color:var(--text-primary);font:inherit;border-radius:8px;width:100%;min-width:0;padding:12px}.auth-error{color:#ffacba;overflow-wrap:anywhere}.user-menu{overflow-wrap:anywhere;flex-wrap:wrap;align-items:center;gap:16px;display:flex}button{cursor:pointer;font:inherit}button:disabled{cursor:wait;opacity:.6}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--accent-light);outline-offset:3px}.login-card h1{font-size:clamp(42px,7vw,76px)}.device-login{border-top:1px solid var(--border);margin-top:40px;padding-top:24px}.device-login h2{font-size:22px}.device-login p{color:var(--text-secondary);margin:8px 0 20px}.device-login-code{background:#fff;border-radius:18px;justify-content:center;align-items:center;min-height:220px;margin-top:20px;padding:16px;display:flex}.device-login-code img{width:min(100%,260px);height:auto}.device-login-code span{color:#141123}.device-login-key{letter-spacing:2px;margin-top:16px;font-size:18px}.pair-actions{flex-wrap:wrap;gap:12px;margin:24px 0;display:flex}.app-shell.is-display .app-header,.app-shell.is-display .player-page>h1,.app-shell.is-display .current-song,.app-shell.is-display .connection-status.is-connected{display:none}.app-shell.is-display .app-content{max-width:none;padding:0}.app-shell.is-display .queue-state{bottom:0;pointer-events:none;z-index:3;margin:0;padding:12px 16px;position:fixed;inset-inline:0}.admin-panel{border:1px solid var(--border);background:#141123d6;border-radius:24px;max-width:580px;margin-top:40px;padding:clamp(24px,5vw,40px)}.admin-catalog-panel{max-width:none}.admin-catalog-panel>input{background:var(--background);border:1px solid var(--border);color:var(--text-primary);font:inherit;border-radius:8px;width:min(100%,580px);margin:8px 0 16px;padding:12px}.admin-song-table-wrap{overflow-x:auto}.admin-song-table{border-collapse:collapse;width:100%;min-width:720px}.admin-song-table th,.admin-song-table td{border-bottom:1px solid var(--border);text-align:left;padding:12px 8px}.admin-song-table th{color:var(--text-secondary);text-transform:uppercase;font-size:12px}.admin-song-table td:last-child,.admin-song-table th:last-child{text-align:right}.admin-panel h2{margin-bottom:24px}.admin-notice,.app-notice{color:#8de8bd;overflow-wrap:anywhere}@media (width<=640px){.app-header,.page-heading{flex-direction:column;align-items:stretch}.app-header{gap:14px}.primary-navigation a{text-align:center;flex:1}.player-stage{aspect-ratio:auto;min-height:520px;padding:24px}}.queue-state{margin-top:24px}.guest-access{border:1px solid var(--border);background:#8958ff1a;border-radius:20px;margin-top:24px;padding:20px}.guest-access-heading{justify-content:space-between;align-items:center;gap:20px;display:flex}.guest-access-heading h2{margin:0 0 6px;font-size:20px}.guest-access-heading p{color:var(--text-secondary);margin:0}.guest-access-actions{flex-wrap:wrap;gap:8px;display:flex}.guest-access-feedback{color:#8de8bd;overflow-wrap:anywhere;margin:16px 0 0}.guest-access-feedback.is-error{color:#ffacba}.guest-access-code{text-align:center;flex-direction:column;align-items:center;gap:10px;padding-top:18px;display:flex}.guest-access-code img{background:#fff;border-radius:12px;width:min(260px,70vw);height:min(260px,70vw);padding:10px;display:block}.guest-access-code small{color:var(--text-secondary)}.connection-status{color:var(--text-secondary);font-size:14px}.connection-status:before{background:var(--accent-light);content:"";border-radius:50%;width:8px;height:8px;margin-right:8px;display:inline-block}.connection-status.is-connected:before{background:#83dab3}.current-song{border:1px solid var(--border);background:linear-gradient(110deg,#8958ff2e,#ef406a14);border-radius:20px;padding:24px}.current-song .song-details strong{font-size:24px}.current-song .queue-hint{margin:16px 0 0}.queue-feedback{color:var(--text-secondary);overflow-wrap:anywhere;min-height:44px;padding:12px 0}.queue-columns{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start;gap:24px;display:grid}.queue-panel{border:1px solid var(--border);background:#ffffff06;border-radius:20px;min-width:0;padding:24px}.queue-panel-heading{justify-content:space-between;align-items:center;gap:12px;display:flex}.queue-panel h2{font-size:22px}.clear-queue-button{flex-shrink:0}.queue-count{color:var(--text-secondary);margin-left:8px;font-size:16px}.search-label{margin-bottom:10px;font-size:14px;display:block}.song-search{background:var(--background);border:1px solid var(--border);color:var(--text-primary);border-radius:12px;width:100%;min-height:48px;padding:12px}.queue-hint{color:var(--text-secondary);margin:12px 0;font-size:14px;line-height:1.5}.song-list{margin:0;padding:0;list-style:none}.song-row{border-top:1px solid var(--border);align-items:center;gap:12px;padding:18px 0;display:flex}.song-details{overflow-wrap:anywhere;flex:1;gap:6px;min-width:0;display:grid}.song-details strong{font-size:16px}.song-details span{color:var(--text-secondary);font-size:14px}.song-row button{flex-shrink:0;min-height:44px}.queue-row{flex-wrap:wrap}.queue-position{color:var(--text-secondary);min-width:20px;font-size:14px}.queue-actions{flex-wrap:wrap;gap:8px;width:100%;display:flex}.queue-actions .primary-button{border:1px solid #0000;flex:1}.icon-button{min-width:44px;padding:8px;font-size:20px}.remove-button{padding:12px}.current-badge{color:#d8caff;background:#8958ff33;border-radius:6px;padding:6px 8px;font-size:12px}.song-details .song-folder{color:#d8caff;background:#8958ff29;border-radius:6px;margin-left:8px;padding:2px 6px;font-size:12px;display:inline-block}.is-current{border-top-color:var(--accent-secondary)}.queue-empty{color:var(--text-secondary);text-align:center;padding:40px 0}.queue-empty>span{color:var(--accent-light);font-size:40px}.queue-empty h3{color:var(--text-primary)}.queue-page button:disabled{cursor:not-allowed}@media (width<=1000px){.queue-columns{grid-template-columns:minmax(0,1fr)}}@media (width<=640px){.guest-access-heading{flex-direction:column;align-items:stretch}.guest-access-actions{flex-direction:column}.queue-panel,.current-song{padding:16px}.queue-panel-heading,.song-row:not(.queue-row){flex-direction:column;align-items:stretch}.queue-actions .primary-button{flex-basis:100%}.queue-actions .remove-button{flex:1}.app-header{position:static}.user-menu{justify-content:space-between;min-width:0}.user-menu>span{min-width:0}}.search-results{scrollbar-gutter:stable;height:60vh;padding:0 4px;overflow-y:auto}.web-player{border:1px solid var(--border);background:#080710;border-radius:20px;position:relative;overflow:hidden}.web-player video{aspect-ratio:16/9;object-fit:contain;width:100%;display:block}.player-controls{flex-wrap:wrap;align-items:center;gap:12px;padding:16px;display:flex}.player-controls button{min-height:44px}.player-icon-button{align-items:center;min-width:52px;padding:12px}.player-icon{stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;width:20px;height:20px;display:block}.player-volume{flex:0 180px;align-items:center;gap:8px;display:flex}.player-volume input{flex:1;min-width:80px;min-height:44px}.player-seek{flex:220px;align-items:center;gap:12px;display:flex}.player-seek input{flex:1;min-width:80px;min-height:44px}.player-time{font-variant-numeric:tabular-nums}.player-empty{text-align:center;width:100%;padding:20px;position:absolute;top:20%;left:0}.player-audio-status{color:var(--text-secondary);margin:0;padding:0 16px 16px}.player-error{margin:0;padding:16px}.web-player.is-immersive{border:0;border-radius:0;flex-direction:column;width:100%;display:flex}.web-player:fullscreen{height:100%}.app-shell.is-display .web-player{height:100dvh}.web-player.is-immersive video{flex:1;min-height:0}.web-player.is-immersive .player-chrome{bottom:0;z-index:2;flex-direction:column-reverse;display:flex;position:absolute;inset-inline:0}.web-player.is-immersive .player-controls{background:linear-gradient(#08071000,#080710e6);max-height:60vh;padding-top:56px;transition:max-height .2s,opacity .2s,padding .2s,visibility .2s;overflow:hidden}.web-player.is-immersive.is-idle .player-controls{opacity:0;visibility:hidden;max-height:0;padding-block:0}.web-player.is-immersive.is-idle{cursor:none}.web-player.is-immersive .player-notice{background:#080710e6;padding:8px 16px}.web-player-karaoke>video:not(.player-backdrop){visibility:hidden;height:0;position:absolute}.player-backdrop{aspect-ratio:auto;object-fit:cover;height:100%;position:absolute;inset:0}.karaoke-visualizer{position:absolute;inset:0;overflow:hidden}.karaoke-visualizer canvas,.karaoke-visualizer-fallback{width:100%;height:100%;display:block}.karaoke-visualizer-fallback{opacity:.85;background:repeating-linear-gradient(90deg,#0000 0 3.5%,#8958ff38 3.5% 5%,#0000 5% 8%),linear-gradient(135deg,#0e0a20,#170d2c 55%,#240f34)}.web-player-karaoke>.player-chrome,.web-player-karaoke>.player-lyrics{position:relative}.player-lyrics{--lyric-current-size:clamp(24px, 5vw, 44px);--lyric-next-size:clamp(16px, 3vw, 26px);text-align:center;flex-direction:column;justify-content:center;gap:16px;min-height:min(52vh,360px);padding:24px;display:flex;position:relative}.player-lyric{margin:0}.player-lyric-current{filter:drop-shadow(0 2px 8px #000000e6);font-size:var(--lyric-current-size);font-weight:700;line-height:1.25}.player-syllable{color:#0000;-webkit-background-clip:text;background-clip:text;background-image:linear-gradient(to right, var(--accent-light) var(--sung,0%), var(--text-primary) var(--sung,0%));white-space:pre-wrap}.player-lyric-next{color:var(--text-secondary);font-size:var(--lyric-next-size);text-shadow:0 2px 10px #000000e6}.web-player-karaoke.is-immersive .player-lyrics{--lyric-current-size:clamp(32px, min(6vw, 10vh), 96px);--lyric-next-size:clamp(20px, min(3.6vw, 6vh), 56px);flex:1;gap:clamp(16px,3vh,40px);padding:clamp(24px,4vh,64px);transition:padding-bottom .2s}.web-player-karaoke.is-immersive:not(.is-idle) .player-lyrics{padding-bottom:clamp(96px,16vh,180px)}@media (width<=640px){.player-controls>button{flex:1}.player-volume,.player-seek{flex-basis:100%}.web-player-karaoke.is-immersive:not(.is-idle) .player-lyrics{padding-bottom:min(240px,46vh)}}