:root{--red:#f04444;--red-dark:#d93035;--ink:#202221;--muted:#8b8f8c;--line:#ecece8;--paper:#fff;--bg:#f5f5f2;--green:#1c8a62}*{box-sizing:border-box}html{background:#d9d9d5}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg)}button{font:inherit;color:inherit;border:0;background:none}.app-shell{width:100%;max-width:500px;min-height:100vh;margin:auto;background:var(--bg);position:relative;padding-bottom:178px;box-shadow:0 0 40px #7773}.topbar{height:58px;padding:8px 14px;display:flex;align-items:center;justify-content:space-between;background:#fff;position:sticky;top:0;z-index:10}.icon-button{font-size:34px;line-height:1;width:42px;height:42px}.icon-button.more{font-size:16px;letter-spacing:2px}.title-switch{font-size:17px;font-weight:700}.title-switch span{font-size:13px;margin-left:5px}.hero-card{margin:12px 14px 4px;height:136px;border-radius:18px;padding:20px 22px;color:#fff;overflow:hidden;position:relative;display:flex;justify-content:space-between;background:linear-gradient(120deg,#e53d3d,#ff6c52);box-shadow:0 10px 22px #ee4d4330}.hero-card:before,.hero-card:after{content:"";position:absolute;border:1px solid #ffffff30;border-radius:50%;width:160px;height:160px;right:-55px;top:-75px}.hero-card:after{width:110px;height:110px;right:35px;top:62px}.eyebrow{font-size:8px;letter-spacing:2px;opacity:.68}.hero-card h1{font-size:23px;line-height:1.25;margin:7px 0 5px}.hero-card h1 em{font-style:normal;color:#ffe388}.hero-card p{font-size:10px;margin:0;opacity:.7}.ball-art{width:96px;height:96px;border:13px solid #fff;border-radius:50%;align-self:center;display:grid;place-items:center;transform:rotate(-14deg);box-shadow:inset 0 0 0 3px #d84b45,0 9px 18px #9c22294d;z-index:1;background:radial-gradient(circle at 33% 28%,#fff,#f4ddd8 73%)}.ball-art span{font-size:34px;color:#242525}.play-tabs{display:flex;background:#fff;padding:5px 11px 0;overflow:auto;position:sticky;top:58px;z-index:8}.play-tabs button{flex:1;white-space:nowrap;padding:13px 10px;font-size:14px;position:relative;color:#6e716e}.play-tabs button.active{font-weight:700;color:var(--ink)}.play-tabs button.active:after{content:"";height:3px;width:22px;border-radius:9px;background:var(--red);position:absolute;bottom:1px;left:50%;transform:translateX(-50%)}.filter-row{height:47px;padding:0 15px;display:flex;align-items:center;gap:14px;color:#777b78;font-size:12px}.filter-row span:nth-child(2){margin-left:auto}.filter-row button{font-size:12px}.match-list{padding:0 12px}.date-group{margin-bottom:10px}.date-head{display:flex;align-items:center;gap:7px;height:36px;font-size:12px;color:#686b69;font-weight:600}.date-head i{width:5px;height:14px;background:var(--red);border-radius:4px}.match-card{background:#fff;border-radius:13px;margin-bottom:9px;padding:14px 12px 12px;box-shadow:0 3px 14px #30383008}.match-meta{display:flex;align-items:center;margin-bottom:14px;font-size:10px;color:#9a9d9a}.match-meta .league{color:var(--green);background:#eaf7f1;padding:3px 5px;border-radius:4px;margin-right:7px}.match-meta .end{margin-left:auto;color:#b2b4b2}.teams{display:grid;grid-template-columns:1fr 31px 1fr;align-items:center;text-align:center;margin-bottom:14px}.team strong{display:block;font-size:15px}.team small{font-size:10px;color:#a1a4a1}.vs{font-size:11px;color:#a8aaa8}.odds{display:grid;grid-template-columns:34px repeat(3,1fr);border:1px solid #e6e6e2;border-radius:9px;overflow:hidden}.handicap{display:grid;place-items:center;font-size:10px;color:#9a9d9a;background:#fafaf8}.odd{padding:9px 3px;text-align:center;border-left:1px solid #e9e9e5;transition:.18s}.odd span{display:block;font-size:12px}.odd b{display:block;font-size:11px;margin-top:3px}.odd.selected{background:var(--red);color:#fff;border-color:var(--red)}.match-more{display:block;margin:10px auto 0;color:#999;font-size:11px}.date-group.collapsed .match-card{display:none}.bet-slip{position:fixed;z-index:20;bottom:63px;left:50%;transform:translateX(-50%);width:100%;max-width:500px;background:#fff;border-radius:17px 17px 0 0;box-shadow:0 -8px 30px #2222;padding:7px 14px 10px}.slip-handle{width:34px;height:3px;background:#d8d8d4;border-radius:4px;margin:0 auto 8px}.slip-top,.checkout{display:flex;align-items:center;justify-content:space-between}.slip-top .label{font-size:10px;background:#fff0ee;color:var(--red);padding:3px 6px;border-radius:3px}.slip-top strong{font-size:12px;margin-left:7px}.clear-btn{font-size:11px;color:#999}.slip-controls{display:flex;gap:8px;margin:9px 0}.slip-controls>button{background:#f5f5f2;padding:8px 10px;border-radius:7px;font-size:11px}.slip-controls>button b{color:var(--red);margin-left:5px}.stepper{margin-left:auto;display:flex;align-items:center;background:#f5f5f2;border-radius:7px;overflow:hidden;font-size:11px}.stepper button{width:30px;padding:7px 0}.stepper strong{min-width:20px;text-align:center}.stepper span{padding-right:4px;color:#777}.checkout span{font-size:12px}.checkout small{display:block;color:#999;margin-top:3px;font-size:9px}.checkout em{font-style:normal;color:var(--red)}.checkout>button{color:#fff;background:var(--red);padding:12px 24px;border-radius:22px;font-weight:700;font-size:14px}.checkout>button:disabled{background:#e2e2de;color:#a6a8a5}.bottom-nav{position:fixed;z-index:21;bottom:0;left:50%;transform:translateX(-50%);height:64px;padding-bottom:max(4px,env(safe-area-inset-bottom));width:100%;max-width:500px;background:#fff;display:flex;border-top:1px solid #eee}.bottom-nav button{flex:1;font-size:10px;color:#979a97}.bottom-nav span{display:block;font-size:21px;height:27px}.bottom-nav .active{color:var(--red);font-weight:700}.toast{position:fixed;left:50%;top:45%;transform:translate(-50%,-50%) scale(.9);background:#222e;color:#fff;border-radius:9px;padding:12px 18px;font-size:13px;z-index:40;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,-50%) scale(1)}.modal{position:fixed;inset:0;z-index:50;display:none}.modal.open{display:block}.modal-backdrop{position:absolute;inset:0;background:#0006}.modal-card{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:500px;background:#fff;border-radius:20px 20px 0 0;padding:20px}.modal-title{display:flex;justify-content:space-between;align-items:center}.modal-title h2{font-size:18px;margin:0}.modal-title button{font-size:25px;color:#999}.modal-card>p{font-size:12px;color:#999}.league-options{display:flex;flex-wrap:wrap;gap:10px}.league-options label{width:calc(33.33% - 7px);background:#f5f5f2;padding:10px 5px;text-align:center;border-radius:7px;font-size:12px}.league-options label:has(input:checked){background:#fff0ef;color:var(--red);outline:1px solid var(--red)}.league-options input{display:none}.modal-actions{display:grid;grid-template-columns:1fr 2fr;gap:10px;margin-top:24px}.modal-actions button{padding:12px;border-radius:22px;background:#f2f2ef}.modal-actions button:last-child{background:var(--red);color:#fff}.empty{text-align:center;padding:55px;color:#999}@media(min-width:501px){body{padding:20px 0}.app-shell{min-height:calc(100vh - 40px);border-radius:24px;overflow:hidden}.topbar{top:20px}.play-tabs{top:78px}.bottom-nav{bottom:20px;border-radius:0 0 24px 24px}.bet-slip{bottom:84px}}
