/* Yangle guest experience: deliberately dark, regardless of the signed-in theme.
   Only #app > .auth (login, signup, onboarding) is affected. After the
   authenticated shell mounts, normal saved light/dark settings apply again. */
html body:has(#app > .auth) {
  background:
    radial-gradient(ellipse 780px 460px at 50% -130px, rgba(23, 155, 85, .15), transparent 75%),
    radial-gradient(ellipse 540px 400px at 98% 100%, rgba(29, 105, 68, .07), transparent 78%),
    #0b1710 !important;
  color: #edf7ee;
}

#app > .auth {
  --bg: #0b1710;
  --surface: #14251b;
  --surface-2: #1b3023;
  --line: rgba(207, 246, 216, .11);
  --line-strong: rgba(207, 246, 216, .23);
  --text: #edf7ee;
  --muted: #a4b9a9;
  --g1: #cbf55c;
  --g2: #29b869;
  --g3: #119b55;
  --danger: #ff8491;
  --grad: linear-gradient(112deg, #cbf55c, #59cb67 55%, #18a85d);
  color: var(--text);
  color-scheme: dark;
  min-height: 100vh;
  min-height: 100dvh;
  background: transparent;
}

#app > .auth .auth-card.card {
  border: 1px solid var(--line-strong);
  background: linear-gradient(154deg, #172a1f 0%, #112117 80%);
  box-shadow: 0 24px 72px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .035);
}

#app > .auth .auth-logo h1 {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#app > .auth .auth-logo p,
#app > .auth .field label,
#app > .auth .hint,
#app > .auth .divider {
  color: var(--muted);
}

#app > .auth :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"]) {
  background-color: #203529;
  border: 1px solid var(--line-strong);
  color: var(--text);
  caret-color: #cbf55c;
}
#app > .auth input::placeholder { color: #91a798; opacity: 1; }
#app > .auth input:focus {
  border-color: #73d18a;
  box-shadow: 0 0 0 3px rgba(78, 204, 112, .15);
}

/* Chrome autofill should not turn saved login details into bright blue cards. */
#app > .auth input:-webkit-autofill,
#app > .auth input:-webkit-autofill:hover,
#app > .auth input:-webkit-autofill:focus {
  -webkit-text-fill-color: #edf7ee;
  -webkit-box-shadow: 0 0 0 1000px #203529 inset;
  box-shadow: 0 0 0 1000px #203529 inset;
  caret-color: #cbf55c;
}

#app > .auth .tabs {
  background: #223b2a;
}
#app > .auth .tabs button { color: #afc5b4; }
#app > .auth .tabs button.on {
  background: #14291b;
  color: #c8f476;
  box-shadow: 0 0 0 1px rgba(202, 245, 173, .19);
}

#app > .auth .btn:not(.ghost) {
  background: var(--grad);
  color: #0b2415;
}
#app > .auth .btn.ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
#app > .auth .btn.ghost:hover { background: rgba(201, 245, 202, .065); }
#app > .auth .linkish { color: #93df9a; }
#app > .auth .divider::before,
#app > .auth .divider::after { background: var(--line); }

@media (max-width: 480px) {
  #app > .auth { padding: 16px; }
  #app > .auth .auth-card { padding: 25px 20px; }
}