:root {
  color-scheme: dark;
  --bg: #111119;
  --panel: #111119;
  --panel-2: #23232e;
  --text: #dddde1;
  --muted: #92929c;
  --line: #30303a;
  --accent: #b5afd1;
  --accent-2: #aaa4c8;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
button, input { font: inherit; }
button { cursor: pointer; }
.topbar { position: sticky; top: 0; z-index: 5; height: calc(58px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 18px 0; display: flex; align-items: center; justify-content: space-between; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
.brand { display: flex; gap: 9px; align-items: center; font-weight: 760; letter-spacing: .01em; }
.brand-mark { color: var(--accent); font-size: 1.35rem; }
.quiet, .tab, .icon-button { color: var(--text); background: transparent; border: 0; }
main { max-width: 860px; margin: 0 auto; }
.hero { position: relative; height: min(56vh, 510px); min-height: 350px; overflow: hidden; background: radial-gradient(circle at 50% 45%, #283126 0, #161a15 53%, #10120f 76%); }
#globe { display: block; width: 100%; height: 100%; touch-action: none; }
.globe-hint { position: absolute; left: 16px; bottom: 17px; color: var(--muted); font-size: .76rem; background: #11130fc7; padding: 7px 10px; border-radius: 999px; }
.random-button { position: absolute; right: 16px; bottom: 15px; border: 0; border-radius: 999px; padding: 9px 13px; color: #1c190e; background: var(--accent); font-weight: 720; }
.browser-panel { background: var(--panel); border-radius: 24px 24px 0 0; margin-top: -5px; position: relative; min-height: 45vh; padding: 18px 14px 30px; }
.search { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.search input { width: 100%; min-width: 0; border: 1px solid var(--line); color: var(--text); background: var(--panel-2); border-radius: 13px; padding: 12px 14px; outline: none; }
.search input:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px #8fa77a2c; }
.search button { border: 0; color: #11130f; background: var(--accent-2); border-radius: 13px; padding: 0 16px; font-weight: 720; }
.tabs { display: flex; gap: 6px; padding: 14px 0 8px; overflow-x: auto; }
.tab { padding: 8px 13px; border-radius: 999px; color: var(--muted); }
.tab.active { color: var(--text); background: var(--panel-2); }
.status { color: var(--muted); font-size: .82rem; padding: 8px 4px; min-height: 34px; }
.station-list { margin: 0; padding: 0; list-style: none; }
.station { display: grid; grid-template-columns: 44px 1fr 42px; gap: 10px; align-items: center; min-height: 66px; border-top: 1px solid var(--line); }
.station-play, .station-favorite { border: 0; color: var(--text); background: transparent; font-size: 1.25rem; width: 42px; height: 42px; border-radius: 50%; }
.station-play { color: var(--accent); background: #d5a84b18; }
.station-favorite.is-favorite { color: #e4b25b; }
.station-copy { overflow: hidden; }
.station-name, .station-meta { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.station-name { font-weight: 650; }
.station-meta { color: var(--muted); font-size: .79rem; margin-top: 4px; }
.player { position: fixed; z-index: 9; left: 10px; right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); min-height: 66px; padding: 9px 10px 9px 15px; display: grid; grid-template-columns: 1fr 44px 48px; gap: 7px; align-items: center; background: #292d23eF; border: 1px solid #4a503f; box-shadow: 0 12px 35px #0008; backdrop-filter: blur(20px); border-radius: 18px; }
.player[hidden] { display: none; }
.player-copy { min-width: 0; }
.player-copy strong, .player-copy span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-copy span { color: var(--muted); font-size: .76rem; margin-top: 3px; }
.icon-button { font-size: 1.65rem; }
.play-button { width: 45px; height: 45px; border: 0; border-radius: 50%; background: var(--accent); color: #17130a; font-weight: 850; }
.empty { color: var(--muted); text-align: center; padding: 40px 15px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
@media (min-width: 700px) { body { padding-left: 18px; padding-right: 18px; } main { box-shadow: 0 0 0 1px var(--line); } .player { max-width: 830px; margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* Compact desktop atlas and responsive phone layout, based on the plugin. */
.brand { text-transform: uppercase; font-size: 1rem; }
.brand-mark { display: none; }
.hero { background: #090a0c; }
.browser-panel { border-radius: 0; margin: 0; border-top: 1px solid var(--line); }
.search input, .search button { border-radius: 3px; }
.search input { font-size: 16px; }
.tab { border-radius: 3px; font-size: .78rem; }
.station { min-height: 68px; font-size: .82rem; }
.station-play { background: transparent; font-size: .9rem; }
.station-favorite.is-favorite { color: var(--accent); }
.station:hover { background: #ffffff08; }
.globe-hint { right: 8px; left: 8px; bottom: 5px; font-size: .65rem; background: transparent; border-radius: 0; pointer-events: none; }
.random-button { top: 12px; bottom: auto; border: 1px solid var(--line); border-radius: 3px; background: var(--panel); color: var(--text); font-size: .75rem; }
.zoom-controls { position: absolute; right: 12px; bottom: 42px; display: flex; border: 1px solid var(--line); background: var(--panel); }
.station-favorite, #favoriteButton { display: inline-flex; align-items: center; justify-content: center; padding: 0; min-width: 42px; min-height: 42px; }
.heart-icon { display: block; width: 23px; height: 23px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
[aria-pressed="true"] .heart-icon { fill: currentColor; }
[aria-pressed="true"].station-favorite, #favoriteButton[aria-pressed="true"] { color: #e59baf; }
.zoom-controls button { min-width: 44px; height: 44px; color: var(--text); background: transparent; border: 0; }
.zoom-controls button + button { border-left: 1px solid var(--line); }
.player { border-radius: 4px; background: #191922f5; border-color: var(--line); }
.play-button { border-radius: 4px; }
#moreButton { padding: 16px; width: 100%; border: 1px solid var(--line); }
@media (min-width: 850px) {
  body { padding: 0 18px 90px; }
  .topbar { max-width: 1180px; margin: 24px auto 0; border: 1px solid var(--line); }
  main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(310px, 1fr); max-width: 1180px; height: calc(100dvh - 175px); min-height: 430px; border: 1px solid var(--line); }
  .hero { height: 100%; min-height: 0; }
  .browser-panel { height: 100%; min-height: 0; overflow-y: auto; border-top: 0; border-left: 1px solid var(--line); padding: 14px 10px; }
  .player { max-width: 1180px; }
}