/* ===========================================================
   号码局 · iOS 版
   设计基线：Apple HIG（iOS 17 系统语言）
   =========================================================== */
:root{
  --bg:#F2F2F7;
  --card:#FFFFFF;
  --label:#000000;
  --label2:rgba(60,60,67,.62);
  --label3:rgba(60,60,67,.42);
  --sep:rgba(60,60,67,.20);
  --blue:#007AFF;
  --red:#E0342A;
  --red2:#FF5B4E;
  --blue2:#2F6FB5;
  --blue-l:#5AA0E8;
  --fill:rgba(118,118,128,.10);
  --radius:14px;
  --tab-h:50px;
  color-scheme:light;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0; padding:0}
body{
  background:var(--bg); color:var(--label);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Helvetica Neue",sans-serif;
  font-size:17px; line-height:1.4;
  -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}

/* ---------------- 顶栏 ---------------- */
.nav{
  position:sticky; top:0; z-index:30;
  background:rgba(242,242,247,.88);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border-bottom:.5px solid var(--sep);
  padding:calc(env(safe-area-inset-top) + 4px) 16px 10px;
}
.nav-bar{display:flex; align-items:center; justify-content:center; height:30px; position:relative}
.wordmark{font-size:15px; font-weight:600; letter-spacing:.3px}
.plat{
  position:absolute; right:0; top:4px;
  font-size:10px; font-weight:700; letter-spacing:.4px;
  color:var(--label2); border:.5px solid var(--sep);
  border-radius:5px; padding:1px 5px; line-height:1.35;
}
.nav-large{padding:2px 0 0}
.nav-large h1{margin:0; font-size:34px; line-height:1.16; letter-spacing:.37px; font-weight:700}
.nav-large p{margin:3px 0 0; font-size:13px; color:var(--label2); letter-spacing:.06px}

