:root{
  --bg:#f9fbfd; --card:#ffffff; --ink:#0f172a; --muted:#64748b; --brand:#2563eb;
  --ok:#15803d; --warn:#b45309; --bad:#b91c1c; --shadow:0 6px 16px rgba(2,6,23,.08);
  font-synthesis-weight: none;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--ink); background:var(--bg);
}
.container{max-width:960px;margin:0 auto;padding:24px}
.nav{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:8px 0 20px;
}
.nav a.logo{font-weight:700; text-decoration:none; color:var(--brand); font-size:1.1rem}
.nav .spacer{flex:1}
.nav a{padding:8px 10px; text-decoration:none; color:var(--muted); border-radius:10px}
.nav a.active, .nav a:hover{color:var(--brand); background:#e8f0ff}
.card{
  background:var(--card); border-radius:18px; padding:18px; box-shadow:var(--shadow);
}
.grid{display:grid; gap:14px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:780px){ .grid.cols-2,.grid.cols-3{grid-template-columns:1fr} }

h1{font-size:1.6rem;margin:6px 0 10px}
h2{font-size:1.2rem;margin:18px 0 8px}
p{line-height:1.6}
.small{font-size:.9rem;color:var(--muted)}
.btn{display:inline-block;background:var(--brand);color:white;padding:10px 14px;border-radius:12px;text-decoration:none;font-weight:600;border:0}
.btn:disabled{background:#9dbaf7;cursor:not-allowed}
.input{width:100%;padding:12px 12px;border:1px solid #e5e7eb;border-radius:12px;background:white}
.row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:640px){ .row{grid-template-columns:1fr} }
.kbd{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.9rem; background:#eef2ff; border-radius:8px; padding:2px 6px}
.alert{padding:12px;border-radius:12px; margin:8px 0; background:#f8fafc; border:1px dashed #e2e8f0}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.8rem}
.badge.ok{background:#ecfdf5;color:#166534}
.badge.warn{background:#fffbeb;color:#b45309}
.badge.bad{background:#fef2f2;color:#b91c1c}
.qr-grid img{width:140px;height:140px;display:block}
.footer{margin:28px 0 0; color:var(--muted)}