.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  min-height:44px;
  padding:.7rem 1.1rem;
  border-radius:.65rem;
  background:var(--elevated);
  border:1px solid var(--border);
  font-size:.8rem;
  font-weight:650
}
.button:hover {
  background:var(--button-hover)
}
.button.primary {
  background:var(--accent);
  color:var(--bg);
  border-color:var(--accent)
}
.button.primary:hover {
  background:var(--accent-hover)
}
.button.quiet {
  background:transparent
}
.button.danger {
  color:var(--danger)
}
.icon-button {
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:0;
  border-radius:50%;
  flex-shrink:0;
  color:var(--muted)
}
.icon-button:hover {
  background:var(--elevated);
  color:var(--text)
}
.icon-button.is-favorite {
  color:var(--accent)
}
.icon-button.is-favorite svg {
  fill:currentColor
}
.hero {
  min-height:290px;
  position:relative;
  overflow:hidden;
  border:1px solid var(--hero-border);
  border-radius:1.3rem;
  padding:2.5rem;
  background:var(--hero-bg);
  display:flex;
  align-items:center
}
.hero-copy {
  position:relative;
  z-index:1;
  max-width:65%
}
.hero h1 {
  margin:.75rem 0 1rem
}
.hero p:not(.eyebrow) {
  font-size:.9rem;
  max-width:350px;
  line-height:1.8
}
.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  margin-top:1.5rem
}
.frequency-art {
  position:absolute;
  right:-.5rem;
  top:0;
  width:42%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  transform:rotate(-16deg);
  opacity:.85;
  mask-image:linear-gradient(90deg,transparent,#000 25%)
}
.frequency-art i {
  width:9px;
  height:var(--bar);
  border-radius:10px;
  background:linear-gradient(#a7d5f3,#5b99b9 55%,#345477);
  box-shadow:0 0 30px #67c5fa0a
}
.hero-caption {
  position:absolute;
  right:1.4rem;
  bottom:1rem;
  font-size:.55rem;
  letter-spacing:.2em;
  color:var(--hero-caption)
}
.mood-grid {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:.75rem
}
.mood {
  padding:1.2rem;
  border:1px solid color-mix(in srgb,var(--mood) 24%,var(--border));
  border-radius:var(--radius-small);
  background:linear-gradient(125deg,color-mix(in srgb,var(--mood) 13%,var(--panel)),var(--panel));
  min-height:108px;
  position:relative;
  overflow:hidden
}
.mood:hover {
  border-color:var(--mood)
}
.mood svg {
  color:var(--mood);
  margin-bottom:.7rem;
  width:1.4rem;
  height:1.4rem
}
.mood strong {
  display:block;
  font-size:.85rem
}
.station-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:1rem
}
.station-grid .station-card {
  display:flex;
  flex-direction:column
}
.station-grid .station-actions {
  margin-top:auto;
  padding-top:.7rem
}
.station-card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem;
  min-width:0;
  position:relative
}
.station-card:hover {
  border-color:var(--card-hover-border)
}
.station-art {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  background:var(--art-bg);
  border:1px solid var(--art-border);
  border-radius:.7rem;
  color:var(--art-color);
  overflow:hidden;
  width:52px;
  height:52px
}
.station-art svg {
  width:26px;
  height:26px
}
.station-art img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}
.station-art img[data-artwork-pending] { opacity:0; }
.station-art-edit { position:absolute; right:.35rem; top:.35rem; z-index:1; display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:1px solid var(--border); border-radius:50%; background:var(--panel); color:var(--text); }
.station-art .station-art-edit svg { width:16px; height:16px; }
.station-art-edit:hover { background:var(--elevated); border-color:var(--accent); color:var(--accent); }
.player .station-art-edit,.station-list .station-art-edit { inset:0; width:100%; height:100%; border-radius:inherit; opacity:0; }
.player .station-art-edit:is(:hover,:focus-visible),.station-list .station-art-edit:is(:hover,:focus-visible) { opacity:1; }
.custom-stream-info { display:none; }
.station-card>.station-art {
  width:100%;
  height:auto;
  aspect-ratio:1.5;
  margin-bottom:1rem;
  background:var(--card-art-bg)
}
.station-card>.station-art>svg {
  width:42px;
  height:42px
}
.station-info {
  min-width:0;
  flex:1
}
.station-info h3 {
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  font-size:.85rem;
  font-weight:650
}
.station-info p {
  font-size:.7rem;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  margin-top:.3rem
}
.station-meta {
  color:var(--muted);
  font-size:.63rem;
  margin-top:.65rem;
  display:flex;
  gap:.5rem
}
.station-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:.7rem
}
.station-play {
  border:1px solid var(--border);
  background:var(--elevated);
  color:var(--text);
  border-radius:50%;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center
}
.station-play:hover,.station-card.is-current .station-play {
  background:var(--accent);
  color:var(--bg)
}
.station-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.6rem
}
.station-list .station-card {
  display:grid;
  grid-template-columns:60px minmax(0,1fr) auto;
  align-items:center;
  gap:.75rem;
  padding:.75rem;
  min-width:0
}
.station-list .station-card>.station-art {
  grid-column:1;
  grid-row:1;
  width:60px;
  height:60px;
  aspect-ratio:1;
  align-self:start;
  margin:0;
  padding:0
}
.station-list .station-card>.station-art>svg {
  width:26px;
  height:26px
}
.station-list .station-info { grid-column:2; grid-row:1; align-self:start; }
.station-list .station-info h3 { line-height:1.35; }
.station-list .station-info p { margin-top:.15rem; line-height:1.35; }
.station-list .station-meta {
  grid-column:3;
  grid-row:1;
  align-self:start;
  min-width:0;
  margin:.1rem 0 0;
  justify-content:flex-end
}
.station-list .station-actions {
  grid-column:3;
  grid-row:1;
  align-self:end;
  margin:0;
  gap:.35rem
}
.country-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.75rem
}
.country {
  display:flex;
  align-items:center;
  gap:.9rem;
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:.7rem;
  padding:1rem;
  font-size:.8rem
}
.country:hover {
  background:var(--card)
}
.country-code {
  font-size:.7rem;
  font-weight:750;
  color:var(--accent);
  background:var(--country-code-bg);
  border-radius:.4rem;
  padding:.5rem
}
.country>svg {
  margin-left:auto;
  color:var(--muted)
}
.genre-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1rem
}
.genre-card {
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.5rem
}
.genre-card h2 {
  font-size:1.2rem;
  margin-bottom:1rem
}
.genre-card>a {
  color:var(--accent)
}
.tag-list {
  display:flex;
  gap:.5rem;
  flex-wrap:wrap
}
.tag {
  border:1px solid var(--border);
  border-radius:2rem;
  padding:.4rem .7rem;
  font-size:.7rem;
  color:var(--muted)
}
.tag:hover {
  border-color:var(--accent);
  color:var(--accent)
}
.filters {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.8rem;
  padding:1.2rem;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin-bottom:1.5rem
}
.field {
  display:grid;
  gap:.4rem;
  min-width:0
}
.field>span {
  font-size:.68rem;
  color:var(--muted)
}
.search-field {
  grid-column:span 2;
  position:relative
}
.search-field input {
  padding-right:3rem
}
.search-clear {
  position:absolute;
  right:.2rem;
  bottom:0
}
.directory-toolbar {
  display:flex;
  align-items:center;
  gap:.5rem;
  margin:1rem 0
}
.directory-toolbar p {
  font-size:.75rem;
  flex:1
}
.view-button[aria-pressed=true] {
  color:var(--accent);
  background:var(--card)
}
.load-more {
  display:block;
  margin:1.5rem auto
}
.empty-state {
  padding:3rem 1rem;
  text-align:center;
  border:1px dashed var(--border);
  border-radius:var(--radius)
}
.empty-state h2 {
  margin-bottom:.5rem
}
.empty-state p {
  max-width:480px;
  margin:0 auto 1.25rem;
  font-size:.85rem
}
.loading-state {
  padding:2.5rem;
  text-align:center;
  color:var(--muted);
  font-size:.85rem
}
.skeleton-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1rem
}
.skeleton {
  height:210px;
  border-radius:var(--radius);
  background:linear-gradient(130deg,var(--card),var(--panel));
  border:1px solid var(--border)
}
.collection-tools {
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-bottom:1.5rem
}
.favorites-filter {
  max-width: 20rem;
  margin-bottom: 1.5rem;
}
.favorites-toolbar { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-5); }
.favorites-toolbar .favorites-filter { flex:1; margin-bottom:0; }
.view-switcher { display:flex; gap:var(--space-2); }
.custom-labels { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); margin-top:.35rem; }
.custom-label {
  display: inline-block;
  margin: 0;
  border:0;
  border-radius: .3rem;
  padding: .1rem .4rem;
  background: var(--elevated);
  color: var(--accent);
  font-size: .65rem;
  font-weight: 650;
  line-height:1.5;
}
.custom-delete { color:var(--danger); }
.custom-delete:hover { background:var(--button-hover); }
.form-error {
  color: var(--danger);
  font-size: .8rem;
}
dialog {
  width:min(520px,calc(100% - 2rem));
  max-height:85dvh;
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:1.25rem;
  padding:1.5rem
}
dialog::backdrop {
  background:var(--dialog-backdrop)
}
.dialog-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:1.5rem
}
.dialog-head h2 {
  margin-top:.3rem
}
.header-about { width:auto; padding:0 .75rem; gap:.4rem; border-radius:var(--radius-small); }
.header-about-label { font-size:.75rem; font-weight:650; }
.about-dialog { width:min(560px,calc(100% - 2rem)); }
.about-body { display:grid; gap:var(--space-5); }
.about-body p { font-size:.8rem; line-height:1.8; }
.about-body .about-intro { color:var(--text); font-size:.9rem; }
.about-release { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-3); }
.about-release-copy { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); }
.about-version { color:var(--accent); font-size:.8rem; }
.about-release time { color:var(--muted); font-size:.7rem; }
.about-release .button { font-size:.75rem; }
.changelog-dialog { width:min(720px,calc(100% - 2rem)); overflow-y:auto; overscroll-behavior:contain; }
.release-notes { display:grid; gap:var(--space-5); overflow-wrap:anywhere; }
.release-notes + .release-notes { margin-top:var(--space-6); padding-top:var(--space-6); border-top:1px solid var(--border); }
.release-heading h3 { font-size:1.1rem; }
.release-heading time { display:block; margin-top:var(--space-2); color:var(--muted); font-size:.75rem; }
.release-notes h4 { margin:0 0 var(--space-2); font-size:.85rem; }
.release-notes ul { margin:0; padding-left:1.2rem; color:var(--muted); font-size:.75rem; line-height:1.75; }
.release-notes li + li { margin-top:var(--space-2); }
.release-limitations { padding-top:var(--space-4); border-top:1px solid var(--border); }
.about-body h3 { margin-bottom:var(--space-2); }
.about-body section p + p { margin-top:var(--space-3); }
.about-body a { color:var(--accent); text-decoration:underline; text-underline-offset:.2em; }
.about-credit { display:grid; grid-template-columns:minmax(0,1fr) 76px; align-items:center; gap:var(--space-4); padding:var(--space-4); border:1px solid var(--border); border-radius:var(--radius-small); background:var(--card); }
.about-credit-copy { display:grid; gap:var(--space-2); min-width:0; overflow-wrap:anywhere; }
.about-credit-logo { display:block; width:76px; height:76px; justify-self:end; aspect-ratio:1; object-fit:contain; filter:var(--brand-icon-filter); }
.about-credit .eyebrow { font-size:.6rem; }
.about-credit strong { font-size:1.1rem; }
.about-credit a { font-size:.8rem; }
.settings-form {
  display:grid;
  gap:1.2rem
}
.settings-form .field {
  gap:.6rem
}
.settings-check {
  display:flex;
  align-items:center;
  gap:.7rem;
  font-size:.85rem
}
.settings-check input {
  width:20px;
  height:20px;
  accent-color:var(--accent)
}
.settings-note {
  font-size:.75rem;
  line-height:1.7;
  border-top:1px solid var(--border);
  padding-top:1rem
}
.toast {
  position:fixed;
  z-index:60;
  bottom:calc(var(--player) + 1rem);
  left:50%;
  transform:translateX(-50%);
  max-width:calc(100% - 2rem);
  width:max-content;
  padding:.85rem 1.2rem;
  border:1px solid var(--border);
  border-radius:.7rem;
  background:var(--elevated);
  box-shadow:var(--toast-shadow);
  font-size:.8rem
}
.page-loader {
  position: fixed;
  top: var(--loader-top, 0px);
  left: var(--loader-left, 0px);
  width: var(--loader-width, 100%);
  height: var(--loader-height, 100dvh);
  z-index: 1000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: var(--bg);
  text-align: center;
  visibility: hidden;
  animation: loader-show 0s 500ms forwards;
}
html.page-loading body > :not(.page-loader) {
  visibility: hidden;
}
html.page-loading .page-loader {
  display: flex;
}
.page-loader__spinner {
  width: 68px;
  height: 68px;
  margin-bottom: var(--space-7);
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-left-color: var(--accent);
  border-radius: 50%;
  animation: loader-spin 900ms linear infinite;
}
.page-loader__brand {
  font-size: 1.4rem;
  letter-spacing: -.04em;
}
.page-loader__brand span {
  display: block;
  margin-top: var(--space-1);
  color: var(--muted);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.page-loader__message {
  margin-top: var(--space-5);
  font-size: .75rem;
}
/* Fade the covering layer to preserve fixed player/header positioning. */
html.page-revealed .page-loader {
  display: flex;
  pointer-events: none;
  animation: page-reveal var(--page-reveal-duration) ease-out both;
}
html.page-revealed .page-loader > * {
  visibility: hidden;
  animation: none;
}
@keyframes loader-show {
  to { visibility: visible; }
}
@keyframes loader-spin {
  to { transform: rotate(360deg); }
}
@keyframes page-reveal {
  from { opacity: 1; visibility: visible; }
  to { opacity: 0; visibility: hidden; }
}
.offline-banner {
  background:var(--offline-bg);
  color:var(--offline-text);
  padding:.6rem 1rem;
  border-radius:.6rem;
  margin-bottom:1rem;
  font-size:.8rem
}
.listener-stats { display:grid; margin:0 0 var(--space-4); }
.listener-station-reveal { display:grid; grid-template-rows:0fr; opacity:0; margin-top:0; transition:grid-template-rows var(--transition),opacity var(--transition),margin-top var(--transition); }
.listener-station-reveal[data-available=true] { grid-template-rows:1fr; opacity:1; margin-top:var(--space-3); }
.listener-station-clip { min-height:0; overflow:hidden; }
.listener-stat { display:flex; flex-direction:column; justify-content:center; margin:0; min-width:0; min-height:3.75rem; padding:var(--space-1) 0 var(--space-1) var(--space-3); border-left:2px solid var(--border); }
.listener-stat--site,.listener-stat--station { border-left-color:var(--accent); }
.listener-stat dd { order:0; margin:0; font-size:1.75rem; line-height:1.2; font-weight:700; letter-spacing:-.04em; font-variant-numeric:tabular-nums; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.listener-stat--site dd,.listener-stat--station dd { color:var(--accent); }
.listener-stat dt { order:1; font-size:.65rem; line-height:1.4; color:var(--muted); }
.mobile-listener-note { display:none; }
.listener-note-title { color:var(--text); font-size:.8rem; }
.listener-note-caption { margin-top:var(--space-2); font-size:.7rem; }

.favorite-folder-dialog { overflow-y:auto; overscroll-behavior:contain; }
.folder-chooser { min-width:0; }
.folder-chooser .collection-tools { margin-block:var(--space-3); }
.folder-station-name { margin-bottom:var(--space-4); overflow-wrap:anywhere; color:var(--accent); }
.favorites-toolbar .favorites-filter { min-width:min(100%,12rem); }

.station-folder { min-width:0; max-width:min(45%,12rem); min-height:44px; padding:.3rem .5rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:1px solid transparent; border-radius:var(--radius-small); background:transparent; color:var(--muted); font-size:.7rem; }
.station-folder:hover { background:var(--button-hover); border-color:var(--border); color:var(--accent); }
.station-list .station-folder { display:block; width:fit-content; max-width:100%; min-height:0; margin:.15rem 0 0; padding:0; line-height:1.35; text-align:left; }
.custom-labels .station-folder { display:inline-block; min-height:0; max-width:100%; margin:0; padding:.1rem .4rem; font-size:.65rem; line-height:1.5; }
.station-list .custom-labels { margin-top:.15rem; }