.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: calc(100dvh - 80px);
}

.auth-story {
  background: var(--fs-inverse);
  color: var(--fs-on-inverse);
  padding: 40px clamp(30px, 5vw, 86px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.auth-story::before {
  content: "";
  position: absolute;
  width: 550px;
  height: 550px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  right: -280px;
  bottom: -240px;
  box-shadow: 0 0 0 55px rgba(255, 255, 255, 0.025), 0 0 0 110px rgba(255, 255, 255, 0.018);
}

.auth-story-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.6px;
  position: relative;
}
.auth-story-brand span {
  width: 30px;
  height: 30px;
}
.auth-story-brand svg {
  width: 100%;
  height: 100%;
}

.auth-story-main {
  padding: 50px 0;
  max-width: 450px;
  position: relative;
}

.auth-kicker {
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.5);
}

.auth-story h2 {
  font: 600 clamp(36px, 4.4vw, 68px)/1.03 var(--fs-font-display);
  letter-spacing: -2.5px;
  margin: 20px 0;
}

.auth-story-main > p {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.55);
}

.auth-finance-card {
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 18px;
  padding: 24px;
  margin-top: 36px;
  background: rgba(255, 255, 255, 0.04);
  max-width: 390px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.12);
}
.auth-finance-card > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}
.auth-finance-card strong {
  display: block;
  font: 500 34px/1.2 var(--fs-font-display);
  letter-spacing: -1px;
  margin: 20px 0 12px;
}
.auth-finance-card strong small {
  font-size: 22px;
  color: rgba(255, 255, 255, 0.5);
}
.auth-finance-card svg {
  width: 100%;
  height: auto;
}
.auth-finance-card footer {
  display: flex;
  gap: 32px;
  margin-top: 20px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
}
.auth-finance-card footer b {
  display: block;
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  font-weight: 500;
  margin-top: 6px;
}

.auth-story-footer {
  position: relative;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

.auth-form-panel {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 56px 40px;
  background: var(--fs-bg);
}

.auth-form-wrap {
  width: 100%;
  max-width: 365px;
  min-width: 0;
}

.auth-form-wrap h1 {
  font: 600 clamp(32px, 3vw, 43px)/1.12 var(--fs-font-display);
  letter-spacing: -1.8px;
  margin: 14px 0;
}

.auth-form-wrap h1 > span {
  color: var(--fs-fg-3);
}

.auth-subtitle {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 28px;
}

.auth-mobile-brand {
  display: none;
}

.auth-field {
  margin: 18px 0;
}

.auth-field label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 8px;
}

.auth-input-wrap {
  position: relative;
}

.auth-field input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--fs-line-2);
  background: var(--fs-bg-soft);
  color: var(--fs-fg);
  border-radius: 12px;
  padding: 15px 16px;
  font: 14px var(--fs-font-text);
  min-height: 50px;
  outline: none;
}

.auth-field input[type=password], .auth-field input[name=password] {
  padding-right: 54px;
}

.auth-field input:focus {
  border-color: var(--fs-fg);
  box-shadow: 0 0 0 3px var(--fs-bg-soft);
}

.auth-password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px;
  border: 0;
  background: none;
  color: var(--fs-fg-2);
  cursor: pointer;
  border-radius: 8px;
  display: flex;
}

.auth-password-toggle:focus-visible {
  outline: 2px solid var(--fs-fg);
}

.auth-field .errorlist {
  padding: 0;
  list-style: none;
  color: var(--fs-expense);
  font-size: 11px;
  line-height: 1.5;
  margin: 7px 0;
}

.auth-forgot {
  text-align: right;
  font-size: 11px;
  margin: 0 0 22px;
}

.auth-form-panel a {
  color: var(--fs-fg);
  text-decoration: none;
}

.auth-form-panel a:hover {
  text-decoration: underline;
}

.auth-submit {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 50px;
  box-sizing: border-box;
}

.auth-demo-notice {
  font-size: 10px;
  line-height: 1.6;
  color: var(--fs-fg-3);
  margin: 12px 0 0;
}

