/* module: auth — every class is prefixed "auth-" */
.auth-card {
  position: relative; width: min(440px, 100%); padding: 34px 30px 28px;
  background: var(--surface); background-image: var(--card-shine);
  border: 1px solid var(--line-2); border-radius: 26px; box-shadow: var(--shadow);
  animation: auth-rise .5s var(--ease) both;
}
.auth-card::before {
  content: ""; position: absolute; top: -1px; left: 12%; right: 12%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent); opacity: .8;
}
@keyframes auth-rise { from { opacity: 0; transform: translateY(16px) scale(.98); } }
.auth-logo { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 22px; }
.auth-logo .brand-name { font-size: 24px; }
.auth-card h1 { font-size: 24px; font-weight: 850; text-align: center; letter-spacing: -.02em; }
.auth-sub { text-align: center; margin: 6px 0 22px; font-size: 14px; }
.auth-card form { display: flex; flex-direction: column; gap: 16px; }
.auth-card h1 + .banner { margin-top: 16px; }
.auth-link { color: var(--brand); font-weight: 700; font-size: 13.5px; }
.auth-link:hover { text-decoration: underline; }
.auth-alt { text-align: center; margin-top: 22px; color: var(--muted); font-size: 14px; }
.auth-alt .auth-link { font-size: 14px; }
.auth-error { margin: 0; }
.auth-error:not([hidden]) { animation: auth-shake .38s; }
@keyframes auth-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

.auth-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 2px; }
.auth-meter i { height: 4px; border-radius: 4px; background: var(--surface-3); transition: background-color .25s; }
.auth-meter[data-s="1"] i:nth-child(-n+1) { background: var(--danger); }
.auth-meter[data-s="2"] i:nth-child(-n+2) { background: var(--warn); }
.auth-meter[data-s="3"] i:nth-child(-n+3) { background: #8bd450; }
.auth-meter[data-s="4"] i { background: var(--ok); }

@media (max-width: 480px) {
  .auth-card { padding: 28px 20px 22px; border-radius: 22px; }
}