/* ==========================================================================
   快乐8选五 · 号码分析助手（手机版）
   设计语言：深色玻璃拟态顶栏 + 浅色卡片内容区 + 彩票球视觉元素
   ========================================================================== */

:root {
  --brand: #22315e;
  --brand-2: #3a4d8c;
  --brand-3: #5a6fc0;
  --accent: #d4382f;
  --accent-soft: #fdeceb;
  --gold: #e8a33d;
  --green: #17915a;
  --green-soft: #e6f6ef;
  --blue: #1a63c9;
  --blue-soft: #eaf1fd;

  --bg: #eef1f7;
  --card: #ffffff;
  --card-2: #f7f9fc;
  --line: #e2e7f0;
  --line-2: #eef1f6;

  --txt: #1d2433;
  --txt-2: #5b6577;
  --txt-3: #8d96a8;

  --radius: 14px;
  --radius-s: 10px;
  --shadow: 0 2px 10px rgba(24, 38, 74, .07);
  --shadow-lg: 0 10px 34px rgba(24, 38, 74, .18);

  --appbar-h: 108px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
               "Helvetica Neue", "Source Han Sans SC", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  /* 整页自然滚动：只有一层滚动容器，安卓 WebView 上手势最稳 */
  overflow-x: hidden;
  overflow-y: auto;
}

.hidden { display: none !important; }

/* ==========================================================================
   启动画面
   ========================================================================== */
#splash {
  position: fixed; inset: 0; z-index: 100;
  background: linear-gradient(160deg, #1d2a52 0%, #22315e 42%, #35477f 100%);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .45s ease, visibility .45s;
}
#splash.done { opacity: 0; visibility: hidden; pointer-events: none; }

.splash-inner { text-align: center; padding: 0 32px; width: 100%; max-width: 420px; }

