:root {
  --ch12-gold: #e7c47a;
  --ch12-gold-soft: #ffe3a3;
  --ch12-pink: #f06bb5;
  --ch12-violet: #9b6cff;
  --ch12-ink: #09060d;
  --ch12-panel: rgba(20, 12, 28, 0.94);
}

.ch12-balanced-login-card {
  position: relative !important;
  width: min(680px, calc(100vw - 36px)) !important;
  max-width: 680px !important;
  min-height: auto !important;
  padding: clamp(28px, 4vw, 44px) !important;
  border: 1px solid rgba(231, 196, 122, 0.22) !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  background:
    radial-gradient(
      circle at 92% 5%,
      rgba(155, 108, 255, 0.20),
      transparent 35%
    ),
    radial-gradient(
      circle at 4% 100%,
      rgba(240, 107, 181, 0.12),
      transparent 42%
    ),
    linear-gradient(
      145deg,
      rgba(25, 14, 34, 0.97),
      rgba(11, 7, 16, 0.98)
    ) !important;
  box-shadow:
    0 32px 100px rgba(0, 0, 0, 0.58),
    0 0 70px rgba(123, 73, 185, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

.ch12-balanced-login-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 42px;
  right: 42px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--ch12-gold),
    var(--ch12-pink),
    transparent
  );
  opacity: 0.9;
}

.ch12-balanced-login-card::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  top: -110px;
  right: -80px;
  border-radius: 50%;
  background: rgba(155, 108, 255, 0.22);
  filter: blur(54px);
  pointer-events: none;
}

.ch12-balanced-login-title {
  max-width: 520px !important;
  margin: 8px 0 20px !important;
  font-size: clamp(38px, 5vw, 58px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.035em !important;
  text-wrap: balance;
  color: #fff9ed !important;
  text-shadow:
    0 0 28px rgba(231, 196, 122, 0.12);
}

.ch12-account-notice {
  border-color: rgba(231, 196, 122, 0.25) !important;
  background:
    linear-gradient(
      100deg,
      rgba(231, 196, 122, 0.10),
      rgba(155, 108, 255, 0.07)
    ) !important;
  box-shadow:
    inset 3px 0 0 rgba(231, 196, 122, 0.72) !important;
}

.ch12-provider-option {
  --provider-accent: #9b6cff;
  min-height: 54px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 13px !important;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.065),
      rgba(255, 255, 255, 0.025)
    ) !important;
  box-shadow:
    inset 3px 0 0 var(--provider-accent),
    0 8px 20px rgba(0, 0, 0, 0.12) !important;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease !important;
}

.ch12-provider-option:hover,
.ch12-provider-option:focus-visible {
  transform: translateY(-2px);
  border-color: color-mix(
    in srgb,
    var(--provider-accent) 52%,
    white 10%
  ) !important;
  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--provider-accent) 13%,
        transparent
      ),
      rgba(255, 255, 255, 0.05)
    ) !important;
  box-shadow:
    inset 3px 0 0 var(--provider-accent),
    0 12px 28px rgba(0, 0, 0, 0.25) !important;
}

.ch12-provider-option[data-provider="google"] {
  --provider-accent: #4285f4;
}

.ch12-provider-option[data-provider="apple"] {
  --provider-accent: #f3f3f3;
}

.ch12-provider-option[data-provider="facebook"] {
  --provider-accent: #1877f2;
}

.ch12-provider-option[data-provider="tiktok"] {
  --provider-accent: #ff3b78;
}

.ch12-provider-option[data-provider="zalo"] {
  --provider-accent: #0068ff;
}

.ch12-provider-option[data-provider="microsoft"] {
  --provider-accent: #7fba00;
}

.ch12-provider-option[data-provider="github"] {
  --provider-accent: #c9d1d9;
}

.ch12-provider-option[data-provider="telegram"] {
  --provider-accent: #229ed9;
}

.ch12-public-notes-link {
  border-color: rgba(240, 107, 181, 0.30) !important;
  background:
    linear-gradient(
      105deg,
      rgba(240, 107, 181, 0.13),
      rgba(155, 108, 255, 0.12)
    ) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 10px 30px rgba(88, 37, 103, 0.12) !important;
}

@media (min-width: 760px) {
  .ch12-balanced-login-card {
    padding-inline: 48px !important;
  }
}

@media (max-width: 620px) {
  .ch12-balanced-login-card {
    width: calc(100vw - 24px) !important;
    padding: 25px 20px 23px !important;
    border-radius: 21px !important;
  }

  .ch12-balanced-login-title {
    font-size: 39px !important;
  }

  .ch12-provider-option {
    min-height: 50px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ch12-provider-option {
    transition: none !important;
  }
}