@layer legacy {
/* =====================================================================
   ANTISCREENSHOT — deliberately local-first: the page indexes a user folder,
   while this UI stays compact enough for a desktop widget window. */
/* =====================================================================
   ANTISCREENSHOT — trang chỉnh sửa và trang thư viện ảnh chụp
   ===================================================================== */

/* position/z-index KHÔNG phải để trang trí: .app-background (hình nền + lớp
   phủ) là một phần tử position:absolute; z-index:0 nằm ngay trong .app. Một
   trang không tự tạo ngữ cảnh xếp lớp thì thứ tự vẽ giữa nó và phần tử định vị
   đó do engine tự quyết, và trên bản Chromium này nó đảo ngược: nền lẫn thanh
   công cụ của trang vẫn nằm đúng trong render tree, vẫn nhận được chuột, nhưng
   trên màn hình chỉ thấy hình nền. Xem ghi chú dài ở .grid. MỌI trang nội dung
   đều phải có cặp thuộc tính này. */
/* Khung trang bên dưới CHỈ là lớp nền dự phòng. Chrome thật (margin, viền, bo
   góc, --ux-workspace) do khối "Unified Fluent/Liquid Glass product shell" ở
   trên quy định cho cả 10 trang cùng lúc, và trang phải CÓ TÊN trong danh sách
   :is(...) đó thì mới nhận.

   AntiScreenshot trước đây bị bỏ sót khỏi danh sách ấy — đó là gốc của cả hai
   triệu chứng, không phải chuyện chọn sai mã màu:
     • shell cho .topbar margin 8px 8px 0 rồi dán thân trang vào ngay bên dưới
       (margin: 0 8px 8px; border-top: 0). Trang này giữ margin:10px của riêng
       nó → hở đúng một dải 10px giữa topbar và trang, lọt wallpaper qua =
       "khoảng đen giữa tiêu đề AntiScreenshot và header ứng dụng", đồng thời
       lệch 2px so với mép topbar.
     • nền vẫn là --sf-chrome pha tay thay vì --ux-workspace, viền --stroke
       thay vì --ux-border, còn nguyên box-shadow --elev-4 và bo 4 góc →
       "màu nền, giao diện chưa giống Notics".
   Sửa bằng cách thêm tên trang vào danh sách shell, KHÔNG chỉnh số ở đây. */
/* GĐ4: .antiscreenshot-library-page là selector chết — không phần tử nào trong
   index.html mang class đó (thư viện ảnh là overlay .antiscreenshot-all-panel).
   Cùng loại với .notics-col-plan và .project-sidebar đã xóa ở GĐ2. */
.antiscreenshot-page {
  position: relative; z-index: 1;
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  padding: 0; margin: var(--ui-space-2-5);
  /* Bề rộng MỘT ô trong khay đáy — thẻ ảnh/video, "Tất cả" và nút ẩn/hiện đều
     dùng chung để cùng kích cỡ (BA 2026-09-26); khai ở đây (không phải trong
     .antiscreenshot-tray) vì nút ẩn/hiện nổi ĐỘC LẬP ngoài khay, chỉ còn thừa
     hưởng biến từ tổ tiên chung này. Theo trục chữ (--font-scale). */
  --as-tray-card-w: calc(var(--ui-space-12) * 2);
  color: var(--ui-text-primary);
  background: var(--ux-base);
  border-radius: var(--ui-radius-panel);
  border: var(--ui-stroke-thin) solid var(--stroke);
  box-shadow: var(--elev-4);
  overflow: hidden;
  /* Nền hố canvas. #111827 cứng trước đây là một mảng xanh-đen giữa giao diện
     sáng — sai hẳn tông so với mọi trang khác. Công thức recess giống
     .antipaint-canvas-stage: pha --ink (đen ở light, trắng ở dark) vào nền
     chrome, nên nó tự lún xuống một bậc ở CẢ hai chế độ.
     Bắt buộc ĐỤC (không alpha): .antiscreenshot-veil tô đúng biến này để vùng
     bị cắt trông như đã xoá hẳn — hở alpha là lộ ảnh bên dưới. */
  --as-canvas-bg: color-mix(in srgb, rgb(var(--ink)) 6%, rgb(var(--ui-surface-shell-rgb)));
}

/* Header là GRID có track cố định, không phải flex: cột tài liệu (cột 2) nuốt
   hết phần dư, nên khối thu phóng và nhóm nút chụp đứng yên tuyệt đối khi
   chuyển qua lại giữa các ảnh có tên dài ngắn khác nhau. Đây là yêu cầu rõ
   ràng — cột không được nhảy khi đổi ảnh. */
.topbar-section-antiscreenshot {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
  min-width: 0;
}
/* Tên ảnh sát dấu "/" (BA 11/10/2026): không khe giữa "/" và ô tên — chữ cách "/" đúng lề
   trong của ô (space-2), bằng khe "Art Editor" → "/" của .topbar-section-antiscreenshot. */
.topbar-section-antiscreenshot .antiscreenshot-doc {
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}
.topbar-section-antiscreenshot .antiscreenshot-doc > .antiscreenshot-size { margin-left: var(--ui-space-2); }
.topbar-section-antiscreenshot .antiscreenshot-doc[hidden],
.topbar-section-antiscreenshot .antiscreenshot-doc.hidden {
  display: none !important;
}
.antiscreenshot-title {
  min-width: 0;
  flex: 1 1 auto;
  max-width: var(--ui-popover-w-lg);
  height: var(--ui-size-md);
  padding: 0 var(--ui-space-2);
  border: var(--ui-stroke-thin) solid transparent;
  border-radius: var(--ui-radius-control);
  color: var(--ui-text-primary);
  background: transparent;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  transition-property: var(--tr-ui);
  transition-timing-function: var(--ui-ease);
  transition-duration: var(--ui-duration-fast);
}
.antiscreenshot-title:hover { border-color: var(--stroke); }
.antiscreenshot-title:focus { outline: none; border-color: var(--ux-control-border-active); box-shadow: var(--ui-control-ring); caret-color: var(--ui-accent); background: rgb(var(--ui-surface-raised-rgb)); }
.antiscreenshot-size { color: var(--ui-text-secondary); font-size: var(--fs-body); white-space: nowrap; font-variant-numeric: tabular-nums; }

.topbar-actions-antiscreenshot {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
}
.antiscreenshot-zoom {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
}
.antiscreenshot-zoom[hidden],
.antiscreenshot-zoom.hidden {
  display: none !important;
}
.antiscreenshot-zoom button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-1);
  height: var(--ui-control-h-standard);
  min-width: var(--ui-size-md);
  padding: 0 var(--ui-space-2);
  border: var(--ui-stroke-thin) solid transparent;
  border-radius: var(--ui-radius-control);
  color: var(--ui-text-secondary);
  background: transparent;
  cursor: pointer;
  font-size: var(--fs-body);
  font-variant-numeric: tabular-nums;
  box-shadow: none;
  transition: all var(--ui-duration-fast) var(--ui-ease);
}
.antiscreenshot-zoom button:hover { border-color: transparent; color: var(--ui-text-primary); background: var(--ui-hover); }
#screenshotZoomLabel { min-width: var(--ui-space-12); }
#screenshotZoomFitBtn { min-width: var(--dt-dimension-layout-88); }

.antiscreenshot-capture-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--ui-control-h-standard);
  padding: 0 var(--ui-space-3-5);
  border: var(--ui-stroke-thin) solid transparent;
  border-radius: var(--ui-radius-control);
  color: var(--ui-text-primary);
  background: transparent;
  cursor: pointer;
  box-shadow: none;
  transition: all var(--ui-duration-fast) var(--ui-ease);
}
.antiscreenshot-capture-btn:hover { border-color: transparent; background: var(--ui-hover); color: var(--ui-text-primary); }
.antiscreenshot-capture-btn.is-primary { color: var(--ui-text-on-accent); background: var(--ui-accent-solid); border-color: transparent; box-shadow: var(--ui-shadow-accent); }
.antiscreenshot-capture-btn.is-primary:hover { filter: brightness(1.08); background: var(--ui-accent); box-shadow: var(--ui-shadow-accent), var(--ui-elevation-2); }
.antiscreenshot-capture-btn.is-compact .antiscreenshot-capture-main > :not(svg:first-child) { display: none; }
.antiscreenshot-capture-main { display: inline-flex; align-items: center; gap: var(--ui-space-1-5); font-size: var(--fs-body); font-weight: var(--fw-bold); white-space: nowrap; }


/* Bố cục kiểu Snagit (BA 2026-09-25): hàng chính = khu làm việc + bảng phải
   (Thuộc tính | Mẫu hình — dùng chung ảnh và video); ảnh/video nằm trong KHAY
   ngang dưới đáy thay cho cột trái. Khung ảnh rộng thêm đúng bề rộng cột cũ. */
.antiscreenshot-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Mốc định vị cho #antiScreenshotEmpty (position: absolute) — tổng chiều cao
     của body KHÔNG đổi khi khay Ẩn/hiện (chỉ phần chia trong nó đổi), nên đặt
     text theo mốc này thay vì .antiscreenshot-workspace (co giãn theo khay) là
     text đứng yên (BA 2026-09-27). */
  position: relative;
}
.antiscreenshot-main-row {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  /* Mốc của ngăn kéo bảng phải ở màn hẹp (compact/tight). */
  position: relative;
  overflow: hidden;
}
.antiscreenshot-main-row > .antiscreenshot-workspace {
  flex: 1 1 auto;
}

/* Khay: cụm tab Ảnh | Video + "Tất cả" đứng đầu hàng, tối đa 10 thẻ gần nhất
   (BA 2026-09-26: không cuộn ngang — xem thêm bấm "Tất cả" mở thư viện đầy đủ).
   Ẩn khay (Ctrl+\ / nút nổi góc phải-dưới) = ẩn hẳn, khung ảnh lấy lại chiều cao. */
.antiscreenshot-tray {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  min-width: 0;
  /* Nền bậc chìm + kẻ mép do .ux-pane (cùng vai trò cột điều hướng cũ). */
  border-top: var(--ui-resizer-line) solid var(--ux-divider);
}
.antiscreenshot-tray.is-ws-collapsed {
  height: 0;
  min-height: 0;
  max-height: 0;
  padding: 0;
  border-top: none;
  overflow: visible;
}
.antiscreenshot-tray.is-ws-collapsed .antiscreenshot-tray-head,
.antiscreenshot-tray.is-ws-collapsed #antiScreenshotList,
.antiscreenshot-tray.is-ws-collapsed #antiScreenshotAllBtn {
  display: none;
}
/* Đầu khay: chỉ tab Ảnh | Video; cuối khay: cụm Tất cả + Ẩn/hiện (bên phải, BA 2026-09-26). */
.antiscreenshot-tray-head,
.antiscreenshot-tray-end {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding: var(--ui-space-1-5) var(--ui-space-2);
}
.antiscreenshot-tray-head {
  border-right: var(--ui-resizer-line) solid var(--ux-divider);
}
.antiscreenshot-tray-end {
  /* Đẩy sát mép phải khay dù danh sách không đủ ảnh lấp hết chỗ (BA 2026-09-26). */
  margin-left: auto;
  border-left: var(--ui-resizer-line) solid var(--ux-divider);
}
.antiscreenshot-tray.is-ws-collapsed .antiscreenshot-tray-end {
  position: absolute;
  right: var(--ui-space-2);
  bottom: var(--ui-space-1-5);
  border-left: none;
  padding: 0;
  margin: 0;
  /* Trên cả overlay "Tất cả" (z-index modal): khay thu gọn thì nút Ẩn/hiện nổi
     TRÊN main-row — overlay giờ chỉ phủ main-row (không phủ khay, BA 2026-09-27)
     nhưng main-row giãn hết chỗ khay để trống nên vẫn đè đúng góc nút nổi; nút
     phải luôn bấm được để mở lại khay dù đang ở màn Art Editor hay màn thư viện. */
  z-index: calc(var(--ui-layer-modal) + 1);
}
/* Nhãn tab Ảnh/Video & Tất cả/Ẩn hiện: icon nhận biết + chữ (BA 2026-09-26). */
.antiscreenshot-kind-label {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1-5);
  min-width: 0;
}
/* #antiScreenshotAllBtnIcon chỉ là chỗ neo cho JS đổi svg khi overlay Tất cả/Art
   Editor mở (BA 2026-09-27) — display: contents để KHÔNG thêm hộp flex item mới,
   giữ đúng bề rộng nút như trước (fitTrayCount đo offsetWidth cụm này để tính số
   thẻ vừa khay, thêm 1 hộp dù rỗng cũng lệch phép tính). */
#antiScreenshotAllBtnIcon {
  display: contents;
}
.antiscreenshot-tray .antiscreenshot-list.ws-list--cards {
  /* flex: 0 1 auto — CO THEO ĐÚNG SỐ THẺ, không kéo giãn hết chỗ còn lại (từng
     để lại khoảng trống hụt trước "Tất cả" khi ít ảnh). Không cuộn: quá 10 thẻ
     (TRAY_VISIBLE_ITEMS, antiScreenshot.js) thì phần dư bị cắt thay vì cuộn. */
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: var(--ui-space-2);
  padding: var(--ui-space-1-5) var(--ui-space-2);
  overflow: hidden;
}
.antiscreenshot-tray .ws-list--cards .ws-item {
  flex: 0 0 var(--as-tray-card-w);
  width: var(--as-tray-card-w);
  height: auto;
  min-height: 0;
  max-height: none;
  grid-template-rows: auto auto;
  gap: var(--ui-space-1);
  padding: var(--ui-space-1);
}
/* Ảnh hiện TRỌN (contain) trên nền chìm như Snagit — ảnh chụp dọc/ngang đều thấy hết, không bị cắt. */
.antiscreenshot-tray .ws-list--cards .ws-item-thumb {
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 16 / 9;
  background-size: contain;
  background-color: var(--as-canvas-bg);
}
.antiscreenshot-tray .ws-list--cards .ws-item-body {
  height: auto;
}
/* Thẻ khay chỉ còn ảnh + tên (như Snagit); giờ chụp, cỡ, thời lượng xem ở topbar khi mở. */
.antiscreenshot-tray .ws-item-title {
  font-size: var(--fs-caption);
  font-weight: var(--fw-normal);
}
.antiscreenshot-tray .ws-item-meta {
  display: none;
}
.antiscreenshot-tray :is(.ws-list-empty, .ws-list-more) {
  align-self: center;
  white-space: nowrap;
}

.antiscreenshot-library-body :is(.antiscreenshot-asset-card, .antiscreenshot-accordion-item)[hidden] {
  display: none;
}
.antiscreenshot-library-search-empty {
  margin: var(--ui-space-4) var(--ui-space-3);
  color: var(--ui-text-muted);
  font-size: var(--fs-body);
  text-align: center;
}

.antiscreenshot-kind-tabs .ui-segmented__item {
  gap: var(--ui-space-1-5);
  padding: 0 var(--ui-space-2);
}

.antiscreenshot-kind-count {
  color: var(--ui-text-muted);
  font-weight: var(--fw-normal);
  font-variant-numeric: tabular-nums;
}

.antiscreenshot-kind-count:empty {
  display: none;
}

.antiscreenshot-kind-tabs .ui-segmented__item[aria-selected="true"] .antiscreenshot-kind-count {
  color: inherit;
}


/* Thẻ ảnh xem trước trong cột bên trái */
/* Cùng cặp hover/active với .ws-item — hai danh sách này nằm cạnh nhau trong
   cùng một cột nên lệch nhau là thấy ngay. */

/* Popup "Tất cả" Art Editor (Modal Overlay in-page chuẩn Full Body) */
.antiscreenshot-all-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--ui-layer-modal);
  display: flex;
  flex-direction: column;
  background: rgb(var(--ux-raised-rgb));
  border-radius: inherit;
  overflow: hidden;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.antiscreenshot-all-panel {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border-radius: 0;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  background: rgb(var(--ux-raised-rgb));
}
.antiscreenshot-all-header {
  padding: 0 var(--ui-space-5);
  background: var(--ux-sunken);
  border-bottom: var(--ui-stroke-thin) solid var(--ux-divider);
}
.antiscreenshot-all-header-leading {
  display: flex;
  align-items: baseline;
  gap: var(--ui-space-2);
}
.antiscreenshot-all-header-leading .antiscreenshot-library-count {
  font-size: var(--fs-micro);
  color: var(--ui-text-secondary);
  font-weight: var(--fw-medium);
}
.antiscreenshot-all-header-actions {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2-5);
}

.antiscreenshot-workspace { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.antiscreenshot-empty {
  /* absolute + inset:0 trên .antiscreenshot-body (position: relative, cao cố định) thay vì
     flex:1 trong .antiscreenshot-workspace — workspace co giãn theo khay Ẩn/hiện nên từng
     làm text tự canh giữa lại mỗi lần bấm, giờ đứng yên (BA 2026-09-27). pointer-events:none
     vì đây chỉ là hướng dẫn tĩnh, không chặn click xuống khay/toolbar bên dưới nó theo DOM. */
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: grid;
  place-items: center;
  align-content: center;
  padding: var(--ui-space-12);
  text-align: center;
  color: var(--ui-text-secondary);
}
.antiscreenshot-empty h2 { margin: var(--ui-space-3) 0 var(--ui-space-1-5); color: var(--ui-text-primary); font-size: var(--fs-title-lg); }
.antiscreenshot-empty p { max-width: var(--dt-component-dialog-small-max-width); margin: 0; line-height: var(--lh-relaxed); }
/* Lớp hướng dẫn vẫn pointer-events:none; riêng cụm nút nhận click. */
.antiscreenshot-empty-actions { pointer-events: auto; display: flex; gap: var(--ui-space-2); justify-content: center; margin-top: var(--ui-space-4); }
.antiscreenshot-empty-icon { display: grid; place-items: center; width: var(--ui-space-12); height: var(--ui-space-12); border-radius: var(--ui-radius-lg); color: var(--ui-accent); font-size: var(--fs-display-lg); background: color-mix(in srgb, var(--ui-accent) 13%, transparent); }
.antiscreenshot-empty-list { margin: var(--ui-space-4-5) var(--ui-space-2-5); color: var(--ui-text-secondary); font-size: var(--fs-body); line-height: var(--lh-normal); text-align: center; }

.antiscreenshot-editor { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

/* Ribbon một hàng. Màu nét, viền và đổi kích thước nằm trong popover thay vì
   chiếm thêm hai hàng riêng — nhờ vậy khung ảnh được thêm ~130px chiều cao.

   Công cụ/thuộc tính vẽ đứng đầu (leading), Copy/Lưu/Save As + menu ⋯/Xóa dồn
   hẳn về MÉP PHẢI (trailing) — space-between giữa đúng HAI khối này, không
   phải margin-left:auto trên từng nhóm nhỏ: khung hẹp lại thì cả khối trailing
   xuống dòng NGUYÊN VẸN cùng nhau, không rã ra để lại nút ⋯ / Xóa mồ côi một
   mình trên hàng riêng như cách làm cũ. */
.antiscreenshot-toolbar {
  flex: 0 0 auto;
  position: relative;
  z-index: var(--ui-layer-pane-top);
  display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-2-5); flex-wrap: wrap;
  max-width: 100%;
  padding: var(--ui-space-2) var(--ui-space-3);
  border-bottom: var(--ui-stroke-thin) solid var(--ux-divider);
  /* Thanh công cụ phải là mặt phẳng ĐẶC, không theo vật liệu kính/wallpaper
     (BA 2026-09-26). --ux-panel giờ là alias của --ux-base = rgba(rgb, --a-content)
     (GĐ1 thang 5 bậc, styles.css) nên vẫn ăn theo material Acrylic/Kính trong —
     phải lấy thẳng kênh RGB (bỏ alpha --a-content) mới cố định được màu. */
  background: rgb(var(--ux-raised-rgb));
}
.antiscreenshot-toolbar-leading, .antiscreenshot-toolbar-trailing {
  display: flex; align-items: center; gap: var(--ui-space-1-5); flex-wrap: wrap;
}
.antiscreenshot-tool-group { position: relative; display: inline-flex; align-items: center; gap: var(--ui-space-1); padding-right: var(--ui-space-1-5); border-right: var(--ui-stroke-thin) solid var(--ux-divider); }
.antiscreenshot-tool-group:last-child { padding-right: 0; border-right: 0; }
.antiscreenshot-output-group { gap: var(--ui-space-1-5); }
/* Màn hẹp: thanh công cụ cuộn ngang một hàng (responsive-layout.css) — Copy/Lưu
   chỉ còn icon (tooltip giữ tên + phím tắt) để nút ⋯ cuối thanh không bị khuất. */
:is(html[data-layout-mode="medium"], html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .antiscreenshot-output-group .antiscreenshot-btn-label { display: none; }

.antiscreenshot-swatch { width: var(--ui-icon-dense); height: var(--ui-icon-dense); border-radius: var(--ui-radius-control); border: var(--ui-stroke-thin) solid var(--ux-border); }
.antiscreenshot-swatch.is-transparent { position: relative; background: transparent; }
.antiscreenshot-swatch.is-transparent::after { content: ''; position: absolute; top: 50%; left: 0; right: 0; border-top: var(--ui-stroke-thin) solid var(--ui-danger); transform: rotate(-45deg); transform-origin: center; }

/* Thanh trạng thái đáy khung ảnh (BA 11/10/2026): ✓ tự lưu · cỡ ảnh · thu phóng. Một hàng
   thật cuối cột (order) — không nổi đè lên ảnh khi phóng to; nền nối liền vùng canvas. */
.antiscreenshot-statusbar {
  order: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  min-width: 0;
  height: var(--ui-size-md);
  padding: 0 var(--ui-space-3);
  background: var(--as-canvas-bg);
}
.antiscreenshot-statusbar .antiscreenshot-zoom button { height: var(--ui-size-sm); }
.antiscreenshot-saved-hint {
  flex: 0 0 auto;
  width: var(--ui-size-sm); height: var(--ui-size-sm); display: inline-flex; align-items: center; justify-content: center;
  border: var(--ui-stroke-thin) solid var(--ux-border); border-radius: var(--ui-radius-full);
  color: var(--ui-accent); background: rgb(var(--ui-surface-raised-rgb)); box-shadow: var(--elev-2);
  pointer-events: none; opacity: .92;
}
.antiscreenshot-saved-hint[data-state="saving"] svg { animation: antiscreenshot-save-spin var(--ui-duration-spin) linear infinite; }
.antiscreenshot-saved-hint[data-state="error"] { color: var(--ui-danger); }
/* Đã lưu = trạng thái nghỉ: chỉ còn dấu ✓ chữ phụ, không viền/nền/bóng (AT-CALM, báo cáo
   UX 10/10/2026 §4.4). Đang chờ/đang lưu/lỗi vẫn hiện dạng nổi để người dùng để ý. */
.antiscreenshot-saved-hint[data-state="saved"] {
  border-color: transparent; background: transparent; box-shadow: none; color: var(--ui-text-muted);
}
/* Cột vùng ảnh: bố cục flex dọc chứa thanh ribbon định dạng cố định ở đầu
   và khung cuộn canvas bên dưới, tách bạch hoàn toàn không đè nhau. */
.antiscreenshot-canvas-column { 
  position: relative; 
  display: flex; 
  flex-direction: column;
  flex: 1 1 auto; 
  min-width: 0; 
  min-height: 0; 
  overflow: hidden;
  --as-stage-left-offset: var(--ui-space-12); /* 48px: lề trái cố định chuẩn Axure / Figma */
}

/* Thanh định dạng ribbon 2 dòng cố định chuẩn Design Tokens dưới thanh công cụ chính.
   Khóa cố định 2 dòng để không bao giờ bị giật layout khi chọn / bỏ chọn / thoát hình. */
#pageDimensionsLabel {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.antiscreenshot-fmt-font-btn { justify-content: space-between; }
/* Nút màu nền/viền/chữ chỉ còn ô màu; tên màu vẫn đọc được qua title/aria-label
   và qua nhãn ẩn trực quan bên trong. */
/* Nút kiểu PowerPoint trên thanh định dạng: Icon phía trên, thanh gạch màu phía dưới */
/* Ô chọn tùy biến (độ dày, độ mờ, cỡ chữ) mặc định cao 32px / rộng tối thiểu
   120px — trong thanh gọn phải cao bằng một control và chỉ rộng 3 ô. */
.antiscreenshot-fmt-glyph { font-size: var(--fs-body); line-height: 1; }
.antiscreenshot-fmt-glyph.is-bold { font-weight: var(--fw-bold); }
.antiscreenshot-fmt-glyph.is-italic { font-style: italic; }
.antiscreenshot-fmt-glyph.is-underline { text-decoration: underline; }
.antiscreenshot-fmt-glyph.is-strike { text-decoration: line-through; }
/* Thanh nổi không cần badge tên loại (đã có aria-label) — bỏ để khỏi tốn một hàng. */
/* Popover của thanh nổi: JS chọn phía còn chỗ và ghi khoảng trống thật vào
   --as-popover-max-h để danh sách dài cuộn bên trong, không tràn khỏi cửa sổ. */
.antiscreenshot-popover[data-screenshot-popover^="fmt_pop"] { max-height: var(--as-popover-max-h, none); overflow-y: auto; }
.antiscreenshot-font-picker { width: var(--ui-popover-w-lg); max-height: var(--as-popover-max-h, none); display: flex; flex-direction: column; gap: var(--ui-space-2); }
.antiscreenshot-font-search {
  height: var(--ui-size-lg); padding: 0 var(--ui-space-2);
  border: var(--ui-stroke-thin) solid var(--ux-input-border); border-radius: var(--ui-radius-control);
  background: var(--ux-input-bg); color: var(--ui-text-primary); font-size: var(--fs-body);
}
.antiscreenshot-font-search:focus { outline: none; border-color: var(--ux-control-border-active); box-shadow: var(--ui-control-ring); }
.antiscreenshot-font-list { max-height: min(60vh, calc(var(--ui-size-lg) * 10)); overflow-y: auto; display: flex; flex-direction: column; gap: var(--ui-space-1); }
.antiscreenshot-font-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-2);
  width: 100%; min-height: var(--ui-size-lg); padding: 0 var(--ui-space-2);
  border: 0; border-radius: var(--ui-radius-control); background: transparent;
  color: var(--ui-text-primary); font-size: var(--fs-body); text-align: left; cursor: pointer;
}
.antiscreenshot-font-item:hover { background: color-mix(in srgb, var(--ui-accent) 10%, transparent); }
.antiscreenshot-font-item.is-active { color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 14%, transparent); }
.antiscreenshot-font-item small { flex: 0 0 auto; color: var(--ui-text-secondary); font-size: var(--fs-caption); }
.antiscreenshot-dimensions-popover {
  min-width: var(--as-dim-popover-min-w, var(--dt-dimension-layout-288));
  max-width: var(--as-dim-popover-max-w, var(--dt-dimension-layout-360));
  max-height: calc(100vh - var(--ui-space-4));
  overflow-y: auto;
  padding: var(--ui-space-2);
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
}
.antiscreenshot-dimensions-category {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--ui-text-muted);
  padding: var(--ui-space-2) var(--ui-space-2) var(--ui-space-1);
}
.antiscreenshot-dimensions-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: var(--ui-control-h-toolbar-dense);
  padding: var(--ui-space-1) var(--ui-space-2);
  border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--ui-text-primary);
  font-size: var(--fs-body);
  cursor: pointer;
  text-align: left;
  transition: background var(--ui-duration-fast) var(--ui-ease);
}
.antiscreenshot-dimensions-item:hover {
  background: var(--ui-hover);
}
.antiscreenshot-dimensions-item.is-selected {
  background: color-mix(in srgb, var(--ui-accent) 14%, transparent);
  color: var(--ui-accent);
  font-weight: var(--fw-semibold);
}
.antiscreenshot-dimensions-size {
  font-size: var(--fs-caption);
  color: var(--ui-text-muted);
  font-family: var(--font-mono, monospace);
}
.antiscreenshot-dimensions-custom-row {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  padding: var(--ui-space-1) var(--ui-space-2);
}
.antiscreenshot-dimensions-custom-input {
  width: var(--as-dim-input-w, var(--dt-dimension-layout-72));
  height: var(--ui-control-h-toolbar-dense);
  padding: 0 var(--ui-space-2);
  border: var(--ui-stroke-thin) solid var(--ux-input-border);
  border-radius: var(--ui-radius-control);
  background: var(--ux-input-bg);
  color: var(--ui-text-primary);
  font-size: var(--fs-body);
  text-align: center;
}
.antiscreenshot-dimensions-custom-input:focus {
  outline: none;
  border-color: var(--ux-control-border-active);
  box-shadow: var(--ui-control-ring);
}
.antiscreenshot-fmt-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1-5);
  padding: 0 var(--ui-space-2);
  border: var(--ui-stroke-thin) solid transparent;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--ui-text-secondary);
  font-size: var(--fs-body);
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  flex-shrink: 0;
  transition-property: var(--tr-ui);
  transition-timing-function: var(--ui-ease);
  transition-duration: var(--ui-duration-fast);
}
.antiscreenshot-fmt-btn:hover {
  border-color: transparent;
  color: var(--ui-accent);
  background: var(--ui-hover);
}
.antiscreenshot-fmt-btn-group {
  display: inline-flex;
  align-items: center;
  border: var(--ui-stroke-thin) solid transparent;
  border-radius: var(--ui-radius-control);
  background: transparent;
  overflow: hidden;
  box-sizing: border-box;
  flex-shrink: 0;
  gap: var(--ui-space-0-5);
}
/* Nút trong nhóm định dạng là .ui-btn nhẹ icon sm (+ --toggle / --danger-hover) — GĐ F 01/10/2026. */

.antiscreenshot-popover {
  position: fixed; z-index: var(--layer-popover, 100);
  display: grid; gap: var(--ui-space-2); min-width: var(--dt-component-popover-capture-min-width); padding: var(--ui-space-3);
  border: var(--ui-stroke-thin) solid var(--ux-border); border-radius: var(--ui-radius-panel);
  background: var(--ux-overlay); box-shadow: var(--ui-elevation-4);
}
.antiscreenshot-popover label { display: flex; align-items: center; gap: var(--ui-space-2); color: var(--ui-text-primary); font-size: var(--fs-body); }
.antiscreenshot-popover input[type="number"] { width: calc(var(--ui-space-8) * 2); min-width: calc(var(--ui-space-12) + var(--ui-space-1)); box-sizing: border-box; min-height: var(--ui-size-sm); padding: 0 var(--ui-space-1); border: var(--ui-resizer-line) solid var(--ux-input-border); border-radius: var(--ui-radius-control); color: var(--ui-text-primary); background: var(--ux-input-bg); }
.antiscreenshot-popover output { min-width: var(--ui-icon-md); font-variant-numeric: tabular-nums; }
.antiscreenshot-popover-item {
  display: flex; align-items: center; gap: var(--ui-space-2); width: 100%; padding: var(--ui-space-2);
  border: var(--ui-stroke-thin) solid transparent; border-radius: var(--ui-radius-control);
  color: var(--ui-text-primary); background: transparent; text-align: left; cursor: pointer; font-size: var(--fs-body);
  transition-property: var(--tr-ui); transition-timing-function: var(--ui-ease); transition-duration: var(--ui-duration-fast);
}
.antiscreenshot-popover-item:hover { background: color-mix(in srgb, var(--ui-accent) 10%, transparent); }
.antiscreenshot-popover-item.is-active { color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 14%, transparent); }
.antiscreenshot-popover-item span { flex: 1; }
.antiscreenshot-popover-item small { color: var(--ui-accent); font-size: var(--fs-caption); }
.antiscreenshot-popover-item small.is-owned { visibility: hidden; }

/* Menu lệnh Art Editor ("Tạo mới" trên topbar, ⋯ trên thanh công cụ): mỗi dòng icon · tên · phím tắt. */
.antiscreenshot-action-menu { gap: 0; padding: var(--ui-space-1); }
.antiscreenshot-action-menu[hidden],
.antiscreenshot-action-menu .ux-kbd[hidden] { display: none; }
.antiscreenshot-action-menu .antiscreenshot-popover-item { gap: var(--ui-space-2-5); padding: var(--ui-space-2) var(--ui-space-2-5); white-space: nowrap; }
.antiscreenshot-action-menu .antiscreenshot-popover-item svg { flex: 0 0 auto; color: var(--ui-text-secondary); }
.antiscreenshot-action-menu .antiscreenshot-popover-item:focus-visible { outline: none; background: color-mix(in srgb, var(--ui-accent) 10%, transparent); box-shadow: var(--ui-control-ring); }
.antiscreenshot-action-menu .antiscreenshot-popover-item:disabled { color: var(--ui-text-muted); background: transparent; cursor: default; }
.antiscreenshot-action-menu .antiscreenshot-popover-item:disabled svg { color: var(--ui-text-muted); }
.antiscreenshot-menu-sep { margin: var(--ui-space-1) 0; border-top: var(--ui-resizer-line) solid var(--ux-divider); }
.vx-file-menu-meta { padding: var(--ui-space-1) var(--ui-space-2-5) var(--ui-space-1-5); color: var(--ui-text-muted); }
.antiscreenshot-action-menu .antiscreenshot-popover-item.is-danger,
.antiscreenshot-action-menu .antiscreenshot-popover-item.is-danger svg { color: var(--ui-danger); }
.antiscreenshot-action-menu .antiscreenshot-popover-item.is-danger:hover { background: color-mix(in srgb, var(--ui-danger) 10%, transparent); }
.antiscreenshot-popover-note { max-width: var(--dt-component-popover-compact-width); margin: 0; color: var(--ui-text-secondary); font-size: var(--fs-body); line-height: var(--lh-normal); }

/* Nội dung popover công cụ / bảng màu / inspector: popover là grid nên khoảng
   cách giữa các khối đến từ gap của nó; các lớp dưới chỉ lo bố cục trong hàng.
   Tiền tố .antiscreenshot-popover để thắng quy tắc label chung ở trên. */
.antiscreenshot-popover .antiscreenshot-popover-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-2);
  min-width: 0; font-size: var(--fs-caption);
}
.antiscreenshot-popover .antiscreenshot-popover-row.is-start { justify-content: flex-start; }
.antiscreenshot-popover .antiscreenshot-popover-field { display: flex; align-items: center; flex: 1; min-width: 0; gap: var(--ui-space-2); font-size: var(--fs-caption); }
.antiscreenshot-popover-field input[type="range"] { flex: 1; min-width: 0; }
.antiscreenshot-popover-divider { padding-top: var(--ui-space-2); border-top: var(--ui-stroke-thin) solid var(--ux-border); }
.antiscreenshot-popover-stack { display: flex; flex-direction: column; gap: var(--ui-space-2); }
.antiscreenshot-popover-select {
  min-height: var(--ui-control-h-compact); padding: 0 var(--ui-space-1);
  border: var(--ui-stroke-thin) solid var(--ux-input-border); border-radius: var(--ui-radius-control);
  background: var(--ux-input-bg); color: var(--ui-text-primary); font-size: var(--fs-caption);
}
.antiscreenshot-popover-select.is-block { width: 100%; }
.antiscreenshot-popover-segments { display: flex; gap: var(--ui-space-1); }
.antiscreenshot-popover-segments.is-divided { padding-bottom: var(--ui-space-2); border-bottom: var(--ui-stroke-thin) solid var(--ux-border); }
.antiscreenshot-popover-segments > .antiscreenshot-palette-swatch.is-transparent-btn { flex: 1; justify-content: center; font-size: var(--fs-caption); }
.antiscreenshot-popover-icon-group { display: flex; gap: var(--ui-space-1); }
.antiscreenshot-popover-icon-group > .antiscreenshot-palette-swatch.is-transparent-btn { justify-content: center; padding: 0 var(--ui-space-1); font-size: var(--fs-caption); }
.antiscreenshot-popover-header .antiscreenshot-palette-section-title { margin: 0; }
/* Inspector định dạng mở cạnh menu chuột phải: phải nổi trên menu và flyout. */
.antiscreenshot-popover.antiscreenshot-format-inspector {
  z-index: calc(var(--layer-popover) + 2);
  width: min(var(--dt-component-popover-quick-action-width), calc(100vw - 2 * var(--ui-space-2)));
  max-height: calc(100vh - 2 * var(--ui-space-2));
  overflow-y: auto;
}

.antiscreenshot-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--ui-space-2);
  border-bottom: var(--ui-resizer-line) solid var(--ux-border);
}

.antiscreenshot-popover-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ui-space-2);
  margin-top: var(--ui-space-2);
  padding-top: var(--ui-space-2);
  border-top: var(--ui-resizer-line) solid var(--ux-border);
}


.antiscreenshot-palette-wrap { display: flex; flex-direction: column; gap: var(--ui-space-1-5); width: 100%; }
.antiscreenshot-palette-section-title { color: var(--ui-text-muted); font-size: var(--fs-caption); font-weight: var(--fw-semibold);margin-top: var(--ui-space-0-5); }
.antiscreenshot-palette-grid { display: grid; gap: var(--ui-space-1); }
.antiscreenshot-palette-grid.token-grid { grid-template-columns: repeat(8, 1fr); }
.antiscreenshot-palette-grid.theme-grid { grid-template-columns: repeat(10, 1fr); }
.antiscreenshot-palette-grid.standard-grid { grid-template-columns: repeat(10, 1fr); }
.antiscreenshot-palette-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-1-5); margin-top: var(--ui-space-1); padding-top: var(--ui-space-1); border-top: var(--ui-stroke-thin) solid var(--ux-border); }
.antiscreenshot-palette-recent { display: flex; flex-wrap: wrap; gap: var(--ui-space-1); flex: 1; min-width: 0; }
.antiscreenshot-palette-actions { display: flex; align-items: center; gap: var(--ui-space-1); flex-shrink: 0; }
.antiscreenshot-palette-swatch {
  width: var(--as-swatch-size, var(--ui-icon-sm)); height: var(--as-swatch-size, var(--ui-icon-sm)); padding: 0; border: var(--ui-stroke-thin) solid var(--ux-border); border-radius: var(--ui-radius-sm);
  cursor: pointer; box-sizing: border-box; transition: transform var(--ui-duration-fast) var(--ui-ease), box-shadow var(--ui-duration-fast) var(--ui-ease);
}
.antiscreenshot-palette-swatch:hover { transform: var(--ui-interaction-stable-transform); box-shadow: 0 0 0 var(--ui-resizer-line) var(--ui-accent); z-index: var(--ui-layer-raised); }
.antiscreenshot-palette-swatch.is-selected { box-shadow: 0 0 0 var(--ui-focus-ring-width) var(--ui-accent); }
.antiscreenshot-palette-swatch.is-mini { width: var(--as-swatch-mini, var(--ui-icon-dense)); height: var(--as-swatch-mini, var(--ui-icon-dense)); }
.antiscreenshot-palette-swatch.is-transparent-btn {
  width: auto; height: var(--as-btn-h, var(--ui-icon-lg)); display: inline-flex; align-items: center; gap: var(--ui-space-1-5); padding: var(--ui-space-0-5) var(--ui-space-2);
  border-radius: var(--ui-radius-control); background: var(--ux-input-bg); color: var(--ui-text-primary);
  font-size: var(--fs-body);
}
.antiscreenshot-palette-swatch.is-transparent-btn:hover { background: color-mix(in srgb, var(--ui-accent) 10%, transparent); }
.is-transparent-slash {
  display: inline-block; width: var(--as-slash-size, var(--ui-space-3)); height: var(--as-slash-size, var(--ui-space-3)); border: var(--ui-stroke-thin) solid var(--ui-danger); border-radius: var(--ui-radius-full);
  position: relative;
}
.is-transparent-slash::after {
  content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: var(--ui-resizer-line); background: var(--ui-danger);
  transform: rotate(-45deg);
}
.antiscreenshot-eyedropper-btn {
  width: var(--as-btn-h, var(--ui-size-sm)); height: var(--as-btn-h, var(--ui-size-sm)); display: inline-flex; align-items: center; justify-content: center;
  border: var(--ui-stroke-thin) solid var(--ux-border); border-radius: var(--ui-radius-control); background: var(--ux-input-bg);
  color: var(--ui-text-primary); cursor: pointer; padding: 0;
}
.antiscreenshot-eyedropper-btn:hover { color: var(--ui-accent); border-color: var(--ui-accent); }
.antiscreenshot-custom-color-label {
  position: relative; width: var(--as-btn-h, var(--ui-size-sm)); height: var(--as-btn-h, var(--ui-size-sm)); display: inline-flex; align-items: center; justify-content: center;
  border: var(--ui-stroke-thin) solid var(--ux-border); border-radius: var(--ui-radius-control); background: var(--ux-input-bg);
  cursor: pointer; overflow: hidden;
}
.antiscreenshot-custom-color-input {
  position: absolute; top: 0; left: 0; width: 200%; height: 200%; opacity: 0; cursor: pointer; transform: translate(-25%, -25%);
}
.antiscreenshot-custom-color-icon { color: var(--ui-text-primary); display: flex; align-items: center; justify-content: center; }

.antiscreenshot-context-menu {
  position: fixed; z-index: var(--ui-layer-popover); width: min(var(--dt-dimension-layout-224), calc(100vw - var(--ui-space-5))); padding: var(--ui-space-1-5);
  border: var(--ui-stroke-thin) solid var(--ux-border); border-radius: var(--ui-radius-panel);
  background: var(--ux-overlay); box-shadow: var(--elev-4);
  color: var(--ui-text-primary);
  display: flex; flex-direction: column;
}
/* Sát đáy màn hình lật mở lên trên: đảo thứ tự hiển thị để mục nguy hiểm
   (luôn đứng cuối DOM, vd "Xóa") rơi về đầu mút xa cursor nhất thay vì
   trồi lên gần chuột — không đụng DOM/tab order, chỉ đảo trực quan. */
.antiscreenshot-context-menu.opens-up { flex-direction: column-reverse; }
/* Dáng mục menu (cao, đệm, chữ, nền trỏ, nguy hiểm) do .ui-menu-item quyết định;
   ở đây chỉ còn bố cục dòng. Nút khác trong menu (chip cỡ, ô màu video) giữ khung cũ. */
.antiscreenshot-context-menu .ui-menu-item { width: 100%; display: flex; align-items: center; cursor: pointer; }
.antiscreenshot-context-menu button:not(.ui-menu-item, .ui-btn) {
  width: 100%; min-height: var(--as-btn-h, var(--ui-size-dense)); display: flex; align-items: center; gap: var(--ui-space-2); padding: var(--ui-space-1-5) var(--ui-space-2);
  border: 0; border-radius: var(--ui-radius-control); background: transparent; color: inherit;
  font: var(--fw-medium) var(--fs-body)/var(--lh-tight) var(--app-font);
  text-align: left; cursor: pointer;
}
.antiscreenshot-context-menu button:not(.ui-menu-item, .ui-btn):is(:hover, :focus-visible) {
  background: var(--ui-hover); outline: none;
}
.antiscreenshot-context-icon { width: var(--as-icon-w, var(--ui-icon-sm)); display: inline-flex; justify-content: center; flex: 0 0 auto; color: var(--ui-text-muted); }
/* Mục menu là .ui-menu-item (MỤC MENU CHUẨN): icon giữ màu khi rê, chỉ mục nguy hiểm đỏ. */
.antiscreenshot-context-menu .ui-menu-item.is-danger .antiscreenshot-context-icon { color: var(--ui-danger); }
.antiscreenshot-context-separator { height: var(--ui-resizer-line); margin: var(--ui-space-1) var(--ui-space-0-5); background: var(--ux-border); }
.antiscreenshot-context-section-title { padding: var(--ui-space-1) var(--ui-space-2) var(--ui-space-0-5); color: var(--ui-text-secondary); font: var(--fw-semibold) var(--fs-caption)/var(--lh-tight) var(--app-font); }

/* Mini Quick-Format Toolbar ở đỉnh Context Menu */
.antiscreenshot-context-mini-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-1);
  padding: var(--ui-space-1);
  margin-bottom: var(--ui-space-1-5);
  border-radius: var(--ui-radius-control);
  background: var(--ux-sunken);
  border: var(--ui-stroke-thin) solid var(--ux-border);
}
/* Ô màu trình sửa video (vx-swatch-btn) còn dùng khung ô này; nút thao tác
   của thanh mini là .ui-btn nhẹ (chuẩn hoá component lát 3). */
.antiscreenshot-context-mini-bar .mini-tool-btn:not(.ui-btn) {
  flex: 1;
  min-height: var(--as-btn-h, var(--ui-size-dense));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: var(--ui-stroke-thin) solid var(--ux-border);
  border-radius: var(--ui-radius-sm);
  background: var(--ux-overlay);
  color: var(--ui-text-primary);
  cursor: pointer;
  box-shadow: var(--ui-elevation-1);
  transition: all var(--ui-duration-fast) var(--ui-ease);
}
.antiscreenshot-context-mini-bar .mini-tool-btn:not(.ui-btn):hover {
  background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
  border-color: var(--ui-accent);
  color: var(--ui-accent);
}
.antiscreenshot-context-mini-bar .mini-tool-btn:not(.ui-btn):active,
.antiscreenshot-context-mini-bar .mini-tool-btn:not(.ui-btn).is-active {
  background: color-mix(in srgb, var(--ui-accent) 25%, transparent);
  border-color: var(--ui-accent);
  color: var(--ui-accent);
}
.antiscreenshot-context-mini-bar .mini-tool-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--as-icon-w, var(--ui-icon-sm));
  height: var(--as-icon-w, var(--ui-icon-sm));
}
.antiscreenshot-context-mini-bar .mini-tool-icon svg {
  width: var(--as-icon-w, var(--ui-icon-sm));
  height: var(--as-icon-w, var(--ui-icon-sm));
  display: block;
}

/* Flyout Submenu cạnh context menu */
.antiscreenshot-flyout-submenu {
  position: fixed;
  z-index: var(--ui-layer-popover);
  width: min(var(--dt-dimension-layout-240), calc(100vw - var(--ui-space-5)));
  padding: var(--ui-space-2);
  border: var(--ui-stroke-thin) solid var(--ux-border);
  border-radius: var(--ui-radius-panel);
  background: var(--ux-overlay);
  box-shadow: var(--elev-4);
  color: var(--ui-text-primary);
}

/* Popover header có thể kéo thả di chuyển */
.antiscreenshot-popover-header.is-draggable {
  cursor: grab;
  user-select: none;
}
.antiscreenshot-popover-header.is-draggable:active,
.antiscreenshot-popover-header.is-draggable.is-dragging {
  cursor: grabbing;
}

  /* Cố định lề trên và lề trái theo yêu cầu BA:
     Neo ở vị trí tối ưu sao cho padding top của bar và khoảng cách từ bar tới hình bằng nhau. */
  .antiscreenshot-canvas-scroll { 
    flex: 1; 
    min-height: 0; 
    display: flex; 
    align-items: flex-start; 
    justify-content: flex-start; 
    padding-top: var(--ui-space-6); 
    padding-left: var(--as-stage-left-offset, var(--ui-space-12)); 
    padding-right: var(--as-stage-left-offset, var(--ui-space-12)); 
    padding-bottom: var(--ui-space-8); 
    overflow: auto; 
    background: var(--as-canvas-bg); 
  }
  .antiscreenshot-canvas-scroll.is-panning-mode,
  .antiscreenshot-canvas-scroll.is-panning-mode * { user-select: none;}
  .antiscreenshot-canvas-scroll.is-panning-active,
  .antiscreenshot-canvas-scroll.is-panning-active * { user-select: none;}
  .antiscreenshot-canvas-scroll.is-image-drop-target {
    outline: var(--ui-stroke-thick) dashed color-mix(in srgb, var(--ui-accent) 84%, transparent);
    outline-offset: calc(-1 * var(--ui-space-2-5));
    background: color-mix(in srgb, var(--ui-accent) 10%, var(--as-canvas-bg));
  }
  .antiscreenshot-canvas-stage { position: relative; width: max-content; max-width: none; margin: 0; background: rgb(var(--ui-white-rgb)); box-shadow: var(--ui-elevation-3); border: var(--ui-stroke-thin) solid var(--stroke); border-radius: var(--ui-radius-sm); }
  .antiscreenshot-canvas-scroll.is-align-left { justify-content: flex-start; padding-left: var(--as-stage-left-offset, var(--ui-space-12)); }
  /* Mặc định căn giữa cả hai chiều (như Snagit); 'safe' để ảnh lớn hơn khung vẫn cuộn tới mép. */
  .antiscreenshot-canvas-scroll.is-align-center { justify-content: safe center; align-items: safe center; }
  .antiscreenshot-canvas-scroll.is-infinite-mode { background: var(--page-bg, var(--ux-panel)); }
  .antiscreenshot-canvas-scroll .antiscreenshot-canvas-stage.is-infinite { box-shadow: none; border: none; border-radius: 0; background: transparent; }
  .antiscreenshot-canvas-stage.has-grid::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: var(--ui-layer-raised);
    opacity: 0.65;
    background-image: radial-gradient(color-mix(in srgb, var(--ui-text-primary) 35%, transparent) 1.2px, transparent 1.2px);
    background-size: 20px 20px;
    background-position: -1px -1px;
  }
  .antiscreenshot-canvas-scroll.has-grid {
    background-image: radial-gradient(color-mix(in srgb, var(--ui-text-primary) 25%, transparent) 1.2px, transparent 1.2px);
    background-size: 20px 20px;
    background-position: 0 0;
  }
  .antiscreenshot-canvas-stage.is-transparent {
    background-image: linear-gradient(45deg, var(--ui-hover) 25%, transparent 25%),
      linear-gradient(-45deg, var(--ui-hover) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, var(--ui-hover) 75%),
      linear-gradient(-45deg, transparent 75%, var(--ui-hover) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
  }
.antiscreenshot-canvas-stage canvas { display: block; max-width: none; }

.antiscreenshot-expansion-preview {
  position: absolute;
  background: rgb(var(--ui-white-rgb));
  box-shadow: var(--ui-elevation-3);
  border: var(--ui-stroke-thick) dashed var(--ui-accent);
  pointer-events: none;
  z-index: 0;
}

/* Khung cắt kéo tay, kiểu Paint: bốn mảng che mờ phần bị loại + tám tay nắm.
   Chỉ tay nắm nhận chuột; phần còn lại để lọt xuống canvas cho công cụ vẽ. */
.antiscreenshot-crop-frame { position: absolute; inset: 0; pointer-events: none; }
/* Đặc màu trùng nền #antiscreenshot-canvas-scroll (không phải phủ mờ trong
   suốt): vùng bị cắt phải trông như đã XÓA hẳn — kéo tay nắm lùi lại hoặc
   Ctrl+Z thì crop đổi và mảng này thu/ẩn theo, phần ảnh vừa "biến mất" hiện
   lại nguyên vẹn vì canvas chưa từng đụng tới pixel nào, chỉ đổi vùng veil. */
.antiscreenshot-veil { position: absolute; background: var(--as-canvas-bg); opacity: 0; transition: opacity var(--ui-duration-fast) var(--ui-ease); }
.antiscreenshot-crop-frame.is-cropped .antiscreenshot-veil { opacity: 1; }
.antiscreenshot-crop-box { position: absolute; border: var(--ui-stroke-thin) solid color-mix(in srgb, var(--ui-accent) 90%, transparent); }
.antiscreenshot-crop-badge {
  position: absolute;
  top: calc(-1 * var(--ui-space-6));
  left: 0;
  padding: var(--ui-space-0-5) var(--ui-space-2);
  background: rgba(var(--ui-scrim-rgb), 0.9);
  border: var(--ui-stroke-thin) solid rgba(var(--ui-white-rgb), 0.15);
  color: var(--ui-text-on-accent);
  border-radius: var(--ui-radius-control);
  font-size: var(--fs-caption);
  font-weight: var(--fw-overline);
  font-family: var(--app-font);
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: 0.2px;
  z-index: var(--ui-layer-pane-control);
}

.antiscreenshot-handle {
  --as-handle-size: var(--ui-icon-xs);
  --as-handle-off: calc(var(--as-handle-size) / -2);
  position: absolute; width: var(--as-handle-size); height: var(--as-handle-size); pointer-events: auto;
  border: var(--ui-stroke-thin) solid rgba(var(--ink), .5); border-radius: var(--ui-radius-sm); background: var(--ui-accent);
}
.antiscreenshot-canvas-stage.is-drawing .antiscreenshot-handle { opacity: .35; }
/* 8 tay nắm cắt/mở rộng TRANG chỉ hiện khi cần (BA 2026-09-25): rê chuột lên trang ở công cụ
   Chọn, đang dùng công cụ Cắt, hoặc đang kéo. Viền trang vẫn luôn hiện. */
.antiscreenshot-crop-frame .antiscreenshot-handle { opacity: 0; transition: opacity var(--ui-duration-fast) var(--ui-ease); }
.antiscreenshot-canvas-stage:not(.is-drawing):hover .antiscreenshot-crop-frame .antiscreenshot-handle,
.antiscreenshot-canvas-stage.is-crop-tool .antiscreenshot-crop-frame .antiscreenshot-handle,
.antiscreenshot-crop-frame.is-dragging .antiscreenshot-handle { opacity: 1; }
[data-crop-handle="nw"], [data-region-handle="nw"] { top: var(--as-handle-off); left: var(--as-handle-off); cursor: nwse-resize; }
[data-crop-handle="n"], [data-region-handle="n"] { top: var(--as-handle-off); left: 50%; margin-left: var(--as-handle-off); cursor: ns-resize; }
[data-crop-handle="ne"], [data-region-handle="ne"] { top: var(--as-handle-off); right: var(--as-handle-off); cursor: nesw-resize; }
[data-crop-handle="e"], [data-region-handle="e"] { top: 50%; right: var(--as-handle-off); margin-top: var(--as-handle-off); cursor: ew-resize; }
[data-crop-handle="se"], [data-region-handle="se"] { bottom: var(--as-handle-off); right: var(--as-handle-off); cursor: nwse-resize; }
[data-crop-handle="s"], [data-region-handle="s"] { bottom: var(--as-handle-off); left: 50%; margin-left: var(--as-handle-off); cursor: ns-resize; }
[data-crop-handle="sw"], [data-region-handle="sw"] { bottom: var(--as-handle-off); left: var(--as-handle-off); cursor: nesw-resize; }
[data-crop-handle="w"], [data-region-handle="w"] { top: 50%; left: var(--as-handle-off); margin-top: var(--as-handle-off); cursor: ew-resize; }

/* Khung vùng chọn crop / copy đa năng */
.antiscreenshot-region-crop-frame {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  z-index: var(--ui-layer-pane);
}

.antiscreenshot-region-crop-box {
  position: absolute;
  border: var(--ui-stroke-thick) dashed var(--ui-accent);
  box-shadow: 0 0 0 9999px rgba(var(--ui-black-rgb), 0.45); /* audit-keep: bóng riêng của thành phần, không thuộc bậc elevation chuẩn */
  pointer-events: auto;
  cursor: move;
  box-sizing: border-box;
}
.antiscreenshot-region-crop-badge {
  position: absolute;
  top: calc(-1 * var(--ui-space-6));
  left: 0;
  padding: var(--ui-space-0-5) var(--ui-space-2);
  background: rgba(var(--ui-scrim-rgb), 0.9);
  border: var(--ui-stroke-thin) solid rgba(var(--ui-white-rgb), 0.15);
  color: var(--ui-text-on-accent);
  border-radius: var(--ui-radius-sm);
  font-size: var(--fs-caption);
  font-weight: var(--fw-overline);
  /* --font-sans CHƯA BAO GIỜ được định nghĩa trong repo: var() không hợp lệ và
     không có fallback làm trình duyệt bỏ nguyên khai báo, nên badge này vẫn
     đang mượn phông của phần tử cha. Đúng token là --app-font. */
  font-family: var(--app-font);
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.antiscreenshot-region-crop-box.is-near-top .antiscreenshot-region-crop-badge {
  top: var(--ui-space-1);
  left: var(--ui-space-1);
}
.antiscreenshot-region-crop-actions {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(-1 * var(--ui-space-10));
  display: flex;
  align-items: center;
  gap: var(--ui-space-1);
  padding: var(--ui-space-1) var(--ui-space-1-5);
  background: var(--dt-semantic-color-dark-surface-overlay);
  border: var(--ui-stroke-thin) solid rgba(var(--ui-white-rgb), 0.18);
  border-radius: var(--ui-radius-md);
  box-shadow: var(--ui-elevation-4);
  z-index: var(--ui-layer-pane-top);
  white-space: nowrap;
  pointer-events: auto;
}
.antiscreenshot-region-crop-box.is-near-bottom .antiscreenshot-region-crop-actions {
  bottom: auto;
  top: calc(-1 * var(--ui-space-10));
}
.antiscreenshot-region-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1-5);
  min-height: var(--ui-size-sm);
  padding: 0 var(--ui-space-2);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  border: var(--ui-stroke-thin) solid transparent;
  border-radius: var(--ui-radius-sm);
  background: rgba(var(--ui-white-rgb), 0.06);
  color: var(--ui-note-on-dark);
  cursor: pointer;
  transition: all var(--ui-duration-fast) var(--ui-ease);
  user-select: none;
}
.antiscreenshot-region-btn:hover {
  background: rgba(var(--ui-white-rgb), 0.16);
  color: var(--ui-text-on-accent);
}
.antiscreenshot-region-btn.is-primary {
  background: var(--ui-accent, var(--ui-accent));
  color: var(--ui-text-on-accent);
}
.antiscreenshot-region-btn.is-primary:hover {
  background: color-mix(in srgb, var(--ui-accent, var(--ui-accent)) 85%, var(--ux-raised));
}
.antiscreenshot-region-btn.is-close {
  padding: 0 var(--ui-space-1-5);
  color: var(--dt-semantic-color-dark-text-muted);
}
.antiscreenshot-region-btn.is-close:hover {
  color: var(--ui-danger);
  background: rgba(var(--ui-danger-rgb), 0.2);
}

.antiscreenshot-resize-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ui-space-3); }
.antiscreenshot-resize-grid label { display: flex; align-items: center; gap: var(--ui-space-2); color: var(--ui-text-primary); font-size: var(--fs-body); }
.antiscreenshot-resize-grid input[type="number"] { width: calc((var(--ui-space-12) * 2 - var(--ui-space-1))); min-width: calc(var(--ui-space-12) * 1.5); min-height: var(--ui-size-md); padding: var(--ui-space-0-5) var(--ui-space-2); border: var(--ui-stroke-thin) solid var(--stroke); border-radius: var(--ui-radius-control); color: var(--ui-text-primary); background: rgb(var(--ui-surface-raised-rgb)); }
.antiscreenshot-resize-lock { grid-column: 1 / -1; }
.antiscreenshot-resize-source { margin: var(--ui-space-3) 0 0; color: var(--ui-text-secondary); font-size: var(--fs-body); }

.antiscreenshot-hotkey-toggle { display: inline-flex; align-items: center; gap: var(--ui-space-1-5); color: var(--ui-text-secondary); font-size: var(--fs-body); }
.settings-field-actions { display: inline-flex; align-items: center; gap: var(--ui-space-2); flex-wrap: wrap; }

/* ── Trang thư viện ảnh ────────────────────────────────────────────────── */

/* The tile action strip uses z-index:2.  Keep the library toolbar in its own
   stacking layer so long grids can never paint a tile over its zoom controls. */
.antiscreenshot-library-count { color: var(--ui-text-secondary); font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.antiscreenshot-library-search input {
  width: 100%; max-width: var(--dt-dimension-layout-480); height: var(--ui-control-h-standard); padding: 0 var(--ui-space-3);
  border: var(--ui-stroke-thin) solid var(--stroke); border-radius: var(--ui-radius-control);
  color: var(--ui-text-primary); background: rgb(var(--ui-surface-raised-rgb)); font-size: var(--fs-body);
  transition-property: var(--tr-ui); transition-timing-function: var(--ui-ease); transition-duration: var(--ui-duration-fast);
}
.antiscreenshot-library-search input:focus {
  outline: none;
  border-color: var(--ux-control-border-active);
  box-shadow: var(--ui-control-ring);
  caret-color: var(--ui-accent);
}
.antiscreenshot-library-views, .antiscreenshot-library-zoom { display: inline-flex; align-items: center; gap: var(--ui-space-1); }

.antiscreenshot-library-zoom-label { min-width: var(--ui-space-12); color: var(--ui-text-secondary); font-size: var(--fs-body); text-align: center; font-variant-numeric: tabular-nums; }

.antiscreenshot-library-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--ui-space-5) var(--ui-space-6) var(--ui-space-8);
  --shot-tile: 300px;
}
.antiscreenshot-library-group + .antiscreenshot-library-group { margin-top: var(--ui-space-6); }
.antiscreenshot-library-group h2 {
  display: flex; align-items: baseline; gap: var(--ui-space-2); margin: 0 0 var(--ui-space-3);
  color: var(--ui-text-secondary); font-size: var(--fs-body); font-weight: var(--fw-bold);
}
.antiscreenshot-library-group h2 span { font-weight: var(--fw-medium); text-transform: none; letter-spacing: normal; opacity: .75; }

/* Lưới ảnh linh hoạt trải rộng toàn thân (Full Body) */
.antiscreenshot-library-grid {
  display: grid;
  gap: var(--ui-space-3-5);
  grid-template-columns: repeat(auto-fill, minmax(var(--shot-tile), 1fr));
  width: 100%;
}

.antiscreenshot-tile {
  position: relative; display: flex; flex-direction: column;
  border: var(--ui-stroke-thin) solid var(--ux-border); border-radius: var(--ui-radius-panel); overflow: hidden;
  /* L3 raised — cùng bậc với thẻ ghi chú và thẻ bản vẽ. */
  background: var(--ux-raised); cursor: pointer;
  transition-property: var(--tr-ui); transition-timing-function: var(--ui-ease); transition-duration: var(--ui-duration-fast);
}
.antiscreenshot-tile:hover { border-color: var(--ux-border-hover); box-shadow: var(--ui-elevation-3); }
.antiscreenshot-tile-top {
  position: absolute; inset: 0 0 auto 0; z-index: var(--ui-layer-raised);
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ui-space-1-5); padding: var(--ui-space-2);
}
.antiscreenshot-tile-badges { display: inline-flex; gap: var(--ui-space-1); flex-wrap: wrap; }
.antiscreenshot-tile-badges em {
  padding: var(--ui-space-0-5) var(--ui-space-1-5); border-radius: var(--ui-radius-full);
  font: var(--fw-semibold) var(--fs-caption)/var(--lh-snug) var(--app-font, "Segoe UI"), sans-serif; font-style: normal;
  color: var(--ui-note-on-dark); background: color-mix(in srgb, var(--dt-semantic-color-dark-surface-shell) 74%, transparent);
}
.antiscreenshot-tile-actions { display: inline-flex; gap: var(--ui-space-1); opacity: 0; transition: opacity var(--ui-duration-fast) var(--ui-ease); }
.antiscreenshot-tile:hover .antiscreenshot-tile-actions, .antiscreenshot-tile:focus-within .antiscreenshot-tile-actions { opacity: 1; }
.antiscreenshot-tile-actions button {
  display: inline-flex; align-items: center; justify-content: center; width: var(--ui-control-h-compact); height: var(--ui-control-h-compact);
  border: 0; border-radius: var(--ui-radius-control); color: var(--ui-note-on-dark); background: color-mix(in srgb, var(--dt-semantic-color-dark-surface-shell) 78%, transparent); cursor: pointer;
  transition-property: var(--tr-ui); transition-timing-function: var(--ui-ease); transition-duration: var(--ui-duration-fast);
}
.antiscreenshot-tile-actions button:hover { background: var(--ui-accent); }
.antiscreenshot-tile-thumb { width: 100%; aspect-ratio: 16 / 9; background: var(--ux-raised) center/cover no-repeat; }
.antiscreenshot-tile-meta { padding: var(--ui-space-2) var(--ui-space-2-5) var(--ui-space-2-5); }
.antiscreenshot-tile-meta strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.antiscreenshot-tile-meta small { display: block; margin-top: var(--ui-space-0-5); color: var(--ui-text-secondary); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }

/* ── Chế độ Biểu tượng lớn (Large Icons) ─────────────────────────────────── */
.antiscreenshot-library-body[data-view="large"] .antiscreenshot-library-grid {
  gap: var(--ui-space-4);
}
.antiscreenshot-library-body[data-view="large"] .antiscreenshot-tile {
  border-radius: var(--ui-radius-panel);
}
.antiscreenshot-library-body[data-view="large"] .antiscreenshot-tile-top {
  padding: var(--ui-space-2);
}
.antiscreenshot-library-body[data-view="large"] .antiscreenshot-tile-actions button {
  width: var(--ui-size-dense);
  height: var(--ui-size-dense);
}
.antiscreenshot-library-body[data-view="large"] .antiscreenshot-tile-meta {
  padding: var(--ui-space-2-5) var(--ui-space-3) var(--ui-space-3);
}
.antiscreenshot-library-body[data-view="large"] .antiscreenshot-tile-meta strong {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
}
.antiscreenshot-library-body[data-view="large"] .antiscreenshot-tile-meta small {
  font-size: var(--fs-caption);
  margin-top: var(--ui-space-1);
}

/* ── Chế độ Biểu tượng nhỏ (Small Icons / Compact Grid) ──────────────────── */
.antiscreenshot-library-body[data-view="small"] .antiscreenshot-library-grid {
  gap: var(--ui-space-2-5);
}
.antiscreenshot-library-body[data-view="small"] .antiscreenshot-tile {
  border-radius: var(--ui-radius-control);
}
.antiscreenshot-library-body[data-view="small"] .antiscreenshot-tile-top {
  padding: var(--ui-space-1);
}
.antiscreenshot-library-body[data-view="small"] .antiscreenshot-tile-badges em {
  padding: var(--ui-resizer-line) var(--ui-space-1);
  font-size: var(--fs-caption);
  line-height: var(--lh-tight);
}
.antiscreenshot-library-body[data-view="small"] .antiscreenshot-tile-actions button {
  width: var(--ui-space-5);
  height: var(--ui-space-5);
}
.antiscreenshot-library-body[data-view="small"] .antiscreenshot-tile-meta {
  padding: var(--ui-space-1-5) var(--ui-space-2) var(--ui-space-2);
}
.antiscreenshot-library-body[data-view="small"] .antiscreenshot-tile-meta strong {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}
.antiscreenshot-library-body[data-view="small"] .antiscreenshot-tile-meta small {
  font-size: var(--fs-caption);
  margin-top: var(--ui-resizer-line);
}

/* ── Chế độ Chi tiết (Details List) ─────────────────────────────────────── */
.antiscreenshot-library-body[data-view="details"] .antiscreenshot-library-grid {
  grid-template-columns: 1fr;
  gap: var(--ui-space-1-5);
}
.antiscreenshot-library-body[data-view="details"] .antiscreenshot-tile {
  flex-direction: row;
  align-items: center;
  gap: var(--ui-space-3-5);
  padding: var(--ui-space-1-5) var(--ui-space-3-5) var(--ui-space-1-5) var(--ui-space-2);
  border-radius: var(--ui-radius-control);
}
.antiscreenshot-library-body[data-view="details"] .antiscreenshot-tile-thumb {
  width: calc(var(--ui-space-12) * 2 + var(--ui-space-2));
  aspect-ratio: 16 / 9;
  flex: 0 0 auto;
  border-radius: var(--ui-radius-control);
}
.antiscreenshot-library-body[data-view="details"] .antiscreenshot-tile-meta {
  flex: 1;
  min-width: 0;
  padding: 0;
}
.antiscreenshot-library-body[data-view="details"] .antiscreenshot-tile-top {
  position: static;
  padding: 0;
  flex: 0 0 auto;
  order: 3;
  display: flex;
  align-items: center;
  gap: var(--ui-space-2-5);
}
.antiscreenshot-library-body[data-view="details"] .antiscreenshot-tile-badges em {
  color: var(--ui-text-secondary);
  background: transparent;
  padding: 0 var(--ui-space-1);
}

/* Vòng focus mặc định của Chromium (xanh dương trơn, không theo token) lộ ra
   trên MỌI nút bấm bằng bàn phím/vừa đóng popover — task-box, month-nav-btn,
   settings-nav-item... trong app đều đã có outline theo --sf-accent, nhóm nút
   AntiScreenshot lại thiếu, nên riêng nó vẫn hiện màu xanh mặc định của trình
   duyệt thay vì đúng màu thương hiệu. */
:is(
  .antiscreenshot-capture-btn,
  .antiscreenshot-tile, .antiscreenshot-popover-item,
  .antiscreenshot-zoom button, .antiscreenshot-tile-actions button,
  .antiscreenshot-asset-card, .antiscreenshot-top-dropdown-btn, .antiscreenshot-filter-chip
):focus-visible {
  outline: var(--ui-stroke-thick) solid var(--ui-accent); outline-offset: var(--ui-stroke-thick);
}

/* ── Art Editor: Thư viện tiện ích (Shapes, UI Buttons, Icons, Stamps) ────── */

.antiscreenshot-workspace-main {
  display: flex;
  flex-direction: row;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.antiscreenshot-col-library {
  width: var(--dt-dimension-layout-288);
  flex: 0 0 17.5rem;
  min-width: var(--dt-dimension-layout-208);
  max-width: var(--dt-dimension-layout-600);
  display: flex;
  flex-direction: column;
  border-left: var(--ui-stroke-thin) solid var(--ux-divider);
  background: var(--ux-sunken);
  position: relative;
  z-index: var(--ui-layer-pane);
  min-height: 0;
  overflow: hidden;
  container-type: inline-size;
  container-name: library-panel;
}

.antiscreenshot-col-library.hidden {
  display: none;
}

.antiscreenshot-col-library .antiscreenshot-library-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  padding: var(--ui-space-1-5);
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
}

/* Thanh chân menu: Chứa nút Quản trị & Đóng ở dưới đáy */
.antiscreenshot-library-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ui-space-1-5) var(--ui-space-2);
  border-top: var(--ui-stroke-thin) solid var(--ux-divider);
  background: var(--ux-shell);
}

.antiscreenshot-footer-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1-5);
  padding: var(--ui-space-1) var(--ui-space-2);
  border: var(--ui-stroke-thin) solid var(--ux-border);
  border-radius: var(--ui-radius-control);
  background: var(--ux-sunken);
  color: var(--ui-text-secondary);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  cursor: pointer;
  user-select: none;
  transition: all var(--ui-duration-fast) var(--ui-ease);
}

.antiscreenshot-footer-btn:hover {
  border-color: var(--ui-accent);
  color: var(--ui-accent);
  background: color-mix(in srgb, var(--ui-accent) 8%, var(--ux-sunken));
}

.antiscreenshot-footer-btn.is-close {
  color: var(--ui-text-muted);
}

.antiscreenshot-footer-btn.is-close:hover {
  border-color: var(--ui-danger);
  color: var(--ui-danger);
  background: color-mix(in srgb, var(--ui-danger) 8%, var(--ux-sunken));
}

/* ── Cây Nhóm Tiện ích (Tree Accordion theo chuẩn Visio / Axure) ─────────── */

/* Tinh gọn 2026-09-24: nhóm là tiêu đề phẳng + lưới mẫu, không đóng khung —
   viền trong suốt giữ nguyên hình học để kéo thả/xếp nhóm không nhảy. */
.antiscreenshot-accordion-item {
  flex: 0 0 auto;
  min-height: min-content;
  border: var(--ui-stroke-thin) solid transparent;
  border-radius: var(--ui-radius-control);
  background: transparent;
  margin-bottom: 0;
  overflow: hidden;
  transition: border-color var(--ui-duration-fast) var(--ui-ease), box-shadow var(--ui-duration-fast) var(--ui-ease);
}

.antiscreenshot-accordion-item.is-open {
  border-color: transparent;
}

.antiscreenshot-accordion-item.is-dragging {
  opacity: 0.45;
}

.antiscreenshot-accordion-item.drop-before {
  box-shadow: inset 0 var(--ui-focus-ring-width) 0 var(--ui-accent);
}

.antiscreenshot-accordion-item.drop-after {
  box-shadow: inset 0 calc(var(--ui-focus-ring-width) * -1) 0 var(--ui-accent);
}

/* Tiêu đề nhóm: Kích thước text và padding cố định tuyệt đối, không chạy chữ khi đóng/mở */
.antiscreenshot-accordion-header {
  display: flex;
  align-items: center;
  gap: var(--ui-space-1-5);
  padding: var(--ui-space-1-5) var(--ui-space-2);
  min-height: var(--ui-size-md);
  box-sizing: border-box;
  border-radius: var(--ui-radius-control);
  background: transparent;
  border-left: none;
  border-bottom: var(--ui-stroke-thin) solid transparent;
  cursor: grab;
  user-select: none;
  transition: background-color var(--ui-duration-fast) var(--ui-ease), border-color var(--ui-duration-fast) var(--ui-ease);
}

.antiscreenshot-accordion-header:active {
  cursor: grabbing;
}

.antiscreenshot-accordion-item.is-open .antiscreenshot-accordion-header {
  background: transparent;
  border-left: none;
}

.antiscreenshot-accordion-header:hover,
.antiscreenshot-accordion-item.is-open .antiscreenshot-accordion-header:hover {
  background: var(--ui-hover);
}

.antiscreenshot-tree-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ui-space-3-5);
  height: var(--ui-space-3-5);
  color: var(--ui-text-muted);
  flex-shrink: 0;
  transition: transform var(--ui-duration-fast) var(--ui-ease), color var(--ui-duration-fast) var(--ui-ease);
}

.antiscreenshot-accordion-item.is-open .antiscreenshot-tree-arrow {
  transform: rotate(90deg);
  color: var(--ui-accent);
}

.antiscreenshot-accordion-icon {
  display: inline-flex;
  align-items: center;
  color: var(--ui-text-secondary);
  flex-shrink: 0;
  transition: color var(--ui-duration-fast) var(--ui-ease);
}

.antiscreenshot-accordion-item.is-open .antiscreenshot-accordion-icon,
.antiscreenshot-accordion-header:hover .antiscreenshot-accordion-icon {
  color: var(--ui-accent);
}

.antiscreenshot-accordion-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--ui-text-secondary);
  line-height: var(--lh-normal);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: none;
  transition: color var(--ui-duration-fast) var(--ui-ease);
}

.antiscreenshot-accordion-item.is-open .antiscreenshot-accordion-title,
.antiscreenshot-accordion-header:hover .antiscreenshot-accordion-title {
  color: var(--ui-text-primary);
}

/* Vùng chứa nội dung nhóm: Nền L2 (UX-BASE) tạo chiều sâu đối lập với L3 thẻ */
.antiscreenshot-accordion-content {
  padding: var(--ui-space-1-5);
  background: transparent;
  box-sizing: border-box;
  overflow: visible;
}

/* Ô mẫu: không đóng hộp (tinh gọn 2026-09-24) — nền/viền chỉ hiện khi rê chuột. */
.antiscreenshot-asset-card {
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--ui-stroke-thin) solid transparent;
  border-radius: var(--ui-radius-control);
  background: transparent;
  color: var(--ui-accent);
  cursor: grab;
  user-select: none;
  transition: border-color var(--ui-duration-fast) var(--ui-ease), background var(--ui-duration-fast) var(--ui-ease), transform var(--ui-duration-fast) var(--ui-ease), box-shadow var(--ui-duration-fast) var(--ui-ease);
}

.antiscreenshot-asset-card:hover {
  border-color: var(--ux-border-hover);
  background: var(--ui-hover);
}

.antiscreenshot-asset-card:active {
  cursor: grabbing;
  transform: translateY(0);
}

/* Trạng thái đang chờ đặt linh kiện (Pending Placement Mode) */
@keyframes antiscreenshot-pending-pulse {
  0%, 100% {
    box-shadow: 0 0 0 var(--ui-focus-ring-width) var(--ui-accent), var(--ui-elevation-2);
    border-color: var(--ui-accent);
    transform: translateY(-1px);
  }
  50% {
    box-shadow: 0 0 0 calc(var(--ui-focus-ring-width) * 2) color-mix(in srgb, var(--ui-accent) 35%, transparent), var(--ui-elevation-3);
    border-color: var(--ui-accent);
    transform: translateY(-2px);
  }
}

@keyframes antiscreenshot-banner-in {
  from {
    opacity: 0;
    transform: translate(-50%, -6px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.antiscreenshot-asset-card.is-pending-placement {
  border-color: var(--ui-accent);
  background: color-mix(in srgb, var(--ui-accent) 18%, var(--ux-raised));
  animation: antiscreenshot-pending-pulse var(--ui-duration-pulse) var(--ui-ease) infinite;
  transform: translateY(-1px);
  position: relative;
  z-index: var(--ui-layer-raised);
}

.antiscreenshot-asset-card.is-pending-placement::after {
  content: '';
  position: absolute;
  top: var(--ui-space-1);
  right: var(--ui-space-1);
  width: var(--ui-space-1-5);
  height: var(--ui-space-1-5);
  border-radius: var(--ui-radius-full);
  background: var(--ui-accent);
  box-shadow: 0 0 0 var(--ui-resizer-line) var(--ux-raised);
}

/* Con trỏ ngắm chữ thập trên canvas khi đang chờ đặt */
.antiscreenshot-canvas-stage.has-pending-asset {
  cursor: crosshair;
}

.antiscreenshot-canvas-stage.has-pending-asset canvas {
  cursor: crosshair;
}

/* Floating Banner chỉ dẫn khi đang chờ đặt */
.antiscreenshot-placement-banner {
  position: absolute;
  top: var(--ui-space-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-modal, 100);
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
  padding: var(--ui-space-1-5) var(--ui-space-3-5);
  background: var(--ux-overlay);
  border: var(--ui-stroke-thin) solid var(--ui-accent);
  border-radius: var(--ui-radius-full);
  box-shadow: var(--elev-3);
  color: var(--ui-text-primary);
  font-size: var(--fs-body);
  pointer-events: none;
  white-space: nowrap;
  animation: antiscreenshot-banner-in var(--ui-duration-fast) var(--ui-ease);
}

.antiscreenshot-placement-banner strong {
  color: var(--ui-accent);
}

.antiscreenshot-placement-esc {
  font-size: var(--fs-caption);
  color: var(--ui-text-muted);
  margin-left: var(--ui-space-1);
}

/* 4 cột: Hình khối, Sơ đồ Luồng, Bong bóng thoại */
.antiscreenshot-col-library .antiscreenshot-library-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ui-space-1);
  max-width: none;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.antiscreenshot-asset-card.is-shape {
  height: var(--ui-size-lg);
  padding: var(--ui-space-1);
}

.antiscreenshot-asset-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--ui-accent);
}

.antiscreenshot-asset-preview svg {
  max-width: 100%;
  max-height: 100%;
  stroke: var(--ui-accent);
}

/* 2 cột: Nút bấm UI - Chỉ nút bấm, không có subtitle */
.antiscreenshot-library-button-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ui-space-1-5);
  width: 100%;
  box-sizing: border-box;
}

.antiscreenshot-asset-card.is-button {
  height: var(--ui-size-md);
  padding: 0;
  border: none;
  background: transparent;
}

.antiscreenshot-btn-preview {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  padding: 0 var(--ui-space-1);
  border-radius: var(--ui-radius-control);
  box-shadow: var(--ui-elevation-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
  transition: filter var(--ui-duration-fast) var(--ui-ease), transform var(--ui-duration-fast) var(--ui-ease);
}

.antiscreenshot-asset-card.is-button:hover .antiscreenshot-btn-preview {
  filter: brightness(1.1);
  transform: var(--ui-interaction-stable-transform);
}

/* 2 cột: Khung Giao diện Wireframe - Hiển thị trực quan linh kiện */
.antiscreenshot-library-wireframe-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ui-space-1-5);
  width: 100%;
  box-sizing: border-box;
}

.antiscreenshot-asset-card.is-wireframe {
  height: var(--ui-size-md);
  padding: var(--ui-space-0-5) var(--ui-space-1-5);
  background: var(--ux-raised);
}

.antiscreenshot-wf-preview {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--ui-space-1-5);
  font-size: var(--fs-caption);
  color: var(--ui-text-secondary);
  overflow: hidden;
}

.antiscreenshot-wf-preview.is-input {
  border: var(--ui-stroke-thin) solid var(--ux-border);
  border-radius: var(--ui-radius-sm);
  background: var(--ux-sunken);
  padding: 0 var(--ui-space-1-5);
}

.antiscreenshot-wf-caret {
  display: inline-block;
  color: var(--ui-accent);
  font-weight: var(--dt-typography-weight-bold);
}

.antiscreenshot-wf-preview.is-search {
  border: var(--ui-stroke-thin) solid var(--ux-border);
  border-radius: var(--ui-radius-control);
  background: var(--ux-sunken);
  padding: 0 var(--ui-space-1-5);
}

.antiscreenshot-wf-preview.is-dropdown {
  border: var(--ui-stroke-thin) solid var(--ux-border);
  border-radius: var(--ui-radius-sm);
  background: var(--ux-sunken);
  padding: 0 var(--ui-space-1-5);
  justify-content: space-between;
}

.antiscreenshot-wf-arrow {
  font-size: var(--fs-caption);
  color: var(--ui-text-muted);
}

.antiscreenshot-wf-preview.is-toggle {
  justify-content: center;
}

.antiscreenshot-wf-toggle-track {
  width: calc(var(--ui-space-6) + var(--ui-space-1));
  height: var(--ui-icon-sm);
  border-radius: var(--ui-radius-full);
  background: var(--ui-accent);
  position: relative;
  display: inline-block;
}

.antiscreenshot-wf-toggle-knob {
  width: var(--ui-icon-xs);
  height: var(--ui-icon-xs);
  border-radius: var(--ui-radius-full);
  background: var(--ui-text-on-accent);
  position: absolute;
  right: var(--ui-space-0-5);
  top: var(--ui-space-0-5);
}

.antiscreenshot-wf-preview.is-checkbox {
  gap: var(--ui-space-1);
}

.antiscreenshot-wf-check-box {
  width: var(--ui-icon-xs);
  height: var(--ui-icon-xs);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-accent-solid);
  color: var(--ui-text-on-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-caption);
  font-weight: var(--dt-typography-weight-bold);
}

.antiscreenshot-wf-preview.is-radio {
  gap: var(--ui-space-1);
}

.antiscreenshot-wf-radio-dot {
  width: var(--ui-icon-xs);
  height: var(--ui-icon-xs);
  border-radius: var(--ui-radius-full);
  border: var(--ui-stroke-thick) solid var(--ui-accent);
  color: var(--ui-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-caption);
}

.antiscreenshot-wf-preview.is-browser {
  border: var(--ui-stroke-thin) solid var(--ux-border);
  border-radius: var(--ui-radius-sm);
  background: var(--ux-sunken);
  padding: 0 var(--ui-space-1);
  gap: var(--ui-space-1);
}

.antiscreenshot-wf-dots {
  display: inline-flex;
  gap: var(--ui-space-0-5);
}

.antiscreenshot-wf-dots i {
  width: calc(var(--ui-space-0-5) * 1.5);
  height: calc(var(--ui-space-0-5) * 1.5);
  border-radius: var(--ui-radius-full);
  display: inline-block;
}

.antiscreenshot-wf-dots i:first-child { background: var(--ui-danger); }
.antiscreenshot-wf-dots i:nth-child(2) { background: var(--ui-warning); }
.antiscreenshot-wf-dots i:nth-child(3) { background: var(--ui-success); }

.antiscreenshot-wf-url-bar {
  font-size: var(--fs-caption);
  color: var(--ui-text-muted);
  background: var(--ux-raised);
  padding: 0 var(--ui-space-1);
  border-radius: var(--ui-radius-sm);
  flex: 1;
}

.antiscreenshot-wf-preview.is-progress {
  gap: var(--ui-space-1);
  align-items: center;
}

.antiscreenshot-wf-bar {
  flex: 1;
  height: var(--ui-space-1-5);
  border-radius: var(--ui-radius-sm);
  background: var(--ux-sunken);
  border: var(--ui-stroke-thin) solid var(--ux-border);
  overflow: hidden;
}

.antiscreenshot-wf-fill {
  width: 70%;
  height: 100%;
  background: var(--ui-accent);
}

.antiscreenshot-wf-percent {
  font-size: var(--fs-caption);
  color: var(--ui-text-muted);
}

/* ── Responsive Showcase Layout cho 5 nhóm tiện ích mới (Tables, Mockups, Cards, Architecture, Badges) ── */

.antiscreenshot-library-showcase-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ui-space-2);
  width: 100%;
  box-sizing: border-box;
}

@container library-panel (min-width: 440px) {
  .antiscreenshot-library-showcase-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

.antiscreenshot-library-arch-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ui-space-1-5);
  width: 100%;
  box-sizing: border-box;
}

@container library-panel (min-width: 360px) {
  .antiscreenshot-library-arch-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@container library-panel (min-width: 500px) {
  .antiscreenshot-library-arch-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.antiscreenshot-asset-card.is-table-card,
.antiscreenshot-asset-card.is-mockup-card,
.antiscreenshot-asset-card.is-widget-card {
  height: auto;
  min-height: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: var(--ui-space-2) var(--ui-space-2-5);
  background: var(--ux-raised);
  border: var(--ui-stroke-thin) solid var(--ux-border);
  border-radius: var(--ui-radius-control);
  cursor: grab;
  gap: var(--ui-space-1-5);
  box-sizing: border-box;
  transition: border-color var(--ui-duration-fast) var(--ui-ease), background-color var(--ui-duration-fast) var(--ui-ease), box-shadow var(--ui-duration-fast) var(--ui-ease), transform var(--ui-duration-fast) var(--ui-ease);
}

.antiscreenshot-asset-card.is-table-card:hover,
.antiscreenshot-asset-card.is-mockup-card:hover,
.antiscreenshot-asset-card.is-widget-card:hover {
  border-color: var(--ux-border-hover);
  background: color-mix(in srgb, var(--ui-accent) 6%, var(--ux-raised));
  box-shadow: var(--elev-2);
  transform: var(--ui-interaction-stable-transform);
}

.antiscreenshot-table-preview-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1-5);
  box-sizing: border-box;
}

.antiscreenshot-table-preview-header {
  display: flex;
  align-items: center;
  gap: var(--ui-space-1-5);
  color: var(--ui-accent);
  width: 100%;
}

.antiscreenshot-table-preview-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.antiscreenshot-table-preview-title {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--ui-text-primary);
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}

.antiscreenshot-table-mini-grid {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
  font-size: var(--fs-micro);
  width: 100%;
}

.antiscreenshot-table-mini-row {
  display: flex;
  justify-content: space-between;
  gap: var(--ui-space-2);
  padding: var(--ui-space-1) var(--ui-space-2);
  background: var(--ux-sunken);
  border-radius: var(--ui-radius-control);
  color: var(--ui-text-secondary);
}

.antiscreenshot-table-mini-row.is-head {
  background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
  color: var(--ui-accent);
  font-weight: var(--fw-semibold);
}

.antiscreenshot-table-mini-row.is-kv strong {
  color: var(--ui-text-primary);
}

.antiscreenshot-table-mini-row.is-pricing .price {
  color: var(--ui-accent);
  font-weight: var(--fw-bold);
}

.antiscreenshot-table-mini-footer {
  display: flex;
  justify-content: space-between;
  padding: var(--ui-space-0-5) var(--ui-space-2);
  color: var(--ui-text-muted);
  font-size: var(--fs-caption);
}

.antiscreenshot-mockup-preview-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--ux-sunken);
  border: var(--ui-stroke-thin) solid var(--ux-border);
  border-radius: var(--ui-radius-control);
  overflow: hidden;
  box-sizing: border-box;
}

.antiscreenshot-mockup-preview-bar {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  padding: var(--ui-space-1) var(--ui-space-2);
  background: color-mix(in srgb, var(--ux-sunken) 70%, var(--ux-border));
  border-bottom: var(--ui-stroke-thin) solid var(--ux-border);
}

.antiscreenshot-mockup-dots {
  display: flex;
  gap: var(--ui-space-1);
}

.antiscreenshot-mockup-dots i {
  width: var(--ui-space-1-5);
  height: var(--ui-space-1-5);
  border-radius: var(--ui-radius-full);
  background: var(--ui-text-muted);
}

.antiscreenshot-mockup-preview-title {
  font-size: var(--fs-caption);
  color: var(--ui-text-primary);
  font-weight: var(--fw-semibold);
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}

.antiscreenshot-mockup-preview-body {
  padding: var(--ui-space-2) var(--ui-space-2-5);
  min-height: var(--ui-size-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-caption);
  color: var(--ui-text-muted);
}

.antiscreenshot-mockup-preview-body .mockup-code {
  font-family: monospace;
  color: var(--ui-accent);
  font-weight: var(--fw-medium);
}

.antiscreenshot-mockup-preview-body .mockup-mini-dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ui-space-0-5);
}

.antiscreenshot-arch-preview-card {
  width: 100%;
  height: 100%;
  min-height: var(--ui-size-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-1);
  padding: var(--ui-space-1-5) var(--ui-space-1);
  border: var(--ui-stroke-thin) solid var(--ux-border);
  border-radius: var(--ui-radius-control);
  box-sizing: border-box;
  text-align: center;
}

.antiscreenshot-arch-icon {
  font-size: var(--fs-body);
  line-height: 1;
}

.antiscreenshot-arch-label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  white-space: normal;
  word-break: break-word;
  line-height: 1.2;
  max-width: 100%;
}

.antiscreenshot-card-preview-widget {
  width: 100%;
  box-sizing: border-box;
}

.antiscreenshot-metric-preview {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
  padding: var(--ui-space-1-5) var(--ui-space-2-5);
  background: var(--ux-sunken);
  border-radius: var(--ui-radius-control);
}

.antiscreenshot-metric-preview .metric-label {
  font-size: var(--fs-caption);
  color: var(--ui-text-muted);
  font-weight: var(--fw-semibold);
}

.antiscreenshot-metric-preview .metric-value {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--ui-text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.antiscreenshot-metric-preview .growth {
  font-size: var(--fs-caption);
  color: var(--ui-success);
  font-weight: var(--fw-bold);
  padding: var(--ui-space-0-5) var(--ui-space-1-5);
  background: color-mix(in srgb, var(--ui-success) 15%, transparent);
  border-radius: var(--ui-radius-control);
}

.antiscreenshot-profile-preview {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  padding: var(--ui-space-1-5) var(--ui-space-2-5);
  background: var(--ux-sunken);
  border-radius: var(--ui-radius-control);
}

.antiscreenshot-profile-preview .profile-avatar {
  font-size: var(--fs-body);
  line-height: 1;
}

.antiscreenshot-profile-preview .profile-info {
  display: flex;
  flex-direction: column;
  gap: var(--ui-resizer-line);
}

.antiscreenshot-profile-preview .profile-info strong {
  font-size: var(--fs-caption);
  color: var(--ui-text-primary);
  font-weight: var(--fw-semibold);
}

.antiscreenshot-profile-preview .profile-info small {
  font-size: var(--fs-caption);
  color: var(--ui-text-muted);
}

.antiscreenshot-banner-preview {
  display: flex;
  align-items: center;
  gap: var(--ui-space-1-5);
  padding: var(--ui-space-1-5) var(--ui-space-2-5);
  border-radius: var(--ui-radius-control);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
}

.antiscreenshot-library-badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: var(--ui-space-1-5);
  width: 100%;
  box-sizing: border-box;
}

.antiscreenshot-asset-card.is-badge-card {
  height: var(--ui-size-md);
  padding: 0;
  border: none;
  background: transparent;
}

.antiscreenshot-badge-pill {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  padding: 0 var(--ui-space-2);
  box-sizing: border-box;
  user-select: none;
  transition: transform var(--ui-duration-fast) var(--ui-ease), filter var(--ui-duration-fast) var(--ui-ease);
}

/* Modal Popovers cho Table, Mockup, Card Config */
.antiscreenshot-table-editor,
.antiscreenshot-mockup-editor,
.antiscreenshot-card-editor {
  color: var(--ui-text-primary);
  font-size: var(--fs-caption);
  box-sizing: border-box;
  overflow: hidden;
}

/* 6 cột: Biểu tượng (UI Icons, Devices, Status) */
.antiscreenshot-library-icon-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--ui-space-1);
  width: 100%;
  box-sizing: border-box;
}

.antiscreenshot-asset-card.is-icon {
  height: var(--ui-size-md);
  padding: var(--ui-space-0-5);
}

.antiscreenshot-asset-card.is-icon svg {
  display: block;
  width: var(--dt-dimension-icon-header);
  height: var(--dt-dimension-icon-header);
}

/* 2 cột: Con dấu Tiếng Việt & Tiếng Anh */
.antiscreenshot-library-stamp-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ui-space-1);
  width: 100%;
  box-sizing: border-box;
}

.antiscreenshot-asset-card.is-stamp {
  height: var(--ui-size-md);
  padding: 0;
  border: none;
  background: transparent;
}

.antiscreenshot-stamp-badge {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--ui-space-0-5) var(--ui-space-1);
  border-width: var(--ui-stroke-thick);
  border-radius: var(--ui-radius-sm);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: 0.3px;
  transform: rotate(-2deg);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

/* Tạo con dấu tùy biến */
.antiscreenshot-custom-stamp-box {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
}

.antiscreenshot-custom-stamp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-1);
}

.antiscreenshot-custom-stamp-box .antiscreenshot-input {
  width: 100%;
  height: var(--ui-icon-lg);
  padding: 0 var(--ui-space-1-5);
  font-size: var(--fs-caption);
  border: var(--ui-stroke-thin) solid var(--ux-input-border);
  border-radius: var(--ui-radius-control);
  background: var(--ux-input-bg);
  color: var(--ui-text-primary);
  box-sizing: border-box;
}

.antiscreenshot-custom-stamp-box .antiscreenshot-input:focus {
  outline: none;
  border-color: var(--ux-control-border-active);
  box-shadow: var(--ui-control-ring);
}

.antiscreenshot-custom-stamp-colors {
  display: flex;
  gap: var(--ui-space-1);
  align-items: center;
}

.antiscreenshot-custom-stamp-colors .notics-swatch {
  width: var(--dt-dimension-icon-header);
  height: var(--dt-dimension-icon-header);
  border-radius: var(--ui-radius-full);
  border: var(--ui-stroke-thick) solid transparent;
  cursor: pointer;
  padding: 0;
}

.antiscreenshot-custom-stamp-colors .notics-swatch.is-selected {
  border-color: var(--ui-text-primary);
  transform: scale(1.15);
}

.antiscreenshot-top-library-group {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
}

.antiscreenshot-top-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
  height: var(--ui-size-md);
  padding: 0 var(--ui-space-2);
  border: var(--ui-stroke-thin) solid var(--ux-border);
  border-radius: var(--ui-radius-control);
  background: var(--ux-raised);
  color: var(--ui-text-primary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  cursor: pointer;
  user-select: none;
}

.antiscreenshot-top-dropdown-btn:hover {
  border-color: var(--ui-accent);
  color: var(--ui-accent);
}

.antiscreenshot-top-pack-popover {
  min-width: var(--dt-dimension-layout-304);
  max-width: var(--dt-dimension-layout-400);
  padding: var(--ui-space-2);
}

.antiscreenshot-top-pack-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--ui-space-1-5);
  margin-bottom: var(--ui-space-1-5);
  border-bottom: var(--ui-stroke-thin) solid var(--ux-divider);
  font-size: var(--fs-body);
  color: var(--ui-text-primary);
}

/* ── Quản trị Thư viện Tiện ích (Manage Libraries Modal) ───────────────────── */

.antiscreenshot-manage-dialog {
  width: min(var(--dt-dimension-layout-880), 92vw);
  height: min(var(--dt-dimension-layout-680), 85vh);
  min-height: min(var(--dt-dimension-layout-680), 85vh);
  max-height: min(var(--dt-dimension-layout-680), 85vh);
  display: flex;
  flex-direction: column;
  padding: var(--ui-space-4);
  background: var(--ux-overlay);
  border: var(--ui-stroke-thin) solid var(--ux-border);
  border-radius: var(--ui-radius-panel);
  box-shadow: var(--elev-4);
}

.antiscreenshot-manage-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ui-space-3);
  padding-bottom: var(--ui-space-3);
  border-bottom: var(--ui-stroke-thin) solid var(--ux-divider);
}

.antiscreenshot-manage-title {
  display: block;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--ui-text-primary);
}

.antiscreenshot-manage-subtitle {
  display: block;
  font-size: var(--fs-caption);
  color: var(--ui-text-secondary);
  margin-top: var(--ui-space-0-5);
}

.antiscreenshot-manage-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-2-5);
  padding: var(--ui-space-2-5) 0;
  flex-wrap: wrap;
}

.antiscreenshot-manage-search {
  position: relative;
  flex: 1 1 15rem;
  min-width: 0;
}

.antiscreenshot-manage-search-icon {
  position: absolute;
  left: var(--ui-space-2-5);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ui-text-muted);
  pointer-events: none;
}

.antiscreenshot-manage-search input {
  padding-left: var(--ui-control-h-standard);
}

.antiscreenshot-manage-quick-actions {
  display: flex;
  align-items: center;
  gap: var(--ui-space-1-5);
}

.antiscreenshot-manage-filters {
  display: flex;
  align-items: center;
  gap: var(--ui-space-1-5);
  padding-bottom: var(--ui-space-2-5);
  overflow-x: auto;
}

.antiscreenshot-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1-5);
  padding: var(--ui-space-1) var(--ui-space-2-5);
  border: var(--ui-stroke-thin) solid var(--ux-border);
  border-radius: var(--ui-radius-full);
  background: var(--ux-sunken);
  color: var(--ui-text-secondary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--ui-duration-fast) var(--ui-ease);
}

.antiscreenshot-filter-chip:hover {
  border-color: var(--ui-accent);
  color: var(--ui-accent);
}

.antiscreenshot-filter-chip.is-active {
  background: var(--ui-accent-solid);
  border-color: var(--ui-accent);
  color: var(--ui-text-on-accent);
  font-weight: var(--fw-semibold);
}

.antiscreenshot-manage-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--ui-space-2-5);
  overflow-y: auto;
  flex: 1 1 0;
  min-height: 0;
  padding: var(--ui-space-0-5) var(--ui-space-0-5) var(--ui-space-2) var(--ui-space-0-5);
  align-content: start;
}

@container (max-width: 600px) {
  .antiscreenshot-manage-grid {
    grid-template-columns: 1fr;
  }
}

.antiscreenshot-manage-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--ui-space-2-5) var(--ui-space-3);
  border: var(--ui-stroke-thin) solid var(--ux-border);
  border-radius: var(--ui-radius-control);
  background: var(--ux-raised);
  transition: border-color var(--ui-duration-fast) var(--ui-ease), box-shadow var(--ui-duration-fast) var(--ui-ease);
}

.antiscreenshot-manage-card.is-enabled {
  border-color: color-mix(in srgb, var(--ui-accent) 50%, var(--ux-border));
}

.antiscreenshot-manage-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ui-space-2);
}

.antiscreenshot-manage-card-info {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-2-5);
  flex: 1 1 auto;
  min-width: 0;
}

.antiscreenshot-manage-pack-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ui-size-md);
  height: var(--ui-size-md);
  border-radius: var(--ui-radius-control);
  background: color-mix(in srgb, var(--ui-accent) 12%, transparent);
  color: var(--ui-accent);
  flex-shrink: 0;
}

.antiscreenshot-manage-pack-name {
  display: flex;
  align-items: center;
  gap: var(--ui-space-1-5);
  font-size: var(--fs-body);
  color: var(--ui-text-primary);
}

.antiscreenshot-manage-badge {
  font-size: var(--fs-caption);
  padding: var(--ui-resizer-line) var(--ui-space-1-5);
  border-radius: var(--ui-radius-full);
  background: var(--ux-sunken);
  color: var(--ui-text-secondary);
}

.antiscreenshot-manage-pack-desc {
  margin: var(--ui-space-0-5) 0 0;
  font-size: var(--fs-caption);
  color: var(--ui-text-muted);
  line-height: var(--lh-normal);
}

.antiscreenshot-manage-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-2);
  margin-top: var(--ui-space-2-5);
  padding-top: var(--ui-space-2);
  border-top: var(--ui-stroke-thin) dashed var(--ux-divider);
}

.antiscreenshot-manage-pos-label {
  font-size: var(--fs-micro);
  color: var(--ui-text-muted);
  font-weight: var(--fw-medium);
}

.antiscreenshot-manage-pos-radios {
  display: flex;
  gap: var(--ui-space-1);
}

.antiscreenshot-radio-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
  padding: var(--ui-space-0-5) var(--ui-space-2);
  border: var(--ui-stroke-thin) solid var(--ux-border);
  border-radius: var(--ui-radius-control);
  background: var(--ux-sunken);
  font-size: var(--fs-caption);
  color: var(--ui-text-secondary);
  cursor: pointer;
  user-select: none;
}

.antiscreenshot-radio-pill input {
  margin: 0;
  accent-color: var(--ui-accent);
}

.antiscreenshot-radio-pill.is-selected {
  border-color: var(--ui-accent);
  color: var(--ui-accent);
  background: color-mix(in srgb, var(--ui-accent) 8%, transparent);
}

.antiscreenshot-toggle-switch {
  position: relative;
  display: inline-block;
  width: var(--ui-size-lg);
  height: var(--ui-space-5);
  flex-shrink: 0;
  cursor: pointer;
}

.antiscreenshot-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.antiscreenshot-switch-slider {
  position: absolute;
  inset: 0;
  background: var(--ux-sunken);
  border: var(--ui-stroke-thin) solid var(--ux-border);
  border-radius: var(--ui-radius-full);
  transition: background var(--ui-duration-fast) var(--ui-ease), border-color var(--ui-duration-fast) var(--ui-ease);
}

.antiscreenshot-switch-slider::before {
  position: absolute;
  content: "";
  height: var(--ui-space-3-5);
  width: var(--ui-space-3-5);
  left: var(--ui-space-0-5);
  bottom: var(--ui-space-0-5);
  background: var(--ui-text-secondary);
  border-radius: var(--ui-radius-full);
  transition: transform var(--ui-duration-fast) var(--ui-ease), background var(--ui-duration-fast) var(--ui-ease);
}

.antiscreenshot-toggle-switch input:checked + .antiscreenshot-switch-slider {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
}

.antiscreenshot-toggle-switch input:checked + .antiscreenshot-switch-slider::before {
  transform: translateX(1rem);
  background: var(--ui-text-on-accent);
}

.antiscreenshot-manage-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-2-5);
  padding-top: var(--ui-space-3);
  margin-top: var(--ui-space-2-5);
  border-top: var(--ui-stroke-thin) solid var(--ux-divider);
}

.antiscreenshot-manage-empty {
  grid-column: 1 / -1;
  padding: var(--ui-space-6);
  text-align: center;
  color: var(--ui-text-muted);
  font-size: var(--fs-body);
}

@media (max-width: 900px) {
  .antiscreenshot-layout, .antiscreenshot-layout.is-sidebar-collapsed { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
}
@media (max-width: 640px) {
  .edit-panel.expanded-edit-panel { width: calc(100vw - var(--ui-space-5)); height: min(88vh, var(--dt-dimension-layout-720)); }
  .edit-header, .edit-body, .edit-footer { padding-inline: var(--ui-space-4); }
  .edit-hint { display: none; }
  .edit-footer { justify-content: flex-end; }
}
} /* @layer legacy */

/* ==========================================================================
   MÀN ANTISCREENSHOT — GĐ4 Bước 3 lát 1 (docs/KE-HOACH-TIEP-THEO-CHUAN-HOA-UI-2026-09-19.md)
   Thanh trình sửa ảnh: nút icon / nút menu ("Màu / nét", "Viền") / nút thao tác
   (Copy, Lưu, Save As) đều là .ui-btn cỡ sm 24 (Q1: dense 28 -> 24; trước ép 28
   bằng !important qua .antipaint-tool-btn). Trạng thái riêng nêu lại ở modules
   vì công thức chuẩn đặt màu cho mọi trạng thái: công cụ/bật-tắt đang chọn =
   accent đặc (như AntiPaint), "Viền" đang bật (.is-on) = chữ accent trên nền
   accent nhạt, nút xóa ảnh hover đỏ. Icon giữ 14 như AntiPaint. Nút kiểu xem /
   thu phóng thư viện: .ui-btn icon md 32 (trước 36), kiểu đang chọn = accent đặc.
   ========================================================================== */
@layer modules {
  .antiscreenshot-toolbar .ui-btn.is-active:not(.ui-btn--toggle),
  .antiscreenshot-library-views .ui-btn.is-active {
    background: var(--ui-accent-solid);
    border-color: transparent;
    color: var(--ui-text-on-accent);
  }
  /* Nút ẩn/hiện bảng phải là bật/tắt KHUNG, không phải công cụ đang chọn: nền nhấn trung
     tính như nút ẩn cột của Notebook — màu nhấn đặc chỉ dành cho nút chính (Thoáng–Gọn,
     BA 10/10/2026). */
  .antiscreenshot-toolbar :is(#screenshotToggleInspectorBtn, #screenshotToggleLibraryBtn).ui-btn.is-active {
    background: var(--ui-action-active);
    color: var(--ui-text-primary);
  }
  .antiscreenshot-toolbar .ui-btn svg {
    width: var(--ui-icon-dense);
    height: var(--ui-icon-dense);
  }
  .antiscreenshot-toolbar .ui-btn.is-danger:hover {
    background: var(--ui-danger);
    color: var(--ui-text-on-accent);
  }

  /* ── Art Editor: Cột phải Bảng thuộc tính Inspector ─────────────────────── */
  .antiscreenshot-col-inspector {
    /* Bề ngang chung của ô màu / ô số trong bảng để các hàng thẳng mép. */
    --as-inspector-control-w: 6.5rem;
    width: var(--dt-dimension-layout-272);
    flex: 0 0 16.5rem;
    min-width: var(--dt-dimension-layout-224);
    max-width: var(--dt-dimension-layout-400);
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    border-left: var(--ui-resizer-line) solid var(--ux-divider);
    background: var(--ux-sunken);
    z-index: var(--ui-layer-pane);
    overflow: visible;
  }

  .antiscreenshot-inspector-resizer {
    position: absolute;
    top: 0;
    left: calc(var(--ui-resizer-hit) / -2);
    bottom: 0;
    width: var(--ui-resizer-hit);
    cursor: col-resize;
    background: transparent;
    z-index: var(--ui-layer-pane-control);
    touch-action: none;
    user-select: none;
    outline: none;
  }

  .antiscreenshot-inspector-resizer::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - (var(--ui-resizer-drag-line) / 2));
    width: var(--ui-resizer-drag-line);
    background: transparent;
    pointer-events: none;
  }

  /* Rê chuột chỉ đổi con trỏ; đang kéo mới vẽ vạch xám (BA 12/10/2026). Vạch chia
     lúc nghỉ = border-left của .antiscreenshot-inspector. */
  .antiscreenshot-inspector-resizer.is-resizing::after {
    background: var(--ui-resizer-drag-color);
  }

  .antiscreenshot-inspector-resizer:focus-visible::after {
    background: var(--ui-accent);
    box-shadow: 0 0 0 var(--ui-focus-ring-width) var(--ui-focus-ring);
  }

  .antiscreenshot-inspector-header {
    /* Segmented cao --ui-size-md: chừa lề trên/dưới để viền tab không dính vạch chia. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ui-space-2) var(--ui-space-3);
    border-bottom: var(--ui-stroke-thin) solid var(--ux-divider);
    background: var(--ux-panel);
    user-select: none;
    flex-shrink: 0;
  }



  .antiscreenshot-inspector-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Nhãn ngữ cảnh (Trang / Hình vẽ / Mũi tên…) là chữ, không đóng hộp (tinh gọn 2026-09-24). */
    font-size: var(--fs-micro);
    font-weight: var(--fw-medium);
    color: var(--ui-text-secondary);
    line-height: var(--lh-tight);
  }

  .antiscreenshot-inspector-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-1);
    padding: var(--ui-space-1) 0;
  }

  .antiscreenshot-inspector-section {
    display: flex;
    flex-direction: column;
    border-bottom: var(--ui-stroke-thin) solid var(--ux-divider);
    padding-bottom: var(--ui-space-1-5);
  }

  .antiscreenshot-inspector-section.is-collapsed .antiscreenshot-inspector-section-content {
    display: none;
  }

  .antiscreenshot-inspector-section.is-collapsed .antiscreenshot-inspector-chevron {
    transform: rotate(-90deg);
  }

  /* Tiêu đề mục là .ui-btn nhẹ sm (cao, nền rê/nhấn, focus do component); ở đây
     chỉ bố cục dòng gập/mở trải hết bề ngang. */
  .antiscreenshot-inspector-section-header {
    justify-content: space-between;
    width: 100%;
    padding-inline: var(--ui-space-3);
    text-align: left;
  }

  .antiscreenshot-inspector-section-title {
    display: flex;
    align-items: center;
    gap: var(--ui-space-1-5);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    color: var(--ui-text-primary);
  }

  .antiscreenshot-inspector-section-title svg {
    width: var(--ui-icon-xs);
    height: var(--ui-icon-xs);
    color: var(--ui-text-secondary);
  }

  .antiscreenshot-inspector-chevron {
    width: var(--ui-icon-xs);
    height: var(--ui-icon-xs);
    color: var(--ui-text-muted);
    transition: transform var(--ui-duration-fast) var(--ui-ease);
  }

  .antiscreenshot-inspector-section-content {
    padding: var(--ui-space-1-5) var(--ui-space-2);
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-1-5);
  }

  .antiscreenshot-inspector-row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-1);
    width: 100%;
  }

  .antiscreenshot-inspector-field {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--ui-resizer-line);
    flex: 1 1 0;
    min-width: 0;
    height: var(--ui-size-sm);
    padding: 0 var(--ui-resizer-line);
    /* Viền vẽ bằng bóng trong (không chiếm chỗ) để nút −/+ .ui-btn--sm cao đủ
       24 = vùng bấm WCAG 2.5.8 mà ô vẫn cao size.sm như mọi control Inspector. */
    --as-field-edge: var(--ux-input-border);
    border: 0;
    box-shadow: inset 0 0 0 var(--ui-resizer-line) var(--as-field-edge);
    border-radius: var(--ui-radius-control);
    background-color: var(--ux-input-bg);
    box-sizing: border-box;
    overflow: hidden;
    transition:
      box-shadow var(--ui-duration-fast) var(--ui-ease),
      background-color var(--ui-duration-fast) var(--ui-ease);
  }

  .antiscreenshot-inspector-field:hover {
    --as-field-edge: var(--ui-control-border-hover);
  }

  .antiscreenshot-inspector-field:focus-within {
    --as-field-edge: var(--ux-control-border-active);
    box-shadow: inset 0 0 0 var(--ui-resizer-line) var(--as-field-edge), var(--ui-control-ring);
  }

  .antiscreenshot-inspector-field:focus-within label {
    color: var(--ui-accent);
  }

  .antiscreenshot-inspector-field label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    color: var(--ui-text-muted);
    user-select: none;
    flex-shrink: 0;
    cursor: pointer;
    line-height: 1;
    padding: 0 var(--ui-space-0-5);
    min-width: var(--ui-space-2-5);
    text-align: center;
    transition: color var(--ui-duration-fast) var(--ui-ease);
  }

  .antiscreenshot-inspector-field :is(input, .antiscreenshot-inspector-input, .ui-input) {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
    border-color: transparent;
    background: transparent;
    padding: 0 var(--ui-resizer-line);
    margin: 0;
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    color: var(--ui-text-primary);
    outline: none;
    box-shadow: none;
    text-align: center;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    appearance: textfield;
  }

  .antiscreenshot-inspector-field :is(input, .antiscreenshot-inspector-input, .ui-input):focus,
  .antiscreenshot-inspector-field :is(input, .antiscreenshot-inspector-input, .ui-input):focus-visible,
  .antiscreenshot-inspector-field :is(input, .antiscreenshot-inspector-input, .ui-input):active,
  .antiscreenshot-inspector-field :is(input, .antiscreenshot-inspector-input, .ui-input):hover {
    border: 0;
    border-color: transparent;
    outline: none;
    box-shadow: none;
    background: transparent;
  }

  /* Ô số đã có nút −/+ riêng: ẩn nút lên/xuống của hệ thống (trước đây gõ thừa
     dấu ":" thành ":::" nên cả luật bị bỏ). Mũi tên ▼ khi rê chuột là của <datalist>
     thang token — mở danh sách độ dày/cỡ chữ chuẩn, giữ nguyên. */
  .antiscreenshot-inspector-field :is(input, .antiscreenshot-inspector-input, .ui-input)::-webkit-inner-spin-button,
  .antiscreenshot-inspector-field :is(input, .antiscreenshot-inspector-input, .ui-input)::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Nút −/+ là .ui-btn nhẹ cỡ sm (GĐ F chuẩn quốc tế 01/10/2026). Ô bọc có
     overflow: hidden nên vòng focus vẽ bằng bóng trong thay cho outline. */
  .antiscreenshot-stepper-btn {
    flex-shrink: 0;
  }
  /* Cột Inspector co hẹp (tối thiểu 216px): hai nút 24px sẽ ép ô số dưới 4 chữ số —
     ẩn −/+ khi ô hẹp hơn 6rem; vẫn gõ số / phím ↑↓ được (WCAG 2.5.8: control tương đương). */
  .antiscreenshot-inspector-field:has(> .antiscreenshot-stepper-btn) {
    container-type: inline-size;
  }
  @container (max-width: 6rem) {
    .antiscreenshot-stepper-btn {
      display: none;
    }
  }

  .antiscreenshot-stepper-btn:focus-visible {
    outline: none;
    box-shadow: var(--ui-control-ring);
  }

  .antiscreenshot-stepper-field {
    width: var(--as-inspector-control-w);
    max-width: var(--as-inspector-control-w);
    flex: 0 1 var(--as-inspector-control-w);
  }

  .antiscreenshot-stepper-unit {
    font-size: var(--fs-micro);
    color: var(--ui-text-muted);
    user-select: none;
    padding: 0 var(--ui-space-0-5);
    flex-shrink: 0;
  }

  .antiscreenshot-inspector-spacer {
    display: inline-block;
    width: var(--ui-space-4);
    flex: 0 0 var(--ui-space-4);
  }

  #inspectorLockAspectBtn {
    width: var(--ui-space-4);
    height: var(--ui-size-sm);
    min-height: var(--ui-size-sm);
    flex: 0 0 var(--ui-space-4);
    padding: 0;
  }

  #inspectorLockAspectBtn.is-active {
    background: color-mix(in srgb, var(--ui-accent) 15%, transparent);
    color: var(--ui-accent);
  }

  .antiscreenshot-inspector-row-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-1-5);
  }

  .antiscreenshot-inspector-prop-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-2);
    min-height: var(--ui-size-sm);
    width: 100%;
    min-width: 0;
  }

  .antiscreenshot-inspector-label {
    font-size: var(--fs-caption);
    color: var(--ui-text-secondary);
    white-space: nowrap;
    user-select: none;
    flex-shrink: 0;
  }

  .antiscreenshot-inspector-color-group {
    display: flex;
    align-items: center;
    gap: var(--ui-space-1);
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Nút chọn màu / phông là ô chọn .ui-select--sm (Ô NHẬP CHUẨN); ở đây chỉ bố cục. */
  .antiscreenshot-col-inspector .antiscreenshot-fmt-color-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-1);
    padding-inline: var(--ui-space-1) var(--ui-space-1-5);
    cursor: pointer;
    flex: 0 1 var(--as-inspector-control-w);
    width: var(--as-inspector-control-w);
  }

  .antiscreenshot-col-inspector .antiscreenshot-fmt-color-btn .antiscreenshot-swatch {
    width: var(--ui-icon-xs);
    height: var(--ui-icon-xs);
    border-radius: var(--ui-radius-full);
    border: var(--ui-resizer-line) solid var(--ux-border);
    flex-shrink: 0;
  }

  .antiscreenshot-col-inspector .antiscreenshot-fmt-color-btn span:not(.antiscreenshot-swatch) {
    font-size: var(--fs-micro);
    font-family: var(--font-task);
    color: var(--ui-text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .antiscreenshot-inspector-stroke-group {
    display: flex;
    align-items: center;
    gap: var(--ui-space-1);
    justify-content: flex-end;
    flex: 1 1 auto;
    min-width: 0;
  }

  .antiscreenshot-col-inspector .antiscreenshot-fmt-font-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-1);
    max-width: var(--dt-dimension-layout-144);
    font-size: var(--fs-caption);
    cursor: pointer;
  }

  .antiscreenshot-col-inspector #inspectorFontFamilyName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .antiscreenshot-col-inspector .antiscreenshot-fmt-btn-group {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-0-5);
    background: var(--ux-sunken);
    padding: var(--ui-space-0-5);
    border: var(--ui-resizer-line) solid var(--ux-border);
    border-radius: var(--ui-radius-control);
  }


  .antiscreenshot-inspector-opacity-group {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    flex: 1 1 auto;
    min-width: 0;
    /* Cùng bề ngang cụm "ô + nút phụ" của hàng Màu nền/Độ dày viền. */
    max-width: calc(var(--as-inspector-control-w) + var(--ui-space-1) + var(--ui-size-sm));
  }

  /* Thanh trượt phẳng theo token: rãnh mảnh + nút tròn; bỏ vạch <datalist> mặc định
     của Chromium (vạch lởm chởm dưới rãnh — BA 2026-09-28). --as-range-pct do
     inspectorPanel.js cập nhật để tô phần đã chọn. */
  .antiscreenshot-inspector-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1 1 auto;
    min-width: 0;
    height: var(--ui-size-sm);
    margin: 0;
    background: transparent;
    cursor: pointer;
  }
  .antiscreenshot-inspector-slider::-webkit-slider-runnable-track {
    height: var(--ui-space-1);
    border-radius: var(--ui-radius-full);
    background: linear-gradient(to right,
      var(--ui-accent-solid) 0 var(--as-range-pct, 100%),
      var(--ux-divider) var(--as-range-pct, 100%) 100%);
  }
  .antiscreenshot-inspector-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--ui-space-3);
    height: var(--ui-space-3);
    margin-top: calc((var(--ui-space-1) - var(--ui-space-3)) / 2);
    border: var(--ui-resizer-line) solid var(--ux-raised);
    border-radius: var(--ui-radius-full);
    background: var(--ui-accent-solid);
    box-shadow: var(--ui-elevation-1);
  }
  .antiscreenshot-inspector-trailing-slot {
    flex: 0 0 var(--ui-size-sm);
    width: var(--ui-size-sm);
  }

  .antiscreenshot-inspector-slider-label {
    font-size: var(--fs-micro);
    color: var(--ui-text-secondary);
    min-width: var(--ui-size-md);
    text-align: right;
    font-variant-numeric: tabular-nums;
    user-select: none;
  }

  .antiscreenshot-inspector-page-dim-group,
  .antiscreenshot-inspector-bg-image-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--ui-space-1);
    flex: 1 1 auto;
    min-width: 0;
  }

  .antiscreenshot-col-inspector #inspectorPageDimBtn {
    height: var(--ui-size-sm);
    padding: 0 var(--ui-space-2);
    /* Ô giá trị nền mờ, không viền (báo cáo UX 10/10/2026 §4.4 — kiểu Figma/Snagit). */
    border: var(--ui-resizer-line) solid transparent;
    border-radius: var(--ui-radius-control);
    background: color-mix(in srgb, var(--ui-text-primary) 6%, transparent);
    color: var(--ui-text-primary);
    font-size: var(--fs-caption);
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-1-5);
    flex: 1 1 auto;
    min-width: 0;
    cursor: pointer;
  }

  .antiscreenshot-col-inspector #inspectorPageDimBtn:hover {
    border-color: var(--ui-control-border-hover);
    background: var(--ui-hover);
  }

  .antiscreenshot-col-inspector #inspectorPageDimLabel {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
  }

  .antiscreenshot-col-inspector #inspectorPageDimBtn .token-select-caret {
    flex-shrink: 0;
  }

  .antiscreenshot-col-inspector #inspectorPageOrientationBtn {
    flex-shrink: 0;
  }

  .antiscreenshot-inspector-bg-image-group #inspectorPageBgImgBtn {
    height: var(--ui-size-sm);
    padding: 0 var(--ui-space-2);
    /* Ô giá trị nền mờ, không viền (báo cáo UX 10/10/2026 §4.4 — kiểu Figma/Snagit). */
    border: var(--ui-resizer-line) solid transparent;
    border-radius: var(--ui-radius-control);
    background: color-mix(in srgb, var(--ui-text-primary) 6%, transparent);
    color: var(--ui-text-primary);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    transition:
      border-color var(--ui-duration-fast) var(--ui-ease),
      background-color var(--ui-duration-fast) var(--ui-ease);
  }

  .antiscreenshot-inspector-bg-image-group #inspectorPageBgImgBtn:hover {
    border-color: transparent;
    background: color-mix(in srgb, var(--ui-text-primary) 10%, transparent);
  }

  html[data-layout-mode="medium"] .antiscreenshot-col-inspector {
    width: var(--dt-dimension-layout-224);
    flex: 0 0 14rem;
  }

  /* Màn hẹp: bảng thuộc tính là chỗ chỉnh DUY NHẤT (thanh định dạng đã bỏ) nên
     không ẩn hẳn — thành ngăn kéo nổi từ mép phải, mở/đóng bằng nút bảng thuộc
     tính trên thanh công cụ, Esc đóng (JS: .is-drawer-open). */
  html:is([data-layout-mode="compact"], [data-layout-mode="tight"]) .antiscreenshot-col-inspector {
    display: none;
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    flex: none;
    max-width: 100%;
    z-index: var(--ui-layer-pane-top);
    /* Ngăn kéo nổi trên ảnh → bề mặt overlay đặc; --ux-sunken có alpha làm ảnh lộ qua. */
    background: var(--ux-overlay);
    box-shadow: var(--ui-elevation-4);
  }

  html:is([data-layout-mode="compact"], [data-layout-mode="tight"]) .antiscreenshot-col-inspector.is-drawer-open {
    display: flex;
  }

  html:is([data-layout-mode="compact"], [data-layout-mode="tight"]) .antiscreenshot-inspector-resizer {
    display: none;
  }
}

/* Popover/flyout Art Editor (GĐ5): cùng layer modules với khối trên; trước đây đứng ngoài layer nên thắng mọi layer. */
@layer modules {
  .antiscreenshot-popover-header-title {
    display: flex;
    align-items: center;
    gap: var(--ui-space-1-5);
  }

  .antiscreenshot-popover-title-icon {
    color: var(--ui-accent);
    display: inline-flex;
  }

  .antiscreenshot-asset-config-popover {
    position: fixed;
    width: min(var(--dt-dimension-layout-360), calc(100vw - var(--ui-space-4)));
    z-index: var(--ui-layer-modal);
    border-radius: var(--ui-radius-control);
    box-shadow: var(--ui-elevation-4);
    border: var(--ui-resizer-line) solid var(--ux-border);
    background: var(--ux-overlay);
  }


  .antiscreenshot-asset-config-body {
    padding: var(--ui-space-2-5) var(--ui-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2-5);
  }

  .antiscreenshot-asset-config-field {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-1);
  }


  .antiscreenshot-asset-config-label {
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    color: var(--ui-text-primary);
  }

  .antiscreenshot-asset-config-input,
  .antiscreenshot-asset-config-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: var(--ui-space-1-5) var(--ui-space-2);
    border: var(--ui-resizer-line) solid var(--ux-input-border);
    border-radius: var(--ui-radius-control);
    background: var(--ux-input-bg);
    color: var(--ui-text-primary);
    font-size: var(--fs-caption);
    font-family: inherit;
  }

  .antiscreenshot-asset-config-input.is-short {
    width: var(--dt-dimension-layout-80);
  }

  .antiscreenshot-asset-config-textarea {
    min-height: var(--dt-dimension-layout-72);
    resize: vertical;
  }


  .antiscreenshot-progress-popover {
    position: absolute;
    transform: translate(-50%, 0);
    z-index: var(--ui-layer-popover);
    padding: var(--ui-space-2-5) var(--ui-space-3-5);
    min-width: var(--dt-dimension-layout-224);
  }

  .antiscreenshot-progress-popover .antiscreenshot-palette-section-title {
    margin-bottom: var(--ui-space-2);
  }

  .antiscreenshot-progress-control-row {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    margin-bottom: var(--ui-space-2);
  }

  .antiscreenshot-progress-range {
    flex: 1;
    cursor: pointer;
  }

  .antiscreenshot-progress-value {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    width: var(--ui-size-lg);
    text-align: right;
    color: var(--ui-text-primary);
  }

  .antiscreenshot-progress-quick-row {
    display: flex;
    gap: var(--ui-space-1);
    justify-content: space-between;
  }

  .antiscreenshot-progress-quick-row .wf-prog-quick-btn {
    padding: var(--ui-space-0-5) var(--ui-space-1-5);
    font-size: var(--fs-micro);
  }
} /* @layer modules */

/* ── Video quay màn hình (screenshot/recordingView.js) ─────────────────────
   Thay chỗ khung vẽ khi chọn một video trong thư viện: thanh tên + thông tin
   ở trên, trình phát co giãn giữ tỉ lệ ở giữa. Chỉ dùng token --ui-*. */
@layer modules {
  .antiscreenshot-video { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: var(--ui-space-2); padding: var(--ui-space-3); }
  .antiscreenshot-video-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Khung xem: video ở cỡ gốc, co vừa khung (vx-frame do videoEditor.js đặt cỡ);
     video + lớp che mờ + lớp chú thích Fabric chồng khít nhau. */
  .antiscreenshot-video-stage {
    position: relative; flex: 1; min-height: 0; overflow: hidden; display: grid; place-items: center;
    border-radius: var(--ui-radius-panel); background: var(--ux-card);
  }
  /* Khung cuộn của video: phóng to hơn khung thì cuộn (margin auto = căn giữa khi
     nhỏ hơn, về 0 khi tràn nên cuộn được tới mép trái/trên). */
  .vx-viewport { position: absolute; inset: 0; display: flex; overflow: hidden; }
  .vx-viewport.is-scrollable { overflow: auto; }
  .vx-viewport.is-panning, .vx-viewport.is-panning * { cursor: grabbing; }
  .vx-frame { position: relative; flex: none; margin: auto; }
  /* Thanh kéo giữa khung video và timeline (videoEditor.js đổi số hàng dải chú thích). */
  .vx-splitter {
    position: relative; flex: none; height: var(--ui-space-3); /* Không chiếm chỗ: nằm gọn trong khe gap của .antiscreenshot-video, vùng bấm lấn nhẹ hai bên. */
    margin-block: calc((var(--ui-space-3) + var(--ui-space-2)) / -2); z-index: var(--ui-layer-pane-control);
    cursor: row-resize; touch-action: none; user-select: none; outline: none;
  }
  .vx-splitter::after {
    content: ""; position: absolute; left: 50%; top: calc(50% - var(--ui-resizer-line) / 2); translate: -50% 0;
    width: var(--ui-space-8); height: var(--ui-resizer-line); border-radius: var(--ui-radius-full); background: var(--ux-divider);
    transition: background-color var(--ui-duration-fast) var(--ui-ease), width var(--ui-duration-fast) var(--ui-ease);
  }
  .vx-splitter:hover::after, .vx-splitter.is-resizing::after { width: 100%; background: var(--ui-accent); }
  .vx-splitter:focus-visible::after { width: 100%; background: var(--ui-accent); box-shadow: 0 0 0 var(--ui-focus-ring-width) var(--ui-focus-ring); }
  .antiscreenshot-video-player { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; background: transparent; }
  .vx-blur, .vx-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  /* Phóng to vùng: đang phát trong vùng thì .vx-fx vẽ cả khung đã phóng → ẩn lớp thường. */
  .vx-frame.is-zoomed .vx-blur, .vx-frame.is-zoomed .canvas-container { visibility: hidden; }
  .vx-zoom-draw { position: absolute; inset: 0; cursor: crosshair; touch-action: none; }
  /* Thanh công cụ: cùng lớp .antiscreenshot-toolbar của Art Editor (nút .ui-btn sm, công cụ đang chọn = accent đặc). */
  .vx-toolbar { row-gap: var(--ui-space-1); }
  .vx-swatch {
    width: var(--ui-space-4); height: var(--ui-space-4); padding: 0; cursor: pointer;
    border: var(--dt-dimension-resizer-line) solid var(--ux-border); border-radius: var(--ui-radius-full); background: var(--vx-swatch);
  }
  .vx-swatch.is-active { box-shadow: 0 0 0 calc(var(--dt-dimension-resizer-line) * 2) var(--ui-accent-solid); }
  /* Hàng nút phát MỘT dòng (đổi chọn đối tượng không làm khung video nhảy): cụm
     cố định bên trái, dòng trạng thái co lại có "…", cụm ngữ cảnh .vx-context bên
     phải. Hẹp thì nút âm thanh chỉ còn icon; compact/tight mới cho xuống dòng. */
  .vx-transport { display: flex; align-items: center; gap: var(--ui-space-2); min-width: 0; }
  .vx-time { font-variant-numeric: tabular-nums; color: var(--ui-text-primary); font-size: var(--fs-body); white-space: nowrap; }
  .vx-selection-label { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ui-accent); font-size: var(--fs-body); white-space: nowrap; }
  .vx-context { display: inline-flex; align-items: center; gap: var(--ui-space-2); flex: none; min-width: 0; margin-left: auto; }
  :is(html[data-layout-mode="medium"], html[data-layout-mode="compact"], html[data-layout-mode="tight"]) :is(.vx-toolbar, .vx-cut-tools) .vx-btn-label { display: none; }
  html:is([data-layout-mode="compact"], [data-layout-mode="tight"]) .vx-transport { flex-wrap: wrap; row-gap: var(--ui-space-1); }
  /* Giờ hiện của chú thích đang chọn — gõ "phút:giây" (BA 2026-09-24). */
  .vx-ann-time { display: inline-flex; align-items: center; gap: var(--ui-space-1); min-width: 0; color: var(--ui-text-secondary); font-size: var(--fs-body); white-space: nowrap; }
  .vx-ann-time label { display: inline-flex; align-items: center; gap: var(--ui-space-1); }
  .vx-ann-name { color: var(--ui-text-primary); font-weight: var(--dt-typography-weight-semibold); }
  .vx-time-input { width: calc(var(--ui-space-12) + var(--ui-space-4)); text-align: center; font-variant-numeric: tabular-nums; }
  .vx-timeline { display: flex; flex-direction: column; gap: var(--ui-space-1); }
  /* Phóng to timeline: thanh cuộn ngang thật + nút −/%/+/vừa khung. Hàng luôn giữ
     chỗ (thanh cuộn chỉ ẩn đi) để phóng/thu không làm khung video nhảy. */
  .vx-zoombar { display: flex; align-items: center; gap: var(--ui-space-2); min-width: 0; }
  .vx-hscroll { flex: 1 1 auto; min-width: 0; height: var(--ui-space-3); overflow-x: auto; overflow-y: hidden; }
  .vx-hscroll.is-idle { visibility: hidden; }
  .vx-hscroll-inner { height: var(--dt-dimension-resizer-line); }
  .vx-zoom { display: inline-flex; align-items: center; gap: var(--ui-space-0-5); flex: none; }
  .vx-zoom-value { min-width: 5ch; text-align: center; color: var(--ui-text-secondary); font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
  /* Thước tua: bấm/kéo để tua, núm = vị trí đang xem. Núm được tràn ra hai mép
     (ở giây 0 vẫn thấy trọn), còn vạch/nhãn thì cắt trong thước. */
  .vx-ruler {
    position: relative; flex: none; height: var(--ui-space-5); cursor: pointer; touch-action: none; user-select: none;
    border-radius: var(--ui-radius-sm); color: var(--ui-text-secondary); font-size: var(--fs-micro); font-variant-numeric: tabular-nums;
  }
  .vx-ruler:hover { background: var(--ui-hover); }
  .vx-ruler.is-scrubbing { cursor: grabbing; background: var(--ui-hover); }
  .vx-ticks { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
  .vx-tick { position: absolute; bottom: 0; height: 30%; border-left: var(--dt-dimension-resizer-line) solid var(--ui-text-muted); }
  .vx-tick.is-major { top: 0; height: auto; padding-left: var(--ui-space-1); line-height: 1; white-space: nowrap; }
  .vx-scrub-knob {
    position: absolute; top: 0; bottom: 0; width: var(--ui-space-3); translate: -50% 0; pointer-events: none;
    clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); background: var(--ui-text-primary);
  }
  .vx-track {
    position: relative; height: var(--ui-space-12); cursor: text; touch-action: none; user-select: none; overflow: hidden;
    border: var(--dt-dimension-resizer-line) solid var(--ux-border); border-radius: var(--ui-radius-control); background: var(--ux-input-bg);
  }
  /* Ảnh thu nhỏ + sóng âm nằm dưới cùng của thanh timeline (videoEditor.js vẽ). */
  .vx-thumbs, .vx-wave { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .vx-wave { opacity: .75; }
  .vx-trim { position: absolute; top: 0; bottom: 0; width: 0; background: color-mix(in srgb, var(--ui-danger) 22%, transparent); pointer-events: none; }
  .vx-trim--start { left: 0; }
  .vx-trim--end { right: 0; }
  .vx-selection { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--ui-accent) 24%, transparent); border-inline: var(--dt-dimension-resizer-line) solid var(--ui-accent); pointer-events: none; }
  .vx-cuts { position: absolute; inset: 0; pointer-events: none; }
  .vx-cut-mark { position: absolute; top: 0; bottom: 0; width: calc(var(--dt-dimension-resizer-line) * 2); margin-left: calc(var(--dt-dimension-resizer-line) * -1); background: var(--ui-danger); }
  .vx-handle {
    position: absolute; top: calc(var(--ui-space-0-5) * -1); bottom: calc(var(--ui-space-0-5) * -1); width: var(--ui-space-2);
    border-radius: var(--ui-radius-sm); background: var(--ui-accent-solid); cursor: ew-resize;
  }
  .vx-handle--start { transform: translateX(0); }
  .vx-handle--end { transform: translateX(-100%); }
  .vx-playhead { position: absolute; top: calc(var(--ui-space-1) * -1); bottom: calc(var(--ui-space-1) * -1); width: calc(var(--dt-dimension-resizer-line) * 2); background: var(--ui-text-primary); pointer-events: none; }
  /* Chiều cao CỐ ĐỊNH theo số hàng (mặc định 5, cuộn khi nhiều hơn): thêm chú thích
     không được làm khung video co lại/nhảy chỗ (BA 2026-09-24). Số hàng do thanh kéo
     .vx-splitter đặt qua --vx-lane-rows (BA 2026-09-25). */
  .vx-lanes { display: flex; flex-direction: column; gap: var(--ui-space-0-5); flex: none; height: calc(var(--ui-size-sm) * var(--vx-lane-rows, 5) + var(--ui-space-0-5) * (var(--vx-lane-rows, 5) - 1)); overflow-y: scroll; scrollbar-gutter: stable; padding-right: var(--ui-space-0-5); }
  /* Menu chuột phải của trình sửa video: chung khung .antiscreenshot-context-menu với Art Editor. */
  .vx-context-colors { display: flex; flex-wrap: wrap; gap: var(--ui-space-1); }
  .vx-swatch-btn { display: inline-grid; place-items: center; }
  .vx-context-row { display: flex; flex-wrap: wrap; gap: var(--ui-space-1); padding: 0 var(--ui-space-2) var(--ui-space-1); }
  .antiscreenshot-context-menu .vx-chip { width: auto; min-height: 0; padding: var(--ui-space-0-5) var(--ui-space-2); border: var(--dt-dimension-resizer-line) solid var(--ux-border); border-radius: var(--ui-radius-full); justify-content: center; font-variant-numeric: tabular-nums; }
  .antiscreenshot-context-menu .vx-chip.is-active { background: var(--ui-accent-solid); border-color: transparent; color: var(--ui-text-on-accent); }
  .vx-lanes-empty { margin: auto; color: var(--ui-text-muted); font-size: var(--fs-body); }
  /* overflow: thanh chú thích/âm thanh tràn ngoài cửa sổ nhìn (timeline đang phóng) bị cắt. */
  .vx-lane { position: relative; flex: none; height: var(--ui-size-sm); overflow: hidden; }
  .vx-lane-bar {
    position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-1);
    min-width: var(--ui-space-4); overflow: hidden; padding: 0; cursor: grab; white-space: nowrap; touch-action: none; user-select: none;
    border-radius: var(--ui-radius-sm); background: color-mix(in srgb, var(--ui-accent) 18%, transparent); color: var(--ui-text-primary); font-size: var(--fs-micro);
  }
  .vx-lane-bar.is-active { background: var(--ui-accent-solid); color: var(--ui-text-on-accent); }
  .vx-lane-bar:not(.is-active):hover { background: color-mix(in srgb, var(--ui-accent) 32%, transparent); }
  /* Kéo dọc đổi lớp: hàng đang kéo nổi lên theo chuột, hàng đích có vạch nhấn. */
  .vx-lane.is-dragging { z-index: 1; }
  .vx-lane.is-dragging .vx-lane-bar { cursor: grabbing; box-shadow: var(--ux-shadow); }
  .vx-lane.is-drop-target { box-shadow: inset 0 0 0 var(--dt-dimension-resizer-line) var(--ui-accent); border-radius: var(--ui-radius-sm); }
  /* Tay nắm hai mép (đổi lúc hiện/ẩn): dải đậm + vạch giữa cho dễ thấy chỗ kéo. */
  .vx-lane-edge { position: relative; flex: none; align-self: stretch; width: var(--ui-space-2); cursor: ew-resize; background: color-mix(in srgb, currentColor 30%, transparent); }
  /* Nhãn bọc .vx-lane-label (co được) + mép phải dồn cuối: thanh ngắn không đẩy mép "end" ra ngoài vùng overflow. */
  .vx-lane-bar .vx-lane-edge:last-child { margin-left: auto; }
  .vx-lane-edge::after { content: ''; position: absolute; top: 25%; bottom: 25%; left: 50%; width: var(--dt-dimension-resizer-line); translate: -50% 0; background: currentColor; }
  /* Âm thanh (2026-09-24): nút tắt tiếng / chèn file ở thanh phát; đoạn tiếng gốc
     đã tắt = sọc trên dải video; file chèn = thanh màu xanh lá ở cuối dải chú thích. */
  .vx-audio-tools { display: inline-flex; align-items: center; gap: var(--ui-space-1); flex: none; }
  .vx-audio-tools .ui-btn[aria-pressed="true"] { color: var(--ui-danger); }
  /* Đang thu lời thoại: nút "Dừng thu" nổi hẳn (nền đỏ đặc, chữ trên nền đặc). */
  .vx-audio-tools .ui-btn.is-recording { background: var(--ui-danger); color: var(--ui-text-on-accent); }
  .vx-clip-panel { display: inline-flex; align-items: center; gap: var(--ui-space-1); min-width: 0; color: var(--ui-text-secondary); font-size: var(--fs-body); white-space: nowrap; }
  .vx-clip-panel label { display: inline-flex; align-items: center; gap: var(--ui-space-1); }
  .vx-clip-name { max-width: calc(var(--ui-space-12) * 3); overflow: hidden; text-overflow: ellipsis; color: var(--ui-text-primary); font-weight: var(--dt-typography-weight-semibold); }
  .vx-clip-volume { width: calc(var(--ui-space-12) * 2); accent-color: var(--ui-success); }
  /* Âm lượng tiếng gốc cạnh nút "Tiếng gốc"; hẹp thì ẩn (vẫn tắt/bật được bằng nút). */
  .vx-orig-volume { width: calc(var(--ui-space-12) * 1.5); accent-color: var(--ui-accent); }
  html:is([data-layout-mode="compact"], [data-layout-mode="tight"]) .vx-orig-volume { display: none; }
  .vx-clip-volume-value { min-width: 4ch; font-variant-numeric: tabular-nums; }
  .vx-mutes, .vx-speeds { position: absolute; inset: 0; pointer-events: none; }
  /* Tua nhanh: dải màu nhấn + nhãn ×N trên dải video; nút ×1/×2/×4/×8 trong cụm ngữ cảnh. */
  .vx-speed-mark {
    position: absolute; top: 0; bottom: 0; display: flex; align-items: flex-start; justify-content: center; overflow: hidden;
    background: color-mix(in srgb, var(--ui-accent) 20%, transparent); border-inline: var(--dt-dimension-resizer-line) solid var(--ui-accent);
    color: var(--ui-text-primary); font-size: var(--fs-micro); font-weight: var(--dt-typography-weight-semibold); font-variant-numeric: tabular-nums;
  }
  .vx-speed { display: inline-flex; align-items: center; gap: var(--ui-space-0-5); color: var(--ui-text-secondary); font-size: var(--fs-body); white-space: nowrap; }
  .vx-speed .ui-btn[aria-pressed="true"] { background: var(--ui-accent-solid); color: var(--ui-text-on-accent); }
  .vx-mute-mark {
    position: absolute; top: 0; bottom: 0;
    background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ui-warning) 45%, transparent) 0 var(--ui-space-1), transparent var(--ui-space-1) var(--ui-space-2));
    border-inline: var(--dt-dimension-resizer-line) solid var(--ui-warning);
  }
  .vx-lane-bar--audio { justify-content: flex-start; background: color-mix(in srgb, var(--ui-success) 22%, transparent); }
  .vx-lane-bar--audio:not(.is-active):hover { background: color-mix(in srgb, var(--ui-success) 36%, transparent); }
  .vx-lane-bar--audio.is-active { background: var(--ui-success); color: var(--ui-text-on-accent); }
  .vx-lane-bar--audio svg { flex: none; }
  .vx-lane-bar--zoom { justify-content: flex-start; background: color-mix(in srgb, var(--ui-accent) 22%, transparent); }
  .vx-lane-bar--zoom:not(.is-active):hover { background: color-mix(in srgb, var(--ui-accent) 36%, transparent); }
  .vx-lane-bar--zoom.is-active { background: var(--ui-accent-solid); color: var(--ui-text-on-accent); }
  .vx-lane-bar--zoom svg { flex: none; }
  .vx-zoom-panel { display: inline-flex; align-items: center; gap: var(--ui-space-1); color: var(--ui-text-secondary); font-size: var(--fs-body); white-space: nowrap; }
  .vx-lane-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* Đang xuất: phủ khung xem, có tiến độ và nút Hủy. */
  .vx-busy, .vx-gif, .vx-export-choice { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--ux-card) 82%, transparent); }
  /* Hộp tùy chọn Xuất GIF: phạm vi, chiều rộng, khung hình/giây + ước lượng. */
  .vx-gif-body { display: flex; flex-direction: column; gap: var(--ui-space-3); font-size: var(--fs-body); color: var(--ui-text-primary); }
  .vx-gif-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-3); }
  .vx-gif-row label { display: inline-flex; align-items: center; gap: var(--ui-space-1-5); }
  .vx-gif-row label:has(input:disabled) { color: var(--ui-text-muted); }
  .vx-gif-estimate { margin: 0; color: var(--ui-text-secondary); }
  /* Chọn kiểu xuất (chỉ hiện khi video CHỈ bị cắt): hai thẻ bấm được. */
  .vx-choice-body { display: flex; flex-direction: column; gap: var(--ui-space-2); }
  .vx-choice {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--ui-space-1); width: 100%;
    padding: var(--ui-space-3); border: var(--dt-dimension-resizer-line) solid var(--ux-border); border-radius: var(--ui-radius-control);
    background: transparent; color: var(--ui-text-primary); font: inherit; text-align: left; cursor: pointer;
  }
  .vx-choice:hover { background: var(--ui-hover); border-color: var(--ui-accent); }
  .vx-choice:focus-visible { outline: var(--dt-dimension-resizer-line) solid var(--ui-accent); outline-offset: var(--dt-dimension-resizer-line); }
  .vx-choice span { color: var(--ui-text-secondary); font-size: var(--fs-body); }
  /* Khung xuất = .ui-dialog chuẩn (bo, bóng elevation-3, đệm dialog); chỉ đặt bề rộng theo token. */
  .vx-export-dialog, .vx-gif-dialog, .vx-choice-dialog { width: min(100%, var(--ui-dialog-max-sm)); }
  .vx-export-body { display: grid; gap: var(--ui-space-2); }
  .vx-export-file { margin: 0; color: var(--ui-text-secondary); font-size: var(--fs-body); overflow-wrap: anywhere; }
  .vx-progress { width: 100%; height: var(--ui-space-1-5); border-radius: var(--ui-radius-full); background: var(--ux-input-bg); overflow: hidden; }
  .vx-progress-fill { width: 0; height: 100%; background: var(--ui-accent-solid); }
  .vx-busy-pct { font-variant-numeric: tabular-nums; color: var(--ui-text-secondary); font-size: var(--fs-body); }
  .ws-item-badge.antiscreenshot-video-badge { display: inline-flex; align-items: center; color: var(--ui-accent); }
  .antiscreenshot-capture-btn.is-recording { color: var(--ui-danger); background: color-mix(in srgb, var(--ui-danger) 12%, transparent); font-weight: var(--dt-typography-weight-semibold); }
  .antiscreenshot-capture-btn:disabled { cursor: default; color: var(--ui-text-muted); }
  /* Màn "Tất cả": lọc Tất cả / Ảnh chụp / Video + nhãn Video trên ô. */
  .antiscreenshot-library-kinds { display: inline-flex; align-items: center; gap: var(--ui-space-0-5); align-self: center; }
  .antiscreenshot-library-kinds .ui-btn.is-active { background: var(--ui-accent-solid); border-color: transparent; color: var(--ui-text-on-accent); }
  .antiscreenshot-tile-badges em.is-video { display: inline-flex; align-items: center; gap: var(--ui-space-0-5); background: var(--ui-accent-solid); color: var(--ui-text-on-accent); }
}

/* Bố cục kiểu Snagit (BA 2026-09-25): công cụ có nhãn nhỏ, bảng phải 2 tab. */
@layer modules {
  /* Nút công cụ: chỉ icon, không nhãn (BA 2026-09-26 "bỏ text, gọn bar cho rộng
     vùng chỉnh sửa") — đang chọn = nền accent nhạt + chữ accent (như nút "Viền"
     đang bật). Tooltip (title) vẫn giữ tên + phím tắt. */
  .antiscreenshot-toolbar .ui-btn.antiscreenshot-tool-btn {
    flex-direction: row;
    height: var(--ui-size-sm);
    min-height: var(--ui-size-sm);
    min-width: var(--ui-size-sm);
    padding: 0 var(--ui-space-1);
    /* Màu nghỉ/rê/đang chọn do .ui-btn--subtle + .ui-btn--toggle quyết định —
       đặt color ở đây (layer modules) từng nuốt màu accent của công cụ đang chọn. */
    font-weight: var(--fw-normal);
  }
  .antiscreenshot-toolbar .ui-btn.antiscreenshot-tool-btn svg {
    width: var(--ui-icon-sm);
    height: var(--ui-icon-sm);
  }
  .antiscreenshot-tool-label {
    display: none;
  }
  /* Ô màu đứng đúng chỗ icon của các nút khác. */
  .antiscreenshot-toolbar .antiscreenshot-tool-btn .antiscreenshot-swatch {
    width: var(--ui-icon-sm);
    height: var(--ui-icon-sm);
  }
  /* Họ công cụ: thân nút + ▾ hẹp liền kề, cùng một khối. */
  .antiscreenshot-tool-split {
    display: inline-flex;
    align-items: stretch;
  }
  /* ▾ rộng size.sm: thân nút liền kề nên không hưởng ngoại lệ khoảng cách của
     WCAG 2.5.8 — vùng bấm phải tự đủ 24×24 (trước 14×24). */
  .antiscreenshot-toolbar .ui-btn.antiscreenshot-tool-caret {
    height: auto;
    min-height: 0;
    width: var(--ui-size-sm);
    min-width: var(--ui-size-sm);
    padding: 0;
    color: var(--ui-text-muted);
  }
  .antiscreenshot-toolbar .ui-btn.antiscreenshot-tool-caret svg {
    width: var(--ui-space-2-5);
    height: var(--ui-space-2-5);
  }
  .antiscreenshot-toolbar .ui-btn.antiscreenshot-tool-caret:hover,
  .antiscreenshot-toolbar .ui-btn.antiscreenshot-tool-caret[aria-expanded="true"] {
    color: var(--ui-text-primary);
  }
  /* Thanh ảnh và thanh video (videoEditor gắn ra đây qua deps.mountToolbar) cùng
     một chỗ, cùng cỡ: hàng trên .antiscreenshot-body, trải hết bề ngang (BA 2026-09-27). */
  .antiscreenshot-body > .antiscreenshot-toolbar {
    padding-block: var(--ui-space-1);
  }
  /* Thanh công cụ gộp lên topbar (screenshot/toolbarDock.js, báo cáo UX 10/10/2026): một hàng
     duy nhất; khe trống thì không chiếm chỗ. Trong topbar: không nền/viền đáy riêng (topbar đã
     có), không xuống dòng, nút cao bằng nút header. */
  .antiscreenshot-topbar-toolbar-slot {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    height: 100%;
  }
  .antiscreenshot-topbar-toolbar-slot:empty { display: none; }
  /* Đang gộp: cụm "Art Editor / tên ảnh · cỡ" bên trái co theo nội dung, tên ảnh có trần —
     nhường bề ngang cho thanh công cụ (tên dài vẫn cắt "…", sửa tên bằng cách bấm vào). */
  #appHeader.has-docked-toolbar .topbar-left { flex: 0 1 auto; max-width: none; }
  /* Header là lưới 3 cột 1fr · auto · 1fr (responsive-layout.css) — cột trái chiếm nửa
     bề ngang dù chỉ có tên ảnh. Đang gộp: trái/giữa theo nội dung, phải (thanh công cụ +
     thu phóng) nhận phần còn lại. */
  #appHeader.has-docked-toolbar { grid-template-columns: minmax(0, auto) minmax(0, auto) minmax(0, 1fr); }
  #appHeader.has-docked-toolbar .topbar-right { justify-self: stretch; }
  #appHeader.has-docked-toolbar .antiscreenshot-title { flex: 0 1 auto; width: var(--dt-dimension-layout-240); }
  .antiscreenshot-toolbar.is-docked {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    flex-wrap: nowrap;
    padding: 0 var(--ui-space-2);
    border-bottom: 0;
    background: transparent;
  }
  .antiscreenshot-toolbar.is-docked :is(.antiscreenshot-toolbar-leading, .antiscreenshot-toolbar-trailing) { flex-wrap: nowrap; }
  .antiscreenshot-toolbar.is-docked .ui-btn {
    height: var(--ui-header-control-size);
    min-height: var(--ui-header-control-size);
  }
  .antiscreenshot-toolbar.is-docked .ui-btn.ui-btn--icon {
    width: var(--ui-header-control-size);
    min-width: var(--ui-header-control-size);
  }
  .antiscreenshot-body:not([data-context="image"]) > #antiScreenshotImageToolbar,
  .antiscreenshot-body:not([data-context="video"]) > .vx-toolbar {
    display: none;
  }
  /* Overlay "Tất cả" (Art Editor) chỉ phủ main-row (BA 2026-09-27) nên thanh công cụ ảnh
     phía trên không tự ẩn theo — ẩn riêng khi overlay đang mở, dù đang có ảnh mở sẵn. */
  .antiscreenshot-body:has(#antiScreenshotAllOverlay:not(.hidden)) > .antiscreenshot-toolbar {
    display: none;
  }

  /* Bảng phải: 2 tab thay tiêu đề. Nhãn ngữ cảnh (Trang/Hình…) chỉ ở tab Thuộc tính. */
  .antiscreenshot-inspector-header {
    gap: var(--ui-space-2);
  }
  .antiscreenshot-panel-tabs {
    flex: 1 1 auto;
    min-width: 0;
  }
  /* Nhãn ngữ cảnh (Trang/Hình vẽ…) đứng cạnh 2 tab trông như tab thứ ba và ép tab
     Mẫu hình tràn (BA 2026-09-28): ẩn khỏi mắt, giữ cho trình đọc màn hình. */
  .antiscreenshot-inspector-header .antiscreenshot-inspector-badge {
    position: absolute;
    width: var(--ui-resizer-line);
    height: var(--ui-resizer-line);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .antiscreenshot-panel-tabs .ui-segmented__item {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Chưa mở ảnh/video: không có gì để chỉnh hay thả → ẩn hẳn bảng. */
  .antiscreenshot-col-inspector[data-context="empty"] {
    display: none;
  }
  .antiscreenshot-inspector-library {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .antiscreenshot-library-search-row {
    flex: 0 0 auto;
    padding: var(--ui-space-2);
    border-bottom: var(--ui-resizer-line) solid var(--ux-divider);
  }
  .antiscreenshot-library-search-row .antiscreenshot-library-search {
    width: 100%;
  }
  .antiscreenshot-inspector-library #screenshotLibraryPanel.antiscreenshot-col-library {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    border-left: none;
  }
}

/* Tùy chỉnh thanh công cụ bằng kéo thả (BA 2026-09-25, như Customize Toolbar của Snagit). */
@layer modules {
  .antiscreenshot-toolbar.is-customizing [data-toolbar-slot] {
    cursor: grab;
    border-radius: var(--ui-radius-control);
    outline: var(--ui-resizer-line) dashed var(--ux-divider);
    outline-offset: calc(var(--ui-resizer-line) * -1);
  }
  /* Ô đang kéo: viền nét đứt đổi sang accent (ảnh kéo do trình duyệt vẽ). */
  .antiscreenshot-toolbar.is-customizing [data-toolbar-slot].is-dragging {
    outline-color: var(--ui-accent);
    background: var(--ux-hover);
  }
  /* Vạch chỗ thả: một nét accent ở mép trái/phải ô đích. */
  .antiscreenshot-toolbar [data-toolbar-slot].is-toolbar-drop-before {
    box-shadow: inset var(--ui-focus-ring-width) 0 0 var(--ui-accent);
  }
  .antiscreenshot-toolbar [data-toolbar-slot].is-toolbar-drop-after {
    box-shadow: inset calc(var(--ui-focus-ring-width) * -1) 0 0 var(--ui-accent);
  }
  /* Thanh trống vẫn nhận thả được. */
  .antiscreenshot-tool-group.is-empty {
    min-width: var(--ui-space-12);
    min-height: var(--ui-control-h-standard);
  }
  .antiscreenshot-toolbar-customizer {
    position: fixed;
    z-index: var(--ui-layer-popover);
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
    padding: var(--ui-space-3);
    border: var(--ui-resizer-line) solid var(--ux-border);
    border-radius: var(--ui-radius-panel);
    background: var(--ux-overlay);
    box-shadow: var(--ui-elevation-4);
    color: var(--ui-text-primary);
  }
  .antiscreenshot-toolbar-customizer-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--ui-space-1) var(--ui-space-2);
    font-size: var(--fs-body);
  }
  .antiscreenshot-toolbar-customizer-head span {
    color: var(--ui-text-secondary);
  }
  .antiscreenshot-toolbar-customizer-palette {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ui-space-1);
    min-height: calc(var(--ui-control-h-standard) + var(--ui-space-4));
    padding: var(--ui-space-2);
    border: var(--ui-resizer-line) dashed var(--ux-divider);
    border-radius: var(--ui-radius-control);
    background: var(--ux-sunken);
  }
  .antiscreenshot-toolbar-customizer-palette.is-drop-target {
    border-color: var(--ui-accent);
  }
  .antiscreenshot-toolbar-customizer-palette .ui-btn.antiscreenshot-tool-btn {
    flex-direction: column;
    gap: var(--ui-space-0-5);
    height: auto;
    min-height: var(--ui-control-h-standard);
    min-width: var(--ui-space-12);
    padding: var(--ui-space-1);
    color: var(--ui-text-secondary);
    font-weight: var(--fw-normal);
    cursor: grab;
  }
  .antiscreenshot-toolbar-customizer-palette .ui-btn.antiscreenshot-tool-btn svg {
    width: var(--ui-icon-sm);
    height: var(--ui-icon-sm);
  }
  .antiscreenshot-toolbar-customizer-empty {
    margin: auto 0;
    color: var(--ui-text-muted);
    font-size: var(--fs-body);
  }
  .antiscreenshot-toolbar-customizer-foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--ui-space-2);
  }
}

/* Khay: cụm tab Ảnh/Video bên trái và cụm thao tác Tất cả/Ẩn hiện bên phải đều xếp TRÊN-DƯỚI (BA 2026-09-26). */
@layer modules {
  .antiscreenshot-tray .ui-segmented:is(.antiscreenshot-kind-tabs, .antiscreenshot-tray-actions) {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    max-height: none;
  }
  .antiscreenshot-tray :is(.antiscreenshot-kind-tabs, .antiscreenshot-tray-actions) .ui-segmented__item {
    justify-content: flex-start;
    gap: var(--ui-space-1-5);
    height: var(--ui-control-h-standard);
    min-height: var(--ui-control-h-standard);
    max-height: var(--ui-control-h-standard);
    min-width: calc(var(--ui-space-12) * 2);
    padding: 0 var(--ui-space-2-5);
  }
  .antiscreenshot-tray .antiscreenshot-kind-tabs .ui-segmented__item {
    justify-content: space-between;
    gap: var(--ui-space-3);
  }
  .antiscreenshot-tray.is-ws-collapsed .antiscreenshot-tray-actions {
    background-color: var(--ux-raised);
    box-shadow: var(--ui-elevation-1);
    border-radius: var(--ui-radius-control);
  }
  .antiscreenshot-tray.is-ws-collapsed #antiScreenshotAllBtn {
    display: none;
  }
  .antiscreenshot-tray-action-btn:active {
    transform: none;
  }
  #antiScreenshotSidebarToggle[aria-pressed="true"] [data-tray-label="collapsed"],
  #antiScreenshotSidebarToggle[aria-pressed="false"] [data-tray-label="expanded"] {
    display: none;
  }
  .antiscreenshot-tray.is-ws-collapsed .antiscreenshot-tray-end {
    border-left: var(--ui-resizer-line) solid transparent;
  }
}

/* Mục Trang của bảng Thuộc tính (BA 2026-09-25 "nút chưa chuẩn token"): trước đây 5 ô giá trị
   dùng 4 kiểu (cao 32/24, đậm 400/500/600, nền đặc/trong) và rộng lởm chởm. Nay: nhãn một
   cột cố định, ô giá trị cùng MỘT kiểu ô nhập (cao sm, chữ caption đậm vừa, nền/viền ô nhập,
   bo control), rộng bằng nhau, thẳng mép trái. */
@layer modules {
  #inspectorSectionPage .antiscreenshot-inspector-prop-row {
    display: grid;
    grid-template-columns: calc(var(--ui-space-12) * 2) minmax(0, 1fr);
    align-items: center;
    gap: var(--ui-space-2);
  }
  #inspectorSectionPage :is(#inspectorPageDimBtn, #inspectorPageBgBtn, #inspectorPageBgImgBtn, #inspectorPageBorderBtn, #inspectorPageExportSizeBtn) {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--ui-space-1-5);
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: var(--ui-size-sm);
    min-height: var(--ui-size-sm);
    max-height: var(--ui-size-sm);
    padding: 0 var(--ui-space-2);
    /* Ô giá trị nền mờ, không viền (báo cáo UX 10/10/2026 §4.4 — kiểu Figma/Snagit). */
    border: var(--ui-resizer-line) solid transparent;
    border-radius: var(--ui-radius-control);
    background: color-mix(in srgb, var(--ui-text-primary) 6%, transparent);
    box-shadow: none;
    color: var(--ui-text-primary);
    font-size: var(--fs-caption);
    font-weight: var(--fw-medium);
    line-height: var(--lh-none);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #inspectorSectionPage :is(#inspectorPageDimBtn, #inspectorPageBgBtn, #inspectorPageBgImgBtn, #inspectorPageBorderBtn, #inspectorPageExportSizeBtn):hover {
    border-color: transparent;
    background: color-mix(in srgb, var(--ui-text-primary) 10%, transparent);
  }
  #inspectorSectionPage #inspectorPageDimBtn .token-select-caret {
    margin-left: auto;
  }
  #inspectorSectionPage :is(.antiscreenshot-inspector-page-dim-group, .antiscreenshot-inspector-bg-image-group) {
    justify-content: flex-start;
    min-width: 0;
  }
  /* Cặp nút bật/tắt (căn lề, lưới) giữ bề rộng tự nhiên, đứng đầu cột giá trị. */
  #inspectorSectionPage .antiscreenshot-fmt-btn-group {
    justify-self: start;
  }
}

/* Trình sửa video vào khung chung (BA 2026-09-25): thanh công cụ có nhãn như ảnh, một nút
   Màu, "Xuất ▾"; hàng nút phát chỉ còn phát/giờ/cắt; âm thanh, hiệu ứng và đối tượng đang
   chọn ở tab Thuộc tính của bảng phải (.vx-side). */
@layer modules {
  .vx-toolbar { flex-wrap: nowrap; }
  .vx-toolbar .antiscreenshot-toolbar-leading { flex-wrap: nowrap; }
  .vx-toolbar .antiscreenshot-tool-group:last-child { padding-right: 0; border-right: 0; }
  .vx-color-dot { flex: none; }
  .vx-export-split { display: inline-flex; align-items: stretch; gap: var(--dt-dimension-resizer-line); }
  .vx-export-split .ui-btn.vx-export-caret { min-width: 0; padding: 0 var(--ui-space-1); }
  .vx-color-grid { display: grid; grid-template-columns: repeat(4, var(--ui-space-6)); gap: var(--ui-space-1-5); padding: var(--ui-space-1); }
  .vx-color-grid .vx-swatch { width: var(--ui-space-6); height: var(--ui-space-6); }
  .vx-menu { position: fixed; z-index: var(--ui-layer-popover); }
  .vx-cut-tools { display: inline-flex; align-items: center; gap: var(--ui-space-1); flex: none; }

  .antiscreenshot-inspector-video { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .vx-side { display: flex; flex-direction: column; }
  .vx-side-section {
    display: flex; flex-direction: column; gap: var(--ui-space-2);
    padding: var(--ui-space-3);
    border-bottom: var(--ui-resizer-line) solid var(--ux-divider);
  }
  .vx-side-title { margin: 0; color: var(--ui-text-primary); font-size: var(--fs-caption); font-weight: var(--fw-semibold); }
  .vx-side-hint { margin: 0; color: var(--ui-text-muted); font-size: var(--fs-caption); line-height: var(--lh-normal); }
  .vx-side-context:has(.vx-context > :not(.hidden)) .vx-side-hint { display: none; }
  .vx-side-context:not(:has(.vx-context > :not(.hidden))) .vx-context { display: none; }
  /* Trong bảng phải mọi cụm xếp DỌC, nút thẳng hàng trái, không cắt chữ. */
  .vx-side :is(.vx-context, .vx-audio-tools, .vx-side-row) {
    display: flex; flex-direction: column; align-items: stretch; gap: var(--ui-space-1-5); margin: 0; min-width: 0;
  }
  .vx-side :is(.vx-speed, .vx-zoom-panel, .vx-clip-panel, .vx-ann-time) {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-1-5); white-space: normal;
  }
  .vx-side :is(.vx-audio-tools, .vx-side-row) .ui-btn { justify-content: flex-start; }
  .vx-side .vx-orig-volume { width: 100%; }
  .vx-side .vx-clip-volume { width: calc(var(--ui-space-12) * 2); }
  .vx-side :is(.vx-zoom-name, .vx-clip-name, .vx-ann-name) { flex-basis: 100%; }
}

/* Kiểu nhanh (Quick Styles) đầu tab Thuộc tính: 8 mẫu nét màu + độ dày theo token. */
@layer modules {
  .antiscreenshot-quick-section {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
    padding: var(--ui-space-2-5) var(--ui-space-3);
    border-bottom: var(--ui-resizer-line) solid var(--ux-divider);
  }
  .antiscreenshot-quick-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-2);
  }
  .antiscreenshot-quick-title {
    color: var(--ui-text-primary);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
  }
  .antiscreenshot-col-inspector .ui-btn.antiscreenshot-stroke-field {
    gap: var(--ui-space-1-5);
    padding: 0 var(--ui-space-2);
    border: var(--ui-resizer-line) solid var(--ux-input-border);
    background: var(--ux-input-bg);
    color: var(--ui-text-primary);
    font-weight: var(--fw-medium);
    font-variant-numeric: tabular-nums;
  }
  .antiscreenshot-quick-styles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ui-space-1-5);
  }
  /* Ô kiểu nhanh là .ui-btn phụ bật/tắt (--toggle: đang dùng = nền nhấn 12%). */
  .antiscreenshot-quick-style {
    padding-inline: var(--ui-space-2);
  }
  .antiscreenshot-quick-style-line {
    width: 100%;
    height: var(--qs-width);
    border-radius: var(--ui-radius-full);
    background: var(--qs-color);
    /* Viền mảnh để mẫu trắng/đen vẫn thấy trên cả nền sáng lẫn tối. */
    box-shadow: 0 0 0 var(--ui-resizer-line) var(--ux-border);
  }
  /* Ô giá trị trong bảng thuộc tính (Kích thước, Màu nền, Hình nền, Viền, Cỡ xuất…): nền mờ,
     KHÔNG viền — kiểu Figma/Snagit; nhóm đã có tiêu đề + đường kẻ phân tách nên viền từng
     ô là lớp thừa (báo cáo UX 10/10/2026 §4.4, màn nhiều viền nhất app). Chỉ trong bảng
     thuộc tính; nút phụ ở nơi khác giữ nguyên. Focus bàn phím vẫn có vòng nhấn của .ui-btn. */
  .antiscreenshot-inspector-prop-row :is(.ui-btn--secondary, .ui-select, .token-select-trigger) {
    border-color: transparent;
  }
}

/* ==========================================================================
   ART EDITOR — BIẾN THỂ FLAT (GĐ5.6, docs/PLAN-FLAT-SURFACE-GD5.md)
   Chỉ khi html[data-surface="flat"]. (Trang Art Editor vốn đã không đổ bóng —
   --elev-4 ở .antiscreenshot-page bị luật sau đè từ trước — nên không cần luật.)
   · Lớp nổi tự chế của Art Editor (menu chuột phải, menu con, thanh cắt vùng,
     banner đặt đối tượng) giữ MỘT bóng mềm như mọi lớp nổi (BA Q1) thay vì bóng
     nặng --elev-4. .antiscreenshot-popover đã theo khuôn popover chung (GĐ5.1).
   · GIỮ nguyên: khung ảnh/canvas, thẻ tài sản, ảnh thu nhỏ trong khay — đối
     tượng nội dung (BA Q3); segmented "Ảnh | Video" là control chuẩn.
   ========================================================================== */
@layer modules {
  html[data-surface="flat"] :is(.antiscreenshot-context-menu, .antiscreenshot-flyout-submenu, .antiscreenshot-region-crop-actions, .antiscreenshot-placement-banner) {
    box-shadow: var(--ui-flat-overlay-shadow);
  }
}

/* Khai báo từng là !important trong @layer legacy — chuyển sang layer cuối `overrides`
   (thắng mọi khai báo thường ở mọi layer, đúng như cờ important cũ), cùng selector, cùng
   thứ tự, cùng ngữ cảnh @media. Sinh tự động 01/10/2026 (KE-HOACH-DAT-CHUAN-QUOC-TE-UI GĐ B–E);
   thuộc tính ẩn/hiện/định vị giữ cờ important vì JS gắn nội tuyến. */
@layer overrides {
  .antiscreenshot-canvas-scroll.is-panning-mode, .antiscreenshot-canvas-scroll.is-panning-mode * { cursor: grab; }
  .antiscreenshot-canvas-scroll.is-panning-active, .antiscreenshot-canvas-scroll.is-panning-active * { cursor: grabbing; }
  .antiscreenshot-canvas-stage.is-cutout .upper-canvas, .antiscreenshot-canvas-stage.is-crop-tool .upper-canvas { cursor: crosshair; }
}


/* Thoáng–Gọn Đợt 3 (BA 10/10/2026) — trình sửa video nhường chỗ cho khung xem:
   - Làn chú thích trống: giữ chiều cao (BA 24–25/09: thêm chú thích không làm khung nhảy,
     số hàng do thanh kéo) nhưng bỏ thanh cuộn + mũi tên khi chưa có gì để cuộn.
   - Khay ảnh/video thành dải mảnh: thẻ nhỏ chỉ ảnh, tab Ảnh/Video và Tất cả/Ẩn-hiện xếp
     ngang cỡ sm. Ẩn hẳn vẫn bằng nút Ẩn/hiện hoặc Ctrl+\ như cũ. */
@layer modules {
  .vx-lanes:has(> .vx-lanes-empty) { overflow-y: hidden; }
  .antiscreenshot-body[data-context="video"] .antiscreenshot-tray {
    --as-tray-card-w: calc(var(--ui-space-12) * 1.5);
  }
  .antiscreenshot-body[data-context="video"] .antiscreenshot-tray .ws-list--cards .ws-item-body { display: none; }
  .antiscreenshot-body[data-context="video"] .antiscreenshot-tray :is(.antiscreenshot-tray-head, .antiscreenshot-tray-end) {
    padding-block: var(--ui-space-1);
  }
  .antiscreenshot-body[data-context="video"] .antiscreenshot-tray .ui-segmented:is(.antiscreenshot-kind-tabs, .antiscreenshot-tray-actions) {
    flex-direction: row;
  }
  .antiscreenshot-body[data-context="video"] .antiscreenshot-tray :is(.antiscreenshot-kind-tabs, .antiscreenshot-tray-actions) .ui-segmented__item {
    height: var(--ui-size-sm);
    min-height: var(--ui-size-sm);
    max-height: var(--ui-size-sm);
    min-width: 0;
  }
}