/* ==========================================================================
   彩票对奖助手 H5 —— 按 UI 组图还原
   ========================================================================== */

:root {
  --blue: #2f6bff;
  --blue-d: #1f56e0;
  --blue-l: #eaf1ff;
  --red: #f0454b;
  --red-d: #e12f38;
  --red-l: #fff1f0;
  --grad-blue: linear-gradient(160deg, #4c8dff 0%, #2f6bff 55%, #2358e8 100%);
  --grad-red: linear-gradient(165deg, #ff7a63 0%, #f5484e 45%, #e62f3d 100%);
  --bg: #f4f6f9;
  --card: #ffffff;
  --text: #171a22;
  --sub: #5c6376;
  --muted: #98a0b3;
  --line: #eceff5;
  --gold: #ffc53d;
  --radius: 16px;
  --shadow: 0 6px 24px rgba(23, 40, 90, 0.08);
  --tabbar-h: 58px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue",
    "Microsoft YaHei", "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100%;
  position: relative;
  background: var(--bg);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.06);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: 15px; }

/* ── 通用 ─────────────────────────────────────────────────────────────── */
.page {
  padding-bottom: calc(var(--tabbar-h) + 16px);
  min-height: 100vh;
  animation: fade .22s ease;
}
.page.no-tab { padding-bottom: 24px; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  transition: transform .12s, opacity .12s;
}
.btn:active { transform: scale(.97); opacity: .9; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-red { background: var(--red); color: #fff; }
.btn-ghost { background: #fff; color: var(--red); border: 1.5px solid var(--red); }
.btn-plain { background: #f0f2f7; color: var(--text); }
.btn-block { display: flex; width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }

.muted { color: var(--muted); }
.sub { color: var(--sub); }

/* ── 顶部导航 ─────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  font-weight: 600;
}
.nav .nav-back {
  position: absolute;
  left: 10px;
  top: 0;
  height: 50px;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--text);
}
.nav .nav-right {
  position: absolute;
  right: 10px;
  top: 0;
  height: 50px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--sub);
  font-size: 13px;
}
.nav.dark { background: #14151a; color: #fff; border-bottom: none; }
.nav.dark .nav-back { color: #fff; }

/* ── 首页 ─────────────────────────────────────────────────────────────── */
.hero {
  background: var(--grad-blue);
  padding: 14px 18px 92px;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 22px 22px;
}
.hero-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 34px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .5px;
}
.hero-bar .dots {
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: .95;
}
.hero-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  gap: 10px;
}
.hero-title {
  color: #fff;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: 1px;
  text-shadow: 0 4px 14px rgba(0, 40, 140, .25);
}
.hero-sub {
  color: rgba(255, 255, 255, .88);
  font-size: 12.5px;
  margin-top: 12px;
  letter-spacing: .4px;
}
.hero-art { flex: 0 0 auto; width: 132px; }

.scan-card {
  margin: -72px 16px 0;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(20, 50, 130, .14);
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 2;
}
.scan-ico {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: linear-gradient(150deg, #4f8bff, #2f6bff);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(47, 107, 255, .35);
  flex: 0 0 auto;
}
.scan-txt { flex: 1; }
.scan-txt h3 { margin: 0; font-size: 19px; font-weight: 700; }
.scan-txt p { margin: 5px 0 0; font-size: 12.5px; color: var(--muted); }
.scan-go { font-size: 26px; color: #c9cfdb; }

.quick {
  display: flex;
  margin: 18px 16px 0;
  background: #fff;
  border-radius: 16px;
  padding: 16px 4px;
  box-shadow: var(--shadow);
}
.quick-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.quick-item .qi {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
}
.quick-item b { font-size: 13.5px; font-weight: 600; }
.quick-item span { font-size: 10.5px; color: var(--muted); }

.sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 18px 12px;
}
.sec-head h3 { margin: 0; font-size: 17px; font-weight: 700; }
.sec-head a { font-size: 12.5px; color: var(--muted); }

.game-list { margin: 0 16px; display: flex; flex-direction: column; gap: 10px; }
.game-row {
  background: #fff;
  border-radius: 14px;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow);
}
.game-badge {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  line-height: 1.1;
  flex: 0 0 auto;
}
.game-info { flex: 1; min-width: 0; }
.game-info b { font-size: 15.5px; }
.game-info p { margin: 3px 0 0; font-size: 11.5px; color: var(--muted); }
.game-info .pool { color: var(--red); font-weight: 600; }
.game-buy {
  background: var(--blue);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 15px;
  border-radius: 999px;
  flex: 0 0 auto;
}

/* ── 底部导航 ─────────────────────────────────────────────────────────── */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  display: flex;
  z-index: 40;
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
  color: var(--muted);
}
.tab svg { width: 22px; height: 22px; }
.tab.on { color: var(--blue); font-weight: 600; }

/* ── 拍照对奖 ─────────────────────────────────────────────────────────── */
.scan-page {
  min-height: 100vh;
  background: #14151a;
  color: #fff;
  display: flex;
  flex-direction: column;
  position: relative;
}
.scan-stage {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #2a2c36 0%, #14151a 78%);
}
.scan-stage video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.scan-placeholder { position: relative; text-align: center; color: #8d93a6; z-index: 1; padding: 0 30px; }
.scan-placeholder .ph-ico { font-size: 54px; opacity: .55; }

.scan-hint {
  position: absolute;
  top: 68px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 3;
  font-size: 14px;
  line-height: 1.7;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
  color: #fff;
}
.scan-frame {
  position: relative;
  width: min(74vw, 300px);
  aspect-ratio: 0.74;
  z-index: 2;
  border-radius: 6px;
}
.scan-frame .corner {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 3px solid #4d8bff;
  border-radius: 3px;
}
.scan-frame .c1 { top: 0; left: 0; border-right: none; border-bottom: none; }
.scan-frame .c2 { top: 0; right: 0; border-left: none; border-bottom: none; }
.scan-frame .c3 { bottom: 0; left: 0; border-right: none; border-top: none; }
.scan-frame .c4 { bottom: 0; right: 0; border-left: none; border-top: none; }
.scan-line {
  position: absolute;
  left: 6px;
  right: 6px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #4d8bff, transparent);
  animation: scanMove 2.4s ease-in-out infinite;
  box-shadow: 0 0 12px #4d8bff;
}
@keyframes scanMove { 0%,100% { top: 8%; } 50% { top: 90%; } }

.scan-tick {
  position: absolute;
  z-index: 2;
  margin-top: calc(min(74vw, 300px) / 0.74 + 14px);
  font-size: 12px;
  color: #7d8496;
}

.scan-ctrl {
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #14151a;
}
.scan-ctrl .side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: #d7dae4;
  font-size: 12.5px;
  width: 78px;
}
.scan-ctrl .side .ring {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
}
.shutter {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid rgba(255, 255, 255, .35);
  background-clip: padding-box;
  box-shadow: 0 0 0 4px #14151a, 0 0 0 7px rgba(255, 255, 255, .85);
  transition: transform .12s;
}
.shutter:active { transform: scale(.92); }
.shutter[disabled] { opacity: .4; }

.scan-foot {
  text-align: center;
  padding: 12px 0 18px;
  font-size: 12.5px;
  color: #8d93a6;
  background: #14151a;
}
.scan-foot b { color: #cfd4e0; font-weight: 500; }

.scan-loading {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: rgba(10, 11, 15, .78);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #fff;
}
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, .2);
  border-top-color: #4d8bff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 对奖结果 ─────────────────────────────────────────────────────────── */
.result-hero {
  background: var(--grad-red);
  padding: 16px 18px 74px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-radius: 0 0 22px 22px;
}
.result-hero .trophy { font-size: 62px; line-height: 1; filter: drop-shadow(0 8px 16px rgba(120,0,0,.3)); }
.result-hero h1 { margin: 12px 0 6px; color: #fff; font-size: 30px; font-weight: 800; letter-spacing: 1px; }
.result-hero p { margin: 0; color: rgba(255, 255, 255, .95); font-size: 14.5px; }
.result-hero p b { font-size: 19px; color: #ffe08a; }
.result-hero.lose { background: linear-gradient(165deg, #8e97ab 0%, #6c748a 50%, #565d72 100%); }

.result-body { margin: -56px 14px 0; position: relative; z-index: 2; }
.rcard {
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 12px;
}
.rcard-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.rcard-head b { font-size: 16.5px; }
.rcard-head .meta { font-size: 12px; color: var(--muted); }
.rcard-head .stake {
  margin-left: auto;
  font-size: 13px;
  background: var(--red-l);
  color: var(--red);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
}

.balls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 14px 0 4px; }
.ball {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  background: var(--red);
}
.ball.b { background: #2f7bff; }
.ball.miss { background: #d8dce6; color: #98a0b3; }
.ball.sm { width: 26px; height: 26px; font-size: 12.5px; }
.balls-label {
  width: 40px;
  font-size: 12.5px;
  color: var(--sub);
  flex: 0 0 auto;
}
.ball-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

/* 多注票：逐注明细行 */
.bet-list { display: flex; flex-direction: column; gap: 10px; }
.bet-row {
  background: #f7f8fb;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.bet-idx {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--sub);
  background: #eceef4;
  border-radius: 6px;
  padding: 3px 6px;
  margin-top: 2px;
}
.bet-body { flex: 1; min-width: 0; }
.bet-body .balls { display: flex; align-items: center; gap: 4px; }
.bet-prize {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  margin-top: 4px;
  max-width: 96px;
}
.bet-prize.win { color: var(--red); font-weight: 700; }

/* 查彩记录里的多注明细（紧凑版） */
.tk-bets { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.tk-bet {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f7f8fb;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
}
.tk-bet .bet-idx { font-size: 10.5px; padding: 2px 5px; margin-top: 0; }
.tk-balls { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 3px; }
.tk-bet .bet-prize { margin-top: 0; font-size: 11.5px; max-width: 110px; }

.tier-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.tier-table th {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
  text-align: left;
  padding: 10px 0 8px;
  border-bottom: 1px solid var(--line);
}
.tier-table th:last-child, .tier-table td:last-child { text-align: right; }
.tier-table td { padding: 13px 0; font-size: 14.5px; border-bottom: 1px dashed var(--line); }
.tier-table tr:last-child td { border-bottom: none; }
.tier-table .money { color: var(--red); font-weight: 700; }
.tier-table .dim { color: var(--muted); }

.result-actions { display: flex; gap: 12px; margin-top: 4px; }
.result-actions .btn { flex: 1; height: 48px; }

.share-card {
  margin-top: 12px;
  background: linear-gradient(100deg, #fff0ee, #ffe6e3);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.share-card .si { font-size: 30px; }
.share-card .st { flex: 1; }
.share-card .st b { display: block; font-size: 14.5px; }
.share-card .st span { font-size: 12px; color: #b0706c; }
.share-card .btn { height: 34px; padding: 0 16px; font-size: 13px; background: var(--red); color: #fff; }

.notice {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin: 12px 0 4px;
}

/* 对奖结果卡片：期号核对说明（按票面期号 / 回退最新一期） */
.pnote {
  margin: 10px 0 0;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12px;
  background: #f2f4f8;
  color: var(--muted);
}
.pnote.ok { background: #e8f7ee; color: #1f9d55; }
.pnote.warn { background: #fdf3e7; color: #c47f17; }

/* ── 开奖历史 ─────────────────────────────────────────────────────────── */
.game-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 12px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.game-tabs::-webkit-scrollbar { display: none; }
.game-tab {
  flex: 0 0 auto;
  padding: 7px 14px;
  font-size: 14px;
  color: var(--sub);
  border-radius: 999px;
  white-space: nowrap;
}
.game-tab.on { color: var(--red); font-weight: 700; background: var(--red-l); }

.year-pick {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 16px 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text);
}
.year-pick select {
  border: none;
  background: #eef1f7;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.draw-list { margin: 0 14px; display: flex; flex-direction: column; gap: 10px; }
.draw-card {
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--shadow);
}
.draw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.draw-head b { font-size: 15px; }
.draw-head .dt { font-size: 12.5px; color: var(--muted); }
.draw-head .chev { color: #c9cfdb; font-size: 15px; }
.draw-balls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.draw-balls .sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }

.source-bar {
  margin: 12px 16px;
  padding: 9px 12px;
  background: #fff8e8;
  border: 1px solid #ffe9b8;
  border-radius: 10px;
  font-size: 12px;
  color: #9a7415;
  display: flex;
  align-items: center;
  gap: 8px;
}
.end-tip { text-align: center; color: var(--muted); font-size: 12.5px; padding: 18px 0 8px; }

/* ── 走势图 ───────────────────────────────────────────────────────────── */
.trend-card { margin: 14px; background: #fff; border-radius: 16px; padding: 16px; box-shadow: var(--shadow); }
.trend-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.trend-title b { font-size: 16px; }
.trend-title span { font-size: 12px; color: var(--muted); }
.trend-legend { display: flex; gap: 14px; font-size: 12px; color: var(--sub); margin: 8px 0 12px; flex-wrap: wrap; }
.trend-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 5px; }
.freq-grid { display: grid; grid-template-columns: repeat(11, 1fr); gap: 6px; }
.freq-cell { text-align: center; }
.freq-cell .bar {
  width: 100%;
  background: linear-gradient(180deg, #ff8a80, #f0454b);
  border-radius: 4px 4px 0 0;
  min-height: 3px;
}
.freq-cell .bar.b { background: linear-gradient(180deg, #7aa8ff, #2f7bff); }
.freq-cell .lb { font-size: 10px; color: var(--sub); display: block; margin-top: 4px; }
.freq-cell .ct { font-size: 9.5px; color: var(--muted); }

/* ── 我的 / 登录 ──────────────────────────────────────────────────────── */
.me-hero {
  background: var(--grad-blue);
  padding: 26px 18px 56px;
  color: #fff;
  border-radius: 0 0 22px 22px;
}
.me-user { display: flex; align-items: center; gap: 14px; }
.avatar {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 700;
  overflow: hidden;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, .6);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.me-user .mu-name { font-size: 20px; font-weight: 700; }
.me-user .mu-sub { font-size: 12.5px; opacity: .88; margin-top: 4px; }
.me-stats {
  display: flex;
  margin-top: 20px;
  background: rgba(255, 255, 255, .16);
  border-radius: 14px;
  padding: 12px 0;
}
.me-stats div { flex: 1; text-align: center; }
.me-stats b { display: block; font-size: 18px; }
.me-stats span { font-size: 11.5px; opacity: .85; }

.me-body { margin: -34px 14px 0; position: relative; }
.menu {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 14px;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.menu-item:last-child { border-bottom: none; }
.menu-item .mi-ico { font-size: 18px; width: 24px; text-align: center; }
.menu-item .mi-txt { flex: 1; }
.menu-item .mi-txt small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.menu-item .mi-val { font-size: 13px; color: var(--muted); }
.menu-item .chev { color: #c9cfdb; }
.menu-item.danger { color: var(--red); }

.badge {
  display: inline-block;
  font-size: 10.5px;
  padding: 1px 7px;
  border-radius: 999px;
  background: #e8f6ee;
  color: #16a34a;
  margin-left: 6px;
  vertical-align: middle;
}
.badge.warn { background: #fff4e5; color: #d97706; }
.badge.blue { background: var(--blue-l); color: var(--blue); }
.badge.info { background: #eef2ff; color: #4f46e5; }
.badge.dim { background: #f1f3f7; color: var(--muted); }

/* ── 意见反馈 / 愿望清单 ─────────────────────────────────────────────── */
.fb-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  margin-top: 12px;
}
.fb-title { font-size: 15px; font-weight: 700; margin-top: 4px; }
.fb-types { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.fb-type {
  border: 1px solid var(--line);
  background: #f7f8fb;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
}
.fb-type.on { background: var(--blue-l); border-color: var(--blue); color: var(--blue); font-weight: 600; }
.fb-card .inp { width: 100%; margin-bottom: 10px; box-sizing: border-box; }
.fb-tip { font-size: 11.5px; color: var(--muted); margin-top: 8px; text-align: center; }
.fb-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.fb-item-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.fb-tag { font-size: 12px; color: var(--muted); }
.fb-item .badge { margin-left: 0; }
.fb-content { font-size: 14px; line-height: 1.6; word-break: break-all; white-space: pre-wrap; }
.fb-reply {
  margin-top: 8px;
  padding: 8px 10px;
  background: #f0f7ff;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: #245a9e;
  word-break: break-all;
  white-space: pre-wrap;
}
.fb-reply b { color: var(--blue); }
.fb-time { font-size: 11px; color: var(--muted); margin-top: 6px; }

.auth-page {
  min-height: 100vh;
  background: linear-gradient(170deg, #4c8dff 0%, #2f6bff 40%, #f4f6f9 40.1%);
  padding: 0 20px 40px;
}
.auth-top { padding: 66px 4px 26px; color: #fff; }
.auth-top h1 { margin: 0; font-size: 28px; font-weight: 800; }
.auth-top p { margin: 8px 0 0; font-size: 13px; opacity: .9; }
.auth-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 14px 40px rgba(20, 50, 130, .16);
  padding: 20px 20px 24px;
}
.seg {
  display: flex;
  background: #f0f2f7;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 18px;
}
.seg button {
  flex: 1;
  height: 38px;
  border-radius: 9px;
  font-size: 14.5px;
  color: var(--sub);
  font-weight: 600;
}
.seg button.on { background: #fff; color: var(--blue); box-shadow: 0 2px 8px rgba(0, 0, 0, .07); }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; color: var(--sub); margin-bottom: 7px; }
.field .inp {
  width: 100%;
  height: 46px;
  border: 1.5px solid var(--line);
  background: #fafbfd;
  border-radius: 12px;
  padding: 0 14px;
  outline: none;
  transition: border-color .15s;
}
.field .inp:focus { border-color: var(--blue); background: #fff; }
.field .with-btn { display: flex; gap: 8px; }
.field .with-btn .inp { flex: 1; }
.field .with-btn .btn {
  height: 46px;
  padding: 0 14px;
  font-size: 13px;
  background: var(--blue-l);
  color: var(--blue);
  flex: 0 0 auto;
}
.field .hint { font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.field .err { font-size: 12px; color: var(--red); margin-top: 6px; }

.auth-divide {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  margin: 20px 0 16px;
}
.auth-divide::before, .auth-divide::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.oauth-row { display: flex; gap: 12px; }
.oauth-btn {
  flex: 1;
  height: 44px;
  border-radius: 12px;
  background: #f5f7fb;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 13.5px;
  color: var(--sub);
}
.oauth-btn:active { background: #eceff6; }
.oauth-btn .dot { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; }
.oauth-btn[disabled] { opacity: .45; }
.auth-foot { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 18px; }
.auth-foot a { color: var(--blue); }
.form-note {
  background: #fff8e8;
  border: 1px solid #ffe9b8;
  color: #9a7415;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 12px;
  margin-bottom: 14px;
}

/* ── 查彩记录 ─────────────────────────────────────────────────────────── */
.ticket-row {
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  margin: 0 14px 10px;
  box-shadow: var(--shadow);
}
.ticket-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 13px; color: var(--sub); }
.ticket-top b { color: var(--text); font-size: 14.5px; }
.ticket-top .win-tag {
  margin-left: auto;
  font-size: 11.5px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--red-l);
  color: var(--red);
  font-weight: 600;
}
.ticket-top .win-tag.no { background: #f0f2f7; color: var(--muted); }
/* 重复记录：置灰弱化，金额与中奖不计入统计 */
.ticket-row.dup { opacity: .62; }
.ticket-row.dup .ticket-top b { color: var(--muted); }
.dup-tag {
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #fff4e0;
  color: #c77d0b;
  font-weight: 600;
}
.tk-acts { display: flex; gap: 8px; margin-top: 10px; }
.tk-act {
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--sub);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
}
.tk-act.on { border-color: #f0b95e; color: #b06f00; background: #fff8ec; }
.tk-dup-note {
  margin: -6px 14px 12px;
  font-size: 11.5px;
  color: #b06f00;
  background: #fff8ec;
  border-radius: 10px;
  padding: 7px 11px;
}
.stat-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 14px 14px; }
.stat-box { flex: 1 1 calc(33.3% - 10px); min-width: 92px; background: #fff; border-radius: 14px; padding: 14px 8px; text-align: center; box-shadow: var(--shadow); }
.stat-box b { display: block; font-size: 20px; color: var(--red); }
.stat-box b.dim { color: var(--text); }
.stat-box span { font-size: 11.5px; color: var(--muted); }
/* 查彩记录分页 */
.tk-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 14px 24px; }
.tk-pg { border: 1px solid var(--line, #e5e6eb); background: #fff; border-radius: 10px; padding: 8px 14px; font-size: 13.5px; color: var(--text); }
.tk-pg:disabled { opacity: .4; }
.tk-pg:not(:disabled):active { background: #f5f6f8; }
.tk-pg-info { font-size: 12.5px; color: var(--muted); }

/* ── 弹层 ─────────────────────────────────────────────────────────────── */
.mask {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 26, .5);
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fade .2s ease;
}
.sheet {
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 18px 18px calc(24px + env(safe-area-inset-bottom, 0px));
  max-height: 82vh;
  overflow-y: auto;
  animation: slideUp .26s cubic-bezier(.2, .8, .3, 1);
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: none; } }
.sheet h3 { margin: 0 0 4px; font-size: 17px; }
.sheet .sh-sub { font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }
.sheet-close { position: absolute; right: 16px; top: 14px; font-size: 20px; color: #c9cfdb; }

.rule-block { margin-bottom: 16px; }
.rule-block b { display: block; font-size: 14.5px; margin-bottom: 6px; }
.rule-block p { margin: 0 0 6px; font-size: 13px; color: var(--sub); line-height: 1.7; }
.rule-tier { display: flex; justify-content: space-between; font-size: 13px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.rule-tier span:last-child { color: var(--red); font-weight: 600; }
.rule-tier span:last-child.float { color: var(--muted); font-weight: 400; font-size: 12px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  background: rgba(20, 24, 36, .92);
  color: #fff;
  padding: 11px 18px;
  border-radius: 12px;
  font-size: 13.5px;
  z-index: 90;
  max-width: 86%;
  text-align: center;
  animation: fade .2s ease;
  pointer-events: none;
}

.empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}
.empty .e-ico { font-size: 46px; opacity: .45; }
.empty p { margin-top: 10px; font-size: 13.5px; }

.skel { background: linear-gradient(90deg, #eef1f6 25%, #f7f9fc 50%, #eef1f6 75%); background-size: 400% 100%; animation: sk 1.3s infinite; border-radius: 8px; }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* 手号选择器 */
.picker { margin-bottom: 14px; }
.picker-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.picker-hd b { font-size: 13.5px; }
.picker-hd span { font-size: 11.5px; color: var(--muted); }
.picker-grid { display: grid; grid-template-columns: repeat(11, 1fr); gap: 6px; }
.num {
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: #f0f2f7;
  color: var(--sub);
}
.num.on { background: var(--red); color: #fff; font-weight: 700; }
.num.b.on { background: #2f7bff; }
.num.d.on { background: #f5a623; }

/* ── 识别结果确认页（#/review）：所有识别结果摊开展示，缺失留空可就地编辑 ── */
.rv-wrap { padding: 12px 16px 28px; }
.rv-tip { border-radius: 12px; padding: 12px 14px; font-size: 13.5px; margin-bottom: 12px; }
.rv-tip b { display: block; font-size: 14px; margin-bottom: 4px; }
.rv-tip.ok { background: #eefaf3; border: 1px solid #c8ecdb; color: #0f7a45; }
.rv-tip.warn { background: #fff8e8; border: 1px solid #ffe9b8; color: #8a6412; }
.rv-tip-sub { font-size: 12.5px; opacity: .85; margin-top: 3px; }

.rv-period { margin: 12px 0 4px; padding: 12px 14px; }
.rv-row { display: flex; align-items: center; gap: 10px; }
.rv-label { font-size: 13.5px; color: var(--sub); flex: 0 0 auto; }
.rv-row select {
  flex: 1; height: 38px; border: 1.5px solid var(--line); background: #fafbfd;
  border-radius: 10px; padding: 0 10px; font-size: 13.5px; font-family: inherit; color: var(--text);
}
.rv-hint { font-size: 12px; color: var(--muted); margin-top: 8px; }

.rv-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.rv-bet { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.rv-bet.bad { border-color: #ffd4d0; background: #fffafa; }
.rv-bet-hd { display: flex; align-items: center; gap: 8px; }
.rv-idx { font-size: 13px; font-weight: 700; color: var(--text); }
.rv-state { font-size: 12px; flex: 1; }
.rv-state.ok { color: #0f9d58; }
.rv-state.warn { color: #d97706; }
.rv-state.empty { color: var(--muted); }
.rv-mini {
  border: none; background: #f0f2f7; color: var(--text); border-radius: 8px;
  font-size: 12px; padding: 5px 10px; font-family: inherit; cursor: pointer;
}
.rv-mini.danger { background: #fff0ef; color: var(--red); }
.rv-mini.fav { background: #fff7e0; color: #8a6412; }
.rv-balls { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 9px; }
.rv-balls .ball { width: 28px; height: 28px; font-size: 12.5px; }
.rv-plus { color: var(--muted); font-size: 13px; padding: 0 2px; }
.rv-err { margin-top: 8px; font-size: 12.5px; color: #c62f38; background: #fff0ef; border-radius: 8px; padding: 7px 10px; }
.rv-editor { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.rv-editor .picker { margin-bottom: 6px; }
.rv-editor .picker-grid { grid-template-columns: repeat(7, 1fr); }
.rv-actions { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.rv-foot { margin-top: 12px; text-align: center; font-size: 12px; color: var(--muted); }

/* ── 常用号码（快捷输入） ─────────────────────────────────────────────── */
.fav-strip {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 11px 14px;
  margin-top: 12px;
}
.fav-hd { display: flex; align-items: center; justify-content: space-between; }
.fav-hd b { font-size: 13.5px; font-weight: 700; }
.fav-hd span { font-size: 12px; color: var(--muted); }
.fav-list {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-top: 9px;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
}
.fav-list::-webkit-scrollbar { display: none; }
.fav-chip {
  position: relative;
  flex: 0 0 auto;
  border: 1.5px solid #dfe6f5;
  background: #f7f9ff;
  border-radius: 10px;
  padding: 7px 24px 7px 10px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.fav-chip:active { background: var(--blue-l); border-color: var(--blue); }
.fav-chip .fc-g { display: block; font-size: 10.5px; color: var(--blue); font-weight: 600; }
.fav-chip .fc-n {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.fav-chip .fc-x {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-style: normal;
  font-size: 15px;
  line-height: 1;
  color: #aab2c4;
  padding: 4px;
}
.fav-chip .fc-x:active { color: var(--red); }
.fav-hint { font-size: 12.5px; color: var(--muted); margin-top: 7px; line-height: 1.6; }
.fav-hint a { color: var(--blue); }

/* 手动输入页（拍照页底部的入口链接） */
.scan-manual { color: #cfd4e0; font-weight: 500; margin-left: 16px; text-decoration: none; }
.rv-period input[type="number"] {
  width: 110px; height: 38px; border: 1.5px solid var(--line); background: #fafbfd;
  border-radius: 10px; padding: 0 10px; font-size: 13.5px; font-family: inherit; color: var(--text);
}

/* ── 手动输入：文本框方式（#/manual） + 确认页粘贴行 ──────────────────── */
.mg-text {
  display: block; width: 100%; min-height: 110px; padding: 10px 12px;
  border: 1.5px solid var(--line); background: #fafbfd; border-radius: 12px;
  font-size: 15px; line-height: 1.7; resize: vertical; color: var(--text);
}
.mg-text:focus { outline: none; border-color: var(--blue); background: #fff; }
.mg-text::placeholder { color: #b3bacb; }
.mg-errs { margin-top: 10px; }
.mg-err {
  font-size: 12.5px; color: #c62f38; background: #fff0ef; border: 1px solid #ffd4d0;
  border-radius: 8px; padding: 7px 10px; margin-top: 6px; line-height: 1.55;
}
.paste-row { display: flex; gap: 8px; margin-bottom: 10px; }
.paste-row input {
  flex: 1; min-width: 0; height: 40px; padding: 0 12px;
  border: 1.5px solid var(--line); background: #fafbfd; border-radius: 10px;
  font-size: 14px; color: var(--text);
}
.paste-row input:focus { outline: none; border-color: var(--blue); background: #fff; }
.paste-row .btn { height: 40px; padding: 0 18px; flex: 0 0 auto; }

/* 未保存草稿提示条（#/manual 顶部）：告诉用户「保存本注」的票还在，可一键回去继续 */
.mg-resume {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff8e8; border: 1.5px solid #ffe0a3; border-radius: 12px;
  padding: 11px 12px; margin-bottom: 12px;
}
.mg-resume-tx { min-width: 0; }
.mg-resume-tx b { display: block; font-size: 13.5px; color: #a86a00; margin-bottom: 2px; }
.mg-resume-tx span { display: block; font-size: 12px; color: #a8834a; line-height: 1.5; }
.mg-resume-btns { display: flex; gap: 6px; flex: 0 0 auto; }
.mg-resume-btns .btn { height: 34px; padding: 0 12px; font-size: 13px; }