/* HarbourX — shared styles for register / password setup / password change */
:root {
  color-scheme: light;
  --navy: #0b2545;
  --teal-600: #0e938e;
  --teal-500: #14b8ad;
  --ink: #0d1f30;
  --text: #1c2b39;
  --muted: #5c6b7a;
  --faint: #8b98a5;
  --line: #e4eaee;
  --panel: #ffffff;
  --field-bg: #fbfdfd;
  --field-bd: #d7e0e4;
  --soft: #f8fbfb;
  --green: #12a150;
  --red: #e0424b;
  --page-bg: #f4f7f8;
  --glow-1: rgba(20,184,173,.16);
  --glow-2: rgba(11,37,69,.10);
  --card-sh: 0 2px 8px rgba(11,37,69,.05), 0 24px 60px rgba(11,37,69,.12);
  --btn-bg: var(--navy);
  --btn-bg-hover: #0f2f56;
  --btn-fg: #ffffff;
  --btn-sh: 0 12px 26px rgba(11,37,69,.22);
  --toggle-bg: rgba(255,255,255,.72);
  --toggle-bd: #e1e8ec;
  --toggle-fg: #47586a;
  --ring: 0 0 0 4px rgba(20,184,173,.18);
  --ease: 220ms cubic-bezier(.2,.7,.2,1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f1f6f8;
  --text: #c4d2dc;
  --muted: #93a5b2;
  --faint: #6d7f8c;
  --line: #223442;
  --panel: #0f1d2b;
  --field-bg: #0e1c29;
  --field-bd: #2b4150;
  --soft: #0e1b28;
  --page-bg: #070f18;
  --glow-1: rgba(30,200,187,.14);
  --glow-2: rgba(20,50,88,.30);
  --card-sh: 0 30px 80px -30px rgba(0,0,0,.7);
  --btn-bg: linear-gradient(135deg, #14c4b7, #0e938e);
  --btn-bg-hover: linear-gradient(135deg, #1ad4c6, #11a89c);
  --btn-fg: #04211f;
  --btn-sh: 0 14px 34px -8px rgba(20,200,187,.5);
  --toggle-bg: rgba(255,255,255,.06);
  --toggle-bd: rgba(255,255,255,.14);
  --toggle-fg: #c4d2dc;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(680px 460px at 12% 4%, var(--glow-1), transparent 60%),
    radial-gradient(620px 520px at 100% 100%, var(--glow-2), transparent 58%),
    var(--page-bg);
  transition: background-color .35s ease, color .35s ease;
}

.card {
  width: 100%;
  max-width: 460px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 30px 28px;
  box-shadow: var(--card-sh);
  transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.brand { text-align: center; margin-bottom: 22px; }
.badge {
  width: 52px; height: 52px;
  border-radius: 16px;
  margin: 0 auto;
  display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #0b2545, #0e938e);
  box-shadow: 0 12px 28px rgba(14,147,142,.30), inset 0 1px 0 rgba(255,255,255,.24);
}
:root[data-theme="dark"] .badge {
  background: linear-gradient(135deg, #10365f, #14b8ad);
  color: #eafffb;
}
.badge svg { width: 26px; height: 26px; }
.brand h1 { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); margin: 15px 0 5px; }
.brand p { font-size: 13px; color: var(--muted); margin: 0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 7px; color: var(--muted); }
.field input, .field select {
  width: 100%;
  height: 48px;
  border: 1px solid var(--field-bd);
  border-radius: 12px;
  padding: 0 14px;
  font: inherit;
  font-size: 14.5px;
  background: var(--field-bg);
  color: var(--text);
  transition: border-color var(--ease), box-shadow var(--ease), background var(--ease);
}
.field input::placeholder { color: var(--faint); }
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--teal-500);
  box-shadow: var(--ring);
  background: var(--panel);
}

.btn {
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: 13px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: transform var(--ease), box-shadow var(--ease), background var(--ease);
  box-shadow: var(--btn-sh);
}
.btn:hover { transform: translateY(-1px); background: var(--btn-bg-hover); box-shadow: 0 16px 32px rgba(11,37,69,.28); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }

.notice {
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 600;
  margin-bottom: 14px;
  font-size: 13px;
  display: flex;
  gap: 9px;
  align-items: center;
}
.notice::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.success { background: #e9f8ef; color: #0b7a3c; border: 1px solid #bfe8cf; }
.error   { background: #fdeced; color: #b5323a; border: 1px solid #f4c9cc; }
:root[data-theme="dark"] .success { background: rgba(18,161,80,.14); color: #7ee0a6; border-color: rgba(18,161,80,.32); }
:root[data-theme="dark"] .error   { background: rgba(224,66,75,.14); color: #ff9ea3; border-color: rgba(224,66,75,.32); }

.hint { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-bottom: 16px; }

.email-box {
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--soft);
  border: 1px solid var(--line);
  font-size: 13px;
  margin-bottom: 14px;
  color: var(--muted);
  word-break: break-word;
}
.email-box b { color: var(--ink); }

.link {
  display: block;
  text-align: center;
  margin-top: 16px;
  color: var(--teal-600);
  text-decoration: none;
  font-weight: 700;
  font-size: 13.5px;
}
.link:hover { text-decoration: underline; }
:root[data-theme="dark"] .link { color: #33d6c8; }

/* floating theme toggle */
.theme-fab {
  position: fixed;
  top: 18px; right: 18px;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--toggle-bd);
  background: var(--toggle-bg);
  color: var(--toggle-fg);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform var(--ease), border-color var(--ease), color var(--ease);
}
.theme-fab:hover { transform: translateY(-1px); color: var(--ink); border-color: var(--teal-500); }
.theme-fab:active { transform: translateY(0) scale(.96); }
.theme-fab:focus-visible { outline: none; box-shadow: var(--ring); }
.theme-fab .t-ico { position: relative; width: 15px; height: 15px; flex: 0 0 auto; }
.theme-fab .t-ico svg {
  position: absolute; inset: 0; width: 15px; height: 15px; display: block;
  transition: opacity .3s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
.theme-fab .t-sun  { opacity: 0; transform: rotate(-90deg) scale(.4); }
.theme-fab .t-moon { opacity: 1; transform: none; }
:root[data-theme="dark"] .theme-fab .t-sun  { opacity: 1; transform: none; }
:root[data-theme="dark"] .theme-fab .t-moon { opacity: 0; transform: rotate(90deg) scale(.4); }

.btn:active { transform: translateY(0) scale(.98); }

/* entrance */
@keyframes hx-enter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hx-card-in {
  from { opacity: 0; transform: translateY(20px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .card { animation: hx-card-in .55s cubic-bezier(.2,.7,.2,1) backwards .04s; }
  .card .brand   { animation: hx-enter .5s ease backwards .12s; }
  .card form,
  .card .email-box { animation: hx-enter .5s ease backwards .2s; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-fab .t-ico svg { transition: none; }
}

@media (max-width: 520px) {
  .card { padding: 26px 20px; }
  .grid-2 { grid-template-columns: 1fr; }
}