:root{
  --ats-primary: var(--ats-primary, #039426);
  --ats-primary-hover: var(--ats-primary-hover, #027a1f);

  --auth-radius: 22px;
  --auth-border: rgba(0,0,0,.10);
  --auth-shadow: 0 18px 55px rgba(0,0,0,.14);
}

/* Base */
body{ margin:0; }

/* ===== SAAS AUTH WRAPPER ===== */
.saas-auth{
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem 0;
  overflow: hidden;
}

/* Background: SaaS gradient + subtle grid */
.saas-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.saas-bg .grid{
  position:absolute;
  inset:-2px;
  background-image:
    linear-gradient(to right, rgba(0,0,0,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .22;
  mask-image: radial-gradient(circle at 50% 35%, black 0%, transparent 70%);
}

.blob{
  position:absolute;
  width: 780px;
  height: 780px;
  border-radius: 999px;
  filter: blur(60px);
  opacity: .35;
}
.blob-1{
  left: -260px;
  top: -240px;
  background: color-mix(in srgb, var(--ats-primary) 65%, transparent);
}
.blob-2{
  right: -280px;
  bottom: -280px;
  background: rgba(26,115,232,.35);
}

html[data-bs-theme="dark"] .saas-bg .grid{
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  opacity: .18;
}

html[data-bs-theme="dark"] .blob-1{ opacity: .28; }
html[data-bs-theme="dark"] .blob-2{ opacity: .22; }

/* Foreground content */
.saas-auth .container,
.saas-auth .saas-auth-row{
  position: relative;
  z-index: 1;
}

/* ===== BRAND PANEL ===== */
.saas-brand-card{
  height: 100%;
  border-radius: var(--auth-radius);
  padding: 2rem;
  border: 1px solid var(--auth-border);
  box-shadow: var(--auth-shadow);

  background:
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.70));
  backdrop-filter: blur(10px);
}

html[data-bs-theme="dark"] .saas-brand-card{
  border-color: var(--bs-border-color);
  background:
    linear-gradient(180deg, rgba(20,20,20,.72), rgba(20,20,20,.55));
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
}

.brand-top{
  display:flex;
  align-items:center;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.brand-mark{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: var(--ats-primary);
  color:#fff;
  box-shadow: 0 12px 25px rgba(3,148,38,.25);
}
.brand-mark i{ font-size: 1.6rem; }

.brand-title{
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
}
.brand-subtitle{
  color: var(--bs-secondary-color);
  margin-top: .25rem;
}

.brand-headline{
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 .5rem;
}
.brand-copy{
  color: var(--bs-secondary-color);
  margin: 0 0 1.25rem;
}

.brand-pills{
  display:flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap: .45rem;
  padding: .45rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.65);
  font-weight: 600;
  font-size: .875rem;
  color: var(--bs-body-color);
}
html[data-bs-theme="dark"] .pill{
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}

.brand-footer{
  margin-top: 1.75rem;
  color: var(--bs-secondary-color);
}

/* ===== FORM CARD ===== */
.saas-form-card{
  height: 100%;
  border-radius: var(--auth-radius);
  padding: 2rem;
  border: 1px solid var(--auth-border);
  box-shadow: var(--auth-shadow);

  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
}

html[data-bs-theme="dark"] .saas-form-card{
  border-color: var(--bs-border-color);
  background: rgba(20,20,20,.68);
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
}

.form-header{
  margin-bottom: 1.25rem;
}
.form-title{
  margin:0;
  font-size: 1.6rem;
  font-weight: 800;
}
.form-subtitle{
  color: var(--bs-secondary-color);
}

/* Inputs w/ icons */
.input-icon{ position:relative; }
.input-icon .left-icon{
  position:absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bs-secondary-color);
  font-size: 1.1rem;
  pointer-events:none;
}
.saas-input{
  padding-left: 2.5rem;
  padding-right: 2.9rem;
  border-radius: 14px;
}

html[data-bs-theme="dark"] .saas-input{
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

.saas-input:focus{
  border-color: var(--ats-primary);
  box-shadow: 0 0 0 .22rem rgba(3,148,38,.22);
}

/* Password toggle */
.password-toggle{
  position:absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border:0;
  background: transparent;
  color: var(--bs-secondary-color);
  padding: .25rem .5rem;
  border-radius: .6rem;
  cursor:pointer;
}
.password-toggle:hover{
  color: var(--bs-body-color);
  background: rgba(0,0,0,.06);
}
html[data-bs-theme="dark"] .password-toggle:hover{
  background: rgba(255,255,255,.08);
}

/* Links */
.saas-link{
  color: var(--ats-primary);
  font-weight: 700;
  text-decoration: none;
}
.saas-link:hover{
  text-decoration: underline;
  color: var(--ats-primary-hover);
}

/* Button */
.saas-btn{
  background: var(--ats-primary);
  border: 1px solid var(--ats-primary);
  color:#fff;
  font-weight: 800;
  padding: .85rem 1rem;
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(3,148,38,.18);
}
.saas-btn:hover{
  background: var(--ats-primary-hover);
  border-color: var(--ats-primary-hover);
  color:#fff;
}

/* Checkbox */
.form-check-input:checked{
  background-color: var(--ats-primary);
  border-color: var(--ats-primary);
}

/* Alerts */
.saas-alert{
  border-radius: 14px;
}
html[data-bs-theme="dark"] .alert-danger{
  background: rgba(220,53,69,.18);
  border-color: rgba(220,53,69,.35);
  color: var(--bs-body-color);
}

/* Brand shimmer (reuse your existing idea) */
.ats-brand-text.ats-brand-animated{
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text;
  -webkit-background-clip: text;

  --brand: var(--ats-brand-color, var(--ats-primary));

  background-image: linear-gradient(
    90deg,
    var(--brand) 0%,
    rgba(0,0,0,.65) 22%,
    var(--brand) 45%,
    rgba(0,0,0,.65) 68%,
    var(--brand) 100%
  );
  background-size: 220% 100%;
  background-position: 0% 50%;
  animation: atsBrandSeamless 5s linear infinite;
}
html[data-bs-theme="dark"] .ats-brand-text.ats-brand-animated{
  background-image: linear-gradient(
    90deg,
    color-mix(in srgb, var(--brand) 90%, transparent) 0%,
    color-mix(in srgb, var(--brand) 65%, transparent) 25%,
    var(--brand) 50%,
    color-mix(in srgb, var(--brand) 65%, transparent) 75%,
    color-mix(in srgb, var(--brand) 90%, transparent) 100%
  );
  filter: saturate(1.2) brightness(1.12);
}
@keyframes atsBrandSeamless{
  from { background-position: 0% 50%; }
  to   { background-position: 220% 50%; }
}

.form-footnote{
  margin-top: 1rem;
  text-align: center;
}

/* Responsive tweaks */
@media (max-width: 991.98px){
  .saas-brand-card{ padding: 1.5rem; }
  .saas-form-card{ padding: 1.5rem; }
}
@media (max-width: 576px){
  .saas-auth{ padding: 1rem 0; }
  .saas-brand-card, .saas-form-card{ border-radius: 18px; }
  .saas-input, .saas-btn{ min-height: 44px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ats-brand-text.ats-brand-animated{ animation: none !important; }
}
.form-check-input:checked[type="checkbox"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23039426' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M6.173 12.727L2.12 8.674l1.414-1.414 2.64 2.64 6.293-6.293 1.414 1.414-7.707 7.706z'/%3e%3c/svg%3e");
}

/* Bootstrap 5.3 login layout */
.auth-login{
  overflow-x: hidden;
}

.auth-login .saas-form-card,
.auth-login .saas-brand-card{
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.auth-login .saas-form-card{
  position: relative;
}

.auth-login .auth-theme-toggle{
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.auth-login .auth-theme-icon,
.auth-login .auth-password-icon{
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.auth-login .auth-theme-icon svg,
.auth-login .auth-password-icon svg{
  width: 1rem;
  height: 1rem;
}

.auth-login .auth-theme-icon-moon{
  display: none;
}

html[data-bs-theme="dark"] .auth-login .auth-theme-icon-sun{
  display: none;
}

html[data-bs-theme="dark"] .auth-login .auth-theme-icon-moon{
  display: inline-flex;
}

.auth-login .form-control,
.auth-login .btn{
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.auth-login .form-control:focus,
.auth-login .btn:focus-visible,
.auth-login .password-toggle:focus-visible,
.auth-login .form-check-input:focus{
  border-color: rgba(var(--bs-primary-rgb), .65);
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
}

.auth-login .mobile-brand{
  text-align: center;
}

.auth-login .mobile-brand .brand-title{
  font-size: 1.55rem;
  line-height: 1.2;
}

.auth-login .mobile-brand .brand-subtitle{
  font-size: 1rem;
}

@media (max-width: 767.98px){
  .auth-login .form-title{
    font-size: 1.2rem;
  }
}

@media (max-width: 575.98px){
  .auth-login .saas-form-card{
    padding: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce){
  .auth-login .saas-form-card,
  .auth-login .saas-brand-card,
  .auth-login .form-control,
  .auth-login .btn{
    transition: none;
  }
}