:root{--bg:#F3F5FB;--surface:#FFFFFF;--ink:#0A0F2E;--muted:#59618A;--line:#E1E5F2;--soft:#ECF0FA}
.dark{--bg:#050A24;--surface:#0A1236;--ink:#EDF0FF;--muted:#9AA3CC;--line:#18235A;--soft:#0E1744}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:Figtree,system-ui,sans-serif;line-height:1.55}
.font-display{letter-spacing:.005em}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border-radius:10px;padding:.55rem 1rem;font-weight:600;font-size:.875rem;transition:background .15s,transform .05s,border-color .15s;cursor:pointer;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:#0012A0;color:#fff}.btn-primary:hover{background:#062DF5}
.btn-gold{background:#F2B31E;color:#1a1300}.btn-gold:hover{background:#ffc43d}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}.btn-ghost:hover{background:var(--soft)}
.btn-danger{background:transparent;color:#C90502;border:1px solid rgba(201,5,2,.35)}.btn-danger:hover{background:rgba(201,5,2,.08)}
.btn-sm{padding:.35rem .65rem;font-size:.8rem;border-radius:8px}
.input{width:100%;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:.55rem .75rem;font-size:.9rem;outline:none;transition:border-color .15s,box-shadow .15s}
.input:focus{border-color:#062DF5;box-shadow:0 0 0 3px rgba(6,45,245,.18)}
select.input{padding-right:1.8rem}
.label{display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:.3rem}
:focus-visible{outline:2px solid #F2B31E;outline-offset:2px}
.chip{display:inline-flex;align-items:center;gap:.3rem;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:.3rem .8rem;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .15s}
.chip:hover{border-color:#062DF5}
.chip.on,.chip[aria-pressed=true]{background:#0012A0;border-color:#0012A0;color:#fff}
.tabs{display:flex;gap:.25rem;overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}
.tab{padding:.7rem 1rem;font-weight:700;font-size:.9rem;color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap;cursor:pointer}
.tab:hover{color:var(--ink)}.tab.on{color:var(--ink);border-color:#F2B31E}
.tbl{width:100%;font-size:.88rem}.tbl th{text-align:left;font-size:.72rem;font-weight:700;color:var(--muted);padding:.65rem .9rem;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:.7rem .9rem;border-bottom:1px solid var(--line);vertical-align:middle}.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--soft)}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
.skel{background:linear-gradient(90deg,var(--soft),var(--line),var(--soft));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:10px}
@keyframes sk{to{background-position:-200% 0}}
.loading{opacity:.45;pointer-events:none;transition:opacity .15s}
.prose-n p{margin:0 0 1rem}.prose-n{font-size:1.02rem;line-height:1.75}
/* hero court-line texture */
.court{background-image:linear-gradient(115deg,transparent 0 62%,rgba(242,179,30,.95) 62% 63.2%,transparent 63.2%),radial-gradient(circle at 78% 120%,rgba(6,45,245,.55),transparent 55%),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 64px)}
.num-outline{-webkit-text-stroke:2px rgba(255,255,255,.35);color:transparent}
.ticker{scroll-snap-type:x proximity;scrollbar-width:none}.ticker::-webkit-scrollbar{display:none}.ticker>*{scroll-snap-align:start}
.form-pill{display:inline-flex;width:1.3rem;height:1.3rem;border-radius:5px;font-size:.68rem;font-weight:800;align-items:center;justify-content:center;color:#fff}
.form-W{background:#084813}.form-L{background:#C90502}.form-D{background:#6b7280}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* modal */
dialog.modal{border:0;border-radius:18px;padding:0;background:var(--surface);color:var(--ink);width:min(560px,94vw);max-height:92vh;box-shadow:0 30px 80px rgba(0,0,0,.45)}
dialog.modal::backdrop{background:rgba(3,7,30,.65);backdrop-filter:blur(3px)}
/* toast */
#toasts{position:fixed;z-index:80;right:1rem;bottom:5.5rem;display:flex;flex-direction:column;gap:.5rem}
@media(min-width:1024px){#toasts{bottom:1.5rem}}
.toast{background:#0A0F2E;color:#fff;border-left:4px solid #F2B31E;padding:.7rem 1rem;border-radius:10px;font-size:.88rem;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.toast.err{border-color:#C90502}