:root {
    --royal-blue: #2952e3;
    --royal-blue-dark: #1e3fc4;
    --emerald: #10b981;
    --amber: #f59e0b;
    --coral: #ef4444;
    --navy: #0f172a;
    --bg: #f1f5f9;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: linear-gradient(135deg, var(--navy) 0%, #1e3a8a 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.wizard-card {
    background: #fff;
    width: 100%;
    max-width: 540px;
    border-radius: 16px;
    padding: 34px 34px 30px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    animation: markhorFadeIn .3s ease;
}
@keyframes markhorFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.brand { text-align: center; margin-bottom: 20px; }
.brand h1 { font-size: 21px; color: var(--royal-blue); margin: 6px 0 2px; }
.brand span { font-size: 13px; color: #64748b; }
.brand .emoji { font-size: 32px; }

.step-indicator {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 26px;
}
.step-dot {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #94a3b8;
}
.step-dot .circle {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 12px;
}
.step-dot.done .circle { background: var(--emerald); color: #fff; }
.step-dot.active .circle { background: var(--royal-blue); color: #fff; }
.step-dot.active span.label { color: var(--navy); font-weight: 700; }

h2.step-title { font-size: 17px; color: var(--navy); margin: 0 0 4px; }
p.step-sub { font-size: 12.5px; color: #64748b; margin: 0 0 18px; }

label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin: 14px 0 6px;
}
label:first-of-type { margin-top: 0; }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], textarea {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
}
textarea { resize: vertical; min-height: 70px; }
input:focus, textarea:focus {
    outline: none;
    border-color: var(--royal-blue);
    box-shadow: 0 0 0 3px rgba(41,82,227,.15);
}
.password-wrap { position: relative; }
.password-wrap .toggle-eye {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    cursor: pointer; font-size: 12.5px; color: #64748b;
    background: none; border: none; padding: 4px;
}
.hint { font-size: 12px; color: #94a3b8; margin-top: 4px; }

.email-highlight input {
    border: 1.5px solid var(--amber);
    background: #fffbeb;
}
.email-highlight input:focus {
    border-color: var(--amber);
    box-shadow: 0 0 0 3px rgba(245,158,11,.18);
}
.email-note {
    font-size: 12px;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 7px 10px;
    margin-top: 6px;
    font-weight: 600;
}

.wizard-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 26px;
}
.btn {
    padding: 11px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.btn-primary { background: var(--royal-blue); color: #fff; }
.btn-primary:hover { background: var(--royal-blue-dark); }
.btn-outline { background: #fff; color: var(--navy); border: 1px solid #e2e8f0; }
.btn-outline:hover { background: #f8fafc; }

.alert { padding: 10px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; }
.alert-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.alert-success { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }

.success-box { text-align: center; padding: 10px 0 4px; }
.success-box .big-emoji { font-size: 46px; }
.success-box h2 { color: var(--navy); margin: 12px 0 6px; }
.success-box p { color: #64748b; font-size: 13.5px; line-height: 1.6; }

.links { text-align: center; margin-top: 18px; font-size: 13px; }
.links a { color: var(--royal-blue); text-decoration: none; }
.links a:hover { text-decoration: underline; }