@layer legacy {
/* ---------- Appearance & Setting Controls ---------- */
.setting-select {
  flex: 0 0 auto; width: var(--dt-dimension-layout-144); height: var(--ui-size-md); 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-caption); font-weight: var(--fw-semibold); cursor: pointer; outline: none;
  transition: border-color var(--ui-duration-fast) var(--ui-ease), box-shadow var(--ui-duration-fast) var(--ui-ease);
}
.setting-select:focus { border-color: var(--ux-control-border-active); box-shadow: var(--ui-control-ring); }

.setting-number {
  flex: 0 0 auto; width: var(--dt-dimension-layout-56); height: var(--ui-size-md); 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);
  text-align: center; font-size: var(--fs-caption); font-weight: var(--fw-semibold); outline: none;
  transition: border-color var(--ui-duration-fast) var(--ui-ease), box-shadow var(--ui-duration-fast) var(--ui-ease);
}
.setting-number:focus { border-color: var(--ux-control-border-active); box-shadow: var(--ui-control-ring); }

.setting-unit-control {
  flex: 0 0 auto; height: var(--ui-size-md); padding-right: var(--ui-space-2); display: inline-flex; align-items: center; gap: 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-muted);
  font-size: var(--fs-caption); font-weight: var(--fw-semibold);
  transition: border-color var(--ui-duration-fast) var(--ui-ease), box-shadow var(--ui-duration-fast) var(--ui-ease);
}
.setting-unit-control .setting-number { width: var(--dt-dimension-layout-48); height: 100%; border: 0; background: transparent; box-shadow: none; }
.setting-unit-control:focus-within { border-color: var(--ux-control-border-active); box-shadow: var(--ui-control-ring); }


.setting-note {
  margin-top: var(--ui-space-1); padding: var(--ui-space-1) var(--ui-space-2); border-radius: var(--ui-radius-control);
  background: var(--ui-warning-bg); color: var(--ui-warning); font-size: var(--fs-caption); line-height: var(--lh-normal);
}
.setting-note.is-error { background: var(--ui-danger-bg); color: var(--ui-danger); }

#transparencyRelaunchNote,
#googleSetupRow { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-2); }

.note-btn {
  flex: 0 0 auto; height: var(--ui-control-h-compact); padding: 0 var(--ui-space-2); border-radius: var(--ui-radius-control); cursor: pointer;
  border: var(--ui-stroke-thin) solid var(--ui-warning-line); background: light-dark(var(--ux-raised), var(--ui-warning-bg)); color: var(--ui-warning); font-size: var(--fs-caption); font-weight: var(--fw-semibold);
  transition: background var(--ui-duration-fast) var(--ui-ease); border-color: var(--ui-warning-line); }
.note-btn:hover { background: light-dark(var(--ui-warning-bg), color-mix(in srgb, var(--ui-warning-bg) 82%, var(--ui-warning))); }

.google-setup-copy { min-width: 0; display: flex; flex-direction: column; gap: var(--ui-space-0-5); }
.google-setup-copy strong { font-size: var(--fs-caption); }
.setting-note-actions { flex: 0 0 auto; display: flex; gap: var(--ui-space-1); }


/* ---------- Profile Tokens ---------- */
.profile-avatar {
  flex: 0 0 auto; width: var(--ui-control-h-standard); height: var(--ui-control-h-standard); border-radius: var(--ui-radius-full); overflow: hidden;
  display: grid; place-items: center; background: var(--ui-accent-solid); color: var(--ui-text-on-accent);
  font-size: var(--fs-body); font-weight: var(--fw-semibold); letter-spacing: .3px;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: var(--ui-space-0-5); }
.profile-name {
  font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--ui-text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profile-state {
  font-size: var(--fs-caption); color: var(--ui-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.profile-state.linked { color: var(--ui-success); }
.profile-hero { display: flex; align-items: center; gap: var(--ui-space-3); padding: var(--ui-space-1) 0; }
.profile-hero-copy { display: flex; flex-direction: column; gap: var(--ui-space-0-5); }
.profile-hero-email { margin-bottom: var(--ui-space-1); }

.text-input {
  width: var(--dt-component-field-compact-width); min-height: var(--ui-size-md); height: var(--ui-size-md); 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); outline: none;
  transition: border-color var(--ui-duration-fast) var(--ui-ease), box-shadow var(--ui-duration-fast) var(--ui-ease);
}
.text-input:focus { border-color: var(--ux-control-border-active); box-shadow: var(--ui-control-ring); caret-color: var(--ui-accent); }
.text-input::placeholder { color: var(--ui-text-muted); }

.btn-google {
  margin-right: auto;
  transition: background var(--ui-duration-fast) var(--ui-ease), border-color var(--ui-duration-fast) var(--ui-ease);
}
.btn-google:disabled { opacity: .55; cursor: not-allowed; }
.google-mark {
  width: var(--dt-dimension-icon-header); height: var(--dt-dimension-icon-header); border-radius: var(--ui-radius-full); display: grid; place-items: center;
  background: light-dark(var(--ux-raised), rgb(var(--ui-surface-shell-rgb))); border: var(--ui-stroke-thin) solid light-dark(var(--ux-border), var(--stroke));
}
.btn-outlook {
  margin-right: auto;
  transition: background var(--ui-duration-fast) var(--ui-ease), border-color var(--ui-duration-fast) var(--ui-ease);
}
.btn-outlook:disabled { opacity: .55; cursor: not-allowed; }
.outlook-mark {
  line-height: var(--lh-none);
  color: light-dark(currentcolor, var(--ui-brand-outlook));
}
.settings-profile-actions .btn-outlook { margin: 0; }

/* ---------- Settings workspace (Authentic Fluent / Liquid Glass Design) ---------- */
.settings-page {
  position: relative;
  z-index: 1;
  flex: 1 1 auto; min-height: 0; height: calc(100vh - var(--dt-dimension-layout-56)); display: flex; flex-direction: column; padding: 0; margin: var(--ui-space-1-5) var(--ui-space-3) var(--ui-space-2-5);
  color: var(--ui-text-primary); background: light-dark(var(--ux-base), var(--ux-panel));
  border-radius: var(--ui-radius-panel); border: var(--ui-stroke-thin) solid var(--stroke); overflow: hidden; border-color: light-dark(var(--stroke), rgba(var(--ui-white-rgb), 0.09)); }
/* Không backdrop-filter cho cả tấm (xem khối Glass trong styles.css). */



/* .settings-header đã bỏ (BA 10/10/2026): tên mục + ? + "Đã lưu" nằm trên topbar. */
.topbar-actions-settings { display: flex; align-items: center; gap: var(--ui-space-2); }
.settings-saved { display: flex; align-items: center; gap: var(--ui-space-1); color: light-dark(var(--ui-text-secondary), var(--ui-text-muted)); font-size: var(--fs-caption); font-weight: var(--fw-semibold); }
.settings-saved i { width: 6px; height: 6px; border-radius: var(--ui-radius-circle); background: var(--ui-success); box-shadow: 0 0 0 2.5px rgba(var(--ui-success-rgb), .2); } /* audit-keep: quầng sáng màu trạng thái (glow), không phải bậc độ nổi */

.settings-layout {
  flex: 1 1 auto; min-height: 0; height: calc(100% - var(--ui-space-12));
  /* Cột trái mở rộng theo token sidebarWidth để hiển thị đầy đủ văn bản nhãn menu không bị tràn ellipsis */
  display: grid; grid-template-columns: calc(var(--dt-component-settings-sidebar-width, 220px)) minmax(0, 1fr);
  overflow: hidden;
}
/* Nền + viền do .ux-pane lo (ui-foundation.css). Trước GĐ2 sidebar này ghim
   #f8f9fa — xám LẠNH, lạc hẳn tông khỏi canvas ivory ấm của app — và có thêm
   một bản fork riêng cho chế độ Tối. Cả hai đều đã bỏ: chênh lệch sáng/tối
   nằm trong token, không viết lại ở tầng component (quy tắc R4). */
.settings-sidebar {
  min-width: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; padding: var(--ui-space-2-5) var(--ui-space-2) var(--ui-space-2-5);
  border-right: var(--ui-stroke-thin) solid var(--ux-divider);
  overflow: hidden;
}

.settings-sidebar-label { margin: 0 var(--ui-space-2) var(--ui-space-1-5); color: var(--ui-text-secondary); font-size: var(--fs-caption); font-weight: var(--fw-semibold); }
/* Khe giữa hàng do hợp đồng nav (margin --ui-nav-item-gap, ui-components.css) — không cộng thêm flex gap. */
.settings-nav { display: flex; flex-direction: column; gap: 0; }
.settings-nav-item {
  position: relative; width: 100%; min-height: calc(var(--ui-control-h-standard) + var(--ui-space-2)); padding: 0 var(--ui-space-2); display: grid;
  /* Cột icon/chữ như cây Notebook (BA 13/10/2026): ô icon 16 + khe space-1 → chữ ở đệm + 20. */
  grid-template-columns: var(--ui-icon-control) minmax(0, 1fr); align-items: center; gap: var(--ui-space-1);
  border: var(--ui-stroke-thin) solid transparent; border-radius: var(--ui-radius-control); background: transparent; color: var(--ui-text-secondary);
  text-align: left; cursor: pointer; transition-property: var(--tr-ui); transition-timing-function: var(--ui-ease); transition-duration: var(--ui-duration-standard);
}
.settings-nav-item:hover { background: var(--ux-hover); color: var(--ui-text-primary); }
.settings-nav-item:focus-visible { outline: var(--ui-stroke-thick) solid var(--ui-accent); outline-offset: var(--ui-stroke-thin); }
.settings-nav-item.active {
  border-color: var(--ux-border); background: var(--ux-raised); color: var(--ui-accent);
  box-shadow: var(--elev-1);
}
.settings-nav-item.active::before {
  content: ""; position: absolute; left: calc(-1 * var(--ui-space-0-5)); top: var(--ui-space-2); bottom: var(--ui-space-2); width: var(--ui-nav-indicator-w);
  border-radius: var(--ui-radius-xs); background: var(--ui-accent);
}
.settings-nav-icon {
  /* Trước đây hộp đứng yên 22x22 trong khi glyph "Aa" bên trong dùng --fs-xs
     (có nhân --font-scale) — ở 200% chữ 22px không lọt vừa hộp 22px, tràn đè
     lên nhãn module kế bên. Hộp phải nhân cùng hệ số với chữ nó chứa. */
  width: var(--ui-icon-control); height: var(--ui-icon-control); display: grid; place-items: center; border-radius: var(--ui-radius-control);
  background: transparent; color: var(--ui-text-secondary); font-family: inherit;
  font-size: var(--fs-caption); font-weight: var(--fw-semibold);
}
/* Glyph trần như cây Notebook: mục đang chọn đọc bằng nền dòng + màu nhấn của glyph. */
.settings-nav-item.active .settings-nav-icon { background: transparent; color: var(--ui-accent); }
/* Riêng mục "Ủng hộ phát triển": trái tim đỏ đặc ở mọi trạng thái (BA 28/09). */
.settings-nav-item[data-settings-target="donate"] .settings-nav-icon { color: var(--ui-danger); }
.settings-nav-item[data-settings-target="donate"] .settings-nav-icon svg { fill: currentColor; }
.settings-nav-copy { min-width: 0; display: flex; flex-direction: column; }
.settings-nav-copy strong { overflow: hidden; color: inherit; font-size: var(--fs-body); font-weight: var(--fw-semibold); text-overflow: ellipsis; white-space: nowrap; }
.settings-nav-copy small { display: none; }
/* Tìm trong Cài đặt (settingsMenuSearch.js): chữ khớp tô cặp màu cảnh báo (menu = <mark>,
   nội dung = ::highlight); mục chỉ khớp ở mô tả thì hiện dòng mô tả, khớp ở nội dung thì
   hiện dòng trích .settings-nav-snippet trong lúc lọc. */
.settings-nav-hit { border-radius: var(--ui-radius-xs); background-color: var(--ui-warning-bg); color: var(--ui-warning); font-weight: var(--fw-semibold); }
.settings-nav-item.is-caption-hit .settings-nav-copy small { display: block; overflow: hidden; color: var(--ui-text-secondary); font-size: var(--fs-caption); text-overflow: ellipsis; white-space: nowrap; }
.settings-nav-snippet { display: block; overflow: hidden; color: var(--ui-text-secondary); font-size: var(--fs-caption); text-overflow: ellipsis; white-space: nowrap; }
::highlight(settings-find) { background-color: var(--ui-warning-bg); color: var(--ui-warning); }
.settings-nav-empty { margin: 0; padding: var(--ui-space-2) var(--ui-space-3); color: var(--ui-text-secondary); font-size: var(--fs-caption); }
.settings-search-input { flex: 0 1 var(--dt-dimension-layout-240); width: var(--dt-dimension-layout-240); min-width: 0; }

/* Dáng (cao 2 dòng, bo, nền rê) theo MỤC ĐIỀU HƯỚNG CỘT CON (ui-components.css). */
.settings-account-shortcut {
  width: 100%; margin-top: auto; display: flex; align-items: center; gap: var(--ui-space-2);
  color: var(--ui-text-primary); text-align: left; cursor: pointer;
}
.settings-account-shortcut .profile-avatar { width: var(--ui-size-sm); height: var(--ui-size-sm); font-size: var(--fs-micro); }
.settings-account-shortcut .profile-name { font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.settings-account-shortcut .profile-state { font-size: var(--fs-caption); color: light-dark(var(--ui-text-secondary), var(--ui-text-muted)); }

/* Vùng nội dung Settings là bậc L2 base, không phải L3 raised: các .settings-card
   bên trong mới là bậc nổi. Trước GĐ1 cả hai cùng trắng ở chế độ Sáng nên thẻ
   chỉ còn nhìn thấy nhờ viền, còn ở chế độ Tối nền này (32,33,36) lại TỐI hơn
   trang chứa nó. Một token cho cả hai chế độ, không fork theo data-mode. */
/* Nền do .ux-canvas lo — vùng nội dung Settings là L2 base, các .settings-card
   bên trong mới là L3 raised. */
.settings-main { min-width: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; overflow: hidden; }

.settings-scroll {
  flex: 1 1 auto; min-height: 0; height: 100%; overflow-y: auto;
  padding: var(--ui-space-3) var(--ui-space-4) var(--ui-space-4); scroll-behavior: smooth;
  max-width: var(--dt-dimension-layout-1120); margin: 0 auto; width: 100%;
}

.settings-section {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-space-3);
  align-items: start;
  animation: settings-section-in var(--ui-duration-fast) var(--motion-standard) both;
  will-change: transform, opacity;
}
.settings-card-full {
  grid-column: 1 / -1;
}
@media (max-width: 860px) {
  .settings-section {
    grid-template-columns: 1fr;
  }
}
html[data-layout-mode="compact"] .settings-section,
html[data-layout-mode="tight"] .settings-section {
  grid-template-columns: 1fr;
}
@keyframes settings-section-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* NGUỒN DUY NHẤT cho thẻ Cài đặt — lớp override !important cuối styles.css đã gộp
   vào đây (2026-09). Thẻ = L3 raised trên nền L2 base (.ux-canvas), tách nhau
   bằng viền + đổ bóng nhẹ, KHÔNG elev-3 nặng, KHÔNG "hộp trong hộp". */
.settings-card {
  display: flex; flex-direction: column; gap: var(--ui-space-1);
  overflow: hidden;
  border: var(--ui-stroke-thin) solid var(--ux-border);
  border-radius: var(--ui-radius-panel);
  background: var(--ux-raised);
  box-shadow: var(--elev-1);
}
.settings-card-head {
  display: flex; align-items: center; gap: var(--ui-space-2);
  padding: var(--ui-space-2) var(--ui-space-3) var(--ui-space-1);
  background: transparent;
}
.settings-card-head h3 {
  margin: 0; color: var(--ui-text-primary);
  font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: var(--lh-tight);
  text-transform: none; letter-spacing: 0;
}
.settings-card-head p { display: none; }

.settings-card-body {
  display: flex; flex-direction: column; gap: var(--ui-space-1);
  padding: 0 var(--ui-space-2) var(--ui-space-2);
}

/* Brand Header Badges for Tools Tab */

/* Settings List Rows with Fluid Hover */
.settings-list > * + * { border-top: none; }
/* Danh sách phím tắt từng module trên thanh điều hướng — thụt vào và có vạch
   trái để đọc ra ngay đây là các mục con của dòng "Phím tắt mở ứng dụng", chứ
   không phải một loạt tuỳ chọn ngang hàng. */
#navShortcutList {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
  margin: var(--ui-space-1) 0 var(--ui-space-1-5) var(--ui-space-2);
  padding-left: var(--ui-space-2-5);
  border-left: var(--ui-stroke-thick) solid color-mix(in srgb, var(--ui-accent) 22%, transparent);
}
.nav-menu-row {
  min-height: var(--ui-size-md);
  padding: var(--ui-space-1) var(--ui-space-2);
  gap: var(--ui-space-2);
  cursor: pointer;
}
.nav-menu-row .settings-option-copy {
  font-size: var(--fs-body);
}
/* Hàng phím tắt thanh bên dùng cỡ chuẩn: .hotkey-recorder sm 24, nút Xoá .ui-btn--subtle.ui-btn--sm (GĐ4 Settings). */
/* Ô công tắc ẩn/hiện đứng trước tên mục (.checkbox-box mặc định order: 2). */
.nav-menu-row .checkbox-box { order: -1; }
.settings-option-row,
.settings-field-row {
  min-height: var(--ui-control-h-standard); margin: 0; padding: var(--ui-space-1) var(--ui-space-2); display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-2);
  border: none; border-radius: var(--ui-radius-control); background: transparent; color: var(--ui-text-primary);
  transition: background var(--ui-duration-fast) var(--ui-ease), color var(--ui-duration-fast) var(--ui-ease);
}
/* Lưới 2 cột cho nhóm hàng "chọn 1 giá trị ngắn" (toggle / số / select nhỏ).
   Sập về 1 cột ở compact/tight + chữ lớn — xem responsive-layout.css. */
