/* =====================================================================
   app.css — Lớp style riêng của app quản lý mật khẩu
   Đặt SAU styles.css (Metronic). Chỉ dùng token màu của Metronic
   (var(--background), var(--foreground), var(--primary)...) nên tự động
   theo theme sáng/tối. Không đụng tới file vendor.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Khung nội dung tối thiểu (view ngắn vẫn phủ hết chiều cao)
   --------------------------------------------------------------------- */
.kt-content {
  min-height: calc(100dvh - var(--header-height));
}

/* Nền + chữ mặc định bám token (phòng khi utility trên body bị override) */
body.demo1 {
  background-color: var(--background);
  color: var(--foreground);
}

/* Header hơi mờ nền cho cảm giác "dính" */
.kt-header {
  background-color: color-mix(in oklab, var(--background) 88%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---------------------------------------------------------------------
   2. Trạng thái CHƯA MỞ KHÓA — ẩn sidebar + header, bỏ padding khung
   --------------------------------------------------------------------- */
body.pm-locked .kt-sidebar,
body.pm-locked .kt-header {
  display: none !important;
}
/* Khi khóa, router đã gỡ class kt-sidebar-fixed/kt-header-fixed nên template
   không còn chừa khoảng đệm. Chỉ cần bỏ padding nội dung để màn phủ trọn. */
body.pm-locked .kt-wrapper { padding: 0; }
body.pm-locked .kt-content {
  min-height: 100dvh;
  padding: 0;
}

/* ---------------------------------------------------------------------
   3. Drawer mobile — dùng đúng "hợp đồng" .kt-drawer của styles.css.
      layout.js gắn/tháo .kt-drawer .kt-drawer-start ở <1024px.
      Xếp lớp: sidebar(60) > backdrop(55) > header(20).
   --------------------------------------------------------------------- */
.kt-sidebar.kt-drawer {
  z-index: 60;
}
.pm-backdrop {
  z-index: 55;
}
/* Khóa cuộn nền khi drawer đang mở */
body.pm-drawer-open {
  overflow: hidden;
}

/* ---------------------------------------------------------------------
   4. Điều hướng sidebar (scope dưới .kt-sidebar để chắc chắn thắng
      độ ưu tiên so với mặc định Metronic)
   --------------------------------------------------------------------- */
.kt-sidebar .kt-menu-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius);
  color: var(--muted-foreground);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.kt-sidebar .kt-menu-link:hover {
  background-color: color-mix(in oklab, var(--foreground) 6%, transparent);
  color: var(--foreground);
}
.kt-sidebar .kt-menu-link.pm-active {
  background-color: color-mix(in oklab, var(--primary) 12%, transparent);
  color: var(--primary);
}
.kt-sidebar .kt-menu-icon {
  display: inline-flex;
  width: 1.5rem;
  justify-content: center;
  flex-shrink: 0;
}
.kt-sidebar .kt-menu-icon i {
  font-size: 1.25rem;
  line-height: 1;
}
.kt-sidebar .kt-menu-title {
  flex: 1 1 auto;
}
.kt-sidebar .kt-menu-heading {
  padding: 0.75rem 0.75rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

/* ---------------------------------------------------------------------
   5. Nút icon trên header (ghost) — tự định nghĩa để tránh xung đột
   --------------------------------------------------------------------- */
.pm-hbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.pm-hbtn:hover {
  background-color: color-mix(in oklab, var(--foreground) 8%, transparent);
  color: var(--foreground);
}
.pm-hbtn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.pm-hbtn i {
  font-size: 1.25rem;
  line-height: 1;
}
/* Chỉ hiện ở mobile: khi >=64rem thì ẩn (thắng .pm-hbtn vì !important + unlayered) */
@media (min-width: 64rem) {
  .pm-mobile-only { display: none !important; }
}
/* Nút chrome do JS bật/tắt (đặc hiệu cao hơn .pm-hbtn nên override được) */
.pm-hbtn.pm-hide { display: none; }

/* ---------------------------------------------------------------------
   6. Form control theo theme (dùng cho các view placeholder)
   --------------------------------------------------------------------- */
.pm-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.pm-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--foreground);
}
.pm-hint {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}
.pm-control {
  width: 100%;
  height: 2.625rem;
  padding: 0 0.75rem;
  background-color: var(--background);
  color: var(--foreground);
  border: 1px solid var(--input);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  line-height: 1.5;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pm-control::placeholder {
  color: var(--muted-foreground);
}
.pm-control:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 20%, transparent);
}
select.pm-control {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 2rem;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
}

/* Ô nhập có nút phụ (vd nút hiện/ẩn mật khẩu) */
.pm-affix {
  position: relative;
}
.pm-affix .pm-control {
  padding-inline-end: 3rem;
}
.pm-affix-btn {
  position: absolute;
  inset-inline-end: 0.375rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
}
.pm-affix-btn:hover {
  color: var(--foreground);
  background-color: color-mix(in oklab, var(--foreground) 8%, transparent);
}
.pm-affix-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

/* Thanh trượt độ dài (generator — placeholder) */
.pm-range {
  width: 100%;
  accent-color: var(--primary);
}

/* ---------------------------------------------------------------------
   7. Bố cục trang & tiêu đề view
   --------------------------------------------------------------------- */
.pm-page {
  max-width: 72rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.pm-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.pm-page-title {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--foreground);
  line-height: 1.2;
}
.pm-page-sub {
  margin-top: 0.25rem;
  font-size: 0.9375rem;
  color: var(--muted-foreground);
}

/* Nhãn "placeholder" nhỏ nhắc trạng thái Phiên 1 */
.pm-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--muted-foreground);
  background-color: color-mix(in oklab, var(--foreground) 6%, transparent);
  border: 1px solid var(--border);
}

/* Trạng thái rỗng */
.pm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  padding: 3rem 1.5rem;
  color: var(--muted-foreground);
}
.pm-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  background-color: color-mix(in oklab, var(--primary) 10%, transparent);
  color: var(--primary);
}
.pm-empty-icon i {
  font-size: 1.75rem;
}

/* Thẻ thống kê nhỏ (health) */
.pm-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--card, var(--background));
}
.pm-stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--foreground);
}
.pm-stat-label {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}

/* Ô mật khẩu sinh ra (generator — placeholder) */
.pm-passbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 1px dashed var(--input);
  border-radius: var(--radius);
  background-color: color-mix(in oklab, var(--foreground) 3%, transparent);
  font-family: var(--default-mono-font-family, ui-monospace, monospace);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--foreground);
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------
   8. Sàn chất lượng: focus rõ ràng + tôn trọng reduced-motion
   --------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible {
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------
   9. Huy hiệu thương hiệu (màn Mở khóa) — nền gradient chàm + icon khóa
   --------------------------------------------------------------------- */
.pm-brand-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  color: #fff;
  background-image: linear-gradient(135deg, #6366f1 0%, #3730a3 100%);
  box-shadow: 0 8px 20px -6px color-mix(in oklab, #4f46e5 60%, transparent);
}
.pm-brand-badge i {
  font-size: 1.75rem;
  line-height: 1;
}
/* Huy hiệu nhỏ trong sidebar */
.pm-brand-badge.pm-brand-sm {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
}
.pm-brand-badge.pm-brand-sm i { font-size: 1.125rem; }

/* ---------------------------------------------------------------------
   10. Nút phân đoạn (segmented control) — dùng cho chọn giao diện
   --------------------------------------------------------------------- */
.pm-seg-group {
  display: inline-flex;
  padding: 0.25rem;
  gap: 0.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: color-mix(in oklab, var(--foreground) 4%, transparent);
  flex-wrap: wrap;
}
.pm-seg {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--muted-foreground);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.pm-seg:hover { color: var(--foreground); }
.pm-seg.pm-seg-active {
  background-color: var(--background);
  color: var(--foreground);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}
.pm-seg:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.pm-seg i { font-size: 1rem; }

/* ---------------------------------------------------------------------
   11. Toast nhỏ gọn (thông báo placeholder cho các nút chưa hoạt động)
   --------------------------------------------------------------------- */
.pm-toast-wrap {
  position: fixed;
  inset-inline: 0;
  bottom: 1.25rem;
  display: flex;
  justify-content: center;
  padding: 0 1rem;
  z-index: 80;
  pointer-events: none;
}
.pm-toast {
  max-width: 90vw;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius);
  background-color: var(--foreground);
  color: var(--background);
  font-size: 0.875rem;
  box-shadow: 0 10px 25px -8px rgb(0 0 0 / 0.35);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.pm-toast.pm-show { opacity: 1; transform: translateY(0); }
.pm-toast i { font-size: 1rem; }

/* =====================================================================
   12. Lớp nền do app tự lo (một số utility Tailwind không được biên dịch
       trong bản build của template, nên định nghĩa tường minh ở đây).
   ===================================================================== */

/* Định vị sidebar/header cố định (base). Bản build thiếu inset-y-0/z-30… */
.kt-sidebar {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
}
.kt-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline-end: 0;
  inset-inline-start: 0;
  z-index: 20;
  display: flex;
  align-items: center;
}
/* Khi thành drawer (mobile) đã set z-index:60 ở mục 3; giữ nguyên. */

/* Vùng danh sách menu cuộn được trong sidebar (thiếu overflow-y-auto) */
.pm-sidebar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Màn mở khóa toàn màn hình, căn giữa (thiếu min-h-dvh) */
.pm-unlock-screen {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
}

/* Lưới thẻ thống kê health (thiếu sm:grid-cols-3) */
.pm-stat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .pm-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Bề rộng tối đa hay dùng (thiếu max-w-xs/sm) */
.pm-w-xs { width: 100%; max-width: 20rem; }
.pm-w-sm { width: 100%; max-width: 24rem; }

/* Cuộn ngang cho bảng (thiếu overflow-x-auto) */
.pm-scroll-x { overflow-x: auto; }

/* Chặn bôi đen chữ trên nhãn công tắc (thiếu select-none) */
.pm-noselect { user-select: none; -webkit-user-select: none; }

/* Bề mặt sidebar/header (không dùng được utility giá trị tùy biến bg-[...]) */
.kt-sidebar {
  background-color: var(--background);
  border-inline-end: 1px solid var(--border);
}
.kt-header {
  border-block-end: 1px solid var(--border);
}
/* Khu vực logo đầu sidebar cao bằng header */
.pm-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: var(--header-height);
  padding-inline: 1.25rem;
  flex-shrink: 0;
  border-block-end: 1px solid var(--border);
}
.pm-sidebar-foot {
  padding: 0.75rem 1.25rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  border-block-start: 1px solid var(--border);
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   Phiên 2 — Màn thiết lập master password
   --------------------------------------------------------------------- */
/* Ẩn chung (Phiên 1 mới chỉ định nghĩa cho .pm-hbtn) */
.pm-hide { display: none !important; }

/* Thanh đo độ mạnh mật khẩu */
.pm-strength {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: -0.5rem; /* nép sát ô mật khẩu phía trên */
}
.pm-strength-bar {
  flex: 1;
  height: 0.375rem;
  border-radius: 999px;
  background: var(--muted);
  overflow: hidden;
}
.pm-strength-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  transition: width 0.25s ease, background-color 0.25s ease;
}
.pm-strength-bar span.pm-str-0 { background: transparent; }
.pm-strength-bar span.pm-str-1 { background: #ef4444; }
.pm-strength-bar span.pm-str-2 { background: #f59e0b; }
.pm-strength-bar span.pm-str-3 { background: #22c55e; }
.pm-strength-bar span.pm-str-4 { background: #16a34a; }
.pm-strength-label {
  font-size: 0.75rem;
  min-width: 5.5rem;
  text-align: right;
  color: var(--muted-foreground);
}

/* Hộp cảnh báo "quên là mất kho" */
.pm-warn {
  display: flex;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.625rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--foreground);
  background: color-mix(in srgb, #f59e0b 12%, transparent);
  border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent);
}
.pm-warn i {
  font-size: 1.125rem;
  color: #d97706;
  flex-shrink: 0;
  margin-top: 0.0625rem;
}

/* Checkbox xác nhận */
.pm-check {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.8125rem;
  color: var(--foreground);
  cursor: pointer;
  user-select: none;
}
.pm-check input {
  margin-top: 0.1875rem;
  width: 1rem;
  height: 1rem;
  accent-color: var(--primary);
  flex-shrink: 0;
}

/* =====================================================================
   PHIÊN 3 — Kho mật khẩu: bảng/thẻ, modal, nút thao tác
   ===================================================================== */

/* ---------------------------------------------------------------------
   14. Modal (bổ trợ cho .kt-modal của Metronic)
   --------------------------------------------------------------------- */
.kt-modal.pm-modal {
  z-index: 100; /* trên sidebar-drawer (60); backdrop của ktui tự đặt z-1 */
}
.pm-modal-md,
.pm-modal-sm {
  width: 100%;
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.pm-modal-md { max-width: 34rem; }
.pm-modal-sm { max-width: 26rem; }
@media (max-width: 40rem) {
  .pm-modal-md, .pm-modal-sm { margin-top: 1rem; margin-bottom: 1rem; }
}
/* Footer: chỗ báo lỗi bên trái, nút bên phải */
.pm-err { color: var(--destructive, #ef4444); }
.pm-req { color: var(--destructive, #ef4444); }
.pm-textarea { min-height: 4.5rem; resize: vertical; }

/* Ô nhập có NHÓM nút bên phải (ẩn/hiện + copy + sinh) */
.pm-affix-3 .pm-control { padding-inline-end: 7rem; }
.pm-affix-btns {
  position: absolute;
  inset-inline-end: 0.375rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  gap: 0.125rem;
}
.pm-affix-btns .pm-affix-btn {
  position: static;
  transform: none;
}

/* ---------------------------------------------------------------------
   15. Nút thao tác nhỏ trong hàng / danh mục
   --------------------------------------------------------------------- */
.pm-mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.pm-mini-btn:hover {
  background-color: color-mix(in oklab, var(--foreground) 8%, transparent);
  color: var(--foreground);
}
.pm-mini-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.pm-mini-btn i { font-size: 1rem; line-height: 1; }
.pm-mini-btn.pm-mini-danger:hover {
  background-color: color-mix(in oklab, var(--destructive, #ef4444) 12%, transparent);
  color: var(--destructive, #ef4444);
}
.pm-mini-btn.pm-armed {
  width: auto;
  padding: 0 0.5rem;
  background-color: color-mix(in oklab, var(--destructive, #ef4444) 14%, transparent);
  color: var(--destructive, #ef4444);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.pm-row-actions {
  display: inline-flex;
  gap: 0.125rem;
  justify-content: flex-end;
}

/* Sao yêu thích */
.pm-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  flex-shrink: 0;
}
.pm-star:hover { color: #f59e0b; }
.pm-star.pm-star-on { color: #f59e0b; }
.pm-star i { font-size: 1rem; line-height: 1; }

/* ---------------------------------------------------------------------
   16. Bảng kho — desktop bảng, mobile thẻ (một DOM duy nhất)
   --------------------------------------------------------------------- */
.pm-vault-table th {
  padding: 0.625rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.pm-vault-table td {
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.pm-vault-table tbody tr[data-id] { cursor: pointer; }
.pm-vault-table tbody tr[data-id]:hover {
  background-color: color-mix(in oklab, var(--foreground) 3%, transparent);
}
.pm-title-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.pm-entry-title {
  font-weight: 500;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 22rem;
}
.pm-entry-url {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--muted-foreground);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 22rem;
}
a.pm-entry-url:hover { color: var(--primary); text-decoration: underline; }
.pm-user {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}
.pm-user-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 16rem;
}
.pm-dim { color: var(--muted-foreground); }
.pm-w-2xs { width: 100%; max-width: 11.5rem; }

/* Mobile (<64rem): mỗi hàng thành một THẺ, nhãn cột lấy từ data-th */
@media (max-width: 63.98rem) {
  .pm-vault-table thead { display: none; }
  .pm-vault-table, .pm-vault-table tbody { display: block; width: 100%; }
  .pm-vault-table tbody { padding: 0.75rem; }
  .pm-vault-table tbody tr {
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--background);
    margin-bottom: 0.75rem;
    padding: 0.375rem 0;
  }
  .pm-vault-table tbody tr:last-child { margin-bottom: 0; }
  .pm-vault-table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border: 0;
    padding: 0.375rem 0.875rem;
  }
  .pm-vault-table td[data-th]::before {
    content: attr(data-th);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    flex-shrink: 0;
  }
  .pm-vault-table td[data-th="Tên"] { padding-top: 0.625rem; }
  .pm-vault-table td[data-th="Tên"]::before { display: none; } /* tiêu đề tự nói lên */
  .pm-vault-table td[data-th="Tên"] .pm-title-cell { flex: 1 1 auto; }
  .pm-vault-table td[data-th="Thao tác"] {
    border-top: 1px solid var(--border);
    margin-top: 0.25rem;
    padding-top: 0.5rem;
  }
  /* Hàng "trạng thái rỗng" chiếm trọn, không viền thẻ */
  .pm-vault-table tbody tr:has(.pm-empty) {
    border: 0;
    padding: 0;
  }
  .pm-vault-table tbody tr:has(.pm-empty) td { display: block; padding: 0; }
  .pm-vault-table tbody tr:has(.pm-empty) td::before { display: none; }
  /* Nút thao tác to hơn chút cho ngón tay */
  .pm-row-actions .pm-mini-btn { width: 2.5rem; height: 2.25rem; }
}

/* Hàng trong modal Danh mục */
.pm-folder-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.pm-folder-row .pm-control { flex: 1 1 auto; min-width: 0; }
.pm-folder-count { flex-shrink: 0; }

/* ---------------------------------------------------------------------
   PHIÊN 4 — Generator & Health
   --------------------------------------------------------------------- */

/* Thanh đo độ mạnh (dùng chung: generator, form entry, Phiên 5) */
.pm-meter {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.pm-meter-track {
  height: 0.375rem;
  border-radius: 999px;
  background-color: color-mix(in oklab, var(--foreground) 8%, transparent);
  overflow: hidden;
}
.pm-meter-bar {
  height: 100%;
  width: 0;
  border-radius: 999px;
  transition: width 0.2s ease, background-color 0.2s ease;
}
.pm-meter-0 { background-color: var(--color-red-600, #dc2626); }
.pm-meter-1 { background-color: var(--color-orange-500, #f97316); }
.pm-meter-2 { background-color: var(--color-yellow-500, #eab308); }
.pm-meter-3 { background-color: var(--color-green-500, #22c55e); }
.pm-meter-4 { background-color: var(--color-emerald-600, #059669); }

/* Ô hiển thị mật khẩu sinh ra: phân màu số / ký tự đặc biệt */
.pm-passout { overflow-wrap: anywhere; min-height: 1.4em; }
/* .pm-affix-btn mặc định position:absolute (cho ô input) — trong passbox
   các nút nằm trong flex, phải về static kẻo chồng lên nhau. */
.pm-passbox .pm-affix-btn { position: static; transform: none; flex-shrink: 0; }
.pm-ch-d { color: var(--color-blue-500, #3b82f6); }
.pm-ch-s { color: var(--color-orange-500, #f97316); }

/* Ô số nhỏ cạnh slider độ dài */
.pm-num { width: 5rem; text-align: center; }
.pm-w-fit { width: fit-content; }

/* Lưới 4 thẻ thống kê (health) */
.pm-stat-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem) {
  .pm-stat-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Dòng vấn đề trong health: cả dòng là nút bấm → mở sửa entry */
.pm-issue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.pm-issue:hover {
  background-color: color-mix(in oklab, var(--foreground) 5%, transparent);
}
.pm-issue:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.pm-issue-main {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.pm-issue-title {
  font-weight: 500;
  color: var(--foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pm-issue-sub {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pm-issue-go { color: var(--muted-foreground); font-size: 1rem; }

/* Badge trạng thái vấn đề */
.pm-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}
.pm-badge-red {
  color: var(--color-red-600, #dc2626);
  background-color: color-mix(in oklab, var(--color-red-500, #ef4444) 12%, transparent);
}
.pm-badge-orange {
  color: var(--color-orange-600, #ea580c);
  background-color: color-mix(in oklab, var(--color-orange-500, #f97316) 12%, transparent);
}
.pm-badge-yellow {
  color: var(--color-yellow-600, #ca8a04);
  background-color: color-mix(in oklab, var(--color-yellow-500, #eab308) 14%, transparent);
}
.pm-badge-gray {
  color: var(--muted-foreground);
  background-color: color-mix(in oklab, var(--foreground) 7%, transparent);
}

/* Thanh tiến độ HIBP */
.pm-progress {
  height: 0.375rem;
  border-radius: 999px;
  background-color: color-mix(in oklab, var(--foreground) 8%, transparent);
  overflow: hidden;
}
.pm-progress-bar {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background-color: var(--primary);
  transition: width 0.2s ease;
}

/* ===== Phiên 5.1 — Tinh chỉnh UI Cài đặt ===== */

/* Bó chiều rộng form (pm-w-xs đã có ở trên) */
.pm-w-md { width: 100%; max-width: 30rem; }

/* Bố cục 2 cột cho trang Cài đặt trên màn rộng.
   Dùng media query RIÊNG (không dựa lg:grid-cols của Tailwind) —
   theo bài học @layer từ Phiên 1. */
.pm-settings-grid,
.pm-settings-main,
.pm-settings-side {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}
@media (min-width: 1024px) {
  .pm-settings-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* File picker tùy biến: input gốc ẩn nhưng vẫn trong DOM
   (giữ id cho test jsdom/Playwright), nút + tên file thay mặt. */
.pm-file {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.pm-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.pm-file-name {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  max-width: 100%;
  padding: 0.3rem 0.65rem;
  border-radius: 0.5rem;
  border: 1px dashed var(--border);
  color: var(--muted-foreground);
  font-size: 0.8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pm-file-name.pm-file-has {
  border-style: solid;
  color: var(--foreground);
  background-color: color-mix(in oklab, var(--primary) 8%, transparent);
}
.pm-file-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
}
.pm-file-clear:hover {
  color: var(--destructive, #ef4444);
  background-color: color-mix(in oklab, var(--destructive, #ef4444) 10%, transparent);
}