* { box-sizing: border-box; }

:root {
  color-scheme: light;
  --auth-ink: #20201d;
  --auth-muted: #77746d;
  --auth-paper: #f7f6f2;
  --auth-line: #dfddd5;
  --auth-accent: #b78d51;
}

html, body { min-height: 100%; }
body { margin: 0; background: var(--auth-paper); color: var(--auth-ink); font-family: Poppins, sans-serif; }
button, input { font: inherit; }
.auth-shell { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(420px, .92fr); min-height: 100vh; }
.auth-visual { position: relative; min-height: 700px; overflow: hidden; background: #171715; color: #fff; }
.auth-visual::after { position: absolute; inset: 0; content: ""; background: linear-gradient(180deg, rgba(0,0,0,.1) 10%, rgba(0,0,0,.22) 42%, rgba(0,0,0,.82) 100%); }
.auth-visual > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.auth-brand, .auth-visual__caption, .auth-official { position: absolute; z-index: 1; color: #fff; }
.auth-brand { top: 38px; left: 7%; color: #fff; font-size: 22px; font-weight: 700; text-decoration: none; }
.auth-brand span { color: #d0ab70; }
.auth-visual__caption { right: 8%; bottom: 14%; left: 8%; max-width: 580px; }
.auth-visual__caption > span, .auth-kicker { color: var(--auth-accent); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
.auth-visual__caption h1 { max-width: 550px; margin: 12px 0; font-size: clamp(38px, 4vw, 64px); line-height: 1.05; }
.auth-visual__caption p { max-width: 470px; color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.8; }
.auth-official { right: 7%; bottom: 34px; font-size: 12px; text-decoration: none; }
.auth-official i { margin-left: 7px; }
.auth-panel { display: grid; align-items: center; padding: 44px clamp(28px, 7vw, 96px); }
.auth-panel__inner { width: min(100%, 430px); margin: 0 auto; }
.auth-kicker { margin: 0 0 30px; color: #776d5d; letter-spacing: 1px; }
.auth-kicker span { padding: 0 5px; color: #b0a99c; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--auth-line); }
.auth-tab { position: relative; min-height: 46px; border: 0; background: transparent; color: #8b877f; cursor: pointer; font-size: 13px; font-weight: 600; }
.auth-tab.is-active { color: var(--auth-ink); }
.auth-tab.is-active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--auth-accent); content: ""; }
.auth-form { padding-top: 34px; }
.auth-form h2 { margin: 0 0 7px; font-size: 30px; font-weight: 600; }
.auth-intro { margin: 0 0 24px; color: var(--auth-muted); font-size: 13px; line-height: 1.7; }
.auth-form label { display: block; margin: 0 0 17px; color: #4e4b45; font-size: 12px; font-weight: 600; }
.auth-form input { display: block; width: 100%; height: 48px; margin-top: 7px; padding: 0 13px; border: 1px solid var(--auth-line); border-radius: 2px; outline: 0; background: #fff; color: var(--auth-ink); font-size: 13px; font-weight: 400; }
.auth-form input:focus { border-color: var(--auth-accent); box-shadow: 0 0 0 2px rgba(183,141,81,.15); }
.auth-hint { float: right; color: var(--auth-muted); font-size: 10px; font-weight: 400; }
.auth-submit { display: flex; width: 100%; min-height: 50px; align-items: center; justify-content: space-between; margin-top: 8px; padding: 0 17px; border: 0; border-radius: 2px; background: #24231f; color: #fff; cursor: pointer; font-size: 13px; font-weight: 600; transition: background .2s ease; }
.auth-submit:hover { background: #725c3f; }
.auth-submit:disabled { cursor: wait; opacity: .65; }
.auth-submit i { color: #d7b77f; }
.auth-feedback { min-height: 22px; margin: 12px 0 0; font-size: 12px; line-height: 1.6; }
.auth-feedback--error { color: #a3312a; }
.auth-feedback--success { color: #286143; }
.auth-legal { margin: 32px 0 0; padding-top: 18px; border-top: 1px solid var(--auth-line); color: var(--auth-muted); font-size: 10px; line-height: 1.7; }

@media (max-width: 900px) {
  .auth-shell { grid-template-columns: minmax(0, .9fr) minmax(390px, 1.1fr); }
  .auth-panel { padding: 36px 30px; }
  .auth-visual__caption h1 { font-size: 42px; }
}

@media (max-width: 700px) {
  .auth-shell { display: block; }
  .auth-visual { min-height: 250px; height: 31vh; }
  .auth-brand { top: 20px; left: 22px; font-size: 18px; }
  .auth-visual__caption { right: 22px; bottom: 22px; left: 22px; }
  .auth-visual__caption > span { font-size: 9px; }
  .auth-visual__caption h1 { margin: 6px 0; font-size: 29px; }
  .auth-visual__caption p { display: none; }
  .auth-official { right: 22px; bottom: 20px; display: none; }
  .auth-panel { display: block; padding: 25px 22px 32px; }
  .auth-kicker { margin-bottom: 18px; }
  .auth-form { padding-top: 23px; }
  .auth-form h2 { font-size: 25px; }
}