* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif; }
body { background: #eef1f8; color: #333; }
.prediction-history-page { width: 7.2rem; max-width: 100%; margin: 0 auto; padding: 0 .02rem; background: #fff; }
.prediction-history-header { position: relative; display: flex; align-items: center; height: .51rem; padding: 0 .11rem; color: #fff; background: linear-gradient(180deg, #0055fa 0%, #00319c 100%); }
.history-back { position: relative; z-index: 2; display: flex; align-items: center; align-self: stretch; min-width: .40rem; padding: 0 .06rem; margin-left: -.06rem; touch-action: manipulation; color: #fff; font-size: .13rem; text-decoration: none; }
.prediction-history-header h1 { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; font-size: .19rem; font-weight: 700; pointer-events: none; }
.month-filter { position: relative; display: flex; align-items: center; gap: .055rem; width: 1.35rem; height: .34rem; margin-left: auto; margin-right: .10rem; padding: 0 .07rem; border: 1px solid #cddcff; border-radius: .01rem; background: #fff; color: #4a4a4a; font-size: .15rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
.month-calendar { width: .20rem; height: .22rem; flex: none; fill: none; stroke: #4a4a4a; stroke-width: 2; stroke-linecap: round; }
.month-chevron { width: .14rem; height: .09rem; margin-left: auto; flex: none; fill: none; stroke: #4a4a4a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.month-filter input { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; opacity: 0; cursor: pointer; font-size: .15rem; }
.month-filter input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.month-filter:focus-within { outline: 2px solid #8ccfff; outline-offset: 2px; }
.sr-only, .history-note, .history-explanation, #historyTotal { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.history-message { padding: .30rem .10rem; color: #777; text-align: center; font-size: .14rem; }
.history-message[hidden], #historyRetry[hidden] { display: none; }
.history-table-wrap { border: 1px solid #00a7ff; border-top: 0; }
.prediction-history-table { width: 100%; table-layout: fixed; border-collapse: collapse; --history-ball: .26rem; }
.prediction-history-table .issue-col { width: 17.2%; }
.prediction-history-table .pool-col { width: 29.3%; }
.prediction-history-table .award-col { width: 31.8%; }
.prediction-history-table .hit-col { width: 21.7%; }
.prediction-history-table th { height: .53rem; padding: 0 .04rem; border-right: 1px solid #acd6f0; border-bottom: 1px solid #00a7ff; background: #eef8ff; color: #555; font-size: .16rem; font-weight: 700; white-space: nowrap; }
.prediction-history-table th:last-child { border-right: 0; }
.prediction-history-table td { height: .61rem; padding: .10rem .06rem; vertical-align: middle; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; text-align: center; font-size: .14rem; }
.prediction-history-table td:last-child { border-right: 0; }
.prediction-history-table tr:last-child td { border-bottom: 0; }
.history-issue { display: block; font-size: .16rem; line-height: 1.25; font-weight: 700; color: #555; }
.history-time { display: block; margin-top: .02rem; font-size: .12rem; line-height: 1.25; font-weight: 600; color: #888; }
.history-award { display: flex; align-items: flex-start; justify-content: center; gap: .015rem; }
.history-pool .prediction-ball, .history-award .prediction-ball { width: var(--history-ball); height: var(--history-ball); flex: none; border: 1px solid #fff; box-shadow: inset 0 -.02rem .025rem #0003, inset 0 .02rem .025rem #fffa, 0 1px 1px #7773; }
.history-pool .prediction-ball span, .history-award .prediction-ball span { width: 70%; height: 70%; font-size: .12rem; border: .015rem double #fff; font-weight: 700; }
.history-pool .prediction-ball.red, .history-award .prediction-ball.red { background: radial-gradient(circle at 35% 20%, #ffc1c6, #ff2342 55%, #e70020); }
.history-pool .prediction-ball.blue, .history-award .prediction-ball.blue { background: radial-gradient(circle at 35% 20%, #b8edff, #03b9ff 55%, #007bde); }
.history-pool .prediction-ball.green, .history-award .prediction-ball.green { background: radial-gradient(circle at 35% 20%, #c5ffb7, #24dd32 55%, #00a20e); }
.history-pool-grid { display: flex; flex-wrap: wrap; justify-content: center; width: calc(6 * var(--history-ball) + .20rem); max-width: 100%; margin: 0 auto; gap: .05rem .04rem; }
.history-award-cell { display: flex; flex-direction: column; align-items: center; gap: .045rem; min-width: 0; }
.history-zodiac { font-size: .13rem; font-weight: 700; color: #333; line-height: 1; }
.history-plus { margin: 0 .01rem; line-height: .26rem; font-size: .20rem; font-weight: 700; }
.history-hit { color: #ff001b; font-size: .16rem !important; font-weight: 700; white-space: nowrap; }
.history-hit b { display: inline-block; padding: 0 .045rem; font-size: .32rem; line-height: 1; vertical-align: -.035rem; }
.history-unavailable { color: #888; font-size: .12rem; white-space: pre-line; }
.history-pagination { display: flex; align-items: center; justify-content: center; gap: .055rem; min-height: .98rem; padding: .22rem .10rem .50rem; }
.history-pagination button { width: .26rem; height: .24rem; padding: 0; border: 1px solid #d8d8d8; border-radius: .025rem; background: #fff; color: #444; font: inherit; font-size: .15rem; line-height: 1; cursor: pointer; box-shadow: 0 1px 1px #0001; }
.history-pagination button:first-child { margin-right: .09rem; }
.history-pagination button:last-child { margin-left: .09rem; }
.history-pagination button[aria-current="page"] { color: #fff; background: linear-gradient(#005afa, #003bb9); border-color: #0054f2; }
.history-pagination button:disabled { color: #aaa; cursor: default; }
.history-pagination > span { font-size: .16rem; color: #555; }
.history-footer { text-align: center; }
.history-footer button { margin: 0 0 .20rem; padding: .06rem .12rem; font: inherit; font-size: .13rem; border: 1px solid #cbd5e3; border-radius: .03rem; background: #fff; cursor: pointer; }