/* ============================================================
   Splash + Register + Login
   ============================================================ */

/* --- Splash ------------------------------------------------- */
.splash {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--s-6);
  text-align: center;
}

.splash__inner { display: flex; flex-direction: column; align-items: center; gap: var(--s-5); }

.splash__mark {
  width: 168px; height: 168px;
  border-radius: 50%;
  padding: 10px;
  background: var(--card, #171E11);
  border: 1px solid var(--line-card, #E3EDF330);
  box-shadow: var(--clay-3);
  animation: markIn .7s var(--ease) both;
}
@keyframes markIn {
  from { opacity: 0; transform: scale(.82) translateY(14px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.splash__word { font-size: 30px; letter-spacing: -.02em; animation: fadeUp .6s .18s var(--ease) both; }
.splash__word span { color: var(--gold-600); }

.splash__tag {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: 12px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft);
  animation: fadeUp .6s .3s var(--ease) both;
}
.splash__tag i { width: 4px; height: 4px; border-radius: 50%; background: var(--brand-300); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.splash__bar {
  width: 132px; height: 6px;
  border-radius: var(--r-pill);
  background: var(--card-sunk);
  box-shadow: var(--clay-in);
  overflow: hidden;
  animation: fadeUp .6s .42s var(--ease) both;
}
.splash__bar i {
  display: block; height: 100%; width: 40%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--lime-600, #84BE0A), var(--lime-100, #E0F952));
  animation: load 1.5s var(--ease) forwards;
}
@keyframes load { to { width: 100%; } }

/* --- Auth pages --------------------------------------------- */
.auth {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: var(--s-6) var(--s-4) var(--s-8);
}

.auth__head { text-align: center; margin-bottom: var(--s-6); }
.auth__mark {
  width: 84px; height: 84px;
  margin: 0 auto var(--s-4);
  border-radius: 50%;
  padding: 6px;
  background: var(--card, #171E11);
  border: 1px solid var(--line-card, #E3EDF330);
  box-shadow: var(--clay-2);
}
.auth__title { font-size: 26px; }
.auth__sub { margin-top: 6px; font-size: 14px; color: var(--ink-soft); font-weight: 600; }

.auth__card {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--s-6) var(--s-5);
  background: var(--card, #171E11);
  border: 1px solid var(--line-card, #E3EDF330);
  border-radius: var(--r-xl);
  box-shadow: var(--clay-2);
}

.auth__foot {
  margin-top: var(--s-5);
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
}
.auth__foot a { font-weight: 800; }

/* Earning strip under the auth card — tells a new user what the app pays for. */
.perks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
  max-width: var(--shell);
  margin: var(--s-5) auto 0;
}
.perk {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: var(--s-3) var(--s-2);
  background: var(--card, #171E11);
  border: 1px solid var(--line-card, #E3EDF330);
  border-radius: var(--r-md);
  box-shadow: var(--clay-1);
  text-align: center;
}
.perk svg { width: 22px; height: 22px; color: var(--brand-600); }
.perk b { font-size: 12px; font-weight: 800; }
.perk span { font-size: 10.5px; color: var(--ink-faint); font-weight: 700; line-height: 1.3; }

/* Terms checkbox */
.check {
  display: flex; align-items: flex-start; gap: var(--s-3);
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
  cursor: pointer;
}
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  margin-top: 1px;
  display: grid; place-items: center;
  border-radius: 7px;
  background: var(--card-sunk);
  box-shadow: var(--clay-in);
  transition: background .16s var(--ease);
}
.check__box svg { width: 14px; height: 14px; color: var(--on-brand, #0C1305); opacity: 0; transform: scale(.6); transition: .16s var(--ease); }
.check input:checked + .check__box {
  background: linear-gradient(180deg, var(--brand-500), var(--brand-600));
  box-shadow: var(--clay-brand);
}
.check input:checked + .check__box svg { opacity: 1; transform: scale(1); }
.check input:focus-visible + .check__box { outline: 3px solid var(--brand-500); outline-offset: 2px; }