.auth-page {
  min-height: 100svh;
  overflow-x: hidden;
  background: #08090b;
}

.auth-page main { z-index: 2; }

.auth-topbar {
  position: fixed;
  z-index: 30;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 5rem;
  padding-inline: clamp(1.25rem, 3vw, 3rem);
  pointer-events: none;
}

.auth-topbar > * { pointer-events: auto; }

.auth-back {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: rgba(237,242,238,.72);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-decoration: none;
  text-transform: uppercase;
}

.auth-back i {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid rgba(218,235,225,.13);
  border-radius: 50%;
  font-style: normal;
  transition: border-color 200ms ease, transform 250ms var(--ease);
}

.auth-back:hover i { border-color: var(--green-light); transform: translateX(-.15rem); }

.auth-secure {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: #6e7a73;
  font: 500 .58rem "IBM Plex Mono", monospace;
  letter-spacing: .12em;
}

.auth-secure i {
  width: .38rem;
  height: .38rem;
  border-radius: 50%;
  background: var(--green-light);
  box-shadow: 0 0 10px rgba(54,177,151,.7);
  transition: background 600ms ease, box-shadow 600ms ease;
}

.auth-page:has([data-mode="signup"]) .auth-secure i {
  background: var(--orange-light);
  box-shadow: 0 0 10px rgba(203,125,52,.7);
}

.auth-layout {
  position: relative;
  display: grid;
  min-height: max(100svh, 51rem);
  padding: 4.7rem 1rem 2.3rem;
  place-items: center;
  overflow: hidden;
  perspective: 1600px;
  isolation: isolate;
}

.auth-ambient {
  position: absolute;
  z-index: -2;
  width: min(78vw, 64rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15,123,101,.17), rgba(8,9,11,.08) 48%, transparent 70%);
  filter: blur(16px);
  transition: background 800ms ease;
}

[data-mode="signup"] .auth-ambient {
  background: radial-gradient(circle, rgba(191,113,48,.16), rgba(8,9,11,.08) 48%, transparent 70%);
}

.auth-card-scene {
  position: relative;
  z-index: 2;
  width: min(46rem, calc(100vw - 5rem));
  height: min(49rem, calc(100svh - 6rem));
  min-height: 43rem;
  perspective: 1500px;
  filter: drop-shadow(0 2rem 4rem rgba(0,0,0,.42));
}

.auth-card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 950ms cubic-bezier(.22,.78,.25,1);
  will-change: transform;
}

[data-mode="signup"] .auth-card { transform: rotateY(180deg); }
.auth-card.is-session { transform: none !important; }

.auth-face {
  --accent: #36b197;
  --accent-strong: #0f7b65;
  --accent-rgb: 54,177,151;
  position: absolute;
  inset: 0;
  display: grid;
  overflow: hidden;
  place-items: center;
  padding: 3.7rem 7rem;
  clip-path: polygon(17% 0, 83% 0, 100% 50%, 83% 100%, 17% 100%, 0 50%);
  border: 0;
  background:
    radial-gradient(circle at 50% 44%, rgba(var(--accent-rgb),.15), transparent 45%),
    linear-gradient(145deg, rgba(13,20,17,.97), rgba(7,10,9,.985));
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.auth-face::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .48;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='48' viewBox='0 0 42 48'%3E%3Cpath d='M21 1 41 12v24L21 47 1 36V12Z' fill='none' stroke='%2336b197' stroke-opacity='.22' stroke-width='.8'/%3E%3C/svg%3E");
  background-size: 42px 48px;
  mask-image: radial-gradient(circle at center, transparent 0 43%, #000 71%);
  pointer-events: none;
}

.auth-face::after {
  content: "";
  position: absolute;
  inset: 2px;
  clip-path: inherit;
  background: linear-gradient(120deg, rgba(var(--accent-rgb),.34), transparent 24% 76%, rgba(var(--accent-rgb),.18));
  opacity: .55;
  pointer-events: none;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  padding: 1px;
}

.auth-face--signup {
  --accent: #cb7d34;
  --accent-strong: #9f5925;
  --accent-rgb: 203,125,52;
  transform: rotateY(180deg);
}

.auth-face--signup::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='48' viewBox='0 0 42 48'%3E%3Cpath d='M21 1 41 12v24L21 47 1 36V12Z' fill='none' stroke='%23cb7d34' stroke-opacity='.23' stroke-width='.8'/%3E%3C/svg%3E");
}

