:root {
  --blue: #07509f;
  --orange: #ffa52b;
  --red: #ef554f;
  --ink: #181818;
  --muted: #757575;
  --line: #ececec;
  --nav-height: 76px;
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: #e8ebef;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #e8ebef; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.phone-shell {
  position: relative;
  width: 100%;
  max-width: 430px;
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 30px rgba(28, 41, 56, .12);
}

.content-page {
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom));
}
.page-title { height: 58px; display: grid; place-items: center; background: #fff; }
.page-title h1 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: .03em; }

/* 开奖页 */
.draw-body { background: #f1c73c; }
.draw-page {
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 31px 18px calc(var(--nav-height) + 20px);
  background: #ffdb62 url("/assets/draw-background.jpg") center top / cover no-repeat;
}
.draw-card {
  width: 82%;
  min-height: 120px;
  padding: 18px 16px;
  border-radius: 15px;
  text-align: center;
  background: rgba(255,255,255,.58);
  backdrop-filter: blur(4px);
}
.draw-card h1 { margin: 0; font-size: 20px; font-weight: 500; }
.draw-card p { margin: 39px 0 0; font-size: 18px; white-space: nowrap; }
.draw-card strong { margin-left: 3px; font-size: 20px; letter-spacing: .08em; }
.draw-balls { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); justify-items: center; gap: clamp(5px, 2vw, 10px); width: 100%; margin-top: 48px; }
.draw-ball-slot { width: 100%; max-width: 66px; aspect-ratio: 1; overflow: hidden; display: block; }
.ball-reel { display: flex; flex-direction: column; width: 100%; animation: ball-reel-cycle .72s both var(--enter-delay); }
.lottery-ball {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  max-width: none;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent url("/assets/ball-green.png") center / contain no-repeat;
  filter: drop-shadow(0 4px 3px rgba(132,96,0,.16));
}
.lottery-ball::before { display: none; }
.lottery-ball span { position: relative; z-index: 1; margin-top: 2px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(23px, 7.2vw, 29px); font-weight: 700; letter-spacing: .03em; transform: rotate(-2deg); }
.lottery-ball.ball-color-green { background-image: url("/assets/ball-green.png"); }
.lottery-ball.ball-color-purple { background-image: url("/assets/ball-purple.png"); }
.lottery-ball.ball-color-red { background-image: url("/assets/ball-red.png"); }
.lottery-ball.ball-color-blue { background-image: url("/assets/ball-blue.png"); }
.lottery-ball.ball-color-gold { background-image: url("/assets/ball-gold.png"); }
.lottery-ball.ball-final span { opacity: 0; animation: final-number-write .24s cubic-bezier(.16,.86,.32,1.2) both calc(var(--enter-delay) + .66s); }
@keyframes ball-reel-cycle {
  0% { opacity: 0; transform: translateY(-90.90909%); animation-timing-function: linear; }
  6% { opacity: 1; transform: translateY(-90.90909%); animation-timing-function: linear; }
  78% { transform: translateY(-9.09091%); animation-timing-function: cubic-bezier(.18,.82,.22,1.15); }
  100% { transform: translateY(0); }
}
@keyframes final-number-write {
  0% { opacity: 0; transform: rotate(-12deg) scale(.35); }
  72% { opacity: 1; transform: rotate(3deg) scale(1.1); }
  100% { opacity: 1; transform: rotate(-2deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .ball-reel { animation: none; transform: translateY(0); } .lottery-ball.ball-final span { animation: none; opacity: 1; } }
.draw-status { margin: 18px 0 0; color: rgba(86,61,0,.72); font-size: 12px; }
.brand-title { margin: clamp(88px, 20vw, 106px) 0 0; color: #d71b31; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; font-size: clamp(43px, 12.2vw, 53px); font-weight: 900; line-height: 1; letter-spacing: 0; text-align: center; text-shadow: 0 1px 0 rgba(152, 0, 21, .14); transform: scaleX(1.08); transform-origin: center; white-space: nowrap; pointer-events: none; }
.decor-ball { display: none; }
.decor-ball-one { width: 72px; height: 72px; left: -5px; bottom: 170px; background: repeating-linear-gradient(55deg,#e54c1e 0 7px,#fff 7px 15px); box-shadow: 0 8px 12px rgba(145,89,0,.25); transform: rotate(20deg); }
.decor-ball-two { width: 33px; height: 33px; left: -9px; bottom: 245px; background: repeating-linear-gradient(85deg,#ff9953 0 4px,#ffe198 4px 9px); opacity: .8; }
.celebration { display: none; }
.celebration-left { left: -24px; }
.celebration-right { right: -29px; transform: rotate(-16deg); }

/* 底部导航 */
.bottom-nav {
  position: fixed;
  z-index: 20;
  left: 50%;
  right: auto;
  bottom: 0;
  width: 100%;
  max-width: 430px;
  height: calc(var(--nav-height) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  padding-bottom: env(safe-area-inset-bottom);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(255,255,255,.96);
  border-top: 1px solid rgba(0,0,0,.04);
  box-shadow: 0 -5px 18px rgba(19,36,58,.05);
}
.nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #222; font-size: 13px; text-decoration: none; }
.nav-item img { width: 29px; height: 29px; object-fit: contain; }
.nav-item.active { color: var(--red); }
.nav-item.active img { filter: brightness(0) saturate(100%) invert(40%) sepia(70%) saturate(1830%) hue-rotate(330deg) brightness(108%) contrast(91%); }

/* 历史记录 */
.date-tabs { display: grid; grid-template-columns: 1.35fr .94fr 1.03fr; gap: 15px; padding: 11px 0 10px; background: #f0f0f0; }
.date-tab { height: 39px; border: 0; border-radius: 7px; display: grid; place-items: center; color: #1b1b1b; background: #dedede; font-size: 15px; cursor: pointer; }
.date-tab.active { color: #fff; background: var(--orange); font-weight: 600; }
.date-picker { position: relative; }
.date-picker input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.history-head, .history-row { display: grid; grid-template-columns: 1fr 2.1fr .8fr; align-items: center; text-align: center; }
.history-table { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.history-table::-webkit-scrollbar { display: none; }
.history-head { position: sticky; z-index: 2; top: 0; height: 43px; color: #fff; background: var(--red); font-size: 15px; font-weight: 600; }
.history-row { min-height: 35px; padding: 4px 0; font-size: 13px; }
.history-row:nth-child(even) { background: #eee; }
.history-numbers { display: flex; justify-content: center; gap: 7px; }
.number-dot { width: 25px; height: 25px; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #fff; background: var(--blue); font-family: Georgia, serif; font-size: 14px; font-weight: 700; }
.history-time { color: #707070; }
.empty-state { padding: 60px 15px; text-align: center; color: #888; }

/* 走势图 */
.trend-page { height: 100vh; height: 100dvh; }
.trend-scroll { flex: 1; min-height: 0; width: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; background: #f7f7f7; }
.trend-scroll::-webkit-scrollbar { display: none; }
.trend-canvas { --trend-columns: 5% repeat(5, 5.5%) repeat(11, 6.13636%); width: 100%; min-width: 0; }
.trend-grid { width: 100%; font-size: clamp(9px, 2.8vw, 12px); }
.trend-row { display: grid; grid-template-columns: var(--trend-columns); min-height: clamp(22px, 7vw, 31px); }
.trend-row > span { min-width: 0; overflow: hidden; display: grid; place-items: center; border-right: 1px solid #fff; border-bottom: 1px solid #fff; }
.trend-issue { color: #334355; background: #f4f4f4; font-weight: 700; font-variant-numeric: tabular-nums; }
.trend-drawn { color: #263746; background: #d0d4d8; font-weight: 800; font-variant-numeric: tabular-nums; }
.trend-cell { color: #b6b6b6; background: #f7f7f7; }
.trend-cell.hit { color: #fff; }
.trend-dot { width: clamp(16px, 5.9vw, 27px); height: clamp(16px, 5.9vw, 27px); overflow: visible; }
.trend-dot circle { fill: #07509f; }
.trend-dot text { fill: #fff; font-family: Arial, "Microsoft YaHei", sans-serif; font-size: 16px; font-weight: 700; letter-spacing: -.5px; }
.trend-summary { position: sticky; z-index: 4; bottom: 0; display: grid; grid-template-columns: var(--trend-columns); min-height: 56px; padding: 0; background: #f2f2f2; font-size: clamp(9px, 2.8vw, 12px); box-shadow: 0 -2px 8px rgba(30, 43, 60, .06); }
.trend-summary > strong { grid-column: 1 / span 6; min-width: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 2px; white-space: nowrap; }
.red-text { color: #e95546; letter-spacing: .08em; }
.number-scale { display: contents; }
.scale-number { width: clamp(15px, 5.1vw, 24px); height: clamp(15px, 5.1vw, 24px); align-self: center; justify-self: center; display: grid; place-items: center; border-radius: 50%; background: #d8d8d8; font-size: clamp(8px, 2.5vw, 11px); }
.scale-number.active { background: var(--orange); }

.toast { position: fixed; z-index: 100; left: 50%; bottom: 100px; transform: translateX(-50%) translateY(10px); padding: 9px 15px; border-radius: 20px; color: #fff; background: rgba(20,25,31,.88); font-size: 13px; opacity: 0; pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 360px) {
  :root { --nav-height: 68px; }
  .draw-page { padding-inline: 10px; }
  .draw-card { width: 88%; }
  .draw-balls { gap: 4px; }
  .date-tabs { gap: 8px; }
  .history-numbers { gap: 4px; }
  .number-dot { width: 23px; height: 23px; font-size: 12px; }
  .nav-item { font-size: 12px; }
}