/* ============================================
   鸿运当头 · 智能分析系统
   深色高级主题: 深黑蓝渐变底 + 金色点缀 + 细腻光效
   ============================================ */
:root {
  --bg: #0b0f1a;
  --bg-deep: #080b13;
  --surface: #141b2d;
  --surface-2: #182136;
  --border: rgba(212, 175, 55, 0.16);
  --border-soft: rgba(255, 255, 255, 0.06);
  --text: #e8eaf2;
  --dim: #7e8aa5;
  --accent: #d4af37;
  --accent-deep: #a9861f;
  --accent-soft: rgba(212, 175, 55, 0.10);
  --gold: #d4af37;
  --green: #3ddc84;
  --green-soft: rgba(61, 220, 132, 0.12);
  --red: #ff6b6b;
  --red-soft: rgba(255, 107, 107, 0.12);
  --font-mono: 'SF Mono', 'Cascadia Code', Consolas, 'Courier New', monospace;
  --font-serif: 'Songti SC', 'STSong', 'SimSun', 'Noto Serif SC', serif;
  --sidebar-w: 210px;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 8px 28px rgba(0,0,0,0.30);
  --glow-gold: 0 0 0 1px rgba(212,175,55,0.10), 0 6px 24px rgba(212,175,55,0.06);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: 'Microsoft YaHei UI', 'Microsoft YaHei', 'Noto Sans SC', 'PingFang SC', sans-serif;
  font-size: 15px;
  letter-spacing: 0.3px;
  background: radial-gradient(1200px 600px at 85% -10%, rgba(212,175,55,0.07), transparent 60%),
              radial-gradient(1000px 700px at -10% 110%, rgba(64,110,220,0.08), transparent 55%),
              linear-gradient(160deg, var(--bg) 0%, var(--bg-deep) 100%);
  color: var(--text); display: flex; height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ===== 侧边栏 ===== */
.sidebar {
  width: var(--sidebar-w); background: rgba(13, 18, 32, 0.92);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; flex-shrink: 0; z-index: 10;
  backdrop-filter: blur(6px);
}
.logo {
  display: flex; align-items: center; gap: 11px;
  padding: 20px 18px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(212,175,55,0.06), transparent);
}
.logo-icon {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #e8c96a 0%, #a9861f 100%);
  color: #1a1405; flex-shrink: 0;
  font-family: var(--font-serif); font-size: 19px; font-weight: 700;
  box-shadow: 0 2px 10px rgba(212,175,55,0.35), inset 0 1px 0 rgba(255,255,255,0.35);
}
.logo-text { font-size: 17px; font-weight: 700; letter-spacing: 2px; font-family: var(--font-serif); color: #f0e6c8; }
.logo-sub { font-size: 8.5px; color: var(--gold); letter-spacing: 2.2px; font-family: var(--font-mono); margin-top: 2px; opacity: 0.8; }

nav { flex: 1; padding: 14px 10px; overflow-y: auto; }
nav a {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  color: var(--dim); text-decoration: none; font-size: 14.5px; border-radius: 8px;
  transition: color 0.18s, background 0.18s, box-shadow 0.18s; margin-bottom: 3px;
  border-left: 3px solid transparent;
}
nav a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; flex-shrink: 0; }
nav a:hover { color: #d8dce8; background: rgba(255,255,255,0.04); }
nav a.active {
  color: var(--gold); background: linear-gradient(90deg, rgba(212,175,55,0.14), rgba(212,175,55,0.03));
  font-weight: 600; border-left-color: var(--gold); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.sidebar-footer { padding: 14px 18px; border-top: 1px solid var(--border); font-size: 10.5px; color: var(--dim); }
.status-row { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #3a4256; flex-shrink: 0; box-shadow: 0 0 6px rgba(58,66,86,0.8); }
.pulse-dot.online { background: var(--green); box-shadow: 0 0 8px rgba(61,220,132,0.8); }
.data-range { font-family: var(--font-mono); font-size: 9px; word-break: break-all; letter-spacing: 0.3px; opacity: 0.75; }

/* ===== 主区 ===== */
main { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.page { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 24px 30px; }
.page-head { flex-shrink: 0; margin-bottom: 18px; }
.page-title {
  font-size: 22px; font-weight: 700; letter-spacing: 1px; color: #f0e6c8;
  text-shadow: 0 0 24px rgba(212,175,55,0.25);
}
.page-sub { font-size: 13px; color: var(--dim); margin-top: 6px; letter-spacing: 0.4px; }
.page-body { flex: 1; overflow-y: auto; min-height: 0; padding-right: 6px; }

.page-loading { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--dim); font-size: 13px; }
.loader-ring { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(212,175,55,0.15); border-top-color: var(--gold); animation: spin 0.9s linear infinite; box-shadow: 0 0 12px rgba(212,175,55,0.15); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== 卡片 ===== */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.card {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 16px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: transform 0.18s, box-shadow 0.18s;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow), var(--glow-gold), inset 0 1px 0 rgba(255,255,255,0.05); }
.card .label { font-size: 12px; color: var(--dim); letter-spacing: 1px; margin-bottom: 8px; }
.card .value { font-size: 24px; font-weight: 700; font-family: var(--font-mono); }
.card .sub { font-size: 12px; color: var(--dim); margin-top: 6px; }
.c-green { color: var(--green); } .c-red { color: var(--red); }
.c-gold { color: var(--gold); } .c-accent { color: var(--gold); }

/* ===== 面板 ===== */
.panel {
  background: linear-gradient(180deg, rgba(24,33,54,0.85) 0%, rgba(20,27,45,0.95) 100%);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; margin-bottom: 16px; box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.04);
}
.panel h3 { font-size: 14px; font-weight: 600; color: #c8b98a; letter-spacing: 1.2px; margin-bottom: 14px; }
.panel h4 { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1000px) { .panel-grid { grid-template-columns: 1fr; } }

/* ===== 表格 ===== */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; padding: 8px 12px; color: #9a8b58; font-weight: 500;
  font-size: 11.5px; letter-spacing: 1.2px; border-bottom: 1px solid rgba(212,175,55,0.22);
  white-space: nowrap;
}
td { padding: 9px 12px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255,255,255,0.03); }
.table-wrap { overflow: auto; }

/* ===== 通用小字 ===== */
.dim { color: var(--dim); font-size: 12.5px; }

/* ===== 数字块 (深色波色) ===== */
/* 参考站样式: 圆形波色球 + 球下生肖/五行 (2026-08-20) */
.num-block {
  display: inline-flex; flex-direction: column; align-items: center;
  margin: 1px; font-family: var(--font-mono);
  background: none; border: none; box-shadow: none; width: auto;
}
.num-block .num {
  width: 46px; height: 46px; border-radius: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700; line-height: 1; color: #fff;
  transition: transform 0.15s, box-shadow 0.15s;
}
.num-block:hover .num { transform: translateY(-1px); }
.num-block .zod { font-size: 14px; font-weight: 700; line-height: 1.2; margin-top: 4px; opacity: 0.95; display: flex; align-items: center; justify-content: center; gap: 1px; }
.num-block.excluded { opacity: 0.45; }
.num-block.excluded .num { filter: grayscale(0.6); }
.wave-red .num { background: #e53935; }
.wave-red .zod { color: #ff8a80; }
.wave-blue .num { background: #1e88e5; }
.wave-blue .zod { color: #82b1ff; }
.wave-green .num { background: #43a047; }
.wave-green .zod { color: #69f0ae; }
/* 命中框: 号码球描边 */
.num-block.hit-frame .num { outline: 2px solid var(--gold); outline-offset: 1px; box-shadow: 0 0 12px rgba(212,175,55,0.5); }
/* 命中框: 文本内容 (非号码块) */
span.hit-frame:not(.num-block) { outline: 2px solid var(--gold); outline-offset: 1px; box-shadow: 0 0 10px rgba(212,175,55,0.3); max-width: 100%; }

/* ===== 预测历史: 命中加框 (金色框 + 光晕) ===== */

/* 特码球 (macaujc 样式: 与平码同尺寸方块, 数字24px小一号) */
.num-block[style*="52px"] .num, .num-block[style*="54px"] .num { width: 46px; height: 46px; font-size: 24px; }

/* ===== tag ===== */
.tag { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; margin: 0 1px; }
.tag-win { background: var(--green-soft); color: var(--green); }
.tag-lose { background: var(--red-soft); color: var(--red); }

/* ===== 表单 ===== */
.form-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 10px; color: var(--dim); letter-spacing: 1px; }
input, select {
  background: rgba(10,14,26,0.85); border: 1px solid rgba(255,255,255,0.10); color: var(--text);
  padding: 8px 12px; border-radius: 8px; font-size: 14px; outline: none; font-family: var(--font-mono);
  transition: border-color 0.18s, box-shadow 0.18s;
}
input:focus, select:focus { border-color: rgba(212,175,55,0.55); box-shadow: 0 0 0 3px rgba(212,175,55,0.12); }
.btn {
  background: linear-gradient(180deg, #e8c96a 0%, #c49a2a 100%);
  color: #1a1405; border: none; padding: 7px 18px; border-radius: 8px;
  cursor: pointer; font-size: 14px; font-weight: 600; letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(212,175,55,0.25), inset 0 1px 0 rgba(255,255,255,0.35);
  transition: filter 0.18s, transform 0.1s, box-shadow 0.18s;
}
.btn:hover { filter: brightness(1.08); box-shadow: 0 3px 14px rgba(212,175,55,0.35), inset 0 1px 0 rgba(255,255,255,0.35); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: default; }
.btn-outline { background: rgba(10,14,26,0.6); border: 1px solid rgba(212,175,55,0.35); color: #e0c878; }
.btn-outline:hover { border-color: var(--gold); color: var(--gold); background: rgba(212,175,55,0.08); box-shadow: 0 0 12px rgba(212,175,55,0.15); }

/* ===== 进度条 ===== */
.progress-wrap { display: none; margin: 14px 0; }
.progress-wrap.show { display: block; }
.progress-bar { height: 5px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; width: 0%; border-radius: 3px; background: linear-gradient(90deg, #a9861f, #e8c96a); box-shadow: 0 0 8px rgba(212,175,55,0.5); transition: width 0.25s; }
.progress-text { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--dim); margin-top: 6px; font-family: var(--font-mono); }

/* ===== 分页 ===== */
.pagination { display: flex; gap: 5px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.pagination button {
  background: rgba(10,14,26,0.7); border: 1px solid rgba(255,255,255,0.10); color: var(--dim);
  padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 12px; font-family: var(--font-mono);
  transition: all 0.15s;
}
.pagination button:hover { border-color: var(--gold); color: var(--gold); }
.pagination button.active { background: rgba(212,175,55,0.14); border-color: var(--gold); color: var(--gold); font-weight: 600; }
.pagination button:disabled { opacity: 0.4; cursor: default; }

/* ===== 工具 ===== */
.empty { text-align: center; padding: 44px 0; color: var(--dim); font-size: 14px; letter-spacing: 0.5px; }
.err-box { background: var(--red-soft); border: 1px solid rgba(255,107,107,0.35); color: var(--red); padding: 11px 15px; border-radius: 10px; font-size: 12.5px; margin-bottom: 14px; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.22); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(212,175,55,0.4); }

/* ============================================
   登录页
   ============================================ */
.login-screen {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(900px 500px at 50% -10%, rgba(212,175,55,0.10), transparent 60%),
              radial-gradient(800px 600px at 90% 110%, rgba(64,110,220,0.10), transparent 55%),
              linear-gradient(160deg, var(--bg) 0%, var(--bg-deep) 100%);
}
.login-box {
  background: linear-gradient(180deg, rgba(24,33,54,0.92), rgba(16,22,40,0.96));
  border: 1px solid var(--border); border-radius: 16px;
  padding: 42px 44px; width: 340px; max-width: 90vw; text-align: center;
  box-shadow: 0 24px 70px rgba(0,0,0,0.55), 0 0 40px rgba(212,175,55,0.06), inset 0 1px 0 rgba(255,255,255,0.06);
}
.login-brand {
  width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #e8c96a 0%, #a9861f 100%);
  color: #1a1405;
  font-family: var(--font-serif); font-size: 28px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(212,175,55,0.4), inset 0 1px 0 rgba(255,255,255,0.4);
}
.login-box h2 { font-size: 20px; letter-spacing: 4px; font-family: var(--font-serif); margin-bottom: 8px; color: #f0e6c8; }
.login-box .sub { font-size: 11px; color: var(--dim); letter-spacing: 1.5px; margin-bottom: 26px; }
.login-box .field { margin-bottom: 16px; text-align: left; }
.login-box input { width: 100%; padding: 10px 13px; font-size: 14px; }
.login-box .btn { width: 100%; padding: 10px; font-size: 14px; letter-spacing: 3px; }
.login-err { color: var(--red); font-size: 11.5px; margin-bottom: 10px; min-height: 16px; }

/* ============================================
   手机端适配
   ============================================ */
/* ============================================
   手机端 H5 布局 (顶栏 + 底部Tab + 整页滚动)
   ============================================ */
.m-header, .m-tabbar { display: none; }

@media (max-width: 768px) {
  /* 整页滚动 (替代桌面固定视口) */
  html, body { overflow: auto; height: auto; font-size: 16px; }
  body { flex-direction: column; min-height: 100vh; }
  .sidebar { display: none; }

  /* 顶部栏 */
  .m-header {
    display: flex; align-items: center; gap: 10px;
    position: fixed; top: 0; left: 0; right: 0; height: 56px; padding: 0 14px;
    background: rgba(11, 15, 26, 0.94); border-bottom: 1px solid var(--border);
    backdrop-filter: blur(8px); z-index: 100;
  }
  .m-logo {
    width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #e8c96a 0%, #a9861f 100%);
    color: #1a1405; font-family: var(--font-serif); font-size: 17px; font-weight: 700;
    box-shadow: 0 2px 8px rgba(212,175,55,0.35);
  }
  .m-title { font-size: 17px; font-weight: 700; letter-spacing: 1.5px; color: #f0e6c8; font-family: var(--font-serif); }
  .m-status { margin-left: auto; display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--dim); }
  .m-logout {
    background: none; border: 1px solid rgba(212,175,55,0.35); color: #e0c878;
    border-radius: 6px; padding: 5px 14px; font-size: 13px; cursor: pointer;
  }

  /* 底部导航 */
  .m-tabbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; height: 64px;
    background: rgba(11, 15, 26, 0.97); border-top: 1px solid var(--border);
    z-index: 100; padding-bottom: env(safe-area-inset-bottom);
  }
  .m-tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; color: var(--dim); font-size: 13px; text-decoration: none;
    transition: color 0.15s;
  }
  .m-tabbar a svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; }
  .m-tabbar a.active { color: var(--gold); }
  .m-tabbar a.active svg { filter: drop-shadow(0 0 6px rgba(212,175,55,0.5)); }

  /* 主区适配 */
  main { overflow: visible; }
  .page { overflow: visible; padding: 66px 14px 76px; }
  .page-body { overflow: visible; padding-right: 0; }

  :root { --sidebar-w: 0px; }
  .logo { padding: 16px 0; justify-content: center; }
  .logo-text, .logo-sub { display: none; }
  nav { padding: 10px 5px; }
  nav a { justify-content: center; padding: 11px 0; border-left: none; }
  nav a svg { width: 20px; height: 20px; }
  .sidebar-footer { padding: 12px 8px; }
  .status-row { justify-content: center; }
  .status-row span:not(.pulse-dot) { display: none; }
  .data-range { display: none; }
  .page-head { margin-bottom: 12px; }
  .page-title { font-size: 20px; }
  .page-sub { font-size: 13px; }
  /* H5: 号码球统一缩小 (覆盖特码大球内联样式) */
  .num-block .num { width: 34px !important; height: 34px !important; font-size: 22px !important; }
  .num-block .zod { font-size: 12px; }
  /* H5: 开奖历史行 */
  .dw-qid { width: 26% !important; }
  .dw-qid .dim { font-size: 12px; }
  .table-wrap { -webkit-overflow-scrolling: touch; }
  table { font-size: 13px; }
  th, td { padding: 7px 9px; }
  .panel-grid { grid-template-columns: 1fr; }
  .panel { padding: 16px 18px; }
  .cards { gap: 10px; }
  input, select { font-size: 14px; padding: 8px 11px; max-width: 160px; }
  .btn { padding: 8px 16px; font-size: 14px; }
  @media (max-width: 480px) {
    .num-block .num { width: 30px !important; height: 30px !important; font-size: 19px !important; }
    .num-block .zod { font-size: 11px; }
    .page { padding: 62px 12px 72px; }
    /* H5: 开奖历史行变纵向 (日期期号在上, 号码在下) */
    .dw-row { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
    .dw-qid {
      width: 100% !important; display: flex !important; justify-content: space-between !important;
      align-items: baseline !important; text-align: left !important;
    }
    .dw-qid > div:last-child { font-size: 16px; margin-top: 0 !important; }
    .page-title { font-size: 19px; }
  }
}
/* 直播状态点 (2026-08-21) */
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: #555; display: inline-block; transition: background .3s; flex-shrink: 0; }
.live-dot.on { background: #22c55e; animation: livePulse 1.6s infinite; }
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 4px rgba(34,197,94,.5); }
  50% { box-shadow: 0 0 14px rgba(34,197,94,1); }
}
#live_video::-webkit-media-controls { border-radius: 10px; }

/* 实时开奖: 号码区 (2026-08-21 参照 macaujc 开奖直播页: 8格 6平码+红+ +特码, 灰底黑字) */
#dw_live_balls { align-items: flex-end; flex-wrap: nowrap; overflow: visible; gap: 6px; }
#dw_live_balls .mjc-slot { flex: 0 1 auto; width: min(46px, calc((100% - 42px) / 8)); max-width: 46px; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.mjc-ball {
  width: 100%; aspect-ratio: 1; background: #ccc; color: #000;
  font-size: min(28px, 7.6vw); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.mjc-ball-zod { font-size: min(19px, 5.2vw); font-weight: 700; margin-top: 4px; color: #9aa0aa; white-space: nowrap; min-height: 22px; text-align: center; width: 100%; }
.mjc-plus { color: #da0f1f; font-size: min(28px, 7.6vw); font-weight: 700; display: flex; align-items: center; justify-content: center; height: 100%; }

/* 开奖格弹出动画 */
@keyframes mjcPop {
  0% { transform: scale(.7); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* 开奖记录列表: 两排结构 (期号+日期一排靠左 / 号码+生肖第二排), 第二排与"一颗一颗开奖"完全同款 */
.mjc-row-balls { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 6px; }
.mjc-row-balls .mjc-slot { flex: 0 1 auto; width: min(46px, calc((100% - 42px) / 8)); max-width: 46px; min-width: 0; }
.mjc-row-balls .mjc-ball { font-size: min(28px, 7.6vw); }
.mjc-row-balls .mjc-ball-zod { font-size: min(19px, 5.2vw); margin-top: 4px; min-height: 22px; }
.mjc-row-balls .mjc-plus { font-size: min(28px, 7.6vw); }

/* 平肖/特肖项: 每排6个, 可爱图标+生肖名+间隔在下方 */
.zo-6col { flex: 1 1 15%; min-width: 0; text-align: center; padding: 6px 2px; }
.zo-zod-emoji { font-size: 24px; line-height: 1.2; }
.zo-zod-name { font-size: 13px; font-weight: 700; color: #e8ecf4; margin-top: 2px; }
.zo-zod-gap { font-size: 11px; color: #8a94a6; margin-top: 1px; }
.zo-now .zo-zod-gap { color: #d4af37; font-weight: 700; }

/* 特码49数字生肖分组表格: 12列均分容器宽度, 紧凑无滑动 */
.zo49-col { flex: 1 1 0; min-width: 0; text-align: center; padding: 4px 1px; }
.zo49-zod { font-size: 12px; font-weight: 700; color: #d4af37; margin-bottom: 3px; }
.zo49-cell { margin: 2px 0; }
.zo49-ball { width: 26px; height: 26px; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; }
.zo49-now { box-shadow: 0 0 8px rgba(212,175,55,.9); border: 1px solid #d4af37; }
.zo49-gap { font-size: 9px; color: #8a94a6; margin-top: 1px; }
.zo49-gap-now { color: #d4af37; font-weight: 700; }

/* 12生肖间隔总览块 + Tab */
.zo-item { padding: 4px 10px; border-radius: 6px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); color: #c8cdd8; font-size: 12px; }
.zo-now { background: rgba(212,175,55,.12); border-color: rgba(212,175,55,.5); color: #d4af37; font-weight: 700; }
.zo-tab { padding: 4px 14px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.04); color: #c8cdd8; font-size: 12px; cursor: pointer; transition: all .2s; }
.zo-tab:hover { border-color: rgba(212,175,55,.5); color: #f0e6c8; }
.zo-tab.active { background: linear-gradient(180deg,#d4af37,#b8912f); color: #0d1424; font-weight: 700; border-color: #d4af37; }

/* 间隔标签: 筛选后自动显示在第一个命中球上方 (精简为"间隔X期"), 有专属空间不重叠 */
.gap-tag { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); background: rgba(212,175,55,.12); border: 1px solid rgba(212,175,55,.55); color: #d4af37; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; white-space: nowrap; pointer-events: none; }

/* 挑码助手: 数字区用49码表格同款样式, 球可点击 (选中亮/取消暗), 生肖标题可点击 */
#pk_grid { display: flex; flex-wrap: nowrap; gap: 2px; padding-bottom: 4px; }
#pk_grid .zo49-ball { cursor: pointer; opacity: .22; transition: all .2s; }
#pk_grid .zo49-ball.pk-on { opacity: 1; box-shadow: 0 0 8px rgba(255,255,255,.18); }
#pk_grid .zo49-zod.active { color: #f5d76e; text-shadow: 0 0 8px rgba(212,175,55,.6); }

/* 开奖历史筛选按钮 (macaujc2 风格) */
.dw-fbtn { padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.04); color: #c8cdd8; font-size: 12px; cursor: pointer; transition: all .2s; }
.dw-fbtn:hover { border-color: rgba(212,175,55,.5); color: #f0e6c8; }
.dw-fbtn.active { background: linear-gradient(180deg,#d4af37,#b8912f); color: #0d1424; font-weight: 700; border-color: #d4af37; }

/* 实时开奖页卡片 (深色面板, 无边框) */
.live-card { margin: 10px 10px 0; padding: 12px 12px 10px; background: rgba(255,255,255,0.04); border-radius: 10px; }
@media (max-width: 768px) {
  .live-card { margin: 6px 4px 0; padding: 10px 8px; }
}

/* ===== 防横向溢出 + 表格长内容折行 (2026-08-22 预测历史H5) =====
   根因: 表格单元格无空格长文本(如 7码生肖[马,蛇,...])不折行撑破表格 → 整页横向滑动
   方案: ① 全局 overflow-x:hidden 兜底(纵向滚动保留) ② 预测历史表格单元格 word-break 折行 */
html, body { overflow-x: hidden; }
#ph_body table td, #ph_body table th { word-break: break-all; overflow-wrap: anywhere; }

/* ===== 预测历史: 内容后结果标记 (2026-08-22 用户要求) ===== */
.res-hit { color: #22c55e; font-weight: 700; margin-left: 7px; white-space: nowrap; }
.res-miss { color: #ef5350; font-weight: 700; margin-left: 7px; }
.res-pending { color: var(--dim); margin-left: 7px; font-size: 11px; }

/* 预测历史: 命中框内命中元素高亮 (2026-08-22 用户要求) */
.hit-em { color: #f5d76e; font-weight: 700; }