:root { color-scheme: dark; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #111216; color: #f5f6f8; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
button { cursor: pointer; }
.kicker { margin: 0; color: #9399a5; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

.loading-page { min-height: 100vh; display: grid; place-items: center; background: #050506; }
.loading-panel { width: min(420px, calc(100% - 40px)); text-align: center; }
.loading-icon { width: 50px; height: 50px; filter: invert(1); margin-bottom: 20px; }
.loading-panel h1 { margin: 6px 0 10px; font-size: 28px; }
.loading-panel p:not(.kicker) { margin: 0; color: #a6acb6; }
.progress-line { height: 3px; overflow: hidden; margin-top: 26px; background: #262830; border-radius: 999px; }
.progress-line span { display: block; width: 40%; height: 100%; background: #eb3e44; border-radius: inherit; animation: progress 1.2s ease-in-out infinite; }
@keyframes progress { from { transform: translateX(-110%); } to { transform: translateX(280%); } }

.terminal-page { overflow: hidden; background: #000; }
#youtube-player { position: fixed; inset: 0; width: 100vw; height: 100vh; border: 0; }
#kiosk-gesture-catcher { position: fixed; z-index: 3; inset: 0; background: transparent; }
.terminal-overlay { position: fixed; z-index: 2; background: rgba(0, 0, 0, .7); backdrop-filter: blur(8px); }
.terminal-info { left: 18px; bottom: 18px; padding: 12px 16px; border-radius: 8px; max-width: min(620px, calc(100vw - 170px)); }
.terminal-info p { margin: 0 0 4px; color: #b8bec9; font-size: 13px; }
.terminal-info h1 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; }
.terminal-idle { position: fixed; z-index: 4; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(5, 6, 9, .94); }.terminal-idle[hidden] { display: none; }.terminal-idle-card { width: min(430px, 100%); padding: 28px 30px 26px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; background: rgba(25, 27, 33, .94); box-shadow: 0 18px 55px rgba(0, 0, 0, .42); text-align: center; }.terminal-idle-kicker { margin: 0; color: #ff6a70; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }.terminal-idle-card h1 { margin: 10px 0 8px; color: #fff; font-size: 30px; }.terminal-idle-copy { max-width: 330px; margin: 0 auto 20px; color: #c9cdd5; font-size: 15px; line-height: 1.45; }.terminal-idle-qr { display: block; width: 220px; height: 220px; margin: 0 auto; padding: 10px; border-radius: 8px; background: #fff; }.terminal-idle-hint { margin: 16px 0 0; color: #9299a5; font-size: 12px; }
.terminal-progress { right: 176px; bottom: 18px; left: 190px; padding: 9px 12px 8px; border-radius: 7px; background: rgba(0, 0, 0, .58); }.terminal-progress-track { height: 4px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .25); }.terminal-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: #eb3e44; }.terminal-progress-time { display: flex; justify-content: space-between; margin-top: 4px; color: rgba(255, 255, 255, .82); font-size: 10px; font-variant-numeric: tabular-nums; }
.terminal-queue { top: 18px; right: 18px; width: min(330px, calc(100vw - 36px)); padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 9px; background: rgba(8, 9, 12, .7); box-shadow: 0 10px 28px rgba(0, 0, 0, .28); opacity: .92; }.terminal-queue[hidden] { display: none; }.terminal-queue p { margin: 0 0 7px; color: #f0f2f5; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }.terminal-queue ol { padding: 0; margin: 0; list-style: none; }.terminal-queue li { display: flex; gap: 9px; align-items: center; overflow: hidden; min-height: 28px; padding: 6px 0; border-top: 1px solid rgba(255, 255, 255, .14); color: #e7e9ee; font-size: 12px; line-height: 1.25; white-space: nowrap; text-overflow: ellipsis; }.terminal-queue li:first-child { border-top: 0; }.terminal-queue-position { flex: 0 0 19px; color: #9da4af; font-size: 10px; font-variant-numeric: tabular-nums; }
.qr-panel { right: 18px; bottom: 18px; width: 142px; padding: 10px; border-radius: 8px; text-align: center; }
.qr-panel img { display: block; width: 100%; background: #fff; padding: 4px; }
.qr-panel p { margin: 7px 0 0; color: #e6e9ee; font-size: 11px; }

.remote-page { min-height: 100vh; padding: 0 0 112px; background: #111216; }
.remote-shell { width: min(640px, 100%); margin: 0 auto; }
.remote-header, .section-title, .remote-now-playing, .track-form button { display: flex; align-items: center; }
.remote-header, .section-title { justify-content: space-between; gap: 14px; }
.remote-header { position: relative; z-index: 2; padding: 16px 18px; }.remote-header h1 { margin: 3px 0 0; font-size: 24px; }
.live-badge { color: #aaf3c2; font-size: 13px; }.live-badge.offline { color: #ff9a9a; }
.remote-now-playing { position: relative; min-height: 270px; overflow: hidden; background: #1b1d23; isolation: isolate; }
.now-playing-hero { display: block; }
.now-backdrop { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); }
.now-shade { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(4, 5, 7, .78) 0%, rgba(8, 9, 12, .3) 34%, rgba(10, 11, 14, .96) 100%); }
.now-meta { position: absolute; right: 70px; bottom: 16px; left: 18px; min-width: 0; }.now-meta .kicker { display: flex; align-items: center; gap: 6px; color: #fff; }.playing-dot { width: 7px; height: 7px; border-radius: 999px; background: #ff555b; box-shadow: 0 0 0 4px rgba(255, 85, 91, .2); }.now-meta h2 { margin: 6px 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 19px; }.now-meta > p:not(.kicker) { margin: 0; overflow: hidden; color: #e1e4e9; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }.now-meta #player-state { display: inline-block; margin-top: 8px; color: #fff; font-size: 11px; }.progress-wrap { margin-top: 8px; }.progress-track { height: 4px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .32); }.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: #ff555b; }.progress-time { display: flex; justify-content: space-between; margin-top: 4px; color: rgba(255, 255, 255, .88); font-size: 11px; font-variant-numeric: tabular-nums; }.skip-hero { position: absolute; right: 18px; bottom: 18px; background: rgba(25, 27, 33, .8); backdrop-filter: blur(6px); }
.icon-action { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 7px; background: #30333c; }.icon-action img, .search-submit img { width: 18px; height: 18px; filter: invert(1); }
.queue-section { padding: 22px 16px 18px; margin-top: 0; border-top: 1px solid #363a45; background: #1a1c22; }.section-title h2 { margin: 0; font-size: 18px; }.section-title span { color: #aeb4bf; font-size: 13px; }
.queue-list { padding: 0; margin: 10px 0; list-style: none; }.queue-list li { display: flex; gap: 8px; align-items: center; margin: 0; padding: 8px 0; background: transparent; }.queue-list li + li { border-top: 1px solid #2b2e36; }.queue-list li > span { width: 14px; flex: 0 0 14px; color: #99a0aa; text-align: center; font-size: 11px; }.queue-list li > img { width: 82px; height: 46px; object-fit: cover; border-radius: 4px; }.queue-details { min-width: 0; }.queue-details strong, .queue-details small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.queue-details strong { font-size: 13px; }.queue-details small { margin-top: 2px; color: #999faa; font-size: 11px; }
.empty-copy { color: #989eaa; text-align: center; margin: 36px 0; }
.search-section { display: none; }.searching .search-section { position: fixed; z-index: 5; inset: 0 0 76px; display: block; overflow-y: auto; padding: 20px 16px; background: #111216; }.search-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.search-panel-header h2 { margin: 4px 0 0; font-size: 24px; }.search-results { padding: 0; margin: 18px 0; list-style: none; }.search-results li { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 10px; border: 1px solid #292c34; border-radius: 8px; background: #1a1c22; }.search-results li > img { width: 100px; height: 68px; object-fit: cover; border-radius: 6px; }.result-details { flex: 1; min-width: 0; }.result-details strong, .result-details span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.result-details strong { font-size: 14px; }.result-details span { margin-top: 4px; color: #989eaa; font-size: 12px; }.search-results button { padding: 9px 10px; border: 0; border-radius: 7px; background: #30333c; color: #fff; font-size: 12px; }
.search-bar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 6; display: flex; gap: 8px; padding: 12px 16px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid #292c34; background: rgba(18, 19, 23, .96); backdrop-filter: blur(10px); }.search-bar input { flex: 1; min-width: 0; padding: 12px; border: 1px solid #3a3e49; border-radius: 8px; background: #0f1013; color: #f5f6f8; }.search-bar .icon-action { flex: 0 0 auto; width: 44px; height: 44px; touch-action: none; }.search-bar .icon-action.listening { background: #eb3e44; animation: microphone-pulse 1s ease-in-out infinite; }.search-submit { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: #eb3e44; }
.voice-overlay { position: fixed; z-index: 10; inset: 0; display: grid; place-content: center; justify-items: center; padding: 24px; background: rgba(7, 8, 11, .9); backdrop-filter: blur(18px); text-align: center; }.voice-overlay[hidden] { display: none; }.voice-orb { display: grid; place-items: center; width: 116px; height: 116px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%; background: #eb3e44; box-shadow: 0 0 0 16px rgba(235, 62, 68, .12), 0 0 0 34px rgba(235, 62, 68, .06); animation: voice-orb-pulse 1.25s ease-in-out infinite; }.voice-orb img { width: 38px; height: 38px; filter: invert(1); }.voice-label { margin: 28px 0 8px; color: #fff; font-size: 14px; font-weight: 700; }.voice-transcript { width: min(520px, 90vw); min-height: 30px; margin: 0; color: #e6e8ed; font-size: 21px; line-height: 1.35; }.voice-cancel { margin-top: 32px; padding: 10px 18px; border: 1px solid #4a4e59; border-radius: 999px; background: transparent; color: #fff; }.voice-cancel:hover { background: #292c34; }
@keyframes voice-orb-pulse { 0%, 100% { transform: scale(.96); } 50% { transform: scale(1.04); } }
@keyframes microphone-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(235, 62, 68, .6); } 50% { box-shadow: 0 0 0 8px rgba(235, 62, 68, 0); } }
@media (max-width: 520px) { .terminal-info { left: 10px; bottom: 10px; max-width: calc(100vw - 132px); }.terminal-info h1 { font-size: 14px; }.terminal-idle { padding: 16px; }.terminal-idle-card { padding: 22px 18px; }.terminal-idle-card h1 { font-size: 25px; }.terminal-idle-qr { width: 190px; height: 190px; }.terminal-progress { right: 10px; bottom: 10px; left: 10px; padding-bottom: 7px; }.terminal-queue { top: 10px; right: 10px; width: min(250px, calc(100vw - 20px)); padding: 9px 11px; }.terminal-queue li { min-height: 24px; padding: 4px 0; font-size: 11px; }.qr-panel { right: 10px; bottom: 62px; width: 112px; }.now-meta h2 { font-size: 20px; } }