@layer legacy {
/* Shared component recipes.  They are deliberately scoped to UI owners so
   canvas and crop geometry retain their functional dimensions. */
/* Control có viền/nền riêng (input/select/textarea văn bản) dùng vòng sáng
   mềm ở trạng thái :focus (xem "Ô NHẬP CHUẨN" và "Foundation v2" bên dưới),
   không outline cứng — theo đúng quy ước Fluent 2/Material 3/HIG: outline
   cứng chỉ dành cho control không có viền (button) hoặc control dạng bật/tắt
   (checkbox/radio/range/file) vốn không có chỗ nào khác để đánh dấu focus. */
:is(
  button:not(.token-date-trigger):not(.token-select-trigger):not(.antiscreenshot-stepper-btn),
  [role="button"],
  input[type="checkbox"],
  input[type="radio"],
  input[type="range"],
  input[type="file"]
):focus-visible {
  outline-offset: var(--ui-focus-ring-offset);}



:is(.topbar .icon-btn, .topbar .notics-header-toggle, .topbar .notics-icon-btn,
    .topbar .notics-open-project-btn, .topbar .glass-icon-btn,
    .topbar .view-mode-wrap .glass-icon-btn) {
  min-width: var(--ui-header-control-size);}

/* Mọi nút icon trên header cùng một cỡ icon (token header, BA 12/10/2026 — trước đây
   nút Tạo mới của Notebook lọt selector nên icon 15 lệch các nút 16 bên cạnh). */
.topbar :is(.icon-btn, .picker-btn, .notics-header-toggle,
  .notics-icon-btn, .notics-open-project-btn, .notics-create-btn, .antiscreenshot-capture-btn,
  .glass-icon-btn, .ui-btn--icon) svg { width: var(--ui-header-icon-size); height: var(--ui-header-icon-size); }

/* Chỉ ghim viền mảnh lúc nghỉ; hover/focus nhường cho luật trạng thái trong
   styles.css (viền hover trung tính, focus = border.focus). Ghim cả trạng thái
   focus làm ô tìm kiếm mất hẳn dấu hiệu focus khi đã bỏ quầng sáng. */

.topbar-search-wrap {
  max-height: var(--ui-header-control-size);}

/* Cỡ tab Project/Dashboard trên header: "SEGMENTED CHUẨN" (@layer components). */

.topbar .week-nav-cluster {
  max-height: var(--ui-header-control-size);
  box-sizing: border-box;
  display: flex !important;
  background: transparent;
  border: var(--ui-stroke-thin) solid transparent;
  box-shadow: none;}
.topbar .week-nav-cluster .picker-wrap {
  display: inline-flex !important;}
.topbar .week-nav-cluster :is(.icon-btn, .picker-btn) {
  background: transparent;
  border-color: transparent;
  display: flex !important;}
.topbar .week-nav-cluster .icon-btn {
  min-width: calc(var(--ui-header-control-size) - var(--ui-header-cluster-inset));
  max-width: calc(var(--ui-header-control-size) - var(--ui-header-cluster-inset));}


:is(.topbar .icon-btn, .topbar .picker-btn,
    .topbar .notics-header-toggle, .topbar .notics-icon-btn,
    .topbar .notics-open-project-btn, .topbar .antiscreenshot-capture-btn:not(.is-primary),
    .topbar .glass-icon-btn, .topbar .antiscreenshot-zoom > button):active:not(:disabled) {
  transform: none !important;}


:is(.topbar .antiscreenshot-capture-btn.is-primary) svg {
  stroke: currentColor;
}


:is(.topbar .antiscreenshot-capture-btn.is-primary):active:not(:disabled) {
  transform: none !important;}

/* Luật "nút phụ nền panel" (legacy). GĐ4 Notebook lát 2: .notics-head-btn đã hết
   nơi dùng (nút đầu cột về .ui-btn) nên bỏ khỏi danh sách. */




.notics-resizer {
  position: relative;}
/* Thanh chia cột (BA 12/10/2026): rê chuột chỉ đổi con trỏ, không tô gì; ĐANG kéo
   mới vẽ vạch xám --ui-resizer-drag-color. Vạch chia lúc nghỉ do viền cột lo. */
.notics-resizer::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - (var(--ui-resizer-drag-line) / 2));
  width: var(--ui-resizer-drag-line);
  background: transparent;
  pointer-events: none;
}
.notics-resizer.is-resizing::after { background: var(--ui-resizer-drag-color); }

/* --ux-header / --ux-card đã nhân sẵn --a-header / --a-content theo material
   (styles.css:14757). Trước đây hai rule này dùng --ui-panel-alpha — thang alpha
   thứ hai đã bị bỏ, xem ghi chú trong ui-tokens.css.
   .antiscreenshot-toolbar bỏ khỏi danh sách (BA 2026-09-26): thanh công cụ Art
   Editor cần mặt phẳng ĐẶC cố định, không ăn theo hình nền/wallpaper như các
   thanh "kính" còn lại — nền riêng ở .antiscreenshot-toolbar (screenshot.css). */

/* Khung thẻ (Dashboard/Cài đặt/Premium): "THẺ CHUẨN" (@layer components) cuối file — GĐ4. */

/* Nền/viền/bóng của 9 popup lịch/shell nay do "KHUNG POPOVER CHUẨN" (@layer components) đảm nhận. */

/* Khung dialog (bo góc/nền/bóng) chuyển sang @layer components — xem "KHUNG DIALOG CHUẨN" cuối file. */

/* Bo góc/khung lớp nổi chuyển sang @layer components — xem "KHUNG POPOVER CHUẨN" cuối file. */


/* Foundation v2 — recipe hình học dùng chung. Kích thước nằm trong DTCG;
   component chỉ chọn vai trò, không tự đặt một bộ px riêng. */
:is(.form-input, .form-select, .setting-select,
    .setting-number, .text-input, .feedback-body textarea,
    .ui-input, .ui-select) {
  min-height: var(--ui-field-h);
  min-width: 0;
  padding-inline: var(--ui-field-pad-inline);
  border-color: var(--ui-divider);
  border-radius: var(--ui-radius-control);
  background: var(--ux-raised);
  color: var(--ui-text-primary);
  font-family: inherit;
  font-size: var(--fs-body);
}

:is(.form-input, .form-select, .setting-select,
    .setting-number, .text-input, .feedback-body textarea,
    .ui-input, .ui-select):focus {
  outline: none;
  border-color: var(--ux-control-border-active);
  box-shadow: var(--ui-control-ring);
}

/* Vạch đáy đậm ≥ 3:1 lúc nghỉ (WCAG 1.4.11 — kiểu Fluent 2 TextBox), 3 cạnh còn lại giữ
   viền mảnh. Rule riêng với :not(:focus):not(:disabled) (0,3,0) để thắng các khai báo
   `border`/`border-color` của từng màn (vd. settings.css .text-input, styles.css
   html[data-mode] :is(...)) mà không cần !important; khi focus, rule trên đổi cả 4 cạnh. */
:is(.form-input, .form-select, .setting-select,
    .setting-number, .text-input, .feedback-body textarea,
    .ui-input, .ui-select, .quick-task-input):not(:focus):not(:disabled) {
  border-bottom-color: var(--ux-input-border-strong);
}

/* ==========================================================================
   UNIFIED BADGE & CHIP RECIPE (.ui-badge, .ui-chip)
   ========================================================================== */
:is(.ui-badge, .ui-chip) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-1);
  min-height: var(--ui-badge-h);
  height: var(--ui-badge-h);
  padding-inline: var(--ui-badge-pad-inline);
  box-sizing: border-box;
  border-radius: var(--ui-radius-control);
  font-family: inherit;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-none, 1);
  white-space: nowrap;
  user-select: none;
  border: var(--ui-resizer-line) solid var(--ui-divider);
  background: var(--ux-raised);
  color: var(--ui-text-primary);
}

:is(.ui-badge--pill, .ui-chip--pill) {
  border-radius: var(--ui-radius-full);
  padding-inline: var(--ui-space-2);
}

.ui-badge--danger {
  background: var(--ui-danger-bg);
  color: var(--ui-danger);
  border-color: var(--ui-danger-line);
}

.ui-badge--warning {
  background: var(--ui-warning-bg);
  color: var(--ui-warning);
  border-color: var(--ui-warning-line);
}

.ui-badge--success {
  background: var(--ui-success-bg);
  color: var(--ui-success);
  border-color: var(--ui-success-line);
}

.ui-badge--accent {
  background: var(--ui-action-active);
  color: var(--ui-accent);
  border-color: transparent;
}

:is(.settings-nav-item, .settings-option-row, .ws-item, .project-list-item,
    .widget-menu-item, .token-select-option) {
  min-height: var(--ui-list-row-min);
  column-gap: var(--ui-list-row-gap);
}

:is(.settings-card, .dashboard-kpi-card, .premium-page-card,
    .notespeed-all-card, .project-note-card, .antiscreenshot-tile) {
  border-radius: var(--ui-radius-panel);
}

.overlay {
  padding: var(--ui-dialog-edge-gap);
  overflow: hidden;
}

:is(.overlay-panel) {
  min-width: 0;
  max-width: 100%;
  max-height: calc(100dvh - var(--ui-dialog-edge-gap) * 2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--ui-radius-panel);
  background: var(--ux-overlay);
  color: var(--ui-text-primary);
}

:is(.overlay-head, .overlay-body) { padding: var(--ui-panel-pad); }
.overlay-head { gap: var(--ui-panel-gap); }
.overlay-foot { padding: var(--ui-space-3) var(--ui-panel-pad) var(--ui-panel-pad); }
.overlay-foot-actions { gap: var(--ui-panel-gap); }

.overlay-panel.overlay-panel--sm { width: min(100%, var(--ui-dialog-max-sm)); }
.overlay-panel.overlay-panel--md { width: min(100%, var(--ui-dialog-max-md)); }
.overlay-panel.overlay-panel--lg { width: min(100%, var(--ui-dialog-max-lg)); }
.overlay-panel.overlay-panel--xl { width: min(100%, var(--ui-dialog-max-xl)); }

:is(.overlay-body) {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

:is(.overlay-foot, .overlay-foot-actions) {
  flex-wrap: wrap;
}

:is(.notics-empty-state) {
  width: min(100%, var(--ui-empty-max));
  gap: var(--ui-empty-gap);
  margin-inline: auto;
}

/* Nhãn rail được phép xuống dòng ở dấu cách, nhưng không được bẻ giữa tên
   sản phẩm như Quick|Note hoặc Note|Book. Tooltip/aria-label luôn giữ tên đủ. */
#navRail .nav-rail-label {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* Actionable Empty State — Chuẩn W3C Design Tokens & Nielsen Norman Heuristic #10 */
.ux-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--ui-space-8) var(--ui-space-4);
  margin: auto;
  max-width: var(--dt-dimension-layout-440);
  min-height: var(--dt-dimension-layout-224);
  animation: ux-fade-in var(--ui-duration-fast) var(--ui-ease) both;
}

.ux-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--dt-dimension-layout-56);
  height: var(--dt-dimension-layout-56);
  margin-bottom: var(--ui-space-3);
  border-radius: var(--ui-radius-circle);
  background: color-mix(in srgb, var(--ui-accent) 12%, transparent);
  color: var(--ui-accent);
  border: var(--ui-stroke-thin) solid color-mix(in srgb, var(--ui-accent) 24%, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ui-accent) 15%, transparent); /* audit-keep: quầng sáng màu trạng thái (glow), không phải bậc độ nổi */
}

