@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');
:root{--bg:#0a1020;--panel:#111a30;--panel2:#17223b;--ink:#f8faff;--muted:#9eafcc;--line:#273350;--accent:#5c83ff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',system-ui,sans-serif;font-size:14px}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.app-shell{display:flex;min-height:100vh;padding-bottom:95px}.sidebar{width:248px;background:#0e172b;border-right:1px solid var(--line);padding:36px 24px;display:flex;flex-direction:column;position:sticky;top:0;height:calc(100vh - 90px)}.brand{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;letter-spacing:-.6px;color:var(--ink)}.brand:first-letter{color:var(--accent)}.sidebar nav{display:grid;gap:12px;margin-top:65px}.sidebar nav a{padding:14px;border-radius:12px;color:var(--muted);font-weight:700}.sidebar nav a:hover,.sidebar nav a.nav-on{background:#1b2b4d;color:white}.aside-note{margin-top:auto;background:linear-gradient(145deg,#263b75,#171e39);border-radius:20px;padding:20px;line-height:1.6;color:#c8d8ff;font-size:16px}.aside-note b{color:white}.aside-note p{font-size:12px;color:#b9c8e8;margin-bottom:0}.mini-link{color:var(--muted);margin-top:24px;font-size:12px}.main-content{flex:1;min-width:0;padding:0 42px}.topbar{display:flex;justify-content:space-between;align-items:center;padding:34px 0;color:var(--muted);font-size:11px;letter-spacing:2px;font-weight:800}.onair{color:#b9c7eb}.onair i{display:inline-block;background:#41d6ac;width:7px;height:7px;border-radius:50%;margin-right:8px}.hero{min-height:310px;display:flex;justify-content:space-between;align-items:center;overflow:hidden;border:1px solid #344a75;border-radius:24px;background:radial-gradient(circle at 75% 50%,#38539e 0,#1b2c58 36%,#111b34 80%);padding:38px 48px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:2.5px;color:#9eb7ff}.hero h1{font-size:clamp(36px,4vw,64px);line-height:1.03;letter-spacing:-2px;margin:18px 0}.hero h1 em{font-style:normal;color:#91abff}.hero p{color:#b8c7e2;font-size:15px;margin-bottom:26px}.primary{background:var(--accent);border:0;border-radius:11px;color:white;padding:13px 22px;font-weight:800;display:inline-block}.primary:hover{filter:brightness(1.12)}.hero-art{width:230px;height:240px;position:relative;flex-shrink:0}.orb{position:absolute;inset:12px;border:2px solid #809cf64a;border-radius:50%}.orb2{inset:-16px;border-color:#809cf62e}.disk{position:absolute;inset:36px;background:repeating-radial-gradient(circle at center,#2d3e66 0,#2d3e66 7px,#11182c 9px,#11182c 14px);border:12px solid #253762;border-radius:50%;box-shadow:0 12px 65px #060e28a0;display:grid;place-items:center;color:#cfe0ff;font-size:46px}.float-note{position:absolute;bottom:8px;right:-12px;padding:11px 16px;background:#101d3e;border:1px solid #5571b0;border-radius:12px;font-size:10px;font-weight:800;letter-spacing:2px}.station-section{padding-top:49px}.section-head h2{font-size:25px;letter-spacing:-.7px;margin:9px 0 22px}.section-head h2 span{color:#86a3fe;font-size:12px;vertical-align:top}.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}.search-box{flex:1;min-width:230px;padding:0 15px;border:1px solid var(--line);border-radius:12px;background:var(--panel);display:flex;align-items:center;color:var(--muted);font-size:26px}.search-box input{background:transparent;border:0;outline:0!important;color:white;width:100%;padding:14px 10px;font-size:13px}.filters select,.outline{background:var(--panel);color:#bac8e3;border:1px solid var(--line);border-radius:12px;padding:12px 14px}.outline.on{border-color:var(--accent);color:white}.station-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:17px}.station-card{border:1px solid var(--line);background:var(--panel);border-radius:17px;overflow:hidden;transition:transform .2s,border-color .2s}.station-card:hover{transform:translateY(-3px);border-color:#5d79b6}.station-card.selected{border-color:var(--accent)}.station-card[hidden]{display:none}.card-cover{height:162px;background:radial-gradient(circle at 50% 30%,#4562a5,#17294c 48%,#1a2241);background-size:cover;background-position:center;position:relative;display:grid;place-items:center}.card-vinyl{background:#101a37a8;width:86px;height:86px;border:3px solid #6886bd6b;border-radius:50%;display:grid;place-items:center;color:#b1c8f9;font-size:40px}.fav{position:absolute;top:12px;right:12px;background:#0b1427a8;border:1px solid #6074a3a8;border-radius:50%;width:34px;height:34px;color:white;font-size:20px}.fav.is-fav{color:#ff7b9a}.card-info{display:flex;align-items:center;justify-content:space-between;padding:18px}.card-info h3{margin:0 0 6px;font-size:15px}.card-info p{margin:0;color:var(--muted);font-size:11px}.circle-play{border:0;background:var(--accent);border-radius:50%;width:35px;height:35px;color:white;flex-shrink:0}.empty-state{text-align:center;background:#121d34;padding:36px;border-radius:20px;color:var(--muted)}.empty-state h3{color:white}.empty-state[hidden]{display:none}.player{position:fixed;bottom:0;left:0;right:0;height:90px;background:#111c33;border-top:1px solid #334468;z-index:2;display:flex;align-items:center;gap:28px;padding:15px 32px;box-shadow:0 -6px 35px #080e20a0}.player-track{display:flex;align-items:center;gap:15px;flex:1;min-width:0}.player-track strong,.player-track small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-track small{color:var(--muted);margin-top:6px}.player-icon{width:49px;height:49px;background:#334b81;border-radius:13px;display:grid;place-items:center;font-size:25px}.player-actions{display:flex;align-items:center;gap:30px}.player-actions button{background:var(--accent);border:none;color:white;width:46px;height:46px;border-radius:50%;font-size:20px}.volume-group{color:var(--muted);display:flex;align-items:center;gap:12px}.volume-group input{width:120px;accent-color:var(--accent)}.status{font-size:10px;color:#8ee8c4;letter-spacing:1px;font-weight:800;min-width:120px;text-align:right}footer{border-top:1px solid var(--line);margin-top:55px;padding:25px 0 35px;color:var(--muted);font-size:12px}footer strong{color:white}footer p{max-width:700px}.admin-body{min-height:100vh}.admin-header{border-bottom:1px solid var(--line);display:flex;align-items:center;gap:25px;justify-content:space-between;padding:24px max(24px,calc((100vw - 1140px)/2))}.admin-header a:not(.brand){color:var(--muted)}.admin-main{max-width:1140px;margin:40px auto;padding:0 24px 50px}.admin-intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.admin-intro h1{font-size:40px;margin:8px 0}.muted{color:var(--muted)}.stat-box{padding:20px 45px;background:#1c2c4a;border:1px solid var(--line);border-radius:15px;display:grid;text-align:center}.stat-box strong{font-size:30px}.stat-box span{color:var(--muted);font-size:11px}.admin-columns{display:grid;grid-template-columns:1.3fr .8fr;gap:20px}.panel{background:var(--panel);border:1px solid var(--line);padding:24px;border-radius:18px}.panel h2{font-size:19px;margin:0 0 20px}.panel-heading{display:flex;justify-content:space-between}.panel-heading a{color:#a4b8ff}.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.install-box label,.panel label{color:#c5d2eb;font-size:12px;display:block;margin-bottom:15px;font-weight:700}.install-box input,.panel input:not([type=checkbox]):not([type=color]),.panel textarea,.install-box textarea{display:block;width:100%;margin-top:7px;background:#0b1426;border:1px solid #344563;color:#fff;padding:12px;border-radius:9px}.panel input[type=color]{display:block;margin:10px 0;width:100%;height:40px;background:transparent;border:0}.checkbox-row{display:flex;gap:30px}.checkbox-row input{accent-color:var(--accent)}.notice{background:#1b2c4e;border-radius:12px;padding:17px;font-size:12px;line-height:1.8;color:#bad1ed;margin-top:25px}.listing{margin-top:23px}.list-row{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:16px 0;border-top:1px solid var(--line)}.list-row strong,.list-row small{display:block}.list-row small{color:var(--muted);margin-top:6px}.list-actions{display:flex;gap:10px}.list-actions form{margin:0}.danger{color:#ff899a}.install-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:30px}.install-box{width:min(710px,100%);background:var(--panel);border:1px solid var(--line);padding:35px;border-radius:20px}.install-box.narrow{max-width:420px;margin:90px auto}.install-box h1{font-size:35px;margin:25px 0 10px}.install-box h3{margin-top:25px}.install-box form{margin-top:25px}.install-box .primary{width:100%;margin-top:10px}.pill{border:1px solid #50649e;background:#253a65;color:#bed0ff;border-radius:50px;padding:5px 10px;font-size:10px;letter-spacing:1px}.alert{background:#5d2135;border:1px solid #963b55;color:#ffb7c6;padding:13px 17px;border-radius:11px;margin:14px 0}.success{background:#17463c;border:1px solid #38705f;color:#a2f6d0;padding:13px 17px;border-radius:11px;margin:14px 0}@media(max-width:1080px){.sidebar{width:205px}.main-content{padding:0 25px}.hero{padding:30px}.hero-art{width:180px;height:190px}}@media(max-width:760px){.sidebar{display:none}.main-content{padding:0 16px}.topbar{padding:23px 4px}.hero{min-height:280px;padding:28px}.hero-art{opacity:.25;position:absolute;right:18px;pointer-events:none}.hero>div:first-child{position:relative;z-index:1}.hero h1{font-size:43px}.station-section{padding-top:35px}.station-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.card-cover{height:130px}.card-info{padding:11px}.card-info h3{font-size:13px}.card-info p{font-size:10px}.player{gap:12px;padding:12px 14px}.volume-group,.status{display:none}.admin-columns{grid-template-columns:1fr}.admin-intro h1{font-size:30px}.stat-box{padding:15px}.admin-header{flex-wrap:wrap}.install-box{padding:23px}.fields{grid-template-columns:1fr}}@media(max-width:370px){.station-grid{grid-template-columns:1fr}.hero h1{font-size:35px}}

.cover-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.52}.card-vinyl{position:relative}.card-cover .fav{z-index:1}

