/* =====================================================================
   walktabs.css · 走势图页「页签化」改造（样图用）
   ---------------------------------------------------------------------
   1) 顶栏三盒：① 彩票选择 / ② 选位 / ③ 数据管理（原 ①②③④ 四盒）
   2) 视图页签：分位走势 / 除3余数 / 除4余数 / 和值走势
      —— 对应原来模块②的「除数」与模块③的「和值分析」
   3) 和值过滤：从独占一格改为页签行右侧的浮层（原模块③的 8 个键）
   4) AI 解读：从顶栏 ④ 挪到走势图下方，去掉「预测」按钮
   颜色统一走 ui-theme.css 的 --ui-* 令牌，本文件只管几何尺寸
   ===================================================================== */

/* ---------------------------------------------------------- 1. 顶栏三盒 */
.wt-mods{align-items:stretch}
/* 顶栏整张卡收到视口宽度以内：表格 1509px 比 1440 视口宽，
   若不收，右对齐的「和值过滤 / AI 解读」会被挤出屏幕右边（原有顶栏也有这个毛病） */
.tgpt-top{box-sizing:border-box;max-width:calc(100vw - 16px)}
.wt-mods .tgpt-mod:nth-of-type(1){flex:0 0 300px}
.wt-mods .tgpt-mod:nth-of-type(2){flex:0 1 auto;min-width:186px;max-width:min(440px,44vw)}
.wt-mods .tgpt-mod:nth-of-type(3){flex:1 1 auto}
.wt-mods .tgpt-body{justify-content:flex-start}
/* ③ 数据管理够宽，把「录入/导入/导出/更新」与「删除/清空/恢复」并成一行，
   顶栏因此矮一档（原来固定两行，白占 27px 高度） */
#hzLockBar #tgbar{flex-wrap:wrap !important}
#hzLockBar #tgbar .tgrow{flex:0 1 auto !important;width:auto !important;flex-wrap:wrap !important;gap:4px !important}
#hzLockBar #tgbar .tgrow:empty{display:none}
.wt-mods #tgDmLine{min-height:18px}

/* 修 ui-theme 遗留 bug：.tgpt-btn 的 color:#fff !important 把 .tgpt-ind 的字也刷白了，
   结果「📊 分析工具 ›」入口在线上是白底白字，完全看不见 */
.tgpt-ind{color:var(--ui-brand,#2a5fd5) !important}

/* ---------------------------------------------------------- 2. 页签行 */
.wt-tabsbar{
  position:relative;flex:1 1 100%;width:100%;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:6px 0 0;padding:7px 0 0;
  border-top:1px solid var(--ui-line2,#eef0f3);
}
.wt-tabs{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.wt-tabsbar .an-tab{
  display:inline-flex;align-items:center;
  padding:4px 15px;margin-right:2px;
  font-size:12.5px;font-weight:600;line-height:18px;
  cursor:pointer;user-select:none;white-space:nowrap;
}
/* 当前正在看哪一个面板：实心蓝，有且只有一个 */
.wt-tabs .an-tab.on{background:var(--ui-brand,#2a5fd5);border-color:var(--ui-brand,#2a5fd5);color:#fff;font-weight:700}
/* 页签上的状态小标签（分组分析·大小 / 和值过滤·除4余2） */
.wt-tag{display:none}
.wt-tag:not(:empty){
  display:inline-block;margin-left:6px;font-weight:700;font-size:11.5px;
  padding:0 6px;border-radius:8px;line-height:17px;
  background:#e8effb;color:var(--ui-brand,#2a5fd5);
}
.wt-tabs .an-tab.on .wt-tag{background:rgba(255,255,255,.24);color:#fff}
/* 和值分析不可用（只选了 1 位）时 */
.wt-tabs .an-tab.wt-dis{opacity:.4;cursor:default}

/* 藏在屏外的原控件：topbar.js / hzfx.js 按 id 找它们，不能删也不能 display:none */
.wt-hidden{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}

/* 参数带里的一屏：点哪个页签显示哪一屏 */
.wt-pane{display:flex;align-items:center;gap:9px;flex-wrap:wrap;width:100%}
.wt-pbl{flex:none;font-size:12px;color:var(--ui-ink2,#4b5563)}
/* 同一屏里第二组标签（分组屏的「连线」）跟前一组拉开一点距离 */
.wt-pbl2{margin-left:10px;padding-left:11px;border-left:1px solid var(--ui-line2,#eef0f3)}
.wt-pgrp{display:inline-flex;flex-wrap:wrap;gap:5px}
.wt-pgrp b{
  display:block;padding:0 13px;height:25px;line-height:23px;
  box-sizing:border-box;
  font-size:12px;font-weight:600;color:#3f4a5a;white-space:nowrap;
  background:#fff;border:1px solid #d5dde8;border-radius:6px;
  cursor:pointer;user-select:none;
}
.wt-pgrp b:hover{background:#f2f7ff;color:var(--ui-brand,#2a5fd5);border-color:#a9c6ef}
.wt-pgrp b.on{background:var(--ui-brand,#2a5fd5);color:#fff;font-weight:700;border-color:var(--ui-brand,#2a5fd5)}

.wt-phint{font-size:11.5px;color:#8b95a4;line-height:1.5}

.wt-right{margin-left:auto;display:flex;align-items:center;gap:8px}

/* 页签行右侧药丸（和值过滤 / AI 解读） */
.wt-chip{
  display:inline-flex;align-items:center;gap:6px;
  height:26px;padding:0 11px;
  border:1px solid var(--ui-line3,#d9dee6);border-radius:8px;background:#fff;
  color:var(--ui-ink2,#374151);font-size:12px;font-weight:600;
  cursor:pointer;user-select:none;white-space:nowrap;
  transition:border-color .14s,color .14s,background .14s;
}
.wt-chip:hover{border-color:#b7c8ec;color:var(--ui-brand,#2a5fd5);background:var(--ui-brand-l,#eef2fd)}
.wt-chip.on{border-color:#c2d0f2;background:var(--ui-brand-l,#eef2fd);color:var(--ui-brand,#2a5fd5)}
.wt-chip .wt-v{font-weight:700;color:var(--ui-ink3,#6b7280)}
.wt-chip.on .wt-v{color:var(--ui-brand,#2a5fd5)}
.wt-chip .wt-caret{font-size:10px;opacity:.6}

.wt-filwrap{position:relative;display:inline-flex;align-items:center}

/* 和值过滤浮层 */
.wt-pop{
  position:absolute;right:0;top:calc(100% + 9px);z-index:1300;
  width:352px;box-sizing:border-box;padding:11px 13px 9px;
  background:#fff;border:1px solid var(--ui-line3,#d9dee6);border-radius:10px;
  box-shadow:var(--ui-shadow-lg,0 6px 20px rgba(15,23,42,.14));
}
.wt-pop-t{font-size:12px;font-weight:700;color:var(--ui-ink,#111827);margin-bottom:9px}
.wt-pop-t i{font-style:normal;font-weight:400;color:var(--ui-ink4,#9ca3af);margin-left:6px;font-size:11px}
.wt-pop .tgpt-grid{grid-template-columns:repeat(4,1fr);gap:5px 6px}
.wt-pop .tgpt-grid b{grid-column:auto;height:24px;line-height:24px;border-radius:7px;font-size:12px}
.wt-pop-f{display:flex;align-items:center;gap:8px;margin-top:9px;padding-top:7px;border-top:1px solid var(--ui-line2,#eef0f3)}
.wt-pop-f .tgpt-tip{margin-left:0;white-space:normal}
.wt-pop-f .wt-pop-ok{margin-left:auto}

/* ---------------------------------------------------------- 3. AI 解读卡（走势图下方） */
/* 几何尺寸沿用分析页 AI 卡（那份 CSS 不在本页加载，这里补一份） */
.an-aibox{margin:10px 8px 0;background:#fff;border:1px solid #cfe0f8;border-radius:6px;overflow:hidden}
.an-aihead{
  display:flex;align-items:center;gap:10px;padding:6px 11px;
  background:linear-gradient(90deg,#eef5ff,#f7fbff);border-bottom:1px solid #e0eaf7;
}
.an-aihead .an-ait{font-weight:700;color:#1f4e8c;font-size:13px}
.an-aihead .an-aisub{font-size:11.5px;color:#8b95a4}
.an-aihead .an-aiclose{margin-left:auto;font-size:12px;color:#1678ff;cursor:pointer}
.an-aipane{padding:0}
.an-aibar{display:flex;align-items:center;gap:8px;padding:8px 11px 5px;flex-wrap:wrap}
.an-aibar .an-pbl{color:#5b6577;flex:none;font-size:12px}
.an-aibar .an-aiq{
  flex:1 1 320px;min-width:180px;height:28px;border:1px solid #cfd8e3;border-radius:4px;
  padding:0 9px;font-size:12.5px;color:#333;background:#fff;
}
.an-aibar .an-aibtn{
  display:inline-block;height:28px;line-height:28px;padding:0 14px;border-radius:4px;
  background:#1678ff;color:#fff;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;
}
.an-aibar .an-aibtn:hover{background:#0a68ea}
.an-aibar .an-aibtn.ghost{background:#fff;border:1px solid #cfd8e3;color:#455;font-weight:600}
.an-aibar .an-airange{height:26px;border:1px solid #cfd8e3;border-radius:4px;background:#fff;font-size:12px;color:#455}
.an-aimodels{display:flex;align-items:center;gap:6px;padding:0 11px 7px;flex-wrap:wrap;font-size:12px;color:#5b6577}
.an-mchip{
  display:inline-flex;align-items:center;gap:4px;border:1px solid #cfe0f8;background:#f6faff;color:#2b5b96;
  border-radius:12px;padding:1px 9px;font-size:12px;font-weight:600;cursor:pointer;user-select:none;
}
.an-mchip.on{background:#1678ff;border-color:#1678ff;color:#fff}
.an-mchip i{font-style:normal;font-size:11px;opacity:.85}
.an-aigrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:8px;padding:0 11px 11px}
.an-aimc{border:1px solid #e0e8f4;border-radius:6px;background:#fcfdff;display:flex;flex-direction:column;min-height:104px}
.an-aimh{display:flex;align-items:center;gap:6px;padding:5px 9px;border-bottom:1px solid #eef3fa;background:#f7faff;border-radius:5px 5px 0 0}
.an-aimh b{font-size:12px;color:#26456f}
.an-aimh .an-aimt{margin-left:auto;font-size:11px;color:#95a1b3}
.an-aimb{padding:7px 9px;font-size:12px;line-height:1.75;color:#3a4557;flex:1 1 auto;max-height:150px;overflow:auto}
.an-aimb p{margin:0 0 4px}
.an-aimf{display:flex;gap:10px;padding:2px 9px 6px;font-size:11.5px;color:#1678ff}
.an-aimf a{cursor:pointer}
.an-aiempty{grid-column:1/-1;color:#95a1b3;font-size:12px;padding:8px 2px}
.an-aifoot{display:flex;align-items:center;gap:10px;padding:0 11px 9px;font-size:11.5px;color:#95a1b3}
.an-aifoot a{color:#1678ff;cursor:pointer}

/* ---------------------------------------------------------- 4. 小屏 */
/* ---------------------------------------------------------- 2c. 分组模式下的表格
   分组把 0~9 十列重新排序，原来那套「按号码着色」要让位给「按组着色」；
   四色对应 0~3 组（012路 用前 3 色，0123路 四色全用上） */
.wt-grpmode td.tg-g0{background-color:#dbe9fb !important}
.wt-grpmode td.tg-g1{background-color:#fbeecd !important}
.wt-grpmode td.tg-g2{background-color:#d9f2e3 !important}
.wt-grpmode td.tg-g3{background-color:#e9e2f8 !important}
.wt-grpmode th.tg-g0{background-color:#c9ddf8 !important;color:#1e4bad !important}
.wt-grpmode th.tg-g1{background-color:#f6e2b4 !important;color:#8a5a00 !important}
.wt-grpmode th.tg-g2{background-color:#c9e9d6 !important;color:#1c6b43 !important}
.wt-grpmode th.tg-g3{background-color:#dcd2f2 !important;color:#4a3a86 !important}
/* 分组改了列序，脚本会按新列把连线重画一遍（yc_drawLine → draw_cLine）。
   「连线 显示/隐藏」留着自己拨：想看清色块分组时可以整片关掉。 */
.tbk.wt-noline #tb_cline,
.wt-noline #tb_cline,
.wt-noline .tb_cline{display:none !important}

@media (max-width:768px){
  .wt-mods .tgpt-mod:nth-of-type(1),
  .wt-mods .tgpt-mod:nth-of-type(2),
  .wt-mods .tgpt-mod:nth-of-type(3){flex:1 1 46%;min-width:46%}
  .wt-tabsbar{flex-wrap:wrap;gap:6px;padding-top:6px}
  .wt-tabs{flex:1 1 100%;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .wt-tabsbar .an-tab{flex:none;padding:4px 11px;font-size:12px}
  .wt-hz{margin-left:0;flex:none}
  .wt-right{margin-left:0;flex:1 1 100%;gap:6px}
  /* 手机：页签一行横滑，AI 入口让位（AI 卡就在表格下方，滚一下就到） */
  .wt-tabsbar{flex-wrap:nowrap;gap:6px;padding-top:6px}
  .wt-tabs{flex-wrap:nowrap;flex:1 1 auto;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .wt-tabs::-webkit-scrollbar{height:0}
  .wt-tabsbar .an-tab{flex:none;padding:4px 12px;font-size:12px}
  .wt-right{display:none}
  /* 手机：条件带一行横滑，不折行（8 个键折三行会把顶栏顶到 450px） */
  .wt-pbar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    gap:7px;padding:5px 8px 5px 8px}
  .wt-pbar::-webkit-scrollbar{height:0}
  .wt-pane{flex-wrap:nowrap;width:max-content;min-width:100%}
  /* 分组这屏键最多（6 个分组键 + 连线开关），手机上允许折成两行，
     否则「连线」被推到屏外，谁也不知道还能往右滑 */
  .wt-pane[data-p="grp"]{flex-wrap:wrap;width:auto;min-width:100%;row-gap:6px}
  .wt-pane[data-p="grp"] .wt-pbl{flex:0 0 auto}
  .wt-pane .wt-phint{display:none}      /* 手机上说明文字让位，只留键 */
  .wt-pgrp{flex-wrap:nowrap;flex:0 0 auto}
  .wt-pgrp b{height:24px;line-height:22px;padding:0 10px;font-size:11.5px}
  .wt-pbl{flex:none}
  .an-aigrid{grid-template-columns:1fr}
  .an-aihead .an-aisub{display:none}
  .an-aibar .an-aiq{flex:1 1 100%}
  .an-aimb{max-height:180px}
}