.ux-empty-title {
  margin: 0 0 var(--ui-space-2);
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  color: var(--ui-text-primary);
  line-height: var(--lh-title, 1.35);
}

.ux-empty-desc {
  margin: 0 0 var(--ui-space-4);
  font-size: var(--fs-body);
  color: var(--ui-text-muted);
  line-height: var(--lh-body-sm, 1.45);
  max-width: var(--dt-dimension-layout-360);
}

.ux-empty-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
  flex-wrap: wrap;
  justify-content: center;
}

.ux-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
  padding: 0 var(--ui-space-4);
  height: var(--ui-size-md);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
}

.ux-empty-secondary-btn {
  height: var(--ui-size-md);
  font-size: var(--fs-body);
}

.ux-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ui-space-4-5);
  height: var(--ui-space-4-5);
  padding: 0 var(--ui-space-1);
  font-family: inherit;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  color: var(--ui-text-muted);
  background: var(--ux-raised);
  border: var(--ui-stroke-thin) solid var(--stroke);
  border-radius: var(--ui-radius-control);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--stroke) 80%, transparent); /* audit-keep: bóng riêng của thành phần, không thuộc bậc elevation chuẩn */
  letter-spacing: 0.2px;
}


@keyframes ux-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Keyboard Shortcuts Cheat Sheet Dialog — Chuẩn NN/g Heuristic #6 & #7 */
/* Khung (bo, viền, nền, bóng, hiệu ứng mở) theo .ui-dialog — KHUNG DIALOG CHUẨN;
   ở đây chỉ còn bề rộng riêng (chiều cao: .ui-dialog.shortcuts-dialog-card). */
.shortcuts-dialog-card {
  width: min(var(--dt-dimension-layout-800), 94vw);
}

.shortcuts-dialog-head {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  padding: var(--ui-space-3) var(--ui-space-4);
  border-bottom: var(--ui-stroke-thin) solid var(--stroke);
  background: var(--ux-raised);
}

.shortcuts-dialog-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-2);
  flex: 0 0 auto;
}

.shortcuts-head-icon {
  display: inline-flex;
  color: var(--ui-accent);
}

.shortcuts-dialog-title-wrap h3 {
  margin: 0;
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  color: var(--ui-text-primary);
  white-space: nowrap;
}

.shortcuts-search-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}

.shortcuts-dialog-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--ui-space-4);
}

.shortcuts-dialog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: var(--ui-space-4);
}

.shortcut-category {
  background: var(--ux-raised);
  border: var(--ui-stroke-thin) solid var(--stroke);
  border-radius: var(--ui-radius-panel);
  padding: var(--ui-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2-5);
}

.shortcut-category-head {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  padding-bottom: var(--ui-space-1-5);
  border-bottom: var(--ui-stroke-thin) solid color-mix(in srgb, var(--stroke) 60%, transparent);
}

.shortcut-category-icon {
  display: inline-flex;
  color: var(--ui-accent);
}

.shortcut-category-title {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--ui-text-primary);
}

.shortcut-category-list {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1-5);
}

.shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-2);
  padding: var(--ui-space-1) 0;
}

.shortcut-desc {
  font-size: var(--fs-body);
  color: var(--ui-text-primary);
  line-height: var(--lh-body-sm);
}

.shortcut-keys {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
  flex-shrink: 0;
}

.shortcut-plus {
  font-size: var(--fs-micro);
  color: var(--ui-text-muted);
}

.shortcuts-dialog-foot {
  padding: var(--ui-space-2-5) var(--ui-space-4);
  border-top: var(--ui-stroke-thin) solid var(--stroke);
  background: var(--ux-raised);
  text-align: center;
}

.shortcuts-foot-tip {
  font-size: var(--fs-caption);
  color: var(--ui-text-muted);
}

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

/* Groups & Quick Filter Chips trong Tag/Project Filter Panel */
.tag-filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--ui-density-gap);
  padding: var(--ui-space-0-5) var(--ui-space-1);
}

.tag-filter-group + .tag-filter-group {
  padding-top: var(--ui-density-pad-row);
  border-top: var(--ui-stroke-thin) solid var(--stroke);
}

.tag-filter-group-title {
  color: var(--ui-text-muted);
  font: var(--fw-semibold) var(--fs-micro)/var(--lh-tight) var(--app-font);
  letter-spacing: var(--ls-caps-lg);
  user-select: none;
}

.calendar-quick-filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--ui-space-1-5);
  padding: 0;
}

.tag-filter-panel #tagFilterList {
  padding: 0;
}

.calendar-quick-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
  min-height: var(--ui-size-sm);
  max-width: 100%;
  padding: var(--ui-space-1) var(--ui-space-2);
  border: var(--ui-stroke-thin) solid var(--ui-divider);
  border-radius: var(--ui-radius-control);
  color: var(--ui-text-secondary);
  background: var(--ui-surface-panel);
  font: var(--fw-semibold) var(--fs-micro)/var(--lh-none) var(--app-font);
  cursor: pointer;
  user-select: none;
  transition: color var(--ui-duration-fast) var(--ui-ease), background-color var(--ui-duration-fast) var(--ui-ease), border-color var(--ui-duration-fast) var(--ui-ease);
}

.calendar-quick-chip > * {
  position: relative;
  z-index: 1;
}

.calendar-quick-chip svg {
  width: var(--ui-icon-xs);
  height: var(--ui-icon-xs);
  flex: 0 0 auto;
  opacity: 0.72;
}

.calendar-quick-chip:hover {
  color: var(--ui-text-primary);
  background: var(--ui-hover);
  border-color: var(--ux-control-border-hover); /* --stroke-focus chưa từng tồn tại → viền rơi về currentColor */
}

.calendar-quick-chip:hover svg {
  opacity: 1;
}

.calendar-quick-chip.is-active {
  color: var(--ui-text-primary);
  border-color: color-mix(in srgb, var(--ui-accent) 55%, var(--ui-divider));
  background: color-mix(in srgb, var(--ui-accent) 12%, var(--ui-surface-panel));
}

.calendar-quick-chip.is-active svg {
  opacity: 1;
  color: var(--ui-accent);
}
.shortcuts-search-input {
  width: 100%;
  height: var(--ui-size-md);
  padding: 0 var(--ui-space-3);
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--ui-text-primary);
  background: var(--ux-base);
  border: var(--ui-stroke-thin) solid var(--stroke);
  border-radius: var(--ui-radius-control);
  outline: none;
  transition: border-color var(--ui-duration-fast) var(--ui-ease);
}

.shortcuts-search-input:focus {
  border-color: var(--ux-control-border-active);
  box-shadow: var(--ui-control-ring);
}

.calendar-quick-chip[data-quick-filter="starred"].is-active svg {
  color: var(--tone-orange-bar);
}

/* Command Palette (Spotlight Search kiểu Raycast / Linear / VS Code) — NN/g #7 */
.command-palette-card {
  width: min(var(--dt-dimension-layout-960), 95vw);
  max-height: min(var(--dt-dimension-layout-600), 90vh);
  display: flex;
  flex-direction: column;
  background: var(--ux-base);
  border: var(--ui-stroke-thin) solid var(--stroke);
  border-radius: var(--ui-radius-panel);
  box-shadow: var(--ui-elevation-3); /* --shadow-modal/--ui-shadow chưa từng tồn tại → trước đây không có bóng */
  overflow: hidden;
  margin-top: -4vh;
}

.command-palette-search-wrap {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  padding: var(--ui-space-2-5) var(--ui-space-3-5);
  border-bottom: var(--ui-stroke-thin) solid var(--stroke);
  background: var(--ux-raised);
}

.command-palette-search-icon {
  display: inline-flex;
  color: var(--ui-accent);
  flex: 0 0 auto;
}

.command-palette-input {
  flex: 1 1 auto;
  background: transparent;
  border: 0;
  outline: none;
  font-family: var(--app-font);
  font-size: var(--fs-body);
  color: var(--ui-text-primary);
  font-weight: var(--fw-medium);
}

.command-palette-input::placeholder {
  color: var(--ui-text-muted);
  font-weight: var(--fw-normal);
  font-size: var(--fs-body);
}

.command-palette-results {
  flex: 1 1 auto;
  padding: var(--ui-space-2);
  overflow-y: auto;
}

.command-palette-blocks-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ui-space-2-5);
}

@media (max-width: 860px) {
  .command-palette-blocks-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 580px) {
  .command-palette-blocks-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.command-palette-block {
  background: var(--ux-raised);
  border: var(--ui-stroke-thin) solid var(--stroke);
  border-radius: var(--ui-radius-control);
  padding: var(--ui-space-2);
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-1);
}

.command-palette-block--recent {
  grid-column: 1 / -1;
  background: color-mix(in srgb, var(--ui-accent) 6%, var(--ux-raised));
  border-color: color-mix(in srgb, var(--ui-accent) 25%, var(--stroke));
}

.command-palette-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-1-5);
  padding: var(--ui-space-1) var(--ui-space-1-5) var(--ui-space-1-5);
  border-bottom: var(--ui-stroke-thin) solid color-mix(in srgb, var(--stroke) 60%, transparent);
  margin-bottom: var(--ui-space-1);
}

.command-palette-block-head-left {
  display: flex;
  align-items: center;
  gap: var(--ui-space-1-5);
}

.command-palette-clear-btn {
  background: transparent;
  border: none;
  font-size: var(--fs-micro);
  color: var(--ui-text-muted);
  cursor: pointer;
  padding: var(--ui-space-0-5) var(--ui-space-1-5);
  border-radius: var(--ui-radius-control);
  transition: color var(--ui-duration-fast) var(--ui-ease), background-color var(--ui-duration-fast) var(--ui-ease);
}

.command-palette-clear-btn:hover {
  color: var(--ui-text-primary);
  background: var(--ux-hover);
}

.command-palette-block-icon {
  display: inline-flex;
  color: var(--ui-accent);
}

.command-palette-block-title {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--ui-text-muted);
}

.command-palette-block-items {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-0-5);
}

.command-palette-block-items--recent {
  display: flex;
  flex-direction: row;
  gap: var(--ui-space-1-5);
}

.command-palette-block-items--recent .command-palette-item {
  flex: 1 1 0;
  min-width: 0;
}

.command-palette-item {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  padding: var(--ui-space-1-5) var(--ui-space-2);
  border-radius: var(--ui-radius-control);
  cursor: pointer;
  transition: background var(--ui-duration-fast) var(--ui-ease);
  min-height: var(--ui-size-md);
}

.command-palette-item:hover,
.command-palette-item.is-selected {
  background: color-mix(in srgb, var(--ui-accent) 15%, var(--ux-base));
  color: var(--ui-text-primary);
}

.command-palette-item-icon {
  display: inline-flex;
  color: var(--ui-text-secondary);
  flex: 0 0 auto;
}

.command-palette-item.is-selected .command-palette-item-icon {
  color: var(--ui-accent);
}

.command-palette-item-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.command-palette-item-title {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--ui-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: var(--lh-snug);
}