/* ---------------- 内容 ---------------- */
.content{padding:14px 16px calc(var(--tab-h) + env(safe-area-inset-bottom) + 26px)}
.screen{display:none; animation:in .22s ease-out}
.screen.active{display:block}
@keyframes in{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* 彩种选择 */
.game-row{
  display:flex; gap:8px; overflow-x:auto; padding:2px 0 12px;
  margin:0 -16px; padding-left:16px; padding-right:16px;
  scrollbar-width:none;
}
.game-row::-webkit-scrollbar{display:none}
.g-chip{
  flex:0 0 auto; min-width:78px; padding:9px 12px 8px;
  background:var(--card); border-radius:12px;
  border:.5px solid rgba(60,60,67,.14);
  text-align:left; transition:.16s;
}
.g-chip b{display:block; font-size:14px; font-weight:600; letter-spacing:.02px; white-space:nowrap}
.g-chip em{display:block; font-style:normal; font-size:10.5px; color:var(--label3); margin-top:2px; letter-spacing:.02px}
.g-chip.on{background:var(--blue); border-color:transparent; box-shadow:0 6px 16px -8px rgba(0,122,255,.9)}
.g-chip.on b{color:#fff}
.g-chip.on em{color:rgba(255,255,255,.72)}

/* 分组卡片 */
.group{background:var(--card); border-radius:var(--radius); margin-bottom:14px; overflow:hidden}
.group-row{display:flex; align-items:center; gap:10px; padding:9px 12px}
.group-row + .group-row{border-top:.5px solid var(--sep)}
.group-label{font-size:14px; color:var(--label2); flex:0 0 auto; width:34px}

/* 分段控件 */
.seg{
  display:flex; gap:2px; padding:2px; flex:1;
  background:rgba(118,118,128,.12); border-radius:9px;
}
.seg button{
  flex:1; height:30px; border-radius:7px; font-size:13px; font-weight:500;
  color:var(--label); transition:.14s;
}
.seg button.on{
  background:#fff; box-shadow:0 3px 8px rgba(0,0,0,.10), 0 0 0 .5px rgba(0,0,0,.04);
  font-weight:600;
}
.seg-scroll{overflow-x:auto; scrollbar-width:none}
.seg-scroll::-webkit-scrollbar{display:none}
.seg-scroll button{flex:0 0 auto; min-width:48px; padding:0 10px; font-size:12.5px}

/* 最新开奖 */
.last-draw{
  background:var(--card); border-radius:var(--radius); padding:11px 13px; margin-bottom:12px;
  font-size:12.5px; color:var(--label2); display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.last-draw .ld-tag{font-size:10.5px; font-weight:600; color:var(--label3); letter-spacing:.4px}
.last-draw .mini{display:inline-flex; gap:3px; margin-left:auto}
.last-draw .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(--red2),var(--red));
}
.last-draw .mini i.b{background:linear-gradient(160deg,var(--blue-l),var(--blue2))}

/* 主按钮 */
.btn-primary{
  display:block; width:100%; height:50px; border-radius:14px;
  background:var(--blue); color:#fff; font-size:17px; font-weight:600; letter-spacing:.2px;
  transition:transform .12s, opacity .12s;
  box-shadow:0 10px 22px -14px rgba(0,122,255,.9);
}
.btn-primary:active{transform:scale(.985); opacity:.88}
.btn-ghost{
  display:block; height:50px; border-radius:14px; padding:0 18px;
  background:var(--fill); color:var(--label); font-size:16px; font-weight:500;
}
.btn-ghost:active{opacity:.65}
.btn-ghost.wide{width:100%; margin-top:14px; color:var(--red)}

/* 结果区 */
.res-head{
  display:flex; align-items:baseline; gap:8px; margin:20px 2px 10px;
}
.res-head span{font-size:13px; font-weight:600; color:var(--label2); letter-spacing:.3px; text-transform:uppercase}
.res-head em{font-style:normal; font-size:11.5px; color:var(--label3); margin-left:auto}

.tickets{display:grid; gap:10px}
.ticket{
  background:var(--card); border-radius:var(--radius); padding:12px 13px 11px;
  border:.5px solid transparent;
}
.ticket.top{
  background:linear-gradient(180deg,#FFF7F6,#FFFFFF 62%);
  border-color:rgba(224,52,42,.30);
  box-shadow:0 12px 26px -22px rgba(224,52,42,.75);
}
.t-top{display:flex; align-items:center; gap:7px; margin-bottom:9px}
.rank{font-size:12px; font-weight:600; color:var(--label3); font-variant-numeric:tabular-nums}
.badge-first{
  font-size:10px; font-weight:700; color:#fff; letter-spacing:.6px;
  background:var(--red); border-radius:5px; padding:1.5px 6px;
}
.score{
  margin-left:auto; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums;
  color:var(--label2);
}
.score b{font-size:17px; color:var(--label); margin-right:1px}
.ticket.top .score b{color:var(--red)}

.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; letter-spacing:-.2px;
  background:linear-gradient(160deg,var(--red2),var(--red));
  box-shadow:inset 0 -1.5px 4px rgba(0,0,0,.16);
}
.ball.b{background:linear-gradient(160deg,var(--blue-l),var(--blue2))}
.ball.sm{width:30px; height:30px; font-size:13px}
.ball.digit{
  width:32px; height:40px; border-radius:9px; font-size:18px;
  background:#1C1C1E; box-shadow:none;
}
.ball.digit.wide{width:38px}
.ball.divide{background:none; box-shadow:none; color:var(--label3); 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(--label2); background:rgba(118,118,128,.09);
  border-radius:6px; padding:2.5px 7px; letter-spacing:.02px; white-space:nowrap;
}
.t-acts{display:flex; gap:8px; margin-top:10px; padding-top:9px; border-top:.5px solid var(--sep)}
.t-acts button{
  font-size:13px; font-weight:500; color:var(--blue); padding:2px 0;
}
.t-acts button:active{opacity:.5}
.t-acts button.del{color:var(--red); margin-left:auto}

/* 手动选号 */
.pick-head{
  display:flex; align-items:baseline; gap:8px; margin:16px 2px 9px;
}
.pick-head b{font-size:14px; font-weight:600}
.pick-head em{font-style:normal; font-size:11.5px; color:var(--label3); 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:40px; border-radius:10px; background:var(--card);
  border:.5px solid rgba(60,60,67,.12);
  font-size:15px; font-weight:500; font-variant-numeric:tabular-nums;
  transition:.12s;
}
.num-grid button:active{transform:scale(.94)}
.num-grid button.on{
  background:linear-gradient(160deg,var(--red2),var(--red)); color:#fff;
  border-color:transparent; font-weight:600;
}
.num-grid.blue button.on{background:linear-gradient(160deg,var(--blue-l),var(--blue2))}
.num-grid button.off{opacity:.28}

.analysis{
  background:var(--card); border-radius:var(--radius); padding:13px 14px; margin-top:16px;
}
.a-head{display:flex; align-items:center; margin-bottom:10px}
.a-head b{font-size:14px; font-weight:600}
.a-score{margin-left:auto; font-size:12px; color:var(--label2); display:flex; align-items:center; gap:5px}
.a-score i{
  font-style:normal; font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; color:var(--label);
}
.a-score i.good{color:var(--blue)}
.a-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:9px}
.a-cell{background:rgba(118,118,128,.07); border-radius:9px; padding:7px 8px}
.a-cell span{display:block; font-size:10.5px; color:var(--label3); letter-spacing:.2px}
.a-cell b{display:block; font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; margin-top:1px}
.manual-acts{display:flex; gap:10px; margin-top:14px}
.manual-acts .btn-primary{flex:1; width:auto}

