/* Shared layout for the auth pages. Two variants:
   body.hero  — photo-backed split layout (login, signup)
   body.plain — centered card on the app ground (reset) */
* { box-sizing: border-box; margin: 0; }
body {
  background: var(--sbg); color: var(--stext);
  font-family: var(--sfont); min-height: 100vh;
}
body.hero {
  background:
    linear-gradient(rgba(18, 16, 15, .7), rgba(18, 16, 15, .7)),
    url('/assets/fencing_bg.jpg') center 30% / cover no-repeat;
  padding: 64px 32px;
}
body.plain { display: grid; place-items: start center; padding: 64px 24px; }

.split {
  max-width: 1160px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: 56px; align-items: center;
}
.pitch { color: #fff; }
.pitch .word { font: 700 24px/1 var(--sfont); }
.pitch .word em { color: #ff6a50; font-style: normal; }
.pitch .tag {
  font: 600 11px/1 var(--sfont); letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255, 255, 255, .75); margin-top: 44px;
}
.pitch h1 {
  font: 700 clamp(38px, 4.6vw, 60px)/1.05 var(--sfont);
  letter-spacing: -.02em; margin-top: 18px;
}
.pitch p { font: 400 16px/1.6 var(--sfont); color: rgba(255, 255, 255, .85); margin-top: 20px; max-width: 440px; }
.pitch .fine { font: 400 13px/1.5 var(--sfont); color: rgba(255, 255, 255, .6); margin-top: 40px; }

.cardcol { display: grid; justify-items: center; }
.cardwrap { width: 100%; max-width: 420px; }
.card { border: 2px solid var(--stext); padding: 36px 32px; background: var(--ssurf); }
.card .word { font: 700 22px/1 var(--sfont); color: var(--stext); }
.card .word em { color: var(--sacc); font-style: normal; }
.card h2 { font: 700 22px/1 var(--sfont); color: var(--stext); }
.card .sub { font: 400 13.5px/1.55 var(--sfont); color: var(--smut2); margin-top: 16px; }
label { display: block; font: 600 12px/1 var(--sfont); color: var(--smut2); margin: 18px 0 8px; }
input {
  width: 100%; background: var(--sbg); border: 2px solid var(--sdiv);
  color: var(--stext); font: 400 14px/1.4 var(--sfont); padding: 11px 12px;
  border-radius: 0;
}
input:hover { border-color: var(--smut2); }
button {
  width: 100%; background: var(--sacc); color: #fff; border: 0; border-radius: 0;
  padding: 13px 18px; font: 600 14px/1 var(--sfont); cursor: pointer; margin-top: 22px;
}
button:hover { background: var(--sacc-hover); }
.cardlinks { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; font: 400 12.5px/1 var(--sfont); }
.cardlinks a { text-decoration: none; cursor: pointer; white-space: nowrap; }
.cardlinks a.acc { color: var(--sacctext); }
.cardlinks a.quiet { color: var(--smut); }
.cardlinks a.quiet:hover { color: var(--stext); }
.undercard { font: 400 12px/1.6 var(--sfont); margin-top: 16px; }
body.hero .undercard { color: rgba(255, 255, 255, .7); }
body.plain .undercard { color: var(--smut); }
.undercard a { color: #ff8a75; text-decoration: none; cursor: pointer; white-space: nowrap; }
body.plain .undercard a { color: var(--sacctext); }
.okmsg { font: 400 14px/1.6 var(--sfont); color: var(--smut2); margin-top: 18px; }
.okmsg b { color: var(--sok); }
.okmsg a { color: var(--sacctext); }
#error { color: var(--sacctext); font-size: 13.5px; font-weight: 600; margin-top: 12px; min-height: 18px; }