/* ===========================================================
   双色球 · 智能选号
   =========================================================== */

:root{
  --bg:#F5F5F2;
  --card:#FFFFFF;
  --ink:#15181C;
  --ink2:#5D646C;
  --ink3:#9097A0;
  --line:#E5E6E2;
  --line2:#D8DAD5;
  --red:#D8382C;
  --red-d:#B32C21;
  --red-soft:#FBEDEB;
  --blue:#2E6BB0;
  --blue-d:#22558E;
  --blue-soft:#ECF2F9;
  --dark:#14161A;
  --ok:#1E7A5B;
  --r:16px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
h1,h2,h3{margin:0; line-height:1.25; letter-spacing:-.01em}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
em{font-style:normal}

/* ---------- 顶栏 ---------- */
.top{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.85rem clamp(1rem,4vw,2.5rem);
  background:rgba(245,245,242,.86); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.brand{font-size:1.02rem; font-weight:700; letter-spacing:.01em; display:flex; align-items:baseline; gap:.1rem}
.brand i{color:var(--red); font-style:normal; margin:0 .18rem}
.brand em{font-style:normal; font-weight:500; color:var(--ink2); font-size:.92rem; letter-spacing:.02em}
.top-nav{display:flex; gap:1.4rem; font-size:.88rem; color:var(--ink2)}
.top-nav a{padding-bottom:2px; border-bottom:1px solid transparent; transition:.2s}
.top-nav a:hover{color:var(--ink); border-bottom-color:var(--ink)}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  margin:clamp(1.2rem,3vw,2rem) auto 0;
  max-width:1180px; width:calc(100% - 2rem);
  background:var(--dark); border-radius:22px;
  padding:clamp(1.8rem,4.4vw,3.4rem);
  display:flex; align-items:center; gap:2rem;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(70% 90% at 88% 8%, rgba(216,56,44,.30), transparent 62%),
    radial-gradient(50% 70% at 10% 100%, rgba(46,107,176,.26), transparent 60%);
  pointer-events:none;
}
.hero-inner{position:relative; z-index:2; max-width:34rem}
.kicker{
  font-size:.76rem; letter-spacing:.22em; color:rgba(255,255,255,.55);
  text-transform:uppercase; margin-bottom:1rem;
}
.hero h1{
  color:#fff; font-size:clamp(1.6rem,4.2vw,2.5rem); font-weight:800;
  letter-spacing:-.02em; line-height:1.28;
}
.lede{margin-top:1rem; color:rgba(255,255,255,.66); font-size:.95rem; max-width:30rem; line-height:1.75}
.hero-meta{
  margin-top:1.5rem; display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  font-size:.8rem; color:rgba(255,255,255,.5); letter-spacing:.02em;
}
.hero-meta b{color:rgba(255,255,255,.9); font-variant-numeric:tabular-nums; font-weight:600}
.dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.3)}
.hero-balls{
  position:relative; z-index:1; display:grid; grid-template-columns:repeat(2,auto);
  gap:.7rem; margin-left:auto; opacity:.9;
}
.ghost-ball{
  width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem; font-weight:600; color:#fff; font-variant-numeric:tabular-nums;
  letter-spacing:.03em;
}
.ghost-ball.r{background:linear-gradient(155deg,rgba(232,88,76,.95),rgba(160,40,32,.9));box-shadow:0 10px 30px -12px rgba(216,56,44,.9)}
.ghost-ball.b{background:linear-gradient(155deg,rgba(88,140,200,.95),rgba(30,74,130,.92));box-shadow:0 10px 30px -12px rgba(46,107,176,.9)}
.ghost-ball:nth-child(2){transform:translateY(-14px)}
.ghost-ball:nth-child(3){transform:translateY(-10px)}

/* ---------- 主容器 ---------- */
main{max-width:1180px; margin:0 auto; width:calc(100% - 2rem); padding-bottom:3rem}

/* ---------- 面板 ---------- */
.panel{
  margin-top:clamp(1.2rem,3vw,1.8rem);
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
}
.tabs{display:flex; gap:.2rem; padding:.55rem .55rem 0; border-bottom:1px solid var(--line); background:#FBFBF9}
.tab{
  border:0; background:transparent; padding:.7rem 1.2rem;
  font-size:.92rem; color:var(--ink2); border-radius:10px 10px 0 0;
  position:relative; top:1px; border-bottom:2px solid transparent; transition:.18s;
}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink); font-weight:600; background:var(--card); border-bottom-color:var(--red)}
.tab-body{padding:clamp(1.1rem,3vw,1.8rem)}