/* Bảng phím tắt hợp nhất (kiểu VS Code / macOS): mỗi hành động một hàng đồng nhất. */
.shortcut-list { display: flex; flex-direction: column; }
.shortcut-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3);
  min-height: var(--ui-control-h-standard);
  padding: var(--ui-space-1) var(--ui-space-2);
  border-radius: var(--ui-radius-control);
  border-top: var(--ui-stroke-thin) solid var(--ux-divider);
  transition: background var(--ui-duration-fast) var(--ui-ease);
}
.shortcut-list > .shortcut-row:first-child { border-top: none; }
.shortcut-row:hover { background: var(--ux-hover); }
.shortcut-name { min-width: 0; overflow: hidden; color: var(--ui-text-primary); font-size: var(--fs-body); font-weight: var(--fw-semibold); text-overflow: ellipsis; white-space: nowrap; }
.shortcut-ctl { flex: 0 0 auto; display: flex; align-items: center; gap: var(--ui-space-2); }
.shortcut-switch { display: inline-flex; align-items: center; cursor: pointer; }
.btn-reset { min-width: 0; width: var(--ui-control-h-compact); height: var(--ui-control-h-compact); padding: 0; font-size: var(--fs-body); line-height: 1; border-radius: var(--ui-radius-control); }
.settings-option-row { cursor: pointer; user-select: none; }
.settings-option-row:hover,
.settings-field-row:hover { background: var(--ux-hover); }
.settings-option-row.is-disabled { opacity: .5; cursor: default; pointer-events: none; }
/* Thẻ "Lịch làm việc": hàng có nhãn bên trái và một cụm điều khiển bên phải,
   và một biến thể xếp dọc cho trình thêm ngày nghỉ (nhãn → ô nhập → danh sách). */
.settings-field-row .time-range-field { flex: 0 1 auto; }
.work-override-add { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-1); }
.work-override-add .form-input[type="date"] { flex: 0 1 auto; }
.work-override-add .form-select { flex: 0 1 auto; }
.work-override-add .form-input[type="text"] { flex: 1 1 8em; min-width: 0; }
/* Nút dọn cả năm chỉ hiện khi nhóm được rê chuột / có focus bên trong: nó là
   thao tác xoá hàng loạt, không nên nằm sẵn dưới ngón tay. */
.work-override-group-clear { opacity: 0; transition: opacity var(--ui-duration-standard) var(--ui-ease); }
/* Nguồn của một ngày lễ: đang đọc từ lịch Google, hay từ bộ nhớ trên máy. */
/* Ngày lễ đã bị ngoại lệ "vẫn làm" đè lên: nhạt đi để đọc ra ngay nó không còn
   là ngày nghỉ nữa, dù vẫn nằm trong danh sách ngày lễ. */
.work-override-empty { padding: 0 var(--ui-space-2); color: var(--ui-text-secondary); font-size: var(--fs-caption); }
/* Phân trang danh mục ngày lễ */
.holiday-pagination {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-2);
  margin-top: var(--ui-space-2); padding: var(--ui-space-2) var(--ui-space-2) 0;
  border-top: var(--ui-stroke-thin) solid var(--ux-divider); font-size: var(--fs-caption); color: var(--ui-text-secondary);
}
.holiday-pagination-info { font-size: var(--fs-caption); color: var(--ui-text-secondary); }
.holiday-pagination-controls { display: flex; align-items: center; gap: var(--ui-space-2); }
.holiday-page-btn {
  min-height: var(--ui-size-md); padding: 0 var(--ui-space-2);
  border-radius: var(--ui-radius-control); font-size: var(--fs-caption); font-weight: var(--fw-semibold);
  cursor: pointer;
}
.holiday-page-btn:disabled { opacity: .45; cursor: not-allowed; }
.holiday-page-indicator { font-weight: var(--fw-semibold); color: var(--ui-text-primary); font-size: var(--fs-caption); }
/* Hàng bị làm nhạt vì cấu hình hiện tại không dùng tới nó (bộ nhớ ngày lễ khi
   nguồn = manual/off). Vẫn bấm được — chỉ hạ độ nổi bật. */
.settings-field-row.is-muted { opacity: .6; }
/* Chip ngày làm việc dùng lại .chip-day của lịch lặp; ở đây chúng nằm trong một
   hàng settings nên không được đẩy hàng cao lên. */
.settings-field-row .weekdays-chips { flex: 0 0 auto; flex-wrap: nowrap; }

.settings-option-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: var(--ui-space-px); }
.settings-option-copy strong { color: var(--ui-text-primary); font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.settings-option-copy small { color: light-dark(var(--ui-text-secondary), var(--ui-text-muted)); font-size: var(--fs-caption); line-height: var(--lh-tight); }

/* ---------- Authentic Fluent UI Toggle Switch (Pill Shape) ---------- */
.checkbox-box,
.settings-switch-input,
.shortcut-switch input[type="checkbox"],
.settings-option-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  order: 2;
  flex: 0 0 auto;
  width: var(--ui-size-lg);
  height: var(--ui-icon-md);
  border-radius: var(--ui-radius-pill);
  background: var(--ux-fill);
  border: var(--ui-stroke-thin) solid var(--ux-input-border);
  position: relative;
  cursor: pointer;
  font-size: 0;
  color: transparent;
  margin: 0;
  box-sizing: border-box;
  transition: background var(--ui-duration-fast) var(--ui-ease),
              border-color var(--ui-duration-fast) var(--ui-ease);
}
.checkbox-box::after,
.settings-switch-input::after,
.shortcut-switch input[type="checkbox"]::after,
.settings-option-row input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: var(--ui-space-0-5);
  left: var(--ui-space-0-5);
  width: var(--ui-icon-dense);
  height: var(--ui-icon-dense);
  border-radius: var(--ui-radius-circle);
  background: var(--ux-raised);
  box-shadow: var(--elev-1);
  transition: transform var(--ui-duration-fast) var(--ui-ease),
              background-color var(--ui-duration-fast) var(--ui-ease);
}
.checkbox-box.checked,
.settings-switch-input:checked,
.shortcut-switch input[type="checkbox"]:checked,
.settings-option-row input[type="checkbox"]:checked {
  background: var(--ui-accent-solid);
  border-color: var(--ui-accent-solid);
}
.checkbox-box.checked::after,
.settings-switch-input:checked::after,
.shortcut-switch input[type="checkbox"]:checked::after,
.settings-option-row input[type="checkbox"]:checked::after {
  transform: translateX(18px);
  background: var(--ui-text-on-accent);
}
.checkbox-box:focus-visible,
.settings-switch-input:focus-visible,
.shortcut-switch input[type="checkbox"]:focus-visible,
.settings-option-row input[type="checkbox"]:focus-visible {
  outline: var(--ui-focus-ring-width) solid var(--ui-accent);
  outline-offset: var(--ui-focus-ring-offset);
}

/* Unified Compact Buttons */



/* Unified Hotkey Recorder (Physical Kbd Style, Compact) */
/* Ô ghi phím là ô chọn .ui-select--sm (Ô NHẬP CHUẨN: cao, viền, nền, rê, focus,
   vô hiệu — GĐ F 01/10/2026); ở đây chỉ bố cục chữ. Đang ghi: layer modules bên dưới. */
.hotkey-recorder {
  min-width: var(--dt-dimension-layout-72); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}

.settings-inline-actions { display: flex; align-items: center; gap: var(--ui-space-1-5); flex: 0 0 auto; }
.settings-inline-note {
  margin: var(--ui-space-1) var(--ui-space-2); padding: var(--ui-space-1) var(--ui-space-2); display: flex; align-items: flex-start; gap: var(--ui-space-1-5);
  border-radius: var(--ui-radius-control); background: light-dark(rgba(var(--ui-accent-rgb), .08), var(--ui-success-bg));
  color: light-dark(var(--ui-accent), var(--ui-success)); font-size: var(--fs-caption); line-height: var(--lh-snug);
}
.settings-inline-note.is-warning { background: rgba(var(--ui-danger-rgb), .1); color: var(--ui-danger); }
.config-preview-dot { width: var(--ui-space-1); height: var(--ui-space-1); border-radius: var(--ui-radius-circle); background: light-dark(currentColor, var(--ui-success)); margin-top: var(--ui-space-1); flex: 0 0 auto; }

.settings-action-row { padding: var(--ui-space-1) var(--ui-space-2); display: flex; justify-content: flex-end; gap: var(--ui-space-2); }

/* Profile & Account in Settings */
.settings-profile-hero { padding: var(--ui-space-1) var(--ui-space-2); display: flex; align-items: center; gap: var(--ui-space-2-5); }
.profile-avatar-lg { width: var(--ui-size-lg); height: var(--ui-size-lg); font-size: var(--fs-body); border-radius: var(--ui-radius-circle); }
.profile-hero-copy { flex: 1; min-width: 0; }
.profile-hero-name { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--ui-text-primary); }
.profile-hero-email { font-size: var(--fs-caption); color: light-dark(var(--ui-text-secondary), var(--ui-text-muted)); margin-top: var(--ui-space-px); }
.profile-avatar-actions { display: flex; align-items: center; gap: var(--ui-space-2); margin-top: var(--ui-space-0-5); }
.settings-profile-actions { padding: var(--ui-space-1) var(--ui-space-2); display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-2); }
.btn-google, .btn-outlook {
  min-height: var(--ui-control-h-standard); height: var(--ui-control-h-standard); padding: 0 var(--ui-space-3); border-radius: var(--ui-radius-control);
  border: var(--ui-stroke-thin) solid light-dark(rgba(var(--ui-black-rgb), 0.1), rgba(var(--ui-white-rgb), 0.1)); background: rgb(var(--ui-surface-raised-rgb)); color: var(--ui-text-primary);
  font-size: var(--fs-caption); font-weight: var(--fw-semibold); cursor: pointer; display: inline-flex; align-items: center; gap: var(--ui-space-1-5);
  box-shadow: var(--elev-1); transition-property: var(--tr-ui); transition-timing-function: var(--ui-ease); transition-duration: var(--ui-duration-standard);
}
.btn-google:hover, .btn-outlook:hover { border-color: var(--ui-accent); background: light-dark(rgba(var(--ui-black-rgb), 0.04), rgba(var(--ui-white-rgb), 0.08)); }
/* Nút Outlook ở Tối mang màu thương hiệu (nền xanh nhạt + viền/chữ Outlook). */
.btn-outlook { background: light-dark(rgb(var(--ui-surface-raised-rgb)), var(--ui-category-blue-bg)); border-color: light-dark(rgba(var(--ui-black-rgb), 0.1), var(--ui-brand-outlook)); color: light-dark(var(--ui-text-primary), var(--ui-brand-outlook)); }
.btn-outlook:hover { background: light-dark(rgba(var(--ui-black-rgb), 0.04), var(--ui-action-active)); border-color: light-dark(var(--ui-accent), var(--ui-brand-outlook)); }
.google-mark, .outlook-mark { font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.google-mark { color: var(--ui-brand-google); }

/* Sync Rows — cùng nhịp với .settings-field-row (kiểu macOS System Settings). */
.sync-schedule-row {
  min-height: var(--ui-control-h-standard); padding: var(--ui-space-0-5) var(--ui-space-2);
  display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3);
  border-radius: var(--ui-radius-control);
}
.sync-schedule-row:hover { background: rgba(var(--ui-accent-rgb), .06); }

/* Backups */
.backup-list { display: flex; flex-direction: column; margin: var(--ui-space-0-5) 0; }
.backup-row { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-2-5); padding: var(--ui-space-1-5) var(--ui-space-2-5); border-top: var(--ui-stroke-thin) solid var(--ux-divider); }
.backup-copy { min-width: 0; display: flex; flex-direction: column; gap: var(--ui-space-px); }
.backup-copy strong { color: var(--ui-text-primary); font-size: var(--fs-body); }
.backup-copy small { color: var(--ui-text-secondary); font-size: var(--fs-caption); }