.auth-switch {
  font-size: 12px;
  color: var(--fs-fg-2);
  margin-top: 28px;
  text-align: center;
}

.auth-switch a {
  font-weight: 600;
  margin-left: 3px;
}

.auth-demo-link {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--fs-line);
  text-align: center;
  font-size: 12px;
}

.auth-feedback:not(:empty), .auth-network-error {
  font-size: 12px;
  color: var(--fs-expense);
  line-height: 1.5;
}

.auth-recovery-result {
  border: 1px solid var(--fs-line-2);
  background: var(--fs-bg-soft);
  border-radius: 14px;
  padding: 20px;
  font-size: 13px;
  line-height: 1.6;
}

.auth-recovery-result p {
  color: var(--fs-fg-2);
}

@media (max-width: 760px) {
  .auth-layout {
    grid-template-columns: 1fr;
    min-height: calc(100dvh - 70px);
  }
  .auth-story {
    display: none;
  }
  .auth-form-panel {
    padding: 40px 24px 60px;
    align-items: flex-start;
  }
  .auth-form-wrap {
    max-width: 400px;
  }
  .auth-mobile-brand {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    background: var(--fs-inverse);
    color: var(--fs-on-inverse) !important;
    border-radius: 15px;
    margin-bottom: 30px;
  }
  .auth-mobile-brand svg {
    width: 24px;
    height: 24px;
  }
  .auth-form-wrap h1 {
    font-size: 37px;
  }
  .auth-subtitle {
    margin-bottom: 25px;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .auth-form-wrap {
    animation: auth-appear 0.45s ease both;
  }
  @keyframes auth-appear {
    from {
      transform: translateY(10px);
    }
    to {
      transform: translateY(0);
    }
  }
}

.fs-auth-clean .auth-layout{min-height:100dvh}
.auth-password-toggle svg{width:20px;height:20px;flex:none}
.auth-password-toggle .auth-eye-off{display:none}
.auth-password-toggle[aria-pressed=true] .auth-eye{display:none}
.auth-password-toggle[aria-pressed=true] .auth-eye-off{display:block}
.auth-field .auth-input-wrap:has([data-toggle-password]) input{padding-right:54px}
.auth-field-hint{font-size:11px;line-height:1.5;color:var(--fs-fg-3);margin:7px 0}
.auth-field-error{font-size:12px;line-height:1.5;color:var(--fs-expense);margin:7px 0}
.auth-field input[aria-invalid=true]{border-color:var(--fs-expense)}

/* Approved auth layout: solid cover, original SVG wordmark, fixed form section. */
.fs-auth-clean .auth-layout{grid-template-columns:minmax(0,1fr) 480px}
.fs-auth-clean .auth-story::before{content:none}
.fs-auth-clean .auth-story{padding:40px;justify-content:flex-start}
.auth-story-logo{display:block;width:140px;line-height:0}
.auth-story-logo img{display:block;width:140px;height:auto}
.fs-auth-clean .auth-form-panel{box-sizing:border-box;width:480px;padding:48px 40px}
.fs-auth-clean .auth-form-wrap{width:100%;max-width:480px}
.fs-auth-clean .auth-form-wrap h1{margin:0 0 28px}
@media(max-width:760px){
 .fs-auth-clean .auth-layout{grid-template-columns:minmax(0,1fr)}
 .fs-auth-clean .auth-form-panel{width:100%;padding:40px 24px 60px}
 .fs-auth-clean .auth-mobile-brand{display:block;width:140px;height:auto;background:none;border-radius:0;margin-bottom:40px}
 .auth-mobile-brand img{display:block;width:140px;height:auto}
}

/* Quiet headings, centred actions and spacing above field feedback. */
.fs-auth-clean .auth-submit{justify-content:center;text-align:center}
.fs-auth-clean .auth-form-wrap h1{font-size:28px;line-height:1.2;letter-spacing:-.7px}
.fs-auth-clean .auth-field .auth-field-hint,
.fs-auth-clean .auth-field .auth-field-error,
.fs-auth-clean .auth-field .errorlist{margin:10px 0 0}

/* Single centred auth column, without a cover or outer panel. */
.fs-auth-clean .auth-layout{display:flex;align-items:center;justify-content:center;min-height:100dvh;box-sizing:border-box;padding:40px 24px}
.fs-auth-clean .auth-form-panel{display:block;width:395px;max-width:100%;padding:0;background:none}
.fs-auth-clean .auth-form-wrap{width:100%;max-width:395px;animation:none}
.auth-centered-brand{display:block;width:140px;line-height:0;margin-bottom:32px}
.auth-centered-brand img{display:block;width:140px;height:auto}
.fs-auth-clean .auth-form-wrap h1{margin:0 0 28px}
@media(max-width:760px){
 .fs-auth-clean .auth-layout{display:flex;padding:32px 24px}
 .fs-auth-clean .auth-form-panel{width:395px;max-width:100%;padding:0}
}

/* Tighter gaps around password recovery. */
.fs-auth-clean .auth-field:has(+ .auth-forgot){margin-bottom:10px}
.fs-auth-clean .auth-form-wrap h1:has(+ .auth-subtitle){margin-bottom:10px}

.fs-auth-clean .auth-form-wrap:has([data-recovery-sent])>.auth-subtitle{display:none}
.fs-auth-clean .auth-recovery-info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}

