/* Xác thực quản trị trên /login (ADMIN-ENTRY-3, D-325/D-326; DAC-TA-WEB §7.11.8).
   Dựng trên khung đăng nhập (.panel.auth-wrap) và các lớp ô mã của auth_email_code.css (nạp trước file này).
   Chỉ token; góc vuông; không bóng, không gradient, không khung mới. */

/* Khi bước mở: khoá biểu mẫu mật khẩu (chỉ đọc), bỏ nút đăng nhập, lối nhanh (passkey, nhà cung cấp) và liên kết phụ của bạn đọc.
   /login?admin=1 chưa có bằng chứng: lối nhanh GIỮ NGUYÊN (một nút passkey chung, D-328). */
html body .panel.auth-wrap.auth-wrap.is-admin-step .auth-quick,
html body .panel.auth-wrap.auth-wrap.is-admin-loading .auth-quick,
html body .panel.auth-wrap.auth-wrap.is-admin-loading #loginForm,
html body .panel.auth-wrap.auth-wrap.is-admin-step #loginForm .auth-actions,
html body .panel.auth-wrap.auth-wrap.is-admin-step .auth-recovery,
html body .panel.auth-wrap.auth-wrap.is-admin-step .auth-pk-hint,
html body .panel.auth-wrap.auth-wrap.is-admin-hidden-form #loginForm { display: none; }

html body .panel.auth-wrap.auth-wrap #loginForm input[readonly] {
  border-color: var(--mz-rule);
  color: var(--mz-muted);
  cursor: default;
}

/* Khối ngay dưới biểu mẫu. */
html body .panel.auth-wrap.auth-wrap .auth-admin {
  margin: 24px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--mz-rule-strong);
}
html body .panel.auth-wrap.auth-wrap.is-admin-hidden-form .auth-admin {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
html body .panel.auth-wrap.auth-wrap .auth-admin[hidden],
html body .panel.auth-wrap.auth-wrap .auth-admin [hidden] { display: none; }

html body .panel.auth-wrap.auth-wrap .auth-admin__title {
  margin: 0 0 8px;
  color: var(--mz-ink);
  font-family: var(--mz-serif);
  font-size: 22px;
  font-weight: 900;
  line-height: 28px;
}
html body .panel.auth-wrap.auth-wrap .auth-admin .auth-lead { margin-bottom: 16px; }
html body .panel.auth-wrap.auth-wrap .auth-admin__who {
  margin: -6px 0 16px;
  color: var(--mz-muted);
  font-family: var(--mz-condensed);
  font-size: 14px;
  line-height: 20px;
}

/* Công tắc hai lựa chọn: «Ứng dụng xác thực» / «Email». */
html body .panel.auth-wrap.auth-wrap .auth-admin__seg {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 14px;
}
html body .panel.auth-wrap.auth-wrap .auth-admin__seg button {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--mz-rule-strong);
  border-bottom-width: 3px;
  border-radius: 0;
  background: var(--mz-field);
  color: var(--mz-muted);
  box-shadow: none;
  font-family: var(--mz-condensed);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
html body .panel.auth-wrap.auth-wrap .auth-admin__seg button + button { margin-left: -1px; }
/* Điện thoại: đặt SAU luật gốc (trước đây đứng trước nên không có hiệu lực). Chữ nhỏ một bậc, giãn hẹp, chữ không chạm mép ô;
   ≤ 400 cho xuống hai dòng, giữa ô, nếu «Ứng dụng xác thực» vẫn không vừa (320). Chiều cao tối thiểu 44 giữ nguyên. */
@media (max-width: 599px) {
  html body .panel.auth-wrap.auth-wrap .auth-admin__seg button { padding: 0 8px; font-size: 12px; letter-spacing: 0.04em; }
}
@media (max-width: 400px) {
  html body .panel.auth-wrap.auth-wrap .auth-admin__seg button {
    padding: 6px 8px;
    line-height: 16px;
    text-wrap: balance;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
html body .panel.auth-wrap.auth-wrap .auth-admin__seg button[aria-checked="true"] {
  border-color: var(--mz-ink);
  border-bottom-color: var(--mz-red);
  background: var(--mz-field);
  color: var(--mz-ink);
}
html body .panel.auth-wrap.auth-wrap .auth-admin__seg button:hover:not([aria-checked="true"]) { color: var(--mz-ink); }
html body .panel.auth-wrap.auth-wrap .auth-admin__seg button:focus-visible {
  outline: 2px solid var(--mz-focus);
  outline-offset: 2px;
}

/* Chế độ mã dự phòng: chữ nhỏ hơn, giãn hẹp (mã 12 ký tự). */
html body .panel.auth-wrap.auth-wrap input.auth-code-input[name="code"][data-mode="backup"] {
  font-size: 20px;
  letter-spacing: 0.12em;
  text-indent: 0.12em;
}

/* Dòng báo «Đã gửi mã tới …» và dòng lỗi chung. */
html body .panel.auth-wrap.auth-wrap .auth-admin__note {
  margin: 0;
  color: var(--mz-ink);
  font-family: var(--mz-serif);
  font-size: 14.5px;
  line-height: 22px;
}
html body .panel.auth-wrap.auth-wrap .auth-admin__msg[data-kind="info"] { color: var(--mz-muted); }
html body .panel.auth-wrap.auth-wrap .auth-admin__msg b { margin-left: 4px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Liên kết phụ dưới nút chính: giữa hàng, một cột ở điện thoại. */
html body .panel.auth-wrap.auth-wrap .auth-admin .auth-actions { display: grid; gap: 12px; }
html body .panel.auth-wrap.auth-wrap .auth-admin .auth-links.auth-admin__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 12px;
}
@media (max-width: 599px) {
  html body .panel.auth-wrap.auth-wrap .auth-admin .auth-links.auth-admin__links { flex-direction: column; align-items: stretch; }
  html body .panel.auth-wrap.auth-wrap .auth-admin .auth-links.auth-admin__links button.auth-sub-link.auth-sub-link { width: 100%; }
}

/* Nút «Thiết lập xác thực» (nút chính đặc). */
html body .panel.auth-wrap.auth-wrap .auth-admin .auth-admin__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 0;
  box-shadow: none;
  font-family: var(--mz-condensed);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}
html body .panel.auth-wrap.auth-wrap .auth-admin .auth-admin__btn--solid {
  border: 1px solid var(--mz-red-fill, var(--mz-red));
  background: var(--mz-red-fill, var(--mz-red));
  color: var(--mz-on-red);
}
html body .panel.auth-wrap.auth-wrap .auth-admin .auth-admin__btn--solid:hover {
  border-color: var(--mz-red-fill-hover, var(--mz-red-dark));
  background: var(--mz-red-fill-hover, var(--mz-red-dark));
  color: var(--mz-on-red);
}
html body .panel.auth-wrap.auth-wrap .auth-admin .auth-admin__btn:disabled { color: var(--mz-muted); border-color: var(--mz-rule-strong); cursor: not-allowed; }
html body .panel.auth-wrap.auth-wrap .auth-admin .auth-admin__btn:focus-visible { outline: 2px solid var(--mz-focus); outline-offset: 3px; }

/* Thông báo của biểu mẫu đăng nhập (#authMsg): khối ở đầu khối, ngay dưới tiêu đề — viền trái 4, biểu tượng bằng mặt nạ
   (đổi theo màu), câu Merriweather 14.5/22. data-tone do JS đặt cùng lúc gán chữ: error (mặc định) viền accent + chấm than;
   info viền rule-strong + chữ i; success viền success + dấu tích. Rỗng thì ẩn. */
html body .panel.auth-wrap.auth-wrap .auth-msg { display: none; }
html body .panel.auth-wrap.auth-wrap .auth-msg:not(:empty) {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  margin: 0 0 20px;
  padding: 12px 16px;
  border-left: 4px solid var(--mz-red);
  background: var(--mz-field);
  color: var(--mz-ink);
  font-family: var(--mz-serif);
  font-size: 14.5px;
  line-height: 22px;
}
html body .panel.auth-wrap.auth-wrap .auth-msg:not(:empty)::before {
  content: "";
  flex: none;
  width: 20px;
  height: 22px;
  background-color: var(--mz-red);
  -webkit-mask: var(--auth-msg-icon) center / 20px 20px no-repeat;
  mask: var(--auth-msg-icon) center / 20px 20px no-repeat;
}
html body .panel.auth-wrap.auth-wrap .auth-msg:not(:empty) {
  --auth-msg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.4v.1'/%3E%3C/svg%3E");
}
html body .panel.auth-wrap.auth-wrap .auth-msg[data-tone="info"]:not(:empty) {
  --auth-msg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.8v.1'/%3E%3C/svg%3E");
  border-left-color: var(--mz-rule-strong);
}
html body .panel.auth-wrap.auth-wrap .auth-msg[data-tone="info"]:not(:empty)::before { background-color: var(--mz-muted); }
html body .panel.auth-wrap.auth-wrap .auth-msg[data-tone="success"]:not(:empty) {
  --auth-msg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.2l2.8 2.8L16.2 9.5'/%3E%3C/svg%3E");
  border-left-color: var(--ui-success);
}
html body .panel.auth-wrap.auth-wrap .auth-msg[data-tone="success"]:not(:empty)::before { background-color: var(--ui-success); }