/* ===== 娱乐快乐8开奖分析台 样式 ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --red:#c8232c; --red-d:#9e1b23; --gold:#f5c451; --gold-d:#d4a017;
  --ink:#2b2230; --muted:#8a7f88; --bg:#f6f3f7; --card:#fff;
  --line:#ece7ee; --blue:#3a6fd8; --blue-d:#2755b8; --green:#2e9e6b;
  --shadow:0 6px 22px rgba(120,60,80,.08);
}
body{
  font-family:"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.6;
}
.wrap{ max-width:1180px; margin:0 auto; padding:0 16px; }

/* 顶栏 */
.topbar{
  background:linear-gradient(135deg,#a3121b 0%,#c8232c 55%,#e0484f 100%);
  color:#fff; padding:18px 0; box-shadow:0 3px 14px rgba(160,30,40,.25);
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:14px; }
.logo{
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 30% 30%,#ffe08a,var(--gold-d));
  color:var(--red-d); font-size:26px; font-weight:900; box-shadow:0 3px 10px rgba(0,0,0,.25);
}
.topbar h1{ font-size:22px; letter-spacing:1px; }
.topbar .sub{ font-size:13px; opacity:.9; }
.badges{ display:flex; gap:8px; flex-wrap:wrap; }
.badge{
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35);
  color:#fff; padding:4px 12px; border-radius:999px; font-size:13px; white-space:nowrap;
}
.badge.warn{ background:rgba(0,0,0,.18); }