/* Thùng rác — cùng nhịp với .backup-list ngay phía trên, vì hai danh sách này
   nằm cạnh nhau trong cùng một luồng khôi phục dữ liệu. */
.trash-list { display: flex; flex-direction: column; margin: var(--ui-space-1-5) 0 0; padding: 0; list-style: none; }
.trash-item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-2-5);
  padding: var(--ui-space-2) var(--ui-space-2-5); border-top: var(--ui-stroke-thin) solid var(--ux-divider);
}
.trash-item:first-child { border-top: 0; }
.trash-item:hover { background: var(--ux-hover); }
.trash-copy { min-width: 0; display: flex; flex-direction: column; gap: var(--ui-space-0-5); }
.trash-title {
  color: var(--ui-text-primary); font-size: var(--fs-body); font-weight: var(--fw-medium);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.trash-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-1-5); color: var(--ui-text-secondary); font-size: var(--fs-caption); }
/* Nhãn loại là thứ người dùng quét mắt đầu tiên để tìm đúng nhóm cần lấy lại. */
.trash-kind {
  padding: var(--ui-space-px) var(--ui-space-1-5); border-radius: var(--ui-radius-pill);
  background: var(--ux-fill); color: var(--ui-text-secondary); white-space: nowrap;
}
.trash-context { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; }
.trash-when { white-space: nowrap; }
.trash-restore { flex: 0 0 auto; }
.trash-empty { padding: var(--ui-space-4-5) var(--ui-space-2-5); text-align: center; color: var(--ui-text-secondary); font-size: var(--fs-caption); }
/* Màn hẹp và cỡ chữ lớn: nút Khôi phục xuống hàng riêng thay vì ép tiêu đề còn
   vài ký tự. Ngữ cảnh ("thuộc dự án nào", "xoá lúc nào") là thứ giúp người dùng
   quyết định, nên nó phải giữ được chỗ. */
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .trash-item {
  flex-wrap: wrap;
  align-items: flex-start;
}
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .trash-copy {
  flex: 1 1 100%;
}
:is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .trash-restore {
  margin-left: auto;
}
/* Ghim ô tìm kiếm: danh sách này có thể tới hàng trăm mục (máy thật đang có 200),
   và ô lọc trôi mất khi cuộn thì đúng lúc cần nhất lại không với tới được. */
#trashSearch {
  width: 100%; margin-bottom: var(--ui-space-1);
  position: sticky; top: 0; z-index: 1;
}
/* Nền đục để hàng danh sách không chạy lộ phía sau ô đang ghim. */
#trashSearch { background: var(--ux-overlay); }
#trashNotice[data-tone="warn"] { color: var(--ui-warning, var(--ui-text-primary)); }
#trashNotice[data-tone="ok"] { color: var(--ui-success, var(--ui-text-secondary)); }

/* Help Grid */
.help-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-1-5); padding: var(--ui-space-1) var(--ui-space-1-5); }
.help-grid > div {
  padding: var(--ui-space-2) var(--ui-space-2-5); border-radius: var(--ui-radius-control); background: var(--ux-hover);
  display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: var(--ui-space-1-5); border: var(--ui-stroke-thin) solid var(--ux-divider); border-color: light-dark(var(--ux-divider), var(--stroke)); }
.help-grid span { grid-row: 1 / 3; color: light-dark(var(--ui-accent), var(--ui-success)); font-family: ui-monospace, monospace; font-size: var(--fs-caption); font-weight: var(--fw-semibold); }
.help-grid strong { color: var(--ui-text-primary); font-size: var(--fs-caption); font-weight: var(--fw-semibold); }
.help-grid p { margin: var(--ui-space-px) 0 0; color: light-dark(var(--ui-text-secondary), var(--ui-text-muted)); font-size: var(--fs-caption); line-height: var(--lh-snug); }

/* ---------- Segmented Choice Pickers (Hệ thiết kế, Chế độ, Kiểu cửa sổ, Kiểu ghi chú) ---------- */
.theme-setting-row { padding: var(--ui-space-0-5) var(--ui-space-2) var(--ui-space-1); }
.theme-setting-row > .settings-option-copy { margin-bottom: var(--ui-space-1); }
.sys-picker,
.mode-picker,
.quickadd-mode-picker {
  /* Mỗi ô có bề rộng trần (token), không kéo giãn hết hàng; lưới dồn trái. */
  --settings-choice-max-w: var(--dt-component-settings-choice-max-width);
  display: grid; gap: var(--ui-space-2); margin-bottom: var(--ui-space-0-5);
}
.sys-picker { grid-template-columns: repeat(3, minmax(0, var(--settings-choice-max-w))); }
.mode-picker { grid-template-columns: repeat(2, minmax(0, var(--settings-choice-max-w))); }
.quickadd-mode-picker { grid-template-columns: repeat(2, minmax(0, var(--settings-choice-max-w))); }

/* Ô lựa chọn = THẺ LỰA CHỌN CHUẨN (.ui-choice, ui-components.css — viền, nền, rê,
   đang chọn theo aria-checked); 'selected' chỉ còn là móc của dấu tích. Ở đây bố cục. */
.sys-choice,
.mode-choice,
.quickadd-choice {
  flex-direction: row;
  gap: var(--ui-space-1-5);
}
.mode-choice-swatch {
  flex: 0 0 auto; width: var(--ui-icon-dense); height: var(--ui-icon-dense); border-radius: var(--ui-radius-control);
  border: var(--ui-stroke-thin) solid rgba(var(--ui-black-rgb),.15);
}
.mode-choice[data-mode="light"] .mode-choice-swatch { background: var(--dt-semantic-color-light-surface-shell); }
.mode-choice[data-mode="dark"] .mode-choice-swatch { background: var(--dt-semantic-color-dark-surface-shell); border-color: var(--dt-semantic-color-dark-border-divider-static); }
/* Bảng màu khung (kiểu TickTick): ô tròn, ô đang chọn có vòng màu nhấn. */
.chrome-swatch-picker {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2);
}
.chrome-swatch {
  flex: 0 0 auto;
  width: var(--ui-control-h-compact); height: var(--ui-control-h-compact);
  padding: 0;
  border: var(--ui-resizer-line) solid var(--ux-border);
  border-radius: var(--ui-radius-full);
  background: var(--chrome-swatch-color, var(--ui-chrome-neutral-surface));
  cursor: pointer;
  transition: box-shadow var(--ui-duration-fast) var(--ui-ease);
}
.chrome-swatch:hover { box-shadow: 0 0 0 var(--ui-focus-ring-width) var(--ux-control-border-hover); }
.chrome-swatch[aria-checked="true"] {
  box-shadow: 0 0 0 var(--ui-focus-ring-offset) var(--ux-base), 0 0 0 calc(var(--ui-focus-ring-offset) + var(--ui-focus-ring-width)) var(--ui-accent);
}
.chrome-swatch:focus-visible { outline: var(--ui-focus-ring-width) solid var(--ui-focus-ring); outline-offset: var(--ui-focus-ring-offset); }
.chrome-swatch[data-chrome="blue"] { --chrome-swatch-color: var(--ui-chrome-palette-blue); }
.chrome-swatch[data-chrome="green"] { --chrome-swatch-color: var(--ui-chrome-palette-green); }
.chrome-swatch[data-chrome="purple"] { --chrome-swatch-color: var(--ui-chrome-palette-purple); }
.chrome-swatch[data-chrome="pink"] { --chrome-swatch-color: var(--ui-chrome-palette-pink); }
.chrome-swatch[data-chrome="orange"] { --chrome-swatch-color: var(--ui-chrome-palette-orange); }
.chrome-swatch[data-chrome="yellow"] { --chrome-swatch-color: var(--ui-chrome-palette-yellow); }
.chrome-swatch[data-chrome="graphite"] { --chrome-swatch-color: var(--ui-chrome-palette-graphite); }
.chrome-swatch[data-chrome="white"] { --chrome-swatch-color: var(--ui-chrome-palette-white); }

/* Hình nền (khôi phục 03/10/2026): nhóm cấu hình thụt theo hàng công tắc, lưới
   ảnh mẫu dạng thẻ chọn, ô xem trước tỉ lệ 16:9. Viền/vòng chọn cùng công thức
   với .chrome-swatch. */
.wallpaper-config { display: flex; flex-direction: column; gap: var(--ui-space-2); min-width: 0; }
.wallpaper-config.hidden, .wallpaper-subpanel.hidden { display: none; }
/* Cùng lề ngang với .theme-setting-row để lưới/ô xem trước thẳng hàng chữ. */
.wallpaper-subpanel { padding-inline: var(--ui-space-2); }
.wallpaper-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--dt-dimension-layout-104), 1fr));
  gap: var(--ui-space-2);
}
.wallpaper-preset-item {
  display: flex; flex-direction: column; gap: var(--ui-space-1); min-width: 0;
  padding: var(--ui-space-1);
  border: var(--ui-stroke-thin) solid var(--ux-border);
  border-radius: var(--ui-radius-control);
  background: var(--ux-raised);
  color: var(--ui-text-primary);
  cursor: pointer;
  transition: box-shadow var(--ui-duration-fast) var(--ui-ease), border-color var(--ui-duration-fast) var(--ui-ease);
}
.wallpaper-preset-item:hover { border-color: var(--ux-control-border-hover); }
.wallpaper-preset-item.active {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 var(--ui-focus-ring-width) var(--ui-accent);
}
.wallpaper-preset-item:focus-visible { outline: var(--ui-focus-ring-width) solid var(--ui-focus-ring); outline-offset: var(--ui-focus-ring-offset); }
.wallpaper-preset-thumb {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--ui-radius-xs);
  border: var(--ui-stroke-thin) solid var(--ux-divider);
}
.wallpaper-preset-name {
  font-size: var(--fs-caption);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wallpaper-source-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); min-width: 0; }