.command-palette-foot {
  padding: var(--ui-space-1-5) var(--ui-space-3-5);
  border-top: var(--ui-stroke-thin) solid var(--stroke);
  background: var(--ux-raised);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.command-palette-foot-tip {
  font-size: var(--fs-micro);
  color: var(--ui-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-1);
}

.command-palette-empty {
  padding: var(--ui-space-8) var(--ui-space-4);
  text-align: center;
  color: var(--ui-text-muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ui-space-1-5);
}

.command-palette-empty-icon {
  color: var(--ui-text-muted);
  opacity: 0.6;
}

.command-palette-empty-title {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--ui-text-primary);
}

.command-palette-empty-desc {
  font-size: var(--fs-caption);
  color: var(--ui-text-muted);
}

/* Dim Backdrop cho Task Detail Drawer & Day Editor Overlay */
/* Chỉ scrim, KHÔNG blur: popup này có ô gõ liên tục, mỗi phím làm vẽ lại cả
   subtree; blur(3px) phủ cả màn + blur(30px) của panel kính lồng trong nó buộc
   re-blur toàn màn mỗi phím (đo 100ms/khung, sự kiện phím tới 180ms khi không có
   GPU compositing — BA 02/10/2026). Panel nằm trong overlay có backdrop-filter
   chỉ lấy mẫu chính scrim phẳng nên bỏ blur của nó không đổi hình; các overlay
   khác cũng đã là scrim thuần (`.overlay[data-overlay-kind]` ở styles.css). */
#editOverlay {
  background: var(--modal-scrim); /* --ui-shadow chưa từng tồn tại → lớp phủ trước đây trong suốt */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background-color var(--ui-duration-standard) var(--motion-standard);
}
#editOverlay > #editPanel {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#editOverlay.is-overlay-underlay {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Chuẩn cuộn dọc chống giật layout (Zero Scrollbar Layout Shift) */
:is(
  .ux-scroll-y,
  #projectTabOverview,
  #projectTabTasks,
  #projectTabNotes,
  .settings-scroll,
  .overlay-body,
  .dashboard-content
) {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

/* Thanh cuộn (bề rộng, màu, tự ẩn): hợp đồng chung styles/ui-scrollbar.css. */

/* Unified popover scrollable contract — vùng cuộn bên trong popover/dropdown
   (khác .ux-scroll-y ở trên: popover đè trên nền khác, cuộn bên trong nó
   không được kéo theo cuộn của trang phía sau). */
:is(
  .notics-project-filter-options,
  .token-select-options,
  .notics-cmdk-list,
  .notics-checklist-picker,
  .quick-tag-suggestions,
  .qa-dropdown-menu
) {
  overscroll-behavior: contain;
  will-change: scroll-position;
}



/* ==========================================================================
   MỤC ĐIỀU HƯỚNG CỘT CON — hợp đồng NavigationView của Windows 11 (17/09/2026)
   Áp cho MỌI menu con: cây Notebook (heading/dự án/hạng mục/QuickNote/Gần
   đây/Tất cả), danh sách Project + "Kế hoạch Dự án", menu Cài đặt, mục lục
   trang Hướng dẫn.
   - Một hình dạng: bo --ui-radius-control, cách đều hai mép cột bằng
     --ui-nav-item-inset (đệm của khung chứa), không còn hàng vuông/tràn viền.
   - Hai bậc chiều cao: 1 dòng --ui-nav-item-h, 2 dòng --ui-nav-item-h-two-line.
     Cấp con phân biệt bằng thụt lề, không bằng chiều cao.
   - Đang chọn: nền trung tính (--ink × --ui-nav-selected-alpha) + vạch màu
     nhấn 3×16px nằm TRONG vùng bo, bên trái — y như Windows 11.
   Phạm vi .ux-pane: file này nạp TRƯỚC notics/settings/project-nav nên cần
   thêm một bậc ưu tiên thay cho !important.
   ========================================================================== */
.ux-pane :is(.notics-tree, .project-list, .project-portfolio-menu, .settings-nav) {
  padding-inline: var(--ui-nav-item-inset);
}
.ux-pane .project-list { scrollbar-gutter: stable both-edges; }
.ux-pane .notics-tree-children { gap: 0; }

.ux-pane :is(.notics-tree-heading, .notics-tree-project, .notics-tree-section,
    .project-list-item, .project-portfolio-plan-btn, .settings-nav-item,
    .project-archive-link, .settings-account-shortcut),
.guide-toc .guide-toc-link {
  position: relative;
  box-sizing: border-box;
  min-height: var(--ui-nav-item-h);
  height: var(--ui-nav-item-h);
  margin-block: 0 var(--ui-nav-item-gap);
  padding-inline: var(--ui-nav-item-pad);
  border: 0;
  border-radius: var(--ui-radius-control);
  background: transparent;
  box-shadow: none;
}
/* Tiêu đề nhóm ("Dự án"/"Nhóm") = đúng một hàng nav; nhóm sau nhóm đầu cách
   phía trên --ui-nav-group-gap — cùng nhịp với AntiNote (antinote.css) và menu
   Cài đặt (settings.css), BA 13/10/2026. */
.ux-pane .notics-tree-heading:not(:first-child) { margin-top: var(--ui-nav-group-gap); }
/* Mục Hướng dẫn = 1 dòng như mọi mục điều hướng (NavigationView Windows 11):
   tên dài cắt bằng dấu …, tên đầy đủ ở title. Không xuống dòng — hàng 2 dòng
   cao theo chữ (38,8px) lệch thang chiều cao control. */
.guide-toc .guide-toc-link .guide-toc-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Dòng tài khoản cuối menu Cài đặt (avatar + tên + trạng thái) = mục 2 dòng như
   thẻ tài khoản ở NavigationView Windows 11; "Dự án cũ" cuối danh sách Project = mục 1 dòng. */
.ux-pane :is(.project-list-item, .project-portfolio-plan-btn, .settings-account-shortcut) {
  min-height: var(--ui-nav-item-h-two-line);
  height: auto;
}
.ux-pane :is(.notics-tree-heading, .notics-tree-project, .notics-tree-section,
    .project-list-item, .project-portfolio-plan-btn, .settings-nav-item,
    .project-archive-link, .settings-account-shortcut):hover,
.guide-toc .guide-toc-link:hover {
  background: var(--ux-hover);
}
.ux-pane :is(.notics-tree-heading, .notics-tree-project, .notics-tree-section,
    .project-list-item, .project-portfolio-plan-btn, .settings-nav-item,
    .project-archive-link, .settings-account-shortcut):is(.is-active, .active),
.guide-toc .guide-toc-link:is(.is-active, .active) {
  border: 0;
  background: var(--ux-nav-selected);
  color: var(--ui-text-primary);
  box-shadow: none;
}
.ux-pane :is(.notics-tree-heading, .notics-tree-project, .notics-tree-section,
    .project-list-item, .project-portfolio-plan-btn, .settings-nav-item,
    .project-archive-link, .settings-account-shortcut):is(.is-active, .active)::before,
.guide-toc .guide-toc-link:is(.is-active, .active)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  bottom: auto;
  width: var(--ui-nav-indicator-w);
  height: var(--ui-nav-indicator-h);
  transform: translateY(-50%);
  border-radius: var(--ui-radius-full);
  background: var(--ui-accent);
  pointer-events: none;
}
/* Dòng chuyển Sáng/Tối cuối menu Cài đặt giữ vạch ngăn phía trên. */
} /* @layer legacy */

/* NÚT CHUẨN (.ui-btn): xem ui-button.css (nạp ngay trước file này). */

/* ==========================================================================
   Ô NHẬP CHUẨN (.ui-input / .ui-select / .ui-textarea / .ui-field-group)
   GĐ3 lát 2 (docs/BAO-CAO-CHUAN-HOA-UI-TOKEN-2026-09-18.md §4.2): Fluent 2
   Input/Select — md 32 (mặc định), sm 24 cho thanh công cụ dày. Chỉ đặt
   hình học, màu và trạng thái; bề rộng/khoảng cách do màn hình quyết định.
   `background-color` (không dùng shorthand) để giữ mũi tên của select.
   .ui-field-group: khung ghép [ô + đơn vị] — khung là field, ô bên trong trong suốt.
   ========================================================================== */
@layer components {
  .ui-input,
  .ui-select,
  .ui-textarea,
  .ui-field-group {
    box-sizing: border-box;
    min-width: 0;
    border: var(--ui-resizer-line) solid var(--ux-input-border);
    /* Vạch đáy ≥ 3:1 lúc nghỉ (WCAG 1.4.11, Fluent 2 TextBox); :focus đổi cả 4 cạnh. */
    border-bottom-color: var(--ux-input-border-strong);
    border-radius: var(--ui-radius-control);
    background-color: var(--ux-input-bg);
    color: var(--ui-text-primary);
    font-family: inherit;
    font-size: var(--fs-body);
    transition:
      border-color var(--ui-duration-fast) var(--ui-ease),
      background-color var(--ui-duration-fast) var(--ui-ease);
  }
  .ui-input,
  .ui-select,
  .ui-field-group {
    height: var(--ui-size-md);
    min-height: var(--ui-size-md);
  }
  .ui-input,
  .ui-select {
    padding-block: 0;
    padding-inline: var(--ui-space-3);
  }
  .ui-textarea {
    min-height: calc(var(--ui-size-md) * 2);
    padding: var(--ui-space-2) var(--ui-space-3);
    line-height: var(--lh-body);
    resize: vertical;
  }
  .ui-field-group {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-1);
    padding-inline-end: var(--ui-space-2);
    color: var(--ui-text-muted);
    font-size: var(--fs-caption);
  }
  /* Ô con của khung ghép: khung đã là field, ô chỉ đệm phía trước. */
  .ui-field-group > :is(input, select) {
    height: 100%;
    padding-block: 0;
    padding-inline: var(--ui-space-2) 0;
    border: 0;
    background-color: transparent;
  }
  :is(.ui-input, .ui-textarea)::placeholder {
    color: var(--ui-text-muted);
  }

  /* Cỡ sm */
  :is(.ui-input, .ui-select).ui-input--sm,
  .ui-select.ui-select--sm {
    height: var(--ui-size-sm);
    min-height: var(--ui-size-sm);
    padding-inline: var(--ui-space-2);
    font-size: var(--fs-caption);
  }
  /* Khung ghép cỡ sm (BA 10/10/2026, hàng Giờ menu thao tác việc): cùng cao
     size.sm với .ui-input--sm; ô con đệm space.1. Nút icon sm bên trong giữ đủ
     size.sm (vùng bấm ≥ 24, WCAG 2.5.8) và lấn đè lên viền khung bằng margin âm
     đúng độ dày viền, nên khung không bị đội cao. */
  .ui-field-group.ui-field-group--sm {
    height: var(--ui-size-sm);
    min-height: var(--ui-size-sm);
    padding-inline-end: var(--ui-space-0-5);
  }
  .ui-field-group--sm > :is(input, select) {
    padding-inline: var(--ui-space-1);
  }
  .ui-field-group--sm > .ui-btn.ui-btn--icon.ui-btn--sm {
    height: var(--ui-size-sm);
    min-height: var(--ui-size-sm);
    margin-block: calc(var(--ui-resizer-line) * -1);
    width: auto;
    min-width: 0;
    aspect-ratio: 1;
  }

  /* Trạng thái */
  :is(.ui-input, .ui-select, .ui-textarea, .ui-field-group):hover:not(:disabled, :focus, :focus-within) {
    border-color: var(--ui-control-border-hover);
    border-bottom-color: var(--ux-input-border-strong);
  }
  :is(.ui-input, .ui-select, .ui-textarea):focus,
  .ui-field-group:focus-within {
    border-color: var(--ux-control-border-active);
    box-shadow: var(--ui-control-ring);
  }
  :is(.ui-input, .ui-select, .ui-textarea)[aria-invalid="true"] {
    border-color: var(--ui-danger);
  }
  :is(.ui-input, .ui-select, .ui-textarea):disabled {
    background-color: var(--ui-hover);
    color: var(--ui-text-muted);
    cursor: not-allowed;
  }
}

