:root{--bg:#bce1d1;--surface:#fff;--line:#e3e3df;--text:#1c1c1a;--muted:#6f6f68;--faint:#9b9b93;--live:#0f6e56;--live-bg:#e1f5ee;--free:#854f0b;--free-bg:#faeeda;--radius:12px;--fs-body:clamp(14px, 1.1vw + 11px, 17px);--fs-small:clamp(12px, .7vw + 10px, 14px);--fs-score:clamp(26px, 3vw + 16px, 44px);--fs-title:clamp(17px, 1.4vw + 13px, 22px);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font-family:Google Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans Thai,Helvetica Neue,sans-serif;font-size:var(--fs-body);-webkit-font-smoothing:antialiased;margin:0;line-height:1.5}button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--line);background:var(--surface);border-radius:8px;min-height:44px;padding:10px 14px}button:active{transform:scale(.985)}button:disabled{opacity:.4;cursor:default}button.primary{background:var(--live);border-color:var(--live);color:#fff}button.soft{color:var(--live);background:#d4ede3;border-color:#b4dccb;font-weight:500}button.danger{color:#a32d2d;border-color:#f0c9c9}button.ghost{color:var(--muted);background:0 0;border-color:#0000;min-height:36px;padding:6px 10px}input,select,textarea{font:inherit;font-size:max(16px, var(--fs-body));border:1px solid var(--line);background:var(--surface);border-radius:8px;width:100%;min-height:44px;padding:10px 12px}.app{max-width:1100px;margin:0 auto;padding:12px 12px 80px}.topbar{justify-content:space-between;align-items:center;gap:12px;padding:8px 4px 14px;display:flex}.topbar h1{font-size:var(--fs-title);margin:0;font-weight:600}.topbar .meta{color:var(--muted);font-size:var(--fs-small)}.topbar .part{color:var(--muted);font-weight:400}.topbar .brand{align-items:center;gap:10px;min-width:0;display:flex}.tabs{background:#eaeae6;border-radius:10px;gap:4px;margin-bottom:14px;padding:4px;display:flex}.tabs button{min-height:38px;color:var(--muted);background:0 0;border:none;border-radius:7px;flex:1}.tabs button[aria-pressed=true]{background:var(--surface);color:var(--text);font-weight:500}.code-input{letter-spacing:.15em}.code-input::placeholder{letter-spacing:normal}.modes{flex-wrap:wrap;align-items:center;gap:6px;margin:0 4px 12px;display:flex}.modes .label{color:var(--muted);font-size:var(--fs-small);margin-right:2px}.modes button{min-height:30px;color:var(--muted);font-size:var(--fs-small);background:0 0;border:1px solid #0000001f;border-radius:999px;padding:3px 12px}.modes button[aria-pressed=true]{background:var(--surface);color:var(--text);border-color:#0000;font-weight:500}.card .modes button[aria-pressed=true]{background:var(--live);color:#fff}.courts{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:12px;display:grid}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px}.card.free{background:var(--free-bg);border-color:#f0dcb8}.card-head{font-size:var(--fs-small);color:var(--muted);justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.badge{background:var(--live-bg);color:var(--live);font-size:var(--fs-small);border-radius:999px;padding:3px 10px}.badge.warn{color:var(--free);background:#fff}.matchup{grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;display:grid}.side{flex-direction:column;gap:2px;min-width:0;display:flex}.side.right{text-align:right}.side .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.side .rate{color:var(--faint);font-size:var(--fs-small)}.slot{width:100%;min-height:0;text-align:inherit;background:0 0;border:none;border-radius:8px;margin:0 -6px;padding:4px 6px;display:block}.slot:hover{background:#ffffff9c}.slot .name{-webkit-text-decoration:underline dotted var(--faint);text-decoration:underline dotted var(--faint);text-underline-offset:3px}.slot .name.empty{color:var(--free);text-decoration-color:currentColor}.pick-row{border:none;border-bottom:1px solid var(--line);background:0 0;border-radius:0;align-items:center;gap:10px;width:100%;padding:12px 4px;display:flex}.pick-row:last-child{border-bottom:none}.pick-row:hover{background:var(--bg)}.matchup .mid{color:var(--free);font-size:var(--fs-small);text-align:center}.score{font-size:var(--fs-score);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}.score .dash{color:var(--faint);margin:0 6px;font-weight:400}.row{align-items:center;gap:8px;display:flex}.row.wrap{flex-wrap:wrap}.row.end{justify-content:flex-end}.spacer{flex:1}.chips{flex-wrap:wrap;gap:6px;display:flex}.chip{color:var(--muted);font-size:var(--fs-small);white-space:nowrap;background:#f0f0ec;border-radius:999px;padding:5px 11px}.chip.hot{background:var(--free-bg);color:var(--free)}.chip.picked{background:var(--live-bg);color:var(--live)}.section-label{font-size:var(--fs-small);color:var(--faint);margin:18px 4px 8px}.empty{text-align:center;color:var(--muted);padding:40px 20px}.sheet{z-index:20;overscroll-behavior:contain;background:#00000059;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.sheet-body{background:var(--surface);width:min(560px,100%);padding:18px 16px calc(18px + env(safe-area-inset-bottom));overscroll-behavior:contain;border-radius:16px 16px 0 0;max-height:min(90dvh,100% - 12px);overflow-y:auto}@media (width>=700px){.sheet{align-items:center}.sheet-body{border-radius:16px}}.sheet-body h2,.form-page h2{font-size:var(--fs-title);margin:0 0 4px;font-weight:600}.stepper{grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;display:grid}.stepper .value{text-align:center;font-size:var(--fs-score);font-variant-numeric:tabular-nums;font-weight:600}.stepper button{min-width:44px;padding:0}.vs{color:#70a8db}.score-win{color:#41a475}.score-lose{color:#f99798}.delta{font-size:var(--fs-small);font-variant-numeric:tabular-nums}.delta.up{color:var(--live)}.delta.down{color:#a32d2d}.list-row{border-bottom:1px solid var(--line);align-items:center;gap:10px;padding:11px 4px;display:flex}.list-row:last-child{border-bottom:none}input.paid-box{width:26px;height:26px;min-height:0;accent-color:var(--live);cursor:pointer;flex:none;margin:0;padding:0}input.paid-box:disabled{cursor:default}.settled-mark{color:#fff;background:#547dbd;border-radius:6px;flex:none;place-items:center;width:26px;height:26px;font-size:16px;font-weight:700;line-height:1;display:grid}button.row-action{background:var(--surface);min-height:34px;color:var(--text);font-size:var(--fs-small);border:1px solid #c9c9c1;border-radius:999px;flex:none;padding:4px 14px;font-weight:500}.list-row.dim>:not(.row-action){opacity:.5}.avatar{width:34px;height:34px;color:var(--muted);font-size:var(--fs-small);background:#f0f0ec;border-radius:50%;flex:none;place-items:center;display:grid}.avatar.playing{background:var(--live-bg);color:var(--live)}.regular-name{color:#71ad99;font-weight:700}.avatar.regular{color:#0b3b2c;background:#c0e8de;font-weight:600}.avatar.waiting{background:var(--free-bg);color:var(--free)}.avatar.gold{color:#5c4410;background:#ebcd77;box-shadow:inset 0 0 0 2px #bf9b3a}.avatar.silver{color:#1f3332;background:#9fb2b1;box-shadow:inset 0 0 0 2px #72898a}.avatar.bronze{color:#5a2518;background:#dd9c8b;box-shadow:inset 0 0 0 2px #b8705e}.net-gate{z-index:40;background:#00000059;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.net-gate-card{width:100%;max-width:420px}.mode-card{text-align:left;width:100%;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;padding:16px;text-decoration:none;display:block}.mode-card h2{font-size:var(--fs-title);margin:0 0 4px;font-weight:600}.mode-card p{color:var(--muted);font-size:var(--fs-small);margin:0}.mode-card.soon{opacity:.6}.tour-head{justify-content:space-between;align-items:flex-start;gap:12px;margin:0 4px 12px;display:flex}.tour-head h2{font-size:var(--fs-title);margin:0;font-weight:600}.tour-note{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin:0 0 12px;padding:10px 14px}.tour-error{color:#a32d2d;font-size:var(--fs-small);margin:8px 0 0}.tour-form{flex-direction:column;gap:8px;display:flex}.tour-form label{font-size:var(--fs-small);color:var(--muted);margin-top:4px}.tour-link{color:inherit;text-decoration:none}.tour-vs{grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;font-weight:600;display:grid}.tour-vs>:last-child{text-align:right}.bracket{gap:12px;padding-bottom:8px;display:flex;overflow-x:auto}.bracket-round{flex-direction:column;flex:0 0 min(240px,78vw);justify-content:space-around;gap:10px;display:flex}.bracket-match{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:8px 10px}.bracket-match.live{border-color:var(--live);box-shadow:inset 0 0 0 1px var(--live)}.bracket-side{justify-content:space-between;gap:8px;padding:3px 0;display:flex}.bracket-side.won{color:#2f8a5b;font-weight:600}.bracket-side.lost{color:var(--faint)}.bracket-name{overflow-wrap:anywhere;min-width:0}.bracket-score{font-variant-numeric:tabular-nums;flex:none}.bracket-tag{font-size:var(--fs-small);color:var(--muted)}.bracket-tag:empty{display:none}