.wallpaper-thumb {
  flex: 0 0 auto; width: var(--dt-dimension-layout-104); aspect-ratio: 16 / 9;
  border-radius: var(--ui-radius-control);
  border: var(--ui-stroke-thin) solid var(--ux-border);
  background: var(--ux-fill) center / cover no-repeat;
}
.wallpaper-source-title {
  flex: 1 1 var(--dt-dimension-layout-104); min-width: 0;
  font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--ui-text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wallpaper-source-row .ui-select { flex: 1 1 var(--dt-dimension-layout-160); min-width: 0; max-width: var(--dt-dimension-layout-240); }

/* Miniature Mock for QuickAdd & PinMode */
.quickadd-mock {
  flex: 0 0 auto; width: var(--ui-space-4-5); height: var(--ui-space-4-5); display: inline-flex; flex-direction: column;
  justify-content: center; align-items: center; font-size: var(--fs-caption);
  color: var(--ui-text-secondary);}
.pinmode-mock { font-size: var(--fs-body); line-height: var(--lh-none); }
.quickadd-choice.selected .quickadd-mock { color: var(--ui-accent); }
.quickadd-mock i { display: block; height: var(--ui-space-0-5); border-radius: var(--ui-radius-xs); background: currentColor; margin: var(--ui-space-px) 0; width: var(--ui-icon-xs); opacity: .7; }
.quickadd-mock i.accent { background: var(--ui-accent); opacity: 1; }
.quickadd-mock i.short { width: var(--ui-space-2); }
.quickadd-mock i.mid { width: var(--ui-space-2-5); }

.sys-check,
.mode-check,
.quickadd-check {
  position: static; margin-left: auto; width: var(--ui-icon-xs); height: var(--ui-icon-xs);
  display: grid; place-items: center; border-radius: var(--ui-radius-circle);
  background: var(--ui-accent-solid); color: var(--ui-text-on-accent); font-size: var(--fs-micro); font-weight: var(--fw-semibold);
  opacity: 0; transform: scale(.7); transition-property: var(--tr-ui); transition-timing-function: var(--ui-ease); transition-duration: var(--ui-duration-standard); flex: 0 0 auto;
}
.sys-choice.selected .sys-check,
.mode-choice.selected .mode-check,
.quickadd-choice.selected .quickadd-check { opacity: 1; transform: scale(1); }

/* ---------- Visual Preview Cards for Theme & Appearance ---------- */
.theme-card-grid {
  display: grid;
  gap: var(--ui-space-2);
  margin-bottom: var(--ui-space-2);
  width: 100%;
}
.theme-card-grid.mode-picker {
  grid-template-columns: repeat(3, minmax(0, var(--settings-choice-max-w)));
}
.theme-card-grid.sys-picker,
.theme-card-grid.frame-picker {
  grid-template-columns: repeat(2, minmax(0, var(--settings-choice-max-w)));
}

/* Thẻ xem trước = .ui-choice--card; ở đây chiều cao tối thiểu + khoảng cách mock/nhãn. */
.theme-card-choice.sys-choice,
.theme-card-choice.mode-choice,
.theme-card-choice.frame-choice {
  min-height: var(--dt-dimension-layout-104);
  gap: var(--ui-space-2);
}

/* Mockup Window Canvas */
.theme-mockup-window {
  width: 100%;
  height: var(--dt-dimension-layout-64);
  border-radius: var(--ui-radius-control);
  border: var(--ui-stroke-thin) solid var(--ux-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  background: var(--ux-base);
}

.mockup-header {
  height: var(--ui-icon-xs);
  width: 100%;
  border-bottom: var(--ui-stroke-thin) solid var(--ux-border);
  display: flex;
  align-items: center;
  gap: var(--ui-space-1);
  padding: 0 var(--ui-space-1-5);
  box-sizing: border-box;
  background: var(--ux-panel);
}

.mockup-dots {
  display: flex;
  gap: var(--ui-space-0-5);
}
.mockup-dots span {
  width: var(--ui-space-1);
  height: var(--ui-space-1);
  border-radius: var(--ui-radius-circle);
  background: var(--ui-text-muted);
  opacity: 0.6;
}

.mockup-body {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  position: relative;
}

.mockup-side {
  width: var(--ui-icon-md);
  flex: 0 0 var(--ui-space-5);
  border-right: var(--ui-stroke-thin) solid var(--ux-border);
  background: var(--ux-panel);
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
  padding: var(--ui-space-1) var(--ui-space-1);
  box-sizing: border-box;
}

.mockup-side-item {
  height: var(--ui-space-1);
  border-radius: var(--ui-radius-xs);
  background: var(--ui-text-muted);
  opacity: 0.4;
}
.mockup-side-item.active {
  background: var(--ui-accent);
  opacity: 0.9;
}

.mockup-content {
  flex: 1 1 auto;
  padding: var(--ui-space-1) var(--ui-space-1-5);
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
  box-sizing: border-box;
  background: var(--ux-base);
}

.mockup-bar {
  height: var(--ui-space-1);
  width: 55%;
  border-radius: var(--ui-radius-xs);
  background: var(--ui-accent);
  opacity: 0.85;
}

.mockup-line {
  height: var(--ui-space-1);
  width: 80%;
  border-radius: var(--ui-radius-xs);
  background: var(--ui-text-muted);
  opacity: 0.35;
}

.mockup-line-short {
  height: var(--ui-space-1);
  width: 45%;
  border-radius: var(--ui-radius-xs);
  background: var(--ui-text-muted);
  opacity: 0.25;
}

/* System (Windows Auto / 50-50 Split) */
.mockup-system {
  background: linear-gradient(135deg, #ffffff 50%, #202020 50%); /* audit-keep: mockup xem trước bảng màu chủ đề, màu cố định để minh họa chủ đề khác chủ đề đang dùng */
}
.mockup-system .mockup-header {
  background: linear-gradient(to right, #f3f3f3 50%, #2d2d2d 50%); /* audit-keep: mockup xem trước bảng màu chủ đề, màu cố định để minh họa chủ đề khác chủ đề đang dùng */
  border-bottom-color: rgba(127, 127, 127, 0.3); /* audit-keep: mockup xem trước bảng màu chủ đề, màu cố định để minh họa chủ đề khác chủ đề đang dùng */
}
.mockup-system-split {
  flex: 1 1 auto;
  display: flex;
  width: 100%;
  height: 100%;
}
.mockup-system-left {
  flex: 1;
  background: #ffffff; /* audit-keep: mockup xem trước bảng màu chủ đề, màu cố định để minh họa chủ đề khác chủ đề đang dùng */
  padding: var(--ui-space-1) var(--ui-space-1-5);
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
}
.mockup-system-left .mockup-bar {
  background: #0067c0; /* audit-keep: mockup xem trước bảng màu chủ đề, màu cố định để minh họa chủ đề khác chủ đề đang dùng */
}
.mockup-system-left .mockup-line {
  background: #888888; /* audit-keep: mockup xem trước bảng màu chủ đề, màu cố định để minh họa chủ đề khác chủ đề đang dùng */
}
.mockup-system-right {
  flex: 1;
  background: #202020; /* audit-keep: mockup xem trước bảng màu chủ đề, màu cố định để minh họa chủ đề khác chủ đề đang dùng */
  padding: var(--ui-space-1) var(--ui-space-1-5);
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
  border-left: 1px solid rgba(127, 127, 127, 0.25); /* audit-keep: mockup xem trước bảng màu chủ đề, màu cố định để minh họa chủ đề khác chủ đề đang dùng */
}
.mockup-system-right .mockup-bar {
  background: #4cc2ff; /* audit-keep: mockup xem trước bảng màu chủ đề, màu cố định để minh họa chủ đề khác chủ đề đang dùng */
}
.mockup-system-right .mockup-line {
  background: #555555; /* audit-keep: mockup xem trước bảng màu chủ đề, màu cố định để minh họa chủ đề khác chủ đề đang dùng */
}

/* Light Mockup */
.mockup-light {
  background: #ffffff; /* audit-keep: mockup xem trước bảng màu chủ đề, màu cố định để minh họa chủ đề khác chủ đề đang dùng */
  border-color: #e0e0e0; /* audit-keep: mockup xem trước bảng màu chủ đề, màu cố định để minh họa chủ đề khác chủ đề đang dùng */
}
.mockup-light .mockup-header {
  background: #f3f4f6; /* audit-keep: mockup xem trước bảng màu chủ đề, màu cố định để minh họa chủ đề khác chủ đề đang dùng */
  border-bottom-color: #eaeaea; /* audit-keep: mockup xem trước bảng màu chủ đề, màu cố định để minh họa chủ đề khác chủ đề đang dùng */
}
.mockup-light .mockup-side {
  background: #f3f4f6; /* audit-keep: mockup xem trước bảng màu chủ đề, màu cố định để minh họa chủ đề khác chủ đề đang dùng */
  border-right-color: #eaeaea; /* audit-keep: mockup xem trước bảng màu chủ đề, màu cố định để minh họa chủ đề khác chủ đề đang dùng */
}
.mockup-light .mockup-content {
  background: #ffffff; /* audit-keep: mockup xem trước bảng màu chủ đề, màu cố định để minh họa chủ đề khác chủ đề đang dùng */
}
.mockup-light .mockup-bar {
  background: #0067c0; /* audit-keep: mockup xem trước bảng màu chủ đề, màu cố định để minh họa chủ đề khác chủ đề đang dùng */
}
.mockup-light .mockup-line {
  background: #cccccc; /* audit-keep: mockup xem trước bảng màu chủ đề, màu cố định để minh họa chủ đề khác chủ đề đang dùng */
}

/* Dark Mockup */
.mockup-dark {
  background: #1e1e1e; /* audit-keep: mockup xem trước bảng màu chủ đề, màu cố định để minh họa chủ đề khác chủ đề đang dùng */
  border-color: #383838; /* audit-keep: mockup xem trước bảng màu chủ đề, màu cố định để minh họa chủ đề khác chủ đề đang dùng */
}
.mockup-dark .mockup-header {
  background: #282828; /* audit-keep: mockup xem trước bảng màu chủ đề, màu cố định để minh họa chủ đề khác chủ đề đang dùng */
  border-bottom-color: #333333; /* audit-keep: mockup xem trước bảng màu chủ đề, màu cố định để minh họa chủ đề khác chủ đề đang dùng */
}
.mockup-dark .mockup-side {
  background: #252525; /* audit-keep: mockup xem trước bảng màu chủ đề, màu cố định để minh họa chủ đề khác chủ đề đang dùng */
  border-right-color: #333333; /* audit-keep: mockup xem trước bảng màu chủ đề, màu cố định để minh họa chủ đề khác chủ đề đang dùng */
}
.mockup-dark .mockup-content {
  background: #1e1e1e; /* audit-keep: mockup xem trước bảng màu chủ đề, màu cố định để minh họa chủ đề khác chủ đề đang dùng */
}
.mockup-dark .mockup-bar {
  background: #4cc2ff; /* audit-keep: mockup xem trước bảng màu chủ đề, màu cố định để minh họa chủ đề khác chủ đề đang dùng */
}
.mockup-dark .mockup-line {
  background: #555555; /* audit-keep: mockup xem trước bảng màu chủ đề, màu cố định để minh họa chủ đề khác chủ đề đang dùng */
}

/* Fluent vs Liquid Glass */


/* Floating vs Seamless Frame */
/* Thẻ nổi (BA 11/10/2026): mỗi vùng là một thẻ nhỏ trên nền bàn, tách bằng khe — đúng
   cấu trúc khung thật (rail, header, thân trang rời nhau). */
.mockup-floating {
  padding: var(--ui-space-1);
  background: var(--ux-desk);
}
.mockup-floating .mockup-floating-inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
}
.mockup-floating .mockup-header {
  border-bottom: 0;
  border-radius: var(--ui-radius-sm);
  background: var(--ux-frame);
}
.mockup-floating .mockup-body { gap: var(--ui-space-1); }
.mockup-floating .mockup-side {
  border-right: 0;
  border-radius: var(--ui-radius-sm);
  background: var(--ux-frame);
}
.mockup-floating .mockup-content {
  border-radius: var(--ui-radius-sm);
  background: var(--ux-raised);
}

.mockup-seamless {
  background: var(--ui-accent);
}
.mockup-seamless .mockup-header {
  background: var(--ui-accent);
  border-bottom: none;
}
.mockup-seamless .mockup-dots span {
  background: #ffffff; /* audit-keep: mockup xem trước bảng màu chủ đề, màu cố định để minh họa chủ đề khác chủ đề đang dùng */
  opacity: 0.8;
}
.mockup-seamless .mockup-body {
  padding-right: var(--ui-space-1);
  padding-bottom: var(--ui-space-1);
}
.mockup-seamless .mockup-side {
  background: var(--ui-accent);
  border-right: none;
}
.mockup-seamless .mockup-side-item.active {
  background: #ffffff; /* audit-keep: mockup xem trước bảng màu chủ đề, màu cố định để minh họa chủ đề khác chủ đề đang dùng */
}
.mockup-seamless .mockup-seamless-inner {
  flex: 1 1 auto;
  border-radius: var(--ui-radius-sm);
  background: var(--ux-base);
  display: flex;
  flex-direction: column;
  padding: var(--ui-space-1) var(--ui-space-1-5);
  gap: var(--ui-space-1);
}

/* Độ trong (BA 11/10/2026): bốn ô xem trước trên cùng một ảnh nền thu nhỏ, mỗi ô vẽ đúng
   thang thật — khung (rail/header) và thẻ có chữ — để thấy khác biệt ngay lúc chọn. */
.theme-card-grid.material-picker {
  grid-template-columns: repeat(4, minmax(0, var(--settings-choice-max-w)));
}
.theme-card-choice.material-choice {
  min-height: var(--dt-dimension-layout-104);
  gap: var(--ui-space-2);
}
.mockup-material {
  flex-direction: row;
  gap: var(--ui-space-1);
  padding: var(--ui-space-1);
  background:
    radial-gradient(circle at 24% 34%, var(--ui-category-orange-fg) 0 22%, transparent 24%),
    radial-gradient(circle at 76% 72%, var(--ui-category-blue-fg) 0 26%, transparent 28%),
    linear-gradient(135deg, var(--ui-category-purple-fg), var(--ui-category-pink-fg));
}
.mockup-material-frame,
.mockup-material-card {
  border-radius: var(--ui-radius-sm);
  backdrop-filter: blur(var(--mock-blur));
}
.mockup-material-frame {
  flex: 0 0 var(--ui-space-5);
  background: color-mix(in srgb, var(--ux-frame) calc(var(--mock-frame-a) * 100%), transparent);
}
.mockup-material-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
  padding: var(--ui-space-1) var(--ui-space-1-5);
  background: color-mix(in srgb, var(--ux-raised) calc(var(--mock-card-a) * 100%), transparent);
}
.mockup-material--solid   { --mock-frame-a: 1;   --mock-card-a: 1;   --mock-blur: 0px; }
.mockup-material--focus   { --mock-frame-a: .96; --mock-card-a: 1;   --mock-blur: 2px; } /* audit-keep: mockup xem trước vật liệu, blur thu nhỏ theo tỉ lệ ô */
.mockup-material--acrylic { --mock-frame-a: .8;  --mock-card-a: .95; --mock-blur: 4px; } /* audit-keep: mockup xem trước vật liệu, blur thu nhỏ theo tỉ lệ ô */
.mockup-material--glass   { --mock-frame-a: .62; --mock-card-a: .9;  --mock-blur: 0px; }
/* Không có hình nền: ô khoá (Q4). Không hạ opacity lên chữ (ARS-1) — chỉ ảnh xem trước
   về xám, gợi ý "Bật hình nền…" nằm ở dòng mô tả. */
.material-picker.is-locked .material-choice { cursor: not-allowed; }
.material-picker.is-locked .mockup-material { filter: grayscale(1); }

/* Card Footer */
.theme-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: auto;
  padding: var(--ui-space-0-5) var(--ui-space-1-5) var(--ui-space-1);
}

.theme-card-label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--ui-text-primary);
  line-height: var(--lh-tight);
}

.theme-card-choice.selected .theme-card-label {
  color: var(--ui-accent);
}

.theme-card-check {
  margin-left: auto;
}

@media (max-width: 760px) {
  .settings-layout { grid-template-columns: calc(var(--dt-component-settings-sidebar-width, 220px)) minmax(0, 1fr); }
  .settings-sidebar { padding: var(--ui-space-3-5) var(--ui-space-2) var(--ui-space-2-5); }
  .settings-sidebar-label { margin-left: var(--ui-space-1-5); }
  .settings-nav-item { padding: 0 var(--ui-space-2); grid-template-columns: var(--ui-icon-lg) minmax(0, 1fr); gap: var(--ui-space-1); }
  .settings-nav-icon { width: var(--ui-icon-lg); height: var(--ui-icon-lg); }
  .settings-nav-copy small, .settings-account-shortcut .profile-state { display: none; }
  .settings-scroll { padding: var(--ui-space-3-5) var(--ui-space-4) var(--ui-space-5); }
  .settings-field-row { align-items: flex-start; flex-direction: column; gap: var(--ui-space-2); }
  .settings-field-row .setting-select, .settings-inline-actions, .settings-inline-actions .text-input { width: 100%; }
  .settings-field-row .token-select-wrap { width: 100%; max-width: 100%; }
  .help-grid { grid-template-columns: 1fr; }
  .theme-card-grid, .sys-picker, .mode-picker, .quickadd-mode-picker { grid-template-columns: minmax(0, var(--settings-choice-max-w)); }
}

.edit-panel.expanded-edit-panel {
  position: relative;
  overflow: hidden; display: flex; flex-direction: column;
}
.edit-header { display: flex; align-items: center; gap: var(--ui-space-3); }
.edit-accent { width: var(--ui-space-1); height: var(--ui-size-dense); border-radius: var(--ui-radius-xs); background: var(--ui-accent); }
.edit-title-group { flex: 1; min-width: 0; }
.edit-title { font-size: var(--fs-title); font-weight: var(--fw-semibold); color: var(--ui-text-primary); }

.edit-body {
  display: flex; flex-direction: column; gap: var(--ui-space-3-5);
  overflow-y: auto; flex: 1; min-height: 0; position: static;
}

/* Quick Add Bar */
/* This whole day-manager UI (quick-add bar, draft cards, item detail
   drawer, repeat editor) is built on the shared --sf-* design tokens
   instead of hardcoded hex, same as every older component in this file —
   it needs to automatically re-skin across Fluent/Glass and
   light/dark, not just toggle between two fixed hardcoded palettes. */
.quick-add-composer { position: relative; z-index: var(--ui-layer-raised); }
/* Neo bảng gợi ý #tag vào ngay dưới ô nhập, không phải dưới cả cụm composer —
   nếu không nó bị hàng Ưu tiên/Giờ đẩy tuột xuống, trông như rời khỏi ô đang gõ. */
/* Neo bảng gợi ý #tag vào ngay dưới ô nhập, không phải dưới cả cụm composer. */
.quick-add-bar { position: relative; display: flex; gap: var(--ui-space-2-5); align-items: center; }
/* Hàng Ưu tiên / Giờ nhắc LUÔN nằm dưới hàng ô nhập + nút Thêm, thành dòng
   riêng. Mỗi field là nhãn-cạnh-control (không phải nhãn-trên-control) để dòng
   này mỏng, và tự xuống dòng khi popup bị bóp hẹp. */
/* AT-UI Rhythm (BA 10/10/2026): Dự án · Ưu tiên · Giờ nhắc cùng một hàng control 32 (--ui-size-md);
   khe trong nhóm --ui-rhythm-inline, cách hàng ô nhập --ui-rhythm-stack. */
