/* ══════════════════════════════════════════════════════════════════════════
   /radio · 电台节目表
   配色与圆角沿用 /audio/ 那套 token，不另起一套 —— 站内两套视觉语言比没有
   视觉语言更糟。品牌蓝 #017BB8 只用在"正在直播"这一处，让它一眼可辨。
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --font: ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --bg:#edf4ff; --bg2:#f7fbff;
  --card:rgba(255,255,255,.72); --card2:rgba(255,255,255,.88);
  --txt:#102033; --sub:rgba(16,32,51,.72); --muted:rgba(16,32,51,.52);
  --stroke:rgba(30,64,175,.13); --stroke2:rgba(15,23,42,.08);
  --blue:#017BB8; --blue2:#0891b2; --live:#e11d48; --green:#059669;
  --shadow:0 26px 70px rgba(30,64,175,.14); --shadow2:0 16px 36px rgba(15,23,42,.10);
  --radius:30px; --radius2:22px; --blur:saturate(1.4) blur(22px);
}
@media (prefers-color-scheme: dark){
  html[data-theme="auto"]{
    --bg:#07111f; --bg2:#0b1728;
    --card:rgba(13,25,43,.74); --card2:rgba(16,30,52,.88);
    --txt:rgba(239,246,255,.96); --sub:rgba(239,246,255,.72); --muted:rgba(239,246,255,.50);
    --stroke:rgba(96,165,250,.18); --stroke2:rgba(255,255,255,.08);
    --shadow:0 28px 80px rgba(0,0,0,.42); --shadow2:0 18px 40px rgba(0,0,0,.32);
  }
}

*{box-sizing:border-box}
html{min-height:100%}
body{
  min-height:100dvh; margin:0; font-family:var(--font); color:var(--txt);
  background:
    radial-gradient(900px 480px at 10% 0%, rgba(1,123,184,.18), transparent 62%),
    radial-gradient(720px 420px at 94% 12%, rgba(6,182,212,.14), transparent 58%),
    linear-gradient(180deg, var(--bg2), var(--bg));
  background-attachment:fixed; overflow-x:hidden;
}
/* 顶栏定位与 /audio/ 那几页保持一致 —— 同一个站不该两种顶栏行为 */
#globalNav{
  position:sticky;
  top:calc(10px + env(safe-area-inset-top));
  z-index:100;
  width:min(1000px, calc(100% - 32px));
  margin:12px auto 0;
}
@media (max-width:560px){
  #globalNav{width:calc(100% - 20px); top:calc(6px + env(safe-area-inset-top))}
}

.wrap{max-width:1000px; margin:0 auto; padding:24px 20px 80px}
h1,h2{margin:0; letter-spacing:-.02em}

