* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  background:#f0f2f5;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.top-bar { height:5px; background:#0d104d; }
.page { flex:1; display:flex; align-items:center; justify-content:center; padding:40px 20px; }
.wrap { width:100%; max-width:440px; }

.logo-area { text-align:center; margin-bottom:32px; }
.logo-img { width:230px; max-width:80%; height:auto; margin-bottom:10px; }
.logo-sub { font-size:13px; color:#aaa; margin-top:4px; }

.role-toggle {
  display:flex; background:white;
  border:1.5px solid #e8e8e8; border-radius:10px;
  padding:4px; margin-bottom:22px;
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
}
.role-btn {
  flex:1; padding:10px; border:none; border-radius:7px;
  background:transparent; font-size:13px; font-weight:600;
  color:#aaa; cursor:pointer; transition:all .2s;
  font-family:'Segoe UI',sans-serif;
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.role-btn.active {
  background:#e95c13;
  color:white; box-shadow:0 2px 8px rgba(13,16,77,0.3);
}

.card {
  background:white; border-radius:12px;
  box-shadow:0 4px 20px rgba(0,0,0,0.08); overflow:hidden;
}
.card-top { padding:24px 28px 0; }
.card-title { font-size:17px; font-weight:700; color:#2c3e50; margin-bottom:3px; }
.card-sub { font-size:12px; color:#bbb; }
.card-body { padding:22px 28px 28px; }

.field { margin-bottom:16px; }
.field label {
  display:block; font-size:11px; font-weight:700; color:#555;
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px;
}
.field input {
  width:100%; border:1.5px solid #e0e0e0; border-radius:8px;
  padding:11px 14px; font-size:14px; font-family:'Segoe UI',sans-serif;
  color:#333; outline:none; transition:all .18s; background:white;
}
.field input:focus { border-color:#0d104d; box-shadow:0 0 0 3px rgba(13,16,77,0.12); }
.field input::placeholder { color:#ccc; }

.err {
  background:#fdecea; border:1px solid #f5b8b8;
  border-radius:7px; padding:10px 14px;
  font-size:13px; color:#c0392b;
  margin-bottom:14px; display:none;
}

/* Success / informational counterpart to .err (reset-code confirmations). */
.ok {
  background:#e8f6ee; border:1px solid #a9d9bf;
  border-radius:7px; padding:10px 14px;
  font-size:13px; color:#1a7a40;
  margin-bottom:14px; display:none;
}

/* Forgot-password panes: intro line and the text-button row under the CTA. */
.pane-hint { font-size:12.5px; color:#888; line-height:1.5; margin:0 0 16px; }
.link-row { display:flex; justify-content:space-between; gap:12px; margin-top:14px; }
.link-row:only-child { margin-top:0; }
.link-btn {
  background:none; border:none; padding:0;
  font-family:'Segoe UI',sans-serif; font-size:12.5px; font-weight:600;
  color:#0d104d; cursor:pointer; text-decoration:underline;
}
.link-btn:hover { color:#e95c13; }
.link-btn[disabled] { color:#bbb; cursor:default; text-decoration:none; }

.btn-login {
  width:100%; padding:13px; border:none; border-radius:8px;
  background:#e95c13;
  color:white; font-size:14px; font-weight:700;
  font-family:'Segoe UI',sans-serif;
  cursor:pointer; transition:all .2s;
  box-shadow:0 3px 12px rgba(13,16,77,0.35);
}
.btn-login:hover { transform:translateY(-1px); box-shadow:0 5px 16px rgba(13,16,77,0.45); }
.btn-login:active { transform:translateY(0); }

.demo-hint {
  margin-top:20px; padding:14px 16px;
  background:#f7f8fc; border:1px solid #e8eaf0;
  border-radius:8px; font-size:12px; color:#888;
}
.demo-hint strong { color:#0d104d; display:block; margin-bottom:6px; }
.demo-hint .creds { display:flex; flex-direction:column; gap:4px; }
.demo-hint .cred-row { display:flex; justify-content:space-between; }
.demo-hint .cred-key { color:#aaa; }
.demo-hint .cred-val { font-weight:600; color:#555; font-family:monospace; }
.demo-sep { height:1px; background:#e8eaf0; margin:8px 0; }

.footer-note { text-align:center; margin-top:20px; font-size:12px; color:#bbb; }