html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body { background:#f5f7fa; color:#1f2937; }
.container-narrow { max-width:720px; margin:0 auto; }
.card-panel { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:18px; margin-bottom:16px; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.dev-banner { background:#fff4cc; color:#7a4e00; padding:9px 14px; text-align:center; font-weight:700; border-bottom:1px solid #f0d978; }
.metric-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.metric { background:#f8fafc; border-radius:9px; padding:12px; }
.metric strong { display:block; font-size:1.25rem; }
.sidebar-metrics { gap:8px; padding:12px; }
.sidebar-metrics .metric { padding:9px 12px; line-height:1.25; }
.sidebar-metrics .metric strong { margin-top:3px; font-size:1.2rem; line-height:1.15; }
.question { margin:18px 0; }
.required { color:#c62828; }
.status-box { padding:18px; border-radius:10px; background:#eef6ff; }
.break-anywhere { overflow-wrap:anywhere; }
textarea { min-height:110px; }
@media (max-width:520px) { .container { padding-left:12px; padding-right:12px; } .card-panel { padding:14px; } .sidebar-metrics { padding:10px; gap:7px; } .sidebar-metrics .metric { padding:8px 10px; } .navbar { display:none; } main { padding-top:8px!important; } }

body {
  margin-bottom: 60px;
}