/* ---------- 条件网格 ---------- */
.opt-grid{
  display:grid; gap:.9rem 1rem;
  grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
}
.opt{display:flex; flex-direction:column; gap:.4rem; min-width:0}
.opt-k{font-size:.76rem; color:var(--ink3); letter-spacing:.1em}
select{
  appearance:none; -webkit-appearance:none; min-width:0;
  font-family:inherit; font-size:.92rem; color:var(--ink);
  background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238E959C' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right .75rem center;
  border:1px solid var(--line2); border-radius:10px;
  padding:.58rem 2rem .58rem .7rem; width:100%; cursor:pointer;
  transition:border-color .18s, box-shadow .18s;
}
select:focus{outline:none; border-color:var(--red); box-shadow:0 0 0 3px var(--red-soft)}
.opt-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.4rem;
  margin-top:1.1rem; padding-top:1.1rem; border-top:1px dashed var(--line);
}
.chk{display:flex; align-items:center; gap:.5rem; font-size:.88rem; color:var(--ink2); cursor:pointer; user-select:none}
.chk input{
  appearance:none; -webkit-appearance:none;
  width:17px;height:17px;border:1.5px solid var(--line2);border-radius:5px;
  background:#fff; position:relative; cursor:pointer; transition:.16s; flex:none;
}
.chk input:checked{background:var(--ink); border-color:var(--ink)}
.chk input:checked::after{
  content:""; position:absolute; left:5px; top:1.5px; width:4px; height:8px;
  border-right:1.8px solid #fff; border-bottom:1.8px solid #fff; transform:rotate(42deg);
}
.prev-input{display:flex; align-items:center; gap:.6rem; margin-left:auto; min-width:0}
.prev-input span{font-size:.78rem; color:var(--ink3); letter-spacing:.08em; white-space:nowrap}
.prev-input input{
  font-family:inherit; font-size:.88rem; font-variant-numeric:tabular-nums;
  border:1px solid var(--line2); border-radius:10px; padding:.5rem .7rem;
  width:13.5rem; min-width:0; letter-spacing:.06em; color:var(--ink); background:#fff;
}
.prev-input input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft)}

/* ---------- 按钮 ---------- */
.cta-row{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.3rem}
.btn{
  border:1px solid var(--line2); background:#fff; color:var(--ink);
  font-size:.9rem; padding:.6rem 1.15rem; border-radius:10px;
  transition:.16s; white-space:nowrap;
}
.btn:hover{border-color:var(--ink3)}
.btn.primary{
  background:var(--red); border-color:var(--red); color:#fff; font-weight:600;
  padding:.62rem 1.9rem; box-shadow:0 8px 20px -12px rgba(216,56,44,.9);
}
.btn.primary:hover{background:var(--red-d); border-color:var(--red-d); transform:translateY(-1px)}
.btn.primary:active{transform:translateY(0)}
.btn.ghost{background:transparent; color:var(--ink2)}
.btn.mini{font-size:.8rem; padding:.4rem .8rem; border-radius:8px}
.btn.danger{color:var(--red)}
.btn.danger:hover{border-color:var(--red); background:var(--red-soft)}

/* ---------- 候选池 ---------- */
.pool{margin-top:1.5rem; padding-top:1.3rem; border-top:1px dashed var(--line)}
.pool-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:.7rem}
.pool-title{font-size:.82rem; color:var(--ink2); letter-spacing:.06em}
.pool-title b{color:var(--red); font-variant-numeric:tabular-nums; font-size:1rem}
.pool-hint{font-size:.74rem; color:var(--ink3)}

