:root {
    --ink-950: #0b1533;
    --ink-800: #1a2747;
    --ink-650: #41506f;
    --ink-500: #66728d;
    --line: #dfe5ef;
    --surface: #ffffff;
    --surface-soft: #f5f7fb;
    --surface-warm: #fff8f1;
    --accent: #e4473d;
    --accent-dark: #bd3029;
    --accent-soft: #fff0ed;
    --blue: #3157c8;
    --focus: #1769e0;
    --success: #18794e;
    --shadow-sm: 0 8px 24px rgba(20, 36, 75, 0.08);
    --shadow-lg: 0 22px 60px rgba(13, 27, 61, 0.16);
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --content: 1180px;
    --station-section-gap: 32px;
}

[hidden] {
    display: none !important;
}

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    background: var(--surface-soft);
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink-950);
    background:
        radial-gradient(circle at 8% 3%, rgba(228, 71, 61, 0.08), transparent 24rem),
        var(--surface-soft);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

body.has-player {
    padding-bottom: 118px;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: var(--blue);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--accent-dark);
}

button,
input {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 72%, white);
    outline-offset: 3px;
}

.visually-hidden {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    margin: -1px;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 12px;
    left: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    color: white;
    background: var(--ink-950);
    transform: translateY(-160%);
}

.skip-link:focus {
    transform: translateY(0);
}

.site-header {
    position: sticky;
    z-index: 50;
    top: 0;
    border-bottom: 1px solid rgba(223, 229, 239, 0.9);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(18px);
}

.site-header__inner {
    display: flex;
    width: min(calc(100% - 32px), var(--content));
    min-height: 76px;
    margin: 0 auto;
    align-items: center;
    gap: 28px;
}

.brand {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 11px;
    color: var(--ink-950);
    font-size: 19px;
    font-weight: 850;
    letter-spacing: -0.03em;
    text-decoration: none;
}

.brand:hover {
    color: var(--ink-950);
}

.site-search {
    display: flex;
    min-width: 180px;
    max-width: 270px;
    flex: 1 1 230px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-soft);
}

.site-search label {
    min-width: 0;
    flex: 1;
}

.site-search input {
    width: 100%;
    height: 42px;
    padding: 9px 4px 9px 12px;
    border: 0;
    outline: 0;
    color: var(--ink-950);
    background: transparent;
    font-size: 14px;
}

.site-search button {
    width: 42px;
    border: 0;
    border-radius: 10px;
    color: var(--ink-650);
    background: transparent;
    font-size: 22px;
    cursor: pointer;
}

.site-search:focus-within {
    border-color: var(--focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 14%, transparent);
}

.brand__mark {
    position: relative;
    display: grid;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    place-items: center;
    color: white;
    background: var(--accent);
    box-shadow: 0 8px 18px rgba(228, 71, 61, 0.28);
}

.brand__mark::before {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
    box-shadow:
        -7px 0 0 -3px rgba(255, 255, 255, 0.72),
        7px 0 0 -3px rgba(255, 255, 255, 0.72);
    content: "";
}

.site-nav {
    display: flex;
    margin-left: auto;
    align-items: center;
    gap: 4px;
}

.site-nav a,
.site-nav summary {
    display: inline-flex;
    min-height: 42px;
    padding: 9px 13px;
    border-radius: 10px;
    align-items: center;
    color: var(--ink-650);
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
    cursor: pointer;
}

.site-nav a:hover,
.site-nav summary:hover,
.site-nav a[aria-current="page"] {
    color: var(--ink-950);
    background: var(--surface-soft);
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown summary {
    list-style: none;
}

.nav-dropdown summary::-webkit-details-marker {
    display: none;
}

.nav-dropdown summary::after {
    margin-left: 7px;
    font-size: 11px;
    content: "▾";
}

.nav-dropdown__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    width: 190px;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    margin-left: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink-950);
    background: var(--surface);
    cursor: pointer;
}

.page-shell {
    width: min(calc(100% - 32px), var(--content));
    margin: 0 auto;
    padding: 38px 0 72px;
}

.breadcrumbs {
    display: flex;
    margin: 0 0 22px;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--ink-500);
    font-size: 13px;
    font-weight: 700;
}

.breadcrumbs a {
    color: inherit;
    text-decoration: none;
}

.breadcrumbs__separator {
    opacity: 0.55;
}

