:root{--violet: #7c3aed;--indigo: #4f46e5;--bg-deep: #0f0a1e;--text: #f5f3ff;--muted: #b8b0d6;--card: rgba(255, 255, 255, .06);--card-border: rgba(255, 255, 255, .12);--live: #ef4444}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:radial-gradient(1200px 800px at 50% -10%,rgba(124,58,237,.55),transparent 60%),linear-gradient(160deg,#1a1035 0%,var(--bg-deep) 55%,#05030f 100%);background-attachment:fixed;-webkit-font-smoothing:antialiased}.app{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(env(safe-area-inset-top,0px) + 24px) 20px calc(env(safe-area-inset-bottom,0px) + 20px);gap:18px}.card{width:100%;max-width:420px;background:var(--card);border:1px solid var(--card-border);border-radius:28px;padding:32px 24px 28px;text-align:center;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 30px 80px -30px #4f46e599;display:flex;flex-direction:column;align-items:center;gap:16px}.logo-tile{width:116px;height:116px;border-radius:28px;padding:10px;background:linear-gradient(140deg,var(--violet),var(--indigo));box-shadow:0 14px 40px -12px #7c3aedcc;display:grid;place-items:center}.logo{width:100%;height:100%;border-radius:20px;object-fit:cover;display:block}.station{margin:0;font-size:1.5rem;font-weight:700;letter-spacing:.2px}.live-badge{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:700;letter-spacing:1.5px;color:var(--muted);padding:5px 12px;border-radius:999px;background:#ffffff0d;border:1px solid var(--card-border);transition:color .2s,background .2s}.live-badge .dot{width:8px;height:8px;border-radius:50%;background:currentColor}.live-badge.is-live{color:var(--live);background:#ef44441f;border-color:#ef444466}.live-badge.is-live .dot{background:var(--live);box-shadow:0 0 #ef4444b3;animation:pulse 1.4s infinite}@keyframes pulse{0%{box-shadow:0 0 #ef4444b3}70%{box-shadow:0 0 0 10px #ef444400}to{box-shadow:0 0 #ef444400}}.status{margin:0;min-height:1.2em;font-size:.95rem;color:var(--muted)}.status-live{color:#a7f3d0}.status-error{color:#fca5a5}.status-connecting{color:#fde68a}.play-btn{margin-top:4px;width:96px;height:96px;border-radius:50%;border:none;cursor:pointer;color:#fff;background:linear-gradient(140deg,var(--violet),var(--indigo));box-shadow:0 18px 45px -12px #7c3aede6;display:grid;place-items:center;transition:transform .12s ease,box-shadow .2s ease}.play-btn:active{transform:scale(.94)}.play-btn.is-playing{box-shadow:0 0 0 6px #7c3aed2e,0 18px 45px -12px #7c3aede6}.install-btn{width:100%;padding:15px 18px;border:none;border-radius:16px;cursor:pointer;font-size:1.02rem;font-weight:700;color:#fff;background:linear-gradient(140deg,var(--violet),var(--indigo));box-shadow:0 14px 34px -14px #4f46e5e6;transition:transform .12s ease,filter .2s ease}.install-btn:active{transform:translateY(1px);filter:brightness(1.05)}.controls{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;width:100%}.ctrl{flex:1 1 0;min-width:72px;padding:10px 8px;border-radius:12px;cursor:pointer;font-size:.85rem;font-weight:600;color:var(--text);background:#ffffff12;border:1px solid var(--card-border);transition:background .15s ease,transform .1s ease}.ctrl:hover{background:#ffffff21}.ctrl:active{transform:translateY(1px)}.hint{width:100%;font-size:.82rem;line-height:1.45;color:var(--muted);background:#ffffff0d;border:1px solid var(--card-border);border-radius:12px;padding:10px 12px}.hint.warn{color:#fde68a;background:#f59e0b1f;border-color:#f59e0b66}.hint.ok{color:#a7f3d0;background:#10b9811f;border-color:#10b98159}.foot{font-size:.75rem;color:var(--muted);opacity:.7}@media (min-width: 640px){.card{max-width:460px;padding:40px 32px 32px}.station{font-size:1.7rem}}