* { box-sizing: border-box; }
body { margin:0; font-family: Arial, Helvetica, sans-serif; background:#f3f6fb; color:#1f2937; font-size:14px; }
a { color:#2563eb; text-decoration:none; }
a:hover { text-decoration:underline; }
.cl-input { width:100%; padding:11px 12px; border:1px solid #d7dce5; border-radius:10px; background:#fff; outline:none; margin:6px 0 14px 0; }
.cl-input:focus { border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,0.12); }
.cl-btn { border:0; border-radius:10px; padding:11px 16px; cursor:pointer; font-weight:bold; }
.cl-btn-primary { background:#2563eb; color:#fff; }
.cl-btn-primary:hover { background:#1d4ed8; }
.cl-btn-secondary { background:#0f172a; color:#fff; }
.cl-btn-block { width:100%; }
.cl-alert { padding:12px; border-radius:10px; margin:10px 0; }
.cl-alert-error { background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }
.cl-alert-ok { background:#dcfce7; color:#166534; border:1px solid #bbf7d0; }