:root{--bg:#f3f6fb;--card:#ffffff;--accent:#2563eb;--muted:#6b7280;--page-padding:32px}
*{box-sizing:border-box}
html,body{height:100%}
/* Layout: stack header above content */
/* remove top padding so header sits at the very top; keep side/bottom page padding */
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,'Helvetica Neue',Arial;background:linear-gradient(180deg,var(--bg),#eef4ff);min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0 var(--page-padding) var(--page-padding) var(--page-padding)}
.card{background:var(--card);width:100%;max-width:520px;border-radius:12px;box-shadow:0 6px 24px rgba(16,24,40,0.08);padding:28px}
h1{margin:0 0 8px;font-size:1.25rem}
p.lead{margin:0 0 18px;color:var(--muted);font-size:0.95rem}
label{display:block;font-size:0.85rem;margin-bottom:6px;color:#111827}
.field{margin-bottom:14px}
input[type="text"],input[type="password"],input[type="email"],input[type="tel"]{width:100%;padding:10px 12px;border:1px solid #e6e9ef;border-radius:8px;font-size:0.95rem}
input:focus{outline:none;box-shadow:0 0 0 4px rgba(37,99,235,0.08);border-color:var(--accent)}
.actions{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.btn{background:var(--accent);color:#fff;padding:10px 14px;border-radius:8px;border:0;font-weight:600;cursor:pointer}
.btn:active{transform:translateY(1px)}
.muted{color:var(--muted);font-size:0.9rem}
.row{display:flex;gap:8px;align-items:center}
.checkbox{display:inline-flex;align-items:center;gap:8px}
.error{color:#dc2626;font-size:0.85rem;margin-top:6px}
.vis-toggle{background:transparent;border:0;color:var(--muted);cursor:pointer}
.small{font-size:0.9rem;color:var(--muted)}
@media (max-width:520px){
  :root{--page-padding:16px}
  .card{padding:20px}
  .nav{padding:10px}
  .nav-links{gap:8px;font-size:0.95rem}
}

/* Navbar styles */
.site-header{width:100vw;display:flex;justify-content:flex-start;margin-top:0;margin-bottom:28px;margin-left:calc(-1 * var(--page-padding));position:sticky;top:0;z-index:1000}
.nav{width:100%;max-width:none;display:flex;align-items:center;justify-content:flex-start;padding:12px 20px;box-sizing:border-box;background:var(--card);backdrop-filter:saturate(120%) blur(4px);box-shadow:0 2px 8px rgba(16,24,40,0.04);border-bottom:1px solid rgba(16,24,40,0.04)}
.brand{font-weight:700;color:var(--accent);text-decoration:none;font-size:1.05rem;margin-right:auto}
.nav-links{list-style:none;margin:0;padding:0;display:flex;gap:12px;margin-left:auto}
.nav-links a{color:#111827;text-decoration:none;padding:6px 10px;border-radius:8px}
.nav-links a:hover{background:rgba(37,99,235,0.08)}
/* (mobile rules merged above) */

/* Active nav link */
.nav-links a.active{background:rgba(37,99,235,0.12);font-weight:700}


.link-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
}

.nav-links .link-button:hover {
  text-decoration: underline;
}