/**
 * auth.css
 * Login/Forgot-PIN screen — depends on tokens.css and states.css
 * (field validation classes, .hulk-field-input) from Phase 3.
 * Polish pass: layered gradient canvas, floating brand chip, roomy
 * card, accent-aware controls.
 */

.hulk-auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--hulk-space-6);
  background:
    radial-gradient(900px 520px at 12% 8%, color-mix(in srgb, var(--hulk-color-flow) 16%, transparent), transparent 60%),
    radial-gradient(820px 480px at 92% 96%, color-mix(in srgb, var(--hulk-accent-superadmin) 18%, transparent), transparent 60%),
    var(--hulk-bg);
  position: relative;
  overflow: hidden;
}

/* Soft decorative orbs */
.hulk-auth-page::before,
.hulk-auth-page::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  pointer-events: none;
}

.hulk-auth-page::before {
  width: 360px;
  height: 360px;
  background: var(--hulk-gradient-flow);
  top: -120px;
  right: -80px;
}

.hulk-auth-page::after {
  width: 300px;
  height: 300px;
  background: var(--hulk-gradient-close);
  bottom: -110px;
  left: -60px;
}

.hulk-auth-card {
  width: 100%;
  max-width: 400px;
  padding: var(--hulk-space-8) var(--hulk-space-7);
  position: relative;
  z-index: 1;
}

.hulk-auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hulk-space-3);
  font-size: var(--hulk-font-size-2xl);
  font-weight: var(--hulk-font-weight-extrabold);
  letter-spacing: var(--hulk-letter-spacing-tight);
  margin-bottom: var(--hulk-space-6);
  text-align: center;
}

.hulk-auth-brand-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: var(--hulk-radius-lg);
  background: var(--hulk-surface);
  border: 1px solid var(--hulk-border-faint);
  padding: 6px;
  box-shadow: 0 12px 28px var(--hulk-tint-flow);
}

.hulk-auth-brand-mark {
  width: 56px;
  height: 56px;
  border-radius: var(--hulk-radius-lg);
  background: var(--hulk-gradient-flow);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 26px;
  box-shadow: 0 12px 28px var(--hulk-tint-flow);
}

.hulk-field-label {
  display: block;
  font-size: var(--hulk-font-size-sm);
  font-weight: var(--hulk-font-weight-semibold);
  color: var(--hulk-text-muted);
  margin-bottom: 7px;
}

.hulk-field {
  margin-bottom: var(--hulk-space-4);
}

.hulk-field-input-pin {
  letter-spacing: 8px;
  text-align: center;
  font-size: 20px;
}

.hulk-auth-submit {
  width: 100%;
  border: none;
  border-radius: var(--hulk-radius-md);
  padding: 13px;
  color: #fff;
  font-weight: 600;
  font-size: var(--hulk-font-size-body);
  background: var(--hulk-gradient-flow);
  cursor: pointer;
  box-shadow: 0 10px 24px var(--hulk-tint-flow);
  transition: filter var(--hulk-motion-fast), transform var(--hulk-motion-fast);
}

.hulk-auth-submit:hover {
  filter: brightness(1.05);
}

.hulk-auth-submit:active {
  transform: translateY(1px);
}

.hulk-auth-submit:disabled {
  opacity: 0.6;
  cursor: default;
  box-shadow: none;
}

.hulk-auth-forgot-link {
  display: block;
  width: 100%;
  margin-top: var(--hulk-space-4);
  border: none;
  background: none;
  color: var(--hulk-color-flow);
  font-size: var(--hulk-font-size-sm);
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}

.hulk-auth-forgot-link:hover {
  text-decoration: underline;
}

.hulk-auth-forgot-panel {
  display: none;
  margin-top: var(--hulk-space-5);
  padding-top: var(--hulk-space-5);
  border-top: 1px solid var(--hulk-border);
}

.hulk-auth-forgot-panel.is-open {
  display: block;
}

.hulk-auth-forgot-copy {
  font-size: var(--hulk-font-size-sm);
  color: var(--hulk-text-muted);
  margin: 0 0 var(--hulk-space-3);
}