/* ── 选项卡 ─────────────────────────────────────────────────────────────── */
.tabs{display:flex; gap:8px; margin:6px 0 4px; flex-wrap:wrap}
.tab{
  padding:10px 22px; border-radius:999px; text-decoration:none; font-size:15px; font-weight:700;
  color:var(--sub); background:var(--card); border:1px solid var(--stroke2); transition:all .18s;
}
.tab:hover{color:var(--txt); border-color:#94a3b8}
.tab[aria-selected="true"]{
  color:#fff; background:linear-gradient(135deg,var(--blue),var(--blue2)); border-color:transparent;
  box-shadow:var(--shadow2);
}
@media (max-width:520px){ .tab{padding:9px 16px; font-size:14px} }

/* ── 正在直播 ───────────────────────────────────────────────────────────── */
.live{
  position:relative; margin:18px 0 26px; padding:26px 26px 22px;
  border-radius:var(--radius); border:1px solid var(--stroke);
  background:var(--card2); backdrop-filter:var(--blur); box-shadow:var(--shadow);
}
.live-top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
.live-badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 13px; border-radius:999px;
  font-size:13px; font-weight:700; color:var(--muted);
  background:rgba(148,163,184,.14); border:1px solid var(--stroke2);
}
.live-badge .dot{width:8px; height:8px; border-radius:50%; background:currentColor}
.live-badge.on{color:#fff; background:var(--live); border-color:transparent}
/* 只有真正在播时才闪 —— 静止的红点表示"这条信息是活的"，闪的表示"正在发生" */
.live-badge.on .dot{background:#fff; animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){ .live-badge.on .dot{animation:none} }
.live-clock{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}
.live h1{font-size:clamp(24px,4vw,32px)}
.live-now{margin:10px 0 2px; font-size:clamp(17px,2.6vw,21px); font-weight:650; color:var(--txt)}
.live-show{margin:0; font-size:14px; color:var(--sub)}
.bar{height:6px; border-radius:999px; background:rgba(148,163,184,.22); margin:16px 0 6px; overflow:hidden}
.bar-fill{height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--blue),var(--blue2)); transition:width .9s linear}
.live-times{margin:0; font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.live-actions{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:18px 0 12px}
.btn-join{
  display:inline-flex; align-items:center; gap:10px; padding:13px 26px; border:0; cursor:pointer;
  border-radius:999px; font-family:inherit; font-size:15.5px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--blue2)); box-shadow:var(--shadow2);
  transition:transform .16s, opacity .16s;
}
.btn-join:hover:not(:disabled){transform:translateY(-1px)}
.btn-join:disabled{opacity:.5; cursor:not-allowed}
.btn-join.playing{background:linear-gradient(135deg,#475569,#334155)}
.ico-play{width:17px; height:17px; fill:currentColor}
.vol{display:inline-flex; align-items:center; gap:8px; color:var(--muted)}
.vol svg{width:19px; height:19px}
.vol input{width:110px; accent-color:var(--blue)}
.live-hint{margin:0; font-size:12.5px; color:var(--muted); line-height:1.6}

/* ── 面板 ───────────────────────────────────────────────────────────────── */
.panel{
  margin:0 0 26px; padding:22px 24px;
  border-radius:var(--radius2); border:1px solid var(--stroke);
  background:var(--card); backdrop-filter:var(--blur); box-shadow:var(--shadow2);
}
.panel-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:16px}
.panel h2{font-size:19px}
.panel-sub{font-size:13px; color:var(--muted)}

/* ── 今天的时间表 ───────────────────────────────────────────────────────── */
.slots{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px}
.slot{
  display:grid; grid-template-columns:78px 1fr auto; align-items:center; gap:14px;
  padding:11px 12px; border-radius:12px; font-size:14.5px;
}
.slot + .slot{border-top:1px solid var(--stroke2)}
.slot .t{color:var(--muted); font-variant-numeric:tabular-nums; font-size:13.5px}
.slot .n{font-weight:560; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.slot .d{color:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums}
.slot.now{background:linear-gradient(90deg, rgba(1,123,184,.14), transparent 70%); border-radius:12px}
.slot.now .n{color:var(--blue); font-weight:750}
.slot.past{opacity:.48}
.slot.skeleton{height:42px; background:rgba(148,163,184,.12); border-radius:12px; border:0}

/* ── 历代广播 ───────────────────────────────────────────────────────────── */
.arch-tools{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:14px}
.years{display:flex; gap:7px; flex-wrap:wrap}
.year{
  padding:7px 15px; border-radius:999px; font-size:13.5px; font-weight:650; cursor:pointer;
  color:var(--sub); background:transparent; border:1px solid var(--stroke2); font-family:inherit;
}
.year[aria-selected="true"]{color:#fff; background:linear-gradient(135deg,var(--blue),var(--blue2)); border-color:transparent}
#archSearch{
  flex:1; min-width:180px; padding:9px 15px; border-radius:999px; font-family:inherit; font-size:14px;
  color:var(--txt); background:var(--card2); border:1px solid var(--stroke2);
}
#archSearch::placeholder{color:var(--muted)}

.notice{
  margin:0 0 14px; padding:13px 16px; border-radius:14px; font-size:13.5px; line-height:1.65;
  color:var(--sub); background:rgba(217,119,6,.10); border:1px solid rgba(217,119,6,.28);
}
.notice code{font-size:12.5px; background:rgba(148,163,184,.18); padding:1px 6px; border-radius:5px}

.days{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.day{border:1px solid var(--stroke2); border-radius:16px; background:var(--card2); overflow:hidden}
.day-head{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
  width:100%; padding:14px 17px; cursor:pointer; text-align:left;
  font-family:inherit; font-size:15px; color:var(--txt); background:transparent; border:0;
}
.day-head:hover{background:rgba(148,163,184,.08)}
.day-date{font-weight:700; font-variant-numeric:tabular-nums}
.day-meta{color:var(--muted); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tag{
  padding:4px 11px; border-radius:999px; font-size:12px; font-weight:700; white-space:nowrap;
  color:var(--muted); background:rgba(148,163,184,.16);
}
.tag.today{color:#fff; background:var(--live)}
.tag.soon{color:var(--green); background:rgba(5,150,105,.14)}
.day-body{padding:0 17px 14px; border-top:1px solid var(--stroke2)}
.day[aria-expanded="false"] .day-body{display:none}

/* ── 台湾电台成品 ───────────────────────────────────────────────────────── */
.eps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.ep{
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:13px;
  padding:12px 15px; border-radius:14px; border:1px solid var(--stroke2); background:var(--card2);
}
.ep.on{border-color:var(--blue); box-shadow:0 0 0 3px rgba(1,123,184,.12)}
/* 还没播完的：压暗、上锁，一眼看出"还不能听"，而不是点了没反应 */
.ep.upcoming{opacity:.62}
.ep.onair{border-color:var(--live); box-shadow:0 0 0 3px rgba(225,29,72,.12)}
.ep-play.is-locked{
  display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:50%;
  color:var(--muted); background:rgba(148,163,184,.18);
}
.ep-play.is-locked svg{width:15px; height:15px}
.ep-dl.is-muted{color:var(--muted); font-size:12.5px}
/* 「听到 32:41」：90 分钟的节目，回来时最想知道的就是上次停在哪 */
.ep-sync{color:var(--live); font-weight:700; font-size:12.5px}
.ep-heard{color:var(--blue); font-weight:650; font-size:12.5px; font-variant-numeric:tabular-nums}
/* 播放器常驻在底部，内容要让出位置，否则最后一期被压在条子底下点不到 */
body{padding-bottom:96px}
@media (max-width:520px){ body{padding-bottom:132px} }
.ep-play{
  width:38px; height:38px; flex:none; border:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
}
.ep-play svg{width:14px; height:14px; fill:currentColor}
.ep-no{font-weight:750; font-variant-numeric:tabular-nums}
.ep-date{color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums}
.ep-size{color:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums}
.ep-dl{color:var(--sub); font-size:13px; text-decoration:none; white-space:nowrap}
.ep-dl:hover{color:var(--blue)}

/* ── 搜索 ───────────────────────────────────────────────────────────────── */
.search-state{
  margin:0 0 12px; padding:10px 15px; border-radius:12px; font-size:13.5px; line-height:1.6;
  color:var(--sub); background:rgba(148,163,184,.12); border:1px solid var(--stroke2);
}
.search-state.warn{color:#b45309; background:rgba(217,119,6,.10); border-color:rgba(217,119,6,.28)}
.search-state b{color:var(--txt)}
.hit-day{border:1px solid var(--stroke2); border-radius:16px; background:var(--card2); overflow:hidden}
.hit-head{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
  width:100%; padding:12px 17px; cursor:pointer; text-align:left;
  font-family:inherit; font-size:15px; color:var(--txt); background:transparent; border:0;
}
.hit-head:hover{background:rgba(148,163,184,.08)}
.hit-list{list-style:none; margin:0; padding:0 17px 12px}
.hit{display:grid; grid-template-columns:60px 1fr; gap:12px; padding:6px 0; font-size:13.5px; border-top:1px solid var(--stroke2)}
.hit .t{color:var(--muted); font-variant-numeric:tabular-nums}
.hit mark{background:rgba(1,123,184,.22); color:inherit; border-radius:3px; padding:0 2px}
#epSearch{
  flex:1; min-width:180px; padding:9px 15px; border-radius:999px; font-family:inherit; font-size:14px;
  color:var(--txt); background:var(--card2); border:1px solid var(--stroke2);
}
#epSearch::placeholder{color:var(--muted)}

/* ── 历代某一天展开后的内容 ─────────────────────────────────────────────── */
.day-body h3{margin:14px 0 8px; font-size:13.5px; color:var(--muted); font-weight:700}
.tracks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.track{display:grid; grid-template-columns:60px 1fr; gap:12px; padding:6px 0; font-size:13.5px; border-top:1px solid var(--stroke2)}
.track .t{color:var(--muted); font-variant-numeric:tabular-nums}
.loading{padding:14px 0; color:var(--muted); font-size:13.5px}
.join-inline{
  border:0; padding:5px 13px; border-radius:999px; cursor:pointer; font-family:inherit;
  font-size:13px; font-weight:650; color:#fff;
  background:linear-gradient(135deg,var(--blue),var(--blue2));
}

@media (max-width:640px){
  .wrap{padding:16px 14px 64px}
  .live{padding:20px 18px 18px; border-radius:24px}
  .panel{padding:18px 16px}
  .slot{grid-template-columns:64px 1fr; gap:10px}
  .slot .d{display:none}
  .day-head{grid-template-columns:auto 1fr; gap:10px; padding:13px 14px}
  .day-meta{display:none}
  .ep{grid-template-columns:auto 1fr auto; gap:10px; padding:11px 12px}
  .ep-size{display:none}
}