/* Purpose-built registration panel: calm, readable, and touch-friendly. */
.auth-sheet {
  width: min(92vw, 460px);
  max-width: 460px;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 26px;
  overflow: visible;
  color: #24392f;
  background: transparent;
  box-shadow: none;
}
.auth-sheet::backdrop { background: rgba(20, 38, 31, .62); backdrop-filter: blur(5px); }
.auth-form {
  position: relative;
  display: grid;
  gap: 15px;
  padding: 34px 28px 27px;
  border: 1px solid rgba(36,57,47,.14);
  border-radius: 26px;
  background: linear-gradient(145deg, #fffef9 0%, #f4f2e8 100%);
  box-shadow: 0 24px 72px rgba(14,31,24,.33);
}
.auth-form .eyebrow { margin: 4px 42px 0 0; color: #5a7364; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.auth-form h2 { margin: 0; color: #183b2d; font: 600 clamp(30px, 8vw, 38px)/1.04 Georgia, 'Times New Roman', serif; letter-spacing: -.025em; }
.auth-form > p:not(.auth-error) { margin: -2px 0 5px; color: #53645a; font-size: 15px; line-height: 1.5; }
.auth-form label { display: grid; gap: 7px; color: #294437; font-size: 14px; font-weight: 700; }
.auth-form input {
  box-sizing: border-box;
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid #cdd7ce;
  border-radius: 12px;
  outline: none;
  color: #1d3026;
  background: #fff;
  font: 16px/1.2 system-ui, sans-serif;
}
.auth-form input:focus { border-color: #315f49; box-shadow: 0 0 0 4px rgba(49,95,73,.14); }
.auth-form .primary { width: 100%; min-height: 52px; margin-top: 5px; border-radius: 14px; font-size: 16px; font-weight: 800; }
.auth-form .auth-switch { justify-self: center; padding: 4px 0; color: #315f49; font-size: 14px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.auth-form .auth-error { min-height: 0; margin: -4px 0 0; color: #a22f27; font-size: 14px; font-weight: 700; }
.auth-form .close { position: absolute; top: 16px; right: 16px; display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 50%; color: #315f49; background: #e5ede5; font-size: 23px; line-height: 1; cursor: pointer; }
.auth-form .close:hover { background: #d5e2d5; }
@media (max-width: 420px) { .auth-sheet { width: calc(100vw - 28px); } .auth-form { padding: 30px 21px 24px; gap: 14px; } }