:root{color-scheme:light;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#172338;background:#f5f7fb}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% 0%,#eaf1ff 0,transparent 42%),#f5f7fb;color:#172338}.auth-shell{width:min(100% - 32px,460px);margin:auto;padding:clamp(34px,9vh,90px) 0}.brand{display:block;text-align:center;margin:0 0 24px;color:#172338;font-weight:750;font-size:20px;letter-spacing:-.04em;text-decoration:none}.brand::first-letter{color:#2563eb}.auth-card{padding:clamp(24px,6vw,36px);border:1px solid #dce4ee;border-radius:18px;background:#fff;box-shadow:0 18px 46px rgba(27,48,78,.1)}.eyebrow{color:#2563eb;font-size:11px;font-weight:750;letter-spacing:1.6px}.auth-card h1{margin:0 0 9px;color:#172338;font-size:31px;line-height:1.15;letter-spacing:-.04em}.muted{color:#53647b;line-height:1.6}.auth-card>p.muted{margin-bottom:23px}label{display:block;margin:17px 0 7px;color:#34445b;font-size:13px;font-weight:650}input{display:block;width:100%;padding:13px 12px;border:1px solid #c4d0df;border-radius:9px;background:#fff;color:#172338;font:inherit}input:focus{outline:2px solid #2563eb;outline-offset:1px;border-color:#2563eb}.primary{width:100%;margin-top:23px;padding:13px;border:0;border-radius:9px;background:#2563eb;color:#fff;font:inherit;font-weight:700;cursor:pointer;transition:background .18s ease,transform .18s ease}.primary:hover{background:#1d4ed8;transform:translateY(-1px)}.primary:disabled{opacity:.6;transform:none}.center{text-align:center;font-size:13px;margin-top:20px}.center a,.auth-card a{color:#1d4ed8;text-decoration:none}.center a:hover,.auth-card a:hover{text-decoration:underline}.notice{margin:0 0 16px;padding:12px;border-radius:9px;background:#eff6ff;color:#1e3a8a;font-size:13px;line-height:1.5;overflow-wrap:anywhere}.notice.error{background:#fef2f2;color:#991b1b}.notice.success{background:#ecfdf5;color:#065f46}[hidden]{display:none!important}@media (max-width:420px){.auth-shell{padding-top:22px}.auth-card{padding:24px}}


/* Login-only supplied illustration; the solid card keeps form controls readable. */
body[data-page="login"] {
  background-color: #fff;
  background-image: url("/assets/login-network-background.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

body[data-page="login"] .auth-shell {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(20px, 5vh, 48px) 0;
}

body[data-page="login"] .auth-card {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(15, 32, 50, 0.18);
  box-shadow: 0 20px 60px rgba(16, 36, 56, 0.18);
  backdrop-filter: blur(3px);
}

@media (max-width: 600px) {
  body[data-page="login"] {
    background-attachment: scroll;
  }

  body[data-page="login"] .auth-shell {
    width: min(100% - 24px, 460px);
  }
}


body[data-page="login"] .brand-logo {
  display: block;
  width: min(176px, 64vw);
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}


/* Match the login presentation on registration and password recovery. */
body[data-page="register"],
body[data-page="forgot-password"],
body[data-page="reset-password"],
body[data-page="verify-email"],
body[data-page="account"] {
  background-color: #fff;
  background-image: url("/assets/login-network-background.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

body[data-page="register"] .auth-shell,
body[data-page="forgot-password"] .auth-shell,
body[data-page="reset-password"] .auth-shell,
body[data-page="verify-email"] .auth-shell,
body[data-page="account"] .auth-shell {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(20px, 5vh, 48px) 0;
}

body[data-page="register"] .auth-card,
body[data-page="forgot-password"] .auth-card,
body[data-page="reset-password"] .auth-card,
body[data-page="verify-email"] .auth-card,
body[data-page="account"] .auth-card {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(15, 32, 50, 0.18);
  box-shadow: 0 20px 60px rgba(16, 36, 56, 0.18);
  backdrop-filter: blur(3px);
}

@media (max-width: 600px) {
  body[data-page="register"],
  body[data-page="forgot-password"],
  body[data-page="reset-password"],
  body[data-page="verify-email"],
  body[data-page="account"] {
    background-attachment: scroll;
  }

  body[data-page="register"] .auth-shell,
  body[data-page="forgot-password"] .auth-shell,
  body[data-page="reset-password"] .auth-shell,
  body[data-page="verify-email"] .auth-shell,
  body[data-page="account"] .auth-shell {
    width: min(100% - 24px, 460px);
  }
}

/* Darken and soften only the decorative artwork, leaving the account UI crisp. */
body[data-page="login"],
body[data-page="register"],
body[data-page="forgot-password"],
body[data-page="reset-password"],
body[data-page="verify-email"],
body[data-page="account"] {
  position: relative;
  isolation: isolate;
  background-color: transparent !important;
  background-image: none !important;
}
body[data-page="login"]::before,
body[data-page="register"]::before,
body[data-page="forgot-password"]::before,
body[data-page="reset-password"]::before,
body[data-page="verify-email"]::before,
body[data-page="account"]::before {
  content: "";
  position: fixed;
  inset: -10px;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url("/assets/login-network-background.webp");
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  filter: blur(4px);
  transform: scale(1.025);
}
body[data-page="login"] .auth-shell,
body[data-page="register"] .auth-shell,
body[data-page="forgot-password"] .auth-shell,
body[data-page="reset-password"] .auth-shell,
body[data-page="verify-email"] .auth-shell,
body[data-page="account"] .auth-shell {
  position: relative;
  z-index: 1;
}

body[data-page="register"] .brand-logo,
body[data-page="forgot-password"] .brand-logo,
body[data-page="reset-password"] .brand-logo,
body[data-page="verify-email"] .brand-logo,
body[data-page="account"] .brand-logo {
  display: block;
  width: min(176px, 64vw);
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}
.google-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px;border:1px solid #c4d0df;border-radius:9px;background:#fff;color:#172338;font:inherit;font-weight:700;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .18s ease}.google-button:hover{background:#f8faff;border-color:#9fb2ca;transform:translateY(-1px)}.google-button:disabled{opacity:.6;transform:none}.google-mark{display:grid;place-items:center;width:21px;height:21px;border:1px solid #d9e1ec;border-radius:50%;color:#4285f4;font-family:Arial,sans-serif;font-size:15px;font-weight:800}.auth-divider{display:flex;align-items:center;gap:12px;margin:20px 0 2px;color:#718096;font-size:12px}.auth-divider::before,.auth-divider::after{content:"";height:1px;flex:1;background:#dce4ee}


/* Responsive hardening for all auth, recovery, verification, and account screens. */
html { min-height: 100%; }
body { min-height: 100dvh; overflow-x: hidden; overflow-wrap: anywhere; }
.auth-shell { width: min(100% - 2rem, 32rem); min-height: 100dvh; padding-top: max(1.25rem, env(safe-area-inset-top)); padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); }
.auth-card { width: 100%; min-width: 0; }
.auth-card h1 { font-size: clamp(1.75rem, 5vw, 2rem); }
.auth-card p { overflow-wrap: anywhere; }
.auth-card form { min-width: 0; }
.auth-card input, .auth-card button, .auth-card select, .auth-card textarea { max-width: 100%; min-height: 2.75rem; }
.auth-card input { font-size: max(16px, 1rem); }
.auth-card button, .auth-card a { overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .auth-shell { width: min(100% - 1.5rem, 32rem); }
  .auth-card { padding: clamp(1.125rem, 5vw, 1.5rem); border-radius: 1rem; }
  .auth-card > p.muted { margin-bottom: 1rem; }
  label { margin-top: 1rem; }
  .primary { margin-top: 1.25rem; }
}
@media (max-height: 640px) and (orientation: landscape) { .auth-shell { justify-content: flex-start; } .brand { margin-bottom: 1rem; } }