:root {
  --auth-cream: rgba(255, 249, 242, 0.94);
  --auth-cream-solid: #fffaf5;
  --auth-line: rgba(95, 68, 54, 0.16);
  --auth-text: #3e302a;
  --auth-muted: #8f7769;
  --auth-accent: #f58220;
  --auth-accent-strong: #f07d18;
  --auth-deep: #4c2f26;
  --auth-surface: rgba(255, 244, 230, 0.72);
  --auth-shadow: 0 30px 80px rgba(64, 42, 31, 0.22);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body.auth-page {
  margin: 0;
  font-family: "Montserrat", "Segoe UI", Tahoma, sans-serif;
  color: var(--auth-text);
  background:
    radial-gradient(circle at 12% 16%, rgba(245, 130, 32, 0.18) 0, transparent 26%),
    radial-gradient(circle at 86% 12%, rgba(255, 225, 193, 0.72) 0, transparent 24%),
    linear-gradient(180deg, #4b362f 0, #4b362f 32%, #f7f0e8 32%, #f7f0e8 100%);
}

.auth-shell {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.auth-shell::before,
.auth-shell::after {
  content: "";
  position: absolute;
  inset: auto -8vw -10vh;
  height: 28vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.96;
}

.auth-shell::before {
  background:
    radial-gradient(circle at 12% 100%, rgba(117, 80, 62, 0.92) 0 9vh, transparent 9.2vh),
    radial-gradient(circle at 32% 100%, rgba(117, 80, 62, 0.9) 0 11vh, transparent 11.2vh),
    radial-gradient(circle at 54% 100%, rgba(117, 80, 62, 0.92) 0 8.5vh, transparent 8.7vh),
    radial-gradient(circle at 74% 100%, rgba(117, 80, 62, 0.9) 0 12vh, transparent 12.2vh),
    radial-gradient(circle at 92% 100%, rgba(117, 80, 62, 0.9) 0 8vh, transparent 8.2vh),
    linear-gradient(rgba(117, 80, 62, 0.92), rgba(117, 80, 62, 0.92));
}

.auth-shell::after {
  inset: auto -8vw -5vh;
  height: 20vh;
  background:
    radial-gradient(circle at 8% 100%, rgba(76, 47, 38, 0.98) 0 6vh, transparent 6.2vh),
    radial-gradient(circle at 24% 100%, rgba(76, 47, 38, 0.98) 0 8vh, transparent 8.2vh),
    radial-gradient(circle at 42% 100%, rgba(76, 47, 38, 0.98) 0 5.4vh, transparent 5.6vh),
    radial-gradient(circle at 60% 100%, rgba(76, 47, 38, 0.98) 0 8.5vh, transparent 8.7vh),
    radial-gradient(circle at 80% 100%, rgba(76, 47, 38, 0.98) 0 6vh, transparent 6.2vh),
    radial-gradient(circle at 94% 100%, rgba(76, 47, 38, 0.98) 0 7vh, transparent 7.2vh),
    linear-gradient(rgba(76, 47, 38, 0.98), rgba(76, 47, 38, 0.98));
}

.auth-stars,
.auth-stars::before,
.auth-stars::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.8) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255, 236, 216, 0.72) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(255, 255, 255, 0.55) 0 1px, transparent 1.8px);
  background-size: 160px 160px, 220px 220px, 300px 300px;
  background-position: 0 0, 60px 80px, 90px 30px;
  opacity: 0.34;
  z-index: 0;
  animation: authStarDrift 16s linear infinite;
}

.auth-stars::before {
  opacity: 0.24;
  animation-duration: 24s;
  transform: scale(1.05);
}

.auth-stars::after {
  opacity: 0.16;
  animation-duration: 32s;
  transform: scale(1.12);
}

@keyframes authStarDrift {
  from { transform: translateY(0); }
  50% { transform: translateY(10px); }
  to { transform: translateY(0); }
}

.auth-scene {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px 96px;
}

