/* ===========================================================
   号码局 · Android 版
   设计基线：Material Design 3（动态色板 · 种子色 深青）
   =========================================================== */
:root{
  --primary:#006B5E;
  --on-primary:#FFFFFF;
  --primary-c:#9EF2E2;
  --on-primary-c:#00201B;
  --secondary-c:#CCE8E0;
  --on-secondary-c:#0B1F1B;
  --surf:#F5FBF7;
  --surf-c:#EBF0ED;
  --surf-ch:#E3E9E6;
  --on-surf:#171D1B;
  --on-surf-v:#3F4946;
  --outline:#6F7975;
  --outline-v:#BEC9C4;
  --err:#BA1A1A;
  --err-c:#FFDAD6;
  --red:#D93A2B;
  --red-l:#F2695B;
  --blue:#2F6FB5;
  --blue-l:#5C97D4;
  --radius:16px;
  color-scheme:light;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; padding:0}
body{
  background:var(--surf); color:var(--on-surf);
  font-family:Roboto,"Noto Sans SC","Source Han Sans SC",-apple-system,"PingFang SC",sans-serif;
  font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
button{font-family:inherit; font-size:inherit; color:inherit; background:none; border:none; padding:0; cursor:pointer}

/* ripple */
.rip{position:relative; overflow:hidden}
.rip>.r{
  position:absolute; border-radius:50%; pointer-events:none;
  background:currentColor; opacity:.14; transform:scale(0);
  animation:rip .5s ease-out forwards;
}
@keyframes rip{to{transform:scale(2.6); opacity:0}}

/* ---------------- 顶栏 ---------------- */
.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:6px;
  padding:calc(env(safe-area-inset-top) + 14px) 10px 8px 18px;
  background:var(--surf);
}
.topbar-titles{flex:1; min-width:0}
.topbar h1{margin:0; font-size:22px; font-weight:500; letter-spacing:0; line-height:28px}
.topbar p{margin:1px 0 0; font-size:12.5px; color:var(--on-surf-v); line-height:16px}
.icon-btn{
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; color:var(--on-surf-v); flex:0 0 auto;
}
.icon-btn svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.icon-btn:active{background:rgba(0,0,0,.06)}

/* ---------------- 标签页 ---------------- */
.tabs{
  position:sticky; top:calc(env(safe-area-inset-top) + 64px); z-index:29;
  display:flex; padding:0 8px;
  background:var(--surf);
  border-bottom:1px solid var(--outline-v);
}
.tabs button{
  flex:1; height:56px; position:relative;
  font-size:14px; font-weight:500; color:var(--on-surf-v);
  transition:color .18s;
}
.tabs button span{position:relative; z-index:1}
.tabs button i{
  position:absolute; left:50%; bottom:6px; height:4px; width:0;
  transform:translateX(-50%); border-radius:4px 4px 2px 2px;
  background:var(--primary); transition:width .22s cubic-bezier(.3,0,.2,1);
}
.tabs button.on{color:var(--primary); font-weight:600}
.tabs button.on i{width:44px}

/* ---------------- 内容 ---------------- */
.content{padding:16px 16px 40px}
.screen{display:none; animation:in .2s ease-out}
.screen.active{display:block}
@keyframes in{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

.card{
  background:var(--surf-c); border-radius:var(--radius);
  padding:14px 16px 15px; margin-bottom:12px;
}
.card.outlined{background:transparent; border:1px solid var(--outline-v)}

/* chips */
.chip-row{display:flex; gap:8px; overflow-x:auto; padding:5px 0; margin:0 -2px; scrollbar-width:none}
.chip-row::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto; height:32px; padding:0 14px;
  border:1px solid var(--outline-v); border-radius:8px;
  font-size:13px; font-weight:500; color:var(--on-surf-v);
  display:inline-flex; align-items:center; gap:5px;
  transition:.16s; background:transparent;
}
.chip.on{
  background:var(--secondary-c); border-color:transparent; color:var(--on-secondary-c);
  font-weight:600;
}
.chip.on::before{content:"✓"; font-size:12px}
.g-chip{
  flex:0 0 auto; min-width:82px; padding:9px 12px 8px;
  background:var(--surf-c); border-radius:12px; text-align:left; transition:.16s;
  border:1px solid transparent;
}
.g-chip b{display:block; font-size:14px; font-weight:600; white-space:nowrap}
.g-chip em{display:block; font-style:normal; font-size:10.5px; color:var(--on-surf-v); opacity:.75; margin-top:2px}
.g-chip.on{background:var(--primary); box-shadow:0 4px 12px -6px rgba(0,107,94,.55)}
.g-chip.on b{color:var(--on-primary)}
.g-chip.on em{color:rgba(255,255,255,.75)}