/* 号码本 */
.empty{font-size:13.5px; color:var(--label3); text-align:center; padding:26px 20px; line-height:1.6}

/* 规则页 */
.info-card{background:var(--card); border-radius:var(--radius); padding:15px 16px; margin-bottom:12px}
.info-card h2{margin:0 0 4px; font-size:18px; font-weight:700; letter-spacing:.1px}
.info-card .meta{font-size:12px; color:var(--label3); margin-bottom:12px}
.kv{display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:14px; border-top:.5px solid var(--sep)}
.kv:first-of-type{border-top:none}
.kv span{color:var(--label2); flex:0 0 auto}
.kv b{font-weight:500; text-align:right}
.info-card ul{margin:8px 0 0; padding-left:18px; font-size:14px; line-height:1.72; color:rgba(0,0,0,.78)}
.info-card ul li{margin:2px 0}
.tips{padding:4px 2px 10px}
.tips h3{font-size:14px; font-weight:600; margin:18px 0 6px; color:var(--label)}
.tips p{font-size:13.5px; line-height:1.72; color:var(--label2); margin:0 0 8px}
.tips p.small{font-size:12px; color:var(--label3)}
.tips b{color:var(--label); font-weight:600}

/* 底部标签栏 */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; align-items:flex-start;
  height:calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:rgba(249,249,249,.92);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border-top:.5px solid var(--sep);
}
.tabbar button{
  flex:1; height:var(--tab-h); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px;
  color:var(--label3); transition:.15s;
}
.tabbar svg{
  width:25px; height:25px; fill:none; stroke:currentColor;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.tabbar span{font-size:10px; font-weight:500; letter-spacing:.06px}
.tabbar button.on{color:var(--blue)}

/* 提示 */
.toast{
  position:fixed; left:50%; bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 18px);
  transform:translate(-50%,14px); z-index:60;
  background:rgba(28,28,30,.92); color:#fff;
  font-size:13.5px; padding:9px 16px; border-radius:100px;
  opacity:0; pointer-events:none; transition:.22s; max-width:82vw; text-align:center;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.toast.on{opacity:1; transform:translate(-50%,0)}

[hidden]{display:none !important}

/* ---- 安装到主屏幕引导（iOS Safari） ---- */
.install-hint{
  position:fixed; left:10px; right:10px; z-index:45;
  bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 10px);
  display:flex; align-items:center; gap:10px;
  padding:11px 12px; border-radius:14px;
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(18px) saturate(1.6); backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:0 10px 30px rgba(0,0,0,.15), 0 0 0 .5px rgba(0,0,0,.06);
  opacity:0; transform:translateY(12px);
  transition:opacity .26s ease, transform .26s cubic-bezier(.22,.9,.3,1);
}
.install-hint.on{opacity:1; transform:none}
.install-hint svg{
  width:23px; height:23px; flex:none;
  fill:none; stroke:var(--blue); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.ih-txt{flex:1; min-width:0}
.ih-txt b{display:block; font-size:.82rem; font-weight:600; color:var(--label); letter-spacing:.01em}
.ih-txt em{
  display:block; margin-top:2px; font-style:normal;
  font-size:.72rem; line-height:1.36; color:var(--label2);
}
.ih-close{
  flex:none; border:0; background:none; padding:5px 3px;
  font-size:.82rem; line-height:1; color:var(--label3); cursor:pointer;
}