.splash-balls {
  display: flex; justify-content: center; gap: 9px; margin-bottom: 30px;
  flex-wrap: wrap;
}
.sb {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 600 14px/1 var(--mono); color: #fff;
  background: radial-gradient(circle at 32% 28%, #ffffff 0%, rgba(255,255,255,.85) 18%, transparent 42%),
              linear-gradient(150deg, #f0564c, #c62b23);
  box-shadow: 0 5px 14px rgba(0,0,0,.32), inset 0 -3px 7px rgba(0,0,0,.2);
  animation: sbFloat 2.6s ease-in-out infinite;
}
.sb.b2 { animation-delay: .18s; background: radial-gradient(circle at 32% 28%, #fff 0%, rgba(255,255,255,.85) 18%, transparent 42%), linear-gradient(150deg,#f6b64f,#dd8d1c); }
.sb.b3 { animation-delay: .36s; background: radial-gradient(circle at 32% 28%, #fff 0%, rgba(255,255,255,.85) 18%, transparent 42%), linear-gradient(150deg,#4fd08a,#1c9c5e); }
.sb.b4 { animation-delay: .54s; background: radial-gradient(circle at 32% 28%, #fff 0%, rgba(255,255,255,.85) 18%, transparent 42%), linear-gradient(150deg,#6f92f0,#2f57d0); }
.sb.b5 { animation-delay: .72s; background: radial-gradient(circle at 32% 28%, #fff 0%, rgba(255,255,255,.85) 18%, transparent 42%), linear-gradient(150deg,#b48cf2,#7b46d8); }

@keyframes sbFloat {
  0%, 100% { transform: translateY(0) }
  50%      { transform: translateY(-9px) }
}

.splash-title {
  color: #fff; font-size: 21px; font-weight: 700; letter-spacing: .5px;
  margin-bottom: 12px; text-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.splash-sub {
  color: rgba(255,255,255,.72); font-size: 13px; margin-bottom: 26px; min-height: 20px;
}
.splash-bar {
  height: 4px; border-radius: 4px; background: rgba(255,255,255,.16); overflow: hidden;
}
.splash-bar-in {
  height: 100%; width: 8%; border-radius: 4px;
  background: linear-gradient(90deg, #7f9bff, #ffd479);
  transition: width .35s ease;
}

/* ==========================================================================
   顶部栏
   ========================================================================== */
#appbar {
  position: sticky; top: 0; z-index: 20;
  padding-top: var(--safe-t);
  background: linear-gradient(150deg, #24335f 0%, #2c3d72 55%, #35488a 100%);
  box-shadow: 0 3px 14px rgba(20, 30, 60, .24);
}
#appbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--gold) 45%, #4fd08a 75%, #6f92f0);
  opacity: .9;
}

.appbar-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px 7px;
}
.appbar-brand { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; }
.brand-dot {
  width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto;
  background: radial-gradient(circle at 33% 30%, #fff 0%, #ffb3ae 30%, var(--accent) 62%);
  box-shadow: 0 0 0 3px rgba(255,255,255,.13), 0 2px 6px rgba(0,0,0,.3);
}
.brand-name {
  color: #fff; font-size: 15.5px; font-weight: 600; letter-spacing: .3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.icon-btn {
  flex: 0 0 auto; width: 36px; height: 36px; border: 0; border-radius: 11px;
  background: rgba(255,255,255,.12); color: rgba(255,255,255,.92);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .18s, transform .12s;
}
.icon-btn:active { background: rgba(255,255,255,.24); transform: scale(.93); }

.appbar-status {
  padding: 0 15px 9px;
  color: rgba(255,255,255,.74); font-size: 11.5px; line-height: 1.5;
  font-family: var(--mono); letter-spacing: -.2px;
  white-space: normal;
}

/* 标签页横滑 */
.tabs {
  display: flex; gap: 7px; overflow-x: auto; overflow-y: hidden;
  padding: 0 12px 11px;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: 0 0 auto; padding: 6.5px 14px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.86);
  font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer;
  transition: background .18s, color .18s, transform .12s, box-shadow .18s;
}
.tab:active { transform: scale(.95); }
.tab.on {
  background: #fff; color: var(--brand); font-weight: 700;
  border-color: #fff; box-shadow: 0 3px 12px rgba(0,0,0,.22);
}

/* ==========================================================================
   内容区
   ========================================================================== */
#view {
  padding: 12px 12px calc(18px + var(--safe-b));
  /* 不再自身滚动，随整页一起滚，避免嵌套滚动抢手势 */
}

/* ---- LabelFrame → 卡片 ---- */
.card {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); margin-bottom: 12px; overflow: hidden;
  border: 1px solid var(--line-2);
}
.card > .card-hd {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px;
  background: linear-gradient(180deg, #fbfcfe, #f3f6fb);
  border-bottom: 1px solid var(--line);
}
.card-hd-t {
  font-size: 13.5px; font-weight: 700; color: var(--brand);
  line-height: 1.45; flex: 1; min-width: 0;
}
.card-hd-t::before {
  content: ""; display: inline-block; width: 3px; height: 13px; border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--gold));
  margin-right: 8px; vertical-align: -1px;
}
.card-bd { padding: 12px 14px 14px; }

/* ---- 普通 Frame → 行 ---- */
.row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; margin-bottom: 9px;
}
/* ★V9.9.8 第4点：全局排版对齐★
   ① 同一行里的标签与控件基线对齐，标签不再比输入框高半行；
   ② 下拉/输入框在一行内等分剩余宽度且不被压成 0 宽（旧版会出现窄到看不见选中值）；
   ③ 统一控件高度，避免一行里高矮不齐。 */
.row > .lbl { line-height: 1.5; flex: 0 0 auto; }
.row > .sel, .row > .inp, .row > .spin { min-width: 74px; }
.row select, .row input { height: 34px; box-sizing: border-box; }
.row .btn { height: 34px; box-sizing: border-box; }
/* Labelframe 卡片内边距统一，标题不与内容贴死 */
.card-bd > .row:first-child { margin-top: 0; }
.card-hd-t { line-height: 1.5; }
.row:last-child { margin-bottom: 0; }
.row.wide { align-items: flex-start; }

/* ---- 标签 ---- */
.lbl { font-size: 13.5px; color: var(--txt-2); line-height: 1.55; }
.lbl.b { font-weight: 700; }
.lbl.small { font-size: 12px; }
.lbl .hl { color: var(--accent); font-weight: 700; font-family: var(--mono); }

/* ---- 按钮 ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 15px; border-radius: var(--radius-s);
  border: 1px solid var(--line); background: #fff; color: var(--brand);
  font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: transform .1s, box-shadow .18s, background .18s, border-color .18s;
  box-shadow: 0 1px 3px rgba(24,38,74,.06);
  font-family: inherit;
}
.btn:active { transform: scale(.96); background: var(--card-2); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.btn.primary {
  background: linear-gradient(150deg, var(--brand-2), var(--brand));
  border-color: transparent; color: #fff;
  box-shadow: 0 3px 10px rgba(34,49,94,.26);
}
.btn.primary:active { background: linear-gradient(150deg, var(--brand), #1a2547); }

.btn.danger {
  background: linear-gradient(150deg, #e0564c, #c32d24);
  border-color: transparent; color: #fff;
  box-shadow: 0 3px 10px rgba(195,45,36,.24);
}
.btn.danger:active { background: linear-gradient(150deg, #c32d24, #a8231b); }

.btn.ghost { background: var(--card-2); color: var(--txt-2); }
.btn.block { display: flex; width: 100%; }
.btn.big { padding: 12px 18px; font-size: 15px; border-radius: 12px; }

/* v4.5：正文区功能按钮「排成一排 + 整体调小」（用户要求）。
   作用域刻意限定在 .btn-row 内：render.js 只把【引擎控件树里的 button】收进
   .btn-row（render.js:650-657）。弹窗按钮在 .dlg-actions、我的数据页在 .dp-act、
   登录页用 .lg-btn、顶栏用 .icon-btn、页签用 .tab、回到顶部用 #to-top、
   步进器用 .stepper button —— 都不在 .btn-row 里，不会被下面规则命中。
   关键改动：flex 由 1 1 auto（等分撑满整行）改成 0 1 auto（按内容宽度收缩），
   按钮不再被拉宽，一排能放下更多个；再缩小内边距与字号。
   .btn-row 本来就是 flex-wrap:wrap，按钮多时自动换行，不会挤破屏幕。 */
/* ★V9.9.8 第4点：按钮区改【横向滑动】★（用户原话「里面是乱七八糟的按钮，可以把按钮设置成滑动嘛」）
   旧版 flex-wrap:wrap → 按钮多时换行成 2~3 排，每排断在哪里取决于文字长度，
   视觉上就是"乱七八糟"。改成单排横向滑动后：
     · 所有按钮永远在【同一行】，顺序与电脑版一致，不再随机断行；
     · 放不下的部分左右滑动查看（与页签 .tabs 同一交互，用户已习惯）；
     · flex:0 0 auto + white-space:nowrap 保证按钮不被压扁、文字不折断。
   作用域仍限定 .btn-row（只有引擎控件树里的 button 会进这里），
   弹窗/登录/页签/步进器按钮不受影响。 */
.btn-row {
  display: flex; flex-wrap: nowrap; gap: 6px;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* 负外边距+内边距：让滑动区贴到卡片边缘，视觉上像可滑动的通栏 */
  margin: 0 -4px 2px; padding: 2px 4px 6px;
}
.btn-row::-webkit-scrollbar { display: none; }
.btn-row .btn {
  flex: 0 0 auto; min-width: 0;
  padding: 6px 11px; font-size: 12.5px;
  white-space: nowrap;
}
/* 选项区（复选/单选胶囊）同样改单排滑动，避免多行错位 */
.pills {
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  margin: 0 -4px 2px; padding: 2px 4px 6px;
}
.pills::-webkit-scrollbar { display: none; }
.pills > * { flex: 0 0 auto; white-space: nowrap; }

/* ---- 输入框 ---- */
.inp {
  width: 100%; min-width: 0;
  padding: 9px 12px; border-radius: var(--radius-s);
  border: 1.5px solid var(--line); background: #fff; color: var(--txt);
  font-size: 14px; font-family: inherit; line-height: 1.5;
  transition: border-color .18s, box-shadow .18s;
  -webkit-appearance: none; appearance: none;
}
.inp:focus {
  outline: none; border-color: var(--brand-3);
  box-shadow: 0 0 0 3px rgba(90,111,192,.14);
}
.inp:disabled { background: var(--card-2); color: var(--txt-3); }
.inp.mono { font-family: var(--mono); letter-spacing: .3px; }
.inp.short { flex: 0 0 auto; width: 96px; }
.inp.narrow { flex: 0 0 auto; width: 66px; }

textarea.inp {
  width: 100%; flex: 1 1 100%; resize: vertical;
  min-height: 76px; font-family: var(--mono); font-size: 13px; line-height: 1.65;
}

/* ---- 复选 / 单选：胶囊 ---- */
.pills { display: flex; flex-wrap: wrap; gap: 7px; }  /* 单排滑动规则见下方 .pills 覆盖块 */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px;
  border: 1.5px solid var(--line); background: #fff; color: var(--txt-2);
  font-size: 13px; font-weight: 500; cursor: pointer; user-select: none;
  transition: all .16s; white-space: nowrap;
}
.pill:active { transform: scale(.95); }
.pill::before {
  content: ""; width: 15px; height: 15px; border-radius: 4px; flex: 0 0 auto;
  border: 1.5px solid #c7cfdd; background: #fff; transition: all .16s;
}
.pill.on {
  border-color: var(--brand-3); background: var(--blue-soft);
  color: var(--brand); font-weight: 700;
}
.pill.on::before {
  border-color: var(--brand-3);
  background: var(--brand-3)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/11px no-repeat;
}
.pill.radio::before { border-radius: 50%; }
.pill.radio.on::before {
  background: #fff; border-color: var(--brand-3); border-width: 5px;
}
.pill.compact { padding: 6px 11px; font-size: 12.5px; }

/* ---- 下拉 ---- */
.sel {
  padding: 9px 32px 9px 12px; border-radius: var(--radius-s);
  border: 1.5px solid var(--line); background: #fff; color: var(--txt);
  font-size: 13.5px; font-family: inherit; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235b6577' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 7px center; background-size: 19px;
  max-width: 100%;
}
.sel:focus { outline: none; border-color: var(--brand-3); box-shadow: 0 0 0 3px rgba(90,111,192,.14); }

/* ---- 数字步进 ---- */
.stepper { display: inline-flex; align-items: stretch; border: 1.5px solid var(--line); border-radius: var(--radius-s); overflow: hidden; background: #fff; }
.stepper button {
  width: 34px; border: 0; background: var(--card-2); color: var(--brand);
  font-size: 17px; font-weight: 700; cursor: pointer; line-height: 1;
}
.stepper button:active { background: var(--line); }
.stepper input {
  width: 52px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  text-align: center; font-size: 14px; font-family: var(--mono); color: var(--txt);
  -moz-appearance: textfield; appearance: textfield; padding: 8px 0;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { outline: none; }

/* ---- 结果输出区 ---- */
.out {
  background: #fcfdff; border: 1px solid var(--line);
  border-radius: var(--radius-s); padding: 11px 12px;
  font-family: var(--mono); font-size: 12.2px; line-height: 1.72;
  color: var(--txt); white-space: pre-wrap; word-break: break-word;
  /* 不限高、完全不滚动：长结果随整页向下滚。
     注意 CSS 规范：overflow 任一轴非 visible 时，另一轴的 visible 会被计算成 auto，
     于是这里又变成内部滚动容器、吃掉整页手势（长文本页会“滑不动”）。
     文本已用 pre-wrap + break-word 自动换行，横向不会溢出，故整体保持 visible。 */
  overflow: visible;
  letter-spacing: -.1px;
}
.out.tall { max-height: none; }

/* ★V9.9.8 修订：号码区只保留等宽字体，【取消】横向滑动★（详见下方 .out.wide 注释）
   历史：曾为解决 012 页宽表格折行而给 .out 加 pre+overflow-x:auto，
   用户明确指出这是误解需求（要滑的是【按钮】不是【号码】），故已撤销。 */
/* ★V9.9.8 修订（用户纠正）：号码输出区【不做】横向滑动★
   用户原话：「我说的是每个页面的按钮可以左右滑动，不是下面的号码左右滑动」。
   故撤销原 .out.wide 的 pre + overflow-x:auto 方案：号码区一律回到
   white-space:pre-wrap + word-break:break-word（自动换行、整页纵向滚动），
   与改版前完全一致，绝不再出现号码区左右滑。
   保留的部分只有【等宽字体栈】：它不产生滑动，只是让中文表头与数字列
   在能放下时对齐得更整齐（安卓上等宽中文字体的中文字宽正好是英文2倍）。 */
.out.wide {
  font-family: "Noto Sans Mono CJK SC", "Source Han Mono SC", "Roboto Mono",
               "Droid Sans Mono", "SFMono-Regular", Consolas,
               "Liberation Mono", Menlo, monospace;
  font-variant-ligatures: none;
  font-size: 11.6px; line-height: 1.62; letter-spacing: 0;
  tab-size: 4;
  /* ★为什么这里【不能】写任何横向 overflow 裁剪★
     pre-wrap 自动换行后横向本来就不会溢出，不需要裁剪；
     而 CSS 规范下 overflow 任一轴被设为非 visible，另一轴的 visible 会被算成 auto，
     号码区就会变成内部滚动容器、吃掉整页上下滑手势（项目踩过的坑，
     .out 主规则上方有同一条说明）。所以这个块保持 overflow 为默认 visible。 */
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
}
.out.empty { color: var(--txt-3); text-align: center; padding: 26px 12px; font-family: inherit; }

/* 文本标签配色（对应桌面版 tag） */
.out .t-h,     .out .hh     { color: var(--brand); font-weight: 700; }
.out .t-hot,   .out .hot    { color: var(--accent); font-weight: 700; }
.out .t-warm,  .out .warm   { color: var(--gold); font-weight: 700; }
.out .t-cold,  .out .cold   { color: var(--blue); font-weight: 600; }
.out .t-warn,  .out .warn   { color: var(--txt-3); }
.out .t-note,  .out .note   { color: var(--txt-2); }
.out .t-good,  .out .good,
.out .t-ok,    .out .ok     { color: var(--green); font-weight: 700; }
.out .t-bad,   .out .bad,
.out .t-miss,  .out .miss   { color: var(--accent); }
.out .t-big,   .out .big    { color: var(--brand); font-weight: 700; }
.out .t-h2                  { color: var(--brand-2); font-weight: 700; }
.out .t-hit                 { color: var(--accent); font-weight: 700; }
.out .t-gray,  .out .gray   { color: var(--txt-3); }
.out .t-green, .out .green  { color: var(--green); font-weight: 600; }
.out .t-red,   .out .red    { color: var(--accent); font-weight: 600; }
.out .t-blue,  .out .blue   { color: var(--blue); font-weight: 600; }
.out .t-bold,  .out .bold,
.out .t-b                   { font-weight: 700; }

/* v4.5：把这两页的分组标题调小一点（用户原话「标题放大一点点，搞的很难看」，
   澄清＝调小）。涉及：
     · 号码统计页 五个板块标题【① 三组号码对比】… （引擎用 tag "h"）
     · 一键智能分析页「七大号池」下每个池的标题 ▍热号池（…）： （引擎用 tag "sub"）
   手机版输出区字号统一由 .out 的 12.2px 决定，标题原本只靠加粗+深色区分、并不比
   正文大，但视觉偏重。这里把标题类标签（h / sub）压到 11.4px，比正文略小，观感更协调。
   ★用 app.js 挂在 #view 上的 data-tab 限定页面★，其它十几个页面的 h/sub 完全不受影响；
   伪页（分析一组号码 / 我的数据）也不用这套 tag，同样不受影响。 */
#view[data-tab="号码统计"] .out .t-h,
#view[data-tab="号码统计"] .out .t-sub,
#view[data-tab="一键智能分析号码"] .out .t-h,
#view[data-tab="一键智能分析号码"] .out .t-sub {
  font-size: 11.4px;
}

/* ---- 号码球 ---- */
.balls { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.ball {
  width: 27px; height: 27px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 11.5px/1 var(--mono); color: #fff;
  background: linear-gradient(150deg, #f0564c, #c62b23);
  box-shadow: inset 0 -2px 4px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.12);
}
.ball.z1 { background: linear-gradient(150deg,#f0564c,#c62b23); }
.ball.z2 { background: linear-gradient(150deg,#f6b64f,#dd8d1c); }
.ball.z3 { background: linear-gradient(150deg,#4fd08a,#1c9c5e); }
.ball.z4 { background: linear-gradient(150deg,#6f92f0,#2f57d0); }
.ball.sm { width: 22px; height: 22px; font-size: 10px; }
.ball.ghost {
  background: #fff; color: var(--txt-3);
  border: 1.5px dashed var(--line); box-shadow: none;
}

/* ---- 表格（Treeview） ---- */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-s); border: 1px solid var(--line); }
table.tbl { border-collapse: collapse; width: 100%; font-size: 12.5px; }
table.tbl th {
  background: linear-gradient(180deg,#f6f8fc,#eef1f8);
  color: var(--brand); font-weight: 700; font-size: 12px;
  padding: 9px 8px; text-align: left; white-space: nowrap;
  border-bottom: 1.5px solid var(--line);
}
table.tbl td {
  padding: 8px; border-bottom: 1px solid var(--line-2);
  color: var(--txt); vertical-align: top;
}
table.tbl tbody tr:nth-child(even) { background: #fafbfe; }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl td.mono, table.tbl td .mono { font-family: var(--mono); letter-spacing: -.1px; }
table.tbl td.ctr { text-align: center; }
table.tbl tr.hit td { color: var(--accent); font-weight: 600; }
table.tbl tr.miss td { color: var(--txt-3); }
table.tbl tr.sel { background: var(--blue-soft) !important; box-shadow: inset 3px 0 0 var(--brand-3); }
/* 表格竖向随整页滚动，不再自己开滚动条；仅宽表保留横向滑动 */
.tbl-scroll { max-height: none; overflow: visible; }

/* ---- 画布（走势图 / 技巧网格）----
   图表比屏幕大时像地图一样在框内上下左右拖动；
   overscroll-behavior:contain 保证拖到边缘时不会把整页手势“吃掉”。 */
.cv-wrap {
  overflow: auto; -webkit-overflow-scrolling: touch;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-s);
  max-height: 72vh;
  /* 用 auto 而非 contain：图表滑到边缘后把手势交还整页，
     否则手指落在图表上时会“被困住”，表现为滑不动。 */
  overscroll-behavior: auto;
  touch-action: pan-x pan-y;
}
.cv-wrap canvas { display: block; }

/* ---- 选号技巧：全80号网格（DOM 版，随整页上下滑）---- */
.skillgrid-wrap {
  max-height: none;      /* 不限高：整页自然滚动，不再需要左右滑 */
  overflow: visible;
  padding: 10px;
}
.skillgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 6px;
}
.sg-cell {
  min-height: 58px;
  border-radius: 9px;
  padding: 6px 2px 5px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  background: #fff;
  border: 1px solid var(--line-2);
}
.sg-cell.has-bg { border-color: rgba(224, 192, 96, .8); }
.sg-num { font: 700 13.5px/1.25 var(--mono); letter-spacing: .3px; }
.sg-mark {
  font-size: 10.5px; line-height: 1.55; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.sg-legend { margin-top: 12px; padding-top: 9px; border-top: 1px dashed var(--line); }
.sg-legend-line { font-size: 11.5px; line-height: 1.7; }

/* ---- 提示条 ---- */
.notice {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 10px 12px; border-radius: var(--radius-s);
  font-size: 12.5px; line-height: 1.6; margin-bottom: 10px;
}
.notice.info { background: var(--blue-soft); color: #1b4a8f; border: 1px solid #cfe0fa; }
.notice.warn { background: #fff7e8; color: #8a5d12; border: 1px solid #fae3ba; }
.notice.err  { background: var(--accent-soft); color: #a02b23; border: 1px solid #f8d3d0; }
.notice.ok   { background: var(--green-soft); color: #12694180; border: 1px solid #c6e9d9; }
.notice.ok   { color: #126941; }
.notice b { font-weight: 700; }

/* ---- 分段控件 ---- */
.seg { display: inline-flex; background: var(--card-2); border-radius: var(--radius-s); padding: 3px; gap: 3px; border: 1px solid var(--line); }
.seg button {
  border: 0; background: transparent; color: var(--txt-2);
  padding: 6px 13px; border-radius: 7px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: all .16s; white-space: nowrap;
}
.seg button.on { background: #fff; color: var(--brand); box-shadow: 0 1px 4px rgba(24,38,74,.13); }

/* ---- 分隔 ---- */
.hr { height: 1px; background: var(--line); margin: 11px 0; }
.hr.dash { background: none; border-top: 1px dashed var(--line); }

/* ---- 小节标题 ---- */
.sub-hd {
  font-size: 12.5px; font-weight: 700; color: var(--brand-2);
  margin: 12px 0 7px; display: flex; align-items: center; gap: 7px;
}
.sub-hd::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sub-hd:first-child { margin-top: 0; }

/* ---- 空状态 ---- */
.empty-state {
  text-align: center; padding: 34px 20px; color: var(--txt-3); font-size: 13px;
}
.empty-state .ico { font-size: 30px; display: block; margin-bottom: 9px; opacity: .5; }

/* ==========================================================================
   加载遮罩
   ========================================================================== */
#loading {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(20, 28, 50, .34);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
}
.load-card {
  background: #fff; border-radius: 18px; padding: 26px 32px;
  box-shadow: var(--shadow-lg); text-align: center; min-width: 176px;
}
.load-spinner { display: flex; gap: 7px; justify-content: center; margin-bottom: 15px; }
.load-spinner span {
  width: 10px; height: 10px; border-radius: 50%; background: var(--brand-3);
  animation: lb 1.1s ease-in-out infinite;
}
.load-spinner span:nth-child(2) { animation-delay: .16s; background: var(--accent); }
.load-spinner span:nth-child(3) { animation-delay: .32s; background: var(--gold); }
@keyframes lb { 0%,100% { transform: translateY(0); opacity: .45 } 50% { transform: translateY(-9px); opacity: 1 } }
.load-text { font-size: 13.5px; color: var(--txt-2); font-weight: 500; }

/* ==========================================================================
   弹窗
   ========================================================================== */
#dialog {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(16, 23, 42, .48);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fadeIn .2s ease;
}
@media (min-width: 560px) { #dialog { align-items: center; } }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

.dlg-card {
  background: #fff; width: 100%; max-width: 520px;
  border-radius: 20px 20px 0 0; padding: 0 0 calc(16px + var(--safe-b));
  box-shadow: var(--shadow-lg); max-height: 86vh;
  display: flex; flex-direction: column;
  animation: slideUp .26s cubic-bezier(.22,1,.36,1);
}
@media (min-width: 560px) { .dlg-card { border-radius: 20px; padding-bottom: 16px; } }
@keyframes slideUp { from { transform: translateY(38px); opacity: .5 } to { transform: translateY(0); opacity: 1 } }

.dlg-card::before {
  content: ""; display: block; width: 38px; height: 4px; border-radius: 3px;
  background: var(--line); margin: 9px auto 0; flex: 0 0 auto;
}
@media (min-width: 560px) { .dlg-card::before { display: none; } }

.dlg-title {
  padding: 14px 20px 8px; font-size: 16.5px; font-weight: 700; color: var(--brand);
  text-align: center; flex: 0 0 auto;
}
.dlg-body {
  padding: 2px 20px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch;
  font-size: 13.5px; line-height: 1.72; color: var(--txt);
  white-space: pre-wrap; word-break: break-word;
}
.dlg-body.mono { font-family: var(--mono); font-size: 12.2px; }
.dlg-actions { display: flex; gap: 10px; padding: 0 20px; flex: 0 0 auto; }
.dlg-actions .btn { flex: 1; padding: 12px; font-size: 15px; border-radius: 12px; }

/* ==========================================================================
   Toast
   ========================================================================== */
#toast {
  position: fixed; left: 50%; bottom: calc(30px + var(--safe-b));
  transform: translateX(-50%); z-index: 95;
  background: rgba(24, 32, 54, .94); color: #fff;
  padding: 11px 20px; border-radius: 999px; font-size: 13.5px;
  box-shadow: 0 6px 22px rgba(0,0,0,.28); max-width: 86vw; text-align: center;
  animation: toastIn .24s cubic-bezier(.22,1,.36,1);
  pointer-events: none; line-height: 1.5;
}
@keyframes toastIn { from { transform: translate(-50%, 14px); opacity: 0 } to { transform: translate(-50%,0); opacity: 1 } }
#toast.err { background: rgba(180, 40, 32, .95); }
#toast.ok  { background: rgba(20, 120, 76, .95); }

/* ==========================================================================
   我的数据页
   ========================================================================== */
.dp-hero {
  background: linear-gradient(150deg, #24335f, #35488a);
  border-radius: var(--radius); padding: 17px 18px; margin-bottom: 12px;
  color: #fff; box-shadow: 0 6px 20px rgba(34,49,94,.24);
  position: relative; overflow: hidden;
}
.dp-hero::after {
  content: ""; position: absolute; right: -34px; top: -34px;
  width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 68%);
}
.dp-hero-t { font-size: 15.5px; font-weight: 700; margin-bottom: 4px; position: relative; z-index: 1; }
.dp-hero-s { font-size: 12px; color: rgba(255,255,255,.74); position: relative; z-index: 1; }
.dp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 14px; position: relative; z-index: 1; }
.dp-cell { background: rgba(255,255,255,.13); border-radius: 11px; padding: 9px 11px; }
.dp-cell .n { font: 700 19px/1.2 var(--mono); color: #fff; }
.dp-cell .k { font-size: 11px; color: rgba(255,255,255,.72); margin-top: 2px; }

/* ★V9.9.8 修订：伪页（分析一组号码/我的数据）的按钮区也改横向滑动★
   用户要「每个页面的按钮都可以左右滑动」，这两页的按钮在 .dp-act 里、
   原来是 flex:1 挤压式（按钮多了会被压扁），一并改成与 .btn-row 同样的单排横滑。 */
.dp-act {
  display: flex; flex-wrap: nowrap; gap: 9px;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  margin: 0 -4px 9px; padding: 2px 4px 6px;
}
.dp-act::-webkit-scrollbar { display: none; }
.dp-act .btn { flex: 0 0 auto; white-space: nowrap; }

/* ==========================================================================
   工具类
   ========================================================================== */
.mono { font-family: var(--mono); }
.muted { color: var(--txt-3); }
.small { font-size: 12px; }
.center { text-align: center; }
.mt0 { margin-top: 0 } .mt6 { margin-top: 6px } .mt10 { margin-top: 10px } .mt14 { margin-top: 14px }
.mb0 { margin-bottom: 0 } .mb6 { margin-bottom: 6px } .mb10 { margin-bottom: 10px }
.grow { flex: 1 1 auto; min-width: 0 }
.nowrap { white-space: nowrap; }

/* 窄屏适配 */
@media (max-width: 360px) {
  :root { font-size: 14px; }
  .btn { padding: 8px 12px; font-size: 13px; }
  .tab { padding: 6px 11px; font-size: 12.5px; }
}
/* 平板 / 宽屏 */
@media (min-width: 720px) {
  #view { padding: 16px 20px 24px; }
  .out { font-size: 13px; }
}

/* ==========================================================================
   卡密登录页 / 授权到期页
   ========================================================================== */
#login {
  position: fixed; inset: 0; z-index: 200;
  background: linear-gradient(160deg, #1d2a52 0%, #22315e 42%, #35477f 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 22px; overflow: hidden;
  transition: opacity .32s ease, visibility .32s;
}
#login.bye { opacity: 0; visibility: hidden; pointer-events: none; }

/* 背景漂浮彩球装饰 */
.lg-bg { position: absolute; inset: 0; pointer-events: none; }
.lg-b {
  position: absolute; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 600 15px/1 var(--mono); color: rgba(255,255,255,.9);
  box-shadow: 0 8px 22px rgba(0,0,0,.28), inset 0 -4px 9px rgba(0,0,0,.18);
  opacity: .3; animation: lgFloat 7s ease-in-out infinite;
}
.lg-b.b1 { left: 6%;  top: 11%; background: linear-gradient(150deg,#f0564c,#c62b23); }
.lg-b.b2 { right: 9%; top: 17%; background: linear-gradient(150deg,#f6b64f,#dd8d1c); animation-delay: 1.1s; }
.lg-b.b3 { left: 12%; bottom: 14%; background: linear-gradient(150deg,#4fd08a,#1c9c5e); animation-delay: 2.2s; }
.lg-b.b4 { right: 7%; bottom: 20%; background: linear-gradient(150deg,#6f92f0,#2f57d0); animation-delay: .6s; }
.lg-b.b5 { left: 46%; top: 5%;  background: linear-gradient(150deg,#b48cf2,#7b46d8); animation-delay: 1.7s; }
@keyframes lgFloat { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-13px) } }

.lg-box {
  position: relative; z-index: 1; width: 100%; max-width: 372px;
  background: rgba(255,255,255,.97); border-radius: 22px;
  padding: 26px 22px 22px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  animation: lgIn .42s cubic-bezier(.22,1,.36,1);
}
@keyframes lgIn { from { transform: translateY(22px) scale(.97); opacity: 0 } to { transform: none; opacity: 1 } }

.lg-logo { display: flex; justify-content: center; margin-bottom: 13px; }
.lg-dot {
  width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff 0%, #ffb3ae 22%, var(--accent) 58%, #9c1f18 100%);
  box-shadow: 0 8px 20px rgba(195,45,36,.36), inset 0 -5px 12px rgba(0,0,0,.2);
  position: relative;
}
.lg-dot::after {
  content: "8"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font: 700 26px/1 var(--mono); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.3);
}

.lg-title { font-size: 17.5px; font-weight: 700; color: var(--brand); letter-spacing: .2px; }
.lg-sub { font-size: 12.5px; color: var(--txt-3); margin-top: 5px; margin-bottom: 20px; }

.lg-field { position: relative; margin-bottom: 4px; }
.lg-inp {
  width: 100%; padding: 14px 76px 14px 15px; border-radius: 13px;
  border: 2px solid var(--line); background: #fff; color: var(--txt);
  font: 600 17px/1.4 var(--mono); letter-spacing: 1.6px; text-align: center;
  outline: none; transition: border-color .18s, box-shadow .18s;
  -webkit-appearance: none; appearance: none;
}
.lg-inp:focus { border-color: var(--brand-3); box-shadow: 0 0 0 4px rgba(90,111,192,.13); }
.lg-inp::placeholder { font-size: 13px; letter-spacing: 0; font-weight: 400; color: #b6bfce; }
.lg-len {
  position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  font: 600 11.5px/1 var(--mono); color: var(--txt-3);
  background: var(--card-2); border-radius: 999px; padding: 4px 8px;
  transition: all .18s;
}
.lg-len.full { background: var(--green-soft); color: var(--green); }

.lg-err {
  font-size: 12.5px; color: var(--accent); line-height: 1.55;
  min-height: 20px; margin: 8px 2px 0; opacity: 0; transition: opacity .18s;
  text-align: left; padding-left: 4px;
}
.lg-err.on { opacity: 1; }

.lg-btn {
  width: 100%; margin-top: 12px; padding: 14px; border: 0; border-radius: 13px;
  background: linear-gradient(150deg, var(--brand-2), var(--brand));
  color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 3px;
  cursor: pointer; font-family: inherit;
  box-shadow: 0 6px 18px rgba(34,49,94,.3);
  transition: transform .1s, box-shadow .18s, opacity .18s;
}
.lg-btn:active { transform: scale(.98); box-shadow: 0 3px 10px rgba(34,49,94,.26); }
.lg-btn:disabled { opacity: .6; cursor: default; transform: none; }

.lg-plans {
  margin-top: 15px; font-size: 11.5px; color: var(--txt-3); line-height: 1.7;
  padding-top: 13px; border-top: 1px solid var(--line-2);
}
.lg-plans b { color: var(--brand-2); font-weight: 700; }
.lg-foot, .lg-foot2 { font-size: 11.5px; color: var(--txt-3); margin-top: 9px; line-height: 1.6; }
.lg-foot2 { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.lg-foot2:active { color: var(--accent); }

/* 到期页 */
.lg-exp-ico {
  width: 52px; height: 52px; margin: 0 auto 13px; border-radius: 50%;
  background: linear-gradient(150deg, #f6b64f, #dd8d1f);
  display: flex; align-items: center; justify-content: center;
  font: 700 30px/1 var(--mono); color: #fff;
  box-shadow: 0 7px 18px rgba(221,141,28,.34);
}
.lg-exp-info {
  font-size: 12.5px; color: var(--txt-2); line-height: 1.9; text-align: left;
  background: var(--card-2); border: 1px solid var(--line-2);
  border-radius: 12px; padding: 11px 13px; margin: 4px 0 14px;
}
.lg-exp-info b { color: var(--brand); }

/* 顶栏授权剩余天数徽标 */
.lic-badge {  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 4.5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  background: rgba(255,255,255,.14); color: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.2); cursor: pointer; white-space: nowrap;
  transition: background .18s, transform .12s; font-family: var(--mono);
}
.lic-badge:active { background: rgba(255,255,255,.26); transform: scale(.95); }
.lic-badge.warn { background: rgba(232,163,61,.3); border-color: rgba(232,163,61,.55); color: #ffe9c4; }
.lic-badge .d { font-family: var(--mono); }

/* 我的数据 · 授权信息卡 */
.lic-box {
  background: var(--card-2); border: 1px solid var(--line-2);
  border-radius: var(--radius-s); padding: 4px 13px; margin-bottom: 4px;
}
.lic-line {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px dashed var(--line);
  font-size: 13px;
}
.lic-line:last-child { border-bottom: 0; }
.lic-k { color: var(--txt-3); flex: 0 0 auto; }
.lic-v { color: var(--txt); font-weight: 600; text-align: right; word-break: break-all; }
.lic-v.mono { font-family: var(--mono); letter-spacing: .5px; }
.lic-v.strong { font-family: var(--mono); font-weight: 700; }
.lic-v.ok { color: var(--green); }
.lic-v.warn { color: var(--accent); }

/* ==========================================================================
   录入开奖页 · 自动更新条
   ========================================================================== */
.upd-card { margin-bottom: 12px; }
.upd-bd {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px;
}
.upd-txt { flex: 1 1 150px; min-width: 0; }
.upd-txt b {
  display: block; font-size: 13.5px; color: var(--brand); font-weight: 700;
}
.upd-txt span {
  display: block; font-size: 11.5px; color: var(--txt-3); line-height: 1.5; margin-top: 1px;
}
.upd-btn { flex: 0 0 auto; }
.upd-more { flex: 0 0 auto; padding: 9px 12px; }

/* ==========================================================================
   滚动优化：确保整页只有一个竖向滚动源，横向只在需要的地方滑
   ========================================================================== */
#view { min-width: 0; }
#view > * { max-width: 100%; }

/* 行内容过宽时允许横向滑动，而不是撑破布局 */
.row { min-width: 0; }

/* 长号码串不撑破容器 */
.balls { min-width: 0; }

/* 触摸滚动更顺滑 */
html { -webkit-text-size-adjust: 100%; }
#view, .cv-wrap, .tbl-wrap, .out { scrollbar-width: thin; }

/* 滚动条视觉（不影响手势） */
.cv-wrap::-webkit-scrollbar, .tbl-wrap::-webkit-scrollbar, .out::-webkit-scrollbar {
  height: 5px; width: 5px;
}
.cv-wrap::-webkit-scrollbar-thumb, .tbl-wrap::-webkit-scrollbar-thumb,
.out::-webkit-scrollbar-thumb { background: #c9d2e2; border-radius: 3px; }

/* 回到顶部悬浮按钮（长页面辅助） */
#to-top {
  position: fixed; right: 14px; bottom: calc(20px + var(--safe-b));
  width: 44px; height: 44px; border-radius: 50%; border: 0; z-index: 60;
  background: linear-gradient(150deg, var(--brand-2), var(--brand));
  color: #fff; font-size: 19px; line-height: 1; cursor: pointer;
  box-shadow: 0 5px 16px rgba(34,49,94,.34);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .22s, transform .22s;
}
#to-top.on { opacity: 1; transform: none; pointer-events: auto; }
#to-top:active { transform: scale(.93); }

/* ==========================================================================
   高级感进度条（v2.5）：渐变流光 + 扫光 + 百分比/阶段文案
   ========================================================================== */
.load-bar { margin-top: 16px; width: 100%; }
.load-bar-track {
  position: relative; height: 8px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .10);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}
.load-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2f6df6 0%, #5b8cff 35%, #8fb4ff 60%, #d9b25c 100%);
  background-size: 220% 100%;
  box-shadow: 0 0 12px rgba(91, 140, 255, .55), 0 0 4px rgba(217, 178, 92, .5);
  animation: barflow 1.6s linear infinite;
  transition: width .18s ease-out;
}
@keyframes barflow {
  0% { background-position: 0% 0; }
  100% { background-position: -220% 0; }
}
.load-bar-track::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent);
  animation: barsheen 1.35s ease-in-out infinite;
}
@keyframes barsheen {
  0% { left: -40%; }
  100% { left: 110%; }
}
.load-bar-row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 8px; font-size: 12px; color: var(--txt-3);
  font-variant-numeric: tabular-nums;
}
#load-bar-pct { color: var(--gold); font-weight: 700; font-size: 13px; letter-spacing: .4px; }
#load-bar-stage { color: var(--txt-2); }