:root{
  --navy:#0b2e6b; --navydk:#081b40; --red:#c8102e; --ink:#1f2733;
  --muted:#5b6472; --line:#d3ddec; --ice:#eef3fa; --ice2:#e1eaf6;
  --white:#fff; --good:#1c7a43; --gold:#c49a2e;
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:"Segoe UI",Calibri,Arial,sans-serif; color:var(--ink); background:#f5f7fb; }
a{ color:var(--navy); }
.hidden{ display:none !important; }

.test-banner{ background:var(--red); color:#fff; text-align:center; font-weight:bold;
  letter-spacing:1px; padding:6px 10px; font-size:13px; }

.topbar{ display:flex; align-items:center; justify-content:space-between;
  background:var(--navydk); color:#fff; padding:12px 20px; }
.brand{ display:flex; align-items:center; gap:12px; }
.logo{ height:38px; background:#fff; border-radius:6px; padding:4px 8px; }
.brand-title{ font-weight:bold; font-size:16px; }
.brand-sub{ font-size:11px; color:#bfd0ec; }
.session{ font-size:13px; display:flex; align-items:center; gap:10px; }
.session .role{ background:#12326b; border-radius:20px; padding:3px 12px; text-transform:capitalize; }

.nav{ display:flex; gap:4px; flex-wrap:wrap; background:var(--navy); padding:0 14px; }
.nav a{ color:#dce6f6; text-decoration:none; padding:11px 15px; font-size:14px; border-bottom:3px solid transparent; }
.nav a:hover{ background:#12326b; }
.nav a.active{ color:#fff; border-bottom-color:var(--red); font-weight:bold; }

.view{ max-width:960px; margin:22px auto; padding:0 18px; }
h1{ font-size:24px; color:var(--navy); margin:0 0 4px; }
h2{ font-size:17px; color:var(--navy); margin:22px 0 8px; }
.sub{ color:var(--muted); margin:0 0 18px; }

.card{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:18px 20px;
  box-shadow:0 1px 4px rgba(20,40,80,.06); margin-bottom:16px; }
.card.dark{ background:var(--navy); color:#fff; border:0; }
.card.dark .big{ color:#fff; }

label{ display:block; font-size:12px; font-weight:bold; text-transform:uppercase; letter-spacing:.5px;
  color:var(--muted); margin:12px 0 4px; }
input,select{ width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:6px; font-size:14px; }
.row{ display:flex; gap:14px; } .row>*{ flex:1; }
.check{ display:flex; align-items:center; gap:8px; margin-top:12px; }
.check input{ width:auto; }

button{ cursor:pointer; border:0; border-radius:6px; padding:10px 16px; font-size:14px; font-weight:bold; }
.btn{ background:var(--navy); color:#fff; }
.btn:hover{ background:#12326b; }
.btn.red{ background:var(--red); } .btn.red:hover{ background:#a50d26; }
.btn.ghost{ background:var(--ice2); color:var(--navy); }
.btn.sm{ padding:6px 11px; font-size:12px; }
.actions{ margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; }

table{ width:100%; border-collapse:collapse; font-size:13px; }
th,td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); }
th{ color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.5px; }
tr:hover td{ background:var(--ice); }

.badge{ display:inline-block; font-size:11px; font-weight:bold; padding:2px 9px; border-radius:20px; }
.badge.sold{ background:#eef; color:var(--navy); }
.badge.valid{ background:#e2f3e9; color:var(--good); }
.badge.void{ background:#fde5e9; color:var(--red); }
.badge.test{ background:#fde5e9; color:var(--red); }
.badge.production{ background:#e2f3e9; color:var(--good); }
.badge.active{ background:var(--gold); color:#3a2e00; }

.big{ font-size:44px; font-weight:bold; color:var(--navy); line-height:1; }
.stat-grid{ display:flex; gap:14px; flex-wrap:wrap; }
.stat{ flex:1; min-width:150px; text-align:center; background:var(--ice); border:1px solid var(--line);
  border-radius:10px; padding:16px; }
.stat .n{ font-size:34px; font-weight:bold; color:var(--navy); }
.stat .n.zero{ color:var(--good); } .stat .n.bad{ color:var(--red); }
.stat .l{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }

.note{ font-size:12px; color:var(--muted); margin-top:8px; }
.ok{ color:var(--good); font-weight:bold; }
.err{ color:var(--red); font-weight:bold; }
.msg{ padding:10px 14px; border-radius:8px; margin:12px 0; font-size:14px; }
.msg.ok{ background:#e2f3e9; } .msg.err{ background:#fde5e9; color:var(--red); }

.scoregrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; margin-top:12px; }
.scorecell{ border:1px solid var(--line); border-radius:8px; padding:8px; text-align:center; background:#fff; }
.scorecell .wk{ font-size:11px; color:var(--muted); } .scorecell .sc{ font-size:18px; font-weight:bold; color:var(--navy); }
.scorecell.greycup{ border-color:var(--gold); background:#fffdf3; }
.scorecell.playoff{ border-color:#bcd; }

/* ── Sign-in page ─────────────────────────────────────────── */
.login-wrap{ max-width:420px; }
.login-card{ display:flex; flex-direction:column; gap:12px; }

/* Base button shared by all SSO / email buttons: 40px, brand-neutral */
.sso-btn{
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:100%; min-height:40px; padding:0 16px; box-sizing:border-box;
  border-radius:8px; border:1px solid transparent; cursor:pointer;
  font-family:"Roboto","Segoe UI",Arial,sans-serif; font-size:14px; font-weight:500;
  text-decoration:none; transition:filter .12s, box-shadow .12s, background .12s;
}
.sso-btn:hover{ box-shadow:0 1px 3px rgba(8,27,64,.22); }
.sso-btn:focus-visible{ outline:2px solid var(--navy); outline-offset:2px; }
.sso-logo{ width:18px; height:18px; flex:0 0 18px; }

/* Google — white, #747775 border, #1f1f1f text (per brand guidelines) */
.sso-google{ background:#fff; border-color:#747775; color:#1f1f1f; }
.sso-google:hover{ background:#f7f8f8; }

/* Microsoft — white, #8c8c8c border, #5e5e5e text */
.sso-microsoft{ background:#fff; border-color:#8c8c8c; color:#5e5e5e; }
.sso-microsoft:hover{ background:#f7f8f8; }

/* Apple — black button, white logo + text */
.sso-apple{ background:#000; color:#fff; }
.sso-apple:hover{ background:#111; }

/* Email — pool green */
.sso-email{ background:var(--good); color:#fff; }
.sso-email:hover{ background:#166536; }

/* "or" divider */
.or-divider{ display:flex; align-items:center; gap:10px; color:var(--muted);
  font-size:12px; text-transform:uppercase; letter-spacing:.5px; margin:4px 0; }
.or-divider::before, .or-divider::after{ content:""; flex:1; height:1px; background:var(--line); }

/* Email magic-link form */
.email-login{ display:flex; flex-direction:column; gap:8px; margin:0; }
.email-login label{ margin:0; }
.email-hint{ font-size:12px; color:var(--muted); margin:2px 0 0; }
.msg-slot:empty{ display:none; }

/* Local dev picker */
.dev-login .actions{ display:flex; gap:8px; }