/* ==========================================================================
   KHUNG DIALOG CHUẨN — GĐ3 lát 3 (docs/BAO-CAO-CHUAN-HOA-UI-TOKEN-2026-09-18.md §4.8, §7.3)
   Dấu hiệu dialog trong code là class cỡ .overlay-panel--sm/md/lg/xl (markup
   tĩnh lẫn JS); .ui-dialog là tên cho code mới. overlayManager gắn .overlay-panel
   cho MỌI lớp nổi nên công thức không bám vào class đó. Dialog dạng thông báo
   (nhắc họp, cập nhật) giữ khung riêng. Chỉ đặt khung: bo xl, elevation-3,
   header ≥ 56, footer ≥ 64, đệm --ui-dialog-padding, hiệu ứng mở fade + scale
   (Q6). Bề rộng giữ theo token --ui-dialog-max-*; Glass giữ backdrop-filter.
   ========================================================================== */
@layer components {
  :is(.ui-dialog, .overlay-panel--sm, .overlay-panel--md, .overlay-panel--lg, .overlay-panel--xl):not([data-overlay-kind="notification"] *) {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    max-height: calc(100dvh - var(--ui-dialog-edge-gap) * 2);
    overflow: hidden;
    border: var(--ui-resizer-line) solid var(--ui-divider);
    border-radius: var(--ui-dialog-radius);
    background-color: var(--ux-overlay);
    box-shadow: var(--ui-elevation-3);
    color: var(--ui-text-primary);
    animation: ui-dialog-enter var(--ui-duration-slow) var(--ui-ease-enter) both;
  }
  :is(.ui-dialog, .overlay-panel--sm, .overlay-panel--md, .overlay-panel--lg, .overlay-panel--xl):not([data-overlay-kind="notification"] *) > .overlay-head {
    min-height: var(--ui-dialog-header-h);
    padding: var(--ui-space-4) var(--ui-dialog-padding);
    gap: var(--ui-space-3);
  }
  :is(.ui-dialog, .overlay-panel--sm, .overlay-panel--md, .overlay-panel--lg, .overlay-panel--xl):not([data-overlay-kind="notification"] *) > .overlay-body {
    padding: var(--ui-space-4) var(--ui-dialog-padding);
  }
  :is(.ui-dialog, .overlay-panel--sm, .overlay-panel--md, .overlay-panel--lg, .overlay-panel--xl):not([data-overlay-kind="notification"] *) > .overlay-foot {
    min-height: var(--ui-dialog-footer-h);
    padding: var(--ui-space-3) var(--ui-dialog-padding);
    gap: var(--ui-space-2);
  }
  :is(.ui-dialog, .overlay-panel--sm, .overlay-panel--md, .overlay-panel--lg, .overlay-panel--xl):not([data-overlay-kind="notification"] *) .overlay-foot-actions {
    gap: var(--ui-space-2);
  }
  html[data-layout-mode="tight"] :is(.ui-dialog, .overlay-panel--sm, .overlay-panel--md, .overlay-panel--lg, .overlay-panel--xl):not([data-overlay-kind="notification"] *) > :is(.overlay-head, .overlay-body, .overlay-foot) {
    padding-inline: var(--ui-space-4);
  }
  /* Lớp nổi dạng thông báo (nhắc họp…) dùng chung class cỡ nhưng KHÔNG phải dialog:
     giữ khung trước GĐ3 (viền divider, bo panel, bóng elevation-2). */
  [data-overlay-kind="notification"] :is(.overlay-panel--sm, .overlay-panel--md, .overlay-panel--lg, .overlay-panel--xl) {
    border-color: var(--ui-divider);
    border-radius: var(--ui-radius-panel);
    background-color: var(--ux-overlay);
    box-shadow: var(--ui-elevation-2);
  }
  /* Bảng phím tắt: khung chuẩn nhưng giữ chiều cao gọn riêng (bảng tra cứu, không
     cần kéo gần hết màn hình). Đứng sau khung chuẩn, cùng độ cụ thể nên thắng. */
  .ui-dialog.shortcuts-dialog-card {
    max-height: min(var(--dt-dimension-layout-680), 90vh);
  }
  @keyframes ui-dialog-enter {
    from { opacity: 0; transform: scale(var(--ui-motion-scale-dialog)); }
    to { opacity: 1; transform: none; }
  }
}

/* ==========================================================================
   KHUNG DIALOG — BIẾN THỂ FLAT (GĐ5.2, docs/PLAN-FLAT-SURFACE-GD5.md)
   Chỉ khi html[data-surface="flat"]. Khung giữ MỘT bóng mềm như popover (BA Q1:
   --ui-flat-overlay-shadow thay cho elevation-3 nặng hơn); BÊN TRONG một bề mặt:
   · Đầu/chân dialog cùng nền với thân, chỉ tách bằng vạch (bỏ dải nền xám của
     chân dialog, dải nền đầu drawer chi tiết và đầu/chân Bảng phím tắt).
   · Ô icon tiêu đề (.overlay-icon, ✏ của drawer, vòng tròn "Lịch lặp") thành glyph trần giữ
     màu ngữ nghĩa (đỏ = xoá) — cùng quyết định với ô icon menu ở GĐ5.1.
   · Hộp lồng trong form: khối "Lịch lặp" và 4 nhóm của Bảng phím tắt bỏ
     viền/nền/bo riêng; khối "Lịch lặp" thành một section mở đầu bằng vạch ngang
     và thẳng lề với các trường phía trên.
   Dialog dạng thông báo (data-overlay-kind="notification") không đổi.
   ========================================================================== */
@layer components {
  html[data-surface="flat"] :is(.ui-dialog, .overlay-panel--sm, .overlay-panel--md, .overlay-panel--lg, .overlay-panel--xl, .shortcuts-dialog-card, .edit-panel):not([data-overlay-kind="notification"] *) {
    box-shadow: var(--ui-flat-overlay-shadow);
  }
  html[data-surface="flat"] :is(.overlay-foot, .shortcuts-dialog-head, .shortcuts-dialog-foot, .item-detail-drawer .drawer-header):not([data-overlay-kind="notification"] *) {
    background: transparent;
  }
  html[data-surface="flat"] :is(.overlay-icon, .drawer-title-icon):not([data-overlay-kind="notification"] *) {
    border-color: transparent;
    background: transparent;
  }
  html[data-surface="flat"] .repeat-heading-icon {
    background: transparent;
    color: var(--ui-accent);
  }
  html[data-surface="flat"] .repeat-editor {
    border-width: var(--ui-flat-section-divider) 0 0;
    border-radius: var(--ui-flat-radius-inner);
    background: transparent;
    overflow: visible;
  }
  html[data-surface="flat"] .repeat-editor-heading {
    border-bottom-width: 0;
    background: transparent;
  }
  html[data-surface="flat"] :is(.repeat-editor-heading, .repeat-grid, .repeat-option-block, .repeat-end-row) {
    padding-inline: 0;
  }
  html[data-surface="flat"] .repeat-summary {
    margin-inline: 0;
  }
  html[data-surface="flat"] .shortcut-category {
    padding-inline: 0;
    border-color: transparent;
    border-radius: var(--ui-flat-radius-inner);
    background: transparent;
  }
}

/* ==========================================================================
   FORM CÔNG VIỆC — BIẾN THỂ FLAT (BA 2026-09-28)
   Hai form trong #editPanel: "Quản lý công việc ngày" và drawer "Chỉnh sửa công
   việc". Trước đây ở chế độ phẳng vẫn còn hộp lồng hộp (khung ô soạn nhanh, khung
   danh sách, viền + nền từng thẻ việc, viền từng nút kiểu danh sách), dải nền
   riêng ở đầu/thanh tab/chân và bóng dưới từng ô chọn. Quy về một bề mặt:
   · Chỉ ô nhập liệu giữ viền (đó là affordance nhập), không ô nào có bóng.
   · Nhóm nội dung tách bằng một vạch --ui-divider, không khung.
   · Dòng việc như dòng menu phẳng: không viền/nền, rê chuột tô --ui-flat-row-hover.
   · Chữ một bậc: nội dung ô/dòng --fs-body-sm, nhãn --fs-xs (trước lẫn 12/13/14).
   Tắt "Giao diện phẳng" thì mọi thứ về kiểu cũ.
   ========================================================================== */
@layer components {
  html[data-surface="flat"] .edit-panel :is(.edit-header, .drawer-header, .drawer-tabs, .edit-footer, .drawer-footer) {
    background: transparent;
    box-shadow: none;
  }
  html[data-surface="flat"] .edit-panel :is(.editor-controls-bar, .drawer-tabs) {
    border-bottom-color: var(--ui-divider);
  }
  html[data-surface="flat"] .edit-panel .quick-add-composer {
    padding: 0;
    border-color: transparent;
    border-radius: var(--ui-flat-radius-inner);
    background: transparent;
  }
  html[data-surface="flat"] .edit-panel :is(.card-list-container, .raw-text-container) {
    border-color: transparent;
    border-radius: var(--ui-flat-radius-inner);
    background: transparent;
  }
  html[data-surface="flat"] .edit-panel .draft-task-list {
    border-top-width: 0;
  }
  html[data-surface="flat"] .edit-panel .draft-card-item {
    border: 0;
    border-radius: var(--ui-flat-radius-item);
    background: var(--ui-flat-row-bg);
    box-shadow: none;
  }
  html[data-surface="flat"] .edit-panel .draft-card-item:hover {
    background: var(--ui-flat-row-hover);
    box-shadow: none;
  }
  html[data-surface="flat"] .edit-panel .draft-card-item.editing {
    background: var(--ui-flat-row-hover);
    box-shadow: var(--ui-flat-today-ring);
  }
  html[data-surface="flat"] .edit-panel :is(.tab-btn, .editor-tab-btn) {
    box-shadow: none;
  }
  html[data-surface="flat"] .edit-panel :is(.tab-btn, .editor-tab-btn):not(.active) {
    border-color: transparent;
    background: transparent;
  }
  html[data-surface="flat"] .edit-panel :is(.tab-btn, .editor-tab-btn):not(.active):hover {
    background: var(--ui-flat-row-hover);
  }
  html[data-surface="flat"] .edit-panel .ui-btn:not(:focus-visible) {
    box-shadow: none;
  }
  /* Ô chọn/ô ngày: bỏ bóng nổi, giữ vòng focus/đang mở. */
  html[data-surface="flat"] :is(.token-select-trigger, .token-date-trigger):not(:focus-visible, .is-open) {
    box-shadow: none;
  }

  /* Một bậc chữ cho nội dung ô và dòng việc. */
  html[data-surface="flat"] .edit-panel :is(
    .quick-task-input, .draft-input, .form-input, .form-select,
    .token-select-trigger, .token-date-trigger,
    .token-select-label, .token-date-display, .detail-tag-add-input, .draft-card-text
  ),
  html[data-surface="flat"] .edit-panel input[type="time"]::-webkit-datetime-edit,
  html[data-surface="flat"] .edit-panel input[type="time"]::-webkit-datetime-edit-fields-wrapper,
  html[data-surface="flat"] .edit-panel input[type="time"]::-webkit-datetime-edit-text,
  html[data-surface="flat"] .edit-panel input[type="time"]::-webkit-datetime-edit-hour-field,
  html[data-surface="flat"] .edit-panel input[type="time"]::-webkit-datetime-edit-minute-field,
  html[data-surface="flat"] .edit-panel input[type="time"]::-webkit-datetime-edit-ampm-field {
    font-size: var(--fs-body);
  }
  html[data-surface="flat"] .edit-panel :is(.quick-add-field-label, .control-label, .form-label) {
    font-size: var(--fs-caption);
  }
}