/* JK WebRadio 0.2 mobile / car listening */
.hero-buttons{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:23px}.hero-buttons button:disabled{opacity:.52;cursor:not-allowed}.radio-hero-status{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:18px;font-size:10px;letter-spacing:.12em;font-weight:700}.radio-hero-status .onair{font-size:10px}.drive-banner{display:flex;align-items:center;gap:16px;padding:20px 24px;border-radius:18px;background:linear-gradient(110deg,#202d4b,#172139);margin:26px 0;color:#eff4ff}.drive-banner p{margin:5px 0 0;color:#becbe3;line-height:1.5;font-size:13px}.drive-banner .drive-icon{font-size:30px}.drive-banner .drive-tag{white-space:nowrap;border:1px solid #5987fb;border-radius:30px;padding:6px 12px;font-size:10px;color:#a9c4ff;letter-spacing:.04em}.genres-line{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:14px 0 30px}.genres-line span{font-size:12px;padding:9px 14px;border-radius:22px;background:#1d2b45;color:#e3ecfb}.genres-line span:first-child{background:transparent;color:#88a9e4;font-weight:800;font-size:10px;letter-spacing:.1em}
@media(max-width:620px){.drive-banner{align-items:flex-start;padding:16px;flex-wrap:wrap}.drive-banner .drive-tag{margin-left:40px}.hero-buttons{width:100%}.hero-buttons button{min-height:48px}.genres-line{gap:6px}.genres-line span{padding:8px 10px}}