/* =====================================================================
   ui-theme.css · 全站视觉统一层
   ---------------------------------------------------------------------
   设计原则
   1. 只改「外观」：颜色 / 圆角 / 阴影 / 字重 / 层次，不动任何宽高与水平内边距
      —— 走势图表格宽度、分析页「前N」列数（fitSlots）都靠测量宽度得来，
         一旦动了水平尺寸就会少列，所以这里一律不碰。
   2. 需要描边但不占宽度的地方，用 box-shadow: inset（上一版 border-left 的教训）
   3. 加载顺序在所有业务 CSS 之后，选择器优先级不够就加一层父级，尽量不用 !important
   ===================================================================== */

/* ---------------------------------------------------------------- 1. 令牌 */
:root{
  /* 主色：从「亮蓝 #2563eb」压深半档到 #2a5fd5 —— 明度降下来后
     白字按钮不再像糖果，配黄条也不打架。蓝只留给「可点」的东西。 */
  --ui-brand:#2a5fd5;
  --ui-brand-d:#1e4bad;
  --ui-brand-l:#eef2fd;
  --ui-brand-l2:#d8e2fa;

  /* 中性墨色：去掉原来的蓝味（slate），换纯中性灰，避免全站发蓝 */
  --ui-ink:#111827;
  --ui-ink2:#374151;
  --ui-ink3:#6b7280;
  --ui-ink4:#9ca3af;

  --ui-line:#e5e7eb;
  --ui-line2:#eef0f3;
  --ui-line3:#d9dee6;

  /* 页面底：偏蓝的 #f1f4f9 → 中性 #f5f6f8，卡片浮起来更干净 */
  --ui-bg:#f5f6f8;
  --ui-card:#ffffff;

  --ui-warm:#e08a00;
  --ui-warm-l:#fdf8ef;
  --ui-cool-l:#f2f7fd;

  --ui-r:12px;
  --ui-r-sm:8px;
  --ui-shadow:0 1px 2px rgba(15,23,42,.04), 0 2px 6px rgba(15,23,42,.05);
  --ui-shadow-lg:0 4px 16px rgba(15,23,42,.08);
}