.auth-face__content {
  position: relative;
  z-index: 2;
  width: min(100%, 27rem);
}

.hex-rim {
  position: absolute;
  z-index: 1;
  width: min(49rem, calc(100vw - 2rem));
  height: min(51rem, calc(100svh - 4.8rem));
  min-height: 45rem;
  color: var(--green-light);
  pointer-events: none;
  transition: color 700ms ease, filter 700ms ease;
  filter: drop-shadow(0 0 1.1rem rgba(54,177,151,.17));
}

[data-mode="signup"] .hex-rim {
  color: var(--orange-light);
  filter: drop-shadow(0 0 1.1rem rgba(203,125,52,.18));
}

.hex-rim span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  aspect-ratio: .88;
  translate: -50% -50%;
  rotate: var(--rotation);
  clip-path: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%);
  background: color-mix(in srgb, currentColor 17%, #08090b);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 58%, transparent);
  opacity: var(--opacity);
  transition: background 650ms ease, box-shadow 650ms ease;
}

.auth-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .25rem;
  padding: .27rem;
  border: 1px solid rgba(var(--accent-rgb),.19);
  border-radius: .75rem;
  background: rgba(255,255,255,.025);
}

.auth-mode button {
  min-height: 2.55rem;
  border: 0;
  border-radius: .54rem;
  background: transparent;
  color: #7c8881;
  cursor: pointer;
  font-size: .77rem;
  font-weight: 620;
  transition: color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}

.auth-mode button.is-active {
  background: rgba(var(--accent-rgb),.15);
  color: #f1f7f3;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.27), 0 0 1.4rem rgba(var(--accent-rgb),.08);
}

.auth-heading { margin: 1.6rem 0 1.35rem; }
.auth-heading .eyebrow { color: var(--accent); }

.auth-heading h1 {
  margin: .62rem 0 .5rem;
  font-size: clamp(2.1rem, 4vw, 3.35rem);
  font-weight: 430;
  letter-spacing: -.065em;
  line-height: .98;
  outline: none;
}

.auth-heading > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: .88rem;
}

.google-slot {
  display: grid;
  min-height: 44px;
  overflow: hidden;
  place-items: center;
  border-radius: .52rem;
}

.google-slot > div { max-width: 100%; }
.google-slot iframe { max-width: 100% !important; }

.google-button,
.submit-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.08rem;
  border-radius: .52rem;
  cursor: pointer;
}

.google-button {
  border: 1px solid rgba(var(--accent-rgb),.21);
  background: rgba(255,255,255,.025);
  color: #dfe7e2;
  font-weight: 600;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 1.05rem 0;
  color: #5e6862;
  font: 500 .54rem "IBM Plex Mono", monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(var(--accent-rgb),.14);
}

.auth-form { display: grid; gap: .78rem; }

.auth-form label {
  display: grid;
  gap: .34rem;
  color: #a8b2ac;
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .025em;
}

.auth-form input:not([type="checkbox"]) {
  width: 100%;
  height: 2.88rem;
  padding: 0 .82rem;
  border: 1px solid rgba(var(--accent-rgb),.16);
  border-radius: .48rem;
  outline: 0;
  background: rgba(255,255,255,.025);
  color: var(--text);
  font: 400 .86rem "Space Grotesk", sans-serif;
  transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease;
}

.auth-form input::placeholder { color: #525c56; }

.auth-form input:focus {
  border-color: rgba(var(--accent-rgb),.72);
  background: rgba(var(--accent-rgb),.035);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.09);
}

.password-field { position: relative; display: block; }
.password-field input { padding-right: 4.5rem !important; }

.password-field button,
.text-button {
  border: 0;
  background: none;
  color: var(--accent);
  cursor: pointer;
  font-size: .66rem;
  font-weight: 600;
}

.password-field button {
  position: absolute;
  top: 50%;
  right: .8rem;
  translate: 0 -50%;
}

.auth-form__options {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.check {
  display: flex !important;
  grid-template-columns: auto !important;
  align-items: center;
  gap: .5rem !important;
  color: #7e8983 !important;
  cursor: pointer;
  font-weight: 400 !important;
}

.check input { position: absolute; opacity: 0; }

.check > span {
  display: block;
  flex: 0 0 auto;
  width: .88rem;
  height: .88rem;
  border: 1px solid rgba(var(--accent-rgb),.3);
  border-radius: .2rem;
}

.check input:checked + span {
  border-color: var(--accent);
  background: var(--accent-strong);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.18);
}

