@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Plus+Jakarta+Sans:wght@700;800&display=swap');

:root {
    --bg:       #f0f2f5;
    --surface:  #ffffff;
    --border:   #e4e7ed;
    --text:     #111827;
    --muted:    #6b7280;
    --accent:   #1a56db;
    --ok:       #047857;
    --ok-bg:    #d1fae5;
    --err:      #b91c1c;
    --err-bg:   #fee2e2;
    --radius:   16px;
    --shadow:   0 2px 8px rgba(0,0,0,.06), 0 12px 40px rgba(0,0,0,.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    background-image:
        radial-gradient(circle at 15% 50%, rgba(26,86,219,.07) 0%, transparent 60%),
        radial-gradient(circle at 85% 30%, rgba(99,102,241,.06) 0%, transparent 55%);
}

.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    gap: 20px;
}

/* ── CARD ── */
.card {
    width: 100%;
    max-width: 480px;
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    padding: 36px 32px;
    box-shadow: var(--shadow);
}

/* ── HEADER ── */
.card-header {
    padding-bottom: 20px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
}

.brand-logo {
    height: 44px;
    width: auto;
    display: block;
}

.card-intro {
    margin-bottom: 24px;
}

.card-intro h1 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.3;
    color: var(--text);
    margin-bottom: 8px;
}

.intro-text {
    font-size: .88rem;
    color: var(--muted);
    line-height: 1.6;
}

.muted { color: var(--muted); font-size: .88rem; margin-top: 3px; }

/* ── STEPS ── */
.steps {
    display: flex;
    align-items: center;
    margin-bottom: 28px;
}
.step {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    font-weight: 500;
    color: #9ca3af;
    white-space: nowrap;
}
.step span {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #e5e7eb;
    display: grid; place-items: center;
    font-size: .75rem;
    font-weight: 700;
    color: #9ca3af;
}
.step.active { color: var(--accent); }
.step.active span { background: var(--accent); color: #fff; }
.step-line { flex: 1; height: 1px; background: var(--border); margin: 0 10px; }

/* ── ALERT ── */
.alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 14px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: .9rem;
    line-height: 1.5;
}
.alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alert-error { background: var(--err-bg); color: var(--err); }

/* ── FORM ── */
.form-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.field { display: flex; flex-direction: column; gap: 6px; }
.field-label {
    font-size: .83rem;
    font-weight: 600;
    color: #374151;
    letter-spacing: .01em;
}
.field-label small { font-weight: 400; color: var(--muted); margin-left: 4px; }

.input-wrap { position: relative; }
.field-icon {
    position: absolute;
    left: 13px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px;
    stroke: #9ca3af;
    pointer-events: none;
}
input {
    width: 100%;
    padding: 12px 14px 12px 40px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    font-family: inherit;
    font-size: .93rem;
    color: var(--text);
    background: #fafafa;
    outline: none;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
input::placeholder { color: #c0c5cf; }
input:focus {
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(26,86,219,.1);
}

/* ── BUTTON ── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg, #2563eb 0%, #1a56db 100%);
    box-shadow: 0 4px 14px rgba(26,86,219,.35);
    text-decoration: none;
    margin-top: 4px;
    transition: transform .12s, box-shadow .12s, filter .12s;
}
.btn-primary svg { width: 18px; height: 18px; }
.btn-primary:hover {
    filter: brightness(1.06);
    box-shadow: 0 6px 20px rgba(26,86,219,.4);
    transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

/* ── TRUST ROW ── */
.trust-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    font-size: .79rem;
    color: var(--muted);
}

/* ── RESULT CARD ── */
.result-card { text-align: center; }
.result-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 700;
    margin-bottom: 16px;
}
.result-badge svg { width: 18px; height: 18px; }
.result-badge.ok   { background: var(--ok-bg);  color: var(--ok); }
.result-badge.fail { background: var(--err-bg); color: var(--err); }
.result-card h1 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 8px;
}
.result-card .muted { margin-bottom: 24px; }

/* ── RESULT TABLE ── */
.result-table {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
    text-align: left;
}
.result-table div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
    font-size: .88rem;
}
.result-table div:last-child { border-bottom: none; }
.result-table span { color: var(--muted); }
.result-table strong { text-align: right; max-width: 60%; overflow-wrap: anywhere; }

.txt-ok   { color: var(--ok); }
.txt-fail { color: var(--err); }

/* ── FOOTER ── */
.site-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
    color: #9ca3af;
    flex-wrap: wrap;
    justify-content: center;
}
.site-footer strong { color: #6b7280; font-weight: 600; }
.sep { color: #d1d5db; }

@media (max-width: 520px) {
    .card { padding: 24px 18px; }
    .trust-row { gap: 12px; flex-wrap: wrap; }
}