.auth-card {
  width: min(470px, 100%);
  border-radius: 30px;
  border: 1px solid rgba(110, 80, 60, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 252, 247, 0.96) 0%, rgba(253, 244, 233, 0.92) 100%);
  box-shadow: var(--auth-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.auth-card-shell {
  padding: 34px 34px 30px;
}

.auth-brand {
  display: grid;
  gap: 18px;
  justify-items: center;
  text-align: center;
}

.auth-brand-logo-shell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
  padding: 16px 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(95, 68, 54, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 16px 28px rgba(100, 67, 50, 0.08);
}

.auth-brand-logo {
  display: block;
  width: min(250px, 100%);
  height: auto;
}

.auth-brand-copy {
  display: grid;
  gap: 4px;
  justify-items: center;
}

.auth-kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(76, 47, 38, 0.62);
}

.auth-brand-copy h1 {
  margin: 0;
  max-width: 210px;
  font-size: clamp(18px, 3vw, 24px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--auth-deep);
  text-wrap: balance;
}

.auth-lead {
  margin: 0;
  color: var(--auth-muted);
  font-size: 14px;
  line-height: 1.55;
}

.auth-chip-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 20px 0 18px;
  flex-wrap: wrap;
}

.auth-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(95, 68, 54, 0.12);
  background: rgba(255, 250, 244, 0.84);
  color: rgba(76, 47, 38, 0.74);
  font-size: 12px;
  font-weight: 700;
}

.auth-chip-active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--auth-accent-strong) 0%, #f59a36 100%);
  color: #fff;
}

.auth-status {
  display: none;
  margin-bottom: 16px;
  padding: 13px 16px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.5;
}

.auth-status.error {
  display: block;
  background: rgba(177, 76, 55, 0.12);
  border: 1px solid rgba(177, 76, 55, 0.18);
  color: #8a3d2c;
}

.auth-status.success {
  display: block;
  background: rgba(80, 134, 70, 0.12);
  border: 1px solid rgba(80, 134, 70, 0.18);
  color: #315f29;
}

.auth-form {
  display: grid;
  gap: 14px;
}

.auth-field {
  display: grid;
  gap: 8px;
}

.auth-field label {
  font-size: 12px;
  font-weight: 700;
  color: rgba(76, 47, 38, 0.72);
}

.auth-input-box {
  position: relative;
}

.auth-input-box input {
  width: 100%;
  min-height: 56px;
  border-radius: 999px;
  border: 1px solid rgba(95, 68, 54, 0.14);
  background: rgba(255, 255, 255, 0.92);
  color: var(--auth-text);
  font: inherit;
  padding: 16px 20px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.auth-input-box input::placeholder {
  color: #a38c7c;
}

.auth-input-box input:focus {
  outline: none;
  border-color: rgba(245, 130, 32, 0.45);
  box-shadow: 0 0 0 4px rgba(245, 130, 32, 0.12);
  transform: translateY(-1px);
}

.auth-input-box input:-webkit-autofill,
.auth-input-box input:-webkit-autofill:hover,
.auth-input-box input:-webkit-autofill:focus,
.auth-input-box input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--auth-text);
  box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.96) inset;
  transition: background-color 9999s ease-in-out 0s;
}

.auth-form-actions {
  margin-top: 4px;
}

.auth-submit {
  width: 100%;
  min-height: 52px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--auth-accent-strong) 0%, #f59a36 100%);
  box-shadow: 0 18px 28px rgba(245, 130, 32, 0.24);
  transition: transform 0.14s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.auth-submit:hover {
  box-shadow: 0 22px 34px rgba(245, 130, 32, 0.28);
  filter: brightness(1.02);
}

.auth-submit:active {
  transform: translateY(1px);
}

.auth-submit:disabled {
  cursor: wait;
  opacity: 0.78;
}

.auth-help-text {
  margin: 16px 0 0;
  text-align: center;
  color: rgba(76, 47, 38, 0.7);
  font-size: 13px;
  line-height: 1.55;
}

@media (max-width: 560px) {
  .auth-scene {
    padding: 20px 14px 88px;
  }

  .auth-card-shell {
    padding: 26px 20px 22px;
  }

  .auth-brand-copy h1 {
    max-width: 190px;
    font-size: 20px;
    line-height: 1.04;
  }

  .auth-brand-logo-shell {
    padding: 14px 16px;
  }
}