/* ---------------------------------------------------------------- 2. 基础 */
html,body{
  background:var(--ui-bg);
  color:var(--ui-ink2);
  /* 刻意沿用原站字体栈（微软雅黑打头）：换成 system-ui 后中文实际字宽会变，
     实测整张走势图被撑宽 7px，会多出一点横向滚动，不值得 */
  font-family:"Microsoft YaHei UI","Microsoft YaHei","PingFang SC","Hiragino Sans GB",Arial,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
::selection{background:rgba(42,95,213,.16)}

/* 细滚动条 */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{
  background:#cbd5e1;border-radius:8px;
  border:2px solid transparent;background-clip:content-box;
}
*::-webkit-scrollbar-thumb:hover{background:#a8b6c8;background-clip:content-box}
*::-webkit-scrollbar-corner{background:transparent}

/* ---------------------------------------------------------------- 3. 顶栏外壳 */
.tgpt-top{
  background:var(--ui-card);
  border:1px solid var(--ui-line);
  border-radius:var(--ui-r);
  box-shadow:var(--ui-shadow);
  padding-top:8px;
  padding-bottom:8px;
  margin-bottom:8px;
}
/* 标题行：加一条淡分隔，让「标题 / 模块区」分层 */
.tgpt-top .tgpt-head{
  padding-bottom:5px;
  border-bottom:1px solid var(--ui-line2);
  margin-bottom:5px;
}
.tgpt-brand{
  color:var(--ui-brand);
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.2px;
}
.tgpt-title{color:var(--ui-ink);font-size:12.5px;font-weight:600}
.tgpt-iss{
  color:#c2410c;
  background:#fff7ed;
  border:1px solid #fed7aa;
  border-radius:999px;
  font-weight:600;
  font-size:11px;
  letter-spacing:.2px;
  font-variant-numeric:tabular-nums;
}

/* 四个模块：交替冷暖，色值压到「几乎白」，靠 3px 顶条 + 内描边做识别 */
.tgpt-mod{
  border-radius:var(--ui-r-sm);
  transition:background .18s ease;
}
/* 一条 background 简写搞定「3px 顶条 + 近白底」，避免简写与单独属性互相覆盖 */
.tgpt-mod:nth-of-type(1),
.tgpt-mod:nth-of-type(3){
  background:
    linear-gradient(90deg,#f0b429,#f8d070) 0 0/100% 3px no-repeat,
    linear-gradient(180deg,#fdfbf6 0%,#fefdfb 70%,#fff 100%);
  box-shadow:inset 0 0 0 1px #f2ebe0;
}
.tgpt-mod:nth-of-type(2),
.tgpt-mod:nth-of-type(4){
  background:
    linear-gradient(90deg,#3b82f6,#8ab6f9) 0 0/100% 3px no-repeat,
    linear-gradient(180deg,#f8fbff 0%,#fcfdff 70%,#fff 100%);
  box-shadow:inset 0 0 0 1px #e6eff8;
}
.tgpt-mods{background:transparent}
.tgpt-vline{background:var(--ui-line2)}

.tgpt-mtit{
  color:var(--ui-ink);
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.2px;
  position:relative;
  padding-left:9px;
}
/* 模块标题前的小色块：绝对定位，不占宽度也不推挤兄弟元素 */
.tgpt-mtit::before{
  content:"";
  position:absolute;left:0;top:50%;
  width:3px;height:11px;margin-top:-5.5px;
  border-radius:2px;background:#cbd5e1;
}
.tgpt-mod:nth-of-type(1) .tgpt-mtit::before,
.tgpt-mod:nth-of-type(3) .tgpt-mtit::before{background:#f0b429}
.tgpt-mod:nth-of-type(2) .tgpt-mtit::before,
.tgpt-mod:nth-of-type(4) .tgpt-mtit::before{background:#3b82f6}
.tgpt-sub{color:var(--ui-ink3);font-size:11.5px;font-weight:500}
.tgpt-sub2{color:var(--ui-warm);font-weight:700}
.tgpt-lbl{color:var(--ui-ink3)}
.tgpt-tip{color:var(--ui-ink4);font-size:11px;line-height:1.5}

/* ---------------------------------------------------------------- 4. 按钮 / 分段 / 输入 */
.tgpt-btn{
  background:var(--ui-brand);
  border:1px solid var(--ui-brand);
  border-radius:7px;
  color:#fff;
  font-weight:600;
  transition:background .15s,border-color .15s,box-shadow .15s,transform .06s;
  box-shadow:0 1px 2px rgba(42,95,213,.18);
}
.tgpt-btn:hover{background:var(--ui-brand-d);border-color:var(--ui-brand-d)}
.tgpt-btn:active{transform:translateY(.5px)}
.tgpt-btn-lite{
  background:#fff !important;
  color:var(--ui-brand) !important;
  border:1px solid var(--ui-brand-l2) !important;
  box-shadow:none;
}
.tgpt-btn-lite:hover{background:var(--ui-brand-l) !important;border-color:#c2d0f2 !important}
.tgpt-ind{background:#fff;color:var(--ui-brand);border:1px solid var(--ui-brand-l2);box-shadow:none}
.tgpt-ind:hover{background:var(--ui-brand-l);border-color:#c2d0f2}

/* 分段按钮组（选位 / 除数 / 彩票） */
.tgpt-grp{
  border:1px solid var(--ui-line3);
  border-radius:8px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 1px 1px rgba(15,23,42,.02);
}
.tgpt-grp b{
  color:var(--ui-ink3);
  border-right:1px solid var(--ui-line2);
  font-weight:500;
  transition:background .14s,color .14s;
}
.tgpt-grp b:hover{background:var(--ui-brand-l);color:var(--ui-brand)}
.tgpt-grp b.on{
  background:var(--ui-brand);
  color:#fff;
  font-weight:600;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.12);
}
.tgpt-grp b.on:hover{background:var(--ui-brand-d);color:#fff}

/* 和值过滤 8 键：药丸改成圆角矩形，视觉更整 */
.tgpt-grid b{
  background:#fff;
  border:1px solid var(--ui-line3);
  border-radius:7px;
  color:var(--ui-ink3);
  font-weight:500;
  transition:background .14s,color .14s,border-color .14s;
}
.tgpt-grid b:hover{border-color:#b7c8ec;color:var(--ui-brand);background:var(--ui-brand-l)}
.tgpt-grid b.on{
  background:var(--ui-brand);
  border-color:var(--ui-brand);
  color:#fff;
  font-weight:600;
  box-shadow:0 1px 3px rgba(42,95,213,.28);
}

/* 下拉与输入框（走势图页的 el-input 也吃这条） */
.tgpt-aisel,
.tgpt-top select{
  border:1px solid var(--ui-line3);
  border-radius:7px;
  background:#fff;
  color:var(--ui-ink2);
  transition:border-color .15s,box-shadow .15s;
}
.tgpt-aisel:hover,.tgpt-top select:hover{border-color:#b7c8ec}
.tgpt-aisel:focus,.tgpt-top select:focus{
  outline:none;border-color:var(--ui-brand);
  box-shadow:0 0 0 3px rgba(42,95,213,.12);
}
.el-input__inner{
  border-radius:7px !important;
  border-color:var(--ui-line3) !important;
  color:var(--ui-ink2) !important;
}
.el-input__inner:focus{
  border-color:var(--ui-brand) !important;
  box-shadow:0 0 0 3px rgba(42,95,213,.12) !important;
}
.el-checkbox__label{color:var(--ui-ink3) !important;font-weight:400}
.el-checkbox__input.is-checked+.el-checkbox__label{color:var(--ui-brand) !important}
.el-checkbox__input.is-checked .el-checkbox__inner{
  background:var(--ui-brand) !important;border-color:var(--ui-brand) !important;
}

/* 原站按钮（上页/下页/确定/默认/自定义/放大缩小…） */
.btn-pc-d{
  border-radius:7px;
  border:1px solid var(--ui-line3);
  background:#fff;
  color:var(--ui-ink2);
  font-weight:400;
  transition:background .14s,color .14s,border-color .14s;
}
.btn-pc-d:hover{background:var(--ui-brand-l);border-color:#c2d0f2;color:var(--ui-brand)}
.btn-pc-d:active{background:var(--ui-brand-l2)}

/* ---------------------------------------------------------------- 5. 走势图表格 */
/* 表头：去掉发灰的 #f0f0f0，改冷白。
   做两级层次：分组标题（百位/十位/个位）深一档，下面的 0-9 细项浅一档，
   扫表时先看到分组、再看细项，不会糊成一片。
   注意：这里刻意不动 font-weight —— 加粗会让「开奖时间」这类中文变宽，
   实测整张表被撑宽 7px，会引出横向滚动，不值得。 */
#app .tbk table th{
  background:#dfe5ee;
  color:#39465a;
  border-color:var(--ui-line3);
}
#app .tbk table thead tr.thbg1 th,
#app .tbk table thead tr.thbg2 th{
  background:#f0f3f7;
  color:#546070;
}
/* 数据格：只柔化网格线，不动背景（背景由 JS 按分区上色） */
#app .tbk table td{border-color:#dde5ef}
#app .tbk table{border-color:var(--ui-line3)}

/* 分区底色柔化：荧光黄 → 奶油，亮蓝 → 雾蓝（色相不动，只降饱和）
   v2 再收一档：黄不再「发甜」，蓝不再「发荧光」，大表格铺满时眼睛不累 */
.light-square .b-1,.light-big .b-1,.light-small .b-1{background-color:#f6fbfe}
.light-square .b-2,.light-big .b-2,.light-small .b-2,
.light-square .b-5,.light-big .b-5,.light-small .b-5{background-color:#fbf7ec}
.light-square .b-2,.light-big .b-2,.light-small .b-2{color:#a8853c}
.light-square .b-3,.light-big .b-3,.light-small .b-3,
.light-square .b-6,.light-big .b-6,.light-small .b-6{background-color:#eaf3fb}
.light-square .b-4,.light-big .b-4,.light-small .b-4{background-color:#fafbfd}

/* 鼠标划过整行时，原站把「期号」那格刷成深蓝底白字（#3d66ad），很跳。
   改成浅蓝底深蓝字，跟这套配色统一 */
#app .tbk:not(.nohover) tbody tr:not(.tfoot):not(#tr_row):hover td:nth-child(2){
  background-color:#dbeafe !important;
  color:#1e4bad !important;
}

/* 表头分组大字（百位 / 十位 / 个位 / 指标区…）—— 不加 letter-spacing，
   0.2px 的间距乘以几十个表头会把整张表撑宽 5px */

/* 工具条那行的文字 */
.chart-pc i{color:var(--ui-ink3);font-style:normal}
.chart-pc .fcolA{color:var(--ui-ink4)}

/* 表缩放条 */
.tablezoom .zoombox a{color:var(--ui-ink3);border-radius:6px}
.tablezoom .zoombox a:hover{background:var(--ui-brand-l);color:var(--ui-brand)}

/* ---------------------------------------------------------------- 6. 分析页 */
body{background:var(--ui-bg)}

/* 顶栏 A/B/C 三栏：从「满铺黄蓝」改成「近白 + 顶部色条」，和走势图页顶栏同一套语言。
   注意：只覆盖 .an-zone，不动 --az-y-bg / --az-b-bg 变量，
   因为表格里 A~H 的分区底色也吃这套变量，那是已确认的配色，不能连坐。 */
#anTopWrap .an-zone{
  border-radius:var(--ui-r-sm);
}
#anTopWrap .an-z-y{
  background:linear-gradient(180deg,#fffdf8 0%,#fffefc 70%,#fff 100%);
  border-color:#f1e9db;
  box-shadow:inset 0 0 0 1px rgba(240,180,41,.06);
}
#anTopWrap .an-z-b{
  background:linear-gradient(180deg,#f9fcff 0%,#fdfeff 70%,#fff 100%);
  border-color:#e4edf9;
  box-shadow:inset 0 0 0 1px rgba(59,130,246,.05);
}
#anTopWrap .an-z-y::before{background:linear-gradient(90deg,#f0b429,#f8d070)}
#anTopWrap .an-z-b::before{background:linear-gradient(90deg,#3b82f6,#8ab6f9)}
#anTopWrap .an-t3-tit{color:var(--ui-ink);font-weight:700;font-size:12px}
#anTopWrap .an-t3-sub{color:var(--ui-ink4);font-weight:400}

/* 页签栏：白卡 + 胶囊页签 */
.an-tabsbar{
  background:var(--ui-card);
  border:1px solid var(--ui-line);
  border-radius:var(--ui-r);
  box-shadow:var(--ui-shadow);
}
.an-tab{
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:var(--ui-ink3);
  font-weight:500;
  transition:background .15s,color .15s,box-shadow .15s;
}
.an-tab:hover{background:var(--ui-brand-l);color:var(--ui-brand)}
.an-tab.on{
  background:var(--ui-brand);
  border-color:var(--ui-brand);
  color:#fff;
  font-weight:600;
  box-shadow:0 1px 3px rgba(42,95,213,.28);
}
.an-back{color:var(--ui-brand);font-weight:500}
.an-back:hover{color:var(--ui-brand-d)}

/* 参数带 */
.an-pbar{
  background:var(--ui-card);
  border:1px solid var(--ui-line);
  border-radius:var(--ui-r);
  box-shadow:var(--ui-shadow);
}
.an-pbar b{
  border-radius:7px;
  border:1px solid var(--ui-line3);
  background:#fff;
  color:var(--ui-ink3);
  font-weight:500;
  transition:background .14s,color .14s,border-color .14s;
}
.an-pbar b:hover{border-color:#b7c8ec;color:var(--ui-brand);background:var(--ui-brand-l)}
.an-pbar b.on{
  background:var(--ui-brand);
  border-color:var(--ui-brand);
  color:#fff;
  font-weight:600;
}

/* 图表卡 */
.an-chartbox{
  background:var(--ui-card);
  border:1px solid var(--ui-line);
  border-radius:var(--ui-r);
  box-shadow:var(--ui-shadow);
}
.an-chart-title{color:var(--ui-ink);font-weight:600}

/* 表格卡（E 区） */
.an-e5box{
  background:var(--ui-card);
  border:1px solid var(--ui-line);
  border-radius:var(--ui-r);
  box-shadow:var(--ui-shadow);
}
.an-e5-title{color:var(--ui-ink);font-weight:700}
.an-e5-hint{color:var(--ui-ink4)}
.an-e5-nav b{
  border-radius:7px;
  border:1px solid var(--ui-line3);
  background:#fff;
  color:var(--ui-ink3);
  font-weight:500;
  transition:background .14s,color .14s,border-color .14s;
}
.an-e5-nav b:hover{border-color:#b7c8ec;color:var(--ui-brand)}
.an-e5-nav b.on{background:var(--ui-brand);border-color:var(--ui-brand);color:#fff}
.an-e5-jump input{
  border:1px solid var(--ui-line3);
  border-radius:7px;
  transition:border-color .15s,box-shadow .15s;
}
.an-e5-jump input:focus{
  border-color:var(--ui-brand);
  box-shadow:0 0 0 3px rgba(42,95,213,.12);
}
.an-e5-jump b{
  background:#fff;
  border:1px solid var(--ui-line3);
  border-radius:7px;
  color:var(--ui-ink3);
}
.an-e5-jump b:hover{background:var(--ui-brand);border-color:var(--ui-brand);color:#fff}

/* 分析页表格：网格线柔化 + 表头压深一档（分区底色保持原样） */
.an-table th,.an-table td{border-color:#e2e8f2}
.an-table thead th{color:var(--ui-ink2)}
.an-table th.an-cmpgroup{background:#e8f1ff;color:var(--ui-brand)}
.an-table th.an-cmpth.on{background:var(--ui-brand)}
.an-table td.an-curv{background:#fffaf0}

/* 统计面板 */
.an-stattable td{color:var(--ui-ink2)}
.an-stattable tr:first-child td{color:var(--ui-ink3)}
.an-note{color:var(--ui-ink4)}

/* AI 卡 */
#anAiBox{
  background:var(--ui-card);
  border:1px solid var(--ui-line) !important;
  border-radius:var(--ui-r) !important;
  box-shadow:var(--ui-shadow);
}
.an-aitab{color:var(--ui-ink3);border-radius:7px}
.an-aitab.on{background:var(--ui-brand);color:#fff}
.an-aiq,.an-ai-in,.an-aigo{
  border-radius:7px;
}

/* ---------------------------------------------------------------- 7. 登录门 */
#tgate{
  background:
    radial-gradient(1200px 600px at 15% 0%, #1e3a8a 0%, transparent 55%),
    radial-gradient(900px 500px at 85% 100%, #0f766e 0%, transparent 50%),
    linear-gradient(160deg,#0b1220 0%,#111c33 55%,#0b1220 100%);
}
#tgate .tgate-card{
  border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06);
}
#tgate .tgate-logo{color:var(--ui-ink);font-size:19px;letter-spacing:.4px}
#tgate .tgate-sub{color:var(--ui-ink4)}
#tgate input{
  border-radius:10px;
  border-color:var(--ui-line3);
  background:#f8fafc;
}
#tgate input:focus{
  border-color:var(--ui-brand);
  background:#fff;
  box-shadow:0 0 0 3px rgba(42,95,213,.12);
}
#tgate .tgate-btn{
  background:var(--ui-brand);
  border-radius:10px;
  font-weight:600;
  box-shadow:0 2px 8px rgba(42,95,213,.28);
}
#tgate .tgate-btn:hover{background:var(--ui-brand-d)}
#tgate .tgate-msg{color:#dc2626}
#tgate .tgate-tip{color:#94a3b8}

/* ---------------------------------------------------------------- 8. 小屏微调 */
@media (max-width:768px){
  .tgpt-top{border-radius:10px}
  .tgpt-mod{border-radius:7px}
  .an-tabsbar,.an-pbar,.an-chartbox,.an-e5box{border-radius:10px}
}