body { margin: 0; font-family: "Segoe UI", sans-serif; background: linear-gradient(120deg, #3f87ff, #65c7f7); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.auth-container { width: 100%; max-width: 420px; padding: 24px; }
.auth-card { background: rgba(255, 255, 255, 0.95); border-radius: 16px; padding: 32px; box-shadow: 0 20px 60px rgba(31, 36, 48, 0.25); backdrop-filter: blur(6px); display: flex; flex-direction: column; gap: 16px; }
.auth-card h1 { margin: 0; font-size: 26px; color: #1f2430; }
.auth-card label { display: flex; flex-direction: column; gap: 8px; font-weight: 600; color: #1f2430; }
.auth-card input { height: 44px; border-radius: 10px; border: 1px solid rgba(31, 36, 48, 0.1); padding: 0 14px; font-size: 16px; transition: border 0.2s ease, box-shadow 0.2s ease; }
.auth-card input:focus { border-color: #3f87ff; outline: none; box-shadow: 0 0 0 3px rgba(63, 135, 255, 0.2); }
.auth-card button { margin-top: 8px; height: 48px; border: none; border-radius: 12px; background: linear-gradient(135deg, #3f87ff, #65c7f7); color: #fff; font-weight: 600; font-size: 18px; cursor: pointer; box-shadow: 0 12px 24px rgba(63, 135, 255, 0.35); transition: transform 0.1s ease, box-shadow 0.2s ease; }
.auth-card button:hover { transform: translateY(-1px); box-shadow: 0 16px 40px rgba(63, 135, 255, 0.4); }
.auth-card .subtitle { margin: -8px 0 0; color: rgba(31, 36, 48, 0.6); font-size: 14px; }
.form-error {
  margin: 0;
  padding: 6px 0;
  color: #ff6b7a;
  font-size: 14px;
  text-align: center;
}

.hidden {
  display: none !important;
}