:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #171a18;
  color: #f3f0e8;
  --muted: #9ea49f;
  --surface: #222624;
  --raised: #292e2a;
  --line: #3b403c;
  --accent: #d36b38;
  --accent-light: #f0a977;
  --green: #7fb18d;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100vh; color: #f3f0e8; background: radial-gradient(circle at 80% -5%,#6f392428,transparent 30%), linear-gradient(120deg,#171a18,#1b1f1c 55%,#161917); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .18; background-image: linear-gradient(#ffffff0c 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px); background-size: 80px 80px; }
main { position: relative; width: min(1180px,calc(100% - 40px)); margin: 0 auto; padding: 22px 0 54px; }
a { color: var(--accent-light); }

.public-nav { display: flex; align-items: center; justify-content: space-between; min-height: 58px; margin-bottom: 64px; border-bottom: 1px solid #ffffff12; }
.nav-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.nav-brand img { width: 38px; height: 38px; border: 1px solid #ffffff20; border-radius: 50%; object-fit: cover; }
.nav-brand span,.nav-brand strong,.nav-brand small { display: block; }
.nav-brand strong { font-size: .82rem; }
.nav-brand small { color: #9fa59f; font-size: .61rem; letter-spacing: .09em; text-transform: uppercase; }
.directory-link { color: #c9ccc7; font-size: .76rem; font-weight: 650; text-decoration: none; }
.portal-label { color: #929892; font-size: .69rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.eyebrow { margin: 0 0 11px; color: var(--accent-light); font-size: .65rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px #7fb18d16; }
.directory-hero,.station-hero { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 44px; align-items: end; margin-bottom: 48px; }
.directory-hero h1,.station-hero h1 { max-width: 880px; margin: 0; font-size: clamp(2.7rem,7vw,5.8rem); font-weight: 670; letter-spacing: -.06em; line-height: .94; text-wrap: balance; }
.station-hero h1 { font-size: clamp(2.5rem,6vw,5rem); }
.lede { max-width: 690px; margin: 20px 0 0; color: var(--muted); font-size: 1rem; line-height: 1.65; }
.directory-summary { display: flex; gap: 28px; padding-bottom: 5px; }
.directory-summary div { min-width: 105px; }
.directory-summary strong,.directory-summary span { display: block; }
.directory-summary strong { font-size: 1.8rem; }
.directory-summary span { color: var(--muted); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; }
.station-picker { display: grid; width: 290px; gap: 7px; color: #aeb3ae; font-size: .67rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.station-picker select { width: 100%; padding: 11px 12px; border: 1px solid #4a504b; border-radius: 7px; background: #232724; color: #f2efe7; font: inherit; font-size: .77rem; text-transform: none; }

.directory-toolbar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.directory-toolbar span { font-size: .78rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.directory-toolbar small { color: var(--muted); font-size: .72rem; }
.directory-loading,.empty-state { display: flex; min-height: 180px; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: .82rem; }
.directory-loading span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 1.2s infinite; }
.station-group { margin-top: 30px; }
.group-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 9px; }
.group-heading span { color: var(--muted); font-size: .61rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.group-heading h2 { margin: 2px 0 0; font-size: 1rem; }
.group-heading > strong { color: #999f99; font-size: .7rem; }

.radio-cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.radio-card { display: flex; min-height: 132px; flex-direction: column; padding: 13px 14px; border: 1px solid var(--line); border-radius: 8px; background: #222624d9; color: #f4f1e9; text-decoration: none; box-shadow: 0 10px 24px #0002; transition: transform .18s,border-color .18s,background .18s; }
.radio-card:hover { transform: translateY(-2px); border-color: #81614f; background: var(--raised); }
.card-top { display: flex; align-items: center; justify-content: space-between; }
.card-live,.test-label { font-size: .56rem; font-weight: 850; letter-spacing: .12em; }
.card-live { color: #bfc5bf; }
.card-live i,.online-label i { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--green); }
.test-label { padding: 3px 5px; border: 1px solid #846344; border-radius: 3px; color: #e7b584; }
.radio-card > strong { margin-top: 16px; font-size: .98rem; line-height: 1.2; }
.radio-card > span { margin-top: 3px; color: var(--muted); font-size: .69rem; }
.card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; border-top: 1px solid #ffffff0e; color: #858b85; font-size: .59rem; }
.card-footer span:last-child { text-align: right; }
.card-footer b { margin-left: 4px; color: var(--accent-light); font-size: .85rem; }

.player-card,.conditions-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: #222624e8; box-shadow: 0 22px 60px #0003; }
.player-main { display: grid; grid-template-columns: 86px minmax(0,1fr) auto; gap: 20px; align-items: center; padding: 30px; }
.broadcast-mark { display: flex; height: 66px; align-items: center; justify-content: center; gap: 4px; border-radius: 50%; background: #2d332f; }
.broadcast-mark span { width: 4px; border-radius: 4px; background: var(--accent); }
.broadcast-mark span:nth-child(1),.broadcast-mark span:nth-child(5) { height: 18px; }
.broadcast-mark span:nth-child(2),.broadcast-mark span:nth-child(4) { height: 34px; }
.broadcast-mark span:nth-child(3) { height: 50px; }
.broadcast-copy span,.broadcast-copy strong,.broadcast-copy small { display: block; }
.overline { margin-bottom: 6px; color: #8f958f; font-size: .61rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.broadcast-copy strong { font-size: 1.05rem; }
.broadcast-copy small { margin-top: 5px; color: var(--muted); font-size: .72rem; }
.controls { display: flex; gap: 7px; }
button { min-height: 42px; padding: 10px 16px; border: 1px solid transparent; border-radius: 7px; background: var(--accent); color: #fff; font: inherit; font-size: .78rem; font-weight: 750; cursor: pointer; }
button:hover { background: #e17743; }
.secondary { border-color: #484e49; background: #303531; color: #d7dad6; }
.broadcast-meta { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); background: #1e221f; }
.broadcast-meta div { padding: 15px 20px; border-right: 1px solid var(--line); }
.broadcast-meta div:last-child { border-right: 0; }
.broadcast-meta span,.broadcast-meta strong,.broadcast-meta time { display: block; }
.broadcast-meta span { margin-bottom: 4px; color: #858b85; font-size: .59rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.broadcast-meta strong,.broadcast-meta time { color: #d9dcd7; font-size: .74rem; font-weight: 650; }
.error { margin: 0; padding: 12px 18px; border-top: 1px solid #6e3e35; background: #39231f; color: #efb6aa; font-size: .76rem; }
.error[hidden] { display: none; }

.conditions-panel { margin-top: 16px; padding: 24px; }
.panel-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 20px; }
.panel-heading h2 { margin: 0; font-size: 1.2rem; }
.panel-heading > span { color: var(--muted); font-size: .7rem; }
.condition-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); border: 1px solid var(--line); border-radius: 8px; background: #1e221f; }
.condition-grid article { min-width: 0; padding: 15px; border-right: 1px solid var(--line); }
.condition-grid article:last-child { border-right: 0; }
.condition-grid span,.condition-grid strong { display: block; }
.condition-grid span { margin-bottom: 6px; color: #858b85; font-size: .58rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.condition-grid strong { overflow: hidden; color: #eeeae2; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
footer { display: flex; align-items: center; justify-content: space-between; margin-top: 54px; padding-top: 18px; border-top: 1px solid #ffffff10; color: #737973; font-size: .66rem; }
footer a { color: #aeb3ae; text-decoration: none; }
.empty-state { flex-direction: column; }
.empty-state strong { color: #ddd9d0; font-size: .95rem; }

@keyframes pulse { 50% { opacity: .35; transform: scale(.75); } }
button:focus-visible,select:focus-visible,a:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; }

@media (max-width: 1050px) { .radio-cards { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 900px) {
  .station-hero,.directory-hero { grid-template-columns: 1fr; align-items: start; }
  .station-picker { width: min(100%,420px); }
  .player-main { grid-template-columns: 70px minmax(0,1fr); }
  .controls { grid-column: 1/-1; }
  .controls button { flex: 1; }
  .condition-grid { grid-template-columns: repeat(3,1fr); }
  .condition-grid article:nth-child(3) { border-right: 0; }
  .condition-grid article:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 760px) { .radio-cards { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) {
  main { width: min(100% - 24px,1180px); padding-top: 12px; }
  .public-nav { margin-bottom: 42px; }
  .directory-link { font-size: 0; }
  .directory-link span { font-size: 1.1rem; }
  .directory-hero,.station-hero { margin-bottom: 34px; }
  .directory-toolbar small { display: none; }
  .player-main { grid-template-columns: 56px minmax(0,1fr); gap: 13px; padding: 20px; }
  .broadcast-mark { height: 56px; }
  .broadcast-meta { grid-template-columns: 1fr; }
  .broadcast-meta div { border-right: 0; border-bottom: 1px solid var(--line); }
  .conditions-panel { padding: 18px; }
  .condition-grid { grid-template-columns: repeat(2,1fr); }
  .condition-grid article:nth-child(3) { border-right: 1px solid var(--line); }
  .condition-grid article:nth-child(-n+3) { border-bottom: 0; }
  .condition-grid article:nth-child(2n) { border-right: 0; }
  .condition-grid article:nth-child(-n+4) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 500px) { .radio-cards { grid-template-columns: 1fr; } .radio-card { min-height: 124px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; } }