/* ==========================================================================
   KHUNG POPOVER CHUẨN — GĐ3 lát 4 (docs/BAO-CAO-CHUAN-HOA-UI-TOKEN-2026-09-18.md §4.5–4.8)
   Một khung cho mọi dropdown / popover / menu: viền divider, bo radius.lg
   (một thang, BA Q2), nền --ux-overlay, bóng elevation-2. Thay khối "BO GÓC LỚP
   NỔI" cũ (4 nguồn bo góc, 5 kiểu bóng, 3 màu viền). Bề rộng theo token
   popover 200/260/320; đệm và hàng menu do từng menu quyết định. Glass giữ
   backdrop-filter. .ui-popover là tên cho code mới.
   ========================================================================== */
@layer components {
  :is(
    .ui-popover,
    .picker-panel,
    .tag-filter-panel,
    .view-mode-panel,
    .priority-picker-panel,
    .calendar-action-menu,
    .widget-menu-panel,
    .nav-avatar-menu,
    .notics-project-filter-panel,
    .notics-color-popover,
    .notics-link-popover,
    .notics-note-menu,
    .notics-section-menu,
    .notics-slash-menu,
    .rich-editor-context-menu,
    .notics-cmdk,
    .qa-dropdown-menu,
    .quick-tag-suggestions,
    .token-select-popover,
    .token-date-popover,
    .antiscreenshot-popover
  ) {
    border: var(--ui-resizer-line) solid var(--ui-divider);
    border-radius: var(--ui-radius-lg);
    background-color: var(--ux-overlay);
    box-shadow: var(--ui-elevation-2);
  }
}

/* ==========================================================================
   KHUNG POPOVER — BIẾN THỂ FLAT (GĐ5.1, docs/PLAN-FLAT-SURFACE-GD5.md)
   Chỉ khi html[data-surface="flat"] (ô "Giao diện phẳng"). Khung GIỮ một bóng
   mềm (BA Q1 — lớp nổi đè lên nội dung nên cần độ nổi); BÊN TRONG phẳng:
   · Dòng menu: không nền lúc nghỉ, rê/focus bàn phím tô --ui-flat-row-hover,
     bo --ui-flat-radius-item — cùng một màu hover với dòng Lịch. Trước đây mỗi
     menu một màu hover (--ui-action-hover, nền pha 86%…). Dòng đang CHỌN giữ
     màu riêng của nó nên bị loại khỏi luật hover.
   · Bỏ hộp lồng hộp: ô icon tô nền (menu Avatar) thành glyph trần giữ màu
     nhóm; ô "Thời gian" của menu "…" bỏ nền/viền riêng — nhóm đã có vạch ngăn.
   Layer components luôn thắng @layer legacy (styles.css/calendar.css) nên
   không cần tăng độ đặc hiệu hay !important.
   ========================================================================== */
@layer components {
  html[data-surface="flat"] :is(
    .ui-popover, .picker-panel, .tag-filter-panel, .view-mode-panel,
    .priority-picker-panel, .calendar-action-menu, .widget-menu-panel, .nav-avatar-menu,
    .notics-project-filter-panel, .notics-color-popover, .notics-link-popover, .notics-note-menu,
    .notics-section-menu, .notics-slash-menu, .rich-editor-context-menu, .notics-cmdk,
    .qa-dropdown-menu, .quick-tag-suggestions, .token-select-popover, .token-date-popover,
    .antiscreenshot-popover
  ) {
    box-shadow: var(--ui-flat-overlay-shadow);
  }
  html[data-surface="flat"] :is(
    .widget-menu-item, .calendar-action-menu-item, .view-mode-option, .token-select-option,
    .priority-picker-option, .notics-section-menu-item, .notics-note-menu-item,
    .notics-project-filter-option, .qa-dropdown-item, .notics-slash-item, .notics-cmdk-item,
    .antiscreenshot-popover-item, .command-palette-item
  ) {
    border-radius: var(--ui-flat-radius-item);
  }
  html[data-surface="flat"] :is(
    .widget-menu-item, .calendar-action-menu-item, .view-mode-option, .token-select-option,
    .priority-picker-option, .notics-section-menu-item, .notics-note-menu-item,
    .notics-project-filter-option, .qa-dropdown-item, .notics-slash-item, .notics-cmdk-item,
    .antiscreenshot-popover-item, .command-palette-item
  ):not(:disabled, .is-disabled, .is-selected, .is-active, [aria-selected="true"], [aria-checked="true"]):is(:hover, :focus-visible) {
    background: var(--ui-flat-row-hover);
  }
  html[data-surface="flat"] :is(.widget-menu-icon, .nav-avatar-action-icon) {
    background: transparent;
  }
}

/* ==========================================================================
   MỤC MENU CHUẨN (.ui-menu-item) — chuẩn hoá component P3 lát 4 (01/10/2026,
   docs/KE-HOACH-CHUAN-HOA-COMPONENT-2026-10-01.md). Fluent 2 MenuItem quy về
   token: cao size.md 32 (BA chốt 29/09), đệm ngang space.2, khoảng icon–chữ
   space.2, chữ body-sm 13 thường, icon 16, bo radius.control.
   Đo trước khi chuẩn hoá (6 menu): cỡ chữ 12/13/16, độ đậm 400/500/600, cao
   30–35,6, khoảng 6–12, icon 12–15, hover lúc xám lúc xanh.
   Hai trạng thái tách bạch:
   · ĐANG TRỎ (rê chuột, focus bàn phím, dòng đang trỏ khi gõ lọc — bảng lệnh
     .is-selected, menu "/" và bảng lệnh Notebook .is-active): nền --ui-hover.
   · GIÁ TRỊ ĐANG CHỌN (ô chọn token .is-selected, [aria-checked="true"]):
     nền accent 12% — cùng công thức ui-btn--toggle.
   Họ class cũ chỉ còn là móc JS; menu mới dùng .ui-menu-item. Không đặt
   display — một số dòng có bố cục riêng (2 dòng, ô sửa giờ, ô icon nhóm).
   ========================================================================== */
@layer components {
  /* :where — độ cụ thể 0: rule nền không được thắng rule trạng thái (đang
     chọn/đang trỏ). Phần tử .rich-editor-context-menu > button[role] trong :is
     từng kéo cả rule lên (0,2,1) và xoá nền "đang chọn". Layer components vẫn
     thắng mọi CSS cũ ở layer legacy bất kể độ cụ thể. */
  :where(.ui-menu-item, .widget-menu-item, .calendar-action-menu-item, .view-mode-option,
      .token-select-option, .priority-picker-option, .notics-section-menu-item,
      .notics-note-menu-item, .notics-project-filter-option, .qa-dropdown-item,
      .notics-slash-item, .notics-cmdk-item, .antiscreenshot-popover-item,
      .command-palette-item, .rich-editor-context-menu > button[role="menuitem"]) {
    box-sizing: border-box;
    min-height: var(--ui-size-md);
    /* BA 29/09/2026: mục menu = control md 32, KHÔNG đệm dọc (min-height giữ cao). */
    padding: 0 var(--ui-space-2);
    column-gap: var(--ui-space-2);
    border: 0;
    border-radius: var(--ui-radius-control);
    background: transparent;
    color: var(--ui-text-primary);
    font-family: var(--app-font);
    font-size: var(--fs-body);
    font-weight: var(--fw-normal);
    line-height: var(--lh-body-sm);
    text-align: left;
  }
  :where(.ui-menu-item, .widget-menu-item, .calendar-action-menu-item, .view-mode-option,
      .token-select-option, .priority-picker-option, .notics-section-menu-item,
      .notics-note-menu-item, .notics-project-filter-option, .qa-dropdown-item,
      .notics-slash-item, .notics-cmdk-item, .antiscreenshot-popover-item,
      .command-palette-item, .rich-editor-context-menu > button[role="menuitem"]) svg {
    flex-shrink: 0;
    width: var(--ui-icon-sm);
    height: var(--ui-icon-sm);
  }
  /* Ô chọn token: nhãn dài xuống dòng (không cắt "…") nên dòng cần đệm dọc để các dòng
     chữ không dính mép; dòng 1 dòng vẫn cao đúng min-height của control md. */
  .token-select-option { padding-block: var(--ui-space-1); }
  /* Nhãn chính trong dòng theo cỡ/độ đậm của dòng — ô chọn token bọc nhãn bằng
     <strong> (12/600), bảng lệnh có .command-palette-item-title (12/500). */
  :is(.ui-menu-item, .token-select-option, .command-palette-item) :is(strong, b, .command-palette-item-title) {
    font-size: inherit;
    font-weight: inherit;
  }
  /* Đang trỏ. */
  :is(.ui-menu-item, .widget-menu-item, .calendar-action-menu-item, .view-mode-option,
      .token-select-option, .priority-picker-option, .notics-section-menu-item,
      .notics-note-menu-item, .notics-project-filter-option, .qa-dropdown-item,
      .notics-slash-item, .notics-cmdk-item, .antiscreenshot-popover-item,
      .command-palette-item, .rich-editor-context-menu > button[role="menuitem"]):not(:disabled, .is-disabled, [aria-disabled="true"]):is(:hover, :focus-visible),
  :is(.command-palette-item.is-selected, .notics-slash-item.is-active, .notics-cmdk-item.is-active, .ui-menu-item.is-highlighted) {
    outline: none;
    background: var(--ui-hover);
    color: var(--ui-text-primary);
  }
  /* Giá trị đang chọn. */
  :is(.token-select-option.is-selected, .priority-picker-option.is-selected, .view-mode-option.is-active,
      .ui-menu-item[aria-checked="true"], .widget-menu-item[aria-checked="true"]) {
    background: color-mix(in srgb, var(--ui-accent) 12%, transparent);
    color: var(--ui-text-primary);
  }
  /* Nguy hiểm: chữ + icon đỏ; vô hiệu: chữ nhạt, không phản hồi rê chuột. */
  :is(.ui-menu-item, .widget-menu-item, .calendar-action-menu-item, .notics-section-menu-item,
      .notics-note-menu-item, .antiscreenshot-popover-item, .rich-editor-context-menu > button[role="menuitem"]).is-danger {
    color: var(--ui-danger);
  }
  :is(.ui-menu-item, .widget-menu-item, .calendar-action-menu-item, .view-mode-option,
      .token-select-option, .priority-picker-option, .notics-section-menu-item,
      .notics-note-menu-item, .notics-project-filter-option, .qa-dropdown-item,
      .notics-slash-item, .notics-cmdk-item, .antiscreenshot-popover-item,
      .command-palette-item, .rich-editor-context-menu > button[role="menuitem"]):is(:disabled, .is-disabled, [aria-disabled="true"]) {
    background: transparent;
    color: var(--ui-text-muted);
    cursor: not-allowed;
  }
  /* Gợi ý phím tắt bên phải dòng. */
  :is(.ui-menu-item, .widget-menu-item, .calendar-action-menu-item, .notics-section-menu-item,
      .notics-note-menu-item, .antiscreenshot-popover-item, .command-palette-item,
      .rich-editor-context-menu > button[role="menuitem"]) kbd {
    margin-left: auto;
    color: var(--ui-text-muted);
    font: var(--fw-normal) var(--fs-caption)/var(--lh-none) var(--app-font);
  }
  /* Bộ chọn Dự án/Hạng mục dùng chung (projectPicker.js, AT-UI Rhythm 10/10/2026): hạng mục
     thụt một bậc cây dưới dự án. Phải nằm cùng layer với luật đệm của mục menu chuẩn ở trên,
     nếu không đệm chuẩn đè mất thụt (lỗi cũ: hạng mục thẳng hàng với dự án). */
  .ui-picker-row.ui-picker-row--indent {
    padding-inline-start: calc(var(--ui-space-2) + var(--ui-nav-item-indent));
  }
}

/* ==========================================================================
   TOAST CHUẨN (.ui-toast) — GĐ3 lát 4 (docs/BAO-CAO-CHUAN-HOA-UI-TOKEN-2026-09-18.md §7.3)
   Fluent 2 Toast: bề mặt trung tính nổi (--ux-overlay), chữ chính, bo radius.lg,
   elevation-4, chấm trạng thái màu (thành công / lỗi) — màu không phải tín hiệu
   duy nhất vì nội dung chữ đã nói rõ. Hành động (Hoàn tác) là nút nhẹ màu nhấn.
   Vị trí do chủ sở hữu quyết định (.qa-toast ghim dưới-giữa). Thời lượng/dừng
   khi rê chuột ở src/renderer/src/index.js.
   ========================================================================== */
@layer components {
  .ui-toast {
    align-items: center;
    gap: var(--ui-space-2);
    min-height: var(--ui-size-lg);
    padding: var(--ui-space-2) var(--ui-space-3) var(--ui-space-2) var(--ui-space-4);
    border: var(--ui-resizer-line) solid var(--ui-divider);
    border-radius: var(--ui-radius-lg);
    background-color: var(--ux-overlay);
    box-shadow: var(--ui-elevation-4);
    color: var(--ui-text-primary);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    line-height: var(--lh-body);
  }
  .ui-toast::before {
    content: "";
    flex: 0 0 auto;
    width: var(--ui-space-2);
    height: var(--ui-space-2);
    border-radius: var(--ui-radius-full);
    background-color: var(--ui-success);
  }
  .ui-toast.is-error {
    border-color: var(--ui-danger-line);
  }
  .ui-toast.is-error::before {
    background-color: var(--ui-danger);
  }
  .ui-toast .ui-toast__action {
    flex: 0 0 auto;
    height: var(--ui-size-sm);
    margin-inline-start: var(--ui-space-2);
    padding: 0 var(--ui-space-2);
    border: 0;
    border-radius: var(--ui-radius-control);
    background-color: transparent;
    color: var(--ui-accent);
    font: inherit;
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--ui-duration-fast) var(--ui-ease);
  }
  .ui-toast .ui-toast__action:hover {
    background-color: var(--ui-hover);
  }
  .ui-toast .ui-toast__action:focus-visible {
    outline: var(--ui-focus-ring-width) solid var(--ui-focus-ring);
    outline-offset: var(--ui-focus-ring-offset);
  }
}

/* ==========================================================================
   SEGMENTED CHUẨN — GĐ3 lát 5 (docs/BAO-CAO-CHUAN-HOA-UI-TOKEN-2026-09-18.md §4.2)
   BA chốt 18/09/2026: kiểu "ô nổi trung tính" (Fluent 2 / Windows 11). Một khuôn
   cho thanh dạng xem Lịch (.view-segment + thanh trượt), tab Project/Dashboard,
   nút đổi thẻ/bảng và nguồn danh sách AntiScreenshot (.notics-segmented-control).
   Khung md 32 bo radius.md, nền nhạt 5% chữ; ô sm 24 bo radius.sm; ô chọn = nền
   raised nổi (elevation-1) + chữ/icon màu nhấn (.is-active | aria-selected | aria-checked
   cho nhóm role=radiogroup). .ui-segmented / __item cho code mới.
   ========================================================================== */
@layer components {
  :is(.ui-segmented, .view-segment, .notics-segmented-control) {
    --ui-seg-pad: calc((var(--ui-size-md) - var(--ui-size-sm)) / 2 - var(--ui-resizer-line));
    align-items: center;
    gap: var(--ui-space-0-5);
    box-sizing: border-box;
    height: var(--ui-size-md);
    min-height: var(--ui-size-md);
    max-height: var(--ui-size-md);
    padding: var(--ui-seg-pad);
    border: var(--ui-resizer-line) solid var(--ui-divider);
    border-radius: var(--ui-radius-md);
    background-color: color-mix(in srgb, var(--ui-text-primary) 5%, transparent);
    box-shadow: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: border-color var(--ui-duration-fast) var(--ui-ease);
  }
  /* Trên topbar 32 (BA 10/10/2026 lượt 3): khung 32 tràn lòng 30.4 của header, hàng lưới
     nở và tiêu đề Project/Dashboard trôi 0.8px. Khung = control header + space.1 (28,
     mức Lớn 35), tab giữ size.sm 24 như mọi control header. */
  .topbar :is(.ui-segmented, .view-segment, .notics-segmented-control) {
    --ui-seg-pad: calc((var(--ui-header-control-size) + var(--ui-space-1) - var(--ui-size-sm)) / 2 - var(--ui-resizer-line));
    height: calc(var(--ui-header-control-size) + var(--ui-space-1));
    min-height: calc(var(--ui-header-control-size) + var(--ui-space-1));
    max-height: calc(var(--ui-header-control-size) + var(--ui-space-1));
  }
  /* THANH TAB ĐIỀU HƯỚNG (BA 14/10/2026: "menu chức năng quá sát lề"). Tab cấp trang —
     tab Project / kỳ Dashboard trên topbar, danh mục Quản trị Premium (.ui-segmented--nav) —
     không vẽ rãnh có viền: khung 28 trong lòng header 32 chỉ chừa ~2px mỗi phía nên
     trông dính mép. Kiểu thanh điều hướng hiện đại (Linear/Vercel/Fluent TabList
     subtle): không rãnh, không viền; tab là viên size.sm, đang chọn = nền trung tính
     --ui-action-active + chữ chính. Trên khung màu Liền mạch, nền chọn = ô khung. */
  :is(.topbar :is(.ui-segmented, .notics-segmented-control), .ui-segmented--nav) {
    --ui-seg-pad: 0;
    --ui-seg-active-fill: var(--ui-action-active);
    gap: var(--ui-space-1);
    height: var(--ui-size-sm);
    min-height: var(--ui-size-sm);
    max-height: var(--ui-size-sm);
    border-color: transparent;
    background-color: transparent;
  }
  :is(.topbar :is(.ui-segmented, .notics-segmented-control), .ui-segmented--nav):is(:hover, :focus-within) {
    border-color: transparent;
  }
  html[data-shell-frame="seamless"]:not([data-shell-chrome="neutral"]):not(.is-image-canvas) .topbar :is(.ui-segmented, .notics-segmented-control) {
    --ui-seg-active-fill: var(--ui-chrome-field);
  }
  :is(.topbar :is(.ui-segmented, .notics-segmented-control), .ui-segmented--nav) :is(.ui-segmented__item, .notics-tab) {
    border-radius: var(--ui-radius-control);
    font-weight: var(--fw-medium);
  }
  :is(.topbar :is(.ui-segmented, .notics-segmented-control), .ui-segmented--nav) :is(.ui-segmented__item, .notics-tab):is(.is-active, [aria-selected="true"], [aria-checked="true"]) {
    background-color: var(--ui-seg-active-fill);
    box-shadow: none;
    color: var(--ui-text-primary);
  }
  /* Chỉ class mới đặt display ở đây. .notics-segmented-control lấy display từ legacy
     để rule responsive (ẩn tab Project khi hẹp) vẫn thắng — layer components đè mọi
     rule legacy không ép ưu tiên, kể cả display: none. */
  .ui-segmented {
    display: inline-flex;
  }
  :is(.ui-segmented, .view-segment, .notics-segmented-control):hover {
    border-color: var(--ux-control-border-hover);
  }
  :is(.ui-segmented, .view-segment, .notics-segmented-control):focus-within {
    border-color: var(--ux-control-border-active);
  }

  :is(.ui-segmented__item, .view-segment-btn, .notics-segmented-control .notics-tab) {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    height: var(--ui-size-sm);
    min-height: var(--ui-size-sm);
    max-height: var(--ui-size-sm);
    padding: 0 var(--ui-space-3);
    border: 0;
    border-radius: var(--ui-radius-sm);
    background-color: transparent;
    color: var(--ui-text-secondary);
    font-family: inherit;
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-none);
    white-space: nowrap;
    cursor: pointer;
    transition:
      color var(--ui-duration-fast) var(--ui-ease),
      background-color var(--ui-duration-fast) var(--ui-ease);
  }
  :is(.ui-segmented__item, .view-segment-btn, .notics-segmented-control .notics-tab) svg {
    display: block;
    flex-shrink: 0;
    width: var(--ui-icon-sm);
    height: var(--ui-icon-sm);
    pointer-events: none;
  }
  :is(.ui-segmented__item, .notics-segmented-control .notics-tab):not(.is-active, [aria-selected="true"], [aria-checked="true"]):hover,
  .view-segment-btn:not(.is-active):hover {
    background-color: var(--ui-hover);
    color: var(--ui-text-primary);
  }
  :is(.ui-segmented__item, .notics-segmented-control .notics-tab):is(.is-active, [aria-selected="true"], [aria-checked="true"]) {
    background-color: var(--ux-raised);
    box-shadow: var(--ui-elevation-1);
    color: var(--ui-accent);
  }
  :is(.ui-segmented__item, .view-segment-btn, .notics-segmented-control .notics-tab):focus-visible {
    outline: var(--ui-focus-ring-width) solid var(--ui-focus-ring);
    outline-offset: var(--ui-focus-ring-offset);
  }
  /* Ô chỉ có icon (đổi thẻ/bảng). */
  .notespeed-view-toggle .notics-tab {
    padding: 0 var(--ui-space-2);
  }
  /* Tab Project nhiều mục trên header hẹp: bớt đệm, không bớt cỡ chữ. */
  html:is([data-layout-mode="medium"], [data-layout-mode="compact"], [data-layout-mode="tight"]) .topbar-project-tabs .notics-tab {
    padding: 0 var(--ui-space-2);
  }

  /* Thanh dạng xem Lịch: ô icon bề rộng cố định, không khe; ô chọn là THANH TRƯỢT
     (ô nổi trung tính) chạy theo --view-segment-index; nút chọn chỉ đổi màu icon. */
  .view-segment {
    gap: 0;
  }
  .view-segment .view-segment-btn {
    width: var(--ui-header-segment-item-width);
    padding: 0;
  }
  .view-segment .view-segment-btn.is-active {
    color: var(--ui-accent);
  }
  .view-segment-indicator {
    position: absolute;
    top: var(--ui-seg-pad);
    left: var(--ui-seg-pad);
    z-index: 0;
    width: var(--ui-header-segment-item-width);
    height: var(--ui-size-sm);
    border-radius: var(--ui-radius-sm);
    background-color: var(--ux-raised);
    box-shadow: var(--ui-elevation-1);
    pointer-events: none;
    transform: translateX(calc(var(--ui-header-segment-item-width) * var(--view-segment-index, 0)));
    transition: transform var(--ui-duration-standard) var(--ui-ease-enter);
  }
}

