.login-page {
  min-width: 320px;
  min-height: 100vh;
  background: #faf9f6;
  color: #282216;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border: 1px solid #e1ddd4;
  border-radius: 0 0 26px 26px;
}

.login-art {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 660px;
  background: #191621;
  border-right: 1px solid #2d2837;
}

.login-art::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(circle at 74% 26%, rgba(104, 88, 219, .28), transparent 31%),
    radial-gradient(circle at 25% 76%, rgba(111, 200, 160, .13), transparent 36%),
    linear-gradient(137deg, #17131d 0%, #211a2c 53%, #18151f 100%);
}

.login-art::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: .42;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 52%, #000 0%, rgba(0,0,0,.74) 48%, transparent 92%);
}

.login-art-canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.login-art-head {
  position: absolute;
  z-index: 3;
  top: 29px;
  left: 34px;
}

.login-art-mark {
  color: rgba(204, 236, 218, .62);
  font-size: 10px;
}

.login-back {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  color: rgba(243, 201, 103, .8);
  font-size: 11px;
  line-height: 1;
  transition: color .2s, transform .2s;
}

.login-back span { font-size: 16px; line-height: .6; }
.login-back:hover { color: #f3c967; transform: translateX(-3px); }

.login-art-word {
  position: absolute;
  z-index: 3;
  right: -4px;
  bottom: -43px;
  color: rgba(246, 242, 234, .045);
  font-family: var(--font-display);
  font-size: clamp(120px, 13vw, 220px);
  line-height: .8;
  letter-spacing: .04em;
  user-select: none;
}

.login-access {
  min-height: 660px;
  display: grid;
  place-items: center;
  background: #fffefd;
}

.login-access-inner {
  width: min(100% - 80px, 420px);
  min-height: min(690px, 100vh);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 72px 0 34px;
}

.login-symbol {
  width: 58px;
  height: 50px;
  display: grid;
  place-items: center;
  align-self: center;
  border-radius: 14px;
  background: #f3ba38;
  box-shadow: 0 10px 19px -13px rgba(127,86,7,.72);
  transition: transform .2s ease, box-shadow .2s ease;
}

.login-symbol:hover { transform: translateY(-2px) rotate(-2deg); box-shadow: 0 14px 21px -13px rgba(127,86,7,.65); }
.login-symbol img { width: 35px; height: auto; filter: brightness(0) saturate(100%); }

.login-copy { margin-top: 66px; text-align: center; }
.login-copy h1 {
  font-family: var(--font-body);
  font-size: clamp(26px, 2.3vw, 33px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -.055em;
}
.login-copy p { margin-top: 7px; color: #8d867e; font-size: 13px; }

.login-options { margin-top: 39px; }

.login-option {
  width: 100%;
  min-height: 51px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 13px 0 18px;
  border: 1px solid #ded9cf;
  border-radius: 10px;
  outline: 0;
  background: #fffefd;
  color: #332c21;
  box-shadow: 0 2px 3px rgba(70,52,19,.11), 0 6px 12px -11px rgba(61,43,11,.46);
  font: 700 14px/1 var(--font-body);
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.login-option + .login-option,
.login-email-panel + .login-option { margin-top: 12px; }
.login-option:hover,
.login-option:focus-visible { border-color: #b69a61; transform: translateY(-2px); box-shadow: 0 6px 10px rgba(70,52,19,.10), 0 15px 25px -17px rgba(61,43,11,.38); }

.login-option-icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #e7e1d6;
  border-radius: 6px;
  background: #fff;
  color: #564d3d;
  font-family: var(--font-mono);
  font-size: 13px;
  font-style: normal;
}

.login-option-email { color: #fffdf9; background: #262014; border-color: #262014; font-size: 12px; }
.login-option-microsoft { grid-template-columns: repeat(2, 6px); grid-template-rows: repeat(2, 6px); gap: 2px; }
.login-option-microsoft b { width: 6px; height: 6px; background: #f1511b; }
.login-option-microsoft b:nth-child(2) { background: #80bb03; }
.login-option-microsoft b:nth-child(3) { background: #00a3ee; }
.login-option-microsoft b:nth-child(4) { background: #ffb901; }
.login-option-lock { background: #f1eee7; font-size: 19px; line-height: 1; }

.login-email-panel {
  display: block;
  max-height: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .22s ease, opacity .18s ease, margin .22s ease;
}
.login-email-panel.is-open { max-height: 100px; margin-top: 10px; opacity: 1; }
.login-email-panel label { display: block; margin-bottom: 7px; color: #766f65; font-size: 11px; font-weight: 700; }
.login-email-panel > div { display: flex; gap: 7px; }
.login-email-panel input {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 1px solid #dcd5c9;
  border-radius: 8px;
  outline: 0;
  background: #fff;
  color: #312b20;
  font: 500 13px/1 var(--font-body);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.login-email-panel input:focus { border-color: #b89a58; box-shadow: 0 0 0 3px rgba(227,174,64,.16); }
.login-email-panel button {
  height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: #272115;
  color: #fffefa;
  font: 700 12px/1 var(--font-body);
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.login-email-panel button:hover { background: #a66a08; transform: translateY(-1px); }

.login-rule { height: 1px; margin: 25px 0; background: #e7e1d7; }
.login-form-status { min-height: 19px; margin: 11px 0 0; color: #857763; font-size: 11px; line-height: 1.5; text-align: center; }
.login-form-status.is-error { color: #b55268; }
.login-form-status.is-ready { color: #487763; }

.login-footer-note { margin-top: auto; padding-top: 40px; color: #aaa39a; font-size: 11px; line-height: 1.75; text-align: center; }
.login-footer-note p + p { margin-top: 15px; }
.login-footer-note a { margin-left: 4px; color: #796334; text-decoration: underline; text-decoration-color: rgba(121,99,52,.28); text-underline-offset: 3px; }
.login-footer-note a:hover { color: #a66a08; }

@media (prefers-reduced-motion: reduce) {
  .login-art-canvas { opacity: .82; }
}

@media (max-width: 800px) {
  .login-shell { grid-template-columns: 1fr; border-radius: 0; }
  .login-art { min-height: 250px; border-right: 0; border-bottom: 1px solid #ded9cf; }
  .login-art-head { top: 18px; left: 22px; }
  .login-art-mark { font-size: 9px; }
  .login-back { margin-top: 12px; font-size: 10px; }
  .login-art-word { bottom: -25px; font-size: 112px; }
  .login-access { min-height: calc(100vh - 250px); }
  .login-access-inner { min-height: 600px; padding: 44px 0 29px; }
  .login-copy { margin-top: 39px; }
  .login-options { margin-top: 30px; }
}

@media (max-width: 480px) {
  .login-art { min-height: 216px; }
  .login-access { min-height: calc(100vh - 216px); }
  .login-access-inner { width: min(100% - 48px, 420px); min-height: 590px; padding-top: 35px; }
  .login-symbol { width: 51px; height: 44px; border-radius: 12px; }
  .login-symbol img { width: 30px; }
  .login-copy { margin-top: 31px; }
  .login-copy h1 { font-size: 27px; }
  .login-options { margin-top: 28px; }
  .login-option { min-height: 49px; font-size: 13px; }
  .login-rule { margin: 20px 0; }
  .login-footer-note { padding-top: 26px; }
}