.auth-header-link {
  margin-left: auto;
  color: #5e6d78;
  font-size: 12px;
  font-weight: 600;
}

.auth-header-link a,
.auth-switch a,
.auth-terms a,
.label-row a {
  color: var(--orange);
  font-weight: 800;
}

.auth-header-link a:hover,
.auth-switch a:hover,
.auth-terms a:hover,
.label-row a:hover { text-decoration: underline; }
.label-row a { color: #9c3817; }

.auth-page {
  display: grid;
  min-height: calc(100vh - 77px);
  padding: 44px 24px;
  place-items: center;
  background:
    radial-gradient(circle at 18% 80%, rgba(255, 219, 184, .42), transparent 24%),
    radial-gradient(circle at 85% 14%, rgba(205, 239, 225, .5), transparent 26%),
    var(--cream);
}

.auth-layout {
  display: grid;
  width: min(990px, 100%);
  overflow: hidden;
  grid-template-columns: .86fr 1fr;
  border: 1px solid rgba(18, 34, 50, .12);
  border-radius: 15px;
  background: white;
  box-shadow: 0 25px 65px rgba(15, 36, 50, .13);
}

.auth-aside {
  position: relative;
  display: flex;
  min-height: 598px;
  padding: 62px 52px;
  overflow: hidden;
  flex-direction: column;
  color: white;
  background: var(--navy);
}

.auth-aside::before,
.auth-aside::after {
  position: absolute;
  border-radius: 50%;
  content: "";
}

.auth-aside::before {
  top: -128px;
  right: -117px;
  width: 340px;
  height: 340px;
  border: 1px solid rgba(217, 251, 102, .27);
  box-shadow: 0 0 0 45px rgba(217, 251, 102, .05), 0 0 0 90px rgba(217, 251, 102, .04);
}

.auth-aside::after {
  bottom: -185px;
  left: -155px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(238, 95, 43, .47), transparent 66%);
}

.auth-aside > * { position: relative; z-index: 1; }
.auth-aside h1 { margin: 3px 0 17px; color: white; font-size: clamp(35px, 4vw, 47px); letter-spacing: -.07em; line-height: 1.08; }.auth-aside h1 em { color: var(--lime); font-style: normal; }.auth-aside > p:not(.eyebrow) { max-width: 310px; margin: 0; color: rgba(255, 255, 255, .84); font-size: 13px; line-height: 1.75; }

.auth-code-card {
  margin-top: auto;
  padding: 21px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 9px;
  background: rgba(6, 21, 31, .45);
  backdrop-filter: blur(9px);
  font-family: var(--font-mono);
}

