*,*::before,*::after {
  box-sizing:border-box;margin: 0;padding: 0
}
.bg-decor {
  position:fixed;pointer-events:none;opacity:0.03;border-radius: 50%;filter:blur(140px);
}
.bg-decor:nth-child(1) {
  width:700px;height:700px;background:#3B82F6;top: -300px;right: -200px;
}
.bg-decor:nth-child(2) {
  width:500px;height:500px;background:var(--c-accent);bottom: -200px;left: -150px;
}
.page-wrapper {
  display:flex;align-items:center;justify-content:center;min-height:100vh;padding: 40px;
}
.reset-card {
  width:460px;max-width:100%;
  background:var(--c-bg-card);border-radius: var(--radius-card);
  border:1px solid var(--c-border);box-shadow:var(--shadow-card);
  padding: 48px 40px;position:relative;z-index:1;
}
.card-header {
  text-align:center;margin-bottom: 32px;
}
.card-logo {
  width:48px;height:48px;border-radius: var(--radius-btn);
  background:var(--c-primary-gradient);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  margin-bottom: var(--sp-md);box-shadow:0 4px 16px rgba(29,78,216,0.3);
}
.card-title {
  font-size:var(--fs-h2);font-weight:700;color:var(--c-text-primary);margin-bottom: 4px;
}
.card-subtitle {
  font-size:12px;color:var(--c-text-tertiary);
}
.steps {
  display:flex;align-items:center;justify-content:center;gap: 0;margin-bottom: 32px;
}
.step-dot {
  width:32px;height:32px;border-radius: 50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;transition:all 300ms ease;
  background:var(--c-bg-card-alt);color:var(--c-text-tertiary);border:2px solid var(--c-border);
}
.step-dot.active {
  background:var(--c-primary);color:#fff;border-color:var(--c-primary-text);box-shadow:0 0 0 4px rgba(59,130,246,0.15);
}
.step-dot.done {
  background:var(--c-success);color:#fff;border-color:var(--c-success-text);
}
.step-dot.done::after {
  content:'✓';
}
.step-line {
  width:48px;height:2px;background:var(--c-border);transition:all 300ms ease;
}
.step-line.done {
  background:var(--c-success);
}
.step-labels {
  display:flex;justify-content:space-between;margin-bottom: 24px;padding: 0 8px;
}
.step-label {
  font-size: var(--fs-caption);color:var(--c-text-tertiary);text-align:center;flex:1;transition:all 300ms;
}
.step-label.active {
  color:var(--c-primary-light);font-weight:600;
}
.form-input.input-error {
  border-color:var(--c-error-text);box-shadow:0 0 0 3px rgba(239,68,68,0.12);
}
.form-error-msg {
  font-size:var(--fs-caption);color:var(--c-error-text);margin-top: 6px;display:flex;align-items:center;gap: 4px;
}
.form-error-msg svg {
  width:14px;height:14px;flex-shrink:0;
}
.code-row {
  display:flex;gap: var(--sp-sm);justify-content:center;margin-bottom: 8px;
}
.code-input {
  width:52px;height:56px;text-align:center;font-size:24px;font-weight:700;
  font-family:var(--font-mono);border:1px solid var(--c-border);
  border-radius: var(--radius-input);background:var(--c-bg-card-alt);
  color:var(--c-text-primary);transition:all 150ms ease;
}
.code-input:focus {
  outline:none;border-color:var(--c-primary-light);box-shadow:0 0 0 3px rgba(59,130,246,0.15);
}
.code-input.input-error {
  border-color:var(--c-error-text);
}
.code-timer {
  text-align:center;font-size:var(--fs-caption);color:var(--c-text-tertiary);margin-bottom: 8px;
}
.code-timer span {
  color:var(--c-primary-light);font-weight:600;cursor:pointer;
}
.code-timer span.disabled {
  color:var(--c-text-tertiary);cursor:not-allowed;pointer-events:none;
}
.password-result {
  background:var(--c-bg-card-alt);border:1px solid var(--c-border);
  border-radius: var(--radius-input);padding: 20px;text-align:center;margin-bottom: 16px;
}
.password-result-value {
  font-size:28px;font-weight:700;font-family:var(--font-mono);
  color:var(--c-primary-light);letter-spacing:2px;margin-bottom: 12px;
}
.copy-btn {
  display:inline-flex;align-items:center;gap: 6px;
  padding: 6px 16px;border-radius: var(--radius-btn);
  border:1px solid var(--c-border);background:transparent;
  color:var(--c-text-secondary);cursor:pointer;font-size:var(--fs-caption);font-family:inherit;
  transition:all 150ms ease;
}
.copy-btn:hover {
  background:var(--c-bg-card-hover);border-color:var(--c-primary-light);color:var(--c-primary-light);
}
.copy-btn.copied {
  background:rgba(16,185,129,0.1);border-color:var(--c-success-text);color:var(--c-success-text);
}
.alert {
  display:flex;align-items:flex-start;gap: var(--sp-sm);padding: 12px 16px;border-radius: var(--radius-input);
  font-size:12px;margin-bottom: 20px;line-height:1.5;
}
.alert svg {
  width:18px;height:18px;flex-shrink:0;margin-top: 1px;
}
.alert-warning {
  background:rgba(245,158,11,0.08);border:1px solid rgba(245,158,11,0.2);color: #b45309;
}
[data-theme="light"] .alert-warning {
  background:#FEF3C7;border-color:rgba(217,119,6,0.2);color:#92400E;
}
.alert-info {
  background:rgba(59,130,246,0.08);border:1px solid rgba(59,130,246,0.2);color:var(--c-primary-dark);
}
[data-theme="light"] .alert-info {
  background:#DBEAFE;border-color:rgba(29,78,216,0.2);color:#1E40AF;
}
.btn-row {
  display:flex;gap: 12px;
}
.spinner {
  width:18px;height:18px;border:2px solid rgba(255,255,255,0.3);border-top-color: #fff;border-radius: 50%;animation:spin 0.6s linear infinite;
}

.spinner-gray {
  width:18px;height:18px;border:2px solid rgba(148,163,184,0.3);border-top-color: var(--c-text-secondary);border-radius: 50%;animation:spin 0.6s linear infinite;
}
[data-theme="light"] .toast-error {
  background:#FEE2E2;color: #b91c1c;border-color:rgba(220,38,38,0.2);
}
[data-theme="light"] .toast-success {
  background:#D1FAE5;color: #047857;border-color:rgba(16,185,129,0.2);
}

.card-footer {
  text-align:center;margin-top: 28px;
}
.card-footer a {
  font-size:12px;color:var(--c-text-secondary);text-decoration:none;transition:color 150ms;
}
.card-footer a:hover {
  color:var(--c-primary-light);
}
.theme-float {
  position:fixed;top: 20px;right: 20px;z-index:100;
  width:38px;height:38px;border-radius: var(--radius-btn);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;border:1px solid var(--c-border);
  background:var(--c-bg-card);color:var(--c-text-secondary);
  transition:all 150ms ease;font-size:18px;
}
.theme-float:hover {
  background:var(--c-bg-card-hover);
}
.hidden {
  display:none !important;
}
@media(max-width:480px) {
.reset-card {
  padding: 32px 24px;
}
.card-title {
  font-size:var(--fs-xl);
}
.code-input {
  width:44px;height:48px;font-size:var(--fs-xl);
}
.password-result-value {
  font-size:22px;letter-spacing:1px;
}
}