.fs-auth-clean .auth-back-link{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.fs-auth-clean .auth-back-link svg{flex:none}

/* Phone inputs remain readable without triggering Safari focus zoom. */
@media screen and (max-width:760px){
 .fs-auth-clean .auth-layout{padding:24px 20px max(24px,env(safe-area-inset-bottom));min-height:100svh}
 .fs-auth-clean .auth-field :is(input,select,textarea){font-size:16px}
 .fs-auth-clean .auth-password-toggle{width:44px;height:44px;right:4px;align-items:center;justify-content:center}
 .fs-auth-clean .auth-submit,.fs-auth-clean .auth-switch a{min-height:44px}
 .fs-auth-clean .auth-switch a{display:inline-flex;align-items:center;justify-content:center}
}

/* Google is the primary sign-in choice; email remains available below. */
.fs-auth-clean .auth-google-form{margin:0}
.fs-auth-clean .auth-google-button{box-sizing:border-box;display:flex;width:100%;min-height:48px;align-items:center;justify-content:center;gap:10px;padding:12px;border:1px solid #747775;border-radius:12px;background:#fff;color:#1f1f1f;font-family:"Google Sans",Roboto,Arial,sans-serif;font-size:14px;font-weight:500;line-height:20px;cursor:pointer;transition:background 150ms ease}
.auth-google-button img{display:block;width:20px;height:20px;flex:none}
.fs-auth-clean .auth-google-button:hover{background:#f2f2f2}
.fs-auth-clean .auth-google-button:focus-visible{outline:2px solid #4285f4;outline-offset:3px}
.auth-email-divider{display:flex;align-items:center;gap:14px;margin:24px 0;color:var(--fs-fg-2);font-size:12px;line-height:18px}
.auth-email-divider::before,.auth-email-divider::after{content:"";height:1px;background:var(--fs-line-2);flex:1}
.fs-auth-clean .auth-centered-brand .auth-logo-dark{display:none}
.fs-auth-clean[data-theme="dark"] .auth-centered-brand .auth-logo-light{display:none}
.fs-auth-clean[data-theme="dark"] .auth-centered-brand .auth-logo-dark{display:block}
.fs-auth-clean[data-theme="dark"] .auth-google-button{background:#131314;border-color:#8e918f;color:#e3e3e3}
.fs-auth-clean[data-theme="dark"] .auth-google-button:hover{background:#242426}
.fs-auth-clean[data-theme="dark"] .auth-recovery-info{background:#142338;border-color:#29476b;color:#bfdbfe}
@media(prefers-reduced-motion:reduce){.auth-google-button{transition:none}}

.auth-legal-notice{font-size:11px;line-height:1.7;color:var(--fs-fg-2);text-align:center;margin:24px 0 0}.auth-legal-notice a{text-decoration:underline;text-underline-offset:3px}