.liquid-glass-core {
  background: radial-gradient(
      88% 72% at 18% 16%,
      rgba(214, 239, 255, 0.16) 0%,
      rgba(140, 170, 215, 0.08) 33%,
      transparent 66%
    ),
    radial-gradient(
      75% 62% at 6% 88%,
      rgba(112, 150, 220, 0.14) 0%,
      rgba(55, 96, 170, 0.06) 36%,
      transparent 72%
    ),
    linear-gradient(
      164deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(255, 255, 255, 0.02) 35%,
      rgba(255, 255, 255, 0) 62%
    );
  opacity: 0.9;
  backdrop-filter: blur(14px) saturate(112%);
}

.liquid-glass-specular {
  background: radial-gradient(
      60% 46% at 9% 10%,
      rgba(255, 255, 255, 0.24) 0%,
      rgba(255, 255, 255, 0.08) 24%,
      rgba(255, 255, 255, 0) 62%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.09) 0%,
      rgba(255, 255, 255, 0.03) 16%,
      rgba(255, 255, 255, 0) 45%
    );
  mix-blend-mode: screen;
  opacity: 0.55;
  pointer-events: none;
}

.liquid-glass-shadow {
  background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.04) 0%,
      rgba(0, 0, 0, 0.15) 52%,
      rgba(0, 0, 0, 0.23) 100%
    ),
    radial-gradient(
      140% 120% at -16% 50%,
      transparent 40%,
      rgba(0, 0, 0, 0.32) 100%
    );
  pointer-events: none;
}

.liquid-glass-noise {
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.05) 0.45px,
    transparent 0.45px
  );
  background-size: 3px 3px;
  opacity: 0.1;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.auth-strip-content {
  padding: 0;
}

.auth-dark-theme {
  /* Force dark mode colors regardless of system theme */
  --text-primary: #f8fafc;
  --text-secondary: #cfd7e3;
  --text-muted: #9aa6b8;
  --bg-input: #0f141f;
  --bg-input-hover: #141b28;
  --border-color: rgba(148, 163, 184, 0.28);
  /* Auth panel is always dark, so it pins the dark-mode brand accent. */
  --auth-accent: #03ec5a;
  --auth-accent-soft: rgba(3, 236, 90, 0.16);
  --border-focus: var(--auth-accent);
}

.auth-dark-theme,
.auth-dark-theme * {
  color-scheme: dark;
}

/* Override text colors */
.auth-dark-theme .text-text-05,
.auth-dark-theme [class*="text-text-"] {
  color: var(--text-primary) !important;
}

.auth-dark-theme .text-text-03 {
  color: var(--text-secondary) !important;
}

/* Override form labels */
.auth-dark-theme label {
  color: #dce4ef !important;
  font-size: 11px !important;
  letter-spacing: 0.06em;
}

