:root {
  color-scheme: dark;
  --bg: #020303;
  --panel: #090d0d;
  --panel-2: #0d1212;
  --border: rgba(198, 218, 210, 0.14);
  --border-strong: rgba(198, 218, 210, 0.25);
  --text: #f7fbff;
  --muted: #9bb0c4;
  --accent: #50ef78;
  --accent-2: #35b7ff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
}

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

.login-card {
  width: min(460px, 100%);
  padding: 34px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
}

.eyebrow {
  margin: 0 0 8px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}

h1 {
  margin: 0 0 12px;
  font-size: 1.8rem;
  line-height: 1.15;
}

.subtitle,
.hint {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.login-form {
  margin-top: 24px;
  display: grid;
  gap: 12px;
}

.field-label {
  font-weight: 700;
}

input[type="email"],
input[type="password"],
input[type="number"],
input[type="text"] {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px 14px;
  color: var(--text);
  background: #070b0b;
}
.signin-title { color: var(--accent); }
.login-brand { display:block; width:min(210px,65%); margin:0 auto 28px; }
.login-brand img { display:block; width:100%; height:auto; }
.signup-login-button { min-height:44px; display:flex; align-items:center; justify-content:center; border:1px solid var(--accent); border-radius:10px; color:var(--accent); background:#050807; font-weight:800; text-decoration:none; }
.signup-login-button:hover { color:#061007; background:var(--accent); }
.forgot-password-link { color: var(--accent); font-weight: 750; text-align: center; text-decoration: none; }
.forgot-password-link:hover { color: #50ef78; text-decoration: underline; }

.login-form[hidden] { display: none; }

.checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 600;
  margin-top: 2px;
}

button {
  border: 0;
  border-radius: 10px;
  padding: 12px 16px;
  font-weight: 800;
  color: #061007;
  cursor: pointer;
  background: #50ef78;
}

.legal-consent {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #070b0b;
}

.legal-consent[hidden] {
  display: none;
}

.legal-row {
  align-items: flex-start;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
}

.legal-row input {
  flex: 0 0 auto;
  margin-top: 3px;
}

.legal-row a {
  color: var(--accent);
  font-weight: 750;
  text-underline-offset: 3px;
}

.legal-row a:hover {
  color: #50ef78;
}

button:hover {
  transform: translateY(-1px);
}

.ghost-btn {
  background: #070b0b;
  color: var(--text);
  border: 1px solid var(--border);
}

button:disabled { cursor: wait; opacity: .72; transform: none; }

.signup-shell { padding-block: 42px; }
.signup-card { width: min(680px, 100%); }
.back-link,
.signin-link a { color: var(--accent); font-weight: 750; text-decoration: none; }
.back-link { display: inline-block; margin-bottom: 22px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-grid > div { position:relative; display:grid; align-content:start; gap:12px; }
.verification-copy { margin: 0 0 4px; color: var(--muted); line-height: 1.55; }
.verification-card { width: min(500px, 100%); }
.verification-help { margin: 18px 0 0; color: var(--muted); font-size: .9rem; text-align: center; }
.verification-help a { color: var(--accent); font-weight: 750; }
.preview-badge { margin: 0 0 6px; padding: 9px 11px; border: 1px solid rgba(115, 241, 74, .35); border-radius: 9px; color: var(--accent); background: rgba(115, 241, 74, .06); font-size: .78rem; font-weight: 800; text-align: center; }
.preview-badge[hidden] { display: none; }
.verification-panel[hidden] { display: none; }
.code-input { text-align: center; font-size: 1.35rem; font-weight: 800; letter-spacing: .45em; }
.signup-newsletter { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--border); }
.signup-newsletter h2 { margin: 0 0 8px; font-size: 1.25rem; }
.newsletter-inline { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 15px; }
.newsletter-inline button { min-width: 92px; }
.signin-link { margin: 24px 0 0; color: var(--muted); text-align: center; }
.signup-disclaimer { margin: 18px 0 0; color: #75877f; font-size: .72rem; line-height: 1.55; text-align: center; }
.password-field { position:relative; }
.password-field input { padding-right:48px; }
.password-toggle { position:absolute; top:50%; right:7px; width:36px; height:36px; padding:8px; border:0; border-radius:8px; color:#91a69c; background:transparent; transform:translateY(-50%); }
.password-toggle:hover { color:var(--accent); background:rgba(115,241,74,.08); transform:translateY(-50%); }
.password-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.password-toggle svg { display:block; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; }
.password-toggle.showing::after { content:''; position:absolute; top:17px; left:7px; width:22px; height:2px; background:currentColor; transform:rotate(-42deg); }
.password-requirements { position:absolute; z-index:20; top:78px; left:0; width:min(260px, calc(100vw - 48px)); display:grid; gap:3px; padding:12px; border:1px solid rgba(115,241,74,.34); border-radius:9px; background:#050807; color:#899b92; font-size:.76rem; line-height:1.5; box-shadow:0 16px 42px rgba(0,0,0,.72); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-5px); transition:opacity .16s ease, transform .16s ease, visibility .16s; }
.field-grid > div:first-child:hover .password-requirements,
.field-grid > div:first-child:focus-within .password-requirements { opacity:1; visibility:visible; transform:translateY(0); }
.password-requirements strong { margin-bottom:2px; color:#eef7f2; }
.password-requirements span::before { content:'○'; margin-right:7px; }
.password-requirements span.passed { color:var(--accent); }
.password-requirements span.passed::before { content:'✓'; }
.password-match-message { min-height:17px; margin:7px 0 0; font-size:.76rem; font-weight:750; }
.password-match-message.mismatch { color:#ff8f9d; }
.password-match-message.matches { color:var(--accent); }
.completion-link { display: block; margin-top: 20px; padding: 12px 16px; border-radius: 10px; text-align: center; text-decoration: none; }
.completion-link[hidden] { display: none; }

@media (max-width: 600px) {
  .login-shell { padding: 14px; }
  .login-card { padding: 24px 20px; }
  .field-grid { grid-template-columns: 1fr; }
  .newsletter-inline { grid-template-columns: 1fr; }
}

.message {
  min-height: 1.25rem;
  margin: 0;
  color: #ff8f9d;
  font-weight: 600;
}

.message.success {
  color: var(--accent);
}