/**
 * play-source.css —— 播放页「片源 / 集数」样式  (v2 · 2026-10-15)
 *
 * ★★ 为什么用 `#post article` 前缀 + 少量 `!important`：
 *   实测（浏览器枚举匹配规则）主题 mirages.min.css 里有**含 id 的规则**会压过普通类选择器：
 *     `#post article a { color:#1abc9c }`      ⇒ 让"激活"按钮变成**青绿字压青绿底** ⇒ 看不见 ✗
 *     `#post article ul{ padding-left:32px }`   ⇒ 让集数网格**整体右移 32px** ⇒ 与页面内容不对齐 ✗
 *   ⇒ 组件样式要用**同级别（含 id）**的选择器 ✓，颜色/内边距这一类"必须生效"的属性加 `!important` ✓
 *
 * 结构（由 play.html 提供）：片源 `.play-sources > .play-btn` · 集数 `ul.play-episodes > li.play-li > a.play-url`
 */
#post article .play-sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0.75rem 0 0.25rem;
}
#post article .play-btn {
  display: inline-block;
  margin: 0 0.5rem 0.5rem 0;
  padding: 0.25rem 0.75rem;
  font-size: 0.9rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: rgba(0, 0, 0, 0.03);
  color: #1abc9c;   /* ★ 2026-10-15（用户选②）：未激活也用主题青绿 ✓（激活仍为白字，靠下面的 !important 胜出 ✓） */
  text-decoration: none;
  transition: all 0.2s;
}
#post article .play-btn:hover {
  border-color: #1abc9c;
  color: #1abc9c !important;
}

/* ---- 集数：手机 3 列（对应 play-col-xs-4）· ≥768px 6 列（对应 play-col-sm-2）---- */
#post article ul.play-episodes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.25rem 0 0.75rem !important;
  padding: 0 !important;
  list-style: none !important;
}
@media screen and (min-width: 768px) {
  #post article ul.play-episodes {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
#post article .play-li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
#post article .play-li .play-url {
  display: block;
  padding: 0.375rem 0.25rem;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.4;
  border-radius: 0.25rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.03);
  color: #1abc9c;   /* ★ 2026-10-15（用户选②）：未激活也用主题青绿 ✓（激活仍为白字，靠下面的 !important 胜出 ✓） */
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.2s;
}
#post article .play-li .play-url:hover {
  border-color: #1abc9c;
  color: #1abc9c !important;
}

/* ---- 暗色主题（本站默认 body.theme-dark ✓）---- */
body.theme-dark #post article .play-btn,
body.theme-dark #post article .play-li .play-url {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #1abc9c;   /* ★ 2026-10-15（用户选②）：未激活也用主题青绿 ✓（激活仍为白字，靠下面的 !important 胜出 ✓） */
}

/* ---- 激活态（★ 必须放在暗色基础规则**之后**，且带 !important ⇒ 确保白字压青绿底 ✓）---- */
#post article .play-btn.active,
#post article .play-btn.active:hover,
body.theme-dark #post article .play-btn.active,
body.theme-dark #post article .play-btn.active:hover,
#post article .play-li .play-url.active,
#post article .play-li .play-url.active:hover,
body.theme-dark #post article .play-li .play-url.active,
body.theme-dark #post article .play-li .play-url.active:hover {
  background: #1abc9c !important;
  border-color: #1abc9c !important;
  color: #fff !important;
}

/* ---- ★ 2026-10-15 追加：激活态（最明确的写法 ✓ 只此一处带 !important ✓）----
   片源：当前线路 · 集数：当前集 ⇒ 白字 + 青绿底 ✓（亮/暗都覆盖 ✓） */
body #post article .play-sources a.play-btn.active,
body #post article .play-sources a.play-btn.active:hover,
body.theme-dark #post article .play-sources a.play-btn.active,
body.theme-dark #post article .play-sources a.play-btn.active:hover,
body #post article ul.play-episodes li.play-li a.play-url.active,
body #post article ul.play-episodes li.play-li a.play-url.active:hover,
body.theme-dark #post article ul.play-episodes li.play-li a.play-url.active,
body.theme-dark #post article ul.play-episodes li.play-li a.play-url.active:hover {
  color: #fff !important;
  background: #1abc9c !important;
  border-color: #1abc9c !important;
}