/* Override input wrapper styling (.input-normal class on wrapper div) */
.auth-dark-theme .input-normal,
.auth-dark-theme .input-error {
  background-color: var(--bg-input) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.auth-dark-theme .input-normal:hover,
.auth-dark-theme .input-error:hover {
  background-color: var(--bg-input-hover) !important;
  border-color: rgba(198, 208, 223, 0.38) !important;
}

/* Focus state on wrapper */
.auth-dark-theme .input-normal:focus-within,
.auth-dark-theme .input-error:focus-within {
  border-color: var(--border-focus) !important;
  box-shadow:
    0 0 0 3px var(--auth-accent-soft),
    0 0 0 1px rgba(0, 0, 0, 0.25) inset !important;
}

/* Inner input element styling */
.auth-dark-theme input,
.auth-dark-theme input[type="text"],
.auth-dark-theme input[type="email"],
.auth-dark-theme input[type="password"] {
  background-color: transparent !important;
  border: none !important;
  color: var(--text-primary) !important;
  font-size: 14px !important;
  outline: none !important;
  box-shadow: none !important;
}

.auth-dark-theme input::placeholder {
  color: #7f8896 !important;
}

.auth-dark-theme input:focus,
.auth-dark-theme input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Override button styling for secondary buttons (Google button) */
.auth-dark-theme a[class*="bg-background-tint"],
.auth-dark-theme button[class*="bg-background-tint"],
.auth-dark-theme a[class*="secondary"],
.auth-dark-theme button[class*="secondary"] {
  background-color: #f6f8fb !important;
  border-color: #d8e0eb !important;
  color: #050505 !important;
}

.auth-dark-theme a[class*="bg-background-tint"]:hover,
.auth-dark-theme button[class*="bg-background-tint"]:hover,
.auth-dark-theme a[class*="secondary"]:hover,
.auth-dark-theme button[class*="secondary"]:hover {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: #050505 !important;
}

/* Ensure ALL text inside secondary buttons is black */
.auth-dark-theme a[class*="bg-background-tint"] *,
.auth-dark-theme a[class*="bg-background-tint"] span,
.auth-dark-theme a[class*="bg-background-tint"] p,
.auth-dark-theme button[class*="bg-background-tint"] *,
.auth-dark-theme button[class*="bg-background-tint"] span,
.auth-dark-theme button[class*="bg-background-tint"] p,
.auth-dark-theme a[class*="secondary"] *,
.auth-dark-theme button[class*="secondary"] * {
  color: #000000 !important;
}

/* Override text-text-03 class specifically used in buttons */
.auth-dark-theme a[class*="bg-background-tint"] [class*="text-text-"],
.auth-dark-theme button[class*="bg-background-tint"] [class*="text-text-"] {
  color: #000000 !important;
}

/* Divider styling */
.auth-dark-theme [class*="border-t"] {
  border-color: #2a2a2c !important;
}

/* Muted text */
.auth-dark-theme [class*="mainUiMuted"],
.auth-dark-theme [class*="text03"] {
  color: var(--text-muted) !important;
}

/* Form field wrapper backgrounds */
.auth-dark-theme [class*="FormField"],
.auth-dark-theme [class*="form-field"] {
  background: transparent !important;
}

/* Message/hint text */
.auth-dark-theme [class*="Message"],
.auth-dark-theme [class*="message"] {
  color: var(--text-muted) !important;
}

/* Error states */
.auth-dark-theme [class*="error"] {
  color: #ef4444 !important;
}

/* Link colors. Button-styled anchors (.btn, e.g. "Sign in with Google") sit on
   a light pill background, so the light link color would be unreadable there —
   they keep their own (black) text color. */
.auth-dark-theme a:not([class*="secondary"]):not(.btn) {
  color: #dce4ef !important;
}

.auth-dark-theme a:not([class*="secondary"]):not(.btn):hover {
  color: var(--auth-accent) !important;
}

/* Primary button (Sign In) - disabled state: dark gray */
.auth-dark-theme button[type="submit"]:disabled,
.auth-dark-theme button[type="submit"][disabled] {
  background: #202633 !important;
  color: #778293 !important;
  cursor: not-allowed;
  box-shadow: none !important;
}

.auth-dark-theme button[type="submit"]:disabled *,
.auth-dark-theme button[type="submit"][disabled] * {
  color: #778293 !important;
  stroke: #778293 !important;
}

/* Primary button (Sign In) - enabled state: brand accent */
.auth-dark-theme button[type="submit"]:not(:disabled) {
  background: var(--auth-accent) !important;
  color: #000000 !important;
  box-shadow: none !important;
  transition: filter 0.15s ease;
}

.auth-dark-theme button[type="submit"]:not(:disabled):hover {
  filter: brightness(0.92);
}

.auth-dark-theme button[type="submit"]:not(:disabled):active {
  filter: brightness(0.85);
}

.auth-dark-theme button[type="submit"]:not(:disabled) *,
.auth-dark-theme button[type="submit"]:not(:disabled) span {
  color: #000000 !important;
  stroke: #000000 !important;
}

/* Password visibility toggle (eye icon) - transparent background */
.auth-dark-theme .input-normal button,
.auth-dark-theme .input-error button,
.auth-dark-theme .input-normal button[type="button"],
.auth-dark-theme .input-error button[type="button"] {
  background-color: transparent !important;
  background: transparent !important;
}

.auth-dark-theme .input-normal button:hover,
.auth-dark-theme .input-error button:hover {
  background-color: transparent !important;
  background: transparent !important;
}