:root{--ink:#21152d;--ink2:#342043;--purple:#9650ed;--pink:#ff4c98;--cream:#f8f4fb;--paper:#fff;--muted:#726979;--line:#e9e0ed;--yellow:#ffdb70}
*{box-sizing:border-box}html{min-height:100%;background:var(--cream)}body{margin:0;color:var(--ink);font:16px/1.55 "Segoe UI",Arial,sans-serif;background:radial-gradient(circle at 85% 5%,#efddff 0,transparent 30%),var(--cream);min-height:100vh}button,input{font:inherit}.app-shell{width:min(1180px,100%);margin:auto;padding:0 25px 70px}.topbar{height:88px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-size:21px;letter-spacing:-.04em}.brand img{border-radius:13px;box-shadow:0 8px 20px #24152e24}.connection{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:13px}.connection span{width:9px;height:9px;border-radius:50%;background:#9b929f}.connection.online span{background:#2bc574;box-shadow:0 0 0 5px #2bc5741f}.connection.online b{color:#276842}.eyebrow{margin:0 0 13px;color:var(--purple);font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}h1,h2{font-family:"Segoe UI",Arial,sans-serif;line-height:1.06;letter-spacing:-.045em;margin-top:0}.login-view{min-height:calc(100vh - 158px);display:grid;grid-template-columns:1.1fr .72fr;align-items:center;gap:90px}.login-copy h1{font-size:clamp(48px,6vw,78px);margin:0 0 27px;max-width:720px}.login-copy>p:not(.eyebrow){color:var(--muted);font-size:19px;max-width:650px}.login-copy ul{list-style:none;padding:20px 0 0;margin:0;color:var(--muted)}.login-copy li{margin:10px 0}.login-copy li:before{content:"✓";color:var(--pink);font-weight:900;margin-right:11px}.login-card{background:var(--paper);border:1px solid var(--line);border-radius:26px;padding:38px;box-shadow:0 28px 70px #351e4617}.login-card h2{font-size:37px;margin-bottom:30px}.login-card label{display:block;font-weight:750;margin:17px 0 7px}.login-card input{width:100%;padding:14px;border:1px solid #cfc4d5;border-radius:11px;background:#fff;color:var(--ink)}.login-card input:focus{outline:3px solid #9650ed24;border-color:var(--purple)}button{border:0;cursor:pointer;font-weight:750}.primary{width:100%;margin-top:25px;padding:15px;border-radius:11px;color:#fff;background:linear-gradient(135deg,var(--purple),#7840d8);box-shadow:0 10px 24px #7840d83b}.primary:disabled,.play:disabled{opacity:.45;cursor:not-allowed}.help{font-size:13px;color:var(--muted);text-align:center;margin:18px 0 0}.help a{color:var(--purple)}.form-error{background:#fff0f3;color:#a52b4a;padding:11px 13px;border-radius:9px;font-size:14px}.player-view{padding-top:50px}.welcome{display:flex;justify-content:space-between;align-items:end;margin-bottom:40px}.welcome h1{font-size:clamp(42px,5vw,66px);margin:0}.location-id{margin:12px 0 0;color:var(--muted);font-weight:650}.ghost{background:#fff;border:1px solid var(--line);color:var(--ink);padding:11px 17px;border-radius:10px;box-shadow:0 6px 15px #3520440c}.now-playing{display:grid;grid-template-columns:180px 1fr 86px;gap:30px;align-items:center;background:linear-gradient(130deg,#251531,#3a1a4a);color:white;border-radius:30px;padding:32px;box-shadow:0 28px 65px #21152d2b}.cover-wrap{position:relative}.cover-wrap img{width:180px;height:180px;object-fit:cover;border-radius:22px;background:#4f3760}.live-badge{position:absolute;left:12px;bottom:12px;padding:5px 9px;background:var(--pink);border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.12em}.now-copy .eyebrow{color:#d6a6ff}.now-copy h2{font-size:43px;margin:0 0 10px}.now-copy p:last-child{color:#cfc0d7;margin:0}.play{width:74px;height:74px;border-radius:50%;background:var(--yellow);color:var(--ink);font-size:26px;box-shadow:0 12px 30px #0003}.volume{grid-column:2/4;display:flex;align-items:center;gap:12px;color:#d8c9df}.volume input{width:100%;accent-color:var(--pink)}.station-section{padding:65px 0}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:24px}.section-heading h2{font-size:38px;margin:0}.station-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.station{display:grid;grid-template-columns:88px 1fr;gap:18px;align-items:center;text-align:left;background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;color:var(--ink);transition:.18s}.station:hover{transform:translateY(-2px);box-shadow:0 14px 30px #35204414}.station.active{border-color:var(--purple);box-shadow:0 0 0 3px #9650ed1c}.station img{width:88px;height:88px;object-fit:cover;border-radius:13px;background:#eee}.station strong{display:block;font-size:20px}.station small{display:block;margin-top:6px;color:var(--purple);font-weight:800;text-transform:uppercase;letter-spacing:.08em}.empty{grid-column:1/-1;background:#fff;border:1px dashed #cabdd1;border-radius:18px;padding:30px;color:var(--muted);text-align:center}
@media(max-width:850px){.login-view{grid-template-columns:1fr;gap:35px;padding:40px 0}.login-copy ul{display:none}.station-grid{grid-template-columns:1fr 1fr}.now-playing{grid-template-columns:135px 1fr 72px}.cover-wrap img{width:135px;height:135px}.now-copy h2{font-size:34px}}
@media(max-width:560px){.app-shell{padding:0 18px 45px}.topbar{height:76px}.brand{font-size:18px}.brand img{width:43px;height:43px}.connection b{display:none}.login-view{min-height:auto;padding:44px 0}.login-copy h1{font-size:46px}.login-copy>p:not(.eyebrow){font-size:17px}.login-card{padding:27px 21px}.player-view{padding-top:34px}.welcome{align-items:start;gap:20px}.welcome h1{font-size:38px}.welcome .ghost{padding:9px 11px}.now-playing{grid-template-columns:100px 1fr;gap:20px;padding:21px;border-radius:23px}.cover-wrap img{width:100px;height:100px}.now-copy h2{font-size:29px}.now-copy p:last-child{display:none}.play{grid-column:1/3;width:100%;height:54px;border-radius:12px}.volume{grid-column:1/3}.station-grid{grid-template-columns:1fr}.section-heading h2{font-size:32px}.station-section{padding-top:50px}}
@media(prefers-reduced-motion:reduce){.station{transition:none}}