/* Màn đăng nhập và dải báo mất mạng.
   Dùng lại biến màu khai báo ở base.css — đừng đặt mã màu mới ở đây. */

.login-wrap{
  position:fixed; inset:0; z-index:9000;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:var(--bg,#f7f4ef);
}
.login-wrap[hidden]{ display:none; }

.login-card{
  width:100%; max-width:360px;
  display:flex; flex-direction:column; gap:6px;
  padding:28px 24px 24px;
  background:var(--card,#fff);
  border:1px solid var(--line,#e6ded2);
  border-radius:16px;
  box-shadow:0 8px 32px rgba(0,0,0,.07);
}
.login-logo{ width:52px; height:52px; border-radius:12px; object-fit:cover; align-self:center; }
.login-card h1{ margin:10px 0 0; font-size:20px; text-align:center; letter-spacing:.2px; }
.login-sub{ margin:0 0 14px; text-align:center; color:var(--faint,#8b8177); font-size:13px; }

.login-card label{ font-size:12.5px; font-weight:640; color:var(--faint,#8b8177); margin-top:8px; }
.login-card input{
  font:inherit; font-size:16px;          /* 16px: dưới ngưỡng này Safari iOS tự phóng to trang khi gõ */
  padding:11px 12px;
  border:1px solid var(--line,#e6ded2); border-radius:10px;
  background:var(--card,#fff); color:inherit;
}
.login-card input:focus{ outline:2px solid var(--accent,#3b39c9); outline-offset:1px; }

.login-card .cta{
  margin-top:16px;
  font:inherit; font-size:15px; font-weight:680;
  padding:12px 14px;
  border:0; border-radius:11px;
  background:var(--accent,#3b39c9); color:#fff;
  cursor:pointer;
}
.login-card .cta:hover{ filter:brightness(1.06); }
.login-card .cta[disabled]{ opacity:.6; cursor:default; filter:none; }

.login-msg{
  margin:10px 0 0; padding:9px 11px;
  background:#fdecec; border:1px solid #f3c3c3; border-radius:9px;
  color:#a12626; font-size:13px; line-height:1.45;
}
.login-msg[hidden]{ display:none; }

/* Dải mất mạng nằm trên cùng, đẩy nội dung xuống thay vì che lên — che mất một
   dòng số tiền thì tệ hơn là mất 28px chiều cao. */
.net-banner{
  position:sticky; top:0; z-index:8000;
  padding:7px 14px;
  background:#7a2020; color:#fff;
  font-size:13px; font-weight:640; text-align:center;
}
.net-banner[hidden]{ display:none; }