/* ===========================================================
   Ifastek Radio — "Signal" design system (website + dashboards)
   Dark-only by deliberate choice — see design/design-system.html.
   Loaded after Bootstrap + styles.css so these rules win by
   source order without needing heavier selectors everywhere.
   Supersedes the old, differently-named "signal-black.css" (gold
   accent, light/dark toggle) — variable NAMES below are kept
   compatible with it on purpose so every untouched page-content
   rule elsewhere in this file keeps working unchanged; only the
   VALUES and the navigation-specific rules actually changed.
   =========================================================== */

:root {
  --bg:#141414; --surface:#1c1c1e; --surface-2:#242424; --surface-3:#2e2e2e; --overlay:#383838;
  --text:#ffffff; --dim:#808080; --line:#3a3a3a; --line-subtle:#2e2e2e;
  --accent:#e50914; --accent-ink:#ffffff; --accent-2:#3b82f6; --accent-3:#e50914; --accent-4:#f59e0b;
  --wave:#22d3ee;
  --success:#22c55e; --warning:#f59e0b; --error:#ef4444;
  color-scheme: dark;

  /* Exact aliases matching design/website-redesign.html's own variable
     names, so that file's CSS can be copied into this one verbatim (see
     the "desktop app shell" block below) instead of being hand-translated
     — translating names by hand is exactly the kind of "reinterpreting"
     that produced drift from the approved mockup last time. */
  --bg1: var(--bg); --bg2: var(--surface); --card: var(--surface-2); --raised: var(--surface-3);
  --text1: var(--text); --text2: #b8b8b8; --text3: var(--dim);
  --line1: var(--line-subtle); --line2: var(--line); --line3: #4d4d4d;
  --accent-h: #f6121f; --accent-wash: rgba(229,9,20,.12); --accent-bd: rgba(229,9,20,.4); --accent-glow: rgba(229,9,20,.45);
  --link: var(--accent-2); --link-wash: rgba(59,130,246,.14);
  --cyan: var(--wave); --cyan-glow: rgba(34,211,238,.5); --cyan-wash: rgba(34,211,238,.14);
  --gold: #fbbf24; --gold-wash: rgba(251,191,36,.14);
  /* Small, deliberate palette expansion beyond red/blue/gold — used for
     genuine inline text-links (below) and for giving individual Home rails
     their own distinct frame color (see .card-featured-d etc.) instead of
     everything reusing the same red/blue pairing. */
  --violet: #a78bfa; --violet-wash: rgba(167,139,250,.14);
  --mint: #34d399; --mint-wash: rgba(52,211,153,.14);
  --peach: #fb923c; --peach-wash: rgba(251,146,60,.14);
  --rose: #fb7185; --rose-wash: rgba(251,113,133,.14);
  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-full: 999px;
  --sh-3: 0 10px 24px -8px rgba(0,0,0,.5); --sh-4: 0 20px 44px -12px rgba(0,0,0,.65);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, ui-sans-serif, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

html, body { background: var(--bg); color: var(--text); }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
/* Genuine inline text-links (Forgot password, Register/Login cross-links,
   FAQ, "Log in to..." empty-state prompts) — one uniform, deliberate color
   sitewide, never underlined. Station/podcast names inside cards and list
   rows are a different case (they're content labels that happen to be
   clickable, not "links in a sentence") — the catch-all below makes sure
   those always read as plain text instead of inheriting this link color,
   which was the actual bug: some had an inline override to fix it, some
   didn't, so names ended up randomly blue in one row and white in the next. */
a { color: var(--violet); text-decoration: none; }
a:hover { color: var(--accent); }

[class^="card-"], [class*=" card-"], .row-w {
  color: inherit;
}
[class^="card-"]:hover, [class*=" card-"]:hover, .row-w:hover {
  color: inherit;
}

h1, h2, h3, h4, h5, h6 { color: var(--text); }
hr { border-color: var(--line); opacity: 1; }

/* ===========================================================
   App shell — nav rail + scrollable content + persistent bottom
   player. Same shell on the public site and both dashboards; the
   dashboard variant (.app-shell--dashboard) swaps nav items and,
   below 760px, hides the rail behind a menu button instead of
   collapsing it to icons — see design/dashboards.html.
   =========================================================== */
.app-shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  grid-template-rows: 1fr 84px;
  height: 100vh;
  overflow: hidden;
}

.navrail {
  grid-row: 1 / 2;
  background: var(--surface);
  border-right: 1px solid var(--line-subtle);
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.app-content {
  grid-row: 1 / 2;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px 28px 100px;
}
@media (max-width: 700px) { .app-content { padding: 18px 16px 100px; } }

.bottomplayer {
  grid-column: 1 / -1;
  grid-row: 2 / 3;
  background: var(--overlay);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 16px;
}

.nav-brand { display: flex; align-items: center; gap: 9px; padding: 8px 10px 18px; font-weight: 800; font-size: 1rem; text-decoration: none; color: var(--text); }
.nav-brand:hover { color: var(--text); }
.nav-brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

.nav-group { font-size: .63rem; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); font-weight: 800; padding: 14px 10px 6px; }
.nav-group:first-of-type { padding-top: 0; }

.nav-item {
  display: flex; align-items: center; gap: 13px; padding: 9px 10px; border-radius: 8px;
  font-size: .86rem; font-weight: 700; color: var(--dim); text-decoration: none;
  border-left: 3px solid transparent; margin-bottom: 1px; transition: background .15s, color .15s;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { color: var(--text); background: color-mix(in srgb, var(--accent) 12%, transparent); border-left-color: var(--accent); }
.nav-item .ic { width: 20px; height: 20px; flex: none; display: flex; align-items: center; justify-content: center; }
.nav-item .badge-mini { margin-left: auto; background: var(--error); color: #fff; font-size: .62rem; font-weight: 800; padding: 1px 6px; border-radius: 999px; }

.rail-toggle {
  display: none; align-items: center; gap: 8px; width: 100%; background: var(--surface-2);
  border: 1px solid var(--line); color: var(--text); font-weight: 700; font-size: .82rem;
  padding: 9px 12px; border-radius: 8px; margin-bottom: 14px; cursor: pointer;
}

/* Public site and dashboards both: nav rail hides fully below 760px,
   revealed as an overlay drawer via the menu button — a regular website's
   hamburger-menu pattern, not a permanently-visible icon rail. Same rule
   for every .app-shell variant (public + both dashboards), matching this
   file's own "one shell everywhere" principle. */
@media (max-width: 760px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .app-shell .navrail {
    display: none; position: fixed; inset: 0 25% 0 0; z-index: 40;
    box-shadow: 0 20px 44px -12px rgba(0,0,0,.65);
  }
  .app-shell.rail-open .navrail { display: flex; }
  .app-shell.rail-open::before {
    content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 39;
  }
  .app-shell .rail-toggle { display: flex; }
}

@media (min-width: 601px) and (max-width: 760px) {
  .app-shell .navrail { inset: 0 40% 0 0; }
}

/* ===========================================================
   Desktop app shell components — copied verbatim from
   design/website-redesign.html (the approved mockup) rather than
   hand-translated, so this is pixel-accurate by construction, not by
   review. Only the outer .app-shell/.navrail/.app-content/.bottomplayer
   positioning above (Phase 2/Master-Directive shell fix) is ours; every
   class below reproduces the mockup exactly, token-for-token.
   =========================================================== */

/* center: sticky search topbar */
.topbar-c { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 28px; background: linear-gradient(180deg, rgba(20,20,20,.92), rgba(20,20,20,.7) 70%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.topbar-c .search { display: flex; align-items: center; gap: 8px; background: rgba(28,28,30,.7); border: 1px solid var(--line2); border-radius: 999px; padding: 8px 16px; flex: 1 1 auto; min-width: 0; color: var(--text3); font-size: .84rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.topbar-c .actions { display: flex; align-items: center; gap: 12px; }
.icon-btn { width: 34px; height: 34px; border-radius: 50%; background: var(--card); color: var(--text2); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.icon-btn:hover { background: var(--raised); color: #fff; }

/* center: greeting */
.greeting-d { padding: 10px 28px 8px; }
.greeting-d .hello { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text3); font-weight: 700; }
.greeting-d h1 { font-size: 2.4rem; margin: 4px 0 10px; }
.live-strip-d { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-wash); color: var(--accent); font-size: .76rem; font-weight: 800; padding: 5px 12px; border-radius: 999px; }
.live-strip-d .p { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulseD 1.6s ease-in-out infinite; }
@keyframes pulseD { 0%,100% { box-shadow: 0 0 0 0 var(--accent-glow); } 50% { box-shadow: 0 0 0 6px rgba(229,9,20,0); } }

/* center: rails */
.rail-d { padding: 26px 0 4px; }
.rail-head-d { display: flex; align-items: baseline; justify-content: space-between; padding: 0 28px 14px; }
.rail-head-d h3 { font-size: 1.15rem; }
.rail-head-d span, .rail-head-d a { font-size: .78rem; color: var(--text3); font-weight: 700; cursor: pointer; }
.rail-head-d a:hover, .rail-head-d span:hover { color: var(--text1); }
.rail-track-d { display: flex; gap: 16px; overflow-x: auto; padding: 0 28px 10px; scrollbar-width: none; }
.rail-track-d::-webkit-scrollbar { display: none; }
/* For rails that can hold many items (e.g. Recently Added, which only grows)
   — same idea as .cat-track-d's grid below: 2 fixed rows, scrolling sideways
   in columns, instead of one very long single row. */
.rail-track-d.two-row { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); gap: 14px 16px; }
/* For a full directory page (podcasts/index.php) rather than a Home teaser
   rail — every item wraps onto new lines instead of scrolling sideways, so
   nothing needs a separate "See all" page. */
.rail-track-d.wrap-grid { flex-wrap: wrap; overflow-x: visible; }

/* ---- card designs, ported 1:1 from the mobile Home Screen, sized up ---- */
.card-continue-d { width: 260px; flex: none; cursor: pointer; }
.card-continue-d .art { position: relative; height: 135px; border-radius: var(--r-md); overflow: hidden; background: linear-gradient(135deg,#33424b,#1c262b); box-shadow: 0 8px 18px -8px rgba(0,0,0,.6); transition: transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s; }
.card-continue-d:hover .art { transform: translateY(-5px); box-shadow: 0 16px 30px -10px var(--accent-glow); }
.card-continue-d .art .resume { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.32); color: #fff; opacity: 0; transition: opacity .2s; }
.card-continue-d:hover .art .resume { opacity: 1; }
.card-continue-d .art .prog { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255,255,255,.2); }
.card-continue-d .art .prog i { display: block; height: 100%; background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); }
.card-continue-d .meta { padding: 9px 2px 0; }
.card-continue-d .meta b { font-size: .9rem; display: block; }
.card-continue-d .meta span { font-size: .74rem; color: var(--text3); }

/* Live Now — stations currently airing a scheduled program, per the app's
   equivalent LiveNowCard (pulse-dot LIVE badge + mini visualizer). */
.card-live-d { width: 148px; flex: none; cursor: pointer; }
.card-live-d .art { position: relative; height: 148px; border-radius: var(--r-md); overflow: hidden; background: linear-gradient(135deg,#33424b,#1c262b); box-shadow: 0 8px 18px -8px rgba(0,0,0,.6); }
.card-live-d .badge { position: absolute; top: 8px; left: 8px; display: flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.55); font-size: .62rem; font-weight: 800; color: #fff; }
.card-live-d .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 5px var(--accent-glow); animation: livePulse 1.4s ease-in-out infinite; }
.card-live-d .art .bp-viz { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 14px; }
.card-live-d .meta { padding: 9px 2px 0; }
.card-live-d .meta b { font-size: .84rem; display: block; }
.card-live-d .meta span { font-size: .72rem; color: var(--text3); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes livePulse { 0%, 100% { opacity: .5; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }

@keyframes wv { from { height: 3px; } to { height: 16px; } }

/* Featured Stations — its own frame: a soft violet-tinted backdrop (part of
   the small palette expansion above) with the logo sized to fit naturally
   inside, never stretched to fill the box. Capped at 240px — under the
   260px ceiling (.card-continue-d, the largest card in the system). */
.card-featured-d { width: 240px; flex: none; cursor: pointer; }
.card-featured-d .art { position: relative; height: 150px; border-radius: var(--r-lg); overflow: hidden; background: radial-gradient(circle at 30% 20%, var(--violet-wash), transparent 65%), linear-gradient(135deg,#241c33,#171220); box-shadow: 0 14px 30px -10px rgba(0,0,0,.65); transition: transform .22s cubic-bezier(.16,1,.3,1); }
.card-featured-d:hover .art { transform: translateY(-5px); }
.card-featured-d .chip { position: absolute; top: 10px; left: 10px; z-index: 1; background: rgba(255,255,255,.12); backdrop-filter: blur(6px); font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; color: var(--violet); }
.card-featured-d .logo-frame { position: absolute; inset: 14px; border-radius: var(--r-md); }
.card-featured-d .meta { padding: 9px 2px 0; }
.card-featured-d .meta b { font-size: .92rem; display: block; }

/* Trending — mint-tinted frame, distinct from Featured's violet and Recently
   Added's peach below. */
.card-trending-d { width: 190px; flex: none; display: flex; align-items: flex-end; cursor: pointer; }
.card-trending-d .rank { font-family: var(--mono); font-weight: 800; font-size: 3.4rem; color: var(--line3); line-height: 1; margin-right: -18px; z-index: 1; -webkit-text-stroke: 1px var(--line2); }
.card-trending-d .bodyx { flex: 1; min-width: 0; }
.card-trending-d .art { position: relative; height: 120px; border-radius: var(--r-md); overflow: hidden; background: radial-gradient(circle at 30% 20%, var(--mint-wash), transparent 65%), linear-gradient(135deg,#16261f,#141414); box-shadow: 0 8px 16px -8px rgba(0,0,0,.55); }
.card-trending-d .logo-frame { position: absolute; inset: 10px; border-radius: var(--r-sm); }
.card-trending-d .trend { position: absolute; bottom: 8px; right: 8px; z-index: 1; display: flex; align-items: center; gap: 2px; background: var(--success); color: #0b1a10; font-size: .66rem; font-weight: 800; padding: 3px 7px; border-radius: 999px; }
.card-trending-d .meta { padding-top: 8px; font-size: .82rem; font-weight: 700; }

/* Recently Added — peach-tinted frame. */
.card-new-d { width: 160px; flex: none; cursor: pointer; }
.card-new-d .art { position: relative; height: 115px; border-radius: var(--r-md); overflow: hidden; background: radial-gradient(circle at 30% 20%, var(--peach-wash), transparent 65%), linear-gradient(135deg,#241a12,#171310); box-shadow: 0 8px 16px -8px rgba(0,0,0,.55); }
.card-new-d .logo-frame { position: absolute; inset: 10px; border-radius: var(--r-sm); }
.card-new-d .ribbon { position: absolute; top: 10px; right: -28px; z-index: 1; transform: rotate(40deg); background: var(--gold); color: #141414; font-size: .6rem; font-weight: 800; padding: 3px 34px; letter-spacing: .04em; }
.card-new-d .meta { padding: 8px 1px 0; }
.card-new-d .meta b { font-size: .84rem; display: block; }
.card-new-d .meta span { font-size: .68rem; color: var(--text3); }

/* Stations Near You — rose-tinted frame, distinct from every other rail's
   color. Built by JS (see radio_list.php), not PHP, so this class also
   needs to work when generated as a plain HTML string rather than via view
   markup — same visual system either way. */
.card-nearby-d { width: 170px; flex: none; cursor: pointer; }
.card-nearby-d .art { position: relative; height: 120px; border-radius: var(--r-md); overflow: hidden; background: radial-gradient(circle at 30% 20%, var(--cyan-wash), transparent 65%), linear-gradient(135deg,#0f2a30,#0d1a1e); box-shadow: 0 8px 16px -8px rgba(0,0,0,.55); }
.card-nearby-d .logo-frame { position: absolute; inset: 10px; border-radius: var(--r-sm); }
.card-nearby-d .badge { position: absolute; top: 8px; left: 8px; z-index: 1; background: rgba(0,0,0,.5); backdrop-filter: blur(6px); font-size: .6rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--cyan); padding: 3px 8px; border-radius: 999px; }
.card-nearby-d .meta { padding: 8px 1px 0; }
.card-nearby-d .meta b { font-size: .84rem; display: block; }
.card-nearby-d .meta span { font-size: .68rem; color: var(--text3); }

/* Series browse grid (podcast/browse.php — "See all" for the podcast rails).
   Grid, not a horizontal rail, per the "some See-all pages are grid, some
   are list" split — stations stay list (see .list-w/.row-w, matching the
   existing "rows scan faster than tiles for text-heavy directories" rule),
   podcast series use a grid since cover art is the primary way to scan them. */
.series-grid-w { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 20px; }
.series-grid-w .card { cursor: pointer; }
.series-grid-w .art { position: relative; height: 170px; border-radius: var(--r-md); overflow: hidden; background: radial-gradient(circle at 30% 20%, var(--violet-wash), transparent 65%), linear-gradient(135deg,#241c33,#171220); box-shadow: 0 8px 16px -8px rgba(0,0,0,.55); }
.series-grid-w .logo-frame { position: absolute; inset: 12px; border-radius: var(--r-sm); }
.series-grid-w .meta { padding: 9px 1px 0; }
.series-grid-w .meta b { font-size: .88rem; display: block; }
.series-grid-w .meta span { font-size: .72rem; color: var(--text3); }

.card-stack-d { width: 160px; flex: none; padding-top: 8px; cursor: pointer; }
.card-stack-d .stackwrap { position: relative; height: 120px; }
.card-stack-d .layer2 { position: absolute; inset: 8px 12px 0 12px; height: 112px; border-radius: var(--r-md); background: var(--raised); opacity: .5; }
.card-stack-d .layer1 { position: absolute; inset: 4px 6px 0 6px; height: 112px; border-radius: var(--r-md); background: var(--card); opacity: .8; border: 1px solid var(--line1); }
.card-stack-d .front { position: absolute; inset: 0; height: 112px; border-radius: var(--r-md); overflow: hidden; background: linear-gradient(135deg,#33424b,#1c262b); box-shadow: 0 8px 16px -8px rgba(0,0,0,.6); display: flex; align-items: flex-end; padding: 8px; transition: transform .22s cubic-bezier(.16,1,.3,1); }
.card-stack-d:hover .front { transform: translateY(-4px); }
.card-stack-d .front span { font-size: .62rem; font-weight: 800; background: rgba(0,0,0,.5); padding: 2px 7px; border-radius: 999px; }
.card-stack-d .cat-label { position: absolute; top: 8px; left: 8px; font-size: .6rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--link); background: rgba(0,0,0,.55); backdrop-filter: blur(6px); padding: 3px 8px; border-radius: 999px; }
.card-stack-d .meta { padding-top: 10px; }
.card-stack-d .meta b { font-size: .84rem; display: block; }
.card-stack-d .meta span { font-size: .68rem; color: var(--text3); }

.card-series-d { width: 340px; flex: none; display: flex; gap: 12px; background: var(--card); border: 1px solid var(--line1); border-radius: var(--r-md); padding: 12px; box-shadow: 0 6px 14px -8px rgba(0,0,0,.5); cursor: pointer; transition: transform .2s, border-color .2s; }
.card-series-d:hover { transform: translateY(-3px); border-color: var(--accent-bd); }
.card-series-d .art { width: 80px; height: 80px; border-radius: var(--r-sm); flex: none; background: linear-gradient(135deg,#33424b,#1c262b); }
.card-series-d .tag { display: inline-flex; align-items: center; gap: 4px; font-size: .62rem; font-weight: 800; color: var(--gold); margin-bottom: 4px; }
.card-series-d b { font-size: .92rem; display: block; }
.card-series-d p { font-size: .76rem; color: var(--text3); margin: 4px 0 0; line-height: 1.4; }

.card-episode-d { width: 280px; flex: none; display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line1); border-radius: var(--r-sm); padding: 10px 12px; cursor: pointer; transition: transform .2s, border-color .2s; }
.card-episode-d:hover { transform: translateY(-3px); border-color: var(--link); }
.card-episode-d .play { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.card-episode-d .txt { min-width: 0; flex: 1; }
.card-episode-d .txt b { font-size: .84rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-episode-d .txt span { font-size: .7rem; color: var(--text3); }
.card-episode-d .wv { display: flex; align-items: flex-end; gap: 2px; height: 14px; flex: none; }
.card-episode-d .wv i { width: 2.5px; background: var(--link); border-radius: 1px; animation: wv 1s ease-in-out infinite alternate; }

.cat-track-d { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2,1fr); gap: 10px; overflow-x: auto; padding: 0 28px 10px; scrollbar-width: none; }
.cat-track-d::-webkit-scrollbar { display: none; }
.card-cat-d {
  width: 168px; height: 84px; border-radius: var(--r-md); position: relative; overflow: hidden;
  display: flex; align-items: flex-end; padding: 12px 14px; font-size: .9rem; font-weight: 800;
  color: rgba(255,255,255,.96); cursor: pointer; transition: transform .18s, box-shadow .18s;
  box-shadow: 0 10px 20px -10px rgba(0,0,0,.55);
}
.card-cat-d:hover { transform: translateY(-4px); box-shadow: 0 16px 28px -10px rgba(0,0,0,.65); }
.card-cat-d .ic { position: absolute; top: 10px; right: 10px; opacity: .32; }
.card-cat-d .lbl { position: relative; z-index: 1; line-height: 1.2; }

.card-follow-d { width: 96px; flex: none; text-align: center; cursor: pointer; }
.card-follow-d .ring { width: 84px; height: 84px; border-radius: 50%; padding: 3px; background: conic-gradient(from 220deg, var(--accent), var(--cyan), var(--link), var(--accent)); margin: 0 auto 8px; transition: transform .2s; }
.card-follow-d:hover .ring { transform: scale(1.05); }
.card-follow-d .ring .inr { width: 100%; height: 100%; border-radius: 50%; background: var(--bg1); padding: 2.5px; }
.card-follow-d .ring .inr .fillx { width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(135deg,#33424b,#1c262b); }
.card-follow-d span { font-size: .74rem; color: var(--text2); font-weight: 600; }

/* Countries — round flag + name, small and uniform since flags are already
   a fixed, recognizable shape (no "contain vs stretch" issue like logos). */
.card-country-d { width: 96px; flex: none; text-align: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.card-country-d .flag { width: 64px; height: 64px; border-radius: 50%; background-size: cover; background-position: center; background-color: var(--card); border: 1px solid var(--line1); box-shadow: 0 6px 14px -8px rgba(0,0,0,.5); transition: transform .2s; }
.card-country-d:hover .flag { transform: translateY(-4px); }
.card-country-d span { font-size: .78rem; font-weight: 600; color: var(--text2); }

.card-rec-d { width: 190px; flex: none; cursor: pointer; }
.card-rec-d .art { height: 130px; border-radius: var(--r-md); background: linear-gradient(135deg,#33424b,#1c262b); box-shadow: 0 8px 16px -8px rgba(0,0,0,.55); transition: transform .2s; }
.card-rec-d:hover .art { transform: translateY(-4px); }
.card-rec-d b { font-size: .86rem; display: block; margin-top: 8px; }
.card-rec-d .why { display: flex; align-items: center; gap: 4px; font-size: .66rem; color: var(--link); margin-top: 4px; background: var(--link-wash); padding: 4px 8px; border-radius: 6px; }

.card-pop-d { width: 180px; flex: none; cursor: pointer; }
.card-pop-d .art { height: 120px; border-radius: var(--r-md); background: linear-gradient(135deg,#3a2a2a,#1c1414); box-shadow: 0 8px 16px -8px rgba(0,0,0,.55); transition: transform .2s; }
.card-pop-d:hover .art { transform: translateY(-4px); }
.card-pop-d .bt { height: 5px; border-radius: 999px; background: var(--line2); margin-top: 10px; overflow: hidden; }
.card-pop-d .bf { height: 100%; background: linear-gradient(90deg,var(--accent),var(--gold)); border-radius: 999px; }
.card-pop-d b { font-size: .84rem; display: block; margin-top: 7px; }
.card-pop-d span { font-size: .68rem; color: var(--text3); }

.card-updated-d { width: 230px; flex: none; display: flex; gap: 10px; cursor: pointer; }
.card-updated-d .dw { display: flex; flex-direction: column; align-items: center; padding-top: 5px; }
.card-updated-d .dw .d { width: 9px; height: 9px; border-radius: 50%; background: var(--link); box-shadow: 0 0 0 3px var(--link-wash); flex: none; }
.card-updated-d .dw .l { width: 1.5px; flex: 1; background: var(--line2); margin-top: 5px; }
.card-updated-d .bodyx { flex: 1; min-width: 0; }
.card-updated-d .when { font-size: .66rem; color: var(--link); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.card-updated-d b { font-size: .86rem; display: block; margin-top: 4px; }
.card-updated-d span { font-size: .7rem; color: var(--text3); }

.card-editor-d { width: 210px; flex: none; background: linear-gradient(180deg, var(--gold-wash), transparent 40%); border: 1px solid rgba(251,191,36,.35); border-radius: var(--r-md); padding: 10px; cursor: pointer; transition: transform .2s; }
.card-editor-d:hover { transform: translateY(-4px); }
.card-editor-d .art { position: relative; height: 130px; border-radius: var(--r-sm); overflow: hidden; background: linear-gradient(135deg,#3a3020,#1c1414); }
.card-editor-d .ribbon2 { position: absolute; top: 8px; left: 8px; display: flex; align-items: center; gap: 4px; background: var(--gold); color: #141414; font-size: .62rem; font-weight: 800; padding: 4px 9px; border-radius: 999px; }
.card-editor-d b { font-size: .88rem; display: block; margin-top: 8px; }
.card-editor-d span { font-size: .7rem; color: var(--gold); font-weight: 700; }

/* right panel */
.rp-head { padding: 18px 20px 12px; border-bottom: 1px solid var(--line1); }
.rp-head .np-art { width: 100%; aspect-ratio: 1; border-radius: var(--r-lg); background: linear-gradient(135deg,#33424b,#1c262b); background-size: cover; background-position: center; box-shadow: 0 14px 30px -8px var(--cyan-glow); animation: spinD 20s linear infinite; animation-play-state: paused; margin-bottom: 14px; }
.rp-head .np-art.playing { animation-play-state: running; }
@keyframes spinD { to { transform: rotate(360deg); } }
.rp-head b { font-size: 1rem; display: block; }
.rp-head span { font-size: .8rem; color: var(--text3); }
.rp-tabs { display: flex; gap: 18px; padding: 0 20px; border-bottom: 1px solid var(--line1); }
.rp-tabs span { padding: 11px 0; font-size: .8rem; font-weight: 700; color: var(--text3); border-bottom: 2px solid transparent; cursor: pointer; }
.rp-tabs span.on { color: #fff; border-bottom-color: var(--accent); }
.rp-list { padding: 14px 20px; }
.rp-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line1); font-size: .82rem; }
.rp-row:last-child { border-bottom: none; }
.rp-row .thumb { width: 32px; height: 32px; border-radius: 6px; background: var(--raised); flex: none; }
.rp-row .n { color: var(--text3); font-family: var(--mono); font-size: .72rem; width: 16px; }

/* right panel — sidebar spotlight (Super Admin ad-spotlight slot) */
.rp-ad { padding: 18px 20px; border-bottom: 1px solid var(--line1); }
.rp-ad-label { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text3); background: var(--raised); padding: 3px 8px; border-radius: 999px; margin-bottom: 12px; }
.rp-ad-card { display: block; text-decoration: none; color: inherit; }
.rp-ad-art { width: 100%; aspect-ratio: 1; border-radius: var(--r-lg); background: linear-gradient(135deg,#33424b,#1c262b); margin-bottom: 14px; }
.rp-ad-img { width: 100%; aspect-ratio: 1; border-radius: var(--r-lg); background-color: var(--raised); background-size: cover; background-position: center; margin-bottom: 14px; }
.rp-ad-card b { font-size: 1rem; display: block; }
.rp-ad-card span { font-size: .8rem; color: var(--text3); }
.rp-schedule-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line1); font-size: .8rem; }
.rp-schedule-row .t { color: var(--link); font-weight: 700; font-size: .74rem; }

/* generic content components — every other website page is built from these */
.cc-head-w { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; }
.cc-head-w h2 { font-size: 1.3rem; }
.btn-w { font-family: var(--sans); font-weight: 700; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 8px; height: 38px; padding: 0 18px; font-size: .84rem; transition: background 160ms cubic-bezier(.2,0,0,1), border-color 160ms, transform 100ms; }
.btn-w:active { transform: scale(.97); }
.btn-w.p { background: var(--accent); color: #fff; }
.btn-w.p:hover { background: var(--accent-h); }
.btn-w.s { background: transparent; color: #fff; border: 1.5px solid var(--line3); }
.btn-w.t { background: transparent; color: var(--text3); }
.field-w { display: flex; flex-direction: column; gap: 6px; max-width: 300px; margin-bottom: 14px; }
.field-w label { font-size: .76rem; font-weight: 700; color: var(--text2); }
.field-w .in { background: var(--bg2); border: 1.5px solid var(--line2); border-radius: 8px; padding: 10px 13px; font-size: .86rem; color: var(--text3); transition: border-color 160ms; }
.row-w { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line1); transition: background 160ms; }
.row-w:hover { background: var(--card); }
.row-w:last-child { border-bottom: none; }
.row-w .thumb { width: 40px; height: 40px; border-radius: 8px; background: linear-gradient(135deg,#33424b,#1c262b); flex: none; }
.row-w .txt { flex: 1; min-width: 0; }
.row-w .txt b { display: block; font-size: .88rem; }
.row-w .txt span { display: block; font-size: .74rem; color: var(--text3); }
.row-w .meta-w { font-size: .78rem; color: var(--text3); }
.list-w { background: var(--card); border: 1px solid var(--line1); border-radius: var(--r-md); overflow: hidden; }
.stat-card-w { background: var(--card); border: 1px solid var(--line1); border-radius: var(--r-md); padding: 18px; text-align: center; }
.stat-card-w .n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 1.6rem; font-weight: 800; }
.stat-card-w .l { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); margin-top: 4px; }
.tag-w { font-size: .78rem; font-weight: 700; padding: 6px 15px; border-radius: 999px; background: var(--card); color: var(--text2); border: 1px solid var(--line1); cursor: pointer; transition: background 160ms, color 160ms, border-color 160ms; }
.tag-w.on, .tag-w:hover { background: var(--accent-wash); color: var(--accent); border-color: var(--accent-bd); }
.badge-w2 { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 800; padding: 4px 11px; border-radius: 999px; }
.detail-hero-w { display: flex; gap: 24px; align-items: flex-end; margin-bottom: 22px; }
.detail-hero-w .art { width: 150px; height: 150px; border-radius: var(--r-lg); background: linear-gradient(135deg,#33424b,#1c262b); flex: none; box-shadow: 0 14px 30px -8px rgba(0,0,0,.55); }
.tabstrip-w { display: flex; gap: 24px; border-bottom: 1px solid var(--line1); margin-bottom: 20px; }
.tabstrip-w span { padding-bottom: 11px; font-size: .86rem; font-weight: 700; color: var(--text3); border-bottom: 2px solid transparent; cursor: pointer; }
.tabstrip-w span.on { color: #fff; border-bottom-color: var(--accent); }
.faq-w { padding: 16px 0; border-bottom: 1px solid var(--line1); }
.faq-w summary { font-size: .9rem; font-weight: 700; cursor: pointer; }
.faq-w p { font-size: .84rem; color: var(--text2); margin: 10px 0 0; }
.auth-card-w { width: 340px; background: rgba(28,28,30,.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-lg); padding: 30px; box-shadow: var(--sh-4); margin: 0 auto; }
.cpv { background: var(--card); border: 1px solid var(--line1); border-radius: var(--r-md); padding: 22px; margin-bottom: 16px; }
.cpv-label { font-family: var(--mono); font-size: .7rem; color: var(--text3); margin-bottom: 14px; }

/* bottom player internals */
.bp-left { display: flex; align-items: center; gap: 12px; flex: 1 1 260px; min-width: 0; max-width: 260px; }
.bp-art { width: 56px; height: 56px; border-radius: 8px; background: linear-gradient(135deg,#33424b,#1c262b); flex: none; animation: spinD 16s linear infinite; animation-play-state: paused; }
.bp-art.playing { animation-play-state: running; }
.bp-txt { min-width: 0; }
.bp-txt b { display: block; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-txt span { display: block; font-size: .72rem; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-heart { color: var(--accent); margin-left: 6px; cursor: pointer; }
.bp-center { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 560px; margin: 0 auto; }
.bp-controls { display: flex; align-items: center; gap: 20px; }
.bp-play { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; }
@keyframes pulseP { 0%,100% { box-shadow: 0 0 0 0 var(--accent-glow); } 50% { box-shadow: 0 0 0 8px rgba(229,9,20,0); } }
.bp-play.playing { animation: pulseP 1.8s ease-in-out infinite; }
.bp-icon { color: var(--text2); cursor: pointer; background: none; border: none; padding: 0; display: inline-flex; }
.bp-icon:hover { color: #fff; }
.bp-viz { display: flex; align-items: flex-end; gap: 2.5px; height: 16px; }
.bp-viz i { display: inline-block; width: 2.5px; height: 100%; border-radius: 2px; background: linear-gradient(0deg,var(--accent),#8b2fd6 30%,var(--link) 55%,var(--cyan) 75%,var(--link) 90%,var(--accent)); background-size: 100% 300%; animation: vgD 2.4s linear infinite, vhD .9s ease-in-out infinite alternate; filter: drop-shadow(0 0 3px var(--cyan-glow)); }
.bp-viz.paused i { animation-play-state: paused; opacity: .4; }
.bp-icon[disabled] { opacity: .35; cursor: default; }
.bp-icon svg { pointer-events: none; }
@keyframes vgD { 0% { background-position: 0 0%; } 100% { background-position: 0 100%; } }
@keyframes vhD { 0% { transform: scaleY(.3); } 100% { transform: scaleY(1); } }
.bp-progress { display: flex; align-items: center; gap: 8px; width: 100%; }
.bp-progress span { font-family: var(--mono); font-size: .66rem; color: var(--text3); }
.bp-track { flex: 1; height: 4px; border-radius: 999px; background: var(--line2); overflow: hidden; cursor: pointer; }
.bp-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.bp-right { flex: 1 1 260px; min-width: 0; max-width: 260px; display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.bp-vol-track { width: 80px; height: 3px; border-radius: 999px; background: var(--line2); }
.bp-vol-fill { width: 65%; height: 100%; background: var(--text2); border-radius: 999px; }

/* skeleton */
@keyframes shimD { 0% { background-position: -260px 0; } 100% { background-position: 260px 0; } }
.skel-d { background: var(--card); background-image: linear-gradient(90deg,var(--card) 0%,var(--raised) 50%,var(--card) 100%); background-size: 500px 100%; animation: shimD 1.4s linear infinite; }

/* ---------- sticky player ---------- */
#radio-player-iframe { width: 100%; height: 84px; border: none; display: block; }
.bottomplayer { box-shadow: 0 -10px 30px -14px rgba(0,0,0,.6); }

/* ---------- ajax loading bar ---------- */
#loading-bar { background: var(--accent) !important; box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 70%, transparent); }

/* ---------- breadcrumb ---------- */
.breadcrumb-item a { color: var(--accent-2) !important; }
.breadcrumb-item.active { color: var(--dim) !important; }

/* ---------- cards ---------- */
.card { background: var(--surface-2); color: var(--text); border: 1px solid var(--line-subtle); border-radius: 12px; transition: border-color .15s ease, transform .15s ease; }
.card-title, .card-text { color: var(--text); }
.card:hover { border-color: var(--accent-2); }

/* ---------- buttons ---------- */
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink) !important; font-weight: 700; border-radius: 999px; }
.btn-primary:hover, .btn-primary:focus { background: color-mix(in srgb, var(--accent) 85%, white); border-color: var(--accent); color: var(--accent-ink) !important; }
.btn-secondary { background: transparent; border: 1px solid var(--line); color: var(--text) !important; border-radius: 999px; }
.btn-secondary:hover { background: var(--surface-3); border-color: var(--dim); color: var(--text) !important; }
.btn-outline-primary { border-color: var(--accent); color: var(--accent); border-radius: 999px; }
.btn-outline-primary:hover { background: var(--accent); color: var(--accent-ink); }
.btn-outline-secondary { border-color: var(--line); color: var(--text); border-radius: 999px; }
.btn-outline-secondary:hover { background: var(--surface-3); color: var(--text); border-color: var(--dim); }
.btn-outline-light { border-color: var(--line); color: var(--text); }
.btn-outline-light:hover { background: var(--surface-3); color: var(--text); }
.btn-link { color: var(--accent-2); }

/* ---------- dashboard app shell — copied verbatim from design/dashboards.html ---------- */
.dapp-scroll { overflow-x: auto; }
.dapp { display: grid; grid-template-columns: 220px minmax(0,1fr) 280px; grid-template-rows: 1fr 76px; min-height: calc(100vh - 76px); min-width: 600px; background: var(--bg1); }
@media (max-width: 1080px) { .dapp { grid-template-columns: 220px minmax(0,1fr) !important; } .dapp .rightpanel { display: none; } }
@media (max-width: 760px) { .dapp { grid-template-columns: minmax(0,1fr) !important; } .dapp .navrail { display: none; } }
.dapp .navrail { grid-row: 1/2; background: var(--bg2); border-right: 1px solid var(--line1); padding: 16px 12px; display: flex; flex-direction: column; overflow-y: auto; }
.dapp .center { grid-row: 1/2; overflow-y: auto; background: var(--bg1); padding: 24px 26px; }
.dapp .rightpanel { grid-row: 1/2; background: var(--bg2); border-left: 1px solid var(--line1); overflow-y: auto; padding: 18px; }
.dapp .bottomplayer { grid-column: 1/-1; grid-row: 2/3; background: var(--overlay); border-top: 1px solid var(--line2); display: flex; align-items: center; padding: 0 16px; gap: 14px; }
.nav-brand-d { display: flex; align-items: center; gap: 8px; padding: 6px 8px 12px; font-weight: 800; font-size: .92rem; }
.nav-brand-d .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.station-switch { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line2); border-radius: 8px; padding: 8px 10px; margin-bottom: 14px; cursor: pointer; }
.station-switch .art { width: 26px; height: 26px; border-radius: 6px; background: linear-gradient(135deg,#33424b,#1c262b); flex: none; }
.station-switch b { font-size: .78rem; display: block; }
.station-switch span { font-size: .62rem; color: var(--text3); }
.nav-group-d { font-size: .6rem; text-transform: uppercase; letter-spacing: .07em; color: var(--textd, var(--text3)); font-weight: 800; padding: 12px 8px 5px; }
.nav-item-d { display: flex; align-items: center; gap: 11px; padding: 8px 8px; border-radius: 7px; font-size: .8rem; font-weight: 700; color: var(--text3); border-left: 3px solid transparent; margin-bottom: 1px; cursor: pointer; text-decoration: none; }
.nav-item-d:hover { background: var(--card); color: #fff; }
.nav-item-d.on { color: #fff; background: var(--accent-wash); border-left-color: var(--accent); }
.nav-item-d .ic { width: 17px; height: 17px; flex: none; display: flex; align-items: center; justify-content: center; }
.nav-item-d .badge-mini { margin-left: auto; background: var(--error); color: #fff; font-size: .6rem; font-weight: 800; padding: 1px 6px; border-radius: 999px; }

.cc-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.cc-head h2 { font-size: 1.25rem; }
.btn-d { font-family: var(--sans); font-weight: 700; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 8px; height: 36px; padding: 0 16px; font-size: .82rem; text-decoration: none; }
.btn-d.p { background: var(--accent); color: #fff; }
.btn-d.s { background: transparent; color: #fff; border: 1.5px solid var(--line3); }
.btn-d.t { background: transparent; color: var(--text3); }

.stat-row-d { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
@media (max-width: 700px) { .stat-row-d { grid-template-columns: repeat(2, 1fr) !important; } }
.stat-card-d { background: var(--card); border: 1px solid var(--line1); border-radius: var(--r-md); padding: 16px; position: relative; overflow: hidden; }
.stat-card-d .n { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 1.5rem; font-weight: 800; }
.stat-card-d .l { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); margin-top: 4px; }
.stat-card-d .trend { font-size: .68rem; color: var(--success); font-weight: 700; margin-top: 6px; }
.stat-card-d .bar-mini { height: 6px; border-radius: 999px; background: var(--bg2); overflow: hidden; margin-top: 9px; }
.stat-card-d .bar-mini i { display: block; height: 100%; border-radius: 999px; }

/* Color-differentiated stat cards — each modifier tints the card with a soft
   wash of its hue (matching the radial-wash art treatment used on content
   cards elsewhere) and colors the headline number to match, so a row of
   otherwise-identical tiles reads as distinct types of information at a glance.
   Shared with .feature-card-d (the app-marketing feature grid) — same hue system. */
.stat-card-d[data-c], .feature-card-d[data-c] { background: linear-gradient(160deg, var(--wash, var(--card)), var(--card) 60%); border-color: var(--bd, var(--line1)); }
.stat-card-d[data-c] .n { color: var(--hue, var(--text)); }
.stat-card-d[data-c="link"], .feature-card-d[data-c="link"] { --wash: var(--link-wash); --hue: var(--link); --bd: rgba(59,130,246,.3); }
.stat-card-d[data-c="cyan"], .feature-card-d[data-c="cyan"] { --wash: var(--cyan-wash); --hue: var(--cyan); --bd: rgba(34,211,238,.3); }
.stat-card-d[data-c="gold"], .feature-card-d[data-c="gold"] { --wash: var(--gold-wash); --hue: var(--gold); --bd: rgba(251,191,36,.3); }
.stat-card-d[data-c="violet"], .feature-card-d[data-c="violet"] { --wash: var(--violet-wash); --hue: var(--violet); --bd: rgba(167,139,250,.3); }
.stat-card-d[data-c="mint"], .feature-card-d[data-c="mint"] { --wash: var(--mint-wash); --hue: var(--mint); --bd: rgba(52,211,153,.3); }
.stat-card-d[data-c="peach"], .feature-card-d[data-c="peach"] { --wash: var(--peach-wash); --hue: var(--peach); --bd: rgba(251,146,60,.3); }
.stat-card-d[data-c="rose"], .feature-card-d[data-c="rose"] { --wash: var(--rose-wash); --hue: var(--rose); --bd: rgba(251,113,133,.3); }
.stat-card-d[data-c] .bar-mini i { background: var(--hue); }

.marketing-hero-d { background: linear-gradient(135deg, var(--accent-wash), transparent 65%), var(--card); border: 1px solid var(--accent-bd); border-radius: var(--r-lg); padding: 26px; margin-bottom: 22px; }
.marketing-hero-d h2 { font-size: 1.3rem; margin: 0 0 8px; }
.marketing-hero-d p { color: var(--text2); margin: 0 0 16px; max-width: 640px; font-size: .88rem; line-height: 1.5; }
.feature-check-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 20px; margin: 0 0 18px; padding: 0; list-style: none; }
.feature-check-list li { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--text2); }
.feature-check-list li::before { content: '✓'; color: var(--success); font-weight: 800; flex: none; }
.feature-grid-d { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-bottom: 22px; }
.feature-card-d { background: var(--card); border: 1px solid var(--line1); border-radius: var(--r-md); padding: 16px; }
.feature-card-d .ic { font-size: 1.3rem; display: block; margin-bottom: 8px; }
.feature-card-d b { display: block; font-size: .86rem; margin-bottom: 4px; }
.feature-card-d span { display: block; font-size: .76rem; color: var(--text3); line-height: 1.45; }

.sub-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; vertical-align: middle; position: relative; top: -1px; }
.sub-dot.link { background: var(--link); box-shadow: 0 0 0 3px var(--link-wash); }
.sub-dot.cyan { background: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-wash); }
.sub-dot.gold { background: var(--gold); box-shadow: 0 0 0 3px var(--gold-wash); }
.sub-dot.violet { background: var(--violet); box-shadow: 0 0 0 3px var(--violet-wash); }
.sub-dot.mint { background: var(--mint); box-shadow: 0 0 0 3px var(--mint-wash); }
.sub-dot.peach { background: var(--peach); box-shadow: 0 0 0 3px var(--peach-wash); }
.sub-dot.rose { background: var(--rose); box-shadow: 0 0 0 3px var(--rose-wash); }

.chart-card { background: var(--card); border: 1px solid var(--line1); border-radius: var(--r-md); padding: 18px; margin-bottom: 26px; }
.chart-bars { display: flex; align-items: flex-end; gap: 8px; height: 100px; }
.chart-bars i { flex: 1; background: linear-gradient(180deg, var(--link), var(--cyan)); border-radius: 4px 4px 0 0; min-width: 0; }
.chart-bars i.today { background: linear-gradient(180deg, var(--gold), var(--peach)); }

.rank-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: .68rem; font-weight: 800; flex: none; }
.rank-badge.r1 { background: var(--gold-wash); color: var(--gold); }
.rank-badge.r2 { background: rgba(180,180,190,.16); color: #c9cdd3; }

.card-list { background: var(--card); border: 1px solid var(--line1); border-radius: var(--r-md); overflow: hidden; }
.row-d { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line1); }
.row-d:last-child { border-bottom: none; }
.row-d .thumb { width: 38px; height: 38px; border-radius: 8px; background: linear-gradient(135deg,#33424b,#1c262b); flex: none; }
.row-d .thumb.round { border-radius: 50%; }
.row-d .txt { flex: 1; min-width: 0; }
.row-d .txt b { display: block; font-size: .86rem; }
.row-d .txt span { display: block; font-size: .72rem; color: var(--text3); }
.row-d .meta-r { font-size: .76rem; color: var(--text3); text-align: right; }
.row-d .actions { display: flex; gap: 8px; align-items: center; }

.badge-d { display: inline-flex; align-items: center; gap: 5px; font-size: .66rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.badge-d .dt { width: 5px; height: 5px; border-radius: 50%; }

.quota-bar-track { width: 140px; height: 5px; border-radius: 999px; background: var(--line2); overflow: hidden; }
.quota-bar-fill { height: 100%; border-radius: 999px; }

.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line1); }
.toggle-row:last-child { border-bottom: none; }
.toggle-row b { font-size: .84rem; display: block; }
.toggle-row span { font-size: .7rem; color: var(--text3); }
.switch-d { display: inline-block; width: 36px; height: 20px; border-radius: 999px; border: 1.5px solid var(--line3); position: relative; flex: none; }
.switch-d::after { content: ""; position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--text2); top: 2px; left: 2px; }
.switch-d.on { background: var(--accent); border-color: var(--accent); }
.switch-d.on::after { background: #fff; left: 18px; }
/* Real checkbox-driven toggle, styled as .switch-d: <label><input type="checkbox" class="switch-input" hidden><span class="switch-d"></span></label> */
.switch-input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-input:checked + .switch-d { background: var(--accent); border-color: var(--accent); }
.switch-input:checked + .switch-d::after { background: #fff; left: 18px; }
button.switch-d { padding: 0; appearance: none; -webkit-appearance: none; cursor: pointer; }

/* Dashboard center + rightpanel columns, rendered inside the site's shared
   .app-content (the .dapp three-column grid in dashboards.html is a
   documentation-only frame — the real shell/navrail/bottomplayer is the
   site's own, already shared across every page). */
.dash-page { display: flex; align-items: flex-start; gap: 18px; }
.dash-page .center { flex: 1; min-width: 0; }
/* Pinned while only .center (and .app-content's own scroll) moves — was a
   plain flex child that scrolled away with the rest of the page. Sticky is
   scoped to .app-content's own scrollport (its nearest scrolling ancestor),
   height capped to the visible content row (100vh minus the 84px bottom
   player) so the panel scrolls its own overflow internally instead of
   pushing content off-screen. */
.dash-page .rightpanel {
  width: 280px; flex: none; background: var(--bg2); border: 1px solid var(--line1); border-radius: var(--r-md); padding: 18px;
  position: sticky; top: 0; max-height: calc(100vh - 84px); overflow-y: auto;
}
@media (max-width: 1080px) { .dash-page .rightpanel { display: none; } }

/* Home page shell — cancels .app-content's generic padding so topbar-c and
   rail-d can manage their own edge-to-edge spacing exactly like
   design/website-redesign.html's .app .center (which has no padding of its
   own — topbar-c/greeting-d/rail-d each set their own). */
/* overflow-x is intentionally NOT set here (even though this wrapper used
   to need it to fix a horizontal-scroll bug) — setting overflow-x on an
   element with overflow-y otherwise "visible" forces the used value of
   overflow-y to "auto" too (per spec), which turns this wrapper into its
   own scroll container and silently breaks position:sticky on
   .rightpanel below (sticky binds to the *nearest* scrolling ancestor,
   and this element never actually scrolls since it has no fixed height —
   it just neutralizes stickiness relative to the real scroller,
   .app-content). The horizontal-overflow fix now lives on .app-content
   itself instead, which was always the real intended scroll container. */
.home-shell { display: flex; align-items: flex-start; margin: -24px -28px 0; }
@media (max-width: 700px) { .home-shell { margin: -18px -16px 0; } }
.home-shell .center { flex: 1; min-width: 0; padding-bottom: 100px; }
/* Pinned the same way as .dash-page .rightpanel above — was scrolling away
   with the 14 rail-d sections instead of staying put. */
.home-shell .rightpanel {
  width: 300px; flex: none; background: var(--bg2); border-left: 1px solid var(--line1);
  position: sticky; top: 0; height: calc(100vh - 84px); overflow-y: auto;
}
@media (max-width: 1080px) { .home-shell .rightpanel { display: none; } }

.field-d { display: flex; flex-direction: column; gap: 6px; max-width: 280px; margin-bottom: 14px; }
.field-d label { font-size: .76rem; font-weight: 700; color: var(--text2); }
.field-d .in { background: var(--bg2); border: 1.5px solid var(--line2); border-radius: 8px; padding: 10px 13px; font-size: .86rem; color: var(--text3); }
.dash-section-d h2 { font-size: 1.2rem; margin-bottom: 14px; }

/* ---------- station search field (home page) ---------- */
.station-search-field {
  display: flex; align-items: center; gap: 10px; background: var(--surface-2);
  border: 1.5px solid var(--line); border-radius: 999px; padding: 12px 20px; max-width: 420px;
  transition: border-color .15s ease;
}
.station-search-field:focus-within { border-color: var(--text); }
.station-search-field i { color: var(--dim); font-size: 15px; flex: none; }
.station-search-field input {
  background: transparent; border: none; outline: none; color: var(--text);
  font-size: 14px; width: 100%; font-family: inherit;
}
.station-search-field input::placeholder { color: var(--dim); }

/* ---------- forms ---------- */
.form-control { background: var(--surface-2); border: 1px solid var(--line); color: var(--text); }
.form-control:focus { background: var(--surface-2); border-color: var(--accent-2); color: var(--text); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--accent-2) 20%, transparent); }
.form-control::placeholder { color: var(--dim); }
.form-control:disabled, .form-control[readonly] { background: var(--surface-3); color: var(--dim); }
.form-container { background: var(--surface); border: 1px solid var(--line); }
.form-label { color: var(--text); }
.text-muted { color: var(--dim) !important; }

/* ---------- badges / tags ---------- */
.badge.bg-primary, .badge.bg-secondary { background: var(--surface-3) !important; color: var(--text); font-weight: 600; }
.badge.bg-info, .badge.bg-danger { font-weight: 600; }

/* ---------- ad slots / sidebar ---------- */
.ad-slot { background: var(--surface-2) !important; border-radius: 10px; color: var(--dim); }
aside.col-md-2 h6 { color: var(--dim); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; }
aside .border { border-color: var(--line) !important; }

/* ---------- alerts ---------- */
.alert-success { background: color-mix(in srgb, var(--success) 16%, var(--surface)); border-color: var(--success); color: var(--text); }
.alert-danger { background: color-mix(in srgb, var(--error) 16%, var(--surface)); border-color: var(--error); color: var(--text); }

/* ---------- social icons (station detail / share) — muted per spec, not brand colors ---------- */
.fab.text-primary, .fab.text-info, .fab.text-danger, .fab.text-success,
.fa-brands.text-primary, .fa-brands.text-info, .fa-brands.text-danger, .fa-brands.text-success {
  color: var(--dim) !important; transition: color .15s ease;
}
.fab.text-primary:hover, .fab.text-info:hover, .fab.text-danger:hover, .fab.text-success:hover,
.fa-brands.text-primary:hover, .fa-brands.text-info:hover, .fa-brands.text-danger:hover, .fa-brands.text-success:hover {
  color: var(--text) !important;
}

/* ---------- follow / favorite heart ---------- */
#loveIcon.fas { color: var(--accent-3); }
#loveIcon.far { color: var(--dim); }

/* ---------- podcast pages ---------- */
.podcast-hero { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }

/* ===========================================================
   Rails - Netflix-style horizontal scroll rows, used across the
   homepage, tag pages, country pages, search results, etc.
   =========================================================== */
.rail-section { margin-bottom: 34px; }
.rail-section h3, .rail-section h2 {
  font-weight: 800; letter-spacing: .02em; text-transform: uppercase; font-size: 1.05rem;
  margin-bottom: 14px;
}
.rail { display: flex; gap: 16px; overflow-x: auto; padding: 4px 4px 14px; scrollbar-width: thin; }
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.rail-item { flex: 0 0 auto; width: 150px; }

.stn-card { display: block; text-decoration: none; color: inherit; position: relative; }
.stn-card:hover { color: inherit; }
.stn-art {
  width: 150px; height: 150px; border-radius: 50%; object-fit: cover; display: block;
  border: 2px solid var(--line); background: var(--surface-2); transition: box-shadow .15s ease, border-color .15s ease;
}
.stn-card:hover .stn-art { border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--surface), 0 0 20px -4px var(--accent-2); }
.stn-name { font-size: 13.5px; font-weight: 700; margin-top: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stn-meta { font-size: 11.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stn-tags { margin-top: 5px; display: flex; gap: 4px; flex-wrap: wrap; }
.stn-tags .badge { font-size: 10px; padding: 3px 8px; }
.stn-fav {
  position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(10, 10, 14, .55); display: grid; place-items: center;
  color: var(--accent-3); font-size: 13px;
}

/* Small circular flag chips (Explore Countries) */
.flag-card { display: block; text-decoration: none; color: inherit; text-align: center; width: 84px; }
.flag-art { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); background: var(--surface-2); }
.flag-card:hover .flag-art { border-color: var(--accent); }
.flag-name { font-size: 11px; font-weight: 600; margin-top: 6px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Grid card variant - standalone pages (country grid, search, tag results) */
.stn-grid-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; height: 100%; transition: border-color .15s ease; }
.stn-grid-card:hover { border-color: var(--accent-2); }
.stn-grid-card img { display: block; width: 100%; height: 150px; object-fit: cover; }
.stn-grid-card .body { padding: 14px; }
.stn-grid-card .body h5 { font-size: 15px; }

/* Bootstrap list-group (tag results page) */
.list-group-item { background: var(--surface-2); border-color: var(--line); color: var(--text); }
.list-group-item img { border: 1px solid var(--line); }

/* ===========================================================
   Hero carousel - 3 featured stations, homepage only.
   =========================================================== */
.hero-carousel { position: relative; min-height: clamp(300px, 36vw, 380px); border-radius: 16px; overflow: hidden; margin-bottom: 30px; background: var(--surface); }
.hc-track { position: relative; width: 100%; height: 100%; }
.hc-slide {
  position: absolute; inset: 0; display: flex; align-items: flex-end;
  padding: 44px 80px 34px 32px; opacity: 0; transform: scale(1.04);
  transition: opacity .7s ease, transform 1s ease; pointer-events: none;
  background-size: cover; background-position: center;
}
.hc-slide.active { opacity: 1; transform: scale(1); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .hc-slide { transition: opacity .01s linear; transform: none; } }
.hc-content { position: relative; z-index: 2; max-width: 520px; }
.hc-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.hc-kicker .live { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #ffd9db; }
.hc-kicker .live i { width: 7px; height: 7px; border-radius: 50%; background: #ff5a63; }
@media (prefers-reduced-motion: no-preference) { .hc-kicker .live i { animation: hc-pulse 1.6s ease-in-out infinite; } }
@keyframes hc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.hc-content h2 { font-weight: 800; letter-spacing: .01em; font-size: clamp(24px, 3.6vw, 36px); margin: 0 0 8px; color: #fff; text-wrap: balance; }
.hc-content p { margin: 0 0 16px; color: rgba(255,255,255,.78); font-size: 14px; max-width: 46ch; line-height: 1.6; }
.hc-actions { display: flex; align-items: center; gap: 12px; }
.hc-actions .btn-primary { padding: 11px 20px; }
.hc-actions .btn-ghost {
  display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); cursor: pointer;
  border: 1px solid rgba(255,255,255,.3); color: #fff; font-weight: 600; font-size: 13.5px; padding: 11px 18px;
  border-radius: 999px; text-decoration: none;
}
.hc-meta { display: flex; gap: 14px; margin-top: 16px; color: rgba(255,255,255,.65); font-size: 12px; }
.hc-arrow {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 3; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25); background: rgba(10,10,14,.45); color: #fff; font-size: 19px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.hc-prev { left: 14px; } .hc-next { right: 14px; }
.hc-dots { position: absolute; z-index: 3; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 8px; }
.hc-dot { width: 8px; height: 8px; border-radius: 999px; border: 0; background: rgba(255,255,255,.35); cursor: pointer; padding: 0; transition: width .25s ease, background .25s ease; }
.hc-dot.active { width: 22px; background: #fff; }

/* ---------- accordion (station schedule) ---------- */
.accordion-item { background: var(--surface-2); border-color: var(--line); }
.accordion-button { background: var(--surface-2); color: var(--text); }
.accordion-button:not(.collapsed) { background: var(--surface-3); color: var(--text); box-shadow: none; }
.accordion-button::after { filter: invert(1) grayscale(1) brightness(1.6); }
.accordion-body { color: var(--dim); }
/* Bootstrap 5.3 tables theme via CSS custom properties scoped to
   [data-bs-theme=dark] — we never set that attribute (single dark theme,
   no toggle), so every --bs-table-* var must be overridden directly here
   or tables silently render in Bootstrap's light-mode default. */
.table {
  --bs-table-bg: var(--surface-2);
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--line);
  --bs-table-striped-bg: var(--surface-3);
  --bs-table-striped-color: var(--text);
  --bs-table-hover-bg: var(--surface-3);
  --bs-table-hover-color: var(--text);
  color: var(--text);
}
.table-light, .table thead { background: var(--surface-3); color: var(--text); }
.table-dark { --bs-table-bg: var(--overlay); --bs-table-color: var(--text); }
.table-bordered, .table-bordered th, .table-bordered td { border-color: var(--line); }

/* ---------- modals ---------- */
.modal-content { background: var(--surface); color: var(--text); border: 1px solid var(--line); }
.modal-header, .modal-footer { border-color: var(--line); }
.btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

/* ---------- station detail hero ---------- */
.station-hero { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.station-hero-art-wrap { position: relative; padding: 24px; text-align: center; background: var(--surface-2); }
.station-hero-art { width: 220px; height: 220px; border-radius: 50%; object-fit: cover; border: 3px solid var(--line); }
.station-hero-hits {
  position: absolute; top: 14px; right: 14px; background: var(--accent-3); color: #fff; font-weight: 700;
  font-size: 12px; padding: 4px 10px; border-radius: 999px;
}
.station-live-badge {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-3); margin-bottom: 8px;
}
.station-live-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-3); }
@media (prefers-reduced-motion: no-preference) { .station-live-badge i { animation: hc-pulse 1.6s ease-in-out infinite; } }
.station-play-btn {
  display: inline-flex; align-items: center; gap: 10px; border: 0; cursor: pointer; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 14px; padding: 13px 26px;
}
.station-play-btn img { width: 16px; height: 16px; filter: none; }
.station-icon-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2);
  color: var(--dim); display: inline-grid; place-items: center; cursor: pointer;
}
.station-icon-btn:hover { border-color: var(--accent-2); color: var(--text); }

/* CI4's Pager\Views\default_full.php renders plain <nav><ul class="pagination"><li><a>
   with no BS5 page-item/page-link classes, so bootstrap.min.css's pagination rules
   never match it — it was falling through to unstyled browser defaults (bulleted,
   underlined blue links) on the dark dashboard/site theme. */
nav[aria-label] .pagination {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  list-style: none; margin: 0; padding: 0;
}
nav[aria-label] .pagination li { display: block; }
nav[aria-label] .pagination li a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 10px; border-radius: 8px;
  background: var(--bg2); border: 1.5px solid var(--line2); color: var(--text2);
  font-size: .82rem; font-weight: 600; text-decoration: none; line-height: 1;
}
nav[aria-label] .pagination li a:hover { border-color: var(--accent); color: var(--text); }
nav[aria-label] .pagination li.active a {
  background: var(--accent); border-color: var(--accent); color: #fff;
}