.quick-add-fields { display: flex; gap: var(--ui-rhythm-inline) var(--ui-rhythm-group); align-items: center; flex-wrap: wrap; padding-top: var(--ui-rhythm-stack); }
/* Nút "Dự án" (.quick-add-project-btn) ở @layer modules cuối file — luật ở legacy bị .ui-btn đè. */
.quick-add-field { display: flex; flex-direction: row; align-items: center; gap: var(--ui-space-1-5); flex: 0 0 auto; min-width: 0; }
.quick-add-field-label { font: var(--fw-normal) var(--fs-body)/var(--lh-none) var(--app-font); letter-spacing: normal; color: var(--ui-text-secondary); white-space: nowrap; }
.quick-add-field .form-select, .quick-add-field .form-input { width: auto; }
.quick-add-field .token-select-wrap { width: auto; }
.quick-add-field .token-select-trigger { width: auto; min-width: var(--dt-dimension-layout-128); }
.quick-task-input {
  flex: 1; height: max(var(--ui-size-md), var(--task-row-height)); padding: 0 var(--ui-space-3-5); border: var(--ui-stroke-thick) solid var(--stroke); border-radius: var(--ui-radius-control);
  font-family: var(--app-font); font-size: var(--fs-body); color: var(--ui-text-primary); outline: none; background: var(--ux-input-bg);
  transition: border-color var(--ui-duration-fast) var(--ui-ease), box-shadow var(--ui-duration-fast) var(--ui-ease);
}
.quick-task-input:focus { border-color: var(--ux-control-border-active); background: var(--ux-input-bg); box-shadow: var(--ui-control-ring); }
.quick-add-btn { min-height: var(--ui-size-lg); height: var(--ui-size-lg); flex: 0 0 auto; padding: 0 var(--ui-space-4); border-radius: var(--ui-radius-control); font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.quick-task-tag-preview { display: flex; flex-wrap: wrap; gap: var(--ui-space-1); padding: var(--ui-space-2) var(--ui-space-0-5) 0; }
/* Nhãn dự án = NHÃN DỰ ÁN CHUẨN (.ui-tag, ui-components.css). */
.quick-tag-suggestions { position: absolute; top: calc(100% + var(--ui-space-1-5)); left: 0; width: min(var(--dt-dimension-layout-320), calc(100vw - var(--dt-dimension-layout-64))); padding: var(--ui-space-1); border: var(--ui-stroke-thin) solid var(--stroke); border-radius: var(--ui-radius-panel); background: var(--ux-overlay); box-shadow: var(--elev-3); }
.quick-tag-suggestion { display: flex; align-items: center; width: 100%; min-height: var(--ui-size-md); padding: 0 var(--ui-space-2); border: 0; border-radius: var(--ui-radius-control); color: var(--ui-text-primary); background: transparent; text-align: left; font: var(--fw-semibold) var(--fs-body)/var(--lh-none) var(--app-font); cursor: pointer; }
.quick-tag-suggestion:hover, .quick-tag-suggestion.is-active { color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 10%, transparent); outline: 0; }

/* Editor Controls Bar: Mode tabs + View switch */
.editor-controls-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-2-5);
  padding: var(--ui-space-1) 0 var(--ui-space-2-5); border-bottom: var(--ui-stroke-thin) solid var(--stroke); flex-wrap: wrap;
}
.mode-tabs-group { display: flex; align-items: center; gap: var(--ui-space-1-5); }
.control-label { font-size: var(--fs-body); font-weight: var(--fw-normal); color: var(--ui-text-secondary); margin-right: var(--ui-space-0-5); }
/* Menu ⋯ "Tuỳ chọn nhập" (AT-UI Rhythm 10/10/2026): Kiểu danh sách + Cách nhập ít dùng nên
   rời khỏi thân hộp thoại; nổi dưới thanh đầu, mép phải. [hidden] phải thắng display:flex. */
.editor-controls-bar.edit-options-menu {
  position: absolute; top: var(--ui-dialog-header-h); right: var(--ui-space-4); z-index: var(--ui-layer-dropdown);
  flex-direction: column; align-items: stretch; gap: var(--ui-rhythm-stack);
  padding: var(--ui-space-3); border: var(--ui-stroke-thin) solid var(--stroke); border-radius: var(--ui-radius-panel);
  background: var(--ux-overlay); box-shadow: var(--elev-3);
}
.editor-controls-bar.edit-options-menu[hidden] { display: none; }
.edit-options-menu .mode-tabs-group { justify-content: space-between; gap: var(--ui-rhythm-group); }
/* Ô "Kiểu danh sách" / "Thẻ công việc – Nhập hàng loạt" là .ui-segmented__item
   (SEGMENTED CHUẨN, GĐ F 01/10/2026); .tab-btn / .editor-tab-btn chỉ còn là móc JS. */

/* Draft Task Cards & Raw Text Containers */
.card-list-container { min-height: var(--dt-dimension-layout-120); flex: 1; display: flex; flex-direction: column; }
.raw-text-container { min-height: var(--dt-dimension-layout-120); flex: 1; display: flex; flex-direction: column; }
.draft-task-list { display: flex; flex-direction: column; gap: var(--ui-space-2); }
.draft-card-item {
  position: relative; display: flex; align-items: center; gap: var(--ui-space-2-5); padding: var(--ui-space-1) var(--ui-space-3);
  min-height: max(var(--ui-size-md), var(--task-row-height)); background: var(--ux-fill); border: var(--ui-stroke-thick) solid var(--stroke);
  border-radius: var(--ui-radius-control); transition-property: var(--tr-ui); transition-timing-function: var(--ui-ease); transition-duration: var(--ui-duration-standard); overflow: hidden;
}
.draft-card-item:hover { border-color: var(--ux-border); background: var(--ux-raised); box-shadow: var(--elev-2); }
.draft-card-item.editing { border-color: var(--ui-accent); background: var(--ux-fill); }

.draft-card-meta { display: flex; align-items: center; gap: var(--ui-space-1-5); flex: 0 0 auto; }
.draft-card-text {
  flex: 1; min-width: 0; font-family: var(--app-font); font-size: var(--fs-body); color: var(--ui-text-primary); font-weight: var(--fw-normal);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.draft-card-text:hover { color: var(--ui-accent); }

.badge-tag {
  display: inline-flex; align-items: center; gap: var(--ui-space-1); padding: var(--ui-space-0-5) var(--ui-space-2); border-radius: var(--ui-radius-control);
  font-size: var(--fs-caption); font-weight: var(--fw-semibold); line-height: var(--lh-snug);
}
.badge-priority { background: var(--ui-danger-bg); color: var(--ui-danger); }
.badge-priority.p2 { background: var(--ui-category-orange-bg); color: var(--ui-category-orange-fg); }
.badge-priority.p3 { background: var(--ui-category-green-bg); color: var(--ui-category-green-fg); }
.badge-priority.p4 { background: var(--ui-category-blue-bg); color: var(--ui-category-blue-fg); }
.badge-bell { background: var(--ui-warning-bg); color: var(--ui-warning); }
.badge-repeat { background: var(--ui-category-purple-bg); color: var(--ui-category-purple-fg); }
.badge-task-tag { background: light-dark(color-mix(in srgb, var(--ui-accent) 12%, rgb(var(--ui-surface-raised-rgb))), color-mix(in srgb, var(--ui-accent) 24%, transparent)); color: light-dark(var(--ui-accent), color-mix(in srgb, var(--ui-accent) 72%, var(--ui-text-on-accent))); }
/* Nhập nhanh bằng câu tự nhiên: chip ngày/thẻ do app TỰ nhận có nút ✕ "bỏ nhận diện". */
.badge-tag.is-quick-date, .badge-tag.is-auto-tag, .quick-task-tag-chip.is-auto-tag { padding-inline-end: var(--ui-space-0-5); }
.quick-task-tag-preview .badge-tag { font-weight: var(--fw-semibold); }
.badge-dismiss {
  display: inline-grid; place-items: center; flex: none;
  width: var(--ui-icon-sm); height: var(--ui-icon-sm); padding: 0;
  border: 0; border-radius: var(--ui-radius-full);
  background: transparent; color: inherit; cursor: pointer;
}
.badge-dismiss:hover { background: color-mix(in srgb, currentColor 16%, transparent); }
.badge-dismiss:focus-visible { outline: var(--ui-focus-ring-width) solid var(--ui-focus-ring); outline-offset: var(--ui-space-px); }
/* Badge ưu tiên/chuông/lặp đọc token trạng thái/nhóm vốn tự đổi theo Sáng/Tối — không cần nhánh Tối riêng
   (GĐ4 Settings đã xoá 6 nhánh trùng hệt). Chỉ thẻ #tag cần nền đậm hơn trên thẻ tối. */

.draft-card-actions { display: flex; align-items: center; gap: var(--ui-space-1); flex: 0 0 auto; }
.draft-card-btn {
  width: var(--ui-size-md); height: var(--ui-size-md); border-radius: var(--ui-radius-control); border: none; background: transparent;
  color: var(--ui-text-secondary); cursor: pointer; display: grid; place-items: center; font-size: var(--fs-body);
  transition-property: var(--tr-ui); transition-timing-function: var(--ui-ease); transition-duration: var(--ui-duration-standard);
}
.draft-card-btn:hover { background: var(--ui-hover); color: var(--ui-text-primary); }
.draft-card-btn.delete-btn:hover { background: var(--ui-danger-bg); color: var(--ui-danger); }

/* Item Detail Drawer (Full Surface Overlay inside Day Editor / Task Dialog) */
.item-detail-drawer {
  position: absolute; inset: 0;
  width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  border-width: 0; border-radius: var(--ui-radius-panel);
  box-shadow: none;
  z-index: var(--ui-layer-pane);
  background: var(--ux-overlay);
  display: flex; flex-direction: column; overflow: hidden;
  will-change: opacity;
  transform: none;
}
.drawer-header { display: flex; align-items: center; justify-content: space-between; border-bottom: var(--ui-stroke-thin) solid var(--stroke); padding: var(--ui-space-3-5) var(--ui-space-4-5); background: var(--ux-fill); flex: 0 0 auto; }
.drawer-title { display:flex; align-items:center; gap:var(--ui-space-2-5); font-size: var(--fs-title); font-weight: var(--fw-semibold); color: var(--ui-text-primary); }
.drawer-title-icon { display:grid; place-items:center; width:var(--ui-size-md); height:var(--ui-size-md); border-radius: var(--ui-radius-control); background: rgba(var(--ui-accent-rgb), .12); color: var(--ui-accent); }
.drawer-body { padding: var(--ui-space-4-5); display: flex; flex-direction: column; gap: var(--ui-space-3-5); flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }

.form-group { display: flex; flex-direction: column; gap: var(--ui-space-1); }
.form-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--ui-space-3); }
.form-row-2 { grid-template-columns: 1fr 1fr; }
.flex-1 { flex: 1; min-width: 0; }
.form-label { font-size: var(--fs-caption); font-weight: var(--fw-overline); line-height: var(--lh-overline); color: var(--ui-text-secondary); }
.form-input, .form-select {
  min-height: var(--ui-field-h); padding: 0 var(--ui-field-pad-inline, var(--ui-space-3)); border: var(--ui-stroke-thin) solid var(--stroke); border-radius: var(--ui-radius-control);
  font-family: var(--app-font); font-size: var(--fs-body); font-weight: var(--fw-normal); line-height: var(--lh-body); color: var(--ui-text-primary); outline: none; background: rgb(var(--ui-surface-raised-rgb));
}
.form-input:focus, .form-select:focus { border-color: var(--ui-accent); }
.detail-tags-group { margin-top: calc(-1 * var(--ui-space-0-5)); }
.detail-tag-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-1-5); min-height: var(--ui-size-sm); }
/* Ô thêm tag cùng hàng chip: cỡ control sm 24 (trước 25px). */
.detail-tag-add-input { box-sizing: border-box; height: var(--ui-size-sm); min-height: var(--ui-size-sm); }
/* Câu trả lời cho cặp ô ngày bắt đầu / hạn chót: hoặc độ dài khoảng đang chọn,
   hoặc lý do khoảng đó bị từ chối — cùng một chỗ nên mắt không phải đi tìm. */
/* Cặp ô "Từ → Đến" của công việc. Một hàng ngang, hai ô chia đều phần rộng
   còn lại, mũi tên thay cho hai nhãn chữ — form tạo việc phải giữ ngắn.
   flex:1 1 0 + min-width:0 để hai ô co được khi cửa sổ chia đôi hoặc chữ 125%. */
.time-range-field { display: flex; align-items: center; gap: var(--ui-space-1); min-width: 0; }
.time-range-field .form-input { flex: 1 1 0; min-width: 0; }
.time-range-field .form-input:disabled { opacity: .55; cursor: not-allowed; }
.time-range-sep { flex: 0 0 auto; color: var(--ui-text-secondary); font-size: var(--fs-caption); }

