/* =============================================================================
   target-skin.css —— 前台 1:1 复刻目标站 2225789.top 的皮肤层
   -----------------------------------------------------------------------------
   依据（目标站原始 CSS，存于本仓库）：
     · docs/research/2225789/style.css   （与 goclone_mirror/template/udm123/css/style.css 相同）
     · docs/research/2225789/kj.css      （开奖区样式）
   规则：
     · 只做样式覆盖，不改任何 HTML 结构 / JS 逻辑；
     · 仅在前台 index.html 中加载（在 styles.css 之后），后台与 predictions 管理页不受影响；
     · 选择器尽量沿用目标站原始类名对应的本站类，并在注释里标出目标站来源选择器。
   ============================================================================= */

/* ── 全局基调（目标站 style.css：body / html）────────────────────────────
   目标站：body{font:16px/1.8em "Lantinghei SC","Microsoft Yahei",Helvetica,Arial;color:#000}
           html{background:#fff89a}  a{color:#000}  a:hover{下划线}            */
body {
  font-family: "Lantinghei SC", "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.8em;
  color: #000;
  background: #fff89a;
  /* 给底部固定导航条（.foot-links）留位，别把页脚压住 */
  padding-bottom: 70px;
}
/* 站内锚点跳转平滑滚动（顶部导航 / 快捷按钮 / 底部导航都用原生锚点） */
html { scroll-behavior: smooth; }
.container a { color: #000; }
.container a:hover { text-decoration: underline; }

/* ── 资料区变量对齐目标站表格（list1/scroll-web-txt-in 等）──────────────────
   表头绿 #090、行线 #ddd、斑马纹 #f7f7f7、字体跟随全站（微软雅黑）、圆角 5px */
:root {
  --pred-line: #ddd;
  --pred-stripe: #f7f7f7;
  --pred-hover: #f7f7f7;
  --pred-head-bg: #009900;
  --pred-radius: 5px;
  --pred-font: "Microsoft Yahei", "Lantinghei SC", Helvetica, Arial, sans-serif;
}

/* ── 版心（目标站 .cgi-body：max-width 800px + .cgi-wrap 左右 10px）───────── */
.container {
  max-width: 800px;
  padding: 0 10px 12px;
}
/* 与版心同宽的整宽条（原 616px → 目标站 800px） */
.site-header,
.banner-poster,
.marquee-wrap,
.brand-row {
  width: calc(100% - 20px);
  max-width: 800px;
}

/* ── 顶部标题栏（目标站 .cgi-head：45px 高、#019c3a 实心绿、白字 18px）────── */
.site-header {
  background: #019c3a;
  border-bottom: none;
  padding: 0 14px;
}
.logo-row { height: 45px; max-width: 800px; }
.logo {
  font-size: 18px;
  font-weight: bold;
  text-shadow: none;
}
/* 徽标 → 目标站 .cgi-head-btn 样式：透明白边胶囊 */
.badge {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 15px;
  padding: 3px 10px;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
}

/* ── 公告跑马灯（目标站 #HotNewsdiv：黑底红字 / #HotNews 黄字）────────────── */
.marquee-wrap {
  background: #000;
  border-bottom: none;
  padding: 5px 10px;
}
.marquee { color: #ff0; font-size: 14px; }
.marquee .marquee-item { color: #ff0; }

/* ── 品牌条（目标站 .biaoti：40px 橙底白字加粗、文字阴影、居中）────────────── */
.brand-row {
  background: #e37400;
  border-bottom: none;
  padding: 0 10px;
  height: 40px;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.diamond {
  width: auto; height: auto;
  background: transparent;
  border: none; border-radius: 0;
  box-shadow: none;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 0 1px 1px #000;
}

/* ── 彩种 Tab（目标站 .cgi-nav：绿底白字 18px，hover 深绿）────────────────── */
.lottery-tabs {
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
}
.tab {
  background: #e53935;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  border-right: 1px solid rgba(255, 255, 255, .35);
}
.tab:last-child { border-right: none; }
.tab.active { background: #ffeb3b; color: #b71c1c; }

/* ── 顶部资料导航矩阵：目标站「2 排共 10 个」→ 5 列 × 2 行（项数由 app.js 截断为 10） */
.cat-nav {
  grid-template-columns: repeat(5, 1fr);
  border-radius: 0;
  margin-bottom: 10px;
}
.cat-nav-cap {
  min-height: 50px;
  padding: 6px 3px;
  font-size: 16px;
  line-height: 1.25;
  word-break: break-all;
}
@media (max-width: 480px) {
  .cat-nav-cap { font-size: 13px; min-height: 46px; padding: 5px 2px; }
}
@media (max-width: 360px) {
  .cat-nav-cap { font-size: 12px; min-height: 42px; }
}

/* ── 白盒卡片（目标站 .white-box：#fff + 1px #ddd 边 + 5px 圆角 + 浅投影）──── */
.result-card,
.table-wrap,
.trend-scroll,
.freq,
.pred-json-card,
.ref-block,
.news-carousel,
.news-grid,
.ad-grid,
.sim-controls,
.draw-form {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 0 0 5px 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
}
.result-card {
  border-radius: 5px;
  padding: 5px;
  margin-top: 10px;
}
.table-wrap, .news-grid, .ad-grid { padding: 5px; }
.trend-scroll { padding: 5px; }

/* ── 区块标题（目标站 .cgi-kjjl-box .kjjl-tit：红底白字居中、18px 加粗）────── */
.block-title,
.pred-section .block-title,
.news-section .block-title,
.history-section .block-title {
  background: #f00;
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  line-height: 40px;
  text-align: center;
  padding: 0 10px;
  border: 1px solid #ddd;
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  letter-spacing: 0;
  text-shadow: none;
  font-family: inherit;
}
.block-title .hint { color: #ffdede; }
.pred-section .block-title .hint { color: #ffdede; }
.block-title small { color: #ffdede; }
/* 缎带两头的斜切角（目标站用 :before/:after 两个三角做燕尾，这里用页面底色切出同样形状） */
.block-title { position: relative; overflow: hidden; }
.block-title::before,
.block-title::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
}
.block-title::before {
  left: 0;
  border-top: 41px solid #fff89a;
  border-right: 14px solid transparent;
}
.block-title::after {
  right: 0;
  border-top: 41px solid #fff89a;
  border-left: 14px solid transparent;
}

/* ── 开奖区（目标站 kj.css：.kj-tit 灰条 / .kj-foot 红字浅灰条）───────────── */
.result-head {
  background: #eee;
  margin: 0 0 8px;
  padding: 0 10px;
  height: 30px;
  line-height: 30px;
  border-radius: 3px;
}
.issue { color: #777; font-size: 14px; font-weight: 400; }
.countdown { color: #019c3a; font-size: 14px; font-weight: 400; }
/* 号码球之间拉开间距（原 clamp(2px,1.2vw,8px) 太挤，按目标站 kj-box 的排布放宽） */
.balls-row { gap: clamp(12px, 4vw, 24px); }
.plus { margin-right: 2px; }
/* 球下生肖/五行：目标站 .kj-box dl dd（黑字、上分隔线 #eee） */
.bz { color: #000; font-size: 14px; font-weight: 400; }
/* 平码与特码之间的「＋」：目标站 li.jia（#acacac） */
.plus { color: #acacac; }
.result-meta {
  background: #f7f7f7;
  color: #f00;
  border-top: none;
  border-radius: 3px;
  margin: 8px -5px -5px;
  padding: 0 10px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
}
.result-meta a, .result-meta .meta-link { color: #019c3a; }

/* ── 开奖区快捷入口（目标站 .cgi-kjjl-box .kjjl-con：绿胶囊 4 个 + 末行白底整行按钮） */
.kjjl-con { padding: 8px 2px 2px; }
.kjjl-con ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.kjjl-con ul li { width: 25%; }
.kjjl-con ul li a {
  display: block;
  height: 40px;
  line-height: 40px;
  margin: 5px;
  text-align: center;
  color: #fff;
  font-size: 16px;
  border-radius: 20px;
  background: #06ae44;
}
.kjjl-con ul li a:hover { background: #05b948; text-decoration: none; }
.kjjl-con ul li:last-child { width: 100%; }
.kjjl-con ul li:last-child a {
  color: #000;
  border: 1px solid #ddd;
  background: #eee;
  background-image: linear-gradient(to top, #eee, #fff);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
}
.kjjl-con ul li:last-child a:hover {
  background: #fff;
  background-image: linear-gradient(to bottom, #eee, #fff);
}
@media (max-width: 800px) {
  .kjjl-con ul li a { height: 30px; line-height: 30px; border-radius: 15px; font-size: 14px; }
}

/* ── 底部固定导航条（目标站 .cgi-foot-links：60px 高、白底渐变、4 项、hover 红） */
.foot-links {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 800px;
  height: 60px;
  z-index: 998;
  border-top: 1px solid #ddd;
  box-shadow: 0 -4px 10px rgba(0, 0, 0, .05);
  background: #fff;
  background-image: linear-gradient(to top, #eee, #fff);
}
.foot-links ul { display: flex; width: 100%; height: 100%; list-style: none; margin: 0; padding: 0; }
.foot-links ul li { width: 25%; text-align: center; }
.foot-links ul li a {
  display: block;
  padding-top: 3px;
  font-size: 15px;
  color: #555;
  line-height: 1.2;
}
.foot-links ul li a:hover { color: #f00; text-decoration: none; }
.foot-links .fl-ico { display: block; height: 32px; line-height: 32px; font-size: 21px; }
@media (max-width: 480px) {
  .foot-links ul li a { font-size: 13px; }
  .foot-links .fl-ico { height: 28px; line-height: 28px; font-size: 18px; }
}

/* ── 历史开奖表（目标站 .list1 / .scroll-web-txt-in：绿表头白字居中、
       td 35px 居中 #ddd 边、斑马 #f7f7f7）────────────────────────────────── */
.draw-table { font-size: 14px; }
.draw-table th {
  background: #009900;
  color: #fff;
  font-weight: bold;
  text-align: center;
  border: 1px solid #007000;
  white-space: nowrap;
}
.draw-table td {
  text-align: center;
  border: 1px solid #ddd;
  color: #000;
}
.draw-table tbody tr:nth-child(even) { background: #f7f7f7; }
/* 手机端首列冻结规则的米黄底一并压成目标站绿表头 */
.draw-table th:first-child { background: #009900; color: #fff; }

/* 号码小球：目标站 .hongbospan/.lanbospan/.lvbospan（20px 实心圆、白字） */
.small-ball {
  width: 20px; height: 20px;
  border: none;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
}
.small-ball.red   { background: #f00;     color: #fff; }
.small-ball.blue  { background: #3366ff;  color: #fff; }
.small-ball.green { background: #009933;  color: #fff; }

/* ── 走势表（目标站 .tableti：灰表头 + 2px #666 底线；td #ddd 居中）────────── */
.trend-table th, .trend-table td { border: 1px solid #ddd; }
.trend-table thead th {
  background: #f8f8f8;
  color: #000;
  border-bottom: 2px solid #666;
}
.trend-table td.cell.hit { background: #3366ff; }

/* 频率条 → 目标站绿色 */
.freq h3 { color: #000; }
.freq-fill { background: #06ae44; }
.freq-bar { background: #eee; }

/* ── 搜索框（目标站 .cgi-input-wrapper input：细线仅下边框）───────────────── */
.search-bar input {
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  height: 40px;
  font-size: 16px;
}

/* ── 分页（目标站 .u-pager / .u-btn / .page-txt.on）───────────────────────── */
.pager { justify-content: center; }
.pager button {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px 15px;
  color: #000;
  font-size: 14px;
}
.pager button:disabled { border-color: #eee; color: #bbb; background: #fff; }
.pager-info { color: #999; }

/* ── 广告位（目标站 .white-box 内虚线格 → 1px #ddd）───────────────────────── */
.ad-slot { border: 1px dashed #ddd; border-radius: 5px; }
.ad-block .block-title small { color: #ffdede; }

/* ── 资料区：档位 Tab / 来源切换（目标站 .cgi-zs .hd：灰底、选中红字红线）──── */
.pred-slot-btn,
.pred-chip {
  border: 1px solid #ddd;
  border-radius: 3px;
  background: #efefef;
  color: #000;
  font-family: inherit;
  letter-spacing: 0;
  box-shadow: none;
  font-weight: bold;
}
.pred-slot-btn i, .pred-chip i { background: transparent; color: #999; }
.pred-slot-btn:hover, .pred-chip:hover { background: #e8e8e8; }
.pred-slot-btn.active {
  background: #ffeb3b;
  color: #b71c1c;
  border-color: #fbc02d;
  border-bottom: 2px solid #f9a825;
  box-shadow: none;
  text-shadow: none;
}
.pred-chip.active {
  background: #fff;
  color: #f00;
  border-color: #ddd;
  border-bottom: 2px solid #f00;
  box-shadow: none;
  text-shadow: none;
}
.pred-slot-btn.active i, .pred-chip.active i { background: transparent; color: #f00; }

/* 档位标题条 → 白盒化 */
.pred-slot-title {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
}

/* ── 资料块（目标站 .white-box 包裹；「彩库论坛」绿横幅维持已复刻样式）──────── */
.pred-block {
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
}
/* 行内格式（期号:内容 开:号）：目标站 type/*.js 用微软雅黑 18px 加粗 */
.pred-inline { font-size: 18px; }

/* 资料表：表头居中、td 居中 #ddd 边（.num 与红绿蓝行着色维持现状，
   与目标站各源表自带的彩色内容一致） */
.pred-table th {
  text-align: center;
  border: 1px solid #007000;
  letter-spacing: 0;
}
.pred-table td {
  text-align: center;
  border: 1px solid #ddd;
}
.pred-table tbody tr:hover { background: transparent; }

/* 本站统计表头沿用绿色（c0~c7 行配色维持） */

/* 命中率胶囊对齐目标站配色（红/蓝/绿系） */
.pred-rate.hi { background: #009933; border-color: #007700; }
.pred-rate.mid { background: #e37400; border-color: #b65a00; }

/* 资料免责条 → 灰盒 */
.pred-disclaimer {
  background: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 5px;
  color: #999;
}

/* ── 号码属性对照表（目标站 .cgi-zs：灰头 + 红左条标题；表头绿）────────────── */
.ref-head {
  background: #f8f8f8;
  color: #000;
  border-left: 4px solid #f00;
}
.ref-toggle { color: #999; }
.ref-body { background: #fff; }
.ref-table th {
  background: #009900;
  color: #fff;
  border: 1px solid #007000;
}
.ref-gname { background: #f8f8f8; border: 1px solid #ddd; color: #000; }

/* ── 弹窗（目标站 .xz-tan-box：白底 10px 圆角；按钮 #019c3a 绿胶囊）────────── */
.entry-popup-box { border-radius: 10px; }
.entry-popup-title { background: #f00; }
.entry-popup-foot button {
  background: #019c3a;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 10px 26px;
}
.entry-popup-foot button:hover { background: #01832a; }

/* ── 浮动工具 / 资料导航 → 目标站绿 ───────────────────────────────────────── */
.ft-btn {
  border-color: #019c3a;
  color: #019c3a;
  background: #fff;
}
.ft-btn:active { background: #019c3a; color: #fff; }
.ft-nav-head { background: linear-gradient(90deg, #06ae44, #019c3a); }
.ft-nav-item { border-color: #ddd; color: #000; }
.ft-nav-item.ft-nav-ref { color: #f00; background: #fff5f5; border-color: #eec2c2; }

/* ── 页脚（目标站 .cgi-foot：灰字 14px 居中）──────────────────────────────── */
.footer {
  background: transparent;
  color: #999;
  font-size: 14px;
  padding: 20px 10px;
}
.footer a { color: #019c3a; }
.disclaimer { color: #999; border-top: 1px solid #ddd; }

/* ── 通用按钮（目标站 .cgi-input-btn：20px 胶囊）── 仅作用前台少量按钮 ────── */
#sscToggle, #simReplayBtn { border-radius: 20px; border: 1px solid #ddd; }

/* =============================================================================
   手机自适应（≤480px / ≤360px）
   目标：窄屏不横向溢出、按钮与导航够手指点、底部导航条不遮挡内容。
   ============================================================================= */
@media (max-width: 480px) {
  body { font-size: 15px; }
  .container { padding: 0 8px 12px; }
  .site-header, .banner-poster, .marquee-wrap, .brand-row { width: calc(100% - 16px); }
  /* 区块标题：字收一档，避免「历史开奖」等被切角挤到换行 */
  .block-title,
  .pred-section .block-title { font-size: 16px; line-height: 34px; padding: 0 16px; }
  .block-title::before, .block-title::after { border-top-width: 35px; }
  /* 开奖球：手机上再收一点，保证 7 个球 + 加号仍在一行 */
  .balls-row { gap: clamp(9px, 3.4vw, 16px); }
  .big-ball { width: clamp(30px, 10.5vw, 48px); height: clamp(30px, 10.5vw, 48px); }
  .big-ball .bn { font-size: clamp(14px, 4vw, 20px); }
  /* 快捷按钮：2 行 × 2 个更好按 */
  .kjjl-con ul li { width: 50%; }
  .result-meta { height: auto; line-height: 1.6; padding: 4px 10px; }
  .freq-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}
@media (max-width: 360px) {
  .tab { font-size: 15px; padding: 10px 2px; }
  .kjjl-con ul li { width: 100%; }
  .kjjl-con ul li a { margin: 4px 6px; }
}