/* ==========================================================================
   THẺ LỰA CHỌN CHUẨN (.ui-choice) — GĐ F kế hoạch chuẩn quốc tế (BA duyệt
   02/10/2026). Fluent 2 radio card: nhóm role="radiogroup", mỗi thẻ role="radio" +
   aria-checked. Một khung cho mọi lựa chọn trong Cài đặt (chế độ Sáng/Tối/Hệ thống,
   khung cửa sổ, cỡ chữ, Quick Add, ghim, kiểu danh sách AntiNote): cao tối thiểu
   size.md, viền ô nhập, nền nổi, chữ body-sm 500; rê = viền hover; ĐANG CHỌN =
   viền nhấn 2px (viền + bóng trong, không đổi hình học) trên nền nhấn 8%.
   --card: thẻ có ảnh xem trước (dạng cột). Dấu tích/ảnh mock bên trong do từng màn.
   ========================================================================== */
@layer components {
  .ui-choice {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--ui-space-2);
    min-width: 0;
    min-height: var(--ui-size-md);
    padding: 0 var(--ui-space-3);
    border: var(--ui-resizer-line) solid var(--ux-input-border);
    border-radius: var(--ui-radius-control);
    background: var(--ux-raised);
    box-shadow: none;
    color: var(--ui-text-primary);
    font-family: inherit;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    line-height: var(--lh-tight);
    text-align: left;
    cursor: pointer;
    user-select: none;
    transition:
      border-color var(--ui-duration-fast) var(--ui-ease),
      background-color var(--ui-duration-fast) var(--ui-ease),
      box-shadow var(--ui-duration-fast) var(--ui-ease);
  }
  .ui-choice:hover:not(:disabled) {
    border-color: var(--ui-control-border-hover);
    background: color-mix(in srgb, var(--ui-text-primary) 4%, var(--ux-raised));
  }
  .ui-choice:is([aria-checked="true"], .is-selected) {
    border-color: var(--ui-accent);
    background: color-mix(in srgb, var(--ui-accent) 8%, var(--ux-raised));
    box-shadow: inset 0 0 0 var(--ui-resizer-line) var(--ui-accent);
  }
  .ui-choice:focus-visible {
    outline: var(--ui-focus-ring-width) solid var(--ui-focus-ring);
    outline-offset: var(--ui-focus-ring-offset);
  }
  .ui-choice:disabled {
    color: var(--ui-text-muted);
    cursor: not-allowed;
  }
  .ui-choice.ui-choice--card {
    flex-direction: column;
    align-items: stretch;
    padding: var(--ui-space-2);
  }
}

/* ==========================================================================
   NHÃN DỰ ÁN CHUẨN (.ui-tag) — GĐ F (BA duyệt 02/10/2026). Fluent 2 Tag: cao
   size.sm 24, đệm space.2, chữ caption đậm, tô theo --tag-color (màu dự án; mặc
   định màu nhấn): chữ màu tag, viền 34%, nền 10%. .is-unlinked (token chưa thuộc
   dự án) = viền đứt, chữ muted. Nhãn bấm-để-gỡ (<button>) rê chuột báo đỏ.
   ========================================================================== */
@layer components {
  .ui-tag {
    --ui-tag-tone: var(--tag-color, var(--ui-accent));
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-height: var(--ui-size-sm);
    padding: 0 var(--ui-space-2);
    border: var(--ui-resizer-line) solid color-mix(in srgb, var(--ui-tag-tone) 34%, var(--ui-divider));
    border-radius: var(--ui-radius-control);
    background: color-mix(in srgb, var(--ui-tag-tone) 10%, transparent);
    color: var(--ui-tag-tone);
    font-family: inherit;
    font-size: var(--fs-caption);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-none);
    white-space: nowrap;
  }
  .ui-tag.is-unlinked {
    border-style: dashed;
    border-color: var(--ui-divider);
    background: transparent;
    color: var(--ui-text-muted);
  }
  button.ui-tag {
    cursor: pointer;
    transition: color var(--ui-duration-fast) var(--ui-ease), background-color var(--ui-duration-fast) var(--ui-ease);
  }
  button.ui-tag:is(:hover, :focus-visible) {
    background: var(--ui-danger-bg);
    color: var(--ui-danger);
  }
  button.ui-tag:focus-visible {
    outline: var(--ui-focus-ring-width) solid var(--ui-focus-ring);
    outline-offset: var(--ui-focus-ring-offset);
  }
}

/* ==========================================================================
   TAB CHUẨN (.ui-tab) — GĐ F kế hoạch chuẩn quốc tế (01/10/2026). Fluent 2
   TabList cỡ nhỏ: cao size.md 32, đệm ngang space.3, chữ body-sm semibold màu
   phụ; rê = nền --ui-hover; đang chọn ([aria-selected="true"] hoặc .is-active) =
   chữ màu nhấn + vạch nhấn 2px ở đáy (bóng trong, không đổi hình học). Dùng cho
   tab đổi nội dung một vùng (role="tab"); nhóm lựa chọn ngắn dùng SEGMENTED.
   ========================================================================== */
@layer components {
  .ui-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ui-space-1-5);
    box-sizing: border-box;
    height: var(--ui-size-md);
    min-height: var(--ui-size-md);
    padding: 0 var(--ui-space-3);
    border: 0;
    border-radius: var(--ui-radius-control) var(--ui-radius-control) 0 0;
    background: transparent;
    color: var(--ui-text-secondary);
    font-family: inherit;
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-none);
    white-space: nowrap;
    cursor: pointer;
    transition:
      color var(--ui-duration-fast) var(--ui-ease),
      background-color var(--ui-duration-fast) var(--ui-ease),
      box-shadow var(--ui-duration-fast) var(--ui-ease);
  }
  .ui-tab:hover:not(:disabled) {
    background: var(--ui-hover);
    color: var(--ui-text-primary);
  }
  .ui-tab:is([aria-selected="true"], .is-active) {
    color: var(--ui-accent);
    box-shadow: inset 0 calc(-1 * var(--ui-focus-ring-width)) 0 var(--ui-accent);
  }
  .ui-tab:focus-visible {
    outline: var(--ui-focus-ring-width) solid var(--ui-focus-ring);
    outline-offset: calc(-1 * var(--ui-focus-ring-width));
  }
  .ui-tab:disabled {
    color: var(--ui-text-muted);
    cursor: not-allowed;
  }
}

/* ==========================================================================
   THẺ CHUẨN (.ui-card) — GĐ4 (docs/BAO-CAO-CHUAN-HOA-UI-TOKEN-2026-09-18.md §4.5–4.6, §7.1)
   Thẻ nội dung phẳng theo hợp đồng bề mặt của app (tách nền chứa bằng một bậc
   nền + viền divider, không đổ bóng), bo radius.lg (một thang — Q2). Thay ba
   nguồn ép ưu tiên cũ đang giành nhau (bóng elev-3 / none / shadow-card). Đệm do
   từng màn quyết định ở @layer modules.
   ========================================================================== */
@layer components {
  :is(.ui-card, .dashboard-card, .dashboard-kpi-card,
      .settings-card, .premium-page-card) {
    border: var(--ui-resizer-line) solid var(--ui-divider);
    border-radius: var(--ui-radius-lg);
    background-color: var(--ux-card);
    box-shadow: none;
  }
}

/* ==========================================================================
   THANH CÔNG CỤ SOẠN THẢO CHUẨN (Quill) — GĐ4 Notebook lát 2
   Bốn thanh (Notebook + popup ghi chú Project, Kế hoạch/Báo cáo Project, Ghi chú
   Hôm nay, Ghi chú liên kết) trước đây mỗi thanh một cỡ (28 / 26 / 26×24 / 26) và
   ba kiểu "đang bật". Nay: nút định dạng và ô chọn Kiểu/Phông/Cỡ cùng cỡ
   --ui-editor-toolbar-control (28, icon 20 — chuẩn Word Web/Docs, BA 12/10/2026; trước sm 24),
   một kiểu hover (--ui-hover) / nhấn (--ui-action-active) / bật (accent đặc).
   Ô chọn trước đây cao 26 vì content-box (24 + viền 2) -> border-box.
   Chỉ nhắm nút định dạng (.ql-formats > button) — nút mở ô chọn cũng là <button>
   nằm trong thanh; ép nó vuông 24 làm mất nhãn "Đoạn văn"/"Mặc định".
   ========================================================================== */
