:root {
    --indigo: #4f46e5; --indigo-600: #4338ca; --indigo-50: #eef2ff;
    --slate-900: #0f172a; --slate-700: #334155; --slate-500: #64748b;
    --slate-400: #94a3b8; --slate-300: #cbd5e1; --slate-200: #e2e8f0;
    --slate-100: #f1f5f9; --slate-50: #f8fafc;
    --emerald: #059669; --emerald-bg: #ecfdf5; --red: #dc2626; --red-bg: #fef2f2;
}
* { box-sizing: border-box; }
body {
    margin: 0; min-height: 100vh;
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--slate-100); color: var(--slate-900); line-height: 1.5;
    display: grid; place-items: center; padding: 32px 16px;
}
.wrap { width: 100%; max-width: 640px; }
.brand { display: flex; align-items: center; justify-content: center; gap: 11px; font-weight: 700; font-size: 22px; letter-spacing: -.02em; margin-bottom: 22px; }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--indigo), #8b7cf5); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 17px; }

.card { background: #fff; border: 1px solid var(--slate-200); border-radius: 16px; box-shadow: 0 4px 16px rgba(15,23,42,.06); padding: 28px 30px; }
h1 { font-size: 20px; margin: 0 0 6px; letter-spacing: -.01em; }
.sub { color: var(--slate-500); font-size: 14px; margin: 0 0 22px; }

/* stepper */
.steps { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 24px; }
.steps .s { display: flex; align-items: center; gap: 6px; }
.steps .dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--slate-100); color: var(--slate-400); border: 1px solid var(--slate-200); }
.steps .s.done .dot { background: var(--emerald-bg); color: var(--emerald); border-color: #a7f3d0; }
.steps .s.active .dot { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.steps .bar { width: 26px; height: 2px; background: var(--slate-200); }

/* requirements */
.req { display: flex; flex-direction: column; gap: 2px; }
.req-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 2px; border-bottom: 1px solid var(--slate-100); font-size: 14px; }
.req-row:last-child { border-bottom: 0; }
.req-row .ico { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.req-row.ok .ico { background: var(--emerald-bg); color: var(--emerald); }
.req-row.bad .ico { background: var(--red-bg); color: var(--red); }
.req-row .hint { color: var(--slate-400); font-size: 12px; margin-left: auto; margin-right: 10px; }

/* form */
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--slate-700); margin-bottom: 6px; }
.field input { width: 100%; padding: 10px 12px; font-size: 14px; border: 1px solid var(--slate-300); border-radius: 9px; outline: none; transition: border-color .15s, box-shadow .15s; }
.field input:focus { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-50); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.hintline { font-size: 12px; color: var(--slate-400); margin-top: 5px; }

.alert { padding: 11px 14px; border-radius: 10px; font-size: 13.5px; margin-bottom: 18px; }
.alert-error { background: var(--red-bg); color: var(--red); border: 1px solid #fecaca; }
.alert-info { background: var(--indigo-50); color: var(--indigo-600); border: 1px solid #c7d2fe; }

.actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 22px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 9px; border: 1px solid transparent; cursor: pointer; text-decoration: none; }
.btn-primary { background: var(--indigo); color: #fff; }
.btn-primary:hover { background: var(--indigo-600); }
.btn-ghost { background: #fff; color: var(--slate-700); border-color: var(--slate-300); }
.btn[disabled], .btn.disabled { opacity: .5; pointer-events: none; }
.link { color: var(--slate-500); font-size: 13px; text-decoration: none; }
.link:hover { color: var(--slate-700); }

.finish { text-align: center; padding: 12px 0; }
.finish .mark { width: 60px; height: 60px; border-radius: 50%; background: var(--emerald-bg); color: var(--emerald); display: grid; place-items: center; font-size: 30px; margin: 0 auto 16px; }