.hero {
    position: relative;
    overflow: hidden;
    display: grid;
    min-height: 390px;
    padding: clamp(32px, 6vw, 76px);
    border-radius: var(--radius-lg);
    align-items: center;
    color: white;
    background:
        radial-gradient(circle at 76% 25%, rgba(228, 71, 61, 0.72), transparent 18rem),
        linear-gradient(135deg, #0b1533 0%, #172752 58%, #25396c 100%);
    box-shadow: var(--shadow-lg);
}

.hero::after {
    position: absolute;
    right: -78px;
    bottom: -142px;
    width: 390px;
    height: 390px;
    border: 70px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    content: "";
}

.hero__content {
    position: relative;
    z-index: 1;
    max-width: 700px;
}

.eyebrow {
    margin: 0 0 12px;
    color: var(--accent);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.hero .eyebrow {
    color: #ffb2aa;
}

.hero h1,
.page-title,
.station-hero h1 {
    margin: 0;
    font-size: clamp(34px, 6vw, 66px);
    line-height: 1.02;
    letter-spacing: -0.055em;
}

.hero p {
    max-width: 620px;
    margin: 22px 0 0;
    color: #dce4f7;
    font-size: clamp(17px, 2vw, 20px);
}

.hero__actions {
    display: flex;
    margin-top: 30px;
    flex-wrap: wrap;
    gap: 12px;
}

.button {
    display: inline-flex;
    min-height: 48px;
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: 13px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: white;
    background: var(--accent);
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.button:hover {
    color: white;
    background: var(--accent-dark);
    box-shadow: 0 10px 22px rgba(228, 71, 61, 0.24);
    transform: translateY(-1px);
}

.button--secondary {
    border-color: rgba(255, 255, 255, 0.25);
    color: white;
    background: rgba(255, 255, 255, 0.09);
}

.button--secondary:hover {
    background: rgba(255, 255, 255, 0.16);
}

.button--light {
    border-color: var(--line);
    color: var(--ink-950);
    background: var(--surface);
}

.button--light:hover {
    color: var(--ink-950);
    background: var(--surface-soft);
    box-shadow: none;
}

.section {
    margin-top: 52px;
}

.feature-grid,
.directory-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.feature-card,
.directory-link {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    color: var(--ink-950);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: border-color 160ms ease, transform 160ms ease;
}

.feature-card:hover,
.directory-link:hover {
    border-color: #c7d0e1;
    color: var(--ink-950);
    transform: translateY(-2px);
}

.feature-card strong,
.directory-link strong {
    display: block;
    font-size: 18px;
}

.feature-card span,
.directory-link span {
    display: block;
    margin-top: 5px;
    color: var(--ink-500);
    font-size: 14px;
}

.directory-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.directory-link {
    padding: 16px 18px;
}

.section-heading {
    display: flex;
    margin-bottom: 20px;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

.section-heading h2,
.content-card h2 {
    margin: 0;
    font-size: clamp(25px, 3.2vw, 36px);
    line-height: 1.12;
    letter-spacing: -0.04em;
}

.about-project {
    margin-bottom: 0;
}

.about-project__card {
    background:
        radial-gradient(circle at 100% 0, rgba(255, 107, 44, 0.11), transparent 34%),
        var(--surface);
}

.about-project__copy {
    max-width: 78ch;
}

.about-project__copy p:last-child {
    margin-bottom: 0;
}

.stream-health-summary {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    color: var(--muted);
}

.stream-health-summary > div:first-child {
    display: grid;
    gap: 0.25rem;
}

.stream-health-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.stream-health-progress {
    min-width: 16rem;
    font-size: 0.92rem;
    text-align: right;
}

.stream-health-provider-note {
    display: grid;
    gap: 0.25rem;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid #f0d27d;
    border-radius: var(--radius-sm);
    background: #fff9e9;
    color: #654a00;
}

.stream-health-provider-note--http {
    border-color: #b9d4ef;
    background: #f2f8ff;
    color: #214f7a;
}

.stream-availability-note {
    display: inline-flex;
    margin: 0.85rem 0 0;
    padding: 0.45rem 0.7rem;
    border: 1px solid #f0d27d;
    border-radius: 999px;
    background: #fff9e9;
    color: #654a00;
    font-size: 0.9rem;
    font-weight: 800;
}

.stream-health-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.9rem;
    margin-top: 0.45rem;
    font-size: 0.86rem;
    font-weight: 800;
}

.stream-health-links a {
    white-space: nowrap;
}

.stream-status {
    display: inline-flex;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    background: var(--surface-soft);
    font-weight: 800;
    text-transform: capitalize;
}

.stream-status.is-working {
    background: #e9f8ef;
    color: #146c3a;
}

.stream-status.is-broken {
    background: #fff0ee;
    color: #a63024;
}

.stream-status.is-special-check {
    background: #fff6de;
    color: #7c5a00;
}

.stream-status.is-us-only {
    background: #fff6de;
    color: #7c5a00;
}

.stream-status.is-http-only {
    background: #e8f3ff;
    color: #205a94;
}

.stream-status.is-checking {
    background: #fff6de;
    color: #7c5a00;
}

.stream-health-table tr.is-checking td {
    opacity: 0.72;
}

.stream-health-table tr.is-broken td {
    background: rgba(166, 48, 36, 0.035);
}

.stream-health-table tr.is-special-check td {
    background: rgba(203, 143, 0, 0.045);
}

.stream-health-table tr.is-us-only td {
    background: rgba(203, 143, 0, 0.045);
}

.form-notice--warning {
    border-color: #f0d27d;
    background: #fff9e9;
    color: #654a00;
}

.stream-health-table tr.is-http-only td {
    background: rgba(32, 90, 148, 0.04);
}

@media (max-width: 760px) {
    .stream-health-summary,
    .stream-health-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .stream-health-progress {
        min-width: 0;
        text-align: left;
    }
}

.section-heading p {
    max-width: 650px;
    margin: 7px 0 0;
    color: var(--ink-500);
}

.station-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.station-carousel {
    position: relative;
    min-width: 0;
}

.station-carousel__viewport {
    overflow-x: auto;
    padding: 4px 4px 18px;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-color: #b6c0d3 transparent;
    scrollbar-width: thin;
}

.station-carousel__track {
    display: grid;
    width: max-content;
    grid-auto-flow: column;
    grid-auto-columns: clamp(280px, 30vw, 360px);
    gap: 18px;
}

.station-carousel .station-card {
    width: 100%;
    scroll-snap-align: start;
}

.station-carousel__controls {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.related-stations {
    overflow: hidden;
    padding: clamp(24px, 4vw, 38px);
    border: 1px solid #d7deeb;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 92% 0%, rgba(228, 71, 61, 0.13), transparent 22rem),
        linear-gradient(145deg, #eef2f9, #f8f9fc);
    box-shadow: var(--shadow-sm);
}

.related-stations .section-heading {
    margin-bottom: 24px;
}

.carousel-button {
    display: grid;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 50%;
    place-items: center;
    color: var(--ink-950);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    font-size: 20px;
    font-weight: 850;
    cursor: pointer;
}

.carousel-button:hover {
    border-color: var(--accent);
    color: white;
    background: var(--accent);
}

.ad-slot {
    display: grid;
    width: min(100%, 970px);
    margin: 28px auto;
    gap: 7px;
}

.ad-slot__label {
    color: var(--ink-500);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}

.ad-slot__surface {
    display: grid;
    min-height: 112px;
    border: 1px dashed #cbd3e1;
    border-radius: var(--radius-md);
    place-items: center;
    color: #929db2;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.65), rgba(245, 247, 251, 0.8)),
        var(--surface-soft);
    font-size: 12px;
    font-weight: 700;
}

.station-card {
    position: relative;
    display: grid;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.station-card:hover {
    border-color: #c7d0e1;
    box-shadow: 0 15px 34px rgba(20, 36, 75, 0.12);
    transform: translateY(-3px);
}

.station-card__top {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.station-card__logo,
.station-logo {
    width: 68px;
    height: 68px;
    border: 1px solid var(--line);
    border-radius: 16px;
    object-fit: contain;
    background: white;
}

.station-card__placeholder {
    display: grid;
    width: 68px;
    height: 68px;
    border-radius: 16px;
    place-items: center;
    color: var(--accent);
    background: var(--accent-soft);
    font-size: 22px;
    font-weight: 900;
}

.station-card__title {
    margin: 0;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.station-card__title a {
    color: var(--ink-950);
    text-decoration: none;
}

.station-card__meta {
    margin: 6px 0 0;
    color: var(--ink-500);
    font-size: 13px;
    font-weight: 650;
}

.station-card__match {
    width: fit-content;
    margin: 15px 0 0;
    padding: 5px 9px;
    border-radius: 999px;
    color: #9f2d26;
    background: var(--accent-soft);
    font-size: 11px;
    font-weight: 850;
}

.station-card__facts {
    display: flex;
    min-height: 34px;
    margin: 16px 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.tag {
    display: inline-flex;
    min-height: 28px;
    padding: 4px 9px;
    border-radius: 999px;
    align-items: center;
    color: var(--ink-650);
    background: var(--surface-soft);
    font-size: 12px;
    font-weight: 750;
}

.station-card__actions {
    display: grid;
    margin-top: auto;
    grid-template-columns: 1fr 44px;
    gap: 9px;
}

.play-button {
    display: inline-flex;
    min-height: 44px;
    padding: 9px 14px;
    border: 0;
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: white;
    background: var(--ink-950);
    font-weight: 850;
    cursor: pointer;
}

.play-button:hover {
    background: var(--accent);
}

.play-button.is-playing,
.table-play-button.is-playing {
    border-color: var(--accent);
    color: white;
    background: var(--accent);
    box-shadow: 0 8px 20px rgba(228, 71, 61, 0.24);
}

.station-card.is-playing,
.favorite-station.is-playing {
    border-color: rgba(228, 71, 61, 0.56);
    box-shadow: 0 14px 32px rgba(228, 71, 61, 0.13);
}

.station-table tbody tr.is-playing td {
    background: rgba(228, 71, 61, 0.065);
}

.favorite-button {
    display: grid;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 12px;
    place-items: center;
    color: var(--ink-650);
    background: var(--surface);
    font-size: 19px;
    cursor: pointer;
}

.favorite-button[aria-pressed="true"] {
    border-color: #f1c6c1;
    color: var(--accent);
    background: var(--accent-soft);
}

.favorites-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.favorites-nav-count {
    display: inline-grid;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    place-items: center;
    color: white;
    background: var(--accent);
    font-size: 11px;
    font-weight: 900;
}

.favorites-header__title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.favorites-count-badge {
    display: inline-flex;
    padding: 6px 10px;
    border-radius: 999px;
    color: var(--ink-650);
    background: var(--surface-soft);
    font-size: 13px;
    font-weight: 800;
}

.favorites-panel {
    display: grid;
    gap: 22px;
}

.favorites-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.favorites-toolbar h2,
.favorites-empty h2 {
    margin: 4px 0 0;
}

.favorites-toolbar__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.favorites-toolbar__actions .button:disabled {
    opacity: 0.62;
    cursor: not-allowed;
    pointer-events: none;
}

.favorites-clear-button {
    border-color: rgba(228, 71, 61, 0.36);
    color: var(--accent-dark);
    background: rgba(228, 71, 61, 0.07);
    box-shadow: none;
}

.favorites-clear-button:hover {
    border-color: var(--accent);
    color: var(--accent-dark);
    background: rgba(228, 71, 61, 0.13);
    box-shadow: none;
}

.favorites-empty {
    display: grid;
    min-height: 300px;
    padding: 34px;
    border: 1px dashed #c8d0df;
    border-radius: var(--radius-md);
    place-items: center;
    align-content: center;
    gap: 10px;
    text-align: center;
    background: var(--surface-soft);
}

.favorites-empty p {
    margin: 0 0 8px;
    color: var(--ink-500);
}

.favorites-empty__icon {
    display: grid;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    place-items: center;
    color: var(--accent);
    background: var(--accent-soft);
    font-size: 34px;
}

.favorites-list {
    display: grid;
    gap: 10px;
}

.favorite-station {
    display: grid;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    background: var(--surface);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.favorite-station:hover {
    border-color: #c7d0e1;
    box-shadow: var(--shadow-sm);
}

.favorite-station__identity {
    display: grid;
    min-width: 0;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
}

.favorite-station__logo,
.favorite-station__placeholder {
    display: grid;
    width: 58px;
    height: 58px;
    border: 1px solid var(--line);
    border-radius: 14px;
    place-items: center;
    object-fit: contain;
    color: var(--accent);
    background: white;
    font-size: 15px;
    font-weight: 900;
}

.favorite-station__placeholder {
    background: var(--accent-soft);
}

.favorite-station__copy {
    min-width: 0;
}

.favorite-station__title {
    margin: 0;
    overflow: hidden;
    font-size: 17px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.favorite-station__title a {
    color: var(--ink-950);
    text-decoration: none;
}

.favorite-station__title a:hover {
    color: var(--accent);
}

.favorite-station__meta {
    margin: 5px 0 0;
    overflow: hidden;
    color: var(--ink-500);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.favorite-station__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.favorite-remove-button {
    min-height: 44px;
    padding: 9px 13px;
    border: 1px solid #efc8c4;
    border-radius: 12px;
    color: #a63024;
    background: #fff5f3;
    font-weight: 800;
    cursor: pointer;
}

.favorite-remove-button:hover {
    color: white;
    background: #a63024;
}

.content-card,
.station-results,
.hub-header {
    padding: clamp(24px, 4vw, 38px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.hub-header {
    display: grid;
    margin-bottom: 24px;
    gap: 12px;
}

.hub-header h1 {
    margin: 0;
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.05;
    letter-spacing: -0.05em;
}

.hub-intro {
    max-width: 780px;
    color: var(--ink-650);
}

.hub-intro p:last-child {
    margin-bottom: 0;
}

.directory-search {
    display: flex;
    width: min(100%, 720px);
    margin-top: 8px;
    align-items: stretch;
    gap: 10px;
}

.directory-search__field {
    min-width: 0;
    flex: 1;
}

.directory-search input {
    width: 100%;
    min-height: 48px;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: 13px;
    color: var(--ink-950);
    background: var(--surface);
    font: inherit;
}

.directory-search input:focus {
    border-color: var(--focus);
    outline: 3px solid color-mix(in srgb, var(--focus) 14%, transparent);
}

.station-results h2 {
    margin-top: 0;
}

.station-results .station-grid {
    margin-top: 20px;
}

.city-directory__heading {
    display: flex;
    margin-bottom: 20px;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
}

.city-directory__heading h2,
.city-directory__heading p {
    margin-bottom: 0;
}

.city-directory__heading > p {
    max-width: 520px;
    color: var(--ink-500);
    font-size: 14px;
}

.station-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}

.station-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
}

.station-table th,
.station-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

.station-table th {
    color: var(--ink-500);
    background: var(--surface-soft);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.station-table tbody tr:last-child td {
    border-bottom: 0;
}

.station-table tbody tr:hover {
    background: #fafbfe;
}

.station-table__identity {
    display: flex;
    min-width: 220px;
    align-items: center;
    gap: 12px;
}

.station-table__logo,
.station-table__placeholder {
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border: 1px solid var(--line);
    border-radius: 12px;
    place-items: center;
    object-fit: contain;
    color: var(--accent);
    background: var(--accent-soft);
    font-size: 10px;
    font-weight: 900;
}

.station-table__logo {
    background: white;
}

.station-table__name {
    color: var(--ink-950);
    font-weight: 820;
    text-decoration: none;
}

.station-table__name:hover {
    color: var(--accent);
}

.station-table__subline {
    display: block;
    color: var(--ink-500);
    font-size: 12px;
}

.station-table__actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.favorite-button--compact {
    width: 38px;
    height: 38px;
    border-radius: 10px;
}

.listen-count,
.rank-number {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.listener-stat {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 5px;
    color: var(--ink-500);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.listener-stat__icon {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 14px;
    font-style: normal;
    line-height: 1;
}

.listener-stat--compact {
    min-height: 28px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--surface-soft);
}

.listener-stat--hero {
    min-height: 44px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: #e8edfb;
    background: rgba(255, 255, 255, 0.08);
}

.rank-number {
    color: var(--accent);
}

.station-table--directory td:first-child {
    min-width: 250px;
}

.station-table--directory td:nth-child(4) {
    min-width: 135px;
}

.station-table--directory td:nth-child(5) {
    min-width: 150px;
}

.search-empty a {
    font-weight: 750;
}

.table-play-button {
    display: inline-flex;
    min-height: 38px;
    padding: 8px 12px;
    border: 0;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    color: white;
    background: var(--ink-950);
    font-weight: 800;
    cursor: pointer;
}

.table-play-button:hover {
    background: var(--accent);
}

.stream-unavailable {
    display: inline-flex;
    min-height: 32px;
    padding: 6px 9px;
    border-radius: 9px;
    align-items: center;
    color: var(--ink-500);
    background: var(--surface-soft);
    font-size: 12px;
    font-weight: 750;
}

.station-table td:last-child {
    min-width: 128px;
}

.station-table__source {
    display: block;
    width: max-content;
    margin-top: 6px;
    color: var(--ink-500);
    font-size: 11px;
    font-weight: 750;
}

.city-directory__note {
    margin: 16px 0 0;
    color: var(--ink-500);
    font-size: 13px;
}

.station-hero {
    display: grid;
    padding: clamp(24px, 5vw, 48px);
    border-radius: var(--radius-lg);
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(22px, 4vw, 42px);
    color: white;
    background:
        radial-gradient(circle at 82% 20%, rgba(228, 71, 61, 0.5), transparent 18rem),
        var(--ink-950);
    box-shadow: var(--shadow-lg);
}

.station-hero .station-logo,
.station-hero__placeholder {
    width: clamp(112px, 18vw, 178px);
    height: clamp(112px, 18vw, 178px);
    border: 6px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;
    object-fit: contain;
    background: white;
}

.station-hero__placeholder {
    display: grid;
    place-items: center;
    color: var(--accent);
    font-size: 44px;
    font-weight: 900;
}

.station-hero h1 {
    font-size: clamp(34px, 5vw, 58px);
}

.station-hero__meta {
    display: flex;
    margin: 16px 0 0;
    flex-wrap: wrap;
    gap: 8px;
}

.station-hero .tag {
    color: #e8edfb;
    background: rgba(255, 255, 255, 0.1);
}

.station-hero__actions {
    display: flex;
    margin-top: 24px;
    flex-wrap: wrap;
    gap: 10px;
}

.station-layout {
    display: grid;
    margin-top: 24px;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr);
    align-items: start;
    gap: 24px;
}

.station-description__summary {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    color: var(--ink-650);
}

.station-description__summary p {
    margin: 0;
}

.station-description__summary p + p {
    margin-top: 14px;
}

.facts-list {
    display: grid;
    margin: 0;
    gap: 0;
}

.facts-list__row {
    display: grid;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
    grid-template-columns: 120px 1fr;
    gap: 18px;
}

.facts-list__row:last-child {
    border-bottom: 0;
}

.facts-list dt {
    color: var(--ink-500);
    font-size: 13px;
    font-weight: 800;
}

.facts-list dd {
    margin: 0;
    font-weight: 720;
}

.facts-list a {
    overflow-wrap: anywhere;
}

.coverage-relations {
    margin-top: var(--station-section-gap);
    padding: clamp(24px, 4vw, 38px);
    border: 1px solid #d7deeb;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 95% 0, rgba(228, 71, 61, 0.12), transparent 22rem),
        linear-gradient(145deg, #f7f9fc, #eef2f9);
    box-shadow: var(--shadow-sm);
}

.editor-trust {
    margin-top: var(--station-section-gap);
    padding: clamp(1.25rem, 2.5vw, 2rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, rgba(21, 93, 77, 0.06), transparent 42%),
        var(--surface);
}

.editor-trust__heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.25rem;
}

.editor-trust__heading h2 {
    margin: 0.25rem 0 0;
}

.editor-trust__verified {
    display: grid;
    flex: 0 0 auto;
    gap: 0.2rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(21, 93, 77, 0.18);
    border-radius: var(--radius-md);
    background: rgba(21, 93, 77, 0.06);
}

.editor-trust__verified > span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.editor-trust__verified strong {
    color: #155d4d;
}

.editor-trust__sources {
    display: grid;
    margin: 1.25rem 0 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    list-style: none;
    overflow: hidden;
    background: var(--surface);
}

.editor-trust__sources li {
    display: grid;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--line);
    grid-template-columns: minmax(0, 1fr) minmax(12rem, auto);
    align-items: center;
    gap: 1rem;
}

.editor-trust__sources li:last-child {
    border-bottom: 0;
}

.editor-trust__sources li > div:first-child {
    display: grid;
    gap: 0.2rem;
}

.editor-trust__sources li span,
.editor-trust__source-value {
    color: var(--muted);
    font-size: 0.86rem;
}

.editor-trust__source-value {
    text-align: right;
}

.editor-trust__method {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border-left: 4px solid #2c806c;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: rgba(21, 93, 77, 0.055);
}

.editor-trust__method p {
    margin: 0.35rem 0 0;
    color: var(--muted);
}

.coverage-relation__source-label {
    color: var(--muted);
    font-size: 0.84rem;
    white-space: nowrap;
}

.coverage-relations__heading {
    display: flex;
    margin-bottom: 22px;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
}

.coverage-relations__heading h2 {
    margin: 0;
    font-size: clamp(25px, 3.2vw, 36px);
    line-height: 1.12;
    letter-spacing: -0.04em;
}

.coverage-relations__heading > p {
    max-width: 540px;
    margin: 0;
    color: var(--ink-500);
}

.coverage-relations__table-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.coverage-relations__table {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
}

.coverage-relations__table th,
.coverage-relations__table td {
    padding: 15px 18px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
}

.coverage-relations__table th {
    color: var(--ink-500);
    background: var(--surface-soft);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.coverage-relations__table th:first-child {
    width: 180px;
}

.coverage-relations__table th:last-child {
    width: 104px;
}

.coverage-relations__table tbody tr:last-child td {
    border-bottom: 0;
}

.coverage-relation--primary td {
    background: rgba(11, 21, 51, 0.025);
}

.coverage-relation__type {
    display: inline-flex;
    width: max-content;
    padding: 5px 9px;
    border-radius: 999px;
    color: #9f2d26;
    background: var(--accent-soft);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.03em;
    white-space: nowrap;
    text-transform: uppercase;
}

.coverage-relation__type--primary {
    color: #174f7f;
    background: #e8f3ff;
}

.coverage-relation__frequency {
    color: var(--ink-950);
    font-size: 18px;
    font-weight: 900;
}

.coverage-relation__identity {
    font-weight: 820;
}

.coverage-relation__location {
    color: var(--ink-500);
    font-size: 14px;
    font-weight: 700;
}

.coverage-relation__source {
    white-space: nowrap;
    font-size: 13px;
    font-weight: 800;
}

.coverage-relations__reviewed {
    margin: 14px 0 0;
    color: var(--ink-500);
    font-size: 12px;
    font-weight: 700;
}

.program-schedule {
    margin-top: var(--station-section-gap);
    padding: clamp(1.25rem, 2.5vw, 2rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 100% 0, rgba(234, 73, 63, 0.11), transparent 34%),
        var(--surface);
}

.program-schedule__heading,
.program-schedule__footer {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.program-schedule__heading h2 {
    margin: 0.25rem 0 0;
}

.program-schedule__heading > p,
.program-schedule__footer p {
    margin: 0;
    color: var(--muted);
}

.program-schedule__table-wrap {
    margin-top: 1.25rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.program-schedule__table {
    width: 100%;
    border-collapse: collapse;
}

.program-schedule__table th,
.program-schedule__table td {
    padding: 0.9rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--line);
}

.program-schedule__table th {
    color: var(--muted);
    font-size: 0.75rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    background: var(--surface-soft);
}

.program-schedule__table th:first-child,
.program-schedule__table td:first-child {
    width: 15rem;
    white-space: nowrap;
}

.program-schedule__table tbody tr:last-child td {
    border-bottom: 0;
}

.program-schedule__current td {
    background: rgba(234, 73, 63, 0.08);
}

.program-schedule__current td:first-child {
    box-shadow: inset 4px 0 0 var(--accent);
}

.program-schedule__on-air {
    display: inline-flex;
    margin-left: 0.65rem;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    color: var(--accent-strong);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(234, 73, 63, 0.12);
}

.program-schedule__footer {
    align-items: start;
    margin-top: 1rem;
    font-size: 0.86rem;
}

.site-footer {
    padding: 30px 0 44px;
    border-top: 1px solid var(--line);
    color: var(--ink-500);
    background: var(--surface);
}

.site-footer__inner {
    display: flex;
    width: min(calc(100% - 32px), var(--content));
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 13px;
}

.site-footer__links {
    display: grid;
    align-content: start;
    gap: 7px;
}

.site-footer__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(130px, 1fr));
    gap: clamp(28px, 6vw, 72px);
}

.site-footer__links strong {
    margin-bottom: 3px;
    color: var(--ink-950);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.site-footer a {
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}

.format-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.format-card {
    display: grid;
    min-height: 118px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    align-content: center;
    gap: 6px;
    color: var(--ink-950);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.format-card:hover {
    border-color: var(--accent);
    color: var(--accent-dark);
    transform: translateY(-2px);
}

.format-card strong {
    font-size: 20px;
}

.format-card span {
    color: var(--ink-500);
    font-size: 13px;
}

.format-showcase__actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.format-showcase__actions > a {
    font-weight: 800;
    white-space: nowrap;
}

.submission-card {
    padding: clamp(24px, 4vw, 38px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.submission-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.playlist-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.playlist-section,
.related-stations {
    margin-top: var(--station-section-gap);
}

.playlist-grid h3 {
    margin: 0 0 14px;
    font-size: 22px;
}

.track-list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: tracks;
}

.track-list li {
    display: grid;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    counter-increment: tracks;
}

.track-list li:last-child {
    border-bottom: 0;
}

.track-list li > span {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
}

.track-list li > span::before {
    color: var(--accent);
    font-weight: 850;
    content: counter(tracks);
}

.track-list strong,
.track-list small {
    grid-column: 2;
}

.track-list small,
.track-list time,
.track-list b,
.playlist-empty {
    color: var(--ink-500);
    font-size: 12px;
}

.playlist-empty {
    margin-bottom: 0;
}

.playlist-grid--empty {
    grid-template-columns: 1fr;
}

.playlist-empty-state {
    position: relative;
    min-height: 220px;
    overflow: hidden;
    background:
        radial-gradient(circle at 92% 12%, rgba(234, 73, 63, 0.14), transparent 15rem),
        var(--surface);
}

.playlist-empty-state::after {
    position: absolute;
    right: -3rem;
    bottom: -5rem;
    width: 14rem;
    height: 14rem;
    border: 2rem solid rgba(13, 31, 63, 0.035);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.playlist-empty-state h3 {
    max-width: 34rem;
    margin: 0.35rem 0 0.7rem;
    font-size: clamp(1.45rem, 3vw, 2rem);
}

.playlist-empty-state > p:not(.eyebrow) {
    max-width: 54rem;
    color: var(--ink-500);
}

.playlist-empty-state__status {
    position: absolute;
    top: 1.4rem;
    right: 1.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid rgba(234, 73, 63, 0.2);
    border-radius: 999px;
    color: var(--accent-strong);
    font-size: 0.75rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(234, 73, 63, 0.08);
}

.playlist-empty-state__status span {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0.25rem rgba(234, 73, 63, 0.12);
}

.playlist-empty-state__hint {
    margin: 1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    font-size: 0.9rem;
}

.legal-page {
    width: min(100%, 1000px);
    margin: 0 auto;
}

.legal-page__header {
    padding: clamp(28px, 5vw, 52px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 90% 15%, rgba(228, 71, 61, 0.13), transparent 16rem),
        var(--surface);
    box-shadow: var(--shadow-sm);
}

.legal-page__header h1 {
    margin: 4px 0 12px;
    font-size: clamp(36px, 6vw, 58px);
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.legal-page__lede {
    max-width: 760px;
    margin: 0;
    color: var(--ink-650);
    font-size: clamp(17px, 2.4vw, 20px);
}

.legal-page__updated {
    margin: 18px 0 0;
    color: var(--ink-500);
    font-size: 13px;
    font-weight: 750;
}

.legal-page__layout {
    display: grid;
    margin-top: 24px;
    grid-template-columns: minmax(210px, 0.32fr) minmax(0, 1fr);
    align-items: start;
    gap: 24px;
}

.legal-page__summary {
    position: sticky;
    top: 100px;
    padding: 22px;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
    border-radius: var(--radius-md);
    color: var(--ink-650);
    background: var(--accent-soft);
}

.legal-page__summary strong {
    display: block;
    margin-bottom: 6px;
    color: var(--ink-950);
}

.legal-page__summary p {
    margin: 0;
    font-size: 14px;
}

.legal-page__content {
    display: grid;
    gap: 16px;
}

.legal-page__content section,
.contact-form-card {
    padding: clamp(22px, 4vw, 34px);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.legal-page__content h2,
.contact-form-card h2 {
    margin: 0 0 12px;
    font-size: clamp(22px, 3.2vw, 29px);
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.legal-page__content p:first-of-type {
    margin-top: 0;
}

.legal-page__content p:last-child,
.legal-page__content ul:last-child,
.legal-page__content ol:last-child {
    margin-bottom: 0;
}

.legal-page__content li + li {
    margin-top: 7px;
}

.contact-page__grid {
    display: grid;
    margin-top: 24px;
    grid-template-columns: minmax(230px, 0.42fr) minmax(0, 0.58fr);
    align-items: start;
    gap: 24px;
}

.contact-page__intro {
    display: grid;
    gap: 16px;
}

.contact-page__intro .content-card {
    padding: 24px;
}

.contact-page__intro h2 {
    margin-top: 0;
}

.contact-checklist {
    margin: 0;
    padding-left: 20px;
}

.contact-checklist li + li {
    margin-top: 7px;
}

.contact-form {
    display: grid;
    gap: 16px;
}

.contact-field {
    display: grid;
    gap: 7px;
}

.contact-field > span {
    color: var(--ink-800);
    font-size: 13px;
    font-weight: 820;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--ink-950);
    background: var(--surface);
    font: inherit;
}

.contact-field textarea {
    min-height: 170px;
    resize: vertical;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus {
    border-color: var(--focus);
    outline: 3px solid color-mix(in srgb, var(--focus) 16%, transparent);
}

.contact-consent {
    display: grid;
    grid-template-columns: 18px 1fr;
    align-items: start;
    gap: 10px;
    color: var(--ink-650);
    font-size: 13px;
}

.contact-consent input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
}

.contact-form .button {
    justify-self: start;
    border: 0;
    cursor: pointer;
}

.contact-form__honeypot {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.form-notice {
    margin: 0 0 18px;
    padding: 14px 16px;
    border-radius: 11px;
    font-size: 14px;
}

.form-notice ul {
    margin: 7px 0 0;
    padding-left: 20px;
}

.form-notice--success {
    color: #0d5132;
    background: #e8f7ef;
}

.form-notice--error {
    color: #7a211c;
    background: var(--accent-soft);
}

.global-player {
    position: fixed;
    z-index: 100;
    right: 0;
    bottom: 0;
    left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    background:
        linear-gradient(90deg, rgba(228, 71, 61, 0.08), transparent 35%),
        rgba(8, 18, 43, 0.985);
    box-shadow: 0 -18px 50px rgba(11, 21, 51, 0.24);
    backdrop-filter: blur(20px);
}

.global-player[hidden] {
    display: none;
}

.global-player__inner {
    display: grid;
    width: min(calc(100% - 24px), var(--content));
    min-height: 88px;
    margin: 0 auto;
    grid-template-columns: minmax(230px, 1fr) auto auto;
    align-items: center;
    gap: 22px;
}

.global-player__station {
    display: grid;
    min-width: 0;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.global-player__logo {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    object-fit: contain;
    background: white;
}

.global-player__logo:not([src]),
.global-player__logo[src=""] {
    visibility: hidden;
}

.global-player__label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #aeb9d3;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.global-player__label i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff5a4f;
    box-shadow: 0 0 0 5px rgba(228, 71, 61, 0.15);
}

.global-player__title,
.global-player__track {
    overflow: hidden;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.global-player__title {
    font-weight: 850;
}

.global-player__track {
    color: #bcc6dc;
    font-size: 13px;
}

.listener-stat--player {
    margin-top: 3px;
    color: #aeb9d3;
}

.listener-stat--player .listener-stat__icon {
    font-size: 12px;
}

.global-player__audio {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.global-player__controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.player-play-button {
    display: grid;
    width: 54px;
    height: 54px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    place-items: center;
    color: white;
    background: var(--accent);
    box-shadow: 0 10px 26px rgba(228, 71, 61, 0.32);
    font-size: 21px;
    cursor: pointer;
}

.player-play-button:hover {
    background: #f15349;
    transform: translateY(-1px);
}

.player-volume {
    display: flex;
    align-items: center;
    gap: 9px;
}

.player-volume label {
    display: flex;
}

.player-volume input {
    width: 116px;
    height: 4px;
    border-radius: 999px;
    outline: 0;
    appearance: none;
    background: linear-gradient(
        90deg,
        var(--accent) 0 var(--volume, 100%),
        rgba(255, 255, 255, 0.18) var(--volume, 100%) 100%
    );
    cursor: pointer;
}

.player-volume input::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
    border: 2px solid var(--ink-950);
    border-radius: 50%;
    appearance: none;
    background: white;
}

.player-volume input::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 2px solid var(--ink-950);
    border-radius: 50%;
    background: white;
}

.global-player__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.player-icon-button {
    display: grid;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    place-items: center;
    color: white;
    background: rgba(255, 255, 255, 0.07);
    cursor: pointer;
}

.player-icon-button:hover {
    background: rgba(255, 255, 255, 0.14);
}

[data-player-random] {
    font-family: Arial, sans-serif;
    font-size: 21px;
    line-height: 1;
}

[data-player-mute] {
    padding: 0 3px 0 0;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.12em;
    line-height: 1;
}

.player-favorite-button[aria-pressed="true"] {
    border-color: rgba(255, 116, 105, 0.58);
    color: #ff7469;
    background: rgba(228, 71, 61, 0.17);
}

.page-loading::after {
    position: fixed;
    z-index: 90;
    top: 76px;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    content: "";
    animation: loading-slide 900ms linear infinite;
}

@keyframes loading-slide {
    from {
        transform: translateX(-60%);
    }
    to {
        transform: translateX(60%);
    }
}

@media (max-width: 900px) {
    .site-header__inner {
        gap: 14px;
    }

    .site-search {
        max-width: 220px;
    }

    .station-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .station-carousel__track {
        grid-auto-columns: minmax(280px, calc((100vw - 70px) / 2));
    }

    .directory-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .format-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .station-layout {
        grid-template-columns: 1fr;
    }

    .global-player__inner {
        grid-template-columns: minmax(180px, 1fr) auto auto;
    }

    .player-volume input {
        width: 82px;
    }
}

@media (max-width: 760px) {
    .legal-page__layout,
    .contact-page__grid,
    .playlist-grid {
        grid-template-columns: 1fr;
    }

    .legal-page__summary {
        position: static;
    }

    .site-header__inner {
        min-height: 66px;
        gap: 10px;
    }

    .site-search {
        max-width: none;
        flex-basis: 150px;
    }

    .nav-toggle {
        display: grid;
        place-items: center;
    }

    .site-nav {
        position: absolute;
        top: 66px;
        right: 16px;
        left: 16px;
        display: none;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        align-items: stretch;
        background: var(--surface);
        box-shadow: var(--shadow-lg);
    }

    .site-nav.is-open {
        display: grid;
    }

    .favorites-toolbar,
    .favorite-station {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .favorites-toolbar {
        flex-direction: column;
    }

    .favorites-toolbar .button {
        width: 100%;
    }

    .favorites-toolbar__actions {
        display: grid;
        width: 100%;
        grid-template-columns: 1fr;
    }

    .favorite-station__actions {
        display: grid;
        grid-template-columns: 1fr auto;
    }

    .site-nav a,
    .site-nav summary {
        width: 100%;
    }

    .nav-dropdown__menu {
        position: static;
        width: 100%;
        margin-top: 4px;
        border: 0;
        box-shadow: none;
    }

    .page-shell {
        padding-top: 26px;
    }

    .city-directory__heading {
        align-items: start;
        flex-direction: column;
        gap: 8px;
    }

    .hero {
        min-height: 430px;
    }

    .station-hero {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .station-hero .station-logo,
    .station-hero__placeholder {
        margin: 0 auto;
    }

    .station-hero__meta,
    .station-hero__actions {
        justify-content: center;
    }

    body.has-player {
        padding-bottom: 170px;
    }

    .global-player__inner {
        min-height: 116px;
        padding: 12px 0;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
    }

    .global-player__controls {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    .global-player__actions {
        grid-column: 2;
        grid-row: 1;
    }

    .player-volume input {
        display: none;
    }

    .player-volume {
        gap: 0;
    }
}

@media (max-width: 560px) {
    :root {
        --station-section-gap: 24px;
    }

    .editor-trust__heading,
    .editor-trust__sources li {
        align-items: start;
        grid-template-columns: 1fr;
    }

    .editor-trust__heading {
        display: grid;
    }

    .editor-trust__verified {
        width: 100%;
    }

    .editor-trust__source-value {
        text-align: left;
    }

    .playlist-empty-state {
        padding-top: 4.5rem;
    }

    .playlist-empty-state__status {
        top: 1.15rem;
        right: auto;
        left: 1.15rem;
    }

    .program-schedule__heading,
    .program-schedule__footer {
        align-items: start;
        flex-direction: column;
    }

    .program-schedule__table th,
    .program-schedule__table td {
        padding: 0.78rem 0.7rem;
    }

    .program-schedule__table th:first-child,
    .program-schedule__table td:first-child {
        width: 9.7rem;
        font-size: 0.84rem;
    }

    .program-schedule__on-air {
        margin: 0.35rem 0 0;
    }

    .global-player__controls .player-icon-button {
        width: 38px;
        height: 38px;
    }

    .global-player__controls .player-play-button {
        width: 48px;
        height: 48px;
    }

    .brand__text {
        position: absolute;
        overflow: hidden;
        width: 1px;
        height: 1px;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .site-search {
        min-width: 130px;
    }

    .directory-search {
        align-items: stretch;
        flex-direction: column;
    }

    .directory-search .button {
        width: 100%;
    }

    .hero {
        min-height: 460px;
        padding: 30px 24px;
    }

    .hero__actions,
    .hero__actions .button {
        width: 100%;
    }

    .station-grid {
        grid-template-columns: 1fr;
    }

    .station-carousel__track {
        grid-auto-columns: minmax(270px, calc(100vw - 52px));
    }

    .station-carousel__controls {
        align-self: end;
    }

    .ad-slot__surface {
        min-height: 100px;
    }

    .feature-grid,
    .directory-grid,
    .format-grid,
    .submission-form__grid {
        grid-template-columns: 1fr;
    }

    .format-showcase__actions {
        width: 100%;
        align-items: center;
        justify-content: space-between;
    }

    .site-footer__inner {
        align-items: start;
        flex-direction: column;
    }

    .site-footer__nav {
        width: 100%;
    }

    .station-table-wrap {
        overflow: visible;
        border: 0;
    }

    .station-table,
    .station-table tbody,
    .station-table tr,
    .station-table td {
        display: block;
        width: 100%;
    }

    .station-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .station-table tbody {
        display: grid;
        gap: 14px;
    }

    .station-table tr {
        padding: 14px;
        border: 1px solid var(--line);
        border-radius: var(--radius-md);
        background: var(--surface);
        box-shadow: var(--shadow-sm);
    }

    .station-table td {
        display: grid;
        padding: 9px 0;
        border-bottom: 1px solid var(--line);
        grid-template-columns: 105px minmax(0, 1fr);
        align-items: center;
        gap: 12px;
    }

    .station-table td::before {
        content: attr(data-label);
        color: var(--ink-500);
        font-size: 11px;
        font-weight: 850;
        letter-spacing: 0.045em;
        text-transform: uppercase;
    }

    .station-table td:first-child {
        display: block;
        padding-top: 0;
    }

    .station-table td:first-child::before {
        display: none;
    }

    .station-table td:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    .section-heading {
        align-items: start;
        flex-direction: column;
    }

    .facts-list__row {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .coverage-relations__heading {
        align-items: start;
        flex-direction: column;
        gap: 8px;
    }

    .coverage-relations__table th,
    .coverage-relations__table td {
        padding: 13px 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* station-details-compact:start */
.station-layout > aside.content-card {
    padding: clamp(24px, 2.8vw, 30px);
}

.station-layout > aside.content-card h2 {
    font-size: clamp(28px, 2.5vw, 34px);
}

.station-layout > aside .facts-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 22px;
}

.station-layout > aside .facts-list__row {
    min-width: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
}

.station-layout > aside .facts-list__row:last-child {
    border-bottom: 1px solid var(--line);
}

.station-layout > aside .facts-list dt {
    font-size: 12px;
}

.station-layout > aside .facts-list dd {
    overflow-wrap: anywhere;
    font-size: 15px;
    line-height: 1.35;
}

@media (max-width: 560px) {
    .station-layout > aside .facts-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .station-layout > aside .facts-list__row {
        grid-template-columns: 110px minmax(0, 1fr);
        gap: 12px;
    }
}
/* station-details-compact:end */

/* editorial-queue:start */
.editorial-queue {
    display: grid;
    gap: 20px;
}

.editorial-queue__summary {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.editorial-queue__summary > div {
    display: grid;
    min-height: 96px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    align-content: center;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.editorial-queue__summary strong {
    color: var(--ink-950);
    font-size: 28px;
    line-height: 1;
}

.editorial-queue__summary span {
    margin-top: 7px;
    color: var(--ink-500);
    font-size: 12px;
    font-weight: 750;
}

.editorial-queue__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.editorial-queue__filters a {
    display: inline-flex;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    align-items: center;
    gap: 7px;
    color: var(--ink-650);
    background: var(--surface);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.editorial-queue__filters a[aria-current="page"] {
    border-color: var(--ink-950);
    color: white;
    background: var(--ink-950);
}

.editorial-queue__filters span {
    min-width: 21px;
    padding: 2px 6px;
    border-radius: 999px;
    text-align: center;
    background: rgba(128, 140, 169, 0.16);
    font-variant-numeric: tabular-nums;
}

.editorial-queue__policy {
    display: flex;
    padding: 14px 16px;
    border: 1px solid #d6dfef;
    border-radius: 14px;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 22px;
    color: var(--ink-650);
    background: #f7f9fd;
    font-size: 13px;
}

.editorial-queue__policy a {
    margin-left: auto;
    font-weight: 800;
}

.editorial-queue__table td:nth-child(3) {
    min-width: 280px;
}

.queue-badge {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    color: #574c1a;
    background: #fff5c7;
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
}

.queue-badge--stream {
    color: #9f2d26;
    background: #fff0ee;
}

.queue-badge--correction {
    color: #244f8d;
    background: #edf4ff;
}

.queue-badge--page {
    color: #5c427e;
    background: #f4effc;
}

.queue-row--stream td {
    background: rgba(228, 71, 61, 0.035);
}

.editorial-queue__empty {
    text-align: center;
}

.correction-station {
    display: flex;
    margin-bottom: 22px;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    background: var(--surface-soft);
}

.correction-station span {
    color: var(--ink-500);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.correction-station a {
    margin-left: auto;
    font-weight: 800;
}

.contact-field small {
    color: var(--ink-500);
    font-size: 11px;
    font-weight: 650;
}

@media (max-width: 900px) {
    .editorial-queue__summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .editorial-queue__summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .editorial-queue__policy {
        align-items: start;
        flex-direction: column;
    }

    .editorial-queue__policy a,
    .correction-station a {
        margin-left: 0;
    }
}
/* editorial-queue:end */

/* logo-studio:start */
.logo-studio {
    display: grid;
    gap: 24px;
    margin-top: 24px;
}

.logo-studio__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: 24px;
    align-items: start;
}

.logo-studio__form,
.logo-studio__preview,
.logo-studio__method {
    padding: clamp(22px, 4vw, 34px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.logo-studio__form {
    display: grid;
    gap: 22px;
}

.logo-studio__form label {
    display: grid;
    gap: 9px;
    color: var(--ink-950);
    font-weight: 800;
}

.logo-studio__form select,
.logo-studio__form input[type="file"] {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink-950);
    background: white;
    font: inherit;
}

.logo-studio__form small,
.logo-studio__original {
    color: var(--ink-500);
    font-size: 13px;
    font-weight: 600;
}

.logo-studio__preview {
    display: grid;
    gap: 14px;
}

.logo-studio__canvas {
    display: grid;
    width: min(100%, 260px);
    aspect-ratio: 1;
    border: 1px solid var(--line);
    border-radius: 24px;
    place-items: center;
    overflow: hidden;
    background:
        linear-gradient(45deg, #f5f7fb 25%, transparent 25%),
        linear-gradient(-45deg, #f5f7fb 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #f5f7fb 75%),
        linear-gradient(-45deg, transparent 75%, #f5f7fb 75%),
        white;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
    background-size: 16px 16px;
}

.logo-studio__canvas img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.logo-studio__placeholder {
    color: var(--ink-500);
    font-weight: 800;
}

.logo-studio__preview code {
    padding: 10px 12px;
    overflow-wrap: anywhere;
    border-radius: 10px;
    color: var(--ink-700);
    background: var(--surface-soft);
    font-size: 12px;
}

.logo-studio__notice {
    padding: 15px 18px;
    border: 1px solid;
    border-radius: 14px;
    font-weight: 800;
}

.logo-studio__notice--success {
    border-color: #9bd5c3;
    color: #126247;
    background: #edf9f5;
}

.logo-studio__notice--error {
    border-color: #efb2ac;
    color: #9e3027;
    background: #fff1ef;
}

.logo-studio__method h2 {
    margin-top: 0;
}

.logo-studio__method ol {
    padding-left: 22px;
}

@media (max-width: 760px) {
    .logo-studio__layout {
        grid-template-columns: 1fr;
    }
}
/* logo-studio:end */

/* station-registry:start */
.station-registry {
    display: grid;
    gap: 20px;
}

.station-registry__summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.station-registry__summary > div {
    display: grid;
    min-height: 82px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    align-content: center;
    background: var(--surface-soft);
}

.station-registry__summary strong {
    color: var(--ink-950);
    font-size: 26px;
    line-height: 1;
}

.station-registry__summary span,
.station-registry__result-line span {
    margin-top: 6px;
    color: var(--ink-500);
    font-size: 12px;
    font-weight: 750;
}

.station-registry__search {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(180px, 240px) auto auto;
    align-items: end;
    gap: 12px;
}

.station-registry__search label {
    display: grid;
    gap: 6px;
    color: var(--ink-650);
    font-size: 12px;
    font-weight: 800;
}

.station-registry__search input,
.station-registry__search select {
    width: 100%;
    min-height: 48px;
    padding: 10px 13px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--ink-950);
    background: var(--surface);
    font: inherit;
}

.station-registry__result-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.station-registry__result-line span {
    margin-top: 0;
}

.station-registry__table td:first-child {
    min-width: 220px;
}

.registry-status,
.registry-duplicate {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 850;
}

.registry-status.is-published {
    color: #17634b;
    background: #e9f7f1;
}

.registry-status.is-draft {
    color: #7c5a00;
    background: #fff4cf;
}

.registry-duplicate {
    color: #9f2d26;
    background: #fff0ee;
}

.station-registry__pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.station-registry__pagination a {
    display: inline-grid;
    min-width: 40px;
    min-height: 40px;
    border: 1px solid var(--line);
    border-radius: 10px;
    place-items: center;
    color: var(--ink-650);
    background: var(--surface);
    font-weight: 800;
    text-decoration: none;
}

.station-registry__pagination a[aria-current="page"] {
    border-color: var(--ink-950);
    color: white;
    background: var(--ink-950);
}

.station-registry__empty {
    padding: 28px;
    border: 1px dashed var(--line);
    border-radius: 16px;
    text-align: center;
}

.stream-health-actions [data-stream-check-stop]:disabled {
    display: inline-flex;
    visibility: visible;
    opacity: 0.55;
    cursor: not-allowed;
}

@media (max-width: 900px) {
    .station-registry__summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .station-registry__search {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .station-registry__summary,
    .station-registry__search {
        grid-template-columns: 1fr;
    }
}
/* station-registry:end */