.code-label { display: block; margin-bottom: 18px; color: #9aa9af; font-size: 9px; }.auth-code-card p { margin: 0; color: #e9eee9; font-size: 11px; }.auth-code-card b { color: #f5a071; font-weight: 500; }.auth-code-card i { color: var(--lime); font-style: normal; }.auth-code-card div { display: flex; margin-top: 17px; align-items: center; gap: 7px; color: #c4d1cc; font-family: var(--font-display); font-size: 11px; }.auth-code-card div span { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; color: var(--navy); background: var(--lime); font-size: 9px; font-weight: 800; }

.auth-panel { padding: 51px 62px 39px; }.auth-back { display: inline-flex; align-items: center; gap: 7px; color: #53616d; font-size: 11px; font-weight: 700; }.auth-back:hover { color: var(--orange); }.auth-panel-heading { margin-top: 59px; }.auth-panel-heading .eyebrow { margin-bottom: 14px; }.auth-panel-heading h2 { margin: 0; color: var(--navy); font-size: clamp(27px, 3vw, 37px); letter-spacing: -.065em; line-height: 1.12; }.auth-panel-heading > p:last-child { margin: 12px 0 0; color: var(--muted); font-size: 13px; }

.auth-form { display: grid; margin-top: 32px; gap: 20px; }.field-group { display: grid; gap: 8px; }.field-group label { color: #435463; font-size: 12px; font-weight: 800; }.label-row { display: flex; justify-content: space-between; align-items: center; }.label-row a { font-size: 10px; }.input-wrap { position: relative; }.input-wrap > i { position: absolute; top: 50%; left: 14px; color: #63747e; font-size: 13px; transform: translateY(-50%); }.auth-form input { width: 100%; height: 47px; padding: 0 14px 0 39px; border: 1px solid #d8dde0; border-radius: 7px; outline: none; color: var(--navy); background: #fff; font-family: var(--font-display); font-size: 12px; transition: border-color .2s ease, box-shadow .2s ease; }.auth-form input::placeholder { color: #596974; }.auth-form input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(238, 95, 43, .12); }
.password-input-wrap input { padding-right: 49px; }
.password-toggle { position: absolute; top: 50%; right: 5px; display: grid; width: 36px; height: 36px; padding: 0; place-items: center; transform: translateY(-50%); border: 0; border-radius: 6px; color: #53616d; background: transparent; cursor: pointer; font-size: 14px; }
.password-toggle:hover { color: var(--orange-dark); background: #fff2eb; }
.password-toggle:focus-visible { z-index: 1; outline: 3px solid #0e8ec1; outline-offset: 1px; }
.password-toggle i { pointer-events: none; }

.form-message { min-height: 16px; margin: -8px 0 -8px; color: #53616d; font-size: 11px; line-height: 1.35; }.form-message.success { color: #176444; }.form-message.error { color: #a83227; }.auth-submit { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 7px; color: white; background: var(--orange); box-shadow: 0 10px 18px rgba(238, 95, 43, .19); cursor: pointer; font-family: var(--font-display); font-size: 13px; font-weight: 800; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }.auth-submit:hover { background: var(--orange-dark); transform: translateY(-2px); box-shadow: 0 13px 23px rgba(238, 95, 43, .27); }.auth-submit:disabled { cursor: wait; opacity: .65; transform: none; }.auth-switch { margin: 26px 0 0; color: #53616d; text-align: center; font-size: 11px; }.auth-terms { margin: -4px 0 0; color: #53616d; text-align: center; font-size: 10px; line-height: 1.5; }

html[data-theme="dark"] .auth-page { background: radial-gradient(circle at 18% 80%, rgba(255, 219, 184, .06), transparent 24%), #101a21; }
html[data-theme="dark"] .auth-layout,
html[data-theme="dark"] .auth-panel { border-color: #30414a; background: #17262e; }
html[data-theme="dark"] .auth-panel-heading h2 { color: #edf3f5; }
html[data-theme="dark"] .auth-panel-heading > p:last-child,
html[data-theme="dark"] .auth-back,
html[data-theme="dark"] .auth-switch,
html[data-theme="dark"] .auth-terms,
html[data-theme="dark"] .field-group label { color: #b6c3c9; }
html[data-theme="dark"] .auth-form input { border-color: #3a4b55; color: #edf3f5; background: #101d24; }
html[data-theme="dark"] .auth-form input::placeholder { color: #81919a; }
html[data-theme="dark"] .auth-form input:focus-visible { outline: 3px solid #9cddff; outline-offset: 3px; }
html[data-theme="dark"] .password-toggle { color: #c1cdd2; }
html[data-theme="dark"] .password-toggle:hover { color: #fff; background: #263a45; }

@media (max-width: 780px) { .auth-page { min-height: calc(100vh - 67px); padding: 27px 17px; }.auth-layout { max-width: 520px; grid-template-columns: 1fr; }.auth-aside { display: none; }.auth-panel { padding: 36px 36px 34px; }.auth-panel-heading { margin-top: 43px; }.auth-header-link { font-size: 11px; } }
@media (max-width: 430px) {
  .auth-page { padding: 15px; }
  .auth-panel { padding: 27px 22px 26px; }
  .auth-panel-heading { margin-top: 34px; }
  .auth-header-link { max-width: 96px; font-size: 10px; line-height: 1.4; text-align: right; }
  .auth-panel-heading h2 { font-size: 28px; }
  .auth-form { gap: 18px; }
  .header-content > .theme-toggle-auth { flex: 0 0 36px; }
}