/* OddStorm auth — EXACT palette from www.oddstorm.com /login form.
 *
 *   body bg           #fff
 *   form/box bg       #f2f2f2
 *   button bg         #79b247    shadow bottom #58872a   text #fff
 *   input border      #e5e5e5    input text #858585
 *   link              #71994a    hover #333
 *   page text         #5d5d5d
 *   font              "Gudea", Arial, sans-serif  (loaded via Google Fonts)
 *
 * All four values pulled live from /css/style.css `.login-form` block
 * on 2026-05-13. No new accents, no improvements — exact 1:1 with site.
 */

@import url('https://fonts.googleapis.com/css?family=Gudea:400,400italic,700&subset=latin,latin-ext');

:root {
  --bg:           #fff;
  --bg-form:      #f2f2f2;
  --bg-input:     #fff;
  --border:       #e5e5e5;
  --border-focus: #79b247;
  --fg:           #5d5d5d;
  --fg-strong:    #333;
  --fg-input:     #858585;
  --fg-dim:       #858585;
  --link:         #71994a;
  --link-hover:   #333;
  --btn:          #79b247;
  --btn-hover:    #6ba33d;
  --btn-shadow:   #58872a;
  --btn-fg:       #fff;
  --error:        #c0392b;
  --error-bg:     #fdecea;
  --error-border: #f5c0bb;
  --radius:       2px;
}

* { box-sizing: border-box; }

/* Body font matches www.oddstorm.com `body { font: 62.5%/1.3em Arial, Verdana, sans-serif }`.
 * Site overrides element-by-element to ~12px Arial; headings + buttons use Gudea.
 * I keep that split: Arial for body/inputs/labels, Gudea for h1 + buttons.
 */
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.4 Arial, Verdana, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

/* Two-orb glow background — pattern lifted from foura.ai .hero-section::before/::after.
 * Same dimensions + blur(64px) + circular shape, but tinted с OddStorm green
 * (#79b247 RGB 121,178,71) at light-theme intensity (~0.10-0.14 alpha).
 * z-index: -1 keeps them strictly behind card + footer.
 */
.auth-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  gap: 20px;
  isolation: isolate;
  position: relative;
  overflow: hidden;
}
.auth-shell::before,
.auth-shell::after {
  content: "";
  position: absolute;
  border-radius: 9999px;
  filter: blur(64px);
  pointer-events: none;
  z-index: -1;
  will-change: transform;
  transform: translateZ(0);
}
.auth-shell::before {
  background: rgba(121, 178, 71, 0.18);   /* #79b247 — OddStorm light green */
  width: 60vw; max-width: 28rem;
  height: 60vw; max-height: 28rem;
  top: 8vh;
  left: -5vw;
}
.auth-shell::after {
  background: rgba(88, 135, 42, 0.20);    /* #58872a — OddStorm dark green */
  width: 65vw; max-width: 30rem;
  height: 65vw; max-height: 30rem;
  bottom: 8vh;
  right: -5vw;
}

.brand-mark {
  display: inline-flex;
  text-decoration: none;
}
.brand-mark img {
  display: block;
  width: 48px; height: 48px;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg-form);
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 14px;
}
@media (max-width: 480px) {
  .auth-shell { padding: 20px 12px; gap: 16px; }
  .auth-card { padding: 22px 18px; }
}

h1 {
  font-family: "Gudea", Arial, sans-serif;
  font-size: 26px;
  line-height: 1.2em;
  margin: 0;
  font-weight: bold;
  color: var(--fg-strong);
  text-align: center;
}
.subtitle {
  color: var(--fg);
  margin: 0 0 4px;
  font-size: 15px;
  text-align: center;
}
.subtitle a {
  color: var(--link);
  text-decoration: underline;
}
.subtitle a:hover { color: var(--link-hover); text-decoration: none; }

.email-target { margin: 0; font-size: 17px; color: var(--fg-strong); text-align: center; }

