*, *::before, *::after { box-sizing: border-box; }

:root {
    --text: #1f2328;
    --muted: #59636e;
    --bg: #f6f7f9;
    --card: #fff;
    --border: #d8dee4;
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --ok: #1a7f37;
    --warn: #9a6700;
    --fail: #cf222e;
}

body {
    margin: 0;
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--text);
    background: var(--bg);
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 16px;
}

a { color: var(--primary); }

h1 { margin: 0 0 4px; font-size: 1.5rem; }
h2 { margin: 24px 0 8px; font-size: 1.1rem; }

.muted { color: var(--muted); margin-top: 0; }

pre {
    overflow-x: auto;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--border);
}

/* Card */
.card {
    max-width: 560px;
    margin: 0 auto;
    padding: 28px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.card-narrow { max-width: 400px; }

/* Forms */
.form { display: grid; gap: 14px; }
.form label { display: grid; gap: 4px; font-weight: 600; font-size: .9rem; }
.form small { font-weight: 400; color: var(--muted); }
.form .row { display: flex; gap: 12px; }
.form .grow { flex: 1; }
.form .narrow { width: 100px; }

input, select, textarea {
    width: 100%;
    padding: 9px 11px;
    font: inherit;
    font-weight: 400;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid rgba(37, 99, 235, .25);
    border-color: var(--primary);
}

.btn {
    justify-self: start;
    padding: 10px 18px;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--primary);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}
.btn:hover { background: var(--primary-hover); }

/* Alerts */
.alert {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid;
}
.alert-error { color: var(--fail); background: #ffebe9; border-color: #ffcecb; }
.alert-success { color: var(--ok); background: #dafbe1; border-color: #aceebb; }
.alert-warn { color: var(--warn); background: #fff8c5; border-color: #f2e08a; }

/* Requirement checks */
.checks { list-style: none; margin: 0; padding: 0; }
.check { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid #eef1f4; }
.check small { display: block; color: var(--muted); }
.check-mark {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    font-size: .8rem;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}
.check-ok .check-mark { background: var(--ok); }
.check-warn .check-mark { background: var(--warn); }
.check-fail .check-mark { background: var(--fail); }

@media (max-width: 480px) {
    .card { padding: 20px 16px; }
    .form .row { flex-direction: column; }
    .form .narrow { width: 100%; }
}