:root {
  --auth-accent: #3F5A36;
  --auth-accent-deep: #374F31;
  --auth-bg: #e9e5da;
  --auth-panel: #f4f0e5;
  --auth-surface: #e9e3d7;
  --auth-text: #1b221b;
  --auth-muted: #4e574f;
  --auth-border: #cec9bd;
  --auth-input-border: #c6c3b7;
  --auth-focus: #3f5a36;
  --auth-page-background: var(--auth-bg);
  --auth-card-shadow: 0 12px 28px rgba(0, 0, 0, .10);
}
.dark-theme {
  --auth-bg: #121312;
  --auth-panel: #1A1C1A;
  --auth-surface: #242724;
  --auth-text: #E2E4DF;
  --auth-muted: #4e574f;
  --auth-border: #cec9bd;
  --auth-input-border: var(--auth-border);
  --auth-focus: #3f5a36;
  --auth-page-background: var(--auth-bg);
  --auth-card-shadow: 0 24px 70px rgba(0, 0, 0, .16);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body.auth-page {
  margin: 0;
  padding: 24px;
  color: var(--auth-text);
  background: var(--auth-page-background);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.auth-layout {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(360px, 520px);
  width: min(100%, 1080px);
  min-height: calc(100vh - 48px);
  margin: 0 auto;
  align-items: center;
  gap: clamp(36px, 8vw, 100px);
}
.auth-intro { max-width: 500px; }
.auth-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--auth-text); font-weight: 850; letter-spacing: .14em; text-decoration: none; }
.auth-brand-mark { display: inline-grid; width: 38px; height: 38px; place-items: center; color: #f4f0e5; border-radius: 11px; background: var(--auth-accent); font-family: Georgia, serif; font-size: 1.25rem; }
.auth-kicker { margin: 44px 0 8px; color: var(--auth-accent); font-size: .75rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.auth-intro h1 { margin: 0; font-size: clamp(2.4rem, 6vw, 4.8rem); line-height: .98; letter-spacing: -.04em; }
.auth-intro > p:last-child { max-width: 37rem; margin: 18px 0 0; color: var(--auth-muted); font-size: 1.02rem; line-height: 1.65; }

.auth-card {
  width: 100%;
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--auth-border);
  border-radius: 20px;
  background: var(--auth-panel);
  box-shadow: var(--auth-card-shadow);
}
.auth-card h2 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.3rem); }
.auth-card-subtitle { margin: 7px 0 22px; color: var(--auth-muted); line-height: 1.45; }
.auth-alert { margin-bottom: 12px; padding: 10px 12px; border: 1px solid var(--auth-border); border-radius: 9px; background: var(--auth-surface); font-size: .86rem; }
.auth-alert--error { border-color: #374f31; }
.auth-alert--success { border-color: #3f5a36; }
.auth-form { display: grid; gap: 15px; }
.auth-field { display: grid; gap: 6px; }
.auth-field label { font-size: .82rem; font-weight: 800; }
.auth-field input {
  width: 100%;
  min-height: 50px;
  padding: 11px 13px;
  color: var(--auth-text);
  border: 1px solid var(--auth-input-border);
  border-radius: 10px;
  background: var(--auth-surface);
  font: inherit;
}
.auth-field input:focus { border-color: var(--auth-accent); outline: 3px solid var(--auth-accent); }
.auth-field small { color: var(--auth-muted); font-size: .72rem; }
.auth-submit {
  min-height: 50px;
  margin-top: 4px;
  padding: 11px 18px;
  color: #f4f0e5;
  border: 1px solid var(--auth-accent-deep);
  border-radius: 10px;
  background: var(--auth-accent);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.auth-submit:hover { background: var(--auth-accent-deep); }
.auth-submit:focus-visible, .auth-link:focus-visible, .auth-brand:focus-visible { outline: 3px solid var(--auth-focus); outline-offset: 3px; }
.auth-switch { margin: 18px 0 0; color: var(--auth-muted); text-align: center; }
.auth-link { color: var(--auth-accent); font-weight: 800; }
.dark-theme .auth-link { color: #e5dfd4; }

@media (max-width: 767px) {
  body.auth-page { padding: 16px; }
  .auth-layout { grid-template-columns: minmax(0, 1fr); min-height: calc(100svh - 32px); align-content: center; gap: 22px; }
  .auth-intro { text-align: center; }
  .auth-brand { justify-content: center; }
  .auth-kicker { margin-top: 24px; }
  .auth-intro h1 { font-size: clamp(2.2rem, 12vw, 3.6rem); }
  .auth-intro > p:last-child { display: none; }
  .auth-card { padding: 22px 18px; border-radius: 16px; }
}

@media (max-height: 760px) and (max-width: 767px) {
  .auth-layout { align-content: start; }
  .auth-kicker { display: none; }
  .auth-intro h1 { display: none; }
  .auth-intro { text-align: left; }
  .auth-brand { justify-content: flex-start; }
}