/* IAMS — shared modern login layout (works in every browser: no CSS nesting) */
body.login-page{
  margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  font-family:'Poppins','Noto Sans Ethiopic','Ebrima','Nyala',system-ui,sans-serif; color:#14211b;
  background:
    radial-gradient(700px 420px at 12% 8%,rgba(15,138,98,.35),transparent 60%),
    radial-gradient(600px 400px at 92% 95%,rgba(242,183,5,.18),transparent 60%),
    #0a2a20;
}
.login-card{
  position:relative; width:100%; max-width:400px; background:#fff; border-radius:24px;
  padding:40px 32px 32px; overflow:hidden;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.55);
}
.login-card::before{ /* flag stripe */
  content:""; position:absolute; left:0; right:0; top:0; height:5px;
  background:linear-gradient(90deg,#0F8A62 0 33.3%,#F2B705 33.3% 66.6%,#C1440E 66.6%);
}
.login-head{ text-align:center; margin-bottom:28px }
.login-head img{ width:72px; height:72px; object-fit:contain; display:block; margin:0 auto 14px }
.login-head h1{ margin:0; font-size:24px; font-weight:600; letter-spacing:-.02em; color:#063B2B }
.login-head p{ margin:6px 0 0; font-size:13.5px; color:#5f7068; line-height:1.5 }
.login-error{
  margin:0 0 18px; padding:12px 14px; border-radius:12px; font-size:13.5px;
  background:#fef2f2; border:1px solid #fecaca; color:#b91c1c;
}
.login-form{ display:flex; flex-direction:column; gap:16px }
.login-field{ display:flex; flex-direction:column; gap:6px }
.login-field label{ font-size:13px; font-weight:500; color:#344a3f }
.login-form input{
  width:100%; box-sizing:border-box; padding:13px 14px; font:inherit; font-size:15px;
  background:#fff; color:#14211b; border:1px solid #cfd9d3; border-radius:12px; outline:none;
  transition:border-color .18s, box-shadow .18s;
}
.login-form input::placeholder{ color:#9aa9a1 }
.login-form input:hover{ border-color:#aebdb4 }
.login-form input:focus{ border-color:#0F8A62; box-shadow:0 0 0 3px rgba(15,138,98,.2) }
.login-form button{
  margin-top:6px; width:100%; padding:14px; font:inherit; font-size:15px; font-weight:600; color:#fff;
  background:linear-gradient(180deg,#0F8A62,#0B6E4F); border:0; border-radius:12px; cursor:pointer;
  box-shadow:0 10px 20px -10px rgba(7,74,52,.7); transition:transform .2s, box-shadow .2s;
}
.login-form button:hover{ transform:translateY(-1px); box-shadow:0 14px 24px -10px rgba(7,74,52,.8) }
.login-form button:focus-visible{ outline:3px solid rgba(242,183,5,.7); outline-offset:2px }
.login-back{ display:block; text-align:center; margin-top:22px; font-size:13px; color:#5f7068; text-decoration:none }
.login-back:hover{ color:#0B6E4F; text-decoration:underline }
@media (prefers-reduced-motion:reduce){ .login-form button{ transition:none } .login-form button:hover{ transform:none } }
@media (max-width:420px){ .login-card{ padding:32px 22px 26px } }

/* developer credit (modern.css is not loaded on login pages) */
.dev-credit--fixed{ position:fixed; left:0; right:0; bottom:12px; text-align:center; font-size:12px; color:rgba(255,255,255,.55) }
.dev-credit--fixed a{ color:#F2B705; text-decoration:none }