:root {
  color-scheme: dark;
  --bg: #0b0f14;
  --panel: #10161d;
  --panel-2: #141c24;
  --line: #1f2a34;
  --text: #d9e2ea;
  --text-dim: #7b8a97;
  --blue: #029FDF;
  --cyan: #33C5E7;
  --orange: #F47820;
  --ok: #2fbf71;
  --danger: #e5484d;
  --gray: #3a4552;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--bg); font-family: var(--sans); color: var(--text); gap: 2.2rem;
}
.mark { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.mark svg { width: 44px; height: 44px; }
.mark .name { font-weight: 600; font-size: 1rem; letter-spacing: 0.01em; }

.card {
  width: 320px; max-width: 90vw; padding: 32px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,0.35);
}
@media (max-width: 400px) {
  .card { padding: 24px; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Landmark only — stays transparent to the body's own flex centering. */
main { display: contents; }

.field-wrap { position: relative; margin-top: 16px; }
.field-wrap:first-child { margin-top: 0; }
.field-wrap .icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-dim); pointer-events: none; margin: 0; width: auto;
}

/* Field state colors — a soft wash over the existing dark input, not a literal
   light background (this stays dark-mode). */
input {
  width: 100%; padding: 10px 12px 10px 36px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); color: var(--text); font-size: 14px; outline: none;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
input::placeholder { color: var(--text-dim); opacity: 0.7; }
input:focus { border-color: var(--blue); }
input.st-empty { background-color: rgba(148,163,184,0.08); }
input.st-filled { background-color: rgba(244,120,32,0.15); border-color: rgba(244,120,32,0.35); }
input.st-success { background-color: rgba(47,191,113,0.25); border-color: var(--ok); }
input.st-error { background-color: rgba(229,72,77,0.25); border-color: var(--danger); }

/* Kill the browser's forced yellow/olive autofill background — this is almost
   certainly where an unexpected color like #726c00 comes from. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0px 1000px var(--bg) inset;
  box-shadow: 0 0 0px 1000px var(--bg) inset;
  transition: background-color 5000s ease-in-out 0s;
}

.error { margin-top: 14px; font-size: 13px; color: var(--danger); display: none; }

.forgot-link { margin-top: 16px; text-align: center; }
.forgot-link a { color: var(--text-dim); font-size: 13px; text-decoration: none; }
.forgot-link a:hover { color: var(--blue); text-decoration: underline; }

/* ---------- Sign-in button: color/motion only, no label ---------- */
button {
  width: 100%; margin-top: 20px; height: 42px; border-radius: 8px; cursor: pointer;
  border: 2px solid var(--gray);
  background: var(--gray);
  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
button:disabled { cursor: default; opacity: 0.55; }

/* Active: both fields filled — hollow button, animated green/blue gradient stroke. */
@keyframes strokeMove {
  0%   { background-position: 0 0, 0% 0; }
  100% { background-position: 0 0, 100% 0; }
}
button.btn-active {
  border-color: transparent;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(90deg, var(--ok), var(--blue), var(--cyan), var(--ok)) border-box;
  background-size: 100% 100%, 300% 100%;
  animation: strokeMove 1.6s linear infinite;
}
button.btn-active:hover {
  background: rgba(2,159,223,0.35);
  border-color: var(--blue);
  box-shadow: 0 0 16px rgba(2,159,223,0.55);
}
button.btn-active:active {
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 0 24px rgba(2,159,223,0.85);
}

/* Success: match the field bounce feeling on the button too, briefly. */
@keyframes cardBounce {
  0%   { transform: scale(1); }
  15%  { transform: scale(1.02); }
  32%  { transform: scale(0.991); }
  48%  { transform: scale(1.012); }
  64%  { transform: scale(0.997); }
  80%  { transform: scale(1.005); }
  92%  { transform: scale(0.999); }
  100% { transform: scale(1); }
}
.card.bounce { animation: cardBounce 0.9s cubic-bezier(.34,1.4,.64,1) both; }

@keyframes cardShake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-4px); }
  30% { transform: translateX(4px); }
  45% { transform: translateX(-3px); }
  60% { transform: translateX(3px); }
  75% { transform: translateX(-1.5px); }
  90% { transform: translateX(1.5px); }
}
.card.shake { animation: cardShake 0.45s ease both; }

/* 2026-09-20 user request: the logo pulse should always play regardless of
   the browser/OS's prefers-reduced-motion setting — it's ambient/decorative
   (loops on its own, never triggered by an interaction), unlike the card
   shake/bounce below which fire in direct response to a submit and are the
   more likely candidate for causing discomfort, so those still respect it. */
@media (prefers-reduced-motion: reduce) {
  .card.bounce, .card.shake, button.btn-active { animation: none; }
}

/* ---------- Logo mark pulse ---------- */
@keyframes beamPulse {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}
.beam {
  animation-name: beamPulse;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  opacity: 0;
}
.beam-inner  { animation-delay: 0s; }
.beam-middle { animation-delay: 0.5s; }
.beam-outer  { animation-delay: 1s; }