@layer components {
  :is(.notics-toolbar, .project-weekly-toolbar, .today-note-toolbar, .linked-note-editor-toolbar) :is(.ql-formats > button, .notics-tb-more > button, .notics-tb-row > button) {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ui-editor-toolbar-control);
    min-width: var(--ui-editor-toolbar-control);
    height: var(--ui-editor-toolbar-control);
    min-height: var(--ui-editor-toolbar-control);
    padding: 0;
    border: var(--ui-resizer-line) solid transparent;
    border-radius: var(--ui-radius-control);
    background: transparent;
    /* Icon màu chữ chính như Google Docs (BA 2026-09-23): xám phụ + icon nhỏ
       làm cả thanh khó dò. Trạng thái rỗng dùng :disabled bên dưới. */
    color: var(--ui-text-primary);
    font-family: inherit;
    line-height: var(--lh-none);
    cursor: pointer;
    transition:
      color var(--ui-duration-fast) var(--ui-ease),
      background-color var(--ui-duration-fast) var(--ui-ease);
  }
  :is(.notics-toolbar, .project-weekly-toolbar, .today-note-toolbar, .linked-note-editor-toolbar) :is(.ql-formats > button, .notics-tb-more > button, .notics-tb-row > button):hover {
    background: var(--ui-hover);
    border-color: transparent;
    color: var(--ui-text-primary);
  }
  :is(.notics-toolbar, .project-weekly-toolbar, .today-note-toolbar, .linked-note-editor-toolbar) :is(.ql-formats > button, .notics-tb-more > button, .notics-tb-row > button):active {
    background: var(--ui-action-active);
    color: var(--ui-text-primary);
  }
  :is(.notics-toolbar, .project-weekly-toolbar, .today-note-toolbar, .linked-note-editor-toolbar) :is(.ql-formats > button, .notics-tb-more > button, .notics-tb-row > button).ql-active {
    background: var(--ui-accent-solid);
    border-color: transparent;
    color: var(--ui-text-on-accent);
  }
  :is(.notics-toolbar, .project-weekly-toolbar, .today-note-toolbar, .linked-note-editor-toolbar) :is(.ql-formats > button, .notics-tb-more > button, .notics-tb-row > button):focus-visible {
    outline: var(--ui-focus-ring-width) solid var(--ui-focus-ring);
    outline-offset: var(--ui-focus-ring-offset);
  }
  :is(.notics-toolbar, .project-weekly-toolbar, .today-note-toolbar, .linked-note-editor-toolbar)
    :is(.token-select-trigger, select) {
    box-sizing: border-box;
    height: var(--ui-editor-toolbar-control);
    min-height: var(--ui-editor-toolbar-control);
    border-radius: var(--ui-radius-control);
    font-size: var(--fs-caption);
  }
  :is(.notics-toolbar, .project-weekly-toolbar, .today-note-toolbar, .linked-note-editor-toolbar) :is(.ql-formats > button, .notics-tb-more > button, .notics-tb-row > button) svg {
    width: var(--ui-editor-toolbar-icon);
    height: var(--ui-editor-toolbar-icon);
  }
  /* Nhãn kế thừa line-height 1 + overflow hidden -> cắt dấu dưới tiếng Việt
     ("Đoạn" thành "Đoan", mất chấm "Mặc định"). */
  :is(.notics-toolbar, .project-weekly-toolbar, .today-note-toolbar, .linked-note-editor-toolbar) .token-select-label {
    line-height: var(--lh-caption);
  }
  /* Hoàn tác/Làm lại khi ngăn xếp rỗng: icon nhạt, không nền hover (ARS-1: không opacity). */
  :is(.notics-toolbar, .project-weekly-toolbar, .today-note-toolbar, .linked-note-editor-toolbar) :is(.ql-formats > button, .notics-tb-more > button, .notics-tb-row > button):disabled {
    background: transparent;
    color: var(--ui-text-muted);
    cursor: default;
  }
  /* Công thức trên đặt display -> phải tôn trọng thuộc tính hidden (quy tắc GĐ4 số 2). */
  :is(.notics-toolbar, .project-weekly-toolbar, .today-note-toolbar, .linked-note-editor-toolbar) :is(.ql-formats > button, .notics-tb-more > button, .notics-tb-row > button)[hidden] {
    display: none;
  }
}

/* ==========================================================================
   [hidden] CHO THÀNH PHẦN CHUẨN — các công thức ở layer này đặt display (inline-flex,
   flex…), mà display của author CSS luôn thắng [hidden] { display: none } của trình
   duyệt. Không có rule này thì nút ẩn bằng thuộc tính hidden vẫn hiện (lỗi thật:
   #ganttMilestoneDelete hiện khi tạo milestone mới sau khi chuyển sang .ui-btn).
   :is(.x)[hidden] có độ cụ thể (0,2,0) > .ui-btn (0,1,0) nên thắng trong cùng layer.
   ========================================================================== */
@layer components {
  :is(.ui-btn, .ui-segmented, .ui-segmented__item, .ui-tab, .ui-choice, .ui-tag, .ui-field-group, .ui-input, .ui-select, .ui-textarea,
      .ui-toast, .ui-card, .ui-popover, .ui-dialog, .overlay-panel--sm, .overlay-panel--md,
      .overlay-panel--lg, .overlay-panel--xl)[hidden] {
    display: none;
  }
}

/* Content-dialog chrome: title first, expand then close at the top right.
   Opt-in owners keep their own scroll/save/close behaviour. Never place
   these controls in the scrolling body or a wrapping metadata row. */
@layer modules {
  .ui-dialog-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--ui-space-2);
    min-width: 0;
    padding: var(--ui-space-2) var(--ui-space-3);
    border-bottom: var(--ui-resizer-line) solid var(--ui-divider);
  }
  .ui-dialog-header > :is(.notics-note-title, .edit-title-group, .drawer-title, .overlay-head-main) {
    flex: 1;
    min-width: 0;
  }
  .ui-dialog-header .overlay-head-body { min-width: 0; }
  .ui-dialog-controls {
    display: flex;
    flex: 0 0 auto;
    align-self: flex-start;
    align-items: center;
    gap: var(--ui-space-1);
    margin-inline-start: auto;
    -webkit-app-region: no-drag;
  }
  /* Popup mở rộng/toàn màn phủ lên .topbar (vùng kéo cửa sổ -webkit-app-region:
     drag). Hit-test của Windows không nhìn z-index: phần thanh đầu nằm trên vùng
     kéo mà không khai báo no-drag thì bấm nút = kéo cửa sổ (BA 2026-09-23: ☆, màu
     nền, khóa, ⋯ của Notebook không bấm được). Cả thanh đầu hộp thoại là no-drag. */
  .ui-dialog-header { -webkit-app-region: no-drag; }
  .ui-dialog-header > .notics-save-status { margin: 0; }
  :is(.ui-dialog-header, .ui-dialog-controls)[hidden] { display: none; }
  /* Nền thanh đầu Notebook: .note-doc-header (styles/note-editor-shell.css, chung AntiNote). */
  /* The old title/pin lived inside editorWrap. Keep them unavailable when
     that editor is locked/empty, while close/expand stay accessible. */
  #noticsEditorModal:has(#noticsEditorWrap.hidden) .ui-dialog-header :is(#noticsPinTopBtn, #noticsNoteTitle) {
    visibility: hidden;
  }
  /* Responsive note dialogs already fill the viewport. Their legacy rules
     hid expand, but .ui-btn's later display made the no-op button reappear. */
  :is(html[data-layout-mode="compact"], html[data-layout-mode="tight"])
    .ui-dialog-controls :is(#noticsEditorExpandBtn, #pnpExpandBtn) { display: none; }
  @media (max-width: 820px) {
    .ui-dialog-controls :is(#noticsEditorExpandBtn, #pnpExpandBtn) { display: none; }
  }

  /* Form chỉnh sửa công việc độc lập: ẩn header ngoài (#editDragHandle) của editPanel,
     chỉ hiển thị một header chuẩn duy nhất của itemDetailDrawer. */
  .edit-panel.standalone-task-edit > :is(.edit-header, .ui-dialog-header, :not(.edit-body)) {
    display: none;
  }
  .edit-panel.standalone-task-edit .item-detail-drawer .drawer-header.popup-drag-handle {
    cursor: grab;
  }
}
@layer states {
  .overlay.ui-dialog-overlay-expanded { padding: 0; }
  .overlay .ui-dialog-expanded {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  .ui-dialog-expanded .item-detail-drawer { border-radius: 0; }
}

/* 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 {
  :is( button:not(.token-date-trigger):not(.token-select-trigger):not(.antiscreenshot-stepper-btn), [role="button"], input[type="checkbox"], input[type="radio"], input[type="range"], input[type="file"] ):focus-visible { outline: var(--ui-focus-ring-width) solid var(--ui-focus-ring); }
  :is(.topbar .icon-btn, .topbar .picker-btn, .topbar .notics-header-toggle, .topbar .notics-icon-btn, .topbar .notics-project-filter-btn, .topbar .notics-open-project-btn, .topbar .antiscreenshot-capture-btn, .topbar .glass-icon-btn, .topbar .view-mode-wrap .glass-icon-btn) { height: var(--ui-header-control-size); min-height: var(--ui-header-control-size); max-height: var(--ui-header-control-size); border-radius: var(--ui-radius-control); box-shadow: none; transition: color var(--ui-duration-fast) var(--ui-ease), background-color var(--ui-duration-fast) var(--ui-ease), border-color var(--ui-duration-fast) var(--ui-ease), filter var(--ui-duration-fast) var(--ui-ease); }
  :is(.topbar .picker-btn, .topbar .notics-project-filter-btn, .topbar .antiscreenshot-capture-btn:not(.is-primary), .topbar .antiscreenshot-zoom > button) { border: var(--ui-stroke-thin) solid transparent; background: transparent; color: var(--ui-text-primary); }
  :is(.topbar .icon-btn, .topbar .notics-header-toggle, .topbar .notics-icon-btn, .topbar .notics-open-project-btn, .topbar .glass-icon-btn, .topbar .view-mode-wrap .glass-icon-btn) { width: var(--ui-header-control-size); padding: 0; border: var(--ui-stroke-thin) solid transparent; background: transparent; color: var(--ui-text-secondary); }
  .topbar-search-wrap { height: var(--ui-header-control-size); min-height: var(--ui-header-control-size); }
  .topbar .week-nav-cluster { height: var(--ui-header-control-size); min-height: var(--ui-header-control-size); padding: var(--ui-header-cluster-padding); border-radius: var(--dt-dimension-radius-full); align-items: center; }
  .topbar .week-nav-cluster .picker-wrap { align-items: center; height: 100%; }
  .topbar .week-nav-cluster :is(.icon-btn, .picker-btn) { height: calc(var(--ui-header-control-size) - var(--ui-header-cluster-inset)); min-height: calc(var(--ui-header-control-size) - var(--ui-header-cluster-inset)); max-height: calc(var(--ui-header-control-size) - var(--ui-header-cluster-inset)); border-radius: var(--dt-dimension-radius-full); align-items: center; }
  .topbar .week-nav-cluster .icon-btn { width: calc(var(--ui-header-control-size) - var(--ui-header-cluster-inset)); border-radius: var(--ui-radius-circle); }
  :is(.topbar .icon-btn, .topbar .picker-btn, .topbar .notics-header-toggle, .topbar .notics-icon-btn, .topbar .notics-open-project-btn, .topbar .antiscreenshot-capture-btn:not(.is-primary), .topbar .glass-icon-btn, .topbar .antiscreenshot-zoom > button):hover:not(:disabled) { background: var(--ui-hover); border-color: transparent; color: var(--ui-text-primary); }
  :is(.topbar .icon-btn, .topbar .picker-btn, .topbar .notics-header-toggle, .topbar .notics-icon-btn, .topbar .notics-open-project-btn, .topbar .antiscreenshot-capture-btn:not(.is-primary), .topbar .glass-icon-btn, .topbar .antiscreenshot-zoom > button):active:not(:disabled) { background: var(--ui-action-active); border-color: transparent; color: var(--ui-text-primary); }
  :is(.topbar .antiscreenshot-capture-btn.is-primary) { background: var(--ui-accent-solid); border: var(--ui-resizer-line) solid transparent; color: var(--ui-text-on-accent); }
  :is(.topbar .antiscreenshot-capture-btn.is-primary):hover:not(:disabled) { background: color-mix(in srgb, var(--ui-accent-solid) 88%, var(--ui-text-on-accent)); border-color: transparent; color: var(--ui-text-on-accent); filter: brightness(1.06); box-shadow: var(--ui-shadow-accent); }
  :is(.topbar .antiscreenshot-capture-btn.is-primary):active:not(:disabled) { background: color-mix(in srgb, var(--ui-accent-solid) 85%, var(--ui-text-primary)); border-color: transparent; color: var(--ui-text-on-accent); filter: brightness(0.92); }
  .notics-resizer { width: var(--ui-resizer-hit); background: transparent; }
  :is(.notics-col-head) { border-color: var(--ui-divider); background: var(--ux-header); }
}