.check--terms { align-items: flex-start; line-height: 1.35; }

.field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
}

.submit-button {
  justify-content: space-between;
  padding-inline: 1.05rem;
  border: 1px solid rgba(var(--accent-rgb),.34);
  background: linear-gradient(110deg, var(--accent-strong), var(--accent));
  color: white;
  font-weight: 650;
  box-shadow: 0 .8rem 2rem rgba(var(--accent-rgb),.12);
  transition: filter 200ms ease, transform 200ms ease;
}

.submit-button:hover { filter: brightness(1.12); transform: translateY(-1px); }
.submit-button:disabled { cursor: wait; opacity: .6; }
.submit-button span:last-child { font-size: 1.05rem; }

.auth-feedback {
  min-height: 1.15rem;
  margin: .72rem 0 0;
  color: var(--accent);
  font-size: .68rem;
  text-align: center;
}

.auth-note {
  margin: .12rem 0 0;
  color: #4f5953;
  font: 500 .49rem "IBM Plex Mono", monospace;
  letter-spacing: .05em;
  text-align: center;
  text-transform: uppercase;
}

.auth-flip-hint {
  position: absolute;
  right: 0;
  bottom: .7rem;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin: 0;
  color: #4f5a54;
  font: 500 .52rem "IBM Plex Mono", monospace;
  letter-spacing: .13em;
}

.auth-flip-hint span {
  width: .34rem;
  height: .34rem;
  rotate: 30deg;
  background: var(--green-light);
  transition: background 650ms ease;
}

[data-mode="signup"] .auth-flip-hint span { background: var(--orange-light); }

.auth-face--session {
  transform: none;
  text-align: center;
}

.auth-signed-in .eyebrow { margin-bottom: 1.5rem; color: var(--accent); }

.auth-avatar {
  display: grid;
  width: 5.5rem;
  height: 5.5rem;
  margin: 0 auto 1.4rem;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(var(--accent-rgb),.32);
  border-radius: 50%;
  background: rgba(var(--accent-rgb),.1);
  color: var(--accent);
  font-size: 2rem;
  box-shadow: 0 0 2rem rgba(var(--accent-rgb),.12);
}

.auth-avatar img { width: 100%; height: 100%; object-fit: cover; }

.auth-signed-in h1 {
  margin: 0;
  font-size: clamp(2.4rem, 4vw, 3.8rem);
  font-weight: 430;
  letter-spacing: -.065em;
  line-height: 1;
}

.auth-signed-in__email {
  margin: .7rem 0 0;
  color: var(--accent);
  font: 500 .72rem "IBM Plex Mono", monospace;
}

.auth-signed-in__message {
  max-width: 24rem;
  margin: 2rem auto;
  color: var(--muted);
  line-height: 1.65;
}

.auth-signed-in .submit-button { max-width: 20rem; margin-inline: auto; }

@media (max-width: 50rem) {
  .auth-topbar { height: 4.4rem; }
  .auth-secure { display: none; }

  .auth-layout {
    min-height: 55rem;
    padding: 4.4rem .45rem 2.6rem;
    overflow: hidden;
  }

  .auth-card-scene {
    width: min(100%, 28rem);
    height: 48.5rem;
    min-height: 48.5rem;
  }

  .auth-face {
    padding: 3.7rem 3.2rem;
    clip-path: polygon(11% 0, 89% 0, 100% 50%, 89% 100%, 11% 100%, 0 50%);
  }

  .hex-rim {
    width: min(100%, 30rem);
    height: 50.5rem;
    min-height: 50.5rem;
  }

  .auth-heading { margin: 1.25rem 0 1.1rem; }
  .auth-heading h1 { font-size: 2.35rem; }
  .auth-form { gap: .7rem; }
}