.span-hint { padding: var(--ui-space-2) var(--ui-space-3); border-radius: var(--ui-radius-control); background: rgba(var(--ui-accent-rgb), .1); color: var(--ui-accent); font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.span-hint.is-error { background: color-mix(in srgb, var(--ui-danger) 12%, transparent); color: var(--ui-danger); }

/* Việc dài ngày trên lưới lịch.

   Hàng phản chiếu (ngày giữa khoảng) phải đọc ra ngay là "đang chạy, không
   phải việc của hôm nay": chữ nhạt hơn, nền mờ, và một vạch dọc bên trái nối
   mắt theo chiều khoảng. Nó cũng không có ô tích nên không được trông như một
   hàng bấm được — con trỏ giữ hình bàn tay vì bấm vào sẽ mở ngày hạn. */
.task-span-mirror { cursor: pointer; opacity: .78; background: rgba(var(--ui-surface-fill-rgb), .28); }
/* Đoạn giờ của riêng ngày này trên hàng soi gương ("09:00 – 18:00" hoặc "Nghỉ").
   Nằm bên phải, trước con số n/N, để mắt đọc: việc gì → giờ nào → ngày thứ mấy. */
.task-span-window {
  flex: 0 0 auto; margin-left: auto; padding: 0 var(--ui-space-1-5);
  border-radius: var(--ui-radius-control);
  color: var(--ui-text-secondary); font-size: var(--fs-caption); font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.task-span-window.is-offday { color: var(--ui-text-secondary); background: color-mix(in srgb, var(--ux-fill) 50%, transparent); font-style: italic; }
/* Cột Tuần/Tháng hẹp: tiêu đề + đoạn giờ + số n/N là BA thứ tranh nhau một
   hàng, kết quả là tiêu đề bị bóp còn hai chữ. Ở đó giữ n/N (tiến độ qua
   khoảng — thứ chỉ hàng này nói được) và để đoạn giờ trong tooltip; dạng Ngày
   và Danh sách có nguyên một dòng ngang nên hiện đủ. */
:is(.grid[data-view-mode="week"], .grid.multi-week) .task-span-window { display: none; }
/* Ngày nghỉ nằm giữa khoảng: hàng nhạt hẳn đi nhưng KHÔNG biến mất — khoảng
   vẫn chạy qua ngày đó, app chỉ nói là hôm nay không ai làm gì. */
.task-span-mirror.is-offday { opacity: .5; }

/* Luật ngày nghỉ/ngày lễ của cột ngày (.day-col.is-nonworking / .is-holiday-day) đã
   dời về calendar.css, cuối MỤC 00 (2026-09-27) — giữ đúng thứ tự thắng cũ. */
.day-work-flag {
  flex: 0 0 auto; max-width: 100%; overflow: hidden;
  padding: 0 var(--ui-space-1-5); border-radius: var(--ui-radius-control);
  font-size: var(--fs-caption); font-weight: var(--fw-semibold);
  text-overflow: ellipsis; white-space: nowrap;
}
.day-work-flag.is-off { background: color-mix(in srgb, var(--ui-danger) 14%, transparent); color: var(--ui-danger); }
.day-work-flag.is-work { background: color-mix(in srgb, var(--ui-accent) 14%, transparent); color: var(--ui-accent); }
/* Hàng span-mirror giữ nguyên độ mờ + nền lúc nghỉ khi hover (chỉ viền phản
   hồi, do rule outline chung xử lý). */
.task-span-mirror:hover { opacity: .78; background: rgba(var(--ui-surface-fill-rgb), .28); }
.task-span-mirror .task-text { color: var(--ui-text-muted); font-style: italic; }
.task-span-marker {
  flex: 0 0 auto; width: var(--ui-space-1); align-self: stretch; margin: var(--ui-space-1) var(--ui-space-1) var(--ui-space-1) 0;
  border-radius: var(--ui-radius-xs); background: var(--ui-accent); opacity: .55;
}
.task-span-count {
  flex: 0 0 auto; margin-left: auto; padding-left: var(--ui-space-1-5);
  color: var(--ui-text-muted); font-size: var(--fs-caption); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums;
}
/* Ngày hạn — hàng thật, nơi tích hoàn thành và sửa. Viền trái đậm hơn hẳn
   vạch mờ của hàng phản chiếu để phân biệt đâu là điểm kết thúc. */
.task-span-owner { box-shadow: inset calc(var(--ui-focus-ring-width) * 1.5) 0 0 var(--ui-accent); }
.today-span-note {
  margin-top: var(--ui-space-2); padding: var(--ui-space-1-5) var(--ui-space-2-5); border-radius: var(--ui-radius-control);
  background: rgba(var(--ui-accent-rgb), .1);
  color: var(--ui-accent); font-size: var(--fs-caption); font-weight: var(--fw-semibold);
}

.repeat-editor { border: var(--ui-stroke-thin) solid var(--stroke); border-radius: var(--ui-radius-panel); background: rgba(var(--ui-surface-fill-rgb), .35); overflow: hidden; }
.repeat-editor-heading { display:flex; align-items:center; gap:var(--ui-space-2-5); padding:var(--ui-space-3) var(--ui-space-3-5); border-bottom: var(--ui-stroke-thin) solid var(--stroke); background: rgba(var(--ui-surface-fill-rgb), .6); color: var(--ui-text-primary); }
.repeat-editor-heading > div { display:flex; flex-direction:column; gap:var(--ui-space-px); }
.repeat-editor-heading strong { font-size: var(--fs-body); }
.repeat-editor-heading small { color: var(--ui-text-secondary); font-size: var(--fs-caption); }
.repeat-heading-icon { display:grid; place-items:center; width:var(--ui-size-dense); height:var(--dt-dimension-row-list-dense); border-radius:var(--ui-radius-circle); background: var(--ui-accent-solid); color: var(--ui-text-on-accent); font-size: var(--fs-title-lg); }
.repeat-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--ui-space-3); padding:var(--ui-space-3-5); }
.repeat-option-block { padding:0 var(--ui-space-3-5) var(--ui-space-3-5); }
.repeat-end-row { display:grid; grid-template-columns:1fr 1fr; gap:var(--ui-space-3); padding:var(--ui-space-3-5); border-top: var(--ui-stroke-thin) solid var(--stroke); }
.number-unit-field { display:grid; grid-template-columns:minmax(72px,1fr) auto; align-items:center; gap:var(--ui-space-2-5); }
.number-unit-field > span { min-width:var(--ui-size-touch); color: var(--ui-text-secondary); font-size: var(--fs-body); }
.monthly-choice { display:flex; align-items:center; gap:var(--ui-space-2-5); min-height:var(--ui-size-touch); color: var(--ui-text-primary); font-size: var(--fs-body); }
.monthly-choice + .monthly-choice { margin-top:var(--ui-space-2); }
.monthly-choice input[type="radio"] { width:var(--ui-space-4); height:var(--ui-space-4); accent-color: var(--ui-accent); }
.compact-number { width: var(--dt-dimension-layout-88); min-width: var(--dt-dimension-layout-72); }
.compact-select { width:auto; min-width:var(--dt-dimension-layout-120); flex:0 1 var(--dt-dimension-layout-160); }
.repeat-summary { margin:0 var(--ui-space-3-5) var(--ui-space-3-5); padding:var(--ui-space-2-5) var(--ui-space-3); border-radius: var(--ui-radius-control); background: rgba(var(--ui-accent-rgb), .1); color: var(--ui-accent); font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: var(--lh-normal); }
.popup-drag-handle { cursor:grab; user-select:none; touch-action:none; }
.is-dragging .popup-drag-handle, .popup-drag-handle:active { cursor:grabbing; }

.weekdays-chips { display: flex; gap: var(--ui-space-1-5); flex-wrap: wrap; margin-top: var(--ui-space-0-5); }
/* Chip ngày là .ui-btn phụ bật/tắt cỡ sm (đang chọn = aria-pressed → nền nhấn 12%,
   GĐ F 01/10/2026); lớp 'selected' chỉ còn là móc JS. Ở đây chỉ bề rộng tối thiểu. */
.chip-day { min-width: var(--ui-control-h-compact); padding-inline: var(--ui-space-1-5); }

/* Drawer Tabs & Task History */
.drawer-tabs {
  display: flex;
  align-items: center;
  gap: var(--ui-space-1);
  padding: var(--ui-space-2) var(--ui-space-4-5) 0;
  border-bottom: var(--ui-stroke-thin) solid var(--stroke);
  background: var(--ux-fill);
}
/* Tab Chi tiết / Lịch sử là .ui-tab (TAB CHUẨN, ui-components.css). */
.drawer-history-badge {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  padding: var(--ui-space-px) var(--ui-space-1-5);
  border-radius: var(--ui-radius-control);
  background: color-mix(in srgb, var(--ui-warning) 18%, transparent);
  color: var(--ui-warning);
  line-height: var(--lh-none);
}
.drawer-panel {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-3-5);
}

.drawer-history-summary {
  margin-bottom: var(--ui-space-1);
}
.history-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ui-space-2-5);
}
.history-summary-card {
  padding: var(--ui-space-2-5) var(--ui-space-3);
  border-radius: var(--ui-radius-control);
  background: var(--ux-fill);
  border: var(--ui-stroke-thin) solid var(--stroke);
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
}
.history-summary-label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  color: var(--ui-text-secondary);
}
.history-summary-value {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--ui-text-primary);
}
.history-summary-value.is-done {
  color: var(--ui-success);
}
.history-summary-value.is-open {
  color: var(--ui-accent);
}
.history-summary-value.is-rescheduled {
  color: var(--ui-warning);
}

.drawer-history-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2-5);
}
.history-empty-notice {
  padding: var(--ui-space-6) var(--ui-space-4);
  text-align: center;
  color: var(--ui-text-muted);
  font-size: var(--fs-body);
  border: var(--ui-stroke-thin) dashed var(--stroke);
  border-radius: var(--ui-radius-control);
}
.task-history-list {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
  position: relative;
}
.task-history-list::before {
  content: '';
  position: absolute;
  top: var(--ui-space-3-5);
  bottom: var(--ui-space-3-5);
  left: 1.1em;
  border-left: var(--ui-stroke-thick) solid var(--stroke);
  z-index: 0;
}
.task-history-item {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  gap: var(--ui-space-3);
  padding: var(--ui-space-2) var(--ui-space-3);
  border-radius: var(--ui-radius-control);
  background: var(--ux-fill);
  border: var(--ui-stroke-thin) solid var(--stroke);
}
.history-item-icon {
  width: 1.7em;
  height: 1.7em;
  border-radius: var(--ui-radius-circle);
  display: grid;
  place-items: center;
  font-size: var(--fs-caption);
  flex: 0 0 auto;
  background: var(--ux-raised);
  border: var(--ui-stroke-thin) solid var(--stroke);
  color: var(--ui-text-secondary);
}
.history-item-icon.event-created {
  color: var(--ui-accent);
  background: color-mix(in srgb, var(--ui-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--ui-accent) 30%, transparent);
}
.history-item-icon.event-completed {
  color: var(--ui-success);
  background: color-mix(in srgb, var(--ui-success) 12%, transparent);
  border-color: color-mix(in srgb, var(--ui-success) 30%, transparent);
}
.history-item-icon.event-reopened {
  color: var(--ui-warning);
  background: color-mix(in srgb, var(--ui-warning) 12%, transparent);
  border-color: color-mix(in srgb, var(--ui-warning) 30%, transparent);
}
.history-item-icon.event-rescheduled {
  color: var(--ui-warning);
  background: color-mix(in srgb, var(--ui-warning) 14%, transparent);
  border-color: color-mix(in srgb, var(--ui-warning) 35%, transparent);
}
.history-item-icon.event-deleted {
  color: var(--ui-danger);
  background: color-mix(in srgb, var(--ui-danger) 12%, transparent);
  border-color: color-mix(in srgb, var(--ui-danger) 30%, transparent);
}
.history-item-icon.event-restored {
  color: var(--ui-accent);
  background: color-mix(in srgb, var(--ui-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--ui-accent) 30%, transparent);
}
.history-item-body {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-0-5);
  min-width: 0;
  flex: 1 1 auto;
}
.history-item-title {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--ui-text-primary);
  line-height: var(--lh-snug);
}
.history-item-time {
  font-size: var(--fs-micro);
  color: var(--ui-text-muted);
}

.drawer-footer { display: flex; justify-content: flex-end; padding:var(--ui-space-3) var(--ui-space-4-5); border-top: var(--ui-stroke-thin) solid var(--stroke); background: var(--ux-raised); }


.draft-input {
  margin: 0; height: var(--dt-component-editor-draft-height); resize: none; border: var(--ui-stroke-thick) solid var(--stroke); border-radius: var(--ui-radius-panel);
  padding: var(--ui-space-3) var(--ui-space-3-5); font-family: var(--app-font); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--ui-text-primary); outline: none; width: 100%;
}
.draft-input:focus { border-color: var(--ui-accent); }

@media (max-width: 900px) {
  .edit-panel.expanded-edit-panel {
    width: 95vw; height: 90vh;
  }
  .item-detail-drawer { left: auto; width: 100%; border-left: 0; border-radius: var(--ui-radius-panel); }
  .form-row { grid-template-columns:1fr; }
}
.edit-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-rhythm-inline); padding: var(--ui-space-4) var(--ui-space-4-5); border-top: var(--ui-stroke-thin) solid var(--ux-divider); }
/* Chân: [Xóa tất cả] [gợi ý phím …] [Lưu và đóng] — hành động phụ bên trái, chính bên phải. */
.edit-footer .edit-hint { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edit-hint { font-size: var(--fs-caption); color: var(--ui-text-muted); }
.edit-actions { display: flex; gap: var(--ui-space-2); }


/* ---------- Dark mode (settings / edit / config only) ---------- */
/* ==========================================================================
   GĐ4 (29/08/2026) — module Cài đặt: đã xóa 22 khối [data-mode="dark"] ở đây.

   Cụm này từng là bản fork thứ HAI của cùng một nhóm rule: nav item, nav icon,
   account shortcut, header, card đều đã có một bản fork nằm ngay cạnh rule
   Sáng (dòng ~2330-2400) rồi lại có một bản nữa ở đây. Bản ở đây nạp sau nên
   thắng, biến bản kia thành mã chết — sửa màu ở chỗ nhìn thấy đầu tiên thì
   không có tác dụng gì.

   Nay mỗi rule chỉ còn MỘT bản, đặt cạnh rule Sáng, và chênh lệch hai chế độ
   nằm trong token (--ux-hover / --ux-raised / --ux-fill / --ux-border /
   --ux-divider / --ux-input-bg) đúng theo quy tắc R4.

   Kèm theo: bỏ hết mã màu navy còn sót của bảng màu cũ (#eef1f7, #9ca6b8,
   #687286, #707b90, #7f899c, #dce1ea, #394f9d, #19352c, #3b4456, #1d222d) —
   chúng là xám XANH, lạc tông khỏi xám trung tính Google Keep mà phần còn lại
   của app đang dùng.

   02/10/2026: các fork màu chữ / màu thương hiệu (Google, Outlook) còn lại đã gộp vào
   rule gốc bằng light-dark(sáng, tối) — không còn selector [data-mode] trong file này.
   ========================================================================== */
/* GĐ2: bản fork chế độ Tối của sidebar Cài đặt đã bỏ — nền và viền do .ux-pane
   lo cho cả hai chế độ. */
/* .settings-main đã bám --ux-base cho cả hai chế độ (xem khối .settings-main),
   nên ở đây chỉ còn dải tiêu đề. */
.draft-input::placeholder { color: var(--ui-text-muted); }

/* .gcal-event-item.is-holiday màu chữ đã lấy từ --tone-orange-fg (tự đổi
   theo mode); .outlook-event-item nền/chữ đã theo item-tone-* + --sf-text.
   Không còn hex dark riêng ở đây. */

@media (prefers-reduced-motion: reduce) {
  .settings-nav-item, .sys-choice, .mode-choice { transition: none; }
  .settings-nav-item:hover{ transform: none; }
  .settings-section { animation: none; }
}
} /* @layer legacy */

/* ==========================================================================
   MÀN CÀI ĐẶT — GĐ4 (docs/BAO-CAO-CHUAN-HOA-UI-TOKEN-2026-09-18.md §7.2)
   Rule riêng của màn ở @layer modules (trên components): ô chọn tự chế
   (token-select) trong Cài đặt đọc như ô nhập chuẩn — body 14, chữ thường — cho
   khớp ô chọn/ô ngày bên cạnh. Ngữ cảnh khác của token-select xử lý ở màn tương ứng.
   ========================================================================== */
@layer modules {
  .settings-page .token-select-trigger {
    font-size: var(--fs-body);
    font-weight: var(--fw-normal);
  }
}

