:root {
  --bg: #F3F6F4;
  --surface: #FFFFFF;
  --ink: #0B1F17;
  --ink-muted: #5C6B64;
  --line: #E2E8E4;
  --brand: #0F6B50;
  --brand-dark: #0A2A20;
  --brand-deep: #06170F;
  --live: #E8543A;
  --warn: #B7791F;
  --error-bg: #FDEDEA;
  --error-ink: #9A2E1D;
  --success-bg: #E7F5EE;
  --success-ink: #12694A;
  --radius-lg: 20px;
  --radius-md: 10px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

/* ---------- Full-bleed studio photo, brand-tinted ---------- */
.bg-photo {
  position: fixed;
  inset: 0;
  z-index: -2;
}
.bg-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.45) brightness(.55) contrast(1.08);
}
.bg-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 8%, rgba(23,166,125,.45), transparent 55%),
    linear-gradient(165deg, rgba(6,23,15,.94) 0%, rgba(10,42,32,.85) 45%, rgba(15,107,80,.55) 100%);
}
/* tuning-dial rings — the recurring console motif across pages */
.bg-overlay::after {
  content: "";
  position: absolute;
  right: -140px;
  bottom: -160px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  border: 1px dashed rgba(234,243,239,.10);
  box-shadow: 0 0 0 60px rgba(234,243,239,.035) inset,
              0 0 0 130px rgba(234,243,239,.02) inset;
}
/* mirror the rings on the opposite corner for pages that want variety (e.g. login) */
.bg-overlay.rings-left::after {
  right: auto;
  left: -150px;
  bottom: -170px;
}

.lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.lockup.center { justify-content: center; margin-bottom: 20px; }
.lockup .mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand), #17A67D);
  flex: none;
  box-shadow: 0 6px 18px rgba(15,107,80,.35);
}
.lockup span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(234,243,239,.75);
}

/* ---------- Glass card ---------- */
.card {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255,255,255,.6);
  border-radius: var(--radius-lg);
  padding: 34px 32px;
  box-shadow: 0 30px 70px rgba(6,23,15,.35), 0 2px 0 rgba(255,255,255,.5) inset;
}

h1 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--brand-dark);
}

.subtitle {
  color: var(--ink-muted);
  margin: 0 0 26px;
  font-size: 14.5px;
  line-height: 1.5;
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 18px;
}

label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #D6DEDA;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-family: var(--font-body);
  color: var(--ink);
  background: #FCFDFC;
  margin-bottom: 18px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
fieldset input { margin-bottom: 0; }
input::placeholder { color: #9AA6A0; }
input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(15,107,80,.12);
}

.meter {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  margin-bottom: 18px;
  height: 5px;
}
.meter span {
  flex: 1;
  border-radius: 3px;
  background: #E4E9E6;
  transition: background .15s ease;
}
.meter-label {
  margin-top: -13px;
  margin-bottom: 18px;
  font-size: 12px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
}

button {
  width: 100%;
  border: 0;
  padding: 15px;
  border-radius: var(--radius-md);
  color: #fff;
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(135deg, #169C74, #0A4635);
  transition: filter .15s ease, transform .05s ease;
}
button:hover { filter: brightness(1.06); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 2px; }

.alert, .error {
  border-radius: var(--radius-md);
  padding: 13px 15px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.5;
}
.alert.error, .error { background: var(--error-bg); color: var(--error-ink); }
.alert.success { background: var(--success-bg); color: var(--success-ink); }
.alert.error ul { margin: 4px 0 0; padding-left: 18px; }

.foot-link, .register {
  text-align: center;
  margin-top: 22px;
  font-size: 13.5px;
  color: var(--ink-muted);
}
.foot-link a, .register a {
  color: var(--brand-dark);
  font-weight: 600;
  text-decoration: none;
}
.foot-link a:hover, .register a:hover { text-decoration: underline; }

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

@supports not (backdrop-filter: blur(1px)) {
  .card { background: rgba(255,255,255,.98); }
}
/* ---------- Full-bleed studio photo, brand-tinted ---------- */
.bg-photo {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100vw;
  height: 100vh;   /* fallback for browsers without dvh support */
  height: 100dvh;  /* accounts for mobile browser chrome (address bar) */
  background: var(--brand-deep); /* shows through if the photo fails to load, instead of a blank gap */
}
.bg-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(.45) brightness(.55) contrast(1.08);
}
.bg-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background:
    radial-gradient(circle at 18% 8%, rgba(23,166,125,.45), transparent 55%),
    linear-gradient(165deg, rgba(6,23,15,.94) 0%, rgba(10,42,32,.85) 45%, rgba(15,107,80,.55) 100%);
}
/* tuning-dial rings — the recurring console motif across pages */
.bg-overlay::after {
  content: "";
  position: absolute;
  right: -140px;
  bottom: -160px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  border: 1px dashed rgba(234,243,239,.10);
  box-shadow: 0 0 0 60px rgba(234,243,239,.035) inset,
              0 0 0 130px rgba(234,243,239,.02) inset;
}
.bg-overlay.rings-left::after {
  right: auto;
  left: -150px;
  bottom: -170px;
}

  .page {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 64px 20px;
    position: relative;
  }

  /* honeypot field: present in the DOM for bots, invisible and
     unreachable for real users (display:none is skipped by some
     scrapers, so this uses an off-screen technique instead). */
  .hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  .field-error {
    margin-top: -12px;
    margin-bottom: 12px;
    font-size: 12.5px;
    color: var(--error-ink);
  }

  button[disabled] {
    opacity: .7;
    cursor: not-allowed;
  }