/* ============================================
   手和艺数据分析网 · 全站样式
   对应文档：WEBSITE-PDS.md §2.1 + 维度检查.md §8.1
   设计语言与 prototype/demo-website.html 一致
   ============================================ */

:root {
  --bg:#f5f7fa; --panel:#ffffff; --border:#e2e8f0; --border-soft:#eef2f6;
  --text:#1e293b; --dim:#64748b; --faint:#94a3b8;
  --blue:#2563eb; --blue-soft:#eff6ff; --green:#10b981; --red:#ef4444; --amber:#f59e0b; --purple:#7c3aed;
  --mono:'SF Mono',Consolas,'Microsoft YaHei',monospace;
  --sans:'PingFang SC','Microsoft YaHei','Segoe UI',system-ui,sans-serif;
}

* { box-sizing:border-box; margin:0; padding:0; }
body {
  background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:14px; line-height:1.55;
}
a { color:var(--blue); text-decoration:none; }
a:hover { text-decoration:underline; }

.app { min-height:100vh; display:flex; flex-direction:column; }

/* ============ 顶部导航 ============ */
.navbar { background:var(--panel); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50; }
.navbar-inner {
  max-width:1400px; margin:0 auto; padding:0 24px; height:58px;
  display:flex; align-items:center; gap:24px;
}
.logo { display:flex; align-items:center; gap:9px; font-weight:700; font-size:17px; color:var(--text); text-decoration:none; }
.logo-mark {
  width:28px; height:28px; border-radius:8px;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700;
}
.lottery-links { display:flex; gap:2px; flex:1; flex-wrap:wrap; }
.lottery-links a {
  padding:7px 12px; border-radius:7px; color:var(--dim); font-size:13px;
  cursor:pointer; text-decoration:none;
}
.lottery-links a:hover { background:var(--bg); color:var(--text); text-decoration:none; }
.lottery-links a.active { background:var(--blue-soft); color:var(--blue); font-weight:600; }
.lottery-links .nav-sep { color:var(--border); padding:7px 4px; font-size:13px; }
.auth-links { display:flex; gap:10px; align-items:center; }
.auth-links a { color:var(--dim); font-size:13px; }
.auth-links a:hover { color:var(--text); text-decoration:none; }
.auth-links .btn-reg {
  padding:7px 14px; background:var(--blue); color:#fff; border-radius:7px;
  font-size:13px; font-weight:500;
}
.auth-links .btn-reg:hover { background:#1d4ed8; color:#fff; }
.auth-links .btn-logout {
  padding:6px 12px; border:1px solid var(--border); border-radius:7px;
  font-size:12px; color:var(--dim);
}
.auth-links .btn-logout:hover { background:var(--bg); color:var(--red); text-decoration:none; }
.auth-links .logged-in { display:flex; align-items:center; gap:8px; color:var(--text); text-decoration:none; }
.avatar {
  width:30px; height:30px; border-radius:50%; background:var(--blue); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600;
}

/* ============ Flash 消息 ============ */
.flash-wrap { max-width:1400px; margin:0 auto; padding:12px 24px 0; }
.flash {
  padding:10px 16px; border-radius:8px; margin-bottom:8px; font-size:13px;
  display:flex; justify-content:space-between; align-items:center;
}
.flash-success { background:#d1fae5; color:#065f46; }
.flash-danger, .flash-error { background:#fee2e2; color:#991b1b; }
.flash-warning { background:#fef3c7; color:#92400e; }
.flash-info { background:#dbeafe; color:#1e40af; }
.flash-close { cursor:pointer; font-size:18px; opacity:.7; padding:0 4px; }
.flash-close:hover { opacity:1; }

/* ============ 容器 ============ */
.container { max-width:1400px; margin:0 auto; padding:24px 32px; flex:1; width:100%; }

.page-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px; flex-wrap:wrap; gap:10px;
}
.page-header h1 { font-size:22px; font-weight:700; }
.page-header .sub { font-size:13px; color:var(--dim); margin-top:3px; }
.page-header .actions { display:flex; gap:8px; }

.section-title { font-size:16px; margin:24px 0 12px; }

/* ============ 按钮 ============ */
.btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 14px; border-radius:7px; font-size:13px;
  cursor:pointer; border:1px solid var(--border); background:var(--panel);
  color:var(--text); font-family:var(--sans); text-decoration:none;
}
.btn:hover { background:var(--bg); text-decoration:none; }
.btn-primary { background:var(--blue); color:#fff; border-color:var(--blue); }
.btn-primary:hover { background:#1d4ed8; }
.btn-secondary { background:rgba(255,255,255,.2); color:#fff; border:1px solid rgba(255,255,255,.4); }
.btn-ghost { border-style:dashed; color:var(--dim); }
.btn-lg { padding:11px 22px; font-size:15px; }
.btn-block { width:100%; justify-content:center; margin-top:8px; }
.btn:disabled { background:var(--faint); cursor:not-allowed; border-color:var(--faint); }

.input {
  padding:8px 12px; border:1px solid var(--border); border-radius:7px;
  font-size:14px; font-family:var(--sans); outline:none;
  background:var(--panel); color:var(--text);
}
.input:focus { border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft); }
.input.flex { flex:1; min-width:200px; }

/* ============ 卡片 ============ */
.panel {
  background:var(--panel); border:1px solid var(--border);
  border-radius:12px; padding:20px; margin-bottom:16px;
}
.panel h2 { font-size:15px; font-weight:600; margin-bottom:12px; }
.panel h3 { font-size:14px; font-weight:600; margin-bottom:10px; }
.panel .tip { font-size:12px; color:var(--dim); margin-top:10px; }

.compliance-panel { background:#fefce8; border-color:#fde68a; }
.compliance-panel h3 { color:#92400e; }

.disclaimer {
  font-size:12px; color:var(--dim); text-align:center;
  margin:20px 0; padding:12px; background:var(--panel);
  border-radius:8px; border:1px solid var(--border-soft);
}

/* ============ 首页 Hero ============ */
.draw-hero {
  background:linear-gradient(135deg,#1e3a8f 0%,#7c3aed 100%);
  color:#fff; border-radius:14px; padding:24px 28px; margin-bottom:18px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;
}
.draw-hero .left .lot-name { font-size:13px; opacity:.85; margin-bottom:3px; }
.draw-hero .left .lot-period { font-size:20px; font-weight:700; margin-bottom:6px; }
.draw-hero .left .lot-date { font-size:12px; opacity:.7; margin-bottom:14px; }
.draw-hero .right { text-align:right; font-size:13px; }
.draw-hero .right .label { opacity:.7; margin-bottom:3px; margin-top:8px; }
.draw-hero .right .val { font-size:18px; font-weight:700; font-family:var(--mono); }
.balls { display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
.ball {
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.18); border:2px solid rgba(255,255,255,.4);
  display:flex; align-items:center; justify-content:center;
  font-size:17px; font-weight:700; font-family:var(--mono);
}
.ball-sm {
  display:inline-block; width:24px; height:24px; border-radius:50%;
  color:#fff; font-size:11px; font-weight:700; line-height:24px;
  margin-right:3px; text-align:center; vertical-align:middle;
}
.ball-red { background:#ef4444; }
.ball-blue { background:#2563eb; }
.ball-green { background:#10b981; }
.ball-gold { background:#f59e0b; }
.ball-sep { color:var(--faint); margin:0 4px; font-size:14px; }

/* ============ 功能卡片 ============ */
.feature-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:14px; margin-bottom:24px;
}
.feature-card {
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
  padding:18px 20px; cursor:pointer; transition:.2s; text-decoration:none; color:inherit;
  display:flex; flex-direction:column; text-align:center;
}
.feature-card:hover {
  border-color:var(--blue); box-shadow:0 4px 14px rgba(37,99,235,.1);
  transform:translateY(-2px); text-decoration:none;
}
/* 卡片头部：图标 + 标题水平居中一行 */
.feature-card .card-head {
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-bottom:8px;
}
.feature-card .icon {
  width:38px; height:38px; border-radius:10px; background:var(--blue-soft);
  display:flex; align-items:center; justify-content:center; font-size:20px;
  flex-shrink:0;
}
.feature-card h3 { font-size:15px; font-weight:600; margin:0; }
.feature-card p { font-size:12px; color:var(--dim); line-height:1.5; margin:0; }

/* 功能卡片 2×3 网格：首页专用 */
.feature-grid-6 {
  grid-template-columns:repeat(4, 1fr);
}

/* ============ 数据统计条 ============ */
.stats-bar {
  display:flex; align-items:center; gap:0;
  background:linear-gradient(135deg,#1e3a8f 0%,#3b82f6 100%);
  color:#fff; border-radius:12px; padding:16px 24px;
  margin-bottom:18px; flex-wrap:wrap;
}
.stats-bar .stat-item {
  display:flex; align-items:center; gap:8px; padding:0 16px;
  flex:1; min-width:160px;
}
.stats-bar .stat-icon { font-size:20px; }
.stats-bar .stat-num {
  font-size:18px; font-weight:700; font-family:var(--mono);
  white-space:nowrap;
}
.stats-bar .stat-label { font-size:12px; opacity:.85; }
.stats-bar .stat-sep {
  width:1px; height:28px; background:rgba(255,255,255,.25);
}

/* ============ 紧凑面板（用于一览表）============ */
.panel-tight { padding:8px 12px; }
.panel-tight > table { margin:0; }

/* ============ 彩种一览表 ============ */
.table-latest { font-size:13px; }
.table-latest th { font-size:12px; }
.table-latest td { padding:10px 12px; vertical-align:middle; }
.table-latest .td-name { white-space:nowrap; }
.table-latest .td-period { font-family:var(--mono); font-size:12px; color:var(--dim); white-space:nowrap; }
.table-latest .td-balls { white-space:nowrap; }
.table-latest .td-date { font-size:12px; color:var(--dim); font-family:var(--mono); white-space:nowrap; }
.table-latest .td-pool { font-family:var(--mono); font-size:12px; color:var(--red); font-weight:600; white-space:nowrap; }
.table-latest .td-actions { white-space:nowrap; }
.table-latest .col-actions { text-align:right; }

/* 彩种标签 */
.lot-tag {
  display:inline-block; padding:3px 10px;
  background:var(--blue-soft); color:var(--blue);
  border-radius:4px; font-size:12px; font-weight:600;
  white-space:nowrap;
}

/* 小号圆形球（一览表用，统一圆形）*/
.ball-sm {
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px;
  border-radius:50%;
  color:#fff; font-size:12px; font-weight:700;
  margin-right:4px; vertical-align:middle;
  box-sizing:border-box;
}
.ball-sm.ball-red { background:#ef4444; }
.ball-sm.ball-blue { background:#2563eb; }
.ball-sm.ball-red-digit { background:#ef4444; }
.ball-sm.ball-blue-digit { background:#2563eb; }

/* 操作链接 */
.link-sm {
  display:inline-block; margin-left:8px;
  font-size:12px; color:var(--blue); text-decoration:none;
  padding:2px 8px; border-radius:4px; transition:.15s;
}
.link-sm:first-child { margin-left:0; }
.link-sm:hover { background:var(--blue-soft); text-decoration:none; }

.text-dim { color:var(--dim); font-size:12px; }
.tag {
  display:inline-block; padding:2px 8px;
  background:var(--bg); border-radius:4px; font-size:11px; color:var(--dim);
}

/* ============ 开奖日历 ============ */
.calendar-grid {
  display:grid; grid-template-columns:repeat(7, 1fr);
  gap:10px; margin-bottom:18px;
}
.cal-day {
  background:var(--panel); border:1px solid var(--border);
  border-radius:10px; padding:12px 8px; min-height:140px;
  display:flex; flex-direction:column;
}
.cal-day.cal-today {
  border-color:var(--blue); border-width:2px;
  box-shadow:0 4px 14px rgba(37,99,235,.15);
}
.cal-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px; padding-bottom:6px;
  border-bottom:1px solid var(--border-soft);
}
.cal-wd { font-size:13px; font-weight:600; color:var(--text); }
.cal-today-tag {
  font-size:10px; padding:1px 6px; background:var(--blue);
  color:#fff; border-radius:3px;
}
.cal-body { display:flex; flex-direction:column; gap:5px; flex:1; }
.cal-lot {
  display:block; padding:5px 8px; font-size:12px;
  background:var(--bg); border-radius:5px; color:var(--text);
  text-decoration:none; text-align:center; transition:.15s;
}
.cal-lot:hover { background:var(--blue-soft); color:var(--blue); text-decoration:none; }
.cal-lot-daily {
  font-size:11px; padding:3px 6px;
}
.cal-empty { color:var(--faint); text-align:center; font-size:12px; }

/* ============ 表格 ============ */
.table-wrap { overflow:auto; border:1px solid var(--border-soft); border-radius:8px; }
table.data { border-collapse:collapse; font-size:13px; width:100%; }
table.data th, table.data td {
  padding:9px 12px; text-align:left; border-bottom:1px solid var(--border-soft);
}
table.data th {
  background:#f8fafc; font-weight:600; color:var(--dim);
  font-size:12px; text-transform:uppercase; letter-spacing:.04em; position:sticky; top:0;
}
table.data tr:hover td { background:#f8fafc; }
.num { font-family:var(--mono); color:var(--text); }

/* ============ 分页 ============ */
.pagination {
  display:flex; justify-content:center; align-items:center; gap:14px;
  margin-top:16px; font-size:13px;
}
.pagination a {
  padding:7px 14px; background:var(--panel); border:1px solid var(--border);
  border-radius:7px; color:var(--text); text-decoration:none;
}
.pagination a:hover { background:var(--bg); }
.pagination .page-info { color:var(--dim); }

/* ============ 指标卡片 ============ */
.metric-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px; margin-bottom:18px;
}
.metric { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:14px; }
.metric .lab { font-size:11px; color:var(--faint); margin-bottom:4px; }
.metric .val { font-size:20px; font-weight:700; font-family:var(--mono); color:var(--text); }
.metric .val.up { color:var(--green); }
.metric .val.down { color:var(--red); }
.metric .sub { font-size:11px; color:var(--dim); margin-top:3px; }

/* ============ 走势矩阵 ============ */
.trend-scroll { overflow:auto; max-height:480px; border:1px solid var(--border-soft); border-radius:8px; }
.trend-table { border-collapse:collapse; font-size:11px; line-height:1.3; }
.trend-table th, .trend-table td {
  padding:3px 4px; text-align:center; border:1px solid #e8edf3;
  white-space:nowrap; min-width:30px;
}
/* 统一正方形格子：ball 和 gap 都是 22×22，单元格高度一致 */
.trend-table .hdr th { background:#e8edf3; font-weight:700; color:#374151; position:sticky; top:0; z-index:3; }
.trend-table .pd { background:#f9fafb; font-size:10px; color:var(--dim); font-weight:600; font-family:var(--mono); }
.trend-table .ball {
  display:inline-block; width:22px; height:22px; border-radius:50%;
  color:#fff; font-size:11px; font-weight:700; line-height:22px;
  background:#ef4444; border:none;
  box-sizing:border-box;
}
.trend-table .ball.b { background:#2563eb; }
.trend-table .ball.ball-red { background:#ef4444; }
.trend-table .ball.ball-blue { background:#2563eb; }
.trend-table .gap {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; padding:0;
  color:var(--faint); font-size:10px;
  box-sizing:border-box;
}
.trend-table .gap.hot { color:var(--red); font-weight:700; }
.trend-table .gap.cold { color:var(--blue); font-weight:700; }
/* 命中单元格高亮（参考 17500.cn） */
.trend-table td.hit { background:#fee2e2; }
.trend-table td.hit-blue { background:#dbeafe; }
.trend-table .stat-row td {
  background:#f0f4f8; font-weight:600; font-size:10px; color:#374151;
  position:sticky; bottom:0; z-index:2;
}
.trend-table .stat-row .st-num { background:#fefce8; color:#92400e; }
.trend-table .zone-split { background:#cbd5e1; min-width:6px; padding:0; }

/* 数字型方块（修复 BUG-5）：替代圆球，两位数正常显示 */
.trend-table .digit-block {
  display:inline-block; min-width:22px; height:22px; padding:0 4px;
  border-radius:4px; color:#fff; font-size:12px; font-weight:700;
  line-height:22px; text-align:center; border:none;
  background:#64748b; /* 默认灰色（统计行用） */
}
.trend-table .digit-block.even { background:#2563eb; }    /* 偶数：蓝 */
.trend-table .digit-block.odd  { background:#ef4444; }    /* 奇数：红 */
.trend-table .digit-block.hot  { background:#dc2626; }    /* 频次最高：深红 */
.trend-table .digit-block.active { background:#2563eb; }  /* 后区/特别号命中：蓝 */

/* 独立 panel 的说明文案（修复 BUG-8） */
.section-hint {
  margin:4px 0 10px 0; font-size:12px; color:var(--dim, #94a3b8);
  font-style:italic;
}

/* 横向大表（前区各位走势，参考 17500.cn）：更宽，横向滚动 */
.trend-scroll-wide { max-height:640px; overflow:auto; }

/* 展开状态：表格撑破容器，页面级横向滚动（参考 17500.cn 全幅展开）
   - 移除容器内滚动条，避免"展开后还要拉横条"的二次操作
   - 表格 width:max-content 自然撑开
   - body.trend-expanded 启用页面级横向滚动 */
.trend-scroll-wide.expanded {
  overflow: visible;
  max-height: none;
  border: none;
}
.trend-scroll-wide.expanded .trend-table,
.trend-scroll-wide.expanded .trend-table-qxc {
  width: max-content;
  min-width: 100%;
}
/* 展开后 overflow:visible 会导致 sticky 失效，改用静态定位 */
.trend-scroll-wide.expanded .trend-table .hdr th,
.trend-scroll-wide.expanded .trend-table .stat-row td {
  position: static;
}
/* 页面级横向滚动：让父级容器允许溢出 */
body.trend-expanded {
  overflow-x: auto;
}
body.trend-expanded .container {
  max-width: none;
  padding-left: 16px;
  padding-right: 16px;
}
body.trend-expanded .panel {
  overflow: visible;
}

/* 七星彩统一大表（参考 17500.cn qxc.17500.cn/qxc/p/kjfb.html） */
.trend-table-qxc { min-width:800px; }  /* 折叠状态最小宽度 */
.trend-table-qxc .hdr-pos th {
  background:#1e40af; color:#fff; font-weight:700; font-size:11px;
  padding:6px 4px; border-color:#1e3a8a;
}
.trend-table-qxc .hdr-num th {
  background:#e0e7ff; color:#1e293b; font-weight:600; font-size:10px;
  padding:3px 2px;
}
.trend-table-qxc .pos-label {
  background:#1e40af !important; color:#fff !important;
  text-align:center; font-size:11px;
}
.trend-table-qxc .pos-back {
  background:#7c3aed !important;  /* 后区用紫色区分 */
}
.trend-table-qxc .qxc-num {
  font-family:var(--mono, 'SF Mono', Consolas, monospace);
  font-size:11px; color:#1e293b; font-weight:700;
  white-space:nowrap; background:#fef3c7;  /* 开奖号用浅黄底 */
  letter-spacing:1px;
}
.trend-table-qxc .metric-cell {
  font-size:10px; color:#374151; font-weight:600;
  white-space:nowrap; background:#f9fafb;
}
.trend-table-qxc .digit-block.active {
  background:#dc2626;  /* 前区命中：红 */
}
.trend-table-qxc .digit-block.active.back {
  background:#7c3aed;  /* 后区命中：紫 */
}

/* 折叠状态下的提示 */
.expand-hint {
  margin-top:10px; padding:8px 12px;
  background:#eff6ff; border:1px solid #bfdbfe; border-radius:4px;
  color:#1e40af; font-size:12px; text-align:center;
}

/* 方块展开按钮（右上角，参考 17500.cn） */
.btn-expand {
  margin-left:6px; padding:5px 11px;
  background:#1e40af; border:1px solid #1e3a8a; border-radius:4px;
  cursor:pointer; font-size:16px; line-height:1; color:#fff;
  vertical-align:middle; font-weight:700;
  transition:background 0.15s;
}
.btn-expand:hover { background:#1e3a8a; }
.btn-expand:active { background:#1e3a8a; transform:scale(0.96); }
.btn-expand span { display:inline-block; }

.legend { display:flex; gap:14px; font-size:11px; color:var(--dim); margin-top:10px; flex-wrap:wrap; }
.legend span { display:flex; align-items:center; gap:5px; }
.legend .dot { width:10px; height:10px; border-radius:50%; }
.legend .dot-red { background:#ef4444; }
.legend .dot-blue { background:#2563eb; }
.legend .dot-hot { background:#fee2e2; border:1px solid #ef4444; }
.legend .dot-cold { background:#dbeafe; border:1px solid #2563eb; }

/* ============ 冷热号 ============ */
.hot-cold { display:flex; gap:20px; flex-wrap:wrap; margin-top:10px; }
.hot-cold .group { flex:1; min-width:200px; }
.hot-cold .group .title {
  font-size:12px; color:var(--faint); margin-bottom:8px;
  display:flex; align-items:center; gap:6px;
}
.hot-cold .group .title .dot { width:8px; height:8px; border-radius:50%; }
.hot-cold .balls { display:flex; flex-wrap:wrap; gap:6px; }
.hot-cold .ball {
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; font-family:var(--mono); color:#fff;
}

/* ============ 子图表 ============ */
.sub-charts { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.chart-card { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:14px; }
.chart-card h3 { font-size:14px; font-weight:600; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.chart-card h3 .tag {
  font-size:10px; background:var(--blue-soft); color:var(--blue);
  padding:2px 7px; border-radius:4px; font-weight:600;
}
.chart-box { width:100%; height:260px; }

/* ============ 号码验证页面（左右分栏）============ */
.verify-layout {
  display:grid;
  grid-template-columns:minmax(400px, 1fr) minmax(400px, 1.3fr);
  gap:18px;
  align-items:start;
}
.verify-left { min-width:0; }
.verify-right { min-width:0; position:sticky; top:10px; }
/* 手机端：竖排 */
@media (max-width:1024px) {
  .verify-layout { grid-template-columns:1fr; }
  .verify-right { position:static; }
}

/* ============ 号码选择器 ============ */
/* 双色球/大乐透：红蓝并排两栏布局 */
.picker-layout {
  display:flex; gap:16px; align-items:stretch; margin-bottom:14px;
}
.picker-2col .num-picker { flex:1; min-width:0; }
/* 手机端：红蓝竖排 */
@media (max-width:768px) {
  .picker-layout { flex-direction:column; }
}

.num-picker {
  background:var(--bg); border:1px solid var(--border);
  border-radius:10px; padding:16px;
}
.num-picker.red { background:#fef2f2; border-color:#fecaca; }
.num-picker.blue { background:#eff6ff; border-color:#bfdbfe; }
.num-picker .label {
  font-size:14px; color:var(--text); margin-bottom:12px;
  display:flex; justify-content:space-between; align-items:center;
  font-weight:600;
}
.num-picker .label-title { display:inline-flex; align-items:center; gap:6px; }
.num-picker .label .dot {
  display:inline-block; width:12px; height:12px; border-radius:50%;
}
.num-picker .label .dot-red { background:#ef4444; }
.num-picker .label .dot-blue { background:#2563eb; }
.num-picker .label .count {
  font-size:12px; color:var(--blue); font-weight:700;
  background:#fff; padding:3px 10px; border-radius:10px;
  border:1px solid var(--border-soft);
}

/* 固定列数网格（不再 auto-fill 挤一行）*/
.num-picker .grid {
  display:grid; gap:6px; justify-content:center;
}
/* 红球网格：7 列 */
.num-picker .grid.grid-red {
  grid-template-columns:repeat(7, 1fr);
}
/* 蓝球网格：8 列 */
.num-picker .grid.grid-blue {
  grid-template-columns:repeat(8, 1fr);
}
/* 七乐彩：10 列（30 个号 3 行），球限制最大 36px */
.num-picker .grid.grid-qlc {
  grid-template-columns:repeat(10, 1fr);
  gap:6px;
}
.num-picker .grid.grid-qlc .nb {
  max-width:36px; max-height:36px;
  justify-self:center;        /* 居中，不撑满列 */
}
/* 快乐8：10 列（80 个号 8 行），球较大易读 */
.num-picker .grid.grid-kl8 {
  grid-template-columns:repeat(10, 1fr);
  gap:6px;
}

/* ============ 号码球基础样式（紧凑，尺寸由列宽决定）============ */
.num-picker .nb {
  aspect-ratio:1;            /* 正方形 */
  width:100%;                /* 撑满列宽 */
  border-radius:50%;         /* 默认圆形 */
  border:1.5px solid var(--border);
  background:#fff;
  cursor:pointer;
  font-size:13px; font-weight:700;
  font-family:var(--mono); color:var(--text);
  transition:.12s;
  display:flex; align-items:center; justify-content:center;
  user-select:none;
  /* 不设 min-width/min-height，让列宽决定尺寸 */
}
.num-picker .nb:hover {
  border-color:var(--blue); transform:scale(1.1);
}
.num-picker.red .nb.selected {
  background:#ef4444; color:#fff; border-color:#ef4444;
  box-shadow:0 2px 6px rgba(239,68,68,.3); transform:scale(1.1);
}
.num-picker.blue .nb.selected {
  background:#2563eb; color:#fff; border-color:#2563eb;
  box-shadow:0 2px 6px rgba(37,99,235,.3); transform:scale(1.1);
}

/* 快乐8 球：圆角方块，字号适中 */
.num-picker .grid.grid-kl8 .nb {
  border-radius:6px;
  font-size:13px;
  border-width:1px;
}

/* 计数徽章 */
.num-picker .count.count-full {
  background:#dcfce7; color:#16a34a; border-color:#86efac;
}

/* 快乐8玩法下拉 */
.input-mini {
  font-size:12px; padding:3px 8px;
  width:auto; min-width:120px;
  margin-left:6px;
  border-radius:6px;
  border:1px solid var(--border);
  background:#fff;
}

/* ============ 数字型逐位选号（fc3d/pl3/pl5/qxc）============ */
.digit-rows { display:flex; flex-direction:column; gap:10px; }
.digit-row {
  display:flex; align-items:center; gap:12px;
  padding:8px 10px; background:#fff; border-radius:8px;
  border:1px solid var(--border-soft);
}
.digit-row-label {
  font-size:12px; color:var(--dim); font-weight:600;
  width:50px; flex-shrink:0; text-align:right;
}
.digit-row-balls {
  display:flex; gap:8px; flex-wrap:wrap;
}
.digit-row-balls .digit-nb {
  width:38px; height:38px; min-width:38px;
  border-radius:8px; aspect-ratio:auto;
  font-size:16px;
}

/* 建议提示 */
.suggest {
  font-size:11px; color:var(--dim); font-weight:400; margin-left:4px;
}

/* ============ 号码验证结果（卡片式）============ */
.verify-hit-list {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr));
  gap:14px; margin-top:14px;
}
.verify-card {
  background:var(--panel); border:1px solid var(--border);
  border-radius:12px; padding:14px 16px;
  display:flex; flex-direction:column; gap:10px;
  transition:.2s;
}
.verify-card:hover { box-shadow:0 4px 14px rgba(0,0,0,.06); transform:translateY(-1px); }
/* 奖级配色 */
.verify-card-top  { border-left:4px solid #dc2626; background:linear-gradient(180deg,#fef2f2 0%,#fff 60%); }
.verify-card-high { border-left:4px solid #ea580c; background:linear-gradient(180deg,#fff7ed 0%,#fff 60%); }
.verify-card-mid  { border-left:4px solid #ca8a04; background:linear-gradient(180deg,#fefce8 0%,#fff 60%); }
.verify-card-low  { border-left:4px solid #16a34a; background:linear-gradient(180deg,#f0fdf4 0%,#fff 60%); }

.verify-card-head {
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding-bottom:8px; border-bottom:1px dashed var(--border-soft);
}
.verify-period { font-family:var(--mono); font-size:13px; font-weight:600; color:var(--text); }
.verify-date { font-size:11px; color:var(--dim); }
.verify-prize-badge {
  font-size:12px; font-weight:700; padding:3px 10px; border-radius:12px;
  background:#dc2626; color:#fff; white-space:nowrap;
}
.verify-card-high .verify-prize-badge { background:#ea580c; }
.verify-card-mid  .verify-prize-badge { background:#ca8a04; }
.verify-card-low  .verify-prize-badge { background:#16a34a; }

.verify-card-body { display:flex; flex-direction:column; gap:8px; }
.verify-row { display:flex; align-items:center; gap:10px; }
.verify-row-label {
  font-size:11px; color:var(--dim); width:48px; flex-shrink:0;
  text-align:right;
}
.verify-row-balls { display:flex; align-items:center; flex-wrap:wrap; gap:5px; }

/* 验证页大圆形球 */
.vg-ball {
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  font-size:13px; font-weight:700; font-family:var(--mono);
  color:#fff; box-sizing:border-box;
}
.vg-ball.vg-red { background:#cbd5e1; color:#fff; }       /* 默认灰（未命中）*/
.vg-ball.vg-blue { background:#cbd5e1; color:#fff; }
.vg-ball.vg-digit {
  width:auto; min-width:28px; padding:0 8px; height:30px;
  border-radius:6px; background:#cbd5e1;
}
/* 命中高亮（用户号：恢复彩色 + 金边强调）*/
.vg-ball.vg-hit.vg-red { background:#ef4444; box-shadow:0 0 0 2px #fbbf24; }
.vg-ball.vg-hit.vg-blue { background:#2563eb; box-shadow:0 0 0 2px #fbbf24; }
.vg-ball.vg-hit.vg-digit { background:#ef4444; box-shadow:0 0 0 2px #fbbf24; }

/* 开奖号统一彩色（用户参照）*/
.verify-row:first-child .vg-ball.vg-red { background:#ef4444; }
.verify-row:first-child .vg-ball.vg-blue { background:#2563eb; }
.verify-row:first-child .vg-ball.vg-digit { background:#ef4444; }

.vg-sep { color:var(--faint); margin:0 2px; font-size:14px; }

.verify-card-foot {
  display:flex; justify-content:flex-end; padding-top:6px;
  border-top:1px dashed var(--border-soft);
}
.verify-match {
  font-size:12px; font-weight:600; color:var(--dim);
  font-family:var(--mono);
}

/* 空状态 */
.verify-empty {
  grid-column:1 / -1;
  text-align:center; padding:40px 20px;
  color:var(--dim);
}
.verify-empty-icon { font-size:48px; margin-bottom:10px; }
.verify-empty-sub { font-size:12px; color:var(--faint); margin-top:6px; }

.actions { display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }

/* ============ 会员中心 ============ */
.member-row {
  display:flex; justify-content:space-between; padding:12px 0;
  border-bottom:1px solid var(--border-soft); font-size:14px;
}
.member-row:last-child { border-bottom:none; }
.member-row .lab { color:var(--dim); }
.member-row .val { font-weight:600; color:var(--text); font-family:var(--mono); }
.member-row .val.green { color:var(--green); }
.member-row .val.amber { color:var(--amber); }
.link-danger { color:var(--red); font-size:12px; }
.empty-hint { font-size:13px; color:var(--dim); padding:14px 0; }

/* ============ 认证表单 ============ */
.auth-wrap { max-width:400px; margin:30px auto; }
.auth-card { background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:32px; }
.auth-card h2 { font-size:20px; font-weight:700; margin-bottom:6px; text-align:center; }
.auth-card .sub { text-align:center; font-size:13px; color:var(--dim); margin-bottom:24px; }
.form-row { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.form-row label { font-size:13px; color:var(--dim); min-width:80px; }
.alt { text-align:center; font-size:13px; color:var(--dim); margin-top:18px; }

/* ============ 下载页 ============ */
.download-hero {
  background:linear-gradient(135deg,#0f172a 0%,#1e3a8f 100%);
  color:#fff; border-radius:14px; padding:36px; margin-bottom:20px; text-align:center;
}
.download-hero .app-icon {
  width:80px; height:80px; border-radius:18px;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  margin:0 auto 16px; display:flex; align-items:center; justify-content:center; font-size:40px;
}
.download-hero h1 { font-size:28px; margin-bottom:8px; }
.download-hero .sub { font-size:15px; opacity:.8; margin-bottom:24px; }
.download-hero .meta {
  display:flex; justify-content:center; gap:30px; font-size:13px;
  margin-bottom:24px; flex-wrap:wrap;
}
.download-hero .meta b { display:block; font-size:15px; margin-top:3px; }
.download-hero .hint { font-size:12px; opacity:.7; margin-top:12px; }
.screenshot-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin:20px 0; }
.screenshot { background:#fff; border-radius:10px; overflow:hidden; border:1px solid var(--border-soft); }
.screenshot .img {
  height:140px; background:linear-gradient(135deg,#e0e7ff,#ddd6fe);
  display:flex; align-items:center; justify-content:center; font-size:40px;
}
.screenshot .cap { padding:10px; font-size:12px; color:var(--dim); }
.screenshot .cap .hl { color:var(--blue); display:block; margin-top:3px; }
.install-steps { padding-left:20px; font-size:13px; color:var(--dim); line-height:1.9; }

/* ============ 底部 ============ */
.footer {
  background:var(--panel); border-top:1px solid var(--border);
  padding:24px 32px; margin-top:30px; text-align:center;
  font-size:12px; color:var(--dim); line-height:1.8;
}
.footer .warning { color:var(--amber); font-weight:500; margin-bottom:6px; }
.footer .icp a { color:var(--faint); }
.footer .icp a:hover { color:var(--dim); }

/* ============ 状态 ============ */
.loading { text-align:center; color:var(--faint); padding:30px; font-size:13px; }
.loading-cell { text-align:center; color:var(--faint); }
.empty-state { text-align:center; padding:40px; color:var(--dim); }
.empty-icon { font-size:48px; margin-bottom:12px; }

/* ============ 管理员录入 ============ */
.optional-fields {
  margin-top:18px; padding:14px;
  background:var(--bg); border:1px dashed var(--border); border-radius:8px;
}
.optional-fields summary {
  cursor:pointer; font-size:13px; color:var(--dim); font-weight:500;
  list-style:none;
}
.optional-fields summary::before { content:"▾ "; }
.optional-fields[open] summary::before { content:"▴ "; }
.admin-lottery-tabs {
  display:flex; gap:4px; background:var(--panel); border:1px solid var(--border);
  border-radius:10px; padding:5px; margin-bottom:18px; flex-wrap:wrap;
}
.admin-lottery-tabs a {
  padding:7px 14px; border-radius:7px; color:var(--dim); font-size:13px;
  cursor:pointer; text-decoration:none;
}
.admin-lottery-tabs a:hover { background:var(--bg); color:var(--text); text-decoration:none; }
.admin-lottery-tabs a.active { background:var(--blue); color:#fff; font-weight:600; }

/* ============ 滚动条 ============ */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:#94a3b8; }
::-webkit-scrollbar-track { background:transparent; }

/* ============ 响应式 ============ */
/* ============================================================
   移动端响应式适配（≤768px）
   不改 HTML 结构，纯 CSS 自适应
   ============================================================ */

/* 平板断点（≤1024px） */
@media (max-width:1024px) {
  .navbar-inner { padding:0 16px; gap:16px; }
  .container { padding:20px; }
}

/* 手机断点（≤768px） */
@media (max-width:768px) {
  /* 全局 */
  body { font-size:13px; }
  .container { padding:12px; }

  /* 导航栏：压缩高度，彩种横向滑动 */
  .navbar { position:sticky; top:0; }
  .navbar-inner {
    flex-wrap:wrap; height:auto; padding:8px 12px; gap:8px;
  }
  .logo { font-size:15px; }
  .logo-mark { width:24px; height:24px; font-size:12px; }
  .lottery-links {
    order:3; width:100%; overflow-x:auto;
    flex-wrap:nowrap; -webkit-overflow-scrolling:touch;
    padding-bottom:4px;
  }
  .lottery-links a {
    padding:5px 9px; font-size:12px; white-space:nowrap; flex-shrink:0;
  }
  .auth-links { gap:8px; }
  .auth-links a { font-size:12px; }
  .auth-links .btn-reg { padding:5px 10px; font-size:12px; }

  /* 页面标题 */
  .page-header { flex-direction:column; align-items:flex-start; gap:10px; }
  .page-header h1 { font-size:18px; }
  .page-header .sub { font-size:12px; }
  .page-header .actions { width:100%; flex-wrap:wrap; }
  .page-header .actions .input,
  .page-header .actions select { font-size:12px; padding:5px 8px; }

  /* 开奖大卡 */
  .draw-hero { flex-direction:column; align-items:flex-start; padding:16px; }
  .draw-hero .right { text-align:left; width:100%; }
  .draw-hero .balls { flex-wrap:wrap; gap:6px; }
  .draw-hero .ball { width:32px; height:32px; font-size:13px; }
  .draw-hero .ball-sep { font-size:14px; margin:0 2px; }

  /* 功能卡片：单列 */
  .feature-grid {
    grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px;
  }
  .feature-card { padding:14px 12px; }
  .feature-card .icon { width:32px; height:32px; font-size:16px; }
  .feature-card h3 { font-size:13px; }
  .feature-card p { font-size:11px; }

  /* 指标网格：2列 */
  .metric-grid {
    grid-template-columns:repeat(2,1fr); gap:8px; margin-bottom:12px;
  }
  .metric { padding:10px; }
  .metric .val { font-size:16px; }
  .metric .lab { font-size:10px; }
  .metric .sub { font-size:10px; }

  /* 面板 */
  .panel { padding:14px; margin-bottom:12px; }
  .panel h2 { font-size:14px; }
  .panel h3 { font-size:13px; }

  /* 走势图：横向滚动 */
  .trend-scroll {
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    max-height:400px;
  }
  .trend-scroll-wide {
    overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  .trend-table { font-size:10px; }
  .trend-table th, .trend-table td {
    padding:2px 2px; min-width:22px;
  }
  .trend-table .ball { width:18px; height:18px; font-size:9px; line-height:18px; }
  .trend-table .gap { font-size:9px; }
  .trend-table .pd { font-size:8px; }

  /* 开奖列表表格：横向滚动 */
  .panel-tight { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .panel-tight > table { font-size:11px; }

  /* 号码球（通用）：缩小 */
  .ball { width:28px; height:28px; font-size:12px; line-height:28px; }
  .ball-sm { width:24px; height:24px; font-size:11px; line-height:24px; }

  /* 子图表区域：单列 */
  .sub-charts { grid-template-columns:1fr; gap:12px; }
  .chart-card { padding:10px; }
  .chart-box { height:180px; }

  /* 号码选择器 */
  .picker-layout { flex-direction:column; gap:10px; }
  .num-picker { padding:12px; }
  .num-picker .grid {
    grid-template-columns:repeat(6,1fr) !important; gap:5px;
  }
  .num-picker .grid.grid-qlc,
  .num-picker .grid.grid-kl8 {
    grid-template-columns:repeat(8,1fr) !important;
  }
  .num-picker .nb { font-size:11px; }

  /* 验证页面 */
  .verify-layout { grid-template-columns:1fr; }
  .verify-right { position:static; }

  /* 结果号码球区域 */
  .result-balls { flex-wrap:wrap; gap:5px; }

  /* 表格通用 */
  table { font-size:12px; }
  th, td { padding:4px 6px; }

  /* 表单 */
  .input, select, textarea {
    font-size:13px; padding:6px 10px;
  }

  /* 按钮组 */
  .actions { flex-wrap:wrap; gap:6px; }
  .actions .btn { padding:5px 10px; font-size:12px; }

  /* 图例 */
  .legend { flex-wrap:wrap; gap:8px; font-size:11px; }

  /* 免责声明 */
  .warning { font-size:11px; }

  /* 登录/注册卡片 */
  .auth-card { padding:20px; margin:16px 0; }
  .auth-wrap { margin:16px auto; padding:0 8px; }
}

/* 小屏手机（≤480px）进一步压缩 */
@media (max-width:480px) {
  body { font-size:12px; }
  .feature-grid { grid-template-columns:1fr; }
  .metric-grid { grid-template-columns:1fr 1fr; }
  .draw-hero .ball { width:28px; height:28px; font-size:12px; }
  .ball { width:26px; height:26px; font-size:11px; line-height:26px; }
  .navbar-inner { padding:6px 10px; }
  .logo { font-size:14px; gap:6px; }
}