/* Login: a quiet gallery frame and a warm writing surface. */
.auth-wrap {
  --auth-paper: #f5f0e1;
  --auth-ink: #263b4c;
  --auth-muted: #687672;
  --auth-gold: #b89a67;
  display: grid;
  grid-template-columns: minmax(0,54fr) minmax(410px,46fr);
  min-height: 100svh;
  overflow: hidden;
  color: var(--auth-ink);
  color-scheme: light;
  background: var(--auth-paper);
  box-shadow: none;
}
.auth-art-side {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 30px 7%;
  overflow: hidden;
  background: radial-gradient(circle at 45% 45%,#284158,#142b40 70%);
}
.auth-art-side::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .16;
  background: repeating-linear-gradient(45deg,transparent 0 3px,#fff7e314 3px 4px);
  pointer-events: none;
}
.auth-art-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%,700px);
  height: min(88svh,880px);
  padding: 7px;
  border: 1px solid #c7aa78;
  background: #102637;
  box-shadow: 0 24px 55px #08182788,0 0 0 8px #f5f0e112;
}
.auth-art-frame img { display: block; width: 100%; height: 100%; object-fit: contain; background: #132c3f; }
.auth-art-caption { position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); color: #e9e4d4; font: 9px Georgia,serif; letter-spacing: .25em; white-space: nowrap; }
.auth-content-side {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  align-items: center;
  min-height: 100svh;
  padding: 60px clamp(42px,7vw,115px);
  border-left: 1px solid #c3b492;
  background: repeating-linear-gradient(90deg,transparent 0 3px,#7c6b4d08 3px 4px),radial-gradient(circle at 70% 25%,#fffdf3,#f5f0e1 75%);
}
.auth-content-inner { position: relative; display: grid; max-width: 480px; width: 100%; margin: auto; }
.auth-stage { grid-area: 1/1; display: flex; flex-direction: column; justify-content: center; min-height: 540px; transition: opacity .4s ease,transform .4s ease; }
.auth-stage[aria-hidden="true"] { opacity: 0; transform: translateY(12px); pointer-events: none; }
.auth-stage[aria-hidden="false"] { opacity: 1; transform: translateY(0); }
.auth-wrap .auth-brand { display: block; color: #526963; font: italic 19px Georgia,serif; letter-spacing: .08em; text-shadow: none; }
.auth-wrap .auth-brand i { color: var(--auth-gold); }
.auth-kicker { margin-top: 72px; color: #8a7b65; font: 10px Georgia,serif; letter-spacing: .25em; }
.auth-intro-stage h1 { margin: 16px 0 0; color: var(--auth-ink); font: 400 clamp(39px,3.5vw,57px)/1.42 Georgia,"Songti SC","SimSun",serif; letter-spacing: .07em; }
.auth-login-stage h2 { margin: 20px 0 8px; color: var(--auth-ink); font: 400 clamp(33px,3vw,46px)/1.4 Georgia,"Songti SC","SimSun",serif; letter-spacing: .08em; }
.auth-rule { display: flex; align-items: center; gap: 16px; width: 100%; margin: 27px 0; color: var(--auth-gold); font-size: 13px; }
.auth-rule::before { content: ""; width: 45px; height: 1px; background: var(--auth-gold); }
.auth-rule::after { content: ""; flex: 1; height: 1px; background: #d6cbb5; }
.auth-lead { max-width: 27em; margin: 0; color: var(--auth-muted); font-size: 14px; line-height: 2.1; letter-spacing: .05em; }
.auth-wrap .auth-enter,.auth-wrap .auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 21px;
  min-height: 54px;
  border: 1px solid #19384f;
  border-radius: 7px;
  background: #142d42;
  color: #fff9ed;
  font: 15px Georgia,"Songti SC",serif;
  letter-spacing: .1em;
  box-shadow: 0 4px 13px #2436472b;
  cursor: pointer;
  transition: background .2s,transform .2s,box-shadow .2s;
}
.auth-wrap .auth-enter { align-self: flex-start; min-width: 204px; margin-top: 42px; padding: 0 24px; }
.auth-wrap .auth-enter:hover,.auth-wrap .auth-submit:hover { background: #244765; color: #fff9ed; transform: translateY(-2px); box-shadow: 0 7px 16px #2436473b; }
.auth-wrap .auth-enter span,.auth-wrap .auth-submit span { color: #ddc99d; font-size: 20px; }
.auth-wrap .auth-enter:focus-visible,.auth-wrap .auth-submit:focus-visible,.auth-back:focus-visible,.auth-password-toggle:focus-visible,.auth-wrap input:focus-visible { outline: 3px solid #b8a372; outline-offset: 3px; }
.auth-stage-note { margin: 45px 0 0; color: #8f938b; font-size: 11px; letter-spacing: .08em; }
.auth-back { align-self: flex-start; display: flex; align-items: center; gap: 9px; padding: 7px 0; border: 0; background: none; color: #73817d; font: 12px Georgia,"Songti SC",serif; cursor: pointer; }
.auth-back:hover { color: var(--auth-ink); }
.auth-back span { font-size: 20px; color: var(--auth-gold); }
.auth-login-brand { margin-top: 45px; }
.auth-login-stage .auth-kicker { margin-top: 48px; }
.auth-login-stage .auth-lead { font-size: 13px; }
.auth-login-stage .auth-rule { margin: 17px 0 28px; }
.auth-profiles { display: flex; align-items: center; gap: 18px; margin: -7px 0 18px; }
.auth-profile { display: flex; align-items: center; gap: 9px; color: #344a59; font: 13px Georgia,"Songti SC",serif; letter-spacing: .04em; }
.auth-profile img { display: block; width: 54px; height: 54px; border: 2px solid #c6b78f; border-radius: 50%; object-fit: cover; background: #fffdf6; }
.auth-login-stage form { display: grid; gap: 18px; text-align: left; }
.auth-wrap .auth-field { display: grid; gap: 9px; color: #344a59; font: 13px Georgia,"Songti SC",serif; letter-spacing: .1em; }
.auth-wrap .auth-field input[type="text"],.auth-wrap .auth-field input[type="password"] {
  width: 100%; min-height: 51px; padding: 0 15px; border: 1px solid #b9b5a8; border-radius: 6px;
  background: #fffdf6; color: var(--auth-ink); font: 16px Georgia,"Songti SC",serif;
  outline: none; box-shadow: inset 0 2px 4px #63706a0d;
}
.auth-wrap .auth-field input::placeholder { color: #9da5a1; }
.auth-password-wrap { position: relative; display: block; }
.auth-wrap .auth-password-wrap input[type="password"],.auth-wrap .auth-password-wrap input[type="text"] { padding-right: 64px; }
.auth-password-toggle { position: absolute; right: 8px; top: 6px; min-width: 49px; height: 39px; padding: 0 6px; border: 0; background: none; color: #697871; font: 12px Georgia,"Songti SC",serif; cursor: pointer; }
.auth-password-toggle:hover { color: var(--auth-ink); }
.auth-wrap .auth-submit { width: 100%; margin-top: 9px; }
.auth-wrap .auth-submit:disabled { cursor: wait; opacity: .7; transform: none; }
.auth-wrap .auth-error { margin: -3px 0 0; color: #a14336; font-size: 12px; line-height: 1.6; }
@media(max-width:900px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-art-side { min-height: 0; height: 49svh; padding: 17px; }
  .auth-art-frame { height: calc(49svh - 34px); max-width: 410px; padding: 4px; }
  .auth-art-caption { display: none; }
  .auth-content-side { min-height: 51svh; padding: 40px 8% 50px; }
  .auth-stage { min-height: 470px; }
  .auth-kicker { margin-top: 45px; }
  .auth-login-brand { margin-top: 28px; }
  .auth-login-stage .auth-kicker { margin-top: 30px; }
}
@media(max-width:480px) {
  .auth-art-side { height: 41svh; }
  .auth-art-frame { height: calc(41svh - 30px); }
  .auth-content-side { padding: 35px 7% 45px; }
  .auth-stage { min-height: 430px; }
  .auth-intro-stage h1 { font-size: 37px; }
  .auth-lead { font-size: 13px; }
  .auth-stage-note { margin-top: 32px; }
}
@media(prefers-reduced-motion: reduce) { .auth-stage,.auth-wrap .auth-enter,.auth-wrap .auth-submit { transition: none; } }