:root{
  --bg:        #F4F4F5;
  --surface:   #FFFFFF;
  --surface-2: #F1F2F4;
  --line:      #E5E7EB;
  --text:      #0D1E36;
  --text-dim:  #6B7280;
  --amber:     #E8A33D;
  --amber-dim: #B8791F;
  --cyan:      #0E9488;
  --red:       #DC2626;
  --display: 'Space Grotesk', sans-serif;
  --body: 'IBM Plex Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}
*{ box-sizing:border-box; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--body); line-height:1.6; min-height:100vh;
}
a{ color:var(--text); text-decoration:underline; text-underline-offset:2px; }
.wrap{ max-width:1080px; margin:0 auto; padding:24px; }
.center-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
h1,h2,h3{ font-family:var(--display); font-weight:600; }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:32px; width:100%; max-width:420px; box-shadow:0 1px 3px rgba(13,30,54,.06); }
.card.wide{ max-width:640px; }
label{ display:block; font-family:var(--mono); font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); margin-bottom:6px; }
input[type=text], input[type=email], input[type=password]{
  width:100%; background:var(--surface); border:1px solid var(--line); border-radius:4px;
  color:var(--text); padding:12px 14px; font-size:1rem; font-family:var(--body); margin-bottom:18px;
}
input:focus{ outline:2px solid var(--cyan); outline-offset:1px; }
button, .btn{
  font-family:var(--mono); font-size:.86rem; padding:12px 22px; border-radius:4px;
  background:var(--amber); color:#1B140A; border:none; cursor:pointer; font-weight:500;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none;
}
button:hover, .btn:hover{ filter:brightness(1.05); }
.btn-ghost{ background:none; border:1px solid var(--line); color:var(--text); }
.msg{ padding:12px 14px; border-radius:4px; font-size:.92rem; margin-bottom:18px; }
.msg.error{ background:rgba(220,38,38,.07); border:1px solid var(--red); color:#991B1B; }
.msg.ok{ background:rgba(14,148,136,.08); border:1px solid var(--cyan); color:#0B5F57; }
.small-link{ font-size:.86rem; color:var(--text-dim); }
.small-link a{ color:var(--text); font-weight:600; }
table{ width:100%; border-collapse:collapse; font-size:.9rem; }
th, td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); }
th{ font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); }
.badge{ font-family:var(--mono); font-size:.72rem; padding:3px 9px; border-radius:20px; display:inline-block; }
.badge.live{ background:rgba(14,148,136,.12); color:var(--cyan); }
.badge.away{ background:rgba(107,114,128,.12); color:var(--text-dim); }
.topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; flex-wrap:wrap; gap:12px; }
.topbar nav{ display:flex; flex-wrap:wrap; gap:6px 16px; font-family:var(--mono); font-size:.82rem; }
.topbar nav a{ color:var(--text-dim); text-decoration:none; }
.topbar nav a:hover{ color:var(--text); text-decoration:underline; }

/* Language switch. Small and at the bottom of the card on purpose — the language is meant to be
   right already, and this is the correction, not the main way in. */
.lang-switch{ margin-top:18px; font-size:.8rem; }
.lang-switch a{ color:var(--text-dim); text-decoration:underline; }
.lang-switch a:hover{ color:var(--text); }
.lang-switch-inline{ color:var(--text-dim); text-decoration:underline; font-size:.78rem; }
.lang-switch-inline:hover{ color:var(--text); }