/* ==========================================================================
   CÀI ĐẶT — thứ bậc chữ + thẻ cân đối (BA báo 19/09/2026: nút khác cỡ chữ với
   nhãn, thẻ lệch chiều cao). Fluent 2 / Windows Settings: tiêu đề thẻ 16/600 →
   nhãn hàng 14 (cùng cỡ nút, ô chọn, ô nhập) → mô tả 12. Hai thẻ cùng hàng giãn
   bằng nhau (lưới stretch) thay vì thẻ ngắn để lại khoảng trống.
   ========================================================================== */
@layer modules {
  .settings-section {
    align-items: stretch;
  }
  .settings-card-head h3 {
    font-size: var(--fs-title);
  }
  .settings-page .settings-option-copy strong,
  .settings-page .settings-main .shortcut-name {
    font-size: var(--fs-body);
  }
  .settings-page .settings-option-copy small {
    font-size: var(--fs-caption);
  }
  /* Nút thương hiệu Google/Outlook giữ màu riêng nhưng cùng cỡ chữ với nút chuẩn bên cạnh. */
  .settings-page :is(.btn-google, .btn-outlook) {
    font-size: var(--fs-body);
  }
}

/* ==========================================================================
   CÀI ĐẶT — tái cấu trúc (BA chốt 23/09/2026): menu chia nhóm + nội dung MỘT
   CỘT, bề rộng tối đa theo token và CĂN GIỮA vùng nội dung (lề trái = lề phải).
   Lưới 2 thẻ cạnh nhau cũ kéo giãn thẻ ngắn theo thẻ cao (thẻ "Lịch ngoài" cao
   496px cho 2 công tắc) và để lại thẻ lẻ trống nửa bên phải.
   ========================================================================== */
@layer modules {
  .settings-page .settings-scroll {
    max-width: none;
    margin: 0;
    scrollbar-gutter: stable both-edges;
  }
  .settings-page .settings-section {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    max-width: var(--dt-component-settings-content-max-width);
    margin-inline: auto;
  }
  /* 12 mục + tiêu đề nhóm có thể cao hơn cửa sổ thấp: menu tự cuộn, thẻ tài
     khoản cuối sidebar vẫn ghim đáy. */
  .settings-page .settings-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
  /* Menu Cài đặt nhiều mục: không cao hơn nav-list chung (BA 28/09/2026) — đi theo trục
     Mật độ cùng cây Notebook/Project (Gọn 28 / Thoáng 32, BA 10/10/2026). */
  .settings-page .settings-nav-item:not(.settings-nav-toggle) {
    min-height: var(--ui-nav-item-h);
    height: var(--ui-nav-item-h);
  }
  /* Đang tìm (settingsMenuSearch.js): mục hiện thêm dòng mô tả/trích chữ khớp thì thành
     mục 2 dòng như thẻ tài khoản cuối menu — cao theo chữ, không tràn đè mục kế tiếp. */
  .settings-page .settings-nav-item:not(.settings-nav-toggle):is(.is-caption-hit, .has-search-snippet) {
    min-height: var(--ui-nav-item-h-two-line);
    height: auto;
    padding-block: var(--ui-space-1);
  }
  /* Tiêu đề nhóm = đúng một hàng nav, cách nhóm trên --ui-nav-group-gap — cùng nhịp
     cây Notebook/AntiNote (BA 13/10/2026). Chữ thẳng cột icon của mục. */
  .settings-page .settings-nav-group {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: var(--ui-nav-item-h);
    height: var(--ui-nav-item-h);
    /* Cột flex không gộp margin như cây Notebook/AntiNote: trừ khe hàng trên để khoảng
       nhìn thấy đúng bằng --ui-nav-group-gap ở cả Gọn lẫn Thoáng. */
    margin: calc(var(--ui-nav-group-gap) - var(--ui-nav-item-gap)) 0 var(--ui-nav-item-gap);
    padding-inline: var(--ui-nav-item-pad);
  }
  .settings-page .settings-nav-group:first-child {
    margin-top: 0;
  }
  .settings-page .settings-nav-divider {
    width: 100%;
    margin: var(--ui-space-2) 0;
    border: 0;
    border-top: var(--ui-stroke-thin) solid var(--ux-divider);
  }
  .settings-page .settings-nav-icon svg {
    width: var(--ui-icon-sm);
    height: var(--ui-icon-sm);
  }
}

/* ==========================================================================
   CÀI ĐẶT — thang chữ thống nhất (BA báo 23/09/2026 "font/cỡ chữ không đồng
   bộ"). Đo thực tế trước khi sửa: 7 cặp cỡ/độ đậm lẫn lộn — nhãn hàng 14/600
   đậm ngang nút, ô chọn dạng thẻ 12/500–600, chip thứ 12/700, ô ghi phím và
   số thứ tự Trợ giúp dùng phông MONO đậm, dòng "Chưa có mốc khôi phục" 13.33px
   (cỡ mặc định của small, lệch token). Thang của Windows 11 Settings:
     tiêu đề thẻ 16/600, nhãn hàng 14/400, mô tả 12/400 màu phụ;
     điều khiển (ô chọn, thẻ lựa chọn) 14/400; nút 14/600 (chuẩn .ui-btn);
     nhãn nhỏ (chip, phím, đơn vị) 12/600 — một phông giao diện duy nhất.
   ========================================================================== */
@layer modules {
  /* Công tắc: che ký tự ✓ mà JS ghi vào .checkbox-box và tô trạng thái bật.
     Trước đây ép bằng !important trong legacy, nay layer modules tự thắng. */
  :is(.checkbox-box, .settings-switch-input, .shortcut-switch input[type="checkbox"],
      .settings-option-row input[type="checkbox"]) {
    font-size: 0;
    color: transparent;
  }
  :is(.checkbox-box.checked, .settings-switch-input:checked,
      .shortcut-switch input[type="checkbox"]:checked, .settings-option-row input[type="checkbox"]:checked) {
    background: var(--ui-accent-solid);
    border-color: var(--ui-accent-solid);
  }

  .settings-page :is(.settings-option-copy strong, .shortcut-name, .sync-menu-title) {
    font-size: var(--fs-body);
    font-weight: var(--fw-normal);
    line-height: var(--lh-tight);
  }
  .settings-page :is(.settings-option-copy small, .backup-empty, .work-override-empty, .project-settings-empty) {
    font-size: var(--fs-caption);
    font-weight: var(--fw-normal);
    color: var(--ui-text-secondary);
  }
  /* Ô lựa chọn theo chữ của .ui-choice (body-sm 500); nhãn thẻ xem trước giữ body. */
  .settings-page .theme-card-label {
    font-size: var(--fs-body);
    font-weight: var(--fw-normal);
  }
  .settings-page :is(.setting-unit-control > span:last-child, .help-grid span) {
    font-family: inherit;
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
  }
  .settings-page .setting-unit-control > span:last-child {
    font-weight: var(--fw-normal);
    color: var(--ui-text-secondary);
  }
  .settings-page .profile-hero-name {
    font-size: var(--fs-title);
    font-weight: var(--fw-semibold);
  }

  /* Kiểu danh sách AntiNote: 3 lựa chọn trên MỘT hàng, mỗi ô 1/3 (BA 23/09/2026).
     Khuôn chung .quickadd-mode-picker là 2 cột nên ô thứ ba rơi xuống dòng. */
  .settings-page #antiNoteListStylePicker {
    grid-template-columns: repeat(3, minmax(0, var(--settings-choice-max-w)));
  }

  /* Ô ghi thông báo trung tính (xem trước ngày giờ, trạng thái liên kết…) dùng
     tông trung tính ở CẢ HAI chế độ; trước đây Sáng = xanh dương, Tối = xanh lá
     (màu "thành công") nên ô "Chưa kết nối" Outlook trông như đã xong. */
  .settings-page .settings-inline-note:not(.is-warning, .is-success, .is-attention) {
    background: var(--ux-fill);
    color: var(--ui-text-secondary);
  }
  .settings-page .settings-inline-note.is-success {
    background: var(--ui-success-bg);
    color: var(--ui-success);
  }
  .settings-page .settings-inline-note.is-attention {
    background: var(--ui-warning-bg);
    color: var(--ui-warning);
  }

  /* ---------- Ô ghi phím: phông giao diện, không mono đậm ---------- */
  .hotkey-recorder {
    min-width: 0;
    font-family: inherit;
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
  }
  .hotkey-recorder.recording {
    border-color: var(--ui-accent);
    background: color-mix(in srgb, var(--ui-accent) 12%, transparent);
    color: var(--ui-accent);
    box-shadow: var(--ui-control-ring);
  }

  /* ---------- Bảng phím tắt: 4 cột thẳng hàng ----------
     [tên hành động][công tắc][ô ghi phím][đặt lại]. Danh sách là lưới, mỗi hàng
     là subgrid nên cột nào cũng rộng bằng ô rộng nhất cả bảng; hàng thiếu công
     tắc/nút đặt lại để trống đúng ô đó thay vì dồn điều khiển sang phải. */
  .settings-page .shortcut-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    column-gap: var(--ui-space-2);
  }
  .settings-page .shortcut-list > * {
    grid-column: 1 / -1;
  }
  .settings-page .shortcut-row {
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
  }
  .settings-page .shortcut-row .shortcut-ctl { display: contents; }
  .settings-page .shortcut-row .shortcut-name { grid-column: 1; }
  .settings-page .shortcut-row .shortcut-switch { grid-column: 2; }
  .settings-page .shortcut-row .hotkey-recorder { grid-column: 3; width: 100%; }
  .settings-page .shortcut-row .btn-reset { grid-column: 4; }
  .settings-page .shortcut-group-title {
    margin: var(--ui-space-2) var(--ui-space-2) var(--ui-space-0-5);
    color: var(--ui-text-secondary);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
  }
  .settings-page .shortcut-list > .shortcut-group-title:first-child { margin-top: 0; }
  .settings-page .shortcut-group-title + .shortcut-row { border-top: none; }
  .settings-page .shortcut-footnote {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-1) var(--ui-space-2);
    margin-top: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-2) 0;
    border-top: var(--ui-stroke-thin) solid var(--ux-divider);
    color: var(--ui-text-secondary);
    font-size: var(--fs-caption);
  }

  /* Cùng khuôn cột cho danh sách phím tắt mở ứng dụng (Thanh điều hướng):
     [công tắc hiện][tên][ô ghi phím][Xoá]. */
  .settings-page #navShortcutList {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    column-gap: var(--ui-space-2);
    row-gap: var(--ui-space-1);
  }
  .settings-page #navShortcutList > .nav-menu-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
  }
  .settings-page #navShortcutList .settings-field-actions { display: contents; }
  .settings-page #navShortcutList .hotkey-recorder { width: 100%; }

  /* ---------- Trang Ngày nghỉ & Ngày lễ ---------- */
  /* Form thêm ngày trên MỘT hàng: Từ → Đến · Loại · Ghi chú · Thêm. */
  .settings-page .work-override-add {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 2fr) auto;
    align-items: center;
    gap: var(--ui-space-2);
    padding: 0 var(--ui-space-2);
  }
  .settings-page .work-override-add > * { min-width: 0; }
  .settings-page .work-override-add .token-select-wrap { width: auto; }
  .settings-page .holiday-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--ui-space-2);
    margin-top: var(--ui-space-2);
    padding: var(--ui-space-2) var(--ui-space-2) 0;
    border-top: var(--ui-stroke-thin) solid var(--ux-divider);
  }
  .settings-page .holiday-toolbar .ui-segmented { max-width: 100%; overflow-x: auto; }
  .settings-page .holiday-list { display: flex; flex-direction: column; gap: var(--ui-space-1); }
  /* Bảng: [loại][ngày][thứ][tên…][nguồn][hành động] — subgrid để các cột thẳng. */
  .settings-page .holiday-table {
    display: grid;
    grid-template-columns: auto auto auto minmax(0, 1fr) auto auto;
    column-gap: var(--ui-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .settings-page .holiday-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    min-height: var(--ui-list-row-min);
    padding: 0 var(--ui-space-2);
    border-top: var(--ui-stroke-thin) solid var(--ux-divider);
    border-radius: var(--ui-radius-control);
    color: var(--ui-text-primary);
    font-size: var(--fs-body);
  }
  .settings-page .holiday-row:first-child { border-top: none; }
  .settings-page .holiday-row:hover { background: var(--ux-hover); }
  .settings-page .holiday-row.is-next { background: color-mix(in srgb, var(--ui-accent) 8%, transparent); }
  .settings-page .holiday-row .work-override-kind {
    justify-self: start;
    padding: 0 var(--ui-space-1-5);
    border-radius: var(--ui-radius-control);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
  }
  .settings-page .holiday-row .work-override-kind.is-off { background: color-mix(in srgb, var(--ui-danger) 14%, transparent); color: var(--ui-danger); }
  .settings-page .holiday-row .work-override-kind.is-work { background: color-mix(in srgb, var(--ui-accent) 14%, transparent); color: var(--ui-accent); }
  .settings-page .holiday-row .work-override-kind.is-holiday { background: color-mix(in srgb, var(--ui-warning) 16%, transparent); color: var(--ui-warning); }
  .settings-page .holiday-date { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
  .settings-page :is(.holiday-weekday, .holiday-origin) { color: var(--ui-text-secondary); font-size: var(--fs-caption); }
  .settings-page .holiday-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .settings-page .holiday-row.is-overridden :is(.holiday-date, .holiday-name) { color: var(--ui-text-secondary); text-decoration: line-through; }
  .settings-page .holiday-pagination {
    margin-top: var(--ui-space-1);
    padding: var(--ui-space-2) var(--ui-space-2) 0;
  }
  .settings-page .holiday-pagination .work-override-group-clear { opacity: 1; }
  .settings-page .holiday-page-indicator { font-variant-numeric: tabular-nums; }

  /* Hàng "Sao lưu ngay"/"Đồng bộ ngay" mang nền --ux-row CHỈ ở chế độ Tối (fork
     legacy) nên trông như hộp nổi giữa các hàng trong suốt; hàng nút Trợ giúp
     thiếu lề trong nên lệch 8px so với các hàng khác. */
  .settings-page .sync-schedule-row { background: transparent; }
  .settings-page .sync-schedule-row:hover { background: var(--ux-hover); }
  .settings-page .settings-help-btn-row { padding-inline: var(--ui-space-2); }
}

/* ==========================================================================
   CÀI ĐẶT — thứ bậc chữ + nhịp khoảng cách (BA 23/09/2026, đối chiếu Windows 11
   Settings / macOS / GitHub). Đo trước khi sửa: không có tiêu đề trang; chữ
   "Cài đặt AntiTask" 13/700 đậm nhất trang; mục menu 13/600 đậm hơn nội dung
   14/400; tiêu đề nhóm menu VIẾT HOA giãn chữ; hàng cao 32px không đệm; nhãn
   dính mô tả 1px; tiêu đề thẻ lệch 4px so với nhãn hàng; không kẻ giữa hàng.
   Chốt: tiêu đề trang 20/600 · thẻ 16/600 · nhãn 14/400 · mô tả 12/400 ·
   menu 13/400 (mục chọn 13/600) · nhóm menu 12/600 chữ thường. Hàng ≥ 48px
   (control 32 + đệm 8 hai đầu), kẻ mảnh giữa hàng, tiêu đề thẻ thẳng cột nhãn.
   ========================================================================== */
@layer modules {
  /* Tên mục đang mở — phần cuối breadcrumb "Cài đặt / Chung" trên topbar (BA 10/10/2026,
     trước là tiêu đề 20px ở hàng .settings-header riêng). Cùng cỡ phần cuối breadcrumb Notebook. */
  .topbar .settings-page-title {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--ui-text-primary);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    line-height: var(--lh-flat);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Menu: chữ thường kể cả mục đang chọn (như cây Notebook — đậm lên khi chọn làm
     chữ chạy, BA 12/10 + 13/10/2026); tiêu đề nhóm chữ mờ như "Dự án/Nhóm". */
  .settings-page .settings-nav-copy strong { font-weight: var(--fw-normal); }
  .settings-page .settings-nav-group {
    color: var(--ui-text-muted);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    letter-spacing: normal;
    text-transform: none;
  }

  /* Thẻ: tiêu đề thẳng cột với nhãn hàng, cách hàng đầu một bậc. */
  .settings-page .settings-section { gap: var(--ui-space-4); }
  .settings-page .settings-card-head {
    padding: var(--ui-space-3) var(--ui-space-4) var(--ui-space-2);
  }

  /* Hàng cài đặt: cao ≥ 48px, nhãn–mô tả cách 2px, kẻ mảnh giữa các hàng. */
  .settings-page :is(.settings-option-row, .settings-field-row, .theme-setting-row, .sync-schedule-row, .shortcut-row) {
    min-height: calc(var(--ui-size-md) + var(--ui-space-2) * 2);
    margin-block: 0; /* rule cũ cộng margin 8px giữa các hàng công tắc liền nhau */
    padding-block: var(--ui-space-2);
    border-radius: 0;
  }
  .settings-page :is(.settings-option-row, .settings-field-row, .theme-setting-row, .sync-schedule-row, .shortcut-row)
    + :is(.settings-option-row, .settings-field-row, .theme-setting-row, .sync-schedule-row, .shortcut-row),
  .settings-page :is(.settings-option-row, .settings-field-row, .theme-setting-row, .sync-schedule-row, .shortcut-row)
    + .hidden + :is(.settings-option-row, .settings-field-row, .theme-setting-row, .sync-schedule-row, .shortcut-row) {
    border-top: var(--ui-stroke-thin) solid var(--ux-divider);
  }
  .settings-page .settings-card-body { gap: 0; }
  .settings-page .settings-option-copy { gap: var(--ui-space-0-5); }
  .settings-page :is(.settings-option-copy strong, .settings-option-copy small) { line-height: var(--lh-snug); }

  /* Cài đặt › Ủng hộ (chỉ hiện ở chế độ cộng đồng). Khung QR dùng chung bộ
     token premium-visual-qr với khối ủng hộ trên trang Premium. */
  /* Mép chữ = padding thân thẻ (space-2) + padding hàng chuẩn (space-2), thẳng với tiêu đề thẻ và các hàng .settings-option-row. */
  .settings-page .settings-donate-body { gap: var(--ui-space-3); padding: var(--ui-space-1) calc(var(--ui-space-2) * 2) var(--ui-space-3); }
  .settings-donate-lead { margin: 0; color: var(--ui-text-secondary); font-size: var(--fs-body); line-height: var(--lh-normal); }
  .settings-donate-layout { display: flex; align-items: flex-start; gap: var(--ui-space-5); min-width: 0; }
  .settings-donate-qr-frame { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--ui-space-2); margin: 0; }
  .settings-donate-qr {
    display: block;
    width: var(--dt-component-premium-visual-qr-frame-size);
    height: var(--dt-component-premium-visual-qr-frame-size);
    padding: var(--ui-space-2);
    border: var(--ui-stroke-thin) solid var(--dt-component-premium-visual-qr-border);
    border-radius: var(--ui-radius-panel);
    background: var(--ux-raised);
    box-shadow: var(--dt-component-premium-visual-qr-shadow);
    object-fit: contain;
    box-sizing: border-box;
  }
  .settings-donate-qr-frame figcaption { color: var(--ui-text-secondary); font-size: var(--fs-caption); text-align: center; }
  .settings-donate-info { flex: 1 1 0; display: flex; flex-direction: column; gap: var(--ui-space-3); min-width: 0; }
  .settings-donate-row { display: flex; flex-direction: column; gap: var(--ui-space-1); min-width: 0; }
  .settings-donate-label { color: var(--ui-text-secondary); font-size: var(--fs-caption); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
  .settings-donate-account-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2) var(--ui-space-3); min-width: 0; }
  .settings-donate-account { min-width: 0; color: var(--ui-text-primary); font-size: var(--fs-body); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
  .settings-donate-value { color: var(--ui-text-primary); font-size: var(--fs-body); overflow-wrap: anywhere; }
  .settings-donate-message { margin: 0; color: var(--ui-text-secondary); font-size: var(--fs-body); line-height: var(--lh-normal); }
  :is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .settings-donate-layout { flex-direction: column; }
  :is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .settings-donate-info { width: 100%; }
}

