/* Shared styles for the login, sign-up and password reset pages. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green:      #1A3C2E;
  --green-deep: #122A21;
  --green-soft: #2A5240;
  --cream:      #F4EEDF;
  --cream-warm: #ECE2CC;
  --bg:         #FAF6EC;
  --ink:        #1B2620;
  --ink-2:      #4A5A52;
  --ink-3:      #8A9389;
  --rule:       #DDD3BC;
  --gold:       #B98C3E;
  --white:      #FFFFFF;
}

body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--green); color: var(--cream);
  min-height: 100vh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

.topmark { text-align: center; padding: 32px 24px 0; }
.topmark__name {
  font-family: 'Instrument Serif', serif;
  font-size: 22px; color: var(--cream);
  letter-spacing: 0.02em;
  text-decoration: none;
}
.topmark__name .dot {
  display: inline-block; width: 6px; height: 6px;
  background: var(--gold); border-radius: 50%;
  vertical-align: middle; margin: 0 8px 4px;
}

.wrap {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 64px 24px;
}

.card {
  background: var(--bg); color: var(--ink);
  border-radius: 12px;
  max-width: 440px; width: 100%;
  padding: 48px 40px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.25);
}

.card__header {
  text-align: center;
  margin-bottom: 32px;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px;
}
.eyebrow::before, .eyebrow::after {
  content: ""; width: 18px; height: 1px;
  background: currentColor; opacity: 0.5;
}

h1 {
  font-family: 'Instrument Serif', serif; font-weight: 400;
  font-size: clamp(28px, 4vw, 34px);
  line-height: 1.1; color: var(--ink);
  margin-bottom: 8px;
}
h1 .it { font-style: italic; color: var(--green); }

.subtitle {
  font-size: 14px; line-height: 1.6;
  color: var(--ink-2);
}

/* Form */
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-size: 13px; font-weight: 600;
  color: var(--ink); margin-bottom: 6px;
  letter-spacing: 0.01em;
}
.form-group input {
  width: 100%;
  padding: 14px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.15s ease;
}
.form-group input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(26, 60, 46, 0.1);
}
.form-group input::placeholder { color: var(--ink-3); }

.btn {
  display: block; width: 100%;
  background: var(--ink); color: var(--cream);
  font-family: 'Inter', sans-serif;
  font-size: 15px; font-weight: 600;
  padding: 17px 30px; border-radius: 4px;
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
  text-align: center;
}
.btn:hover { background: var(--green); border-color: var(--green); transform: translateY(-1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* Messages */
.alert {
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 13px; line-height: 1.5;
  margin-bottom: 20px;
}
.alert--error {
  background: #FDF2F1;
  color: #B0392E;
  border: 1px solid #F0D4D1;
}
.alert--success {
  background: #F0F7F3;
  color: var(--green);
  border: 1px solid #C8DFD0;
}

.back-link {
  display: block;
  text-align: center;
  margin-top: 20px;
  font-size: 13px;
  color: var(--ink-3);
}
.back-link a {
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.back-link a:hover { color: var(--green); }

@media (max-width: 540px) {
  .card { padding: 36px 24px; }
}

.form-group__row {
  display: flex; justify-content: space-between; align-items: baseline;
}
.form-group__row a {
  font-size: 12px; color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 2px;
}
.form-group__row a:hover { color: var(--green); }
.hint { font-size: 12px; color: var(--ink-3); margin-top: 6px; }