.f-row{display:flex; align-items:center; margin:10px 0 4px}
.f-row:first-child{margin-top:0}
.f-label{font-size:12px; font-weight:600; color:var(--on-surf-v); letter-spacing:.4px}
.f-row .chip-row{margin-bottom:-5px}

/* 上期开奖 */
.card.ld{display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-height:58px}
.ld-tag{font-size:11px; font-weight:700; color:var(--primary); letter-spacing:.8px}
.ld-info{font-size:12.5px; color:var(--on-surf-v)}
.ld-info b{color:var(--on-surf); font-weight:600}
.mini{display:inline-flex; gap:3px; margin-left:auto}
.mini i{
  font-style:normal; font-size:11px; font-weight:600; font-variant-numeric:tabular-nums;
  min-width:19px; height:19px; border-radius:50%; display:grid; place-items:center;
  color:#fff; background:linear-gradient(160deg,var(--red-l),var(--red));
}
.mini i.b{background:linear-gradient(160deg,var(--blue-l),var(--blue))}

/* 结果 */
.res-head{display:flex; align-items:baseline; gap:8px; margin:6px 2px 10px}
.overline{font-size:12px; font-weight:700; letter-spacing:1px; color:var(--primary)}
.res-head em{font-style:normal; font-size:11.5px; color:var(--on-surf-v)}
.text-btn{
  font-size:13px; font-weight:600; color:var(--primary);
  height:36px; padding:0 12px; border-radius:18px; margin-left:auto;
}
.text-btn.danger{color:var(--err)}

.tickets{display:grid; gap:10px}
.ticket{
  background:var(--surf-c); border-radius:var(--radius); padding:13px 15px 12px;
  border:1px solid transparent;
}
.ticket.top{background:var(--secondary-c); border-color:rgba(0,107,94,.18)}
.t-top{display:flex; align-items:center; gap:8px; margin-bottom:9px}
.rank{font-size:12px; font-weight:600; color:var(--on-surf-v); font-variant-numeric:tabular-nums}
.badge-first{
  font-size:10.5px; font-weight:700; letter-spacing:.4px;
  background:var(--primary); color:var(--on-primary); border-radius:7px; padding:2px 8px;
}
.score{margin-left:auto; font-size:11.5px; color:var(--on-surf-v); display:flex; align-items:baseline; gap:3px}
.score b{font-size:19px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--on-surf)}
.ticket.top .score b{color:var(--primary)}

.balls{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.ball{
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  font-size:14.5px; font-weight:600; font-variant-numeric:tabular-nums; color:#fff;
  background:linear-gradient(160deg,var(--red-l),var(--red));
  box-shadow:inset 0 -1.5px 4px rgba(0,0,0,.18);
}
.ball.b{background:linear-gradient(160deg,var(--blue-l),var(--blue))}
.ball.sm{width:30px; height:30px; font-size:13px}
.ball.digit{
  width:32px; height:42px; border-radius:10px; font-size:18px;
  background:var(--on-surf); box-shadow:none; color:var(--surf);
}
.ball.digit.wide{width:38px}
.ball.divide{background:none; box-shadow:none; color:var(--on-surf-v); width:12px; font-weight:400; font-size:16px}

.tags{display:flex; gap:5px; flex-wrap:wrap; margin-top:10px}
.tag{
  font-size:11px; color:var(--on-surf-v); background:var(--surf-ch);
  border-radius:7px; padding:3px 8px; white-space:nowrap;
}
.ticket.top .tag{background:rgba(255,255,255,.55)}
.t-acts{display:flex; gap:4px; margin-top:10px}
.t-acts button{
  font-size:13px; font-weight:600; color:var(--primary);
  height:34px; padding:0 12px; border-radius:17px;
}
.t-acts button:active{background:rgba(0,107,94,.10)}
.t-acts .del{color:var(--err); margin-left:auto}
.t-date{font-size:11px; color:var(--on-surf-v); align-self:center; margin-left:8px}

/* 手动选号 */
.pick-head{display:flex; align-items:baseline; gap:8px; margin:14px 2px 8px}
.pick-head b{font-size:14px; font-weight:600}
.pick-head em{font-style:normal; font-size:11.5px; color:var(--on-surf-v); margin-left:auto}
.num-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:7px}
.num-grid.g8{grid-template-columns:repeat(8,1fr)}
.num-grid.g5{grid-template-columns:repeat(5,1fr)}
.num-grid button{
  height:42px; border-radius:12px; background:var(--surf-ch);
  font-size:15px; font-weight:500; font-variant-numeric:tabular-nums;
  color:var(--on-surf); transition:.13s;
  border:1px solid transparent;
}
.num-grid button:active{transform:scale(.93)}
.num-grid button.on{
  background:var(--primary-c); color:var(--on-primary-c);
  border-color:var(--primary); font-weight:700;
}
.num-grid.blue button.on{background:var(--primary-c)}
.num-grid button.off{opacity:.26}

