:is(
  .account-section .account-form > button.button-gold,
  .account-section .account-card > a.button.button-gold[href$="/login"],
  .auth-shell form > button.button-primary,
  .site-header .nav-actions > a.button.button-gold[href$="/register"],
  .home-page a.home-btn[href$="/login"],
  .home-page a.home-btn[href$="/register"]
) {
  color: #fff;
  border-color: rgba(255,255,255,.26);
  background-color: #315f8e;
  background-image:
    linear-gradient(108deg, transparent 43%, rgba(255,255,255,.025) 47%, rgba(255,255,255,.075) 50%, rgba(255,255,255,.025) 53%, transparent 57%),
    linear-gradient(rgba(4,16,31,.46), rgba(4,16,31,.46)),
    linear-gradient(112deg, #55C8C5 0%, #9C8FE8 52%, #8B5CF6 100%);
  background-repeat: no-repeat;
  background-size: 250% 100%, 100% 100%, 200% 100%;
  background-position: 0% 50%, 50% 50%, 0% 50%;
  animation: auth-cta-gradient-flow 7s ease-in-out infinite alternate;
  box-shadow: 0 0 18px rgba(85,200,197,.2), 0 8px 22px rgba(139,92,246,.2), inset 0 1px 0 rgba(255,255,255,.2);
  text-shadow: 0 1px 2px rgba(4,16,31,.55);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

:is(
  .account-section .account-form > button.button-gold,
  .account-section .account-card > a.button.button-gold[href$="/login"],
  .auth-shell form > button.button-primary,
  .site-header .nav-actions > a.button.button-gold[href$="/register"],
  .home-page a.home-btn[href$="/login"],
  .home-page a.home-btn[href$="/register"]
):hover {
  color: #fff;
  filter: brightness(1.08);
  animation-duration: 4.5s;
  box-shadow: 0 0 23px rgba(85,200,197,.32), 0 10px 28px rgba(139,92,246,.3), inset 0 1px 0 rgba(255,255,255,.28);
}

:is(
  .account-section .account-form > button.button-gold,
  .account-section .account-card > a.button.button-gold[href$="/login"],
  .auth-shell form > button.button-primary,
  .site-header .nav-actions > a.button.button-gold[href$="/register"],
  .home-page a.home-btn[href$="/login"],
  .home-page a.home-btn[href$="/register"]
):active {
  color: #fff;
  filter: brightness(.96);
  transform: translateY(1px) scale(.985);
}

:is(
  .account-section .account-form > button.button-gold,
  .account-section .account-card > a.button.button-gold[href$="/login"],
  .auth-shell form > button.button-primary,
  .site-header .nav-actions > a.button.button-gold[href$="/register"],
  .home-page a.home-btn[href$="/login"],
  .home-page a.home-btn[href$="/register"]
):focus-visible {
  outline: 2px solid #9be5e2;
  outline-offset: 3px;
}

:is(
  .account-section .account-form > button.button-gold,
  .account-section .account-card > a.button.button-gold[href$="/login"],
  .auth-shell form > button.button-primary,
  .site-header .nav-actions > a.button.button-gold[href$="/register"],
  .home-page a.home-btn[href$="/login"],
  .home-page a.home-btn[href$="/register"]
):disabled {
  color: #fff;
  animation: none;
  opacity: .62;
  cursor: not-allowed;
}

@keyframes auth-cta-gradient-flow {
  from { background-position: 0% 50%, 50% 50%, 0% 50%; }
  to { background-position: 100% 50%, 50% 50%, 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  :is(
    .account-section .account-form > button.button-gold,
    .account-section .account-card > a.button.button-gold[href$="/login"],
    .auth-shell form > button.button-primary,
    .site-header .nav-actions > a.button.button-gold[href$="/register"],
    .home-page a.home-btn[href$="/login"],
    .home-page a.home-btn[href$="/register"]
  ) {
    animation: none;
    background-position: 50% 50%, 50% 50%, 50% 50%;
  }
}