/* 快乐8 摇奖机模拟器 - 样式 */
:root{
  --bg:#0e1420; --bg2:#141c2c; --panel:#1a2436; --panel2:#202c42;
  --line:#2c3a54; --line2:#3a4c6c;
  --txt:#e8eef8; --txt2:#9fb0c8; --txt3:#6b7f9c;
  --gold:#f5c451; --gold2:#e0a92e;
  --red:#e8503f; --orange:#f08030; --blue:#3d8bfd; --green:#2fbf71;
  --purple:#9b6cf5; --cyan:#2fc4d4;
  --shadow:0 8px 28px rgba(0,0,0,.45);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Microsoft YaHei","PingFang SC","Segoe UI",system-ui,sans-serif;
  background:radial-gradient(ellipse at 50% 0%,#1b2740 0%,var(--bg) 55%,#0a0f18 100%);
  color:var(--txt); min-height:100vh; overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px);
}

/* ---------- 布局 ---------- */
.wrap{max-width:1420px;margin:0 auto;padding:14px 18px 60px;position:relative;z-index:2}
header{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 20px;margin-bottom:16px;border-radius:14px;
  background:linear-gradient(135deg,rgba(245,196,81,.14),rgba(61,139,253,.10));
  border:1px solid rgba(245,196,81,.28);box-shadow:var(--shadow);
}
.logo{
  width:50px;height:50px;border-radius:13px;flex:none;
  background:linear-gradient(145deg,var(--gold),#c98d1c);
  display:grid;place-items:center;font-size:26px;font-weight:800;color:#3a2708;
  box-shadow:0 5px 16px rgba(245,196,81,.35);
}
h1{font-size:21px;font-weight:800;letter-spacing:.5px}
h1 small{display:block;font-size:11.5px;font-weight:400;color:var(--txt3);letter-spacing:0;margin-top:3px}
.hstat{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.hstat div{
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  padding:6px 13px;border-radius:9px;text-align:center;min-width:78px;
}
.hstat b{display:block;font-size:16px;color:var(--gold);font-weight:700}
.hstat span{font-size:10.5px;color:var(--txt3)}

.tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.tab{
  padding:9px 20px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:600;
  background:var(--panel);border:1px solid var(--line);color:var(--txt2);
  transition:.18s;user-select:none;
}
.tab:hover{border-color:var(--line2);color:var(--txt);transform:translateY(-1px)}
.tab.on{background:linear-gradient(135deg,var(--gold),var(--gold2));color:#33240a;border-color:transparent;box-shadow:0 4px 14px rgba(245,196,81,.3)}
.page{display:none;animation:fade .3s}
.page.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.card{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:18px;margin-bottom:16px;box-shadow:0 4px 16px rgba(0,0,0,.25);
}
.card h2{font-size:15.5px;margin-bottom:14px;display:flex;align-items:center;gap:9px;font-weight:700}
.card h2::before{content:"";width:4px;height:17px;background:linear-gradient(var(--gold),var(--gold2));border-radius:2px}
.card h3{font-size:13.5px;margin:16px 0 10px;color:var(--gold);font-weight:700}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:1080px){.grid2,.grid3{grid-template-columns:1fr}}

/* ---------- 摇奖机（仿真实机：上球架 + 圆盘拨叶 + 出球槽） ---------- */
.machine{display:grid;grid-template-columns:minmax(0,470px) 1fr;gap:20px;align-items:start}
@media(max-width:1000px){.machine{grid-template-columns:1fr}}

.drum-box{
  background:linear-gradient(170deg,#243449,#111a28 62%,#0d1520);
  border:1px solid #3d5470;border-radius:16px;padding:14px 16px 18px;
  position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 10px 34px rgba(0,0,0,.5);
}
/* 机身高光 */
.drum-box::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:16px;
  background:
    linear-gradient(105deg,rgba(255,255,255,.055) 0 22%,transparent 32%),
    radial-gradient(ellipse at 50% 8%,rgba(150,190,240,.10),transparent 55%);
}
.machine-title{
  text-align:center;font-size:11px;color:#7f95b0;letter-spacing:3px;margin-bottom:10px;
  font-weight:600;text-shadow:0 1px 0 rgba(0,0,0,.6);
}

/* ===== 上球架 ===== */
.rack{
  position:relative;padding:9px 8px 16px;margin-bottom:6px;
  background:linear-gradient(180deg,#33455c,#22303f);
  border:1px solid #4a617d;border-radius:9px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -8px 14px rgba(0,0,0,.32);
}
.rack-rail{
  position:absolute;left:8px;right:8px;top:5px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,transparent,#8fa8c4,#8fa8c4,transparent);
  opacity:.55;
}
.rack-balls{
  display:grid;grid-template-columns:repeat(10,1fr);gap:4px;
  position:relative;z-index:1;
}
.rack-ball{
  aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  font-size:9.5px;font-weight:800;color:#1a1206;
  background:radial-gradient(circle at 32% 27%,#fff9e8,#f6d288 38%,#dda72e 72%,#a97512);
  box-shadow:0 1px 2px rgba(0,0,0,.55),inset -1px -2px 4px rgba(140,90,10,.42),inset 1.5px 1.5px 4px rgba(255,255,255,.6);
  transition:opacity .3s, transform .3s;
}
.rack-ball.b{background:radial-gradient(circle at 32% 27%,#eef5ff,#9cc3f2 38%,#5189dd 72%,#2b52a0);color:#08152e}
.rack-ball.g{background:radial-gradient(circle at 32% 27%,#eafff5,#96e5bd 38%,#45c581 72%,#1f8a55);color:#06301c}
.rack-ball.o{background:radial-gradient(circle at 32% 27%,#fff5e8,#f9c494 38%,#ef8f4c 72%,#bd5c1f);color:#3d1a05}
.rack-ball.p{background:radial-gradient(circle at 32% 27%,#f8f0ff,#cbaaF8 38%,#a179f7 72%,#6d3fc4);color:#1e0d3d}
/* 已落入圆盘的球：留在架上但变暗 */
.rack-ball.dropped{opacity:.26;transform:scale(.86);filter:grayscale(.4)}
.rack-label{
  position:absolute;right:8px;bottom:2px;font-size:8.5px;color:#7f95b0;letter-spacing:1px;
}

/* ===== 落球通道 ===== */
.chute{position:relative;height:26px;margin:0 26px}
.chute-line{
  position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(200,225,255,.35),rgba(200,225,255,.06));
}

/* ===== 圆盘 ===== */
.drum{
  position:relative;width:100%;aspect-ratio:1/1;margin:0 auto;
  max-width:300px;
}
/* 玻璃罩 */
.drum-glass{
  position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 33% 25%,rgba(255,255,255,.22),transparent 46%),
    radial-gradient(circle at 50% 50%,rgba(120,165,225,.12),rgba(8,14,24,.5) 76%);
  border:2px solid rgba(170,200,235,.34);
  box-shadow:
    inset 0 0 44px rgba(0,0,0,.55),
    inset 0 2px 16px rgba(255,255,255,.16),
    0 0 30px rgba(90,150,225,.14);
}
/* 外圈金属环 + 螺栓 */
.drum-rim{
  position:absolute;inset:-9px;border-radius:50%;
  border:9px solid transparent;
  background:
    linear-gradient(#2c3f56,#2c3f56) padding-box,
    conic-gradient(from 0deg,#6d86a5,#c3d4e6,#6d86a5,#9fb3c9,#6d86a5,#c3d4e6,#6d86a5) border-box;
  box-shadow:0 3px 12px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.25);
}
.drum-rim::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle 3px at 50% 0%,#dbe6f2 40%,transparent 45%),
    radial-gradient(circle 3px at 100% 50%,#dbe6f2 40%,transparent 45%),
    radial-gradient(circle 3px at 50% 100%,#dbe6f2 40%,transparent 45%),
    radial-gradient(circle 3px at 0% 50%,#dbe6f2 40%,transparent 45%),
    radial-gradient(circle 3px at 15% 15%,#c8d8ea 40%,transparent 45%),
    radial-gradient(circle 3px at 85% 15%,#c8d8ea 40%,transparent 45%),
    radial-gradient(circle 3px at 15% 85%,#c8d8ea 40%,transparent 45%),
    radial-gradient(circle 3px at 85% 85%,#c8d8ea 40%,transparent 45%);
}
/* 拨叶（在球下方） */
.drum-blades{
  position:absolute;inset:26%;border-radius:50%;
  transition:transform .05s linear;
  z-index:2;
}
.blade{
  position:absolute;left:50%;top:50%;width:40%;height:5.5%;
  transform-origin:0 50%;border-radius:2px 5px 5px 2px;
  background:linear-gradient(90deg,rgba(214,231,248,.75),rgba(140,170,206,.38));
  box-shadow:0 1px 2px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.4);
}
.blade::after{
  content:"";position:absolute;right:-2px;top:50%;transform:translateY(-50%);
  width:5px;height:64%;border-radius:2px;
  background:linear-gradient(180deg,#cfdeee,#87a1be);
}
/* 中心轴 */
.drum-hub{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:17%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#f2f7fd,#a9bdd4 45%,#5d7391 78%,#3c4d63);
  border:2px solid #8496ad;
  display:grid;place-items:center;
  box-shadow:0 2px 8px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.6);
  z-index:5;
}
.drum-hub span{font-size:8.5px;font-weight:800;color:#31445c;letter-spacing:.5px}
/* 圆盘内的球 */
.drum-balls{position:absolute;inset:0;border-radius:50%;overflow:hidden;z-index:4}
.drum-ball{
  position:absolute;border-radius:50%;
  display:grid;place-items:center;
  font-size:9.5px;font-weight:800;color:#1a1206;
  background:radial-gradient(circle at 32% 27%,#fff9e8,#f6d288 38%,#dda72e 72%,#a97512);
  box-shadow:0 1px 3px rgba(0,0,0,.6),inset -1px -2px 4px rgba(140,90,10,.42),inset 1.5px 1.5px 4px rgba(255,255,255,.55);
}
.drum-ball.b{background:radial-gradient(circle at 32% 27%,#eef5ff,#9cc3f2 38%,#5189dd 72%,#2b52a0);color:#08152e}
.drum-ball.g{background:radial-gradient(circle at 32% 27%,#eafff5,#96e5bd 38%,#45c581 72%,#1f8a55);color:#06301c}
.drum-ball.o{background:radial-gradient(circle at 32% 27%,#fff5e8,#f9c494 38%,#ef8f4c 72%,#bd5c1f);color:#3d1a05}
.drum-ball.p{background:radial-gradient(circle at 32% 27%,#f8f0ff,#cbaaf8 38%,#a179f7 72%,#6d3fc4);color:#1e0d3d}
.drum-ball.fly{
  position:fixed;z-index:999;pointer-events:none;
  box-shadow:0 3px 10px rgba(0,0,0,.6),inset 1.5px 1.5px 4px rgba(255,255,255,.55);
}
/* 机座阴影 */
.drum-housing{
  position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  width:66%;height:12px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.5),transparent 70%);
  z-index:6;
}

/* ===== 出球槽 ===== */
.outlet{margin-top:10px;position:relative}
.outlet-mouth{
  height:16px;border-radius:0 0 26px 26px;
  background:linear-gradient(180deg,rgba(78,104,136,.85),rgba(30,44,62,.25));
  border-bottom:2px solid rgba(150,180,215,.35);
  margin:0 20%;
  box-shadow:0 3px 8px rgba(0,0,0,.5),inset 0 -3px 6px rgba(0,0,0,.35);
}
.outlet-track{
  display:grid;grid-template-columns:repeat(10,1fr);gap:6px;
  min-height:66px;
  padding:10px;border-radius:9px;
  background:linear-gradient(180deg,#1b2836,#141d29);
  border:1px solid #33475e;
  box-shadow:inset 0 3px 10px rgba(0,0,0,.45);
}
@media(max-width:520px){.outlet-track{grid-template-columns:repeat(5,1fr)}}
.outlet-track:empty::after{
  content:"等待摇奖 · 20 个号码将依次滚出";
  color:#6b7f9c;font-size:11.5px;padding:18px 4px;grid-column:1/-1;
}
.outb{
  width:100%;aspect-ratio:1;max-width:38px;border-radius:50%;
  display:grid;place-items:center;margin:0 auto;
  font-size:13px;font-weight:800;color:#1a1206;
  background:radial-gradient(circle at 32% 27%,#fff9e8,#f6d288 38%,#dda72e 72%,#a97512);
  box-shadow:0 2px 6px rgba(0,0,0,.5),inset 1.5px 1.5px 4px rgba(255,255,255,.5);
  animation:rollout .45s cubic-bezier(.3,1.4,.5,1);
}
.outb.b{background:radial-gradient(circle at 32% 27%,#eef5ff,#9cc3f2 38%,#5189dd 72%,#2b52a0);color:#08152e}
.outb.g{background:radial-gradient(circle at 32% 27%,#eafff5,#96e5bd 38%,#45c581 72%,#1f8a55);color:#06301c}
.outb.o{background:radial-gradient(circle at 32% 27%,#fff5e8,#f9c494 38%,#ef8f4c 72%,#bd5c1f);color:#3d1a05}
.outb.p{background:radial-gradient(circle at 32% 27%,#f8f0ff,#cbaaf8 38%,#a179f7 72%,#6d3fc4);color:#1e0d3d}
@keyframes rollout{
  0%{transform:translateY(-30px) scale(.35) rotate(-160deg);opacity:0}
  60%{transform:translateY(3px) scale(1.1) rotate(12deg);opacity:1}
  100%{transform:none;opacity:1}
}
.tube:empty::after{content:"摇奖后号码将依次弹出";color:var(--txt3);font-size:12.5px;padding:22px 0}
.outb{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-size:15px;font-weight:800;color:#1a1206;
  background:radial-gradient(circle at 32% 28%,#fff8e2,#f5cf7a 42%,#d99b21 78%,#a86f12);
  box-shadow:0 3px 9px rgba(0,0,0,.5),inset 2px 2px 6px rgba(255,255,255,.5);
  animation:drop .45s cubic-bezier(.25,1.5,.5,1);
}
.outb.b{background:radial-gradient(circle at 32% 28%,#e8f1ff,#8fb8f0 42%,#4a7ed4 78%,#2b52a0);color:#08152e}
@keyframes drop{from{transform:translateY(-26px) scale(.4);opacity:0}to{transform:none;opacity:1}}

.ctrl{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center}
button{
  font-family:inherit;cursor:pointer;border:none;border-radius:10px;
  padding:11px 24px;font-size:14.5px;font-weight:700;transition:.16s;
}
.btn-go{
  background:linear-gradient(135deg,var(--red),#b8341f);color:#fff;
  box-shadow:0 5px 18px rgba(232,80,63,.4);flex:1;min-width:150px;
}
.btn-go:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 24px rgba(232,80,63,.55)}
.btn-go:disabled{opacity:.42;cursor:not-allowed}
.btn2{background:var(--panel2);color:var(--txt);border:1px solid var(--line2)}
.btn2:hover{border-color:var(--gold);color:var(--gold)}
.btn3{background:rgba(245,196,81,.13);color:var(--gold);border:1px solid rgba(245,196,81,.35)}

select,input[type=number],input[type=text]{
  font-family:inherit;background:var(--bg2);color:var(--txt);
  border:1px solid var(--line2);border-radius:9px;padding:9px 12px;font-size:13.5px;outline:none;
}
select:focus,input:focus{border-color:var(--gold)}
label.fld{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--txt2)}

.hint{font-size:12px;color:var(--txt3);line-height:1.85;margin-top:10px}
.hint b{color:var(--gold)}

/* ---------- 玩法选号 ---------- */
.playtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.pt{
  padding:7px 15px;border-radius:8px;cursor-pointer;font-size:13px;font-weight:600;
  background:var(--bg2);border:1px solid var(--line);color:var(--txt2);transition:.15s;
}
.pt.on{background:linear-gradient(135deg,var(--blue),#2560c4);color:#fff;border-color:transparent}
.playbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:14px;padding:11px 15px;background:var(--bg2);border-radius:10px;border:1px solid var(--line)}

/* 选号区：固定 30px 小方块 × 20 列, 用 flex 居中, 不随容器拉伸 */
.ngrid{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:4px;max-width:720px;margin-left:auto;margin-right:auto;
}
.num{
  width:30px;height:30px;flex:none;
  border-radius:5px;display:grid;place-items:center;
  font-size:10.5px;font-weight:600;cursor:pointer;user-select:none;
  background:var(--bg2);border:1px solid var(--line);color:var(--txt3);
  transition:.12s;position:relative;line-height:1;
}
.num:hover{border-color:var(--gold);color:var(--gold);transform:scale(1.18);z-index:2}
.num.zone1{color:#c98d84}
.num.zone2{color:#8fb0e0}
.num.zone3{color:#84c9a4}
.num.sel{color:#1a1206;border-color:transparent;font-weight:800;transform:none}
.num.sel.k1{background:linear-gradient(145deg,#f9dd9a,#e0a92e);box-shadow:0 1px 4px rgba(245,196,81,.4)}
.num.sel.dan{background:linear-gradient(145deg,#f8a088,#e8503f);color:#fff;box-shadow:0 1px 4px rgba(232,80,63,.4)}
.num.lock{opacity:.5}

@media(max-width:560px){
  .ngrid{gap:3px}
  .num{width:26px;height:26px;font-size:9.5px}
}

/* 图例 */
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--txt3);margin-top:10px;align-items:center;justify-content:center}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.num.lock::after{content:"🔒";position:absolute;top:-5px;right:-3px;font-size:9px}

.ticket{
  background:var(--bg2);border:1px solid var(--line2);border-radius:11px;
  padding:12px 15px;margin-top:12px;display:flex;gap:11px;align-items:center;flex-wrap:wrap;
}
.ticket .cn{font-size:11px;color:var(--txt3);margin-right:4px}
.ticket .nums{display:flex;gap:5px;flex-wrap:wrap;flex:1}
.tn{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-size:12.5px;font-weight:700;background:var(--panel2);border:1px solid var(--line2);
}
.tn.h{background:radial-gradient(circle at 32% 28%,#fff8e2,#f5cf7a 50%,#d99b21);color:#1a1206;border-color:transparent}
.tn.d{background:radial-gradient(circle at 32% 28%,#fff0e8,#f8a888 50%,#e8503f);color:#fff;border-color:transparent}
.ticket button{padding:5px 12px;font-size:12px;background:transparent;color:var(--txt3);border:1px solid var(--line2)}
.ticket button:hover{color:var(--red);border-color:var(--red)}

.prize{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--txt2);margin-top:6px}
.prize b{color:var(--gold)}

/* ---------- 数据看板 ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}
.kpi b{display:block;font-size:22px;color:var(--gold);font-weight:800;line-height:1.3}
.kpi span{font-size:11.5px;color:var(--txt3)}
.kpi .u{font-size:12px;color:var(--txt2);margin-left:2px}

table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line)}
th{color:var(--gold);font-weight:600;font-size:12.5px;background:var(--bg2);position:sticky;top:0;z-index:2}
tbody tr:hover{background:rgba(255,255,255,.035)}
td.numcell,th.numcell{text-align:right;font-variant-numeric:tabular-nums}
.scroll{max-height:420px;overflow:auto;border-radius:10px;border:1px solid var(--line)}
.scroll::-webkit-scrollbar{width:9px;height:9px}
.scroll::-webkit-scrollbar-track{background:var(--bg2)}
.scroll::-webkit-scrollbar-thumb{background:var(--line2);border-radius:5px}

table.mini td{padding:5px 8px;font-size:12.5px}

/* 奖金对照表 */
.prize-note{
  background:rgba(245,196,81,.08);border:1px solid rgba(245,196,81,.28);
  border-radius:9px;padding:10px 13px;margin-bottom:12px;
  font-size:12.5px;color:var(--txt2);line-height:1.85;
}
.prize-note .float{color:var(--red)}
table.prize-tb td{vertical-align:top}
table.prize-tb tr:hover{background:rgba(255,255,255,.04)}
table.prize-tb td:first-child{font-weight:700;color:var(--gold);white-space:nowrap}
.pk{display:inline-block;margin:2px 5px 2px 0;padding:2px 8px;border-radius:5px;
  font-size:11.5px;white-space:nowrap;background:var(--bg2);border:1px solid var(--line2)}
.pk.hit{background:rgba(47,191,113,.16);border-color:rgba(47,191,113,.45);color:#5fe0a0}
.pk.miss{color:var(--txt3);opacity:.55;text-decoration:line-through}
.pk.float{background:rgba(232,80,63,.14);border-color:rgba(232,80,63,.45);color:#ff8a7a}
.prize-hi{font-weight:800;color:var(--red);font-size:13px}

/* 热力/频率格 */
.fgrid{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin-top:8px}
@media(max-width:820px){.fgrid{grid-template-columns:repeat(8,1fr)}}
.fc{
  aspect-ratio:1;border-radius:7px;display:grid;place-items:center;
  font-size:11.5px;font-weight:700;cursor:default;border:1px solid transparent;
}
.omission{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin-top:8px}
@media(max-width:820px){.omission{grid-template-columns:repeat(8,1fr)}}
.oc{
  aspect-ratio:1;border-radius:7px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-size:10.5px;border:1px solid var(--line2);
  background:var(--bg2);
}
.oc b{font-size:13px;font-weight:800}

/* 回测表 */
.bt td.pos{color:var(--red);font-weight:700}
.bt td.neg{color:var(--green)}
.bt td.base{color:var(--txt3)}

/* 走势图：横轴80号码 / 纵轴期次 / 右侧汇总 / 底部分类统计 */
.zt-wrap{overflow:auto;border:1px solid var(--line);border-radius:9px;background:var(--bg2);max-height:660px}
table.zt{border-collapse:separate;border-spacing:0;font-size:11px;table-layout:fixed;width:max-content}
table.zt th,table.zt td{padding:0;border:0;text-align:center}
.zt thead th{
  position:sticky;top:0;z-index:5;background:#1c2739;
  font-size:10.5px;font-weight:600;color:#8fb0e0;padding:5px 0;min-width:25px;
  border-bottom:1px solid var(--line2);
}
/* 期号列(左侧固定) */
.zt th.row-iss,.zt td.row-iss{
  position:sticky;left:0;z-index:4;background:#182233;
  font-size:10.5px;color:var(--txt2);padding:0 7px;min-width:64px;
  border-right:1px solid var(--line2);white-space:nowrap;
  height:25px;display:table-cell;vertical-align:middle;
}
.zt thead th.row-iss{z-index:6;background:#1c2739}
/* 号码格 */
.zt td.cell{
  min-width:25px;height:25px;
  border-right:1px solid rgba(42,58,80,.45);
  border-bottom:1px solid rgba(42,58,80,.45);font-size:11px;
}
.zt td.cell b{
  display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;
  font-size:10px;font-weight:700;color:#fff;
  background:linear-gradient(160deg,#5b9bff,#2a5fc0);
  box-shadow:0 1px 3px rgba(0,0,0,.45);
}
.zt td.cell b.rp {background:linear-gradient(160deg,#e879f9,#a21caf)}  /* 跨度/首尾号 */
.zt td.cell b.rp2{background:linear-gradient(160deg,#c084fc,#7e22ce)}
.zt td.cell b.rg {background:linear-gradient(160deg,#4ade80,#15803d)}  /* 与上期重号 */
.zt td.cell b.gy {background:linear-gradient(160deg,#fbbf24,#b45309)}  /* 三区代表 */
.zt td.cell b.dk {background:linear-gradient(160deg,#64748b,#334155)}
/* 右侧汇总列 */
.zt th.sum-col,.zt td.sum-col{
  position:sticky;right:0;z-index:4;background:#1c2739;
  border-left:1px solid var(--line2);font-size:10.5px;color:#f5c451;
  min-width:36px;padding:0 4px;
}
.zt thead th.sum-col{z-index:6}
.zt td.sum-col{height:25px;display:table-cell;vertical-align:middle}
/* 底部分类统计行 */
.zt .stat-row td{background:#1a2434;border-top:1px solid var(--line2);height:22px}
.zt .stat-row .lab{
  position:sticky;left:0;z-index:3;background:#1a2434;
  font-size:10px;color:var(--txt3);padding:0 7px;text-align:right;
  border-right:1px solid var(--line2);min-width:64px;height:22px;
  display:table-cell;vertical-align:middle;white-space:nowrap;
}
.zt .stat-row span{
  display:inline-block;font-size:10px;color:#9fb0c8;min-width:25px;
  line-height:22px;height:22px;
}
.zt .stat-row span.z{color:#ff8ba0}
.zt .stat-row span.o{color:#7dd3fc}
.zt-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--txt3);margin-top:10px}
.zt-legend i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:5px;vertical-align:-1px}

/* 历史开奖表: 重号高亮 */
.tn{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:600;background:var(--bg2);border:1px solid var(--line2);color:var(--txt2)}
.tn.rep{background:linear-gradient(160deg,#4ade80,#15803d);color:#fff;border-color:transparent;font-weight:800}
.rep-badge{display:inline-block;padding:1px 7px;border-radius:20px;font-size:11px;font-weight:700;
  background:rgba(74,222,128,.16);color:#4ade80;border:1px solid rgba(74,222,128,.35)}
.rep-badge.z{background:rgba(255,255,255,.06);color:var(--txt3);border-color:var(--line2)}

/* 公告 */
.note{
  background:linear-gradient(135deg,rgba(232,80,63,.13),rgba(245,196,81,.08));
  border:1px solid rgba(232,80,63,.32);border-radius:12px;padding:16px 19px;margin-bottom:16px;
}
.note h3{color:var(--red);font-size:14.5px;margin-bottom:9px;display:flex;align-items:center;gap:7px}
.note p{font-size:13px;color:var(--txt2);line-height:1.95}
.note p+p{margin-top:8px}
.note b{color:var(--gold)}

.toast{
  position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-80px);
  background:var(--panel2);border:1px solid var(--gold);color:var(--gold);
  padding:11px 26px;border-radius:10px;font-size:13.5px;font-weight:600;z-index:999;
  transition:.3s;box-shadow:var(--shadow);
}
.toast.on{transform:translateX(-50%) translateY(0)}

.refbox{background:var(--bg2);border:1px dashed var(--line2);border-radius:11px;padding:15px;margin-top:11px}
.refbox .rt{font-size:12.5px;color:var(--gold);margin-bottom:9px;font-weight:700}
.refnums{display:flex;gap:6px;flex-wrap:wrap}
.rn{
  width:31px;height:31px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;
  background:linear-gradient(135deg,rgba(245,196,81,.22),rgba(245,196,81,.08));
  border:1px solid rgba(245,196,81,.45);color:var(--gold);
}
.waiver{font-size:12.5px;color:var(--green);background:rgba(47,191,113,.10);border:1px solid rgba(47,191,113,.3);border-radius:9px;padding:11px 14px;margin-top:10px;line-height:1.85}

@media print{.tabs,.ctrl,.machine,.btn{display:none!important}}

/* ========== 工具箱 ========== */
.subtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.subtab{
  padding:7px 15px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;
  background:var(--bg2);border:1px solid var(--line);color:var(--txt2);transition:.14s;
  user-select:none;
}
.subtab:hover{border-color:var(--gold);color:var(--gold)}
.subtab.on{background:linear-gradient(135deg,var(--gold),#d99b21);color:#1a1206;border-color:transparent;font-weight:700}
.tool{animation:fadeIn .2s}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.calcinput{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:16px}

.metrics{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
.metric{background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:11px 13px;text-align:center}
.metric .mv{font-size:20px;font-weight:800;color:var(--gold);line-height:1.15;font-family:Consolas,monospace}
.metric .ml{font-size:11.5px;color:var(--txt3);margin-top:5px}
.metric.blue .mv{color:var(--blue)}
.metric.green .mv{color:var(--green)}
.metric.red .mv{color:var(--red)}
.metric.purple .mv{color:#b57ee0}

.distrow{display:flex;align-items:center;gap:11px;margin-bottom:7px}
.distlab{width:82px;font-size:12px;color:var(--txt2);text-align:right;flex:none}
.distbar{flex:1;height:20px;background:var(--bg3);border-radius:5px;overflow:hidden;position:relative}
.distfill{height:100%;background:linear-gradient(90deg,var(--gold),#d99b21);border-radius:5px;transition:width .35s}
.distfill.blue{background:linear-gradient(90deg,var(--blue),#2560c4)}
.distfill.green{background:linear-gradient(90deg,var(--green),#1d9c5a)}
.distfill.purple{background:linear-gradient(90deg,#a855f7,#7e22ce)}
.distval{width:104px;font-size:11.5px;color:var(--txt3);font-family:Consolas,monospace;flex:none}

.lucky-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:13px}
.luckybox{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:13px}
.luckybox .lt{font-size:12px;color:var(--txt3);margin-bottom:9px;display:flex;justify-content:space-between;align-items:center}
.luckyballs{display:flex;flex-wrap:wrap;gap:4px}
.lb{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;font-weight:700;
  background:linear-gradient(160deg,#5b9bff,#2a5fc0);color:#fff}
.lb.hot{background:linear-gradient(160deg,#f87171,#dc2626);box-shadow:0 0 0 2px rgba(248,113,113,.3)}
.lb.mid{background:linear-gradient(160deg,#fbbf24,#d97706)}
.lb.cold{background:linear-gradient(160deg,#64748b,#475569)}

.followrow{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.follab{width:38px;font-size:12px;font-family:Consolas,monospace;color:var(--txt2);text-align:right;flex:none}
.followbar{flex:1;height:17px;background:var(--bg3);border-radius:4px;overflow:hidden}
.followfill{height:100%;border-radius:4px;transition:width .3s}

.mxpool{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;padding:15px;background:var(--bg2);border:1px solid var(--line);border-radius:10px}
.mxn{width:29px;height:29px;border-radius:5px;display:grid;place-items:center;font-size:11.5px;font-weight:700;
  background:var(--bg3);border:1px solid var(--line2);color:var(--txt3);cursor:pointer;transition:.12s}
.mxn:hover{border-color:var(--gold);color:var(--gold)}
.mxn.dan{background:linear-gradient(145deg,#f8a088,#e8503f);color:#fff;border-color:transparent}
.mxn.tuo{background:linear-gradient(145deg,#f9dd9a,#e0a92e);color:#1a1206;border-color:transparent}
.mxn.hit{box-shadow:0 0 0 2px var(--green)}

.scheme{display:inline-block;margin:3px 5px 3px 0;padding:5px 11px;border-radius:6px;
  background:var(--bg2);border:1px solid var(--line);font-family:Consolas,monospace;
  font-size:11.5px;color:var(--txt);letter-spacing:.5px}
.scheme.hit{border-color:var(--green);background:rgba(47,191,113,.10)}

.arrwrap{overflow-x:auto;border:1px solid var(--line);border-radius:9px}
table.arr{border-collapse:collapse;width:100%;font-size:11px;table-layout:fixed;min-width:640px}
table.arr th{background:#1c2739;padding:5px 2px;font-weight:600;font-size:10.5px;color:#8fb0e0;border-bottom:1px solid var(--line2)}
table.arr td{padding:0;text-align:center;border-bottom:1px solid rgba(42,58,80,.4);border-right:1px solid rgba(42,58,80,.3);height:25px}
.arriss{background:#182233;font-size:10.5px;color:var(--txt2);padding:0 6px;
  position:sticky;left:0;z-index:2;text-align:right;white-space:nowrap}
.arrown{width:21px;height:21px;border-radius:50%;display:inline-grid;place-items:center;font-size:10px;font-weight:700;color:#fff;margin:1px}

.money{font-family:Consolas,monospace;font-weight:800}
.money.plus{color:var(--green)}
.money.minus{color:var(--red)}
.incbar{display:flex;height:26px;border-radius:6px;overflow:hidden;margin:14px 0 8px;border:1px solid var(--line)}
.incbar>div{display:grid;place-items:center;font-size:11.5px;font-weight:700;color:#fff;overflow:hidden;white-space:nowrap}

@media(max-width:640px){
  .metrics{grid-template-columns:repeat(2,1fr)}
  .lucky-grid{grid-template-columns:1fr}
  .subtab{font-size:12px;padding:6px 11px}
}