/* ==========================================================================
   各「原站版式」页面的少量补充样式
   （首页 / 开奖历史 / 福彩图库 / 专家预测 / 关于我们 / 联系我们）。

   original_pc.css 是原站样式表的逐字拷贝，**不改它**；本站需要而原站没有的东西
   （语言/主题开关、夜间模式配色）都放这里，用更高优先级的选择器覆盖。

   三个部分：
     1. .pc-*  —— logo 行右侧的繁简 / 夜间开关（本站新增，尺寸压到最小）
     2. :root[data-theme="dark"] —— 夜间模式覆盖。原站只有浅色一版，
        所以夜间模式是"在同样版式上换一套配色"，布局尺寸一律不动。
     3. 回放弹层头部球里的数字 —— 对准球图白块圆心（唯一一处版式微调，见下）
   ========================================================================== */

/* ---------------------------------------------------------------- 1. 偏好开关 */
.pc-prefs {
  float: right;
  margin-right: 20px;
  line-height: 140px;          /* 与 .date 对齐，垂直居中在 logo 行里 */
  font-size: 0;                /* 干掉 inline-block 之间的空白 */
}
.pc-seg {
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  border: 1px solid #d4d4d4;
  border-radius: 3px;
  background: #fafafa;
  /* 必须显式给 line-height：父级是 140px（为了和 .date 对齐），
     不覆盖的话 inline-block 的支柱会把整个盒子撑到 142px 高（踩过）。 */
  line-height: 24px;
}
.pc-seg-item {
  display: inline-block;
  height: 24px;
  line-height: 24px;
  padding: 0 9px;
  font-size: 12px;
  color: #707070;
  text-decoration: none;
}
.pc-seg-item + .pc-seg-item { border-left: 1px solid #d4d4d4; }
.pc-seg-item:hover { color: #d80011; }
.pc-seg-item.is-on { background: #d80011; color: #fff; }
.pc-theme {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  height: 26px;
  line-height: 24px;
  padding: 0 10px;
  font-size: 12px;
  color: #707070;
  background: #fafafa;
  border: 1px solid #d4d4d4;
  border-radius: 3px;
  cursor: pointer;
  outline: none;
  text-decoration: none;   /* 它是 <a>，无 JS 时靠 href 走服务端切换 */
}
.pc-theme:hover { color: #d80011; border-color: #d80011; }
.pc-theme > span { margin-right: 4px; }
.pc-theme > span:last-child { margin-right: 0; }

/* ---------------------------------------------------------------- 2. 夜间模式 */
/* ⚠️ 原站样式表用的选择器非常深，例如
      .LotteryIndex .lotteryHall ul li .mainLottery .lotteryTime .leftTime .num
   光靠 :root[data-theme="dark"] 加一个类根本压不住（层叠优先级会输）。
   这里统一在中间挂一个 `#app`（ID 选择器），优先级立刻高于原站任意组合。 */
:root[data-theme="dark"] { color-scheme: dark; }

:root[data-theme="dark"] body { background: #121417; color: #c9d1d9; }
:root[data-theme="dark"] #app { border-bottom-color: #2b3036; }

/* 卡片 */
:root[data-theme="dark"] #app .mainLottery,
:root[data-theme="dark"] #app .postLottery {
  background-color: #1a1e23;
  border-color: #2b3036;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
:root[data-theme="dark"] #app .postLottery ul {
  border-color: #2b3036;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
:root[data-theme="dark"] #app .postLottery ul li:nth-child(2n) { background-color: #20252b; }

/* 文字 */
:root[data-theme="dark"] #app .lotteryName,
:root[data-theme="dark"] #app .lotteryTitle .title { color: #e6edf3; }
:root[data-theme="dark"] #app .lotteryIssue,
:root[data-theme="dark"] #app .historyIssue,
:root[data-theme="dark"] #app .postHeader .left { color: #9aa4b2; }
:root[data-theme="dark"] #app .leftTime .num {
  color: #e6edf3;
  border-color: #3a4149;
  background-color: #1a1e23;
}
:root[data-theme="dark"] #app .leftTime .dot { color: #e6edf3; }

/* 「歷史開獎查詢」在原站 HTML 里带 style="color:#000"，行内样式优先级高于选择器，
   夜间模式必须 !important 才压得住。 */
:root[data-theme="dark"] #app .history a { color: #c9d1d9 !important; }
:root[data-theme="dark"] #app .history a:hover { color: #ff7183 !important; }

/* 页脚 */
:root[data-theme="dark"] #app footer { background-color: #121417; color: #8b949e; }

/* 偏好开关 */
:root[data-theme="dark"] #app .pc-seg,
:root[data-theme="dark"] #app .pc-theme {
  background: #1a1e23;
  border-color: #3a4149;
  color: #9aa4b2;
}
:root[data-theme="dark"] #app .pc-seg-item { color: #9aa4b2; }
:root[data-theme="dark"] #app .pc-seg-item + .pc-seg-item { border-left-color: #3a4149; }
:root[data-theme="dark"] #app .pc-seg-item.is-on { background: #d80011; color: #fff; }

/* 空数据兜底：原站没有这个状态，给个不破坏版式的提示 */
.lotteryNum .lotteryIssue.is-empty { color: #a4a4a4; }

/* ==========================================================================
   3. 内页需要、但原站样式表里没有（或行为不合适）的几条
   ========================================================================== */

/* ---- 历史页分页条 ----
   原站把 `.page` 绝对定位到 ul 外面（bottom:-100px），再被 ul 的 overflow:hidden
   裁掉 —— 等于没有分页：640 行一次性输出。样式照用，只是放回文档流。
   （:root 提权，压过原站 `.lotteryPost .hisPost>ul .page`） */
:root .lotteryPost .hisPost > ul .page {
  position: static;
  height: auto;
  padding: 18px 0 30px;
}

/* ---- 历史页的年份筛选按钮 ----
   原站只有一个「今年」按钮，`.title .six{margin-left:280px}` 是给它定位的、
   `button:last-of-type{margin-right:60px}` 也是给它留边距的。
   我们多出来的年份按钮是第一颗之后自己加的，得把这两处间距清掉，
   否则会折行、压到表头上（踩过）。 */
:root .lotteryPost .hisPost > ul .title button.pc-year {
  margin-left: 0;
  margin-right: 0;
  padding: 0 14px;
}
:root .lotteryPost .hisPost > ul .title button.pc-year + button.pc-year { margin-left: 8px; }
:root .lotteryPost .hisPost > ul .title button.pc-year:last-of-type { margin-right: 0; }

/* ---- 通用页码条 ----
   数字样式抄原站 `.hisPost>ul .page span`（35×35 圆角方块、当前页红底），
   专家预测页复用它（原站那一页完全没有分页控件）。 */
.pc-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 18px 0 26px;
}
.pc-pager span {
  display: block;
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: #515151;
  font-size: 14px;
  cursor: pointer;
  margin: 8px 8px 0 0;
  border: 1px solid #dadada;
  border-radius: 4px;
  background-color: #fff;
}
.pc-pager span.active { background-color: #d80011; color: #fff; }

/* ---- 图库标题条里的期号 / 上一期 / 下一期 ----
   原站这个 `.title` 是空的（永远只看当前期、也没有切换入口）。
   位置与字号仍是原站 `.lotteryContact .main .title` 的样式。 */
.pc-issue-nav {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  width: 100%;
  font-size: 15px;
}
.pc-issue-nav strong { font-size: 20px; color: #2c2c2c; }
.pc-issue-nav a { color: #646464; }
.pc-issue-nav a:hover { color: #d80011; }

/* ---- 专家预测页的外层容器 ----
   原站的 `.faq` 是 1170px 居中，但这条规则**在静态 HTML 里找不到**：
   它是 Vue 运行时注入的样式（实测 computed width=1170 / margin-left=116.5=auto）。
   这里按实测值补上。 */
.faq {
  width: 1170px;
  margin: 0 auto;
}

/* ---- 联系页的邮箱块 ----
   原站 `.article > .content` 是 Vue 作用域样式（只在 JS 里，HTML 拿不到），
   这几条按原站截图复原：图标 48×48 在上，邮箱在下一行、左对齐。
   配多个邮箱时每条一小组（图标 + 地址），逐组往下排。 */
.lotteryContact .main .article .content { padding-top: 10px; }
.lotteryContact .main .article .content .contact-line {
  display: block;
  padding-bottom: 8px;
}
.lotteryContact .main .article .content .logo {
  display: block;
  width: 48px;
  height: 48px;
}
.lotteryContact .main .article .content .contact {
  display: block;
  font-size: 15px;
  color: #2c2c2c;
  line-height: 30px;
}
/* 原站邮箱是纯文本；这里做成可点的 mailto，但颜色随原站，别变蓝 */
.lotteryContact .main .article .content .contact a { color: inherit; }
.lotteryContact .main .article .content .contact a:hover { color: #d80011; }

/* ---- 专家预测页的免责声明 ----
   原站没有这句；但这是抓来的参考性预测内容，必须标明不是开奖结果。 */
.pc-disclaimer {
  width: 550px;
  margin: 6px 0 40px;
  padding-left: 5px;
  color: #999;
  font-size: 12.5px;
  line-height: 20px;
}

/* 注：专家预测页的分页条不需要额外底色 —— `.pc-pager span` 本身已经是白底。
   曾经在这里补过一条 `.faq .pc-pager span{background-color:#fff}`，
   它和 `.pc-pager span.active` **优先级相同、但位置更靠后**，
   于是把选中页的红底盖成白底，白字白底直接看不见（踩过，别再加回来）。 */

/* -------------------------------------------------------------------------- */
/* 4. 内页的夜间模式（同样靠 #app 提权，压过原站深层选择器）                     */
/* -------------------------------------------------------------------------- */

/* 开奖历史 */
:root[data-theme="dark"] #app .lotteryPost .hisPost {
  background-color: #1a1e23;
  border-color: #2b3036;
}
:root[data-theme="dark"] #app .lotteryPost .header ul { background-color: #20252b; }
:root[data-theme="dark"] #app .lotteryPost .header ul li.active { color: #fff; }
:root[data-theme="dark"] #app .lotteryPost .nav,
:root[data-theme="dark"] #app .lotteryPost .nav span { color: #e6edf3; }
:root[data-theme="dark"] #app .lotteryPost .notice {
  background-color: #2a2418;
  color: #c9b18a;
}
:root[data-theme="dark"] #app .lotteryPost .hisPost > ul .title {
  color: #9aa4b2;
  border-bottom-color: #2b3036;
}
:root[data-theme="dark"] #app .lotteryPost .hisPost > ul .title .lotteryName { color: #e6edf3; }
:root[data-theme="dark"] #app .lotteryPost .hisPost > ul .title button {
  background-color: #1a1e23;
  color: #9aa4b2;
}
:root[data-theme="dark"] #app .lotteryPost .hisPost > ul .title button.choice {
  background-color: #d80011;
  color: #fff;
}
:root[data-theme="dark"] #app .hisTitle {
  background-color: #20252b;
  border-bottom-color: #2b3036;
}
:root[data-theme="dark"] #app .hisTitle span { color: #c9d1d9; }
:root[data-theme="dark"] #app .hisMore { border-bottom-color: #2b3036; color: #c9d1d9; }
:root[data-theme="dark"] #app .lastInfo { border-bottom-color: #2b3036; }
:root[data-theme="dark"] #app .lastTitle,
:root[data-theme="dark"] #app .lastTitle span:first-child { color: #c9d1d9; }
:root[data-theme="dark"] #app .nextTimeTitle { color: #9aa4b2; }
:root[data-theme="dark"] #app .pc-pager span {
  background-color: #1a1e23;
  border-color: #3a4149;
  color: #9aa4b2;
}
:root[data-theme="dark"] #app .pc-pager span.active { background-color: #d80011; color: #fff; }

/* 福彩图库 / 联系我们（共用 .lotteryContact） */
:root[data-theme="dark"] #app .lotteryContact { background-color: #121417; }
:root[data-theme="dark"] #app .lotteryContact .main { background-color: #121417; }
:root[data-theme="dark"] #app .lotteryContact .main .title { color: #e6edf3; }
:root[data-theme="dark"] #app .lotteryContact .main .article { color: #c9d1d9; }
:root[data-theme="dark"] #app .pc-issue-nav strong { color: #e6edf3; }
:root[data-theme="dark"] #app .pc-issue-nav a { color: #9aa4b2; }
:root[data-theme="dark"] #app .lotteryContact .main .article .content .contact { color: #c9d1d9; }
:root[data-theme="dark"] #app .nodata { color: #9aa4b2; }

/* 专家预测 */
:root[data-theme="dark"] #app .faq { background-color: #121417; }
:root[data-theme="dark"] #app .faq .faq-info h3 { background: #20252b !important; color: #e8a06a !important; }
:root[data-theme="dark"] #app .faq .accordion { background-color: #121417; border-bottom-color: #2b3036; }
:root[data-theme="dark"] #app .faq .list-info { color: #9aa4b2; }
:root[data-theme="dark"] #app .pc-disclaimer { color: #6b7280; }

/* 关于我们 */
:root[data-theme="dark"] #app .lotteryUs .header { background-color: #121417; }
:root[data-theme="dark"] #app .lotteryUs .header ul { background-color: #20252b; }
:root[data-theme="dark"] #app .lotteryUs .header ul li { color: #9aa4b2; }
:root[data-theme="dark"] #app .lotteryUs .content .about,
:root[data-theme="dark"] #app .lotteryUs .content .gameRule { color: #c9d1d9; }
:root[data-theme="dark"] #app .lotteryUs .content .about .title,
:root[data-theme="dark"] #app .lotteryUs .content .gameRule .title,
:root[data-theme="dark"] #app .lotteryUs .content .rule .title { color: #e6edf3; }
:root[data-theme="dark"] #app .lotteryUs .content .gameRule .lotteryRule {
  background-color: #1a1e23;
  border-color: #2b3036;
}
:root[data-theme="dark"] #app .lotteryUs .content .rule { background-color: #121417; }
:root[data-theme="dark"] #app .lotteryUs .content .rule .detailRule h3 { color: #c9d1d9; }

