/* Login, reset and admin in the current design (docs/DESIGN.md): sportsbook greys, one green, Barlow.
   Loaded after ui/styles.css, which still carries the old tokens for older screens. */
:root {
  --bg: #121314; --bg-2: #232529; --card: #1a1c1f; --card-2: #232529; --line: #2b2e33;
  --text: #f2f3f5; --muted: #a1a7b3; --faint: #8f96a2;
  --green: #53d337; --green-dim: rgba(83, 211, 55, .12); --red: #ff4d4d; --gold: #f5b400;
  --radius: 8px;
  --head: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  --body: "Barlow", system-ui, -apple-system, sans-serif;
}
body { font: 500 15px/1.55 var(--body); background: var(--bg); }
h1, h2, h3 { font-family: var(--head); font-weight: 800; text-transform: uppercase; letter-spacing: 0; }
.box, .panel, .card { border-radius: 8px !important; background: var(--card); border: 1px solid var(--line); box-shadow: none; }
.btn { border-radius: 6px; box-shadow: none; transform: none !important; font-family: var(--body); font-weight: 700; }
.btn-primary { background: var(--green); color: #000; }
.btn-primary:hover { background: #63e047; }
input, select, textarea { border-radius: 6px; background: var(--bg); border-color: var(--line); font-family: var(--body); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.brand { font: 800 1.35rem var(--head); text-transform: none; }
.green, a.green { color: var(--green); }
.muted { color: var(--muted); }
.form-msg.err { color: #ffb3b3; background: rgba(255, 77, 77, .1); border-color: rgba(255, 77, 77, .35); }
@media (max-width: 900px), (pointer: coarse) {
  label.check { min-height: 44px; align-items: center; }
  label.check input[type=checkbox] { width: 20px; height: 20px; flex: none; }
  .brand { min-height: 44px; }
}
/* phone screen (/m) */
.m-plan, .m-top .brand { display: inline-flex; align-items: center; min-height: 44px; }
/* keyboard focus: always visible */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--green); outline-offset: 2px;
}