.pool-cells{display:grid; grid-template-columns:repeat(11,minmax(0,1fr)); gap:.42rem}
.pool-cells span{
  aspect-ratio:1; width:100%; max-width:54px; justify-self:center;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; font-size:.78rem; font-variant-numeric:tabular-nums;
  border:1px solid var(--line); color:var(--ink3); background:#FCFCFB;
  transition:.3s;
}
.pool-cells span.in{
  border-color:transparent; color:#fff; font-weight:600;
  background:linear-gradient(155deg,#E4584A,#C12F23);
  box-shadow:0 4px 10px -6px rgba(216,56,44,.8);
}

/* ---------- 手动选号 ---------- */
.pick-block{margin-bottom:1.4rem}
.pick-head{display:flex; align-items:baseline; gap:.6rem; margin-bottom:.6rem}
.pick-head>span:first-child{font-size:.86rem; color:var(--ink2); letter-spacing:.04em}
.pick-head b{color:var(--ink); font-variant-numeric:tabular-nums; font-size:1rem}
.pick-head .hint{font-size:.74rem; color:var(--ink3); margin-left:auto}

.cells{display:grid; gap:.42rem}
.cells.red-cells{grid-template-columns:repeat(11,minmax(0,1fr))}
.cells.blue-cells{grid-template-columns:repeat(16,minmax(0,1fr))}
.cells button{
  aspect-ratio:1; width:100%; max-width:50px; justify-self:center;
  border-radius:50%; border:1px solid var(--line2);
  background:#fff; color:var(--ink2); font-family:inherit;
  font-size:.82rem; font-variant-numeric:tabular-nums; transition:.15s;
  display:flex; align-items:center; justify-content:center;
}
.cells.red-cells button:hover{border-color:var(--red); color:var(--red); background:var(--red-soft)}
.cells.blue-cells button:hover{border-color:var(--blue); color:var(--blue); background:var(--blue-soft)}
.cells.red-cells button.on{
  background:linear-gradient(155deg,#E4584A,#C12F23); border-color:transparent;
  color:#fff; font-weight:600; box-shadow:0 4px 12px -6px rgba(216,56,44,.9);
}
.cells.blue-cells button.on{
  background:linear-gradient(155deg,#548CC8,#22558E); border-color:transparent;
  color:#fff; font-weight:600; box-shadow:0 4px 12px -6px rgba(46,107,176,.9);
}

/* ---------- 结构分析 ---------- */
.analysis{
  margin-top:1rem; padding:1rem 1.2rem; border-radius:12px;
  background:#FBFBF9; border:1px solid var(--line);
  display:grid; gap:.5rem 1.6rem; grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  font-size:.84rem;
}
.analysis .k{color:var(--ink3); font-size:.74rem; letter-spacing:.1em; display:block}
.analysis .v{font-variant-numeric:tabular-nums; color:var(--ink); font-weight:600}
.analysis .v.good{color:var(--ok)}

/* ---------- 结果区 ---------- */
.result,.book,.rules{margin-top:clamp(1.6rem,4vw,2.4rem)}
.sec-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; flex-wrap:wrap}
.sec-head h2{font-size:1.05rem; font-weight:700; letter-spacing:.01em; display:flex; align-items:baseline; gap:.5rem}
.sec-head h2 em{font-size:.8rem; font-weight:500; color:var(--ink3); letter-spacing:.02em}
.sec-acts{display:flex; gap:.5rem; flex-wrap:wrap}

.tickets{display:grid; gap:.7rem}
.ticket{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:.9rem 1.1rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  transition:.18s;
}
.ticket:hover{border-color:var(--line2); box-shadow:0 14px 30px -26px rgba(20,24,28,.6)}
.ticket .idx{
  font-size:.72rem; color:var(--ink3); font-variant-numeric:tabular-nums;
  min-width:1.7rem; letter-spacing:.04em;
}
.order-hint{font-size:.78rem; color:var(--ink3); margin:.1rem 0 .2rem}
.order-hint b{color:var(--red-d)}
.ticket.top{border-color:var(--red-soft); background:linear-gradient(0deg,var(--red-soft),var(--red-soft)) , var(--card)}
.ticket.top .idx{color:var(--red-d); font-weight:600}
.ticket .idx em{
  display:inline-block; font-style:normal; font-size:.62rem; font-weight:600;
  color:#fff; background:var(--red-d); border-radius:5px;
  padding:.08rem .3rem; margin-left:.25rem; vertical-align:1px; letter-spacing:.06em;
}
.balls{display:flex; gap:.36rem; align-items:center; flex-wrap:wrap}
.ball{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem; font-weight:600; color:#fff;
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}
.ball.red{background:radial-gradient(circle at 32% 26%,#F0604F,#C42E23 72%);box-shadow:inset 0 -2px 6px rgba(0,0,0,.16)}
.ball.blue{background:radial-gradient(circle at 32% 26%,#5B93CE,#245A96 72%);box-shadow:inset 0 -2px 6px rgba(0,0,0,.16)}
.ball.plus{background:none; color:var(--ink3); font-size:1rem; width:auto; box-shadow:none; font-weight:400}
.ticket .tagline{display:flex; gap:.4rem; flex-wrap:wrap; margin-left:auto; align-items:center}
.tag{
  font-size:.72rem; letter-spacing:.04em; padding:.16rem .5rem; border-radius:6px;
  background:#F3F4F1; color:var(--ink2); white-space:nowrap;
}
.tag.score{background:var(--red-soft); color:var(--red-d); font-variant-numeric:tabular-nums}
.tag.flat{background:var(--blue-soft); color:var(--blue-d)}
.ticket .acts{display:flex; gap:.35rem; margin-left:.2rem}
.icon-btn{
  border:1px solid var(--line); background:#fff; color:var(--ink2);
  border-radius:8px; font-size:.76rem; padding:.3rem .55rem; transition:.15s; white-space:nowrap;
}
.icon-btn:hover{border-color:var(--ink3); color:var(--ink)}
.icon-btn.saved{border-color:var(--ok); color:var(--ok); background:#F1F8F5}

.empty{
  font-size:.86rem; color:var(--ink3); padding:1.6rem 1.2rem; text-align:center;
  border:1px dashed var(--line2); border-radius:14px; background:#FBFBF9;
}

/* ---------- 说明 ---------- */
.rules h2{font-size:1.05rem; font-weight:700; margin-bottom:1rem}
.rule-grid{display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.rule{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:1.1rem 1.2rem;
}
.rule h3{font-size:.92rem; font-weight:600; margin-bottom:.5rem; color:var(--ink)}
.rule p{font-size:.84rem; color:var(--ink2); line-height:1.8}
.rule b{color:var(--ink); font-weight:600}
.rule-foot{
  margin-top:1rem; padding:1.1rem 1.2rem; border-radius:14px;
  background:#FBFBF9; border:1px solid var(--line); font-size:.82rem; color:var(--ink2); line-height:1.9;
}
.rule-foot b{color:var(--ink)}
.rule-foot .warn{margin-top:.5rem; color:var(--red-d)}

/* ---------- 页脚 ---------- */
.foot{
  border-top:1px solid var(--line); padding:1.6rem 1rem 2.2rem;
  text-align:center; font-size:.76rem; color:var(--ink3); letter-spacing:.06em;
}
.foot .sep{margin:0 .5rem; opacity:.5}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:2rem; transform:translate(-50%,14px);
  background:var(--dark); color:#fff; font-size:.84rem;
  padding:.6rem 1.1rem; border-radius:10px; opacity:0; pointer-events:none;
  transition:.24s; z-index:200; box-shadow:0 14px 30px -14px rgba(0,0,0,.5);
}
.toast.show{opacity:1; transform:translate(-50%,0)}

/* ---------- 响应式 ---------- */
@media (max-width:820px){
  .hero{flex-direction:column; align-items:flex-start; gap:1.4rem}
  .hero-balls{margin-left:0; grid-template-columns:repeat(4,auto)}
  .ghost-ball{width:42px;height:42px;font-size:.8rem}
  .ghost-ball:nth-child(2),.ghost-ball:nth-child(3){transform:none}
  .prev-input{margin-left:0; width:100%}
  .prev-input input{width:100%; flex:1}
  .pool-cells{grid-template-columns:repeat(11,minmax(0,1fr)); gap:.3rem}
  .pool-cells span{font-size:.7rem}
  .red-cells{grid-template-columns:repeat(11,minmax(0,1fr))}
  .blue-cells{grid-template-columns:repeat(8,minmax(0,1fr))}
  .ticket{gap:.7rem}
  .ticket .tagline{margin-left:0; width:100%}
  .ticket .acts{margin-left:auto}
}
@media (max-width:520px){
  body{font-size:14.5px}
  .top-nav{gap:1rem; font-size:.82rem}
  .brand em{display:none}
  .hero{border-radius:18px; width:calc(100% - 1.4rem); padding:1.5rem 1.25rem}
  main{width:calc(100% - 1.4rem)}
  .tab{padding:.6rem .9rem; font-size:.86rem}
  .ball{width:32px;height:32px;font-size:.82rem}
  .cells button{font-size:.76rem}
  .red-cells{grid-template-columns:repeat(8,minmax(0,1fr))}
  .pool-cells{grid-template-columns:repeat(7,minmax(0,1fr))}
  .opt-grid{grid-template-columns:1fr 1fr}
  .ticket{padding:.8rem .85rem}
}

/* ---------- 历史数据页 ---------- */
.data-status{
  font-size:.84rem; color:var(--ink3); padding:.9rem 1rem;
  border:1px dashed var(--line2); border-radius:12px; background:#FBFBF9;
}
.dsec{margin-top:1.5rem}
.dsec .sec-head{margin-bottom:.8rem}
.d-note{font-size:.8rem; color:var(--ink3); line-height:1.8; margin-top:.7rem}
.d-note b{color:var(--ink2)}
.d-k{font-size:.76rem; color:var(--ink3); letter-spacing:.1em; margin-bottom:.5rem}

.draw-rows{display:grid; gap:.45rem}
.draw-row{
  display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  padding:.55rem .8rem; background:#FBFBF9; border:1px solid var(--line);
  border-radius:10px; font-size:.82rem;
}
.draw-row .dc{font-variant-numeric:tabular-nums; color:var(--ink2); min-width:4.2rem}
.draw-row .dd{color:var(--ink3); font-size:.74rem; min-width:5.2rem}
.draw-row .ds{color:var(--ink3); font-size:.74rem; margin-left:auto; font-variant-numeric:tabular-nums}
.draw-row .ds b{color:var(--ink2); font-weight:600}
.draw-row .icon-btn{font-size:.72rem; padding:.24rem .5rem}
.draw-row .ball{width:28px;height:28px;font-size:.74rem}

.chart-wrap{overflow-x:auto}
.chart-inner{min-width:640px}
.chart{
  position:relative; display:flex; align-items:flex-end; gap:3px;
  height:120px; padding:0 2px;
  border-bottom:1px solid var(--line);
}
.chart .c-col{
  flex:1; max-width:38px; margin:0 auto; display:flex; align-items:flex-end;
  justify-content:center; position:relative; height:100%;
}
.chart .c-col i{
  display:block; width:78%; border-radius:4px 4px 0 0;
  background:#E3A9A2; transition:height .4s;
}
.chart .c-col.hot i{background:linear-gradient(180deg,#E4584A,#C12F23)}
.chart .c-col.cold i{background:#B9C4CE}
.chart .theory-line{
  position:absolute; left:0; right:0; border-top:1.5px dashed var(--blue);
  opacity:.55; pointer-events:none; z-index:2;
}
.chart .theory-line::after{
  content:attr(data-label); position:absolute; right:2px; top:-1.15rem;
  font-size:.66rem; color:var(--blue); letter-spacing:.04em; white-space:nowrap;
}
.chart-labels{display:flex; gap:3px; padding:4px 2px 0}
.chart-labels b{
  flex:1; max-width:38px; margin:0 auto; text-align:center;
  font-size:.68rem; color:var(--ink3); font-variant-numeric:tabular-nums; font-weight:500;
}
.chart-labels b.hot{color:var(--red-d); font-weight:700}
.chart-labels b.cold{color:var(--blue-d); font-weight:700}

.omit-scroll{overflow-x:auto; padding-bottom:.3rem}
.omit-grid{display:grid; grid-auto-flow:column; grid-template-rows:repeat(3,auto); gap:3px 4px; width:max-content}
.omit-cell{
  min-width:44px; text-align:center; padding:.3rem .2rem; border-radius:8px;
  background:#FBFBF9; border:1px solid var(--line);
}
.omit-cell b{display:block; font-size:.78rem; font-variant-numeric:tabular-nums}
.omit-cell span{display:block; font-size:.62rem; color:var(--ink3); letter-spacing:.06em}
.omit-cell.cur-hot{border-color:var(--red); background:var(--red-soft)}
.omit-cell.cur-hot b{color:var(--red-d)}
.omit-more{margin-top:.8rem; display:grid; gap:.4rem; font-size:.82rem; color:var(--ink2)}
.omit-more b{font-variant-numeric:tabular-nums; color:var(--ink)}

.math-grid{display:grid; gap:.6rem; grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.math-card{
  background:#FBFBF9; border:1px solid var(--line); border-radius:12px;
  padding:.8rem .9rem; font-size:.8rem; color:var(--ink2); line-height:1.7;
}
.math-card b{display:block; font-size:1.05rem; color:var(--ink); font-variant-numeric:tabular-nums; font-weight:700}
.math-card .hl{color:var(--red-d)}

.spark{background:#FBFBF9; border:1px solid var(--line); border-radius:12px; padding:.8rem}
.spark svg{display:block; width:100%; height:140px}

@media (max-width:640px){
  .chart em{display:none}
  .chart{height:90px}
}
@media (max-width:520px){
  .chart .c-col,.chart-labels b{max-width:26px}
  .draw-row .dd{display:none}
}