:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #07100f;
  color: #f3f7f6;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 18% 8%, rgba(0, 211, 167, 0.13), transparent 34rem),
    #07100f;
}

.page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.card {
  width: min(100%, 520px);
  padding: clamp(24px, 5vw, 38px);
  border: 1px solid #243b36;
  border-radius: 22px;
  background: rgba(10, 20, 18, 0.96);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.38);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  font-size: 18px;
}

.mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: #04241d;
  background: #17d7ae;
  font-weight: 900;
}

h1 { margin: 0 0 22px; font-size: clamp(27px, 5vw, 36px); }

form { display: grid; gap: 16px; }

label { display: grid; gap: 8px; color: #c8d5d2; font-size: 14px; font-weight: 700; }

input {
  width: 100%;
  min-height: 48px;
  border: 1px solid #2a443e;
  border-radius: 12px;
  padding: 0 14px;
  color: #f7fbfa;
  background: #0a1714;
  outline: none;
  font: inherit;
}

input:focus { border-color: #16c9a3; box-shadow: 0 0 0 3px rgba(22, 201, 163, 0.14); }

button, .button {
  min-height: 48px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  padding: 0 18px;
  color: #03271f;
  background: #18d4ac;
  font: inherit;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

button:disabled { opacity: 0.58; cursor: wait; }

small { color: #82958f; text-align: center; line-height: 1.5; }

.error { margin: 0; color: #ff7777; font-size: 14px; }

.state { text-align: center; color: #afc0bc; }
.state h1 { color: #f3f7f6; margin-top: 12px; }
.state p { line-height: 1.6; }
.state .button { margin-top: 14px; }

.spinner {
  width: 30px;
  height: 30px;
  display: inline-block;
  border: 3px solid #25433c;
  border-top-color: #18d4ac;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

.success-mark {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  color: #04271f;
  background: #18d4ac;
  font-size: 30px;
  font-weight: 900;
}

[hidden] { display: none !important; }

@keyframes spin { to { transform: rotate(360deg); } }