:root{
  --navy:#0f2947; --navy-2:#173352; --navy-3:#1d3d61;
  --gold:#f0a91c;
  --page-bg:#eef1f6; --card-bg:#ffffff;
  --card-border:#e4e9f0;
  --input-bg:#f6f8fb; --input-border:#dae1ea;
  --ink:#0f172a; --slate:#475569; --label:#64748b; --muted:#94a3b8;
  --link:#1c5fa8; --banner-sub:#8fb3dd;
  --btn-bg:#1b3a5c; --btn-bg-hover:#264c74; --btn-border:#14304e;
  --red-text:#b91c1c; --red-bg:#fef2f2; --red-border:#fecaca;
  --green-text:#047857; --green-bg:#ecfdf5; --green-border:#a7f3d0;
  --r-sm:0; --r-lg:0;
  --sh-lg:0 10px 30px rgba(15,41,71,.10), 0 1px 3px rgba(15,41,71,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  background:var(--page-bg);color:var(--ink);min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:32px 20px;
}

/* ---------- card ---------- */
.auth-card{
  width:100%;max-width:400px;background:var(--card-bg);
  border:1px solid var(--card-border);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);overflow:hidden;
}
.auth-card.wide{max-width:560px}

/* ---------- navy banner ---------- */
.auth-banner{
  background:linear-gradient(155deg,var(--navy) 0%,var(--navy-2) 60%,var(--navy-3) 100%);
  border-bottom:3px solid var(--gold);
  padding:22px 24px 18px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.auth-banner .logo{
  display:block;margin:0 0 12px;
  width:180px;max-width:48%;height:auto;
}
.auth-banner h1{font-size:16px;font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.3}
.auth-banner p{font-size:11.5px;color:var(--banner-sub);margin-top:4px}

/* ---------- body ---------- */
.auth-body{padding:24px 24px 22px}
.auth-body h2{font-size:19px;font-weight:700;color:var(--ink);margin-bottom:18px}
.auth-body .sub{font-size:13px;line-height:1.5;color:var(--slate);margin:-12px 0 18px}

/* ---------- fields ---------- */
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.field-grid .span-2{grid-column:1 / -1}

label{
  display:flex;flex-direction:column;gap:6px;
  font-size:12px;font-weight:600;color:var(--label);
  margin-bottom:16px;
}
label .row-label{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
label .row-label a{font-size:12px;font-weight:600;color:var(--link);text-decoration:none}
label .row-label a:hover{text-decoration:underline}

input{
  height:40px;width:100%;
  border:1px solid var(--input-border);border-radius:var(--r-sm);
  padding:0 12px;background:var(--input-bg);
  font-family:inherit;font-size:14px;font-weight:400;color:var(--ink);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
input::placeholder{color:#a5b0c0}
input:hover{border-color:#c6d0dd}
input:focus{outline:none;background:#fff;border-color:var(--navy-3);box-shadow:0 0 0 2px rgba(29,61,97,.14)}

/* ---------- note panel ---------- */
.note{
  background:#eef3f9;border:1px solid #dde6f1;border-radius:var(--r-sm);
  padding:10px 12px;font-size:12.5px;line-height:1.5;color:#2d5c8c;margin-bottom:16px;
}

/* ---------- button ---------- */
.btn-primary{
  width:100%;height:42px;border:1px solid var(--btn-border);border-radius:var(--r-sm);
  background:var(--btn-bg);color:#fff;font-family:inherit;
  font-size:14px;font-weight:600;cursor:pointer;
  transition:background .15s;
}
.btn-primary:hover:not(:disabled){background:var(--btn-bg-hover)}
.btn-primary:disabled{opacity:.6;cursor:default}

/* ---------- password checklist ---------- */
.pw-rules{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;margin:-8px 0 16px}
.pw-rules li{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);transition:color .15s}
.pw-rules li::before{content:"○";font-size:11px;line-height:1;width:11px;flex:none;text-align:center}
.pw-rules li.met{color:#047857}
.pw-rules li.met::before{content:"✓"}
.pw-rules .span-2{grid-column:1 / -1}

/* ---------- secondary button ---------- */
.btn-link{
  display:block;width:100%;height:42px;line-height:40px;text-align:center;
  border:1px solid var(--input-border);background:#fff;color:var(--ink);
  font-size:14px;font-weight:600;text-decoration:none;
}
.btn-link:hover{background:var(--input-bg)}

/* ---------- messages ---------- */
.msg{display:none;font-size:13px;line-height:1.5;border-radius:var(--r-sm);padding:9px 12px;margin-bottom:16px}
.msg.show{display:block}
.msg.error{color:var(--red-text);background:var(--red-bg);border:1px solid var(--red-border)}
.msg.success{color:var(--green-text);background:var(--green-bg);border:1px solid var(--green-border)}

/* ---------- footer ---------- */
.auth-footer{text-align:center;font-size:13px;color:var(--slate);margin-top:18px}
.auth-footer + .auth-footer{margin-top:8px}
.auth-footer a{color:var(--link);text-decoration:none;font-weight:600}
.auth-footer a:hover{text-decoration:underline}

@media (max-width:600px){
  .field-grid{grid-template-columns:1fr;gap:0}
  .pw-rules{grid-template-columns:1fr}
  .auth-banner{padding:20px 20px 16px}
  .auth-banner .logo{width:60%}
  .auth-body{padding:20px}
}