:root {
  --ground: #0d0d0d;
  --card: #1c1c1c;
  --line: #2a2a2a;
  --line-hi: #3a3a3a;
  --ink: #ffffff;
  --ink-2: #dcdcdc;
  --ink-3: #9a9a9a;
  --ink-4: #6e6e6e;
  --accent: #f09050;
  --accent-hi: #f4a86e;
  --bad: #e23636;
  --good: #7be8a0;
  --radius: 12px;
  --field: #141414;
}

* { box-sizing: border-box; }

/* The [hidden] attribute is only a UA style of display:none, so ANY class that
   sets its own display (.choice, .tabs, .lang, .consent, .row) silently beats
   it and the element stays on screen even though el.hidden is true. This makes
   the attribute mean what everyone assumes it means. */
[hidden] { display: none !important; }


html, body {
  margin: 0;
  padding: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 16px 56px;
}

.shell { width: 100%; max-width: 440px; }

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.masthead img { display: block; width: 150px; max-width: 46vw; height: auto; }

.lang {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  flex: none;
}
.lang button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 7px 13px;
  cursor: pointer;
}
.lang button[aria-pressed="true"] { background: var(--accent); color: #131313; }
.lang button:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: -2px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.card-rule { height: 3px; background: var(--accent); }
.card-body { padding: 26px 24px 28px; }

.tabs {
  display: flex;
  gap: 4px;
  padding: 16px 16px 0;
  border-bottom: 1px solid var(--line);
}
.tabs button {
  appearance: none;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 14px 12px;
  cursor: pointer;
}
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tabs button:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }

h1 {
  margin: 0 0 6px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  text-wrap: balance;
}
.sub { margin: 0 0 22px; font-size: 14px; line-height: 1.6; color: var(--ink-3); }

.field { margin-bottom: 15px; }
.field > label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
input[type="text"], input[type="email"], input[type="password"], input[type="date"] {
  width: 100%;
  background: var(--field);
  border: 1px solid var(--line-hi);
  border-radius: 9px;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  padding: 12px 13px;
}
input::placeholder { color: var(--ink-4); }
input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
input[aria-invalid="true"] { border-color: var(--bad); }
input[type="date"] { color-scheme: dark; }

.row { display: flex; gap: 12px; }
.row .field { flex: 1; }

.hint { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-4); }

.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 18px 0 4px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}
.consent input { margin: 2px 0 0; width: 17px; height: 17px; accent-color: var(--accent); flex: none; }
.consent a { color: var(--accent-hi); }

button.primary {
  appearance: none;
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #131313;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  padding: 14px;
  margin-top: 18px;
  cursor: pointer;
}
button.primary:hover { background: var(--accent-hi); }
button.primary:disabled { opacity: .5; cursor: not-allowed; }
button.primary:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }

button.link {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--accent-hi);
  font: inherit;
  font-size: 13px;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

.msg {
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 9px;
  font-size: 13.5px;
  line-height: 1.55;
  border: 1px solid;
}
.msg[data-kind="error"] { background: rgba(226,54,54,.1); border-color: rgba(226,54,54,.45); color: #ffb4b4; }
.msg[data-kind="ok"]    { background: rgba(123,232,160,.09); border-color: rgba(123,232,160,.4); color: var(--good); }
.msg[data-kind="info"]  { background: rgba(240,144,80,.09); border-color: rgba(240,144,80,.4); color: var(--accent-hi); }
.msg[hidden] { display: none; }

.foot { margin: 16px 4px 0; font-size: 12px; line-height: 1.6; color: var(--ink-4); text-align: center; }
.foot a { color: var(--ink-3); }

.center { text-align: center; margin-top: 16px; }

@media (max-width: 420px) {
  .row { flex-direction: column; gap: 0; }
  .card-body { padding: 22px 18px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---- provider chooser ---- */
.choice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  margin-bottom: 11px;
  background: transparent;
  border: 1px solid var(--line-hi);
  border-radius: 999px;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.choice:hover { border-color: #4a4a4a; background: rgba(255,255,255,.03); }
.choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.choice svg { width: 18px; height: 18px; flex: none; }
.choice.filled {
  background: var(--accent);
  border-color: var(--accent);
  color: #131313;
  font-weight: 700;
}
.choice.filled:hover { background: var(--accent-hi); border-color: var(--accent-hi); }

.or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--ink-4);
  font-size: 12px;
}
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.spinner {
  width: 30px; height: 30px; margin: 22px auto 6px;
  border: 3px solid var(--line-hi);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }