:root{ --primary:#2563eb; --danger:#dc2626; --muted:#6b7280; }
*{ box-sizing:border-box; }
body{ font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; margin:0; background:#0f172a; color:#e5e7eb; }
.container{ max-width:960px; margin:24px auto; padding:0 16px; }
h1{ font-size:22px; margin:0 0 16px; }
.card{ background:#111827; border:1px solid #1f2937; border-radius:12px; padding:16px; }
.grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.num{ position:relative; }
.num input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.pill{ display:flex; align-items:center; justify-content:center; border-radius:999px; padding:14px 0; border:1px solid #374151; background:#0b1220; color:#cbd5e1; font-weight:600; transition:.15s; }
.num input:checked + .pill{ background:#1f2937; border-color:#2563eb; color:#93c5fd; box-shadow:0 0 0 2px #1f2937, 0 0 0 4px rgba(37,99,235,.35) inset; }
.actions{ display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }
/* buttons migrated to base.css */
.muted{ color:#9ca3af; }
.errors{ background:#450a0a; border:1px solid #7f1d1d; color:#fecaca; padding:12px; border-radius:8px; margin:12px 0; }
table{ width:100%; border-collapse:separate; border-spacing:0; margin-top:12px; }
th,td{ padding:8px 10px; border-bottom:1px solid #283447; text-align:left; }
th{ color:#cbd5e1; font-weight:600; }
tr:hover td{ background:#0b1220; }
.tag{ background:#0b1220; border:1px solid #283447; border-radius:999px; padding:6px 10px; font-size:12px; display:inline-flex; align-items:center; gap:6px; }
.footer{ text-align:center; color:#6b7280; font-size:12px; padding:24px 0; }

/* utilities used by markup */
.justify-between{ justify-content:space-between; }
.mt-12{ margin-top:12px; }
.mt-16{ margin-top:16px; }
.text-14{ font-size:14px; }
.btn-lg{ padding:12px 18px; font-size:16px; }
.hero-bg{ background: radial-gradient(1200px 400px at 50% -10%, rgba(29,78,216,.25), transparent) #111827; }
.danger-secondary{ border-color:#7f1d1d; color:#fecaca; }
.info-card{ background:#0b1220; border-color:#1d4ed8; }

/* additional utilities */
.justify-center{ justify-content:center; }
.items-center{ align-items:center; }
.wrap{ flex-wrap:wrap; }
.flex{ display:flex; }
.mt-8{ margin-top:8px; }
.text-28{ font-size:28px; }
.p-24{ padding:24px; }
.text-center{ text-align:center; }
.no-underline{ text-decoration:none; }
.inline{ display:inline; }
.gap-8{ gap:8px; }
.gap-12{ gap:12px; }
.row-center{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; align-items:center; }
.input-code{ min-width:200px;background:#0b1220; border:1px solid #374151; color:#e5e7eb; border-radius:10px; padding:12px 14px; outline:none; font-size:16px; text-align:center; letter-spacing:2px; }