@media (max-width: 25rem) {
  .auth-back span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .auth-face { padding-inline: 2.7rem; }
  .field-pair { grid-template-columns: 1fr; }
  .auth-card-scene { height: 52rem; min-height: 52rem; }
  .hex-rim { height: 54rem; min-height: 54rem; }
  .auth-layout { min-height: 58rem; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-card { transition: none; }
  .hex-rim, .auth-ambient { transition: none; }
}

/* visual pass: strong macro hex */
.auth-card-scene {
  width: min(58rem, calc(100vw - 7rem));
  height: min(44rem, calc(100svh - 6.5rem));
  min-height: 42rem;
  filter: drop-shadow(0 2rem 4.5rem rgba(0,0,0,.58)) drop-shadow(0 0 1.8rem rgba(54,177,151,.13));
}

[data-mode="signup"] .auth-card-scene {
  filter: drop-shadow(0 2rem 4.5rem rgba(0,0,0,.58)) drop-shadow(0 0 1.8rem rgba(203,125,52,.15));
}

.auth-face {
  padding: 3.25rem clamp(6.8rem, 13vw, 12rem);
  background:
    radial-gradient(circle at 50% 44%, rgba(var(--accent-rgb),.32), transparent 48%),
    linear-gradient(145deg, rgba(var(--accent-rgb),.16), rgba(13,19,17,.985) 42%, rgba(6,9,8,.995));
}

.auth-face::before {
  opacity: .84;
  mask-image: radial-gradient(circle at center, transparent 0 32%, #000 74%);
}

.auth-face::after {
  inset: 1px;
  padding: 2px;
  opacity: .96;
  background: linear-gradient(120deg, rgba(var(--accent-rgb),.92), rgba(var(--accent-rgb),.2) 28% 72%, rgba(var(--accent-rgb),.72));
}

.auth-face__content { width: min(100%, 28.5rem); }

.hex-rim {
  width: min(62rem, calc(100vw - 3rem));
  height: min(47rem, calc(100svh - 4rem));
  min-height: 45rem;
  filter: drop-shadow(0 0 1.8rem rgba(54,177,151,.52));
}

[data-mode="signup"] .hex-rim {
  filter: drop-shadow(0 0 1.8rem rgba(203,125,52,.55));
}

.hex-rim::before {
  position: absolute;
  inset: .72rem;
  padding: 3px;
  clip-path: polygon(17% 0, 83% 0, 100% 50%, 83% 100%, 17% 100%, 0 50%);
  background: linear-gradient(120deg, currentColor, color-mix(in srgb, currentColor 26%, transparent) 38% 62%, currentColor);
  content: "";
  opacity: .96;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.hex-rim span {
  background: color-mix(in srgb, currentColor 52%, #08090b);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, currentColor 100%, transparent),
    0 0 .75rem color-mix(in srgb, currentColor 72%, transparent);
}

.google-entry {
  display: grid;
  grid-template-columns: minmax(0,1fr) 2.75rem;
  align-items: center;
  gap: .85rem;
  min-height: 3.55rem;
  padding: .34rem .42rem .34rem 1rem;
  border: 1px solid rgba(var(--accent-rgb),.32);
  border-radius: .8rem;
  background:
    linear-gradient(100deg, rgba(var(--accent-rgb),.13), transparent 58%),
    rgba(4,7,6,.72);
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 .75rem 2rem rgba(0,0,0,.18);
}

.google-entry__copy { display: grid; gap: .08rem; min-width: 0; }
.google-entry__copy strong { color: #edf2ee; font-size: .82rem; font-weight: 620; letter-spacing: -.01em; }
.google-entry__copy small { color: #69766f; font: 500 .5rem "IBM Plex Mono", monospace; letter-spacing: .055em; text-transform: uppercase; }

.google-slot {
  width: 44px;
  min-height: 44px;
  overflow: visible;
  place-items: center;
}

.google-slot > div { width: 44px !important; height: 44px !important; }
.google-slot iframe { width: 44px !important; max-width: none !important; border-radius: 50%; }

.google-button--preview {
  width: 44px;
  min-height: 44px;
  border-color: rgba(255,255,255,.16);
  border-radius: 50%;
  background: #f7f7f7;
  color: #4285f4;
  font: 700 1rem Arial, sans-serif;
}

@media (max-width: 50rem) {
  .auth-card-scene {
    width: min(100%, 28rem);
    height: 48.5rem;
    min-height: 48.5rem;
  }

  .auth-face {
    padding: 3.7rem 3.2rem;
    clip-path: polygon(11% 0, 89% 0, 100% 50%, 89% 100%, 11% 100%, 0 50%);
  }

  .hex-rim {
    width: min(100%, 30rem);
    height: 50.5rem;
    min-height: 50.5rem;
  }

  .hex-rim::before {
    inset: .55rem;
    clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
  }
}

@media (max-width: 25rem) {
  .auth-face { padding-inline: 2.7rem; }
  .auth-card-scene { height: 52rem; min-height: 52rem; }
  .hex-rim { height: 54rem; min-height: 54rem; }
}