:root {
    --bg: #0a0e1a;
    --bg-elev: #0e1322;
    --surface: #121829;
    --surface-2: #161d33;
    --line: rgba(237, 239, 245, .08);
    --line-strong: rgba(237, 239, 245, .14);
    --ink: #edeff5;
    --ink-dim: #aab2c8;
    --ink-mute: #6b7693;
    --amber: #f5a623;
    --amber-soft: rgba(245, 166, 35, .14);
    --amber-line: rgba(245, 166, 35, .35);
    --sidebar-w: 300px;
    --font-display: "Segoe UI", system-ui, sans-serif;
    --font-body: Inter, "Segoe UI", system-ui, sans-serif;
    --font-mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
}

* { scrollbar-color: var(--ink-mute) transparent; }
html, body { background: var(--bg); }
body { color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .brand { font-family: var(--font-display); letter-spacing: -.01em; }
a { color: var(--amber); }
a:hover { color: #ffc25c; }
.font-mono, .sort-label, .filter-title, .filter-section-label { font-family: var(--font-mono); }
::selection { background: var(--amber-soft); color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.topbar { position: sticky; top: 0; z-index: 1030; background: linear-gradient(180deg, var(--bg-elev), var(--bg)); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: .65rem; color: var(--ink); font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
.brand:hover { color: var(--ink); }
.brand-dial { position: relative; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid var(--line-strong); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #1c2540, var(--surface) 70%); }
.brand-dial::after { position: absolute; inset: -3px; border: 1px solid var(--amber-line); border-radius: 50%; content: ""; opacity: .5; }
.brand-dial i { color: var(--amber); font-size: .85rem; filter: drop-shadow(0 0 4px rgba(245,166,35,.45)); }
.brand-tag { display: block; margin-top: -2px; color: var(--ink-mute); font-family: var(--font-mono); font-size: .65rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; }
.directory-search { width: 100%; max-width: 340px; }
.search-shell { background: var(--surface); border: 1px solid var(--line); border-radius: .6rem; transition: border-color .15s, box-shadow .15s; }
.search-shell:focus-within { border-color: var(--amber-line); box-shadow: 0 0 0 3px var(--amber-soft); }
.search-shell .input-group-text, .search-shell .form-control { background: transparent; border: 0; box-shadow: none !important; }
.search-shell .input-group-text { color: var(--ink-mute); }
.search-shell .form-control { color: var(--ink); }
.search-shell .form-control::placeholder { color: var(--ink-mute); }
.btn-icon-ghost, .topbar-action { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; height: 2.5rem; color: var(--ink-dim); background: var(--surface); border: 1px solid var(--line); border-radius: .6rem; text-decoration: none; }
.btn-icon-ghost:hover, .topbar-action:hover { color: var(--ink); border-color: var(--line-strong); }
.topbar-action { gap: .45rem; padding: 0 .8rem; font-size: .78rem; font-weight: 600; white-space: nowrap; }

.app-shell { min-height: calc(100vh - 64px); }
.sidebar { width: var(--sidebar-w); flex: 0 0 var(--sidebar-w); background: var(--bg-elev); border-right: 1px solid var(--line); }
@media (min-width: 992px) { .front-sidebar-collapsed .sidebar { display: none !important; } }
.content { min-width: 0; flex: 1; }
#stationDirectory { display: flex; flex-direction: column; }
#stationDirectory > #cards { flex-shrink: 0; }
.directory-pagination { margin-top: auto; padding-top: 1.5rem; flex-shrink: 0; }
.sticky-top-lg { position: sticky; top: 80px; max-height: calc(100vh - 96px); overflow-y: auto; }
.filter-title { display: flex; align-items: center; gap: .55rem; margin: 0 0 1.25rem; color: var(--ink-mute); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.filter-title i, .filter-section-label i, .offcanvas-title i { color: var(--amber); }
.filter-section-label { display: flex; align-items: center; gap: .4rem; margin-bottom: .6rem; color: var(--ink-mute); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.filter-label { margin-bottom: .4rem; color: var(--ink-mute); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.form-select, .form-control { color: var(--ink); background-color: var(--surface); border: 1px solid var(--line); }
.form-select:focus, .form-control:focus { color: var(--ink); background-color: var(--surface); border-color: var(--amber-line); box-shadow: 0 0 0 3px var(--amber-soft); }
.form-select option { color: var(--ink); background: var(--surface); }
.pill-toggle { padding: .32rem .7rem; color: var(--ink-dim); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-size: .78rem; font-weight: 500; transition: .15s; }
.pill-toggle:hover { color: var(--ink); border-color: var(--line-strong); }
.pill-toggle.is-active { color: var(--amber); background: var(--amber-soft); border-color: var(--amber-line); }
.btn-reset { color: var(--ink-dim); background: transparent; border: 1px solid var(--line); border-radius: .6rem; }
.btn-reset:hover { color: var(--ink); border-color: var(--line-strong); }
.sidebar-links { display: grid; gap: .75rem; border-top: 1px solid var(--line); }
.sidebar-links a { display: flex; align-items: center; gap: .65rem; color: var(--ink-dim); font-size: .82rem; text-decoration: none; }
.sidebar-links a:hover, .sidebar-links a i { color: var(--amber); }

.results-title { color: var(--ink); font-weight: 600; }
.results-count { color: var(--ink-mute); font-family: var(--font-mono); font-size: .8rem; }
.results-count .num, #footerCount { color: var(--amber); font-weight: 600; }
.sort-label { margin-right: .25rem; color: var(--ink-mute); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.active-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .5rem .3rem .75rem; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 999px; font-size: .78rem; cursor: pointer; }
.active-chip:hover { border-color: var(--amber-line); }
.active-chip i { color: var(--ink-mute); font-size: .65rem; }

.station-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-bottom: 2px solid var(--line); border-radius: .75rem; transition: transform .18s, border-color .18s, box-shadow .18s; }
.station-card:hover { transform: translateY(-3px); border-bottom-color: var(--amber); box-shadow: 0 12px 28px -12px rgba(0,0,0,.55); }
.station-card.is-playing { border-bottom-color: var(--amber); }
.station-cover-wrap { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--surface-2); }
.cover-link { display: block; width: 100%; height: 100%; }
.station-cover { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.station-card:hover .station-cover { transform: scale(1.05); }
.freq-badge { position: absolute; top: .55rem; left: .55rem; padding: .18rem .5rem; color: var(--amber); background: rgba(10,14,26,.82); border: 1px solid var(--amber-line); border-radius: .4rem; backdrop-filter: blur(4px); font-family: var(--font-mono); font-size: .68rem; font-weight: 600; }
.like-btn { position: absolute; top: .55rem; right: .55rem; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; color: var(--ink-dim); background: rgba(10,14,26,.7); border: 1px solid var(--line); border-radius: 50%; backdrop-filter: blur(4px); transition: .15s; }
.like-btn:hover, .like-btn.is-liked { color: #ff6b8a; border-color: rgba(255,107,138,.4); }
.station-body { display: flex; flex: 1; flex-direction: column; padding: .9rem 1rem 1rem; }
.station-name { margin: 0 0 .15rem; overflow: hidden; font-size: .98rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.station-name a { color: var(--ink); text-decoration: none; }
.station-name a:hover { color: var(--amber); }
.station-loc { display: flex; align-items: center; gap: .35rem; min-height: 1.2rem; margin-bottom: .55rem; color: var(--ink-mute); font-size: .78rem; }
.station-loc i { font-size: .7rem; }
.station-description { display: -webkit-box; height: 2.7em; min-height: 2.7em; margin-bottom: .65rem; overflow: hidden; color: var(--ink-dim); font-size: .76rem; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.genre-tag { padding: .12rem .5rem; color: var(--amber); background: var(--amber-soft); border: 1px solid var(--amber-line); border-radius: 999px; font-size: .68rem; font-weight: 500; }
.front-brand-logo { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.station-facts { margin:.5rem 0 1rem; padding:.75rem; background:var(--surface-2); border:1px solid var(--line); border-radius:.75rem; }
.station-facts-row { display:grid; grid-template-columns:108px minmax(0,1fr); gap:.3rem; padding:.2rem 0; min-width:0; font-size:.78rem; line-height:1.5; }
.station-facts dt { display:flex; gap:.35rem; align-items:baseline; margin:0; color:var(--ink-dim); font-size:.68rem; font-weight:500; }
.station-facts dt i { width:.85rem; flex-shrink:0; text-align:center; color:var(--amber); }
.station-facts dd { display:flex; flex-wrap:wrap; gap:.3rem; min-width:0; margin:0; }
.station-facts a { display:inline-flex; padding:.12rem .4rem; color:var(--ink); background:var(--bg-elev); border:1px solid var(--line); border-radius:.35rem; text-decoration:none; overflow-wrap:anywhere; max-width:100%; }
.station-facts a:hover { color:var(--amber); border-color:var(--amber-line); }
.fact-separator { display:none; }
.fact-empty { color:var(--ink-dim); font-size:.72rem; }
.station-facts-genre { display:flex; flex-direction:column; gap:.4rem; margin-top:.5rem; padding-top:.65rem; border-top:1px solid var(--line); }
.station-facts-genre dt, .station-facts-city dt { flex-shrink:0; }
.station-facts-genre a { color:var(--amber); }
.card-genres .station-facts-genre { margin:0; padding:0; border:0; }
.station-facts-details { display:grid; grid-template-columns:repeat(var(--station-fact-columns,5),minmax(0,1fr)); gap:.8rem; margin:0; padding:0; background:transparent; border:0; }
.station-facts-details .station-facts-row { display:flex; flex-direction:column; padding:.85rem; background:var(--bg-elev); border:1px solid var(--line); border-radius:.6rem; font-size:.9rem; }
.station-facts-details dt { font-size:.78rem; }
.station-facts-details .station-facts-city { grid-column:auto; flex-direction:column; }
.station-facts-details .station-facts-genre { grid-column:1/-1; flex-direction:row; align-items:baseline; margin-top:0; }
@media (max-width:991.98px) { .station-facts-details { grid-template-columns:repeat(2,minmax(0,1fr)); }.station-facts-details .station-facts-city { grid-column:1/-1; }.station-facts-details .station-facts-genre { flex-direction:column; } }
@media (max-width:359.98px) { .station-facts-details { grid-template-columns:1fr; } }
.station-footer { margin-top: auto; padding-top: .8rem; }
.play-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .85rem; color: #1a1305; background: var(--amber); border: 1px solid var(--amber); border-radius: .5rem; font-size: .82rem; font-weight: 600; transition: filter .15s, transform .1s; }
.play-btn:hover { color: #1a1305; filter: brightness(1.08); }
.play-btn:active { transform: scale(.97); }
.play-btn.is-playing { color: var(--amber); background: var(--surface-2); border-color: var(--amber-line); }
.play-btn:disabled { color: var(--ink-mute); background: var(--surface-2); border-color: var(--line); cursor: not-allowed; }
.details-link { color: var(--ink-mute); font-size: .74rem; text-decoration: none; }
.details-link:hover { color: var(--amber); }
.now-playing-strip { display: flex; align-items: center; gap: .55rem; margin-top: .65rem; padding-top: .6rem; color: var(--ink-dim); border-top: 1px solid var(--line); font-size: .75rem; }
.now-playing-strip .vol-icon, .eq-bars { color: var(--amber); }
.eq-bars { display: inline-flex; align-items: center; gap: 2px; height: 12px; }
.eq-bars span { width: 3px; background: currentColor; border-radius: 1px; animation: eqbounce .9s ease-in-out infinite; }
.eq-bars span:nth-child(1) { height: 40%; animation-delay: -.6s; }.eq-bars span:nth-child(2) { height: 100%; animation-delay: -.3s; }.eq-bars span:nth-child(3) { height: 65%; animation-delay: -.9s; }.eq-bars span:nth-child(4) { height: 85%; animation-delay: -.15s; }
@keyframes eqbounce { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.station-audio { display: none; }

.pagination .page-link { color: var(--ink-dim); background: var(--surface); border-color: var(--line); }
.pagination .page-link:hover { color: var(--ink); background: var(--surface-2); border-color: var(--line-strong); }
.pagination .page-item.active .page-link { color: #1a1305; font-weight: 600; background: var(--amber); border-color: var(--amber); }
.pagination .page-item.disabled .page-link { color: var(--ink-mute); background: var(--bg-elev); }
.empty-state { padding: 3rem 1.5rem; color: var(--ink-dim); text-align: center; background: var(--bg-elev); border: 1px dashed var(--line-strong); border-radius: .9rem; }
.empty-state i { margin-bottom: .75rem; color: var(--ink-mute); font-size: 1.8rem; }
.offcanvas { background: var(--bg-elev) !important; border-right: 1px solid var(--line); }
.offcanvas-header { border-bottom: 1px solid var(--line); }
.site-footer { color: var(--ink-mute); background: var(--bg); border-top: 1px solid var(--line); font-size: .8rem; }
.site-footer i { color: var(--amber); }
.toast { color: var(--ink); background: var(--surface-2); border: 1px solid var(--line-strong); }

@media (max-width: 991.98px) { .sidebar { display: none; }.sticky-top-lg { position: static; max-height: none; } }
@media (max-width: 575.98px) { .brand { font-size: .96rem; }.brand-tag { font-size: .55rem; }.content { padding-left: .75rem !important; padding-right: .75rem !important; } }
@media (max-width: 374.98px) { .directory-topbar .brand { min-width: 0; }.directory-topbar .brand > span:last-child { overflow: hidden; text-overflow: ellipsis; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }