/* Mobile-first, high contrast, big buttons. No inline styles anywhere (strict CSP). */
:root { color-scheme: light; }
* { box-sizing: border-box; }
body {
  margin: 0;
  background: #ffffff;
  color: #111111;
  font: 18px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
[hidden] { display: none !important; }
.site-head { max-width: 52rem; margin: 0 auto; padding: 16px 16px 0; border-bottom: 1px solid #d1d5db; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.logo { display: block; width: 236px; max-width: 70%; height: auto; margin-bottom: 12px; }
.nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.nav a { display: inline-flex; align-items: center; min-height: 48px; padding: 6px 14px; border: 3px solid #0b3d91; border-radius: 10px; color: #0b3d91; font-weight: 700; text-decoration: none; }
main { max-width: 36rem; margin: 0 auto; padding: 16px; }
main.wide { max-width: 52rem; }
h1 { font-size: 1.6rem; margin: 8px 0 8px; }
h2 { font-size: 1.3rem; margin: 24px 0 8px; }
p { margin: 8px 0; }
.small { font-size: 0.9rem; color: #374151; }
.big { font-size: 1.3rem; font-weight: 700; }

label { display: block; font-weight: 700; margin: 16px 0 4px; }
input[type="email"], input[type="password"], input[type="text"], input[inputmode="numeric"] {
  width: 100%;
  min-height: 52px;
  padding: 10px 12px;
  font: inherit;
  border: 2px solid #111111;
  border-radius: 10px;
  background: #ffffff;
  color: #111111;
}
input.code { font-size: 1.6rem; letter-spacing: 0.3em; text-align: center; }
.check { display: flex; gap: 12px; align-items: center; font-weight: 400; margin: 16px 0 4px; }
.check input { width: 28px; height: 28px; flex: none; }

button {
  min-height: 52px;
  min-width: 48px;
  padding: 10px 16px;
  font: inherit;
  font-weight: 700;
  border-radius: 10px;
  border: 3px solid #0b3d91;
  background: #ffffff;
  color: #0b3d91;
  cursor: pointer;
}
button:focus-visible, input:focus-visible, a:focus-visible { outline: 4px solid #ffbf00; outline-offset: 2px; }
button.primary, button.secondary, button.danger { width: 100%; margin-top: 12px; }
button.primary { background: #0b3d91; color: #ffffff; }
button.danger { background: #a40000; border-color: #a40000; color: #ffffff; }
button:disabled { background: #6b7280; border-color: #6b7280; color: #ffffff; cursor: not-allowed; }
button.inline { width: auto; margin: 4px 6px 4px 0; min-height: 48px; }

.card { border: 2px solid #d1d5db; border-radius: 12px; padding: 12px 16px; margin: 12px 0; }
.message { padding: 12px; border: 2px solid #a40000; border-radius: 10px; color: #7a0000; font-weight: 700; margin: 12px 0; }
.message.ok { border-color: #1b5e20; color: #1b5e20; }
.secret { font-family: ui-monospace, Consolas, monospace; font-size: 1.1rem; word-break: break-all; padding: 8px; background: #f3f4f6; border-radius: 8px; }
.qr { display: block; width: 220px; height: 220px; margin: 12px auto; border: 1px solid #d1d5db; background: #ffffff; }

.user h3 { margin: 0 0 4px; font-size: 1.1rem; word-break: break-all; }
.user .facts { margin: 0 0 8px; color: #374151; font-size: 0.95rem; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #e5edff; color: #0b3d91; font-size: 0.85rem; font-weight: 700; margin-left: 6px; }
.actions { display: flex; flex-wrap: wrap; }
.panel { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #9ca3af; }