/* ==========================================================================
   CÀI ĐẶT — BIẾN THỂ FLAT (GĐ5.3, docs/PLAN-FLAT-SURFACE-GD5.md)
   Chỉ khi html[data-surface="flat"]. Các thẻ trong một tab thành MỘT NHÓM danh
   sách: liền nhau (không khe), cách nhau đúng một vạch, chỉ bo 4 góc ngoài của
   nhóm (--ui-flat-group-radius); tiêu đề thẻ giữ vai trò tiêu đề mục trong nhóm.
   Thẻ đầu/cuối tính theo thẻ ĐANG HIỆN — tab có thẻ bị ẩn (.hidden: theo quyền,
   theo trạng thái đăng nhập…) vẫn bo đúng góc. Layer modules để thắng "THẺ
   CHUẨN" (@layer components) và các luật modules phía trên theo thứ tự nạp.
   ========================================================================== */
@layer modules {
  html[data-surface="flat"] .settings-page .settings-section {
    gap: var(--ui-flat-gap);
  }
  html[data-surface="flat"] .settings-page .settings-section > .settings-card {
    border-width: 0 var(--ui-flat-divider-w) var(--ui-flat-divider-w);
    border-radius: var(--ui-flat-radius-inner);
    box-shadow: var(--ui-flat-shadow);
  }
  html[data-surface="flat"] .settings-page .settings-section > .settings-card:not(.hidden):not(.settings-card:not(.hidden) ~ .settings-card) {
    border-top-width: var(--ui-flat-divider-w);
    border-top-left-radius: var(--ui-flat-group-radius);
    border-top-right-radius: var(--ui-flat-group-radius);
  }
  html[data-surface="flat"] .settings-page .settings-section > .settings-card:not(.hidden):not(:has(~ .settings-card:not(.hidden))) {
    border-bottom-left-radius: var(--ui-flat-group-radius);
    border-bottom-right-radius: var(--ui-flat-group-radius);
  }
  /* GĐ5.5 — menu con Cài đặt: ô icon thành glyph trần (mục đang chọn vẫn đọc
     bằng nền dòng + màu accent của glyph), cùng quyết định với menu/dialog. */
  html[data-surface="flat"] .settings-nav-icon,
  html[data-surface="flat"] .settings-nav-item.active .settings-nav-icon {
    background: transparent;
  }
}

/* ==========================================================================
   FORM NGÀY — nút "Dự án" (BA 10/10/2026): là một Ô CHỌN cùng hàng với ô Ưu tiên /
   Giờ nhắc, nên đọc như .token-select-trigger (nền ô nhập, viền mảnh, chữ thường),
   không như nút phụ nền xám chữ đậm. Phải ở @layer modules: luật cũ ở legacy bị
   .ui-btn (@layer components) đè nên chữ vẫn semibold.
   ========================================================================== */
@layer modules {
  .ui-btn.quick-add-project-btn {
    gap: var(--ui-space-1-5);
    padding: 0 var(--ui-space-2-5);
    border: var(--ui-stroke-thin) solid var(--stroke);
    background-color: rgb(var(--ui-surface-raised-rgb));
    color: var(--ui-text-primary);
    font-weight: var(--fw-normal);
  }
  html:not([data-surface="flat"]) .ui-btn.quick-add-project-btn { box-shadow: var(--ui-elevation-1); }
  .ui-btn.quick-add-project-btn:hover {
    background-color: rgb(var(--ui-surface-fill-rgb));
    border-color: color-mix(in srgb, var(--ui-accent) 40%, transparent);
    color: var(--ui-accent);
  }
  .ui-btn.quick-add-project-btn:focus-visible {
    outline: none;
    border-color: var(--ux-control-border-active);
    box-shadow: var(--ui-control-ring);
  }
  .quick-add-project-btn .quick-add-project-caret {
    width: var(--ui-icon-xs);
    height: var(--ui-icon-xs);
    color: var(--ui-text-secondary);
  }
}

/* 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 {
  [data-material="glass"] .settings-page { background: var(--ux-panel); border-color: var(--ux-border); }
  /* Kính trên hình nền: Tối giữ nền panel (đọc được), Sáng để trong như các trang khác. */
  html[data-material="glass"] .settings-page { background: light-dark(var(--surface-page), var(--ux-panel)); }
  .quickadd-mock { background: transparent; border: none; padding: 0; }
  .is-dragging { transition: none; }
}

/* Trang khởi động lần đầu (BA 11/10/2026, components/guide/firstRunSetup.js).
   Khay neo mép phải, KHÔNG phủ màu lên app: vùng app còn lại là bản xem trước sống
   của mọi lựa chọn. Vỏ overlay (bẫy focus, Esc, inert nền) và nền panel
   (.overlay-panel) do overlayManager lo — ở đây chỉ hình học và nội dung khay.
   Khổ compact/tight: khay thành tấm đáy rộng hết bề ngang. */
@layer modules {
  .first-run-overlay.overlay[data-overlay-kind="modal"] {
    align-items: stretch;
    justify-content: flex-end;
    padding: var(--ui-space-3);
    background: transparent;
  }
  .first-run-panel {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: min(var(--dt-dimension-layout-360), 100%);
    max-height: 100%;
    min-height: 0;
    padding: var(--ui-space-4);
    gap: var(--ui-space-4);
  }
  .first-run-head {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    min-height: var(--ui-size-sm);
  }
  .first-run-progress {
    display: flex;
    gap: var(--ui-space-1);
  }
  .first-run-progress-dot {
    width: var(--ui-space-4);
    height: var(--ui-space-1);
    border-radius: var(--ui-radius-pill);
    background: var(--ux-border);
    transition: background-color var(--ui-duration-standard) var(--motion-standard);
  }
  .first-run-progress-dot.is-done { background: var(--ui-accent); }
  .first-run-step-text {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ui-text-secondary);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
  }
  .first-run-skip { flex: 0 0 auto; }
  .first-run-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-4);
  }
  .first-run-logo {
    width: var(--ui-size-touch);
    height: var(--ui-size-touch);
    border-radius: var(--ui-radius-lg);
  }
  .first-run-title {
    margin: 0;
    font-size: var(--fs-title);
    font-weight: var(--fw-title);
    line-height: var(--lh-title);
    color: var(--ui-text-primary);
  }
  .first-run-text,
  .first-run-hint {
    margin: 0;
    color: var(--ui-text-secondary);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }
  .first-run-hint { font-size: var(--fs-caption); line-height: var(--lh-caption); }
  .first-run-outline {
    margin: 0;
    padding-left: var(--ui-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-1);
    color: var(--ui-text-secondary);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }
  .first-run-field {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
  }
  .first-run-label {
    color: var(--ui-text-secondary);
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-caption);
  }
  /* Nhãn song ngữ (chọn ngôn ngữ): câu hỏi cỡ body, bản dịch cỡ caption bên dưới —
     bản dịch nhỏ hơn mà vẫn giữ sàn chữ caption của ARS-1. */
  .first-run-label:has(.first-run-label-alt) {
    display: flex;
    flex-direction: column;
  }
  .first-run-label-main {
    color: var(--ui-text-primary);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }
  .first-run-label-alt {
    font-weight: var(--fw-body);
  }
  .first-run-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ui-space-2);
  }
  .first-run-choice { justify-content: center; text-align: center; }
  .first-run-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-2);
    color: var(--ui-text-secondary);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
  }
  .first-run-swatches {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ui-space-2);
  }
  .first-run-swatch {
    box-sizing: border-box;
    aspect-ratio: 3 / 2;
    min-width: 0;
    padding: 0;
    border: var(--ui-resizer-line) solid var(--ux-input-border);
    border-radius: var(--ui-radius-control);
    background: var(--ux-raised);
    color: var(--ui-text-secondary);
    font-family: inherit;
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: box-shadow var(--ui-duration-fast) var(--ui-ease), border-color var(--ui-duration-fast) var(--ui-ease);
  }
  .first-run-swatch:hover { border-color: var(--ui-control-border-hover); }
  .first-run-swatch[aria-checked="true"] {
    border-color: var(--ui-accent);
    box-shadow: inset 0 0 0 var(--ui-resizer-line) var(--ui-accent);
  }
  .first-run-swatch:focus-visible {
    outline: var(--ui-focus-ring-width) solid var(--ui-focus-ring);
    outline-offset: var(--ui-focus-ring-offset);
  }
  .first-run-modules { display: flex; flex-direction: column; gap: var(--ui-space-2); }
  .first-run-modules .checkbox-row + .checkbox-row { margin-top: 0; }
  .first-run-module.is-locked { cursor: default; }
  .first-run-module.is-locked:hover { border-color: var(--stroke); color: var(--ui-text-secondary); }
  .first-run-shortcuts {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-2);
  }
  .first-run-shortcut {
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    min-height: var(--ui-size-md);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--ui-text-primary);
  }
  .first-run-shortcut-label { flex: 1 1 auto; min-width: 0; }
  .first-run-kbd { flex: 0 0 auto; }
  .first-run-thanks {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ui-space-2);
    padding-top: var(--ui-space-4);
    border-top: var(--ui-stroke-thin) solid var(--ux-border);
  }
  .first-run-foot {
    display: flex;
    justify-content: flex-end;
    gap: var(--ui-space-2);
  }
  .first-run-foot [hidden],
  .first-run-head [hidden] { display: none; }

  :is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .first-run-overlay.overlay[data-overlay-kind="modal"] {
    align-items: flex-end;
    justify-content: stretch;
    padding: 0;
  }
  :is(html[data-layout-mode="compact"], html[data-layout-mode="tight"]) .first-run-panel {
    width: 100%;
    max-height: 70%;
    border-radius: var(--ui-radius-panel) var(--ui-radius-panel) 0 0;
  }
}