/* 标签页 */
.tabs{ display:flex; gap:6px; flex-wrap:wrap; padding:14px 16px 0; }
.tab{
  border:none; background:#efe9ef; color:#6a5f6a; padding:10px 18px; border-radius:10px 10px 0 0;
  font-size:15px; cursor:pointer; font-weight:600; transition:.18s;
}
.tab:hover{ background:#e4dce6; }
.tab.active{ background:var(--card); color:var(--red); box-shadow:var(--shadow); position:relative; }
.tab.active::after{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--gold); border-radius:3px; }
.tab.ai{ background:linear-gradient(135deg,#fff3cf,#f5c451); color:#7a5800; }
.tab.ai.active{ color:var(--red-d); }

/* 主内容 */
main{ padding-top:14px; padding-bottom:30px; }
.panel{ display:none; }
.panel.active{ display:block; animation:fade .25s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
.card{ background:var(--card); border-radius:14px; box-shadow:var(--shadow); padding:20px; margin-bottom:18px; }
.card-hd{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.card-hd h2{ font-size:19px; color:var(--red-d); }
.card-hd h3{ font-size:16px; }
.tools{ display:flex; align-items:center; gap:10px; }
.muted{ color:var(--muted); font-size:13px; }
.center{ text-align:center; margin-top:14px; }

.btn{
  border:1px solid var(--line); background:#fff; color:var(--ink); padding:9px 18px;
  border-radius:9px; font-size:14px; cursor:pointer; transition:.16s; font-weight:600;
}
.btn:hover{ border-color:var(--gold-d); color:var(--red-d); }
.btn.primary{ background:linear-gradient(135deg,var(--red),var(--red-d)); color:#fff; border-color:var(--red-d); }
.btn.primary:hover{ filter:brightness(1.06); color:#fff; }
.btn.gold{ background:linear-gradient(135deg,var(--gold),var(--gold-d)); color:#5e4500; border-color:var(--gold-d); }
.btn.ghost{ background:#faf8fa; }
.btn.sm{ padding:6px 12px; font-size:13px; }
.btn.big{ padding:12px 22px; font-size:16px; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.sel{ padding:8px 10px; border-radius:8px; border:1px solid var(--line); font-size:14px; background:#fff; }

/* 号码球 */
.ball{
  display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%;
  font-weight:700; font-size:14px; background:#f1ecf2; color:#555; margin:2px;
}
.ball.red{ background:radial-gradient(circle at 32% 28%,#ff7a80,var(--red)); color:#fff; box-shadow:0 2px 6px rgba(200,35,44,.4); }
.ball.gold{ background:radial-gradient(circle at 32% 28%,#ffe08a,var(--gold-d)); color:#6b4e00; }
.ball.blue{ background:radial-gradient(circle at 32% 28%,#7ea2f5,var(--blue)); color:#fff; box-shadow:0 2px 6px rgba(48,84,200,.4); }
.ball.sm{ width:28px; height:28px; font-size:12px; }
.ball.lg{ width:46px; height:46px; font-size:18px; }
.ball-sep{ display:inline-grid; place-items:center; width:18px; font-size:20px; font-weight:800; color:#a695a0; vertical-align:middle; }

/* 开奖记录 */
.records{ display:flex; flex-direction:column; gap:10px; }
.rec-item{ display:flex; align-items:center; gap:14px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; flex-wrap:wrap; }
.rec-item .issue{ font-weight:800; color:var(--red-d); min-width:86px; font-size:15px; }
.rec-item .date{ color:var(--muted); font-size:13px; min-width:92px; }
.rec-item .balls{ flex:1; display:flex; flex-wrap:wrap; }
.rec-item.new{ border-color:var(--gold); background:#fffaef; }

/* 官方同步栏 */
.sync-bar{ border:1px solid var(--gold-d); background:#fffdf4; border-radius:12px; padding:14px 16px; margin-bottom:16px; }
.sync-left{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sync-title{ font-weight:800; color:#7a5800; font-size:15px; }
.sync-msg{ font-size:14px; margin-top:10px; min-height:20px; font-weight:600; }
.sync-msg.ok{ color:var(--green); } .sync-msg.err{ color:var(--red); } .sync-msg.busy{ color:#8a6d1a; }
.sync-note{ font-size:12px; color:#a08a5a; line-height:1.7; margin-top:8px; }

/* 补录表单 */
.form-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
.form-row label{ display:flex; align-items:center; gap:8px; font-size:14px; color:#555; }
.form-row input[type=text], .form-row input[type=date], .ly-form input{
  padding:9px 12px; border:1px solid var(--line); border-radius:9px; font-size:14px; min-width:180px;
}
.form-row input:focus, .ly-form input:focus{ outline:none; border-color:var(--gold-d); }
#fNumbers{ flex:1; min-width:240px; }
.num-grid{ display:grid; gap:4px; margin:12px 0; }
.num-grid.red-grid{ grid-template-columns:repeat(11,1fr); }
.num-grid.blue-grid{ grid-template-columns:repeat(16,1fr); }
.num-grid .n{
  aspect-ratio:1; display:grid; place-items:center; border-radius:8px; background:#f4f0f5;
  cursor:pointer; font-weight:700; font-size:13px; color:#666; user-select:none; transition:.1s; border:1px solid transparent;
}
.num-grid .n:hover{ border-color:var(--gold-d); }
.num-grid .n.red.sel{ background:linear-gradient(135deg,var(--red),var(--red-d)); color:#fff; }
.num-grid .n.blue.sel{ background:linear-gradient(135deg,var(--blue),var(--blue-d)); color:#fff; }
.form-msg{ font-size:14px; margin-top:8px; min-height:20px; }
.form-msg.ok{ color:var(--green); } .form-msg.err{ color:var(--red); }

.table-scroll{ overflow-x:auto; }
.mini-table{ width:100%; border-collapse:collapse; font-size:13px; }
.mini-table th, .mini-table td{ padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
.mini-table th{ background:#faf7fa; color:#6a5f6a; font-weight:700; }
.mini-table td.balls-cell{ white-space:normal; }
.mini-table td.blue-cell{ text-align:center; color:var(--blue-d); font-weight:800; min-width:36px; }
.mini-table .del{ color:var(--red); cursor:pointer; border:none; background:none; font-size:13px; }
/* 十区竖线表格 */
.mini-table .zgroup-hd{ text-align:center; background:#fff7e6; color:#8a6d1a; border-bottom:1px solid #f0e6cf; }
.mini-table .zth{ text-align:center; padding:6px 0; min-width:30px; font-size:12px; color:#8a6d1a; background:#fdfaf2;
  border-left:1px solid #f0e6cf; border-bottom:1px solid var(--line); }
.mini-table tr.zsub .zth-last{ border-right:1px solid #f0e6cf; }
.mini-table td.zc{ text-align:center; padding:8px 0; min-width:30px; font-weight:700; color:var(--ink);
  border-left:1px solid #efe7ef; background:#fffdfd; }
.mini-table td.zc.zlast{ border-right:1px solid #efe7ef; }
.mini-table td.zzero{ color:#cbc3cd; font-weight:400; background:#fbfafc; }
.tag-hot{ color:var(--red); font-weight:700; } .tag-cold{ color:var(--blue); font-weight:700; }

/* 走势 */
.trend-scroll{ overflow:auto; border:1px solid var(--line); border-radius:10px; max-height:560px; }
.trend-table{ border-collapse:collapse; font-size:11px; }
.trend-table th, .trend-table td{ border:1px solid #f0ecf1; text-align:center; padding:0; min-width:20px; height:22px; }
.trend-table thead th{ background:#faf7fa; position:sticky; top:0; z-index:2; color:#6a5f6a; font-weight:600; }
.trend-table .row-head{ background:#faf7fa; position:sticky; left:0; z-index:1; font-weight:700; color:var(--red-d); padding:0 6px; white-space:nowrap; }
.trend-table td .hit{ display:inline-block; vertical-align:middle; background:radial-gradient(circle at 32% 28%,#ff858c,var(--red) 70%,#c93d4a); border-radius:50%; width:18px; height:18px; line-height:18px; color:#fff; font-size:10px; font-weight:700; text-align:center; box-shadow:0 1px 2px rgba(201,61,74,.4); }
.trend-table td .hit.blue-hit{ background:radial-gradient(circle at 32% 28%,#7ea2f5,var(--blue) 70%,#2755b8); box-shadow:0 1px 2px rgba(39,85,184,.4); }
.trend-table .miss{ background:repeating-linear-gradient(45deg,#f7f4f8,#f7f4f8 2px,#fff 2px,#fff 4px); }
.trend-foot th{ background:#fff7e6; color:#8a6d1a; }
.trend-foot .freq{ color:var(--red); font-weight:700; } .trend-foot .omit{ color:var(--blue); font-weight:700; }

/* 走势图表区 */
.chart-block{ border:1px solid var(--line); border-radius:12px; padding:14px 12px 6px; margin-bottom:14px; background:#fff; }
.chart-title{ font-size:15px; color:var(--ink); margin-bottom:6px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.chart-sub{ font-size:12px; color:var(--muted); font-weight:400; }
.chart-canvas{ width:100%; height:300px; }
.chart-canvas.chart-tall{ height:340px; }
.chart-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.chart-row .chart-block{ margin-bottom:0; }

/* 走势核心指标条 */
.metric-strip{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.metric{ background:#faf7fa; border:1px solid var(--line); border-radius:10px; padding:8px 14px; display:flex; flex-direction:column; line-height:1.3; }
.metric label{ font-size:12px; color:var(--muted); }
.metric b{ font-size:16px; color:var(--red-d); }

/* 热温冷分区 */
.hwc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.hwc-col{ border:1px solid var(--line); border-radius:12px; padding:12px; }
.hwc-col h4{ font-size:14px; margin-bottom:10px; color:var(--ink); }
.hwc-col h4 small{ color:var(--muted); font-weight:400; font-size:12px; }
.hwc-balls{ display:flex; flex-wrap:wrap; gap:2px; }
.hwc-balls .ball{ width:30px; height:30px; font-size:12px; margin:1px; }

/* 冷极转暖 */
.cold-turn{ border:1px dashed var(--blue); background:#f4f8ff; border-radius:12px; padding:14px; margin-bottom:16px; }
.cold-turn h4{ font-size:15px; color:var(--blue); margin-bottom:10px; }
.ct-balls{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:8px; }
.ct-ball{ display:inline-flex; flex-direction:column; align-items:center; gap:2px; }
.ct-ball small{ font-size:11px; color:var(--blue); font-weight:700; }

/* 规律小结 */
.summary-box{ border:1px solid var(--gold-d); background:linear-gradient(180deg,#fffdf4,#fff); border-radius:12px; padding:14px 16px; margin-bottom:16px; }
.summary-box h4{ color:#7a5800; margin-bottom:8px; }
.sum-list{ list-style:none; }
.sum-list li{ position:relative; padding-left:18px; margin-bottom:8px; font-size:14px; line-height:1.7; color:#4a4148; }
.sum-list li::before{ content:"◆"; position:absolute; left:0; top:0; color:var(--gold-d); font-size:11px; }

/* 排行榜（最旺/最冷） */
.rank-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:8px; }
.rank-item{ display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:10px; padding:8px 10px; }
.rank-item .rk{ width:24px; text-align:center; font-weight:800; color:#bbb; font-size:14px; }
.rank-item:nth-child(1) .rk,.rank-item:nth-child(2) .rk,.rank-item:nth-child(3) .rk{ color:var(--gold-d); }
.rank-item .bar{ flex:1; height:8px; background:#f1ecf2; border-radius:6px; overflow:hidden; }
.rank-item .bar i{ display:block; height:100%; background:linear-gradient(90deg,#ff8a90,var(--red)); border-radius:6px; }
.rank-item.cold .bar i{ background:linear-gradient(90deg,#8fb6f5,var(--blue)); }
.rank-item .val{ font-size:12px; color:#666; min-width:74px; text-align:right; }
.cold-cols{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.col-title{ font-size:15px; margin-bottom:10px; color:var(--ink); }

/* 规律 */
.patterns-box{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.pat-block{ border:1px solid var(--line); border-radius:12px; padding:14px; }
.pat-block h4{ font-size:14px; color:var(--red-d); margin-bottom:10px; }
.pat-block h4 .pat-sub{ font-size:11px; color:var(--muted); font-weight:400; margin-left:6px; }
.ratio{ display:flex; height:26px; border-radius:8px; overflow:hidden; font-size:12px; color:#fff; font-weight:700; margin-bottom:8px; }
.ratio div{ display:grid; place-items:center; }
.ratio .a{ background:linear-gradient(135deg,#ff7a80,var(--red)); }
.ratio .b{ background:linear-gradient(135deg,#7ea2f5,var(--blue)); }
.zone-bars{ display:flex; flex-direction:column; gap:6px; }
.pat-block-wide{ grid-column:1 / -1; }
.zone-bars-2col{ display:grid; grid-template-columns:1fr 1fr; gap:6px 24px; }
@media(max-width:720px){ .zone-bars-2col{ grid-template-columns:1fr; } }
.zone-bar{ display:flex; align-items:center; gap:8px; font-size:12px; }
.zone-bar .lbl{ min-width:84px; color:#666; white-space:nowrap; }
.zone-bar .lbl small{ color:#a89faa; font-size:10px; margin-left:2px; }
.zone-bar .track{ flex:1; height:16px; background:#f1ecf2; border-radius:6px; overflow:hidden; }
.zone-bar .track i{ display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-d)); }
.zone-bar .pct{ min-width:88px; text-align:right; color:#8a6d1a; font-weight:700; white-space:nowrap; }
.stat-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ background:#faf7fa; border:1px solid var(--line); border-radius:10px; padding:8px 14px; font-size:13px; }
.chip b{ color:var(--red-d); font-size:16px; }

/* 六爻 */
.liuyao-card{ background:linear-gradient(180deg,#fffdf6,#fff); }
.ly-form{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.ly-form label{ display:flex; flex-direction:column; gap:6px; font-size:13px; color:#666; }
.ly-form .grow{ flex:1; min-width:240px; }
.ly-form input{ width:100%; }
.ly-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.coin-stage{ text-align:center; padding:18px; background:#fff7e6; border:1px dashed var(--gold-d); border-radius:12px; margin-bottom:14px; }
.coins{ display:flex; justify-content:center; gap:18px; margin-bottom:10px; }
.coin{
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:800;
  background:radial-gradient(circle at 32% 28%,#ffe08a,var(--gold-d)); color:#6b4e00; box-shadow:0 3px 8px rgba(0,0,0,.2);
}
.coin.shake{ animation:shake .5s infinite; }
@keyframes shake{ 0%{transform:translateY(0) rotate(0);} 25%{transform:translateY(-10px) rotate(180deg);} 50%{transform:translateY(0) rotate(360deg);} 75%{transform:translateY(-6px) rotate(540deg);} 100%{transform:translateY(0) rotate(720deg);} }
.coin-msg{ color:#8a6d1a; font-size:14px; }

.gua-grid{ display:flex; align-items:center; justify-content:center; gap:24px; margin:18px 0; flex-wrap:wrap; }
.gua-box{ width:210px; min-width:210px; }
/* 六爻爻条在盒内 20~120（中心 70）。标题/卦名/判断统一宽 140、贴左排（0~140，中心 70），正好居卦正中 */
.gua-box h3{ color:var(--red-d); margin:0 auto 10px 0; text-align:center; width:140px; }
.gua-box .gua-name, .gua-box .gua-judge{ text-align:center; width:140px; margin-left:0; margin-right:auto; }
.gua-lines{ display:flex; flex-direction:column; gap:11px; align-items:center; }
/* 每行固定宽度，爻条走固定爻轨、爻名/红点绝对定位，保证六爻左右严格对齐 */
.gline{ position:relative; width:210px; height:16px; }
.gline .yao{ position:absolute; left:20px; top:0; width:100px; height:100%; display:flex; gap:12px; }
.gline .seg{ height:100%; flex:1; background:var(--ink); border-radius:3px; transition:background .3s; }
/* 阳爻一整段占满 100px；阴爻两段各 flex:1、中间留空，两段外缘与阳爻左右缘完全对齐 */
/* 太阴老阴(6)/太阳老阳(9) 为动爻：本卦爻条变红 + 红点；变卦中变出的爻同样变红 + 红点；少阴少阳静爻保黑 */
/* 本卦动爻（太阴老阴/太阳老阳）显示蓝色；变卦中变出的爻才显示红色 */
.gline.moving .seg{ background:var(--blue); }
.gline.changed .seg{ background:var(--red); }
.gline.moving .yao::after{ content:"●"; position:absolute; right:-20px; top:50%; transform:translateY(-50%); color:var(--blue); font-size:13px; line-height:1; }
.gline.changed .yao::after{ content:"●"; position:absolute; right:-20px; top:50%; transform:translateY(-50%); color:var(--red); font-size:13px; line-height:1; }
.gline .line-tag{ position:absolute; left:140px; top:50%; transform:translateY(-50%); font-style:normal; font-size:12px; color:#a89faa; white-space:nowrap; }
.gline.pending{ opacity:.8; }
.gline .seg-pend{ height:100%; width:100px; border:1px dashed #d3cbd6; border-radius:3px; background:repeating-linear-gradient(90deg,transparent 0 6px,#f3eff4 6px 8px); box-sizing:border-box; }
.gline .pend-name{ position:absolute; left:140px; top:50%; transform:translateY(-50%); font-style:normal; font-size:12px; color:#c0b8c2; white-space:nowrap; }
.gua-wait{ color:#c0b8c2; font-size:13px; line-height:1.8; text-align:center; padding:30px 0; }
.gua-name{ font-size:20px; font-weight:800; color:var(--red-d); margin-top:12px; }
.gua-judge{ font-size:13px; color:#777; }
.gua-arrow{ color:var(--gold-d); font-size:30px; text-align:center; }
.gua-arrow small{ display:block; font-size:12px; color:#999; }
.gua-meta{ background:#faf7fa; border-radius:10px; padding:12px 14px; font-size:13px; color:#555; line-height:1.9; }

/* 梅花推号 · 本卦/互卦/变卦三卦并排 */
.gua-grid3{ display:flex; align-items:flex-start; justify-content:center; gap:18px; margin:18px 0; flex-wrap:wrap; }
.gua-grid3 .gua-box{ width:180px; min-width:180px; }
.gua-grid3 .gua-box h3, .gua-grid3 .gua-name, .gua-grid3 .gua-judge{ width:auto; margin-left:auto; margin-right:auto; }
.mh-segs{ display:flex; flex-wrap:wrap; gap:6px; }
.mh-seg{ display:inline-flex; flex-direction:column; gap:2px; background:#fff; border:1px solid var(--gold-d); border-radius:8px; padding:4px 10px; font-size:12px; color:#5a4a1e; line-height:1.5; }
.mh-seg b{ color:var(--red-d); font-size:13px; }
.mh-seg em{ font-style:normal; color:#8a7a5a; }

/* 奇门推号 · 九宫飞盘 */
.qm-board{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:12px 0; }
@media(max-width:760px){ .qm-board{ gap:5px; } }
.qm-cell{ border:1px solid var(--line); border-radius:10px; padding:8px 10px; background:#fcfaf7; display:flex; flex-direction:column; gap:4px; min-width:0; }
.qm-cell.is-fu{ border:2px solid var(--gold-d); background:#fffaf0; box-shadow:0 0 0 2px rgba(202,156,62,.18); }
.qm-hd{ display:flex; align-items:center; justify-content:space-between; font-size:14px; color:var(--red-d); }
.qm-hd b{ font-size:15px; }
.qm-wx{ font-size:11px; color:#fff; background:#9c8459; border-radius:10px; padding:1px 8px; }
.qm-tags{ display:flex; flex-wrap:wrap; gap:4px; min-height:18px; }
.qm-tags b, .qm-legend b{ font-style:normal; font-size:11px; border-radius:4px; padding:1px 6px; color:#fff; }
.qm-tag-fu{ background:#c99a3e; } .qm-tag-shi{ background:#3f7cac; }
.qm-tag-kong{ background:#8a8a8a; } .qm-tag-ma{ background:#c0563f; }
.qm-body{ display:flex; flex-direction:column; gap:2px; font-size:13px; line-height:1.45; }
.qm-line{ text-align:center; }
.qm-god{ color:#7a4fb5; font-weight:700; }
.qm-gan{ font-weight:800; letter-spacing:2px; color:var(--ink); }
.qm-gan i{ font-style:normal; color:#ccc; margin:0 3px; }
.qm-gan .dim2{ color:#a89b86; font-weight:600; }
.qm-star{ color:#b97a1f; font-weight:700; }
.qm-door{ color:#0f8a6a; font-weight:700; }
.qm-xiong{ text-align:center; font-size:11px; color:#c0392b; background:#fbeeec; border-radius:4px; padding:1px 4px; }
.qm-ft{ display:flex; justify-content:space-between; font-size:11px; color:#8b7f82; border-top:1px dashed var(--line); padding-top:3px; }
.qm-nums{ display:flex; flex-wrap:wrap; gap:3px; }
.qm-num{ font-size:11px; color:#aaa; min-width:24px; text-align:center; border:1px solid #e8e2d6; border-radius:4px; padding:0 2px; }
.qm-num.on{ color:#fff; background:var(--red-d); border-color:var(--red-d); font-weight:700; }
.qm-center{ background:#f5f2ec; align-items:center; justify-content:center; text-align:center; color:#9a8f80; }
.qm-center-body{ font-size:13px; line-height:1.8; }
.qm-legend{ display:flex; flex-wrap:wrap; gap:14px; font-size:12px; color:#777; margin-bottom:14px; }
.qm-legend b{ margin-right:2px; }

.ai-result{ border:1px solid var(--gold-d); border-radius:12px; padding:16px; margin-top:16px; background:#fffdf6; }
.ai-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.ai-result .badge{ background:var(--red); color:#fff; border:none; }
.ai-result .badge.local{ background:#777; }
.ai-text{ white-space:pre-wrap; font-size:14px; color:#3a3338; line-height:1.9; margin-bottom:14px; }
.reco-title{ color:var(--red-d); margin-bottom:10px; display:flex; align-items:center; gap:10px; }
.reco-title .copy-reco-btn{ margin-left:auto; }
.pred-copy-btn{ margin-left:8px; flex-shrink:0; }
.reco-balls{ display:flex; flex-wrap:wrap; gap:4px; margin-bottom:12px; }
.ai-summary{ font-size:14px; color:#8a6d1a; font-weight:600; }
.disclaimer{ margin-top:14px; font-size:12px; color:#a99; text-align:center; line-height:1.7; }

/* 规律推下期号 */
.pred-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.pred-issue{ font-size:15px; color:var(--ink); }
.pred-issue .pred-next{ color:var(--red-d); font-size:17px; }
.pred-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.ptag{ background:#faf7fa; border:1px solid var(--line); border-radius:999px; padding:4px 12px; font-size:12px; color:#666; }
.ptag.tag-gold{ background:#fff7e0; border-color:#f0d888; color:#8a6d1a; font-weight:700; }
.ptag.tag-warm{ background:#f4f1f4; border-color:#ddd5de; color:#777; font-weight:700; }
.ptag.tag-blue{ background:#eef4ff; border-color:#bcd0f5; color:var(--blue); font-weight:700; }
.ptag.tag-red{ background:#ffecec; border-color:#f5bcbc; color:var(--red); font-weight:700; }
.pred-balls{ display:flex; justify-content:center; align-items:flex-start; flex-wrap:wrap; gap:14px 10px; padding:18px 10px; background:linear-gradient(180deg,#fffaf0,#fff); border:1px solid #f3e8d2; border-radius:14px; margin-bottom:12px; }
.pred-balls-red{ display:flex; flex-wrap:wrap; gap:14px 10px; align-items:flex-start; justify-content:center; }
.pred-balls-blue{ display:flex; align-items:center; }
.pred-item{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.pred-item .ball{ width:46px; height:46px; font-size:18px; margin:0; }
.pred-role{ font-size:11px; padding:1px 8px; border-radius:999px; white-space:nowrap; }
.role-热号{ color:#8a6d1a; }
.role-温号{ color:#888; }
.role-冷号回补{ color:var(--blue); }
.role-空区必补{ color:var(--red); }
.pred-item .role-热号{ background:#fff3d0; }
.pred-item .role-温号{ background:#f1ecf2; }
.pred-item .role-冷号回补{ background:#e8f0ff; }
.pred-item .role-空区必补{ background:#ffe3e3; }
.pred-zone-note{ background:#f4f8ff; border:1px dashed #9db9ef; border-radius:10px; padding:10px 14px; font-size:13px; color:var(--blue); margin-bottom:14px; }
.pred-cols{ display:grid; grid-template-columns:1fr 1.2fr; gap:16px; }
@media(max-width:860px){ .pred-cols{ grid-template-columns:1fr; } }
.pred-rules, .pred-reasons{ background:#faf8f5; border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.pred-rules h4, .pred-reasons h4{ font-size:14px; color:var(--red-d); margin-bottom:10px; }
.reason-list{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.reason-list li{ display:flex; align-items:center; gap:10px; font-size:13px; color:#555; line-height:1.6; }
.reason-list .ball{ flex:none; }
.reason-list .reason-text b{ margin-right:2px; }
.pred-disclaim{ margin-top:14px; text-align:center; font-size:12px; line-height:1.8; }

/* 亥时定时起卦 · 五行十组推号 */
.ly-tip{ background:#f3f6ff; border:1px dashed #b9c9f2; border-radius:10px; padding:10px 14px; font-size:13px; color:#44507a; line-height:1.8; margin-bottom:14px; }
.ai-result .badge.local{ background:#5a4a8a; }
.wx-title{ color:var(--red-d); margin:4px 0 10px; }
.wx-box{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:14px; }
.wx-row{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; font-size:13px; color:#555; margin-bottom:10px; line-height:1.8; }
.wx-row .wx-lab{ color:#999; font-weight:600; }
.wx-sep{ color:#ddd; }
.wx-cai{ color:var(--red); }
.wx-kong{ color:#999; }
.wx-chip{ display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px; font-size:13px; font-weight:700; border:1px solid var(--line); background:#faf8f5; }
.wx-chip em{ font-style:normal; font-size:12px; font-weight:600; opacity:.85; }
.wx-chip.wx-wang{ background:#fff1d6; border-color:#eccf7e; color:#8a6d1a; }
.wx-chip.wx-shuai{ background:#f1f1f4; border-color:#dbdbe2; color:#9a9aa4; }
.wx-chip.wx-ping{ color:#777; }
.wx-grps{ display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:10px; margin-top:4px; }
.wx-grp{ border:1px solid var(--line); border-radius:10px; padding:10px; background:#fcfaf7; }
.wx-grp-h{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:13px; margin-bottom:8px; }
.wx-elem{ font-weight:800; color:var(--ink); }
.wx-tag{ margin-left:auto; font-size:11px; padding:1px 8px; border-radius:999px; white-space:nowrap; }
.tag-wang{ background:#fff1d6; color:#8a6d1a; }
.tag-ruo{ background:#eef2fb; color:var(--blue); }
.wx-grp-balls{ display:flex; gap:4px; }
.wx-grp-balls .ball{ width:30px; height:30px; font-size:13px; margin:0; }
.wx-note{ margin:10px 0 0; font-size:12px; color:#999; line-height:1.7; }
.pick-reasons{ list-style:none; display:flex; flex-direction:column; gap:7px; margin:0 0 12px; padding:0; }
.pick-reasons li{ font-size:13px; color:#555; line-height:1.6; background:#faf8f5; border-radius:8px; padding:7px 12px; }
.pr-hot{ color:#8a6d1a; margin-right:6px; }
.pr-cold{ color:var(--blue); margin-right:6px; }

/* 综合推荐号（规律 ∩ 六爻） */
.ball.hit{ position:relative; box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--gold-d); }
.ball .hit-mark{ position:absolute; right:-7px; top:-7px; font-style:normal; font-size:12px; font-weight:800; color:#fff; background:var(--gold-d); border-radius:50%; width:16px; height:16px; display:grid; place-items:center; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.ball.dim{ opacity:.32; filter:grayscale(.6); }
.cmp-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; margin-top:14px; }
@media(max-width:760px){ .cmp-grid{ grid-template-columns:1fr; } }

/* 综合推荐号 · 来源勾选 */
.cmp-pick{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:#faf7fa; border:1px dashed var(--gold-d); border-radius:10px; padding:10px 14px; margin-bottom:14px; }
.cmp-opt{ display:flex; align-items:center; gap:6px; font-size:13px; color:#555; cursor:pointer; user-select:none; }
.cmp-opt input{ width:16px; height:16px; accent-color:var(--red-d); cursor:pointer; flex:none; }
.cmp-pick .btn{ margin-left:auto; }
.cmp-col{ border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:#fcfaf7; }
.cmp-col h4{ margin:0 0 10px; color:var(--red-d); font-size:14px; }
.cmp-balls{ display:flex; flex-wrap:wrap; }
.cmp-hit{ background:linear-gradient(180deg,#fffaf0,#fff); border:1px solid #f0dfb2; border-radius:14px; padding:16px; margin-bottom:4px; }
.cmp-hit-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.cmp-hit-head .cmp-hit-title{ margin:0; }
.cmp-hit-title{ margin:0 0 12px; font-size:15px; color:var(--ink); }
.cmp-hit-balls{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.cmp-hit .pick-reasons li{ display:flex; flex-direction:column; gap:4px; }
.cmp-src{ font-size:12px; color:#666; line-height:1.6; }
.cmp-src em{ font-style:normal; font-weight:700; color:var(--blue); margin-right:6px; }
.cmp-src:first-of-type em{ color:#8a6d1a; }
.cmp-none{ text-align:center; padding:34px 16px; background:#faf8f5; border:1px dashed #d8c9cb; border-radius:14px; margin-bottom:4px; }
.cmp-none-icon{ font-size:44px; color:#c9b9bb; line-height:1; margin-bottom:10px; }
.cmp-none-title{ font-size:20px; font-weight:800; color:var(--red-d); margin:0 0 8px; }
.cmp-none-sub{ font-size:13px; color:#8b7f82; margin:0; line-height:1.8; }

.loading{ padding:30px; text-align:center; color:#aaa; }
.foot{ text-align:center; color:#b3aab2; font-size:12px; padding:18px 0 30px; }

@media(max-width:720px){
  .num-grid{ grid-template-columns:repeat(10,1fr); }
  .cold-cols{ grid-template-columns:1fr; }
  .hwc-grid{ grid-template-columns:1fr; }
  .chart-row{ grid-template-columns:1fr; }
  .topbar h1{ font-size:18px; }
}