.analysis{margin-top:16px}
.a-head{display:flex; align-items:center; margin-bottom:10px}
.a-head b{font-size:15px; font-weight:600}
.a-score{margin-left:auto; font-size:12px; color:var(--on-surf-v); display:flex; align-items:baseline; gap:5px}
.a-score i{font-style:normal; font-size:22px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--primary)}
.a-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.a-cell{background:var(--surf); border-radius:12px; padding:8px 10px}
.a-cell span{display:block; font-size:10.5px; color:var(--on-surf-v)}
.a-cell b{display:block; font-size:15.5px; font-weight:600; font-variant-numeric:tabular-nums; margin-top:1px}
.manual-acts{display:flex; gap:10px; margin-top:14px}
.btn-tonal{
  flex:1; height:44px; border-radius:22px;
  background:var(--secondary-c); color:var(--on-secondary-c);
  font-size:14px; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
}
.btn-tonal svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round}
.btn-tonal:active{filter:brightness(.95)}

/* 号码本 */
.empty{font-size:13.5px; color:var(--on-surf-v); text-align:center; padding:28px 24px; line-height:1.7}

/* 规则 */
.info-card{background:var(--surf-c); border-radius:var(--radius); padding:16px; margin-bottom:12px}
.info-card h2{margin:0 0 3px; font-size:19px; font-weight:600; letter-spacing:0}
.info-card .meta{font-size:12px; color:var(--on-surf-v); margin-bottom:12px}
.kv{display:flex; justify-content:space-between; gap:14px; padding:8px 0; font-size:13.5px; border-top:1px solid var(--outline-v)}
.kv:first-of-type{border-top:none}
.kv span{color:var(--on-surf-v); flex:0 0 auto}
.kv b{font-weight:500; text-align:right}
.info-card ul{margin:8px 0 0; padding-left:18px; font-size:13.5px; line-height:1.75; color:var(--on-surf)}
.info-card ul li{margin:2px 0}
.tips{padding:4px 4px 10px}
.tips h3{font-size:14.5px; font-weight:600; margin:18px 0 6px}
.tips p{font-size:13.5px; line-height:1.75; color:var(--on-surf-v); margin:0 0 8px}
.tips p.small{font-size:12px}
.tips b{color:var(--on-surf)}

/* FAB */
.fab{
  position:fixed; right:18px; bottom:calc(20px + env(safe-area-inset-bottom)); z-index:40;
  height:52px; padding:0 20px 0 16px; border-radius:16px;
  background:var(--primary-c); color:var(--on-primary-c);
  display:inline-flex; align-items:center; gap:9px;
  font-size:14.5px; font-weight:600; letter-spacing:.1px;
  box-shadow:0 4px 10px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.14);
  transition:transform .14s, box-shadow .14s;
}
.fab svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round}
.fab:active{transform:scale(.96); box-shadow:0 2px 6px rgba(0,0,0,.2)}
.fab.busy{opacity:.72; pointer-events:none}

/* Snackbar */
.snackbar{
  position:fixed; left:50%; bottom:calc(88px + env(safe-area-inset-bottom));
  transform:translate(-50%,16px); z-index:60;
  background:#2B2F2D; color:#F0F4F2;
  font-size:13.5px; padding:11px 18px; border-radius:10px;
  opacity:0; pointer-events:none; transition:.22s; max-width:86vw; text-align:center;
  box-shadow:0 6px 20px rgba(0,0,0,.3);
}
.snackbar.on{opacity:1; transform:translate(-50%,0)}

[hidden]{display:none !important}