/* ---------------------------------------------------------------- 3. 回放弹层头部球里的数字 */
/* 球图 static/img/balls/{red,yellow,blue}.png（与原站 templates/pc/images/*.png 逐字节相同）
   里那个白块**不在整图正中**：白块 bbox (17,6)-(171,160)、圆心 (94,83)，整图却是 200×200
   —— 白块圆心比球框中心偏左 3%、偏上 8.5%（原站自己的图就这样，我们是原样下的）。

   原站 CSS 只按行盒把数字居中（.balls 是 line-height:29px），数字因此落在白块圆心的
   右下方各约 1.9px，看着就是"数字没在球里居中"。这里跟回放页白条那排一个做法
   （见 templates/play.html 里那段 <style>）：**只挪文字**——

     · 垂直：line-height 就是行盒高度，收短 ΔL 数字就上移 ΔL/2 → 29 - 2×1.93 ≈ 25.14px；
     · 水平：text-align:center 的行里 text-indent 只挪半个身位 → 写两倍的 -1.90px。

   球的 box / background-size / 间距一律没动，所以球体和原站仍然逐像素一致。
   `verify_replay.py` 有像素级断言盯着这两处（弹层头部 + 白条），改坏了会红。 */
.currentVideo .main .header .videoCode .balls {
  line-height: 25.14px;
  text-indent: -3.8px;
}