/* Approved login-only direction. Reuse the site's brand, theme and motion tokens. */
html body.login-butterfly[data-page="login"] {
  background: #000 !important;
  --login-satin-size: clamp(320px, 48vw, 760px);
  --login-satin-filter: sepia(1) saturate(2) hue-rotate(285deg);
}
html[data-hj-theme="ice"] body.login-butterfly {
  --login-satin-filter: sepia(1) saturate(2) hue-rotate(225deg);
}
/* One aligned texture across the page and opaque sticky header; never covers controls. */
html body.login-butterfly[data-page="login"]::before,
html body.login-butterfly .header::before {
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
  background: url("../assets/login-satin-corner-v1.png") left top / var(--login-satin-size) var(--login-satin-size) no-repeat;
  filter: var(--login-satin-filter);
  mask-image: none;
  opacity: .9 !important;
  animation: none;
}
html body.login-butterfly::before {
  inset: 0 auto auto 0;
  width: min(100%, var(--login-satin-size));
  height: var(--login-satin-size);
  z-index: 0;
}
html body.login-butterfly .header { isolation: isolate; }
html body.login-butterfly .header::before { inset: 0; z-index: -1; }
#authMain.auth-page--login {
  max-width: 1200px;
  padding: 64px 32px 56px !important;
  background: transparent !important;
  --hj-duration-press: 120ms;
}
#authMain .auth-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  align-items: center;
  gap: 80px;
}
#authMain .auth-panel {
  isolation: auto;
  overflow: visible;
  min-width: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  animation: none !important;
}
#authMain .auth-panel::after { display: none; }
#authMain .auth-panel--story {
  display: flex !important;
  min-height: 440px;
  padding: 32px 0 32px 60px;
  justify-content: center;
}
#authMain .auth-panel--form { padding: 0 !important; width: 100% !important; }
#authMain .auth-kicker {
  margin-bottom: 16px;
  color: var(--hj-ceramic-a) !important;
  font: 500 12px/1.5 var(--mono) !important;
  letter-spacing: .16em !important;
}
#authMain .auth-kicker::before { box-shadow: none; }
#authMain .auth-title {
  font-size: clamp(38px, 3.7vw, 54px) !important;
  line-height: 1.45 !important;
  letter-spacing: .01em !important;
}
#authMain .auth-title span { color: var(--hj-ceramic-a); text-shadow: none; }
#authMain .auth-title small, #authMain .auth-benefits { display: none; }
#authMain .auth-copy { max-width: 390px; margin-top: 24px; font: 400 16px/1.9 var(--sans) !important; white-space: normal !important; }
#authMain .auth-proof-strip {
  margin-top: 28px;
  padding-top: 20px;
  border: 0;
  border-top: 1px solid #29262a;
  border-radius: 0;
  background: transparent;
}
#authMain .auth-proof { padding: 0 12px; background: transparent; text-align: center; }
#authMain .auth-proof + .auth-proof { border-left: 1px solid #39343a; }
#authMain .auth-proof :is(strong, span) { display: inline; font: 400 14px/1.5 var(--sans); letter-spacing: 0; }
#authMain .auth-form-head { position: relative; margin-bottom: 28px; }
#authMain .auth-form-title { font-size: 40px !important; line-height: 1.4 !important; letter-spacing: .03em !important; }
#authMain .auth-form-title em, #authMain .auth-link-row a { color: var(--hj-ceramic-a) !important; }
#authMain .auth-form-sub { font: 400 15px/1.7 var(--sans) !important; margin: 6px 0 0; white-space: normal !important; overflow-wrap: anywhere; }
#authMain .auth-mobile-trust { display: none; }
#authMain .auth-form { gap: 18px; }
#authMain .auth-label-row { flex-wrap: wrap; align-items: baseline !important; }
#authMain .auth-label { font: 400 15px/1.5 var(--sans) !important; letter-spacing: 0 !important; text-transform: none; color: #eee !important; }
#authMain .auth-label-hint { font: 400 13px/1.5 var(--sans) !important; color: #aaa !important; }
#authMain #loginAccountHint { display: none; }
#authMain .auth-input-wrap {
  border: 1px solid color-mix(in srgb, var(--hj-ceramic-a) 32%, #353035) !important;
  border-radius: 8px !important;
  background: #080708 !important;
  box-shadow: none !important;
  overflow: visible !important;
  transition: none !important;
}
#authMain .auth-input {
  min-height: 54px !important;
  padding: 12px 68px 12px 14px;
  border: 0 !important;
  border-radius: 8px;
  background: transparent !important;
  color: #f5f3f5 !important;
  font: 400 16px/1.5 var(--sans) !important;
  box-shadow: none !important;
  outline: none;
  transition: none !important;
  scroll-margin-block: 120px;
}
#authMain #loginAccount { padding-right: 14px; }
#authMain .auth-input::placeholder { color: #928c92 !important; opacity: 1; }
#authMain .auth-field:focus-within .auth-input-wrap {
  border-color: var(--hj-ceramic-a) !important;
  box-shadow: 0 0 0 2px rgb(var(--hj-ceramic-a-rgb) / .18) !important;
}
#authMain .auth-input-wrap:has([aria-invalid="true"]) { border-color: #fca5a5 !important; }
#authMain .auth-input-toggle {
  width: 52px; height: 44px;
  border: 0 !important; border-radius: 4px;
  background: transparent !important;
  font: 500 14px/1.5 var(--sans) !important;
  color: #eee !important;
}
#authMain .auth-actions { gap: 0; margin: 4px 0 0; }
#authMain .auth-primary {
  min-height: 54px !important;
  border: 1px solid var(--hj-ceramic-b) !important;
  border-radius: 10px !important;
  background: linear-gradient(175deg, var(--hj-ceramic-b), var(--hj-ceramic-a)) !important;
  color: var(--hj-ceramic-on) !important;
  box-shadow: inset 0 1px 0 #ffffff70 !important;
  font: 700 17px/1.5 var(--sans) !important;
  transform: none !important;
  scale: 1 !important;
  filter: none !important;
  transition: transform var(--hj-duration-press) var(--hj-ease-out) !important;
}
#authMain .auth-primary:active:not(:disabled):not(:focus-visible) { transform: scale(.98) !important; }
#authMain .auth-primary:disabled { opacity: .65 !important; cursor: progress; }
#authMain :is(button, a):focus-visible { outline: 2px solid var(--hj-ceramic-b) !important; outline-offset: 4px; }
#authMain .auth-status { min-height: 0; font-size: 14px; }
#authMain .auth-status:not(:empty) { margin-top: 12px; }
#authMain .auth-status.is-success { color: #bbf7d0; }
#authMain .auth-field-error { margin: 0; font-size: 14px; }
#authMain .auth-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
#authMain .auth-contact {
  min-height: 48px; padding: 8px;
  border: 1px solid #413840 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #eee !important;
  box-shadow: none !important;
  font: 500 15px/1.5 var(--sans);
  transform: none !important; scale: 1 !important;
}
#authMain .auth-link-row { margin-top: 12px; font: 400 14px/1.8 var(--sans) !important; }
#authMain .auth-link-row a { display: inline-block; padding-block: 4px; font-weight: 500; }
#authMain .auth-mode-switch {
  display: flex; justify-content: center;
  margin: 4px 0 0; padding: 0 !important;
  border: 0 !important; background: transparent !important; box-shadow: none !important;
}
#authMain .auth-mode-btn {
  min-height: 44px; padding: 8px 16px;
  border: 0 !important; background: transparent !important; box-shadow: none !important;
  color: #b9b1b9 !important; font: 400 14px/1.5 var(--sans);
  text-decoration: underline; text-underline-offset: 5px;
}
body:not(.auth-admin-mode) #authMain [data-auth-mode="member"],
body.auth-admin-mode #authMain [data-auth-mode="admin"] { display: none; }
#authMain .auth-mode-btn:disabled { opacity: .5; cursor: progress; }
#authMain .auth-butterfly {
  position: absolute; pointer-events: none; object-fit: contain; height: auto;
  /* Separate satin illustration based on the original mark; the brand logo is unchanged. */
  mix-blend-mode: screen;
  filter: brightness(.8) sepia(1) saturate(3) hue-rotate(285deg);
  opacity: .85;
}
html[data-hj-theme="ice"] #authMain .auth-butterfly { filter: brightness(.8) sepia(1) saturate(3) hue-rotate(225deg); }
html[data-hj-theme="ice"] #authMain .auth-primary { background: linear-gradient(175deg, #f4e9ff, var(--hj-ceramic-b)) !important; }
#authMain .auth-butterfly--story { width: 320px; left: -240px; top: 25%; z-index: 0; }
#authMain .auth-butterfly--mobile { display: none; }
@keyframes loginButterflyLight { from { opacity: .15; } to { opacity: .85; } }
@media (prefers-reduced-motion: no-preference) {
  #authMain.auth-first-visit .auth-butterfly { animation: loginButterflyLight 280ms var(--hj-ease-out) both; }
  #authMain :is(.auth-form-title em, .auth-link-row a, .auth-kicker) { transition: color 180ms ease !important; }
}
@media (hover: hover) and (pointer: fine) {
  #authMain .auth-primary:hover:not(:disabled) { box-shadow: inset 0 1px 0 #ffffffaa !important; }
  #authMain :is(.auth-contact, .auth-mode-btn):hover { color: var(--hj-ceramic-b) !important; }
}
@media (max-width: 900px) {
  #authMain.auth-page--login { max-width: 560px; padding: 32px 24px 32px !important; }
  #authMain .auth-layout { display: block !important; }
  #authMain .auth-panel--story { display: none !important; }
  #authMain .auth-form-head { padding-right: 84px; margin-bottom: 24px; }
  #authMain .auth-butterfly--mobile { display: block; width: 80px; right: 0; top: 12px; }
  #authMain .auth-form-title { font-size: 36px !important; white-space: nowrap; }
  #authMain .auth-form-sub { font-size: 14px !important; }
  #authMain .auth-mobile-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 20px 0; border: 0; border-radius: 0; background: transparent; }
  #authMain .auth-mobile-trust span { background: transparent; font: 400 13px/1.5 var(--sans); padding: 0 4px; }
  #authMain .auth-mobile-trust span + span { border-left: 1px solid #39343a; }
  #authMain .auth-mobile-trust strong { font-weight: 400; }
}
@media (max-width: 360px) {
  #authMain.auth-page--login { padding-inline: 16px !important; }
  #authMain .auth-form-head { padding-right: 64px; }
  #authMain .auth-butterfly--mobile { width: 60px; }
  #authMain .auth-form-title { font-size: 32px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #authMain *, #authMain *::before, #authMain *::after { animation: none !important; transition: none !important; }
  #authMain #loginSubmit { transform: none !important; transition: none !important; }
  #authMain #loginSubmit:active:not(:disabled) { opacity: .85 !important; }
}