:root{
  --blue: #1972D2;
  --blue-600: #1666BD;
  --blue-100: #E8F1FE;
  --text: #2c3e50;
  --muted: #5B6B83;
  --white: #ffffff;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body.login-page{
  margin:0;
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  color:var(--text);
  background:var(--white);
  display:grid;
  place-items:center;    
  padding: clamp(16px, 4vw, 32px);
}

.layout{
  width:100%;
  display:grid;
  place-items:center;
}

.login-container{
  width:100%;
  display:grid;
  place-items:center;
}

.login-container form{
  width:min(420px, 92vw);
  background:var(--white);
  border:1px solid rgba(25,114,210,.20);
  border-radius:16px;
  padding: clamp(20px, 4vw, 28px);
  box-shadow: 0 12px 40px rgba(25,114,210,.15);
}

.login-container h2{
  margin:0 0 4px;
  font-weight:800;
  letter-spacing:-.02em;
  font-size: clamp(22px, 2.4vw, 28px);
  color:var(--text);
}
.login-container h3{
  margin:0 0 18px;
  color:var(--muted);
  font-weight:500;
  font-size: clamp(14px, 1.6vw, 16px);
}

.input-wrap{ margin:12px 0; }
.input-wrap input{
  width:100%; height:46px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid rgba(25,114,210,.30);
  font-size: 16px;
  background:var(--white);
  color:var(--text);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.input-wrap input::placeholder{ color:#94a3b8; }
.input-wrap input:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 4px var(--blue-100);
}

#error-msg{
  margin:0 0 12px 0;
  color:#b91c1c;
  background:#fee2e2;
  border:1px solid #fecaca;
  border-radius:10px;
  padding:8px 12px;
  display:none; 
}

.btn-primary{
  width:100%; height:46px;
  border:0;
  border-radius:10px;
  background:var(--blue);
  color:#fff;
  font-weight:800; letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(25,114,210,.30);
  transition: transform .12s, box-shadow .15s, opacity .15s;
}
.btn-primary:hover{
  background:var(--blue-600);
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(25,114,210,.35);
}
.btn-primary:active{ transform:translateY(0); }
.btn-primary:disabled{ opacity:.6; cursor:not-allowed; }

.form-links{ margin-top:14px; text-align:center; }
.form-links a{
  color:var(--blue);
  font-weight:700;
  text-decoration:none;
}
.form-links a:hover{ text-decoration:underline; }

@media (max-width: 480px){
  .login-container form{ border-radius:14px; padding:18px; }
  .btn-primary, .input-wrap input{ height:44px; }
}

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }

:root{
  --topbar-h: 45px;
  --topbar-gap: 12px;
  --topbar-pad-x: 16px;
}

.topbar{
  position: fixed;
  inset: 12px var(--topbar-pad-x) auto var(--topbar-pad-x); 
  z-index: 1500;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;                 
}

.topbar > *{ pointer-events: auto; }    

.brand{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.brand img{
  display: block;
  height: 45px;               
  width: auto;
}

.brand-text{
  font-weight: 700;
  font-size: .95rem;
  line-height: 1;
  color: var(--color-primary-600, #0f172a);
  user-select: none;
}

@media (max-width: 560px){
  :root{
    --topbar-h: 40px;
    --topbar-gap: 8px;
    --topbar-pad-x: 10px;
  }

  .topbar{
    inset: 8px var(--topbar-pad-x) auto var(--topbar-pad-x);
  }

  .brand img{ height: 22px; }
  .brand-text{ font-size: .9rem; line-height: 1; }

  .hidden-notification{ min-width: 260px; }

  @media (max-width: 360px){
    .brand-text{ display:none; }
  }
}

@media (prefers-reduced-motion: reduce){
  .notification, .badge, .logout-btn{ transition: none; }
}