:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body { margin: 0; background: #f6f7f8; color: #111; }
.wrap { max-width: 980px; margin: 0 auto; padding: 18px; }
.card { background: #fff; border: 1px solid #e6e6e6; border-radius: 14px; padding: 16px; margin: 12px 0; }
.h1 { font-size: 20px; font-weight: 700; margin: 0 0 8px 0; }
.h2 { font-size: 16px; font-weight: 650; margin: 12px 0 6px 0; }
.btn { display:block; width:100%; padding: 16px; border-radius: 14px; border: 1px solid #ddd; background: #fff; font-size: 18px; text-align:center; text-decoration:none; color:#111; margin: 10px 0; }
.btn.small { padding: 12px; font-size: 16px; }
.row { display:flex; gap: 12px; flex-wrap: wrap; }
.col { flex: 1 1 260px; }
input, select, textarea { width:100%; padding: 14px; border-radius: 12px; border: 1px solid #d8d8d8; font-size: 16px; background:#fff; }
label { display:block; font-weight: 600; margin: 10px 0 6px; }
.note { font-size: 14px; color:#444; }
.kpi { display:flex; gap: 10px; flex-wrap: wrap; }
.pill { background:#fff; border:1px solid #ddd; border-radius: 999px; padding: 8px 12px; font-size: 14px; }
.table { width:100%; border-collapse: collapse; }
.table td, .table th { padding: 10px 8px; border-bottom: 1px solid #eee; }
.bigcode { font-size: 44px; font-weight: 800; letter-spacing: 1px; }
/* Mobile/iPad hardening */
.row { display: flex; gap: 12px; align-items: flex-start; }
.col { flex: 1 1 0; min-width: 0; }

input, select, textarea { width: 100%; box-sizing: border-box; }

@media (max-width: 900px) {
  .row { flex-direction: column; }
  .col { width: 100%; }
}