.screen,body{flex-direction:column}.screen.active,body,header,main{display:flex}.error-msg,.pin-input,.screen-heading,.screen-sub{text-align:center}.np-eyebrow,.pin-input{text-transform:uppercase}.np-album,.np-artist,.np-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.btn,.btn-ghost,.ctrl-btn{cursor:pointer}@font-face{font-family:GSansFlex;src:url('https://voxity.dev/app/fonts/googlesansflex/GoogleSansFlex.subset.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}:root{--bg:#121212;--fg:#eaeaea;--fg-strong:#fff;--muted:#d0d0d0;--panel-bg:#1a1a1a;--header-bg:#0f0f0f;--control-bg:#1f1f1f;--control-br:#333;--btn-bg:#333333;--btn-hover-bg:#555555}*,::after,::before{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--fg);font-family:GSansFlex,sans-serif;min-height:100dvh;overflow-x:hidden;user-select:none;-webkit-user-select:none}header{align-items:center;justify-content:space-between;padding:18px 20px;background:var(--header-bg);border-bottom:1px solid #1e1e1e}.header-status{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:7px}main{flex:1;flex-direction:column;align-items:center;justify-content:center;padding:32px 20px}.screen{display:none;align-items:center;width:100%;max-width:400px}.screen-heading{font-size:2em;font-weight:700;color:var(--fg-strong);margin-bottom:8px;letter-spacing:.04em}.screen-sub{font-size:1em;color:var(--muted);margin-bottom:24px;line-height:1.5}.btn,.pin-input{width:100%;color:var(--fg-strong);font-weight:700;font-family:GSansFlex,sans-serif}.pin-input{padding:14px 16px;background:var(--control-bg);border:1px solid var(--control-br);border-radius:8px;font-size:32px;letter-spacing:.2em;outline:0;transition:border-color .15s;margin-bottom:10px}.pin-input:focus{border-color:#666}.pin-input::placeholder{color:#3a3a3a;font-weight:400;letter-spacing:.1em}.btn{padding:12px 16px;background:var(--btn-bg);border:1px solid transparent;border-radius:8px;font-size:15px;transition:background .15s,transform .1s}.btn:hover,.ctrl-btn.play-pause:hover{background:var(--btn-hover-bg)}.ctrl-btn.play-pause,.ctrl-btn:hover{background:var(--btn-bg)}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.error-msg{font-size:13px;color:#f87171;margin-top:10px;min-height:20px}.spinner{width:30px;height:30px;border:4px solid #061f30;border-top-color:#4aa3ff;border-radius:50%;animation:1s linear infinite spin;display:inline-block;margin-bottom:20px}@keyframes spin{to{transform:rotate(360deg)}}#screen-remote{gap:12px}.np-card{width:100%;background:var(--panel-bg);border-radius:10px;padding:16px 18px;border:1px solid #222}.np-eyebrow{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--muted);margin-bottom:8px}.btn-ghost:hover,.ctrl-btn.toggle-btn.on .ctrl-label,.np-title{color:var(--fg-strong)}.np-title{font-size:20px;font-weight:900}.np-artist{font-size:14px;color:var(--fg);margin-top:3px}.np-album{font-size:12px;color:var(--muted);margin-top:2px}.np-empty{font-size:14px;color:#555}.controls{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.ctrl-btn{background:var(--control-bg);border:1px solid var(--control-br);border-radius:8px;color:var(--fg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px 6px;font-family:GSansFlex,sans-serif;transition:background .12s,transform .1s;-webkit-tap-highlight-color:transparent;user-select:none}.btn-ghost,.ctrl-label{color:var(--muted);font-weight:600}.ctrl-btn:active{transform:scale(.94)}.ctrl-btn.play-pause{grid-column:span 2;border-color:#444;padding:16px}.ctrl-btn.play-pause i{font-size:28px}.ctrl-btn i{font-size:22px;flex-shrink:0}.ctrl-label{font-size:10px;letter-spacing:.05em}.ctrl-btn.toggle-btn.on{background:#ffffff18;border-color:#555}.remote-footer{width:100%;display:flex;justify-content:flex-end}.btn-ghost{background:0 0;border:none;font-family:GSansFlex,sans-serif;font-size:13px;padding:6px 10px;border-radius:6px;transition:background .12s,color .12s}.btn-ghost:hover{background:var(--control-bg)}
