/* Auth-Seiten: Setup, Login, Konto */
.auth-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: var(--sp-5);
}
.auth-card {
  width: 100%; max-width: 440px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--sh-lg); padding: var(--sp-6);
  animation: fadeUp 0.55s var(--ease) backwards;
}
.auth-logo {
  width: 54px; height: 54px; border-radius: var(--r-md); background: var(--accent);
  display: grid; place-items: center; color: #fff; margin: 0 auto var(--sp-4);
  animation: pop 0.5s var(--ease-spring) 0.1s backwards;
}
.auth-card h1 { text-align: center; font-size: 1.5rem; }
.auth-card .sub { text-align: center; color: var(--text-2); margin: 6px 0 var(--sp-5); }
.auth-card .field + .field { margin-top: var(--sp-4); }
.auth-card .btn-lg { margin-top: var(--sp-5); }
.auth-foot { text-align: center; margin-top: var(--sp-5); color: var(--text-3); font-size: 0.85rem; }

.pw-meter { height: 5px; border-radius: var(--r-full); background: var(--border);
  margin-top: 8px; overflow: hidden; }
.pw-meter > i { display: block; height: 100%; width: 0; border-radius: var(--r-full);
  transition: width 0.3s var(--ease), background 0.3s; }

.step-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px;
  background: var(--accent-soft); color: var(--accent-strong); border-radius: var(--r-full);
  font-size: 0.8rem; font-weight: 600; margin: 0 auto var(--sp-4); width: fit-content;
}
.step-badge svg { width: 15px; height: 15px; }

.field-icon { position: relative; }
.field-icon .input { padding-left: 42px; }
.field-icon > svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--text-3); pointer-events: none; }