form {
  display: flex; flex-direction: column; gap: 12px;
  margin-top: 4px;
}

label {
  display: flex; flex-direction: column;
  gap: 5px;
  position: relative;
}
.label-text {
  font-family: Arial, Verdana, sans-serif;
  font-size: 14px;
  color: var(--fg-strong);
  font-weight: bold;
}

input[type=text],
input[type=email],
input[type=password] {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--fg-input);
  font-family: Arial, Verdana, sans-serif;
  font-size: 15px;
  padding: 8px 10px;
  border-radius: var(--radius);
  outline: none;
  transition: border-color 120ms ease;
  width: 100%;
  height: 40px;
}
input::placeholder { color: #b8b8b8; }
input:focus {
  border-color: var(--border-focus);
  color: var(--fg-strong);
}

.eye {
  position: absolute;
  right: 4px;
  bottom: 0;
  height: 40px;
  width: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  color: var(--fg-input);
  cursor: pointer;
  font-size: 18px;
  border-radius: 2px;
}
.eye:hover { color: var(--fg-strong); }

/* Button matches www.oddstorm.com .login-form button EXACTLY:
 *   font-family: "Gudea", sans-serif; font-size: 17px; font-weight: bold;
 *   background: #79b247; box-shadow: 0 1px 0 #58872a; border-radius: 2px;
 */
button[type=submit],
.btn-primary,
.btn-secondary {
  font-family: "Gudea", sans-serif;
  font-size: 21px;
  font-weight: bold;
  padding: 13px 18px;
  border-radius: var(--radius);
  cursor: pointer;
  border: 0 none;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background-color 120ms ease;
  margin-top: 8px;
}
button[type=submit], .btn-primary {
  background: var(--btn);
  color: var(--btn-fg);
  box-shadow: 0 1px 0 var(--btn-shadow);
}
button[type=submit]:hover, .btn-primary:hover { background: var(--btn-hover); }
button[type=submit]:active, .btn-primary:active { box-shadow: none; transform: translateY(1px); }
button[type=submit]:focus-visible, .btn-primary:focus-visible { outline: 2px solid #58872a; outline-offset: 2px; }

.btn-secondary {
  background: #fff;
  color: var(--fg-strong);
  border: 1px solid var(--border);
  box-shadow: none;
}
.btn-secondary:hover { background: #f5f5f5; }

.alert {
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 14px;
}
.alert-error {
  background: var(--error-bg);
  color: var(--error);
  border: 1px solid var(--error-border);
}

.success-icon, .error-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px;
  align-self: center;
  margin-bottom: 4px;
}
.success-icon { background: rgba(121,178,71,0.15); color: var(--btn-shadow); }
.error-icon   { background: var(--error-bg); color: var(--error); }

.row-between {
  display: flex; justify-content: flex-end; align-items: center;
  font-size: 14px;
  margin-top: -2px;
}
.forgot-link {
  color: var(--link);
  text-decoration: underline;
}
.forgot-link:hover { color: var(--link-hover); text-decoration: none; }

.tos {
  color: var(--fg-dim);
  font-size: 13px;
  margin: 6px 0 0;
  line-height: 1.5;
  text-align: center;
}
.tos a { color: var(--link); text-decoration: underline; }
.tos a:hover { color: var(--link-hover); text-decoration: none; }

.hint {
  color: var(--fg);
  font-size: 15px;
  margin: 0;
  text-align: center;
}
.hint a { color: var(--link); text-decoration: underline; }
.hint a:hover { color: var(--link-hover); text-decoration: none; }

.cf-turnstile { margin-top: 4px; display: flex; justify-content: center; }

.auth-footer {
  display: flex; gap: 12px; justify-content: center; align-items: center;
  padding: 0 16px;
  font-size: 13px;
  color: var(--fg-dim);
}
.auth-footer a {
  color: var(--link);
  text-decoration: underline;
}
.auth-footer a:hover { color: var(--link-hover); text-decoration: none; }