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

:root{
  --base:#0a0a0b;--surface:#111113;--surface-2:#18181b;--surface-3:#1f1f23;
  --border:#27272a;--border-2:#3f3f46;
  --tx-high:#fafafa;--tx-med:#a1a1aa;--tx-low:#52525b;
  --accent:#6366f1;--accent-dim:#4f46e5;--accent-glow:#818cf8;
  --ok:#34d399;--err:#f87171;--warn:#fbbf24;
  --radius:8px;
  --font-mono:'JetBrains Mono','Fira Code',monospace;
  --font-ui:'Segoe UI','Inter',system-ui,sans-serif;
}

body{
  background:var(--base);color:var(--tx-med);
  font-family:var(--font-ui);
  min-height:100vh;display:flex;align-items:center;justify-content:center;
}

.login-container{width:100%;max-width:440px;padding:20px}

.login-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:36px;
}

.login-header{text-align:center;margin-bottom:32px}
.logo{font-size:32px;margin-bottom:8px}
.login-header h1{font-size:18px;color:var(--tx-high);font-weight:700;margin-bottom:4px}
.subtitle{font-size:13px;color:var(--tx-low)}

/* Steps */
.steps{display:flex;align-items:center;justify-content:center;margin-bottom:32px}
.step{display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.4;transition:.3s}
.step.active{opacity:1}
.step.done{opacity:.7}
.step-number{
  width:32px;height:32px;border-radius:50%;
  background:var(--surface-3);border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:var(--tx-low);transition:.3s;
}
.step.active .step-number{background:var(--accent);border-color:var(--accent);color:#fff}
.step.done .step-number{background:var(--ok);border-color:var(--ok);color:#000}
.step-label{font-size:10px;font-weight:600;color:var(--tx-low);text-transform:uppercase}
.step-line{
  width:60px;height:2px;background:var(--border);
  margin:0 12px;margin-bottom:18px;transition:background .3s;
}
.step-line.done{background:var(--ok)}

/* Content */
.step-content{display:none}
.step-content.active{display:block}
.step-title{font-size:16px;font-weight:700;color:var(--tx-high);margin-bottom:6px}
.step-desc{font-size:13px;color:var(--tx-low);margin-bottom:20px}

/* Form */
.form-group{margin-bottom:16px}
.form-group label{
  display:block;font-size:11px;color:var(--tx-low);
  margin-bottom:6px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;
}
.form-input{
  width:100%;padding:12px 14px;
  background:var(--surface-3);color:var(--tx-high);
  border:1px solid var(--border);border-radius:var(--radius);
  font-family:var(--font-mono);font-size:14px;
  outline:none;transition:border-color .2s;
}
.form-input:focus{border-color:var(--accent)}
.form-input::placeholder{color:var(--tx-low)}
.code-input{font-size:24px;letter-spacing:8px;text-align:center;font-weight:700}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 24px;border:none;border-radius:var(--radius);
  font-family:var(--font-ui);font-size:14px;font-weight:600;
  cursor:pointer;transition:all .15s;
}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dim)}
.btn-full{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.loading{position:relative;color:transparent}
.btn.loading::after{
  content:"";position:absolute;width:18px;height:18px;
  border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
  border-radius:50%;animation:spin .6s linear infinite;
}
.btn-link{
  background:none;border:none;color:var(--tx-low);
  font-size:12px;cursor:pointer;width:100%;text-align:center;
  padding:6px;font-family:var(--font-ui);
}
.btn-link:hover{color:var(--tx-med)}
@keyframes spin{to{transform:rotate(360deg)}}

/* Timer */
.code-timer{text-align:center;font-size:12px;color:var(--tx-low);margin-bottom:16px}
.code-timer span{color:var(--warn);font-weight:600;font-family:var(--font-mono)}

/* Error */
.error-box{
  margin-top:16px;padding:10px 14px;
  background:#451a1a;border:1px solid #991b1b;
  border-radius:var(--radius);font-size:13px;color:var(--err);
  animation:shake .4s;
}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-4px)}
  40%,80%{transform:translateX(4px)}
}

.success-icon{font-size:48px;text-align:center;margin-bottom:16px}

.security-notice{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:24px;padding-top:20px;
  border-top:1px solid var(--border);font-size:11px;color:var(--tx-low);
}