:root{
  --brand:#00625f;
  --brand-700:#00514e;
  --bg:#f6f7f8;
  --text:#1f2d2e;
  --muted:#6b7c80;
  --border:#d0d6d9;
  --error:#b00020;
  --ok:#0a7a51;
  --radius:10px;
  --shadow:0 10px 25px rgba(0,0,0,.08);
}

/* Base */
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Noto Sans",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* No navbar on these pages */
.banner{ width:100%; height:170px; background:url('banner.jpg') center/cover no-repeat; }

/* Layout */
.wrap{ flex:1; display:grid; place-items:start center; padding:2rem 1rem 3rem; }
.card{
  width:100%;
  max-width:420px;
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.25rem 1.25rem 1.5rem;
  animation:floatIn .25s ease-out;
  border:1px solid var(--border);
}
@keyframes floatIn{ from{ transform:translateY(8px); opacity:0;} to{ transform:translateY(0); opacity:1;} }

h1{ font-size:1.25rem; margin:0; color:var(--brand); text-align:center; font-weight:700; }
.sub{ text-align:center; color:var(--muted); font-size:.95rem; margin:.4rem 0 1rem; }
p{ line-height:1.6; }
.center{ text-align:center; }

/* Form fields */
form > * + *{ margin-top:.9rem; }
.field{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:.5rem;
  border:1px solid var(--border);
  border-radius:8px;
  padding:.2rem .5rem .2rem .6rem;
  background:#fff;
}
.field input{
  border:0; outline:0;
  padding:.7rem .2rem;
  font-size:1rem; width:100%;
  background:transparent;
}
.icon-btn{
  border:0; background:transparent; cursor:pointer;
  padding:.4rem .5rem; border-radius:6px;
}
.icon-btn:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* Buttons & links */
.btn{
  width:100%;
  border:0;
  border-radius:8px;
  padding:.8rem 1rem;
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  background:var(--brand);
  color:#fff;
}
.btn:hover{ background:var(--brand-700); }
.btn[disabled]{ opacity:.6; cursor:not-allowed; }
.btn-row{ display:flex; gap:.6rem; flex-wrap:wrap; }
.btn.secondary{
  background:#fff; color:var(--text);
  border:1px solid var(--border);
}
.link{ text-decoration:none; color:var(--brand); }
.link:hover{ color:var(--brand-700); }

/* Messages */
.error{ display:none; color:var(--error); font-size:.95rem; text-align:center; min-height:1.25rem; }
.msg{ text-align:center; min-height:1.25rem; font-size:.95rem; }
.msg.error{ color:var(--error); }
.msg.ok{ color:var(--ok); }
.muted{ color:var(--muted); font-size:.9rem; text-align:center; margin-top:.25rem; }

/* Disclaimer block on login */
.disclaimer{
  display:flex; align-items:flex-start; gap:.6rem;
  font-size:.9rem; color:#445; line-height:1.35;
  background:#f8fafb; border:1px solid #e3eaec; border-radius:8px;
  padding:.6rem .7rem;
}
.disclaimer input[type="checkbox"]{ margin-top:.2rem; flex:none; }
.disclaimer .text{ flex:1; }

/* Reset password helpers */
.req{ font-size:.9rem; margin:.25rem 0 0; padding:0; list-style:none; }
.req li{ display:flex; align-items:center; gap:.45rem; color:#666; }
.req li.ok{ color:var(--ok); }
.req li .icon{ width:1.1rem; text-align:center; }
.match{ font-size:.9rem; margin-top:.25rem; color:#666; }
.match.ok{ color:var(--ok); }
.match.err{ color:var(--error); }

/* Disclaimer page container */
.disclaimer-card .btn-row{ margin-top:1rem; }

/* Footer */
footer{ color:var(--muted); text-align:center; font-size:.85rem; padding:1rem 0 1.25rem; }

/* Remove any accidental gap between banner and content */
.banner + .wrap, .banner + main{ margin-top:0; }