* { box-sizing: border-box; margin: 0; padding: 0; }
:root { color-scheme: light; }
body { font-family: -apple-system, "Segoe UI", Roboto, sans-serif; background:#f4f6f9; min-height:100vh; }
main { max-width:430px; margin:0 auto; padding-bottom:90px; }

.top { position:sticky; top:0; z-index:10; background:linear-gradient(90deg,#002244,#003366); color:#fff;
  padding:10px 16px; display:flex; align-items:center; gap:10px; }
.brand { color:#fff; text-decoration:none; font-weight:800; font-size:15px; }
.lockchip { margin-left:auto; font-size:11px; background:rgba(255,255,255,.15); padding:3px 10px; border-radius:999px; }
.stale { margin-left:auto; font-size:11px; background:#c60c30; padding:3px 10px; border-radius:999px; }
.lockchip + .stale, .stale + .lockchip { margin-left:0; }

.head { padding:18px 16px 4px; }
.head h1 { font-size:20px; font-weight:700; color:#002244; }
.head p { font-size:12px; color:#5a6b7b; margin-top:3px; }

.card { background:#fff; border-radius:12px; margin:8px 10px; padding:14px; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.gdate { font-size:11px; color:#5a6b7b; margin-bottom:8px; }
.teams { display:flex; gap:8px; align-items:stretch; }
.teams input[type=radio] { position:absolute; opacity:0; pointer-events:none; }
.team { flex:1; border:2px solid #dde3ea; border-radius:10px; padding:14px 6px; text-align:center;
  font-weight:700; cursor:pointer; user-select:none; display:block; }
.team small { display:block; font-weight:400; font-size:10px; color:#5a6b7b; margin-top:3px; }
.team.static { cursor:default; opacity:.45; }
input[type=radio]:checked + .team { border-color:#c60c30; background:#fff0f3; color:#c60c30; opacity:1; }
.team.static.on { border-color:#002244; background:#eef3f9; color:#002244; opacity:1; }
.at { align-self:center; font-size:13px; color:#5a6b7b; font-weight:700; }
.verdict { display:none; flex:0 0 64px; align-self:center; text-align:center; font-weight:800; font-size:13px;
  padding:10px 0; border-radius:10px; }
.teams:has(.r-ne:checked) .verdict.w { display:block; }
.teams:has(.r-opp:checked) .verdict.l { display:block; }
.verdict.w { background:#d4edda; color:#186a3b; }
.verdict.l { background:#f8d7da; color:#842029; }

.savebar { position:fixed; bottom:12px; left:50%; transform:translateX(-50%); width:min(410px, calc(100% - 20px)); }
.bigbtn { display:block; width:100%; padding:14px; border:0; border-radius:12px; background:#002244;
  color:#fff; font-size:15px; font-weight:700; cursor:pointer; }
.bigbtn.red { background:#c60c30; }
.bigbtn.slim { width:auto; padding:10px 18px; font-size:13px; }

.pcard { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.avatar { width:42px; height:42px; border-radius:50%; background:#002244; color:#fff; flex:none;
  display:flex; align-items:center; justify-content:center; font-weight:800; }
.sub2 { font-size:11px; color:#5a6b7b; }
.sub2.err { color:#842029; }
.badge { margin-left:auto; font-size:11px; padding:3px 10px; border-radius:999px; }
.badge.ok { background:#d4edda; color:#186a3b; }
.badge.no { background:#f8d7da; color:#842029; }

.rank { font-size:22px; font-weight:800; color:#b9c2cc; width:30px; }
.cnt { text-align:right; }
.cnt b { font-size:24px; }
.cnt span { display:block; font-size:10px; color:#5a6b7b; }
.rec { text-align:right; margin-left:auto; }
.rec b { font-size:24px; }
.rec span { display:block; font-size:10px; color:#5a6b7b; }
.wrapok .mini { width:100%; }
.mini { display:flex; gap:2px; margin-top:10px; }
.mini .mg { flex:1; text-align:center; }
.mini .mg em { display:block; font-style:normal; font-size:8px; color:#5a6b7b; }
.mini .mg i { display:block; height:16px; border-radius:2px; background:#eef1f4; color:#98a4b0;
  font-style:normal; font-size:10px; font-weight:700; line-height:16px; }
.mini .mg i.w { background:#4caf50; color:#fff; }
.mini .mg i.l { background:#e57373; color:#fff; }
.mini .mg i.t { background:#9e9e9e; color:#fff; }

.health b, .danger b { color:#002244; }
.flash { border:2px solid #4caf50; }
.linkbox { font-family:ui-monospace, Menlo, monospace; font-size:12px; color:#0056b3; word-break:break-all; }
.rowform { display:flex; gap:8px; }
.rowform input[type=text] { flex:1; border:2px solid #dde3ea; border-radius:10px; padding:10px 12px; font-size:14px; }
.adminside { margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.adminside .badge { margin-left:0; }
.lbtn { border:1px solid #dde3ea; background:#fff; border-radius:8px; padding:5px 10px; font-size:11px; cursor:pointer; }
.danger { border:2px solid #c60c30; }
.confirm { display:flex; gap:8px; align-items:center; font-size:12px; color:#5a6b7b; margin:10px 0; }
.danger .bigbtn { margin-top:4px; }