*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%;font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif;color:#10213b;background:#fff}
button{font:inherit} .app{max-width:430px;min-height:100vh;margin:0 auto;background:#fff;padding-bottom:calc(68px + env(safe-area-inset-bottom))}
.view{display:none}.view.active{display:block}
.date-heading{height:58px;display:flex;justify-content:center;align-items:center;gap:5px;padding:7px 8px 5px;white-space:nowrap}
.date-heading strong{font-size:20px;font-weight:800;letter-spacing:-.5px}
.calendar-btn{border:1px solid #f44336;border-radius:3px;color:#f44336;background:white;font-size:15px;font-weight:700;line-height:1.1;padding:3px 4px;cursor:pointer}
.award-list{margin:0;padding:0 4px;list-style:none}
.draw-row{width:100%;height:84px;display:grid;grid-template-columns:48px minmax(0,1fr) 40px;gap:0;align-items:center;padding:7px 8px;background:#fff url('../images/back_index.png') no-repeat center / 100% 100%;margin:0 0 12px}
.draw-name{color:#181818;font-size:13px;font-weight:800;white-space:nowrap;text-align:left;padding-left:1px;align-self:center}
.draw-row.source-xam .draw-name{color:#ff0000!important}
.balls{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:center;min-width:0;gap:1px;transform:translateY(2px)}
.ball-slot{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;gap:2px}
.ball{width:34px;max-width:100%;height:35px;flex:none;background-position:center;background-repeat:no-repeat;background-size:100% 100%;display:flex;justify-content:center;align-items:center;padding-bottom:2px;color:#080808;font-size:15px;line-height:1;font-weight:800;text-shadow:0 0 1px white}
.ball.red{background-image:url('../images/red.png')}.ball.blue{background-image:url('../images/blue.png')}.ball.green{background-image:url('../images/green.png')}.ball.unknown{border:1px solid #ddd;border-radius:50%;background:#f3f3f3}
.zodiac{font-size:14px;color:#151515;line-height:15px;white-space:nowrap;font-weight:700}
.ball-slot.extra:before{content:'+';position:absolute;left:-7px;top:11px;font-size:14px;line-height:1;font-weight:800;color:#141414}
.history-link{border:0;background:transparent;padding:4px 0;color:#297efd;text-decoration:underline;font-size:14px;white-space:nowrap;cursor:pointer}
.load-error{text-align:center;color:#d53b32;font-size:12px;line-height:1.5;word-break:break-word;max-height:56px;overflow:hidden;display:block}
.fetch-status{font-size:11px;text-align:center;color:#aa4525;padding:3px 10px;margin:0 0 5px;line-height:1.5}
.update-line{display:flex;justify-content:center;align-items:center;gap:10px;color:#aaa;font-size:11px;margin:0 8px;padding:0 0 5px}
.update-line button{border:0;background:transparent;color:#4b93e8;font-size:11px;padding:5px;cursor:pointer}
.update-line button:disabled{opacity:.5}
.bottom-nav{max-width:430px;width:100%;position:fixed;bottom:0;left:50%;transform:translateX(-50%);height:calc(58px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:flex;border-top:1px solid #ededed;background:#fff;z-index:20}
.nav-item{width:20%;display:flex;flex-direction:column;gap:3px;justify-content:center;align-items:center;background:transparent;border:0;color:#1181fe;cursor:pointer;padding:2px 1px;font-size:12px;white-space:nowrap}
.nav-item svg{width:22px;height:22px;fill:#1683ff}
.nav-item.selected svg{fill:#fa453f}.nav-item.selected{color:#1777fc}
.subpage{padding:15px}.sub-head{font-size:20px;font-weight:800;text-align:center;padding:3px 0 15px}.subpage p{font-size:14px;line-height:1.8;color:#777}
.modal-backdrop[hidden]{display:none}.modal-backdrop{position:fixed;z-index:30;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;padding:20px}.dialog{background:#fff;border-radius:12px;width:min(100%,350px);padding:16px;box-shadow:0 10px 40px #0003}.dialog header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #eee;padding-bottom:12px}.dialog header strong{font-size:17px}.close-modal{font-size:26px;color:#888;background:none;border:0;line-height:1;cursor:pointer}.modal-line{font-size:13px;line-height:1.7;margin:10px 0;color:#444}.dialog-ok{display:block;margin:15px auto 0;min-width:100px;background:#2382fa;color:#fff;border:0;border-radius:6px;padding:9px;cursor:pointer}
@media(max-width:385px){.date-heading strong{font-size:19px}.draw-row{grid-template-columns:46px minmax(0,1fr) 36px;padding-left:7px;padding-right:7px}.ball{width:31px;height:33px;font-size:14px}.zodiac{font-size:13px}.history-link{font-size:13px}}
@media(max-width:350px){.date-heading strong{font-size:17px}.draw-row{grid-template-columns:40px minmax(0,1fr) 32px;padding-left:6px;padding-right:6px}.draw-name{font-size:12px}.ball{width:27px;height:29px;font-size:12px}.zodiac{font-size:12px}.history-link{font-size:12px}.ball-slot.extra:before{left:-5px}}
@media(min-width:600px){.app{border-left:1px solid #eee;border-right:1px solid #eee}}

/* 历史开奖记录：参考提供的绿色标题、淡黄筛选区、红蓝绿方块布局 */
.history-view{padding:0 5px 10px;background:#f8f8f8;min-height:calc(100vh - 70px)}
.history-heading{height:43px;border-radius:7px 7px 0 0;background:#148500;color:#fff;display:flex;align-items:center;justify-content:center;position:relative;margin:5px 0 0}
.history-heading strong{font-size:15px;font-weight:800}
.history-back{position:absolute;left:3px;top:0;width:44px;height:43px;border:0;background:transparent;color:#fff;font-size:40px;line-height:34px;cursor:pointer;font-weight:300}
.history-switch{display:flex;gap:5px;background:#fff;padding:7px 4px 6px;border-left:1px solid #e7e7e7;border-right:1px solid #e7e7e7;align-items:center}
.history-source{border:1px solid #d8d8d8;background:#f6f6f6;color:#222;border-radius:4px;padding:6px 8px;font-size:13px;font-weight:700;min-height:30px;cursor:pointer}
.history-source.selected{background:#178900;color:white;border-color:#178900}
.history-source:nth-child(3){color:#ed1818}
.history-source:nth-child(3).selected{color:#fff}
.history-filters{background:#fffed0;border:1px solid #e2dfbd;padding:7px 5px 6px}
.filter-group{display:flex;gap:7px;align-items:flex-start;margin:0 0 6px}
.filter-label{flex:0 0 28px;min-width:28px;font-size:13px;font-weight:700;color:#fb201e;line-height:29px}
.filter-options{display:flex;flex:1;flex-wrap:wrap;gap:5px 6px;min-width:0}
.filter-button{flex:0 0 auto;min-width:35px;height:28px;background:#fffff2;border:1px solid #d7d5a2;border-radius:3px;padding:2px 7px;color:#282828;line-height:20px;font-size:13px;cursor:pointer}
.filter-button.chosen{background:#168b00;border-color:#168b00;color:#fff;font-weight:800}
.filter-button.restore{background:#35b95b;border:1px solid #35b95b;color:#fff;font-size:13px;min-width:64px;font-weight:700}
.history-hint{margin:4px 0 0 35px;font-size:11px;color:#8b8261}
.history-toolbar{display:flex;align-items:center;justify-content:space-between;gap:5px;min-height:40px;padding:7px 6px;background:#eaeaea}
.history-periods{display:flex;align-items:center;gap:5px;min-width:0;flex-wrap:wrap}
.year-button{font-size:12px;padding:4px 9px;border:0;border-radius:5px;background:#fff;color:#393939;white-space:nowrap;cursor:pointer}
.year-button.selected{background:#00a800;color:#fff;font-weight:800}
.history-reload{font-size:12px;border:1px solid #55ae65;border-radius:5px;padding:4px 8px;background:#fff;color:#178900;cursor:pointer}
.history-reload:disabled{opacity:.5}
.history-status{background:#fff;border:1px solid #e5e5e5;color:#777;text-align:center;padding:15px 8px;font-size:13px;line-height:1.6}
.history-status[hidden]{display:none}
.history-status.history-error{color:#c52223}
.history-results{padding:0 3px;background:#fff}
.history-record{border-bottom:1px solid #ddd;padding:3px 0 5px;min-width:0}
.history-record-heading{font-size:12px;color:#5d6776;padding:0 2px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.history-period{font-size:13px;font-weight:800;color:#58616e}
.history-date{font-size:12px}
.history-numbers{display:grid;grid-template-columns:repeat(6,minmax(0,1fr)) minmax(0,1.32fr);gap:4px;align-items:start;min-width:0}
.history-ball-cell{min-width:0;display:flex;flex-direction:column;gap:1px;position:relative;align-items:stretch}
.history-number{height:22px;display:flex;justify-content:center;align-items:center;background:#888;color:#fff;font-weight:800;font-size:14px;letter-spacing:.2px}
.history-number.red{background:#ff1717}.history-number.blue{background:#111cf4}.history-number.green{background:#079600}
.history-number.unknown{background:#a4a4a4}
.history-zodiac{color:#29313a;background:#fff;min-height:20px;border:1px solid #ededed;text-align:center;line-height:18px;font-size:13px;font-weight:700}
.history-ball-cell.special{padding-left:16px}
.history-special-label{position:absolute;left:0;top:1px;height:22px;line-height:22px;font-size:12px;color:#626262}
.history-ball-cell.position-active .history-zodiac{border:1px solid #278e00;background:#f2ffec}
.history-empty{text-align:center;padding:25px 5px;color:#888;font-size:13px;margin:0}
@media (max-width:385px){.filter-options{gap:4px}.filter-button{min-width:31px;padding:2px 5px}.history-numbers{gap:3px}.history-ball-cell.special{padding-left:14px}}
@media (max-width:350px){.filter-group{gap:4px}.history-number{height:20px;font-size:12px}.history-special-label{font-size:11px}.history-ball-cell.special{padding-left:12px}.year-button{padding:4px 5px}}