es-application-template 0.0.8 → 0.0.15

package/dist/styles/index.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /* Package-owned styles only. Host ADMIN styles live outside es-application-template. */
 .becoxy-admin {
   min-width: 0;
@@ -137,301 +138,4763 @@
     display: none;
   }
 }
-.config-feature-tree-select .select__option {
-  padding-left: 8px;
-  padding-right: 8px;
+/* Appearance dependency closure from the pilot host. Original selectors/declarations/order retained. */
+.becoxy-settings-page {
+  --be-page-inline-padding: var(--be-content-padding);
+  --be-page-block-padding: var(--be-content-padding);
+  --be-settings-inline-padding: var(--be-page-inline-padding);
+  --be-settings-block-padding: var(--be-page-block-padding);
+  --be-settings-gap: var(--be-section-gap);
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  overflow: hidden;
+  background-color: var(--be-background);
+  container-name: be-settings;
+  container-type: inline-size;
 }
 
-.config-feature-tree-select__option {
-  display: flex;
-  align-items: center;
-  min-width: 0;
+.bx-color-field__picker.form-control-color {
+  width: 42px;
+  height: 38px;
+  padding: 3px;
+  background-color: var(--be-surface);
+  border: 1px solid var(--be-input-border);
+  border-radius: var(--be-input-radius);
+  box-shadow: none !important;
 }
 
-.config-feature-tree-select__toggle,
-.config-feature-tree-select__toggle-spacer {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 22px;
-  width: 22px;
-  height: 22px;
-  margin-right: 2px;
+.bx-color-field__picker.form-control-color:focus {
+  border-color: var(--be-input-border);
+  box-shadow: none !important;
 }
 
-.config-feature-tree-select__toggle {
+.bx-color-field__picker.form-control-color::-webkit-color-swatch-wrapper {
   padding: 0;
+}
+
+.bx-color-field__picker.form-control-color::-webkit-color-swatch {
   border: 0;
-  border-radius: 4px;
-  background: transparent;
-  color: inherit;
-  line-height: 1;
-  cursor: pointer;
+  border-radius: calc(var(--be-input-radius) - 3px);
 }
-.config-feature-tree-select__toggle:hover, .config-feature-tree-select__toggle:focus-visible {
-  background: rgba(var(--be-primary-rgb, 115, 103, 240), 0.12);
-  outline: none;
+
+.bx-color-field__picker.form-control-color::-moz-color-swatch {
+  border: 0;
+  border-radius: calc(var(--be-input-radius) - 3px);
 }
 
-.config-feature-tree-select__label {
+.becoxy-settings-page__fixed {
+  position: relative;
+  z-index: 2;
+  width: 100%;
   min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.customizer.config-tree-rules-drawer {
-  width: min(1000px, 100vw);
-  max-width: 100vw;
-  color: #000 !important;
-  background: #fff !important;
-}
-.customizer.config-tree-rules-drawer .config-key-sample-layout,
-.customizer.config-tree-rules-drawer .config-key-sample-content,
-.customizer.config-tree-rules-drawer .config-key-sample-toolbar,
-.customizer.config-tree-rules-drawer .table,
-.customizer.config-tree-rules-drawer .table thead th,
-.customizer.config-tree-rules-drawer .table tbody td {
-  color: #000 !important;
-  background: #fff !important;
+  background-color: var(--be-surface);
+  border-bottom: 1px solid var(--be-border);
 }
-.customizer.config-tree-rules-drawer .modal-title,
-.customizer.config-tree-rules-drawer h6,
-.customizer.config-tree-rules-drawer th,
-.customizer.config-tree-rules-drawer td,
-.customizer.config-tree-rules-drawer strong,
-.customizer.config-tree-rules-drawer .config-key-sample-text,
-.customizer.config-tree-rules-drawer .config-key-sample-empty,
-.customizer.config-tree-rules-drawer .form-control {
-  color: #000 !important;
+
+.becoxy-settings-page__header {
+  gap: var(--be-gutter);
+  min-height: 58px;
+  padding: var(--be-settings-block-padding) var(--be-settings-inline-padding);
+  color: var(--be-text-primary);
+  background-color: var(--be-surface);
 }
-.customizer.config-tree-rules-drawer .config-key-sample-text {
-  padding: 0;
-  background: transparent !important;
-  font-family: monospace;
-  font-size: 12px;
-  overflow-wrap: anywhere;
+
+.becoxy-settings-page__actions {
+  gap: var(--be-card-gap);
 }
-.customizer.config-tree-rules-drawer .config-key-sample-copy-row {
+
+.becoxy-settings-page__tabs {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
+  flex-wrap: nowrap;
+  width: 100%;
+  min-width: 0;
+  margin: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  background-color: var(--be-surface);
+  scrollbar-width: thin;
+  scrollbar-color: var(--be-scrollbar-thumb) transparent;
+  overscroll-behavior-x: contain;
+  -webkit-overflow-scrolling: touch;
 }
-.customizer.config-tree-rules-drawer .config-key-sample-copy-row + .config-key-sample-copy-row {
-  margin-top: 2px;
+
+.becoxy-settings-page__tabs::-webkit-scrollbar {
+  height: 4px;
 }
-.customizer.config-tree-rules-drawer .config-key-sample-copy-button {
-  display: inline-flex;
-  flex: 0 0 28px;
-  width: 28px;
-  height: 28px;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  color: #000;
+
+.becoxy-settings-page__tabs::-webkit-scrollbar-track {
   background: transparent;
-  border: 0;
-  border-radius: 4px;
-  cursor: pointer;
 }
-.customizer.config-tree-rules-drawer .config-key-sample-copy-button:hover {
-  background: #f2f2f2;
+
+.becoxy-settings-page__tabs::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: var(--be-scrollbar-thumb);
 }
-.customizer.config-tree-rules-drawer .config-key-sample-copy-button:focus-visible {
-  outline: 2px solid #000;
-  outline-offset: 1px;
+
+.becoxy-settings-page__tabs .nav-item,
+.becoxy-settings-page__tab-item {
+  flex: 0 0 auto !important;
+  width: auto;
+  min-width: max-content;
 }
-.customizer.config-tree-rules-drawer .form-control::placeholder {
-  color: #000;
-  opacity: 1;
+
+.becoxy-settings-page__tabs .nav-link,
+.becoxy-settings-page__tab-link {
+  width: auto;
+  min-height: var(--be-tab-height);
+  min-width: max-content;
+  padding-inline: 13px;
+  overflow: visible;
+  text-overflow: clip;
+  white-space: nowrap;
 }
-.customizer.config-tree-rules-drawer .select__single-value,
-.customizer.config-tree-rules-drawer .select__placeholder,
-.customizer.config-tree-rules-drawer .select__input-container,
-.customizer.config-tree-rules-drawer .select__option {
-  color: #000 !important;
+
+.becoxy-settings-page__scroll {
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  background-color: var(--be-background);
 }
-@charset "UTF-8";
-.bx-shortcut-management {
+
+.becoxy-settings-page__fit {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
   width: 100%;
-  height: 100%;
   min-width: 0;
   min-height: 0;
   overflow: hidden;
-  /*
-   * TEMP COMPACT DENSITY — chỉ màn Quản lý phím tắt.
-   * Tạm hardcode theo yêu cầu review hiện tại.
-   * Không ảnh hưởng Grid global / es-grid-template.
-   */
-}
-.bx-shortcut-management .ui-rc-grid-thead .ui-rc-grid-row {
-  height: 30px !important;
-  min-height: 30px !important;
+  background-color: var(--be-background);
 }
-.bx-shortcut-management .ui-rc-grid-thead .ui-rc-grid-cell {
-  height: 30px !important;
-  min-height: 30px !important;
-  padding: 0 8px !important;
+
+.becoxy-settings-page__scroll-view {
+  overflow-x: hidden !important;
+  overflow-y: scroll !important;
+  overscroll-behavior: contain;
 }
-.bx-shortcut-management .ui-rc-grid-tbody .ui-rc-grid-row.ui-rc-grid-row-parent {
-  height: 30px !important;
-  min-height: 30px !important;
+
+.becoxy-settings-page__content {
+  width: 100%;
+  min-width: 0;
+  min-height: 100%;
+  padding: var(--be-settings-block-padding) var(--be-settings-inline-padding);
+  background-color: var(--be-background);
 }
-.bx-shortcut-management .ui-rc-grid-tbody .ui-rc-grid-row.ui-rc-grid-row-parent .ui-rc-grid-cell {
-  height: 30px !important;
-  min-height: 30px !important;
-  padding: 0 8px !important;
+
+.becoxy-settings-page__content--fit {
+  display: flex;
+  flex-direction: column;
+  gap: var(--be-settings-gap);
+  height: 100%;
+  min-height: 0;
+  padding-bottom: var(--be-settings-block-padding);
+  overflow: hidden;
 }
-.bx-shortcut-management .ui-rc-grid-tbody .ui-rc-grid-row:not(.ui-rc-grid-row-parent) {
-  height: 32px !important;
-  min-height: 32px !important;
-  max-height: 32px !important;
+
+@media (max-width: 679.98px) {
+  .becoxy-settings-page__header {
+    align-items: flex-start !important;
+    min-height: auto;
+  }
+  .becoxy-settings-page__tabs {
+    display: flex;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-snap-type: x proximity;
+  }
+  .becoxy-settings-page__tabs .nav-item,
+  .becoxy-settings-page__tab-item {
+    flex: 0 0 auto !important;
+    min-width: max-content;
+    scroll-snap-align: start;
+  }
+  .becoxy-settings-page__tabs .nav-link,
+  .becoxy-settings-page__tab-link {
+    padding-inline: 12px;
+  }
 }
-.bx-shortcut-management .ui-rc-grid-tbody .ui-rc-grid-row:not(.ui-rc-grid-row-parent) .ui-rc-grid-cell {
-  height: 32px !important;
-  min-height: 0 !important;
-  max-height: 32px !important;
-  padding: 0 8px !important;
-  overflow: hidden;
-  line-height: 16px;
+.becoxy-admin-standard {
+  color: var(--be-text-primary);
 }
-.bx-shortcut-management .bx-shortcut-feature {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  line-height: 16px;
+
+.becoxy-admin-standard .card-header {
+  min-height: 44px;
+  padding: var(--be-card-gap) var(--be-card-padding);
+  border-bottom: 1px solid var(--be-border);
 }
-.bx-shortcut-management .bx-shortcut-group-title {
+
+.becoxy-admin-standard .card-header .card-title {
+  color: var(--be-heading-text);
+  font-size: 14px;
   font-weight: 600;
-  line-height: 16px;
-  color: var(--be-text-primary, inherit);
 }
-.bx-shortcut-management .bx-shortcut-capture-wrap {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-  max-width: 100%;
-  min-width: 0;
-  height: 22px;
-  line-height: 1;
+
+.becoxy-admin-standard .card-body {
+  padding: var(--be-card-padding);
 }
-.bx-shortcut-management .bx-shortcut-capture {
-  display: inline-flex;
-  align-items: center;
-  min-width: 124px;
-  height: 22px;
-  min-height: 22px;
-  padding: 0 6px;
-  border: 1px solid var(--be-border-color, #d8d8d8);
-  border-radius: 4px;
-  background: var(--be-surface-color, #fff);
-  color: var(--be-text-color, #212529);
-  line-height: 1;
-  text-align: left;
+
+.becoxy-admin-standard .becoxy-settings-page__header,
+.becoxy-admin-standard.becoxy-admin-list-page .becoxy-admin-list-page__header {
+  min-height: 44px;
 }
-.bx-shortcut-management .bx-shortcut-capture:hover, .bx-shortcut-management .bx-shortcut-capture.is-capturing {
-  border-color: var(--be-primary, #7367f0);
-  color: var(--be-primary, #7367f0);
+
+.becoxy-admin-standard .becoxy-settings-page__tabs .nav-link {
+  min-height: var(--be-tab-height);
+  padding-top: 8px;
+  padding-bottom: 8px;
+  font-size: 13px;
+  font-weight: 500;
 }
-.bx-shortcut-management .bx-shortcut-capture.is-capturing {
-  box-shadow: 0 0 0 2px rgba(115, 103, 240, 0.12);
+
+.becoxy-admin-standard .becoxy-settings-page__content,
+.becoxy-admin-standard.becoxy-admin-list-page {
+  background: var(--be-background);
 }
-.bx-shortcut-management .bx-shortcut-capture:disabled {
-  cursor: not-allowed;
-  opacity: 0.55;
+
+.becoxy-admin-standard .becoxy-settings-page__content--fit,
+.becoxy-admin-standard .becoxy-admin-list-page__content {
+  min-height: 0;
+  overflow: hidden;
 }
-.bx-shortcut-management .bx-shortcut-clear {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  padding: 0;
-  border: 0;
-  border-radius: 4px;
-  background: transparent;
-  color: var(--be-text-color, #212529);
-  line-height: 1;
-  opacity: 1;
+
+/* Runtime Theme
+ *
+ * 1. Tokens / base
+ * 2. Typography and colors
+ * 3. Controls
+ * 4. Navigation compatibility
+ * 5. Surface / card / modal
+ * 6. Light / dark states
+ * 7. Third-party compatibility overrides
+ */
+:root {
+  --be-primary: #eb4619;
+  --be-primary-rgb: 235, 70, 25;
+  --be-primary-hover: #cf3e16;
+  --be-primary-active: #bc3814;
+  --be-primary-soft: #fdf9f7;
+  --be-primary-contrast: #ffffff;
+  --be-primary-hover-contrast: #ffffff;
+  --be-primary-active-contrast: #ffffff;
+  --be-tab-active-color: #eb4619;
+  --be-brand-accent: #eb4619;
+  --be-brand-accent-rgb: 235, 70, 25;
+  --be-secondary: #10b981;
+  --be-secondary-rgb: 16, 185, 129;
+  --be-secondary-hover: #0ea072;
+  --be-secondary-active: #0d9467;
+  --be-secondary-contrast: #ffffff;
+  --be-secondary-hover-contrast: #ffffff;
+  --be-secondary-active-contrast: #ffffff;
+  --be-success: #22c55e;
+  --be-success-rgb: 34, 197, 94;
+  --be-success-hover: #1ead53;
+  --be-success-active: #1b9e4b;
+  --be-success-contrast: #ffffff;
+  --be-warning: #f59e0b;
+  --be-warning-rgb: 245, 158, 11;
+  --be-warning-hover: #d88b0a;
+  --be-warning-active: #c47e09;
+  --be-warning-contrast: #000000;
+  --be-danger: #ef4444;
+  --be-danger-rgb: 239, 68, 68;
+  --be-danger-hover: #d23c3c;
+  --be-danger-active: #bf3636;
+  --be-danger-contrast: #ffffff;
+  --be-danger-hover-contrast: #ffffff;
+  --be-danger-active-contrast: #ffffff;
+  --be-info: #06b6d4;
+  --be-info-rgb: 6, 182, 212;
+  --be-info-hover: #05a0ba;
+  --be-info-active: #0591aa;
+  --be-info-contrast: #000000;
+  --be-background: #ffffff;
+  --be-surface: #ffffff;
+  --be-surface-contrast: #111827;
+  --be-surface-secondary: #ffffff;
+  --be-text-primary: #000000;
+  --be-heading-text: #000000;
+  --be-text-secondary: #475569;
+  --be-text-muted: #64748b;
+  --be-placeholder: #94a3b8;
+  --be-border: #e2e8f0;
+  --be-layout-divider: #dfe3e8;
+  --be-input-border: #cbd5e1;
+  --be-hover-background: #f8fafc;
+  --be-active-background: #fff1ec;
+  --be-disabled-background: #f1f5f9;
+  --be-navbar-background: #ffffff;
+  --be-navbar-text: #000000;
+  --be-sidebar-background: #ffffff;
+  --be-sidebar-text: #000000;
+  --be-sidebar-muted-text: #64748b;
+  --be-sidebar-hover-background: #fef2ef;
+  --be-sidebar-hover-text: #111827;
+  --be-sidebar-active-background: #fde9e3;
+  --be-sidebar-active-text: #a93212;
+  --be-sidebar-accent-text: #a93212;
+  --be-sidebar-active-indicator: #eb4619;
+  --be-sidebar-brand-background: #ffffff;
+  --be-sidebar-brand-text: #000000;
+  --be-sidebar-brand-border: #e2e8f0;
+  --be-sidebar-brand-toggle: #eb4619;
+  --be-sidebar-group-text: #000000;
+  --be-link-color: #eb4619;
+  --be-scrollbar-thumb: #94a3b8;
+  --be-scrollbar-track: #f1f5f9;
+  --be-font-family: 'Segoe UI', Arial, sans-serif;
+  --be-font-size-base: 14px;
+  --be-line-height-base: 1.45;
+  --be-body-font-weight: 400;
+  --be-page-title-size: 20px;
+  --be-page-title-weight: 600;
+  --be-section-title-size: 16px;
+  --be-section-title-weight: 600;
+  --be-card-title-size: 14px;
+  --be-card-title-weight: 600;
+  --be-menu-font-size: 13px;
+  --be-menu-font-weight: 400;
+  --be-form-label-size: 12px;
+  --be-form-label-weight: 500;
+  --be-small-font-size: 12px;
+  --be-letter-spacing: 0px;
+  --be-control-height: 28px;
+  --be-button-height: 30px;
+  --be-button-radius: 0px;
+  --be-input-radius: 5px;
+  --be-card-radius: 6px;
+  --be-modal-radius: 5px;
+  --be-dropdown-radius: 5px;
+  --be-button-padding-x: 14px;
+  --be-card-padding: 21px;
+  --be-card-gap: 12px;
+  --be-card-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
+  --be-dropdown-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
+  --be-focus-ring-size: 3px;
+  --be-transition-duration: 180ms;
+  --be-tab-height: 30px;
+  --be-tab-radius: 0px;
+  --be-checkbox-size: 18px;
+  --be-switch-height: 24px;
+  --be-grid-font-size: 13px;
+  --be-grid-row-height: 40px;
+  --be-grid-header-height: 38px;
+  --be-grid-cell-padding-x: 8px;
+  --be-grid-cell-padding-y: 5px;
+  --be-grid-header-padding-x: 9px;
+  --be-grid-header-padding-y: 6px;
+  --be-grid-header-font-weight: 600;
+  --be-grid-pager-height: 46px;
+  --be-grid-border-width: 1px;
+  --be-grid-border-horizontal-width: 1px;
+  --be-grid-border-vertical-width: 1px;
+  --be-grid-radius: 4px;
+  --be-grid-shadow: none;
+  --be-grid-background: #ffffff;
+  --be-grid-text: #000000;
+  --be-grid-header-background: #fafbfc;
+  --be-grid-header-text: #000000;
+  --be-grid-striped-background: #f7f7f7;
+  --be-grid-hover-background: #f2f5f8;
+  --be-grid-selected-background: #fff1ec;
+  --be-grid-selected-text: #000000;
+  --be-grid-active-cell-background: #ffe4d9;
+  --be-grid-border: #e0e0e0;
+  --be-grid-group-background: #f8fafc;
+  --be-grid-group-text: #475569;
+  --be-grid-footer-background: #fafbfc;
+  --be-grid-footer-text: #475569;
+  --be-scrollbar-width: 6px;
+  --be-sidebar-width: 240px;
+  --be-sidebar-collapsed-width: 72px;
+  --be-navbar-height: 60px;
+  --be-footer-height: 40px;
+  --be-content-padding: 8px;
+  --be-gutter: 12px;
+  --be-section-gap: 12px;
+  --be-menu-item-height: 38px;
+  --be-menu-indent: 16px;
+  --be-menu-group-spacing: 12px;
+  --be-menu-icon-size: 16px;
+  --be-menu-active-radius: 6px;
+  --bs-primary: var(--be-primary);
+  --bs-primary-rgb: var(--be-primary-rgb);
+  --bs-secondary: var(--be-secondary);
+  --bs-success: var(--be-success);
+  --bs-warning: var(--be-warning);
+  --bs-danger: var(--be-danger);
+  --bs-info: var(--be-info);
 }
-.bx-shortcut-management .bx-shortcut-clear:hover {
-  background: rgba(0, 0, 0, 0.05);
-  color: var(--be-danger, #ea5455);
+
+/* Shared Appearance.grid adapters. Explicit component props and inline custom
+ * properties still win over these scoped defaults. */
+.be-appearance-grid {
+  color: var(--be-grid-text);
+  font-family: var(--be-font-family);
+  font-size: var(--be-grid-font-size);
+  background: var(--be-grid-background);
+  border: var(--be-grid-border-width) solid var(--be-grid-border);
+  border-radius: var(--be-grid-radius);
+  box-shadow: var(--be-grid-shadow);
+  overflow: hidden;
 }
-.bx-shortcut-management .bx-shortcut-clear:disabled {
-  cursor: not-allowed;
-  opacity: 0.45;
+
+.be-appearance-grid .e-grid,
+.be-appearance-grid .e-treegrid {
+  color: var(--be-grid-text);
+  font-family: var(--be-font-family) !important;
+  font-size: var(--be-grid-font-size) !important;
+  background: var(--be-grid-background);
+  border: 0 !important;
 }
-.bx-shortcut-management .bx-shortcut-key {
-  display: inline-flex;
-  align-items: center;
-  height: 20px;
-  min-height: 20px;
-  padding: 0 6px;
-  border: 1px solid var(--be-border-color, #d8d8d8);
-  border-radius: 4px;
-  color: var(--be-text-color, #212529);
-  line-height: 1;
-  white-space: nowrap;
+
+.be-appearance-grid .e-gridheader {
+  min-height: var(--be-grid-header-height);
+  color: var(--be-grid-header-text);
+  background: var(--be-grid-header-background) !important;
+  border-bottom: var(--be-grid-border-horizontal-width) solid var(--be-grid-border) !important;
 }
-.bx-shortcut-management .bx-shortcut-key--locked,
-.bx-shortcut-management .bx-shortcut-state {
-  color: var(--be-text-color, #212529);
-  opacity: 1;
+
+.be-appearance-grid .e-gridheader .e-headercell {
+  height: var(--be-grid-header-height) !important;
+  padding: var(--be-grid-header-padding-y) var(--be-grid-header-padding-x) !important;
+  color: var(--be-grid-header-text) !important;
+  font-weight: var(--be-grid-header-font-weight) !important;
+  background: var(--be-grid-header-background) !important;
+  border-color: var(--be-grid-border) !important;
 }
-.bx-shortcut-management .bx-shortcut-state {
-  line-height: 16px;
-  white-space: nowrap;
+
+.be-appearance-grid.grid-header-height-auto .e-gridheader .e-headercell {
+  height: auto !important;
+  min-height: var(--be-grid-header-height);
 }
-.bx-shortcut-management .bx-shortcut-row-action {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
+
+.be-appearance-grid .e-rowcell,
+.be-appearance-grid .e-templatecell {
+  padding: var(--be-grid-cell-padding-y) var(--be-grid-cell-padding-x) !important;
+  color: var(--be-grid-text) !important;
+  font-size: var(--be-grid-font-size) !important;
+  background: var(--be-grid-background);
+  border-color: var(--be-grid-border) !important;
+}
+
+.be-appearance-grid.grid-table-striped .e-row.e-altrow .e-rowcell:not(.e-active):not(.e-selectionbackground):not(.e-cellselectionbackground) {
+  background: var(--be-grid-striped-background) !important;
+}
+
+.be-appearance-grid.grid-table-hover .e-row:hover .e-rowcell:not(.e-active):not(.e-selectionbackground):not(.e-cellselectionbackground) {
+  background: var(--be-grid-hover-background) !important;
+}
+
+.be-appearance-grid .e-rowcell.e-selectionbackground,
+.be-appearance-grid .e-rowcell.e-active,
+.be-appearance-grid td.e-active {
+  color: var(--be-grid-selected-text) !important;
+  background: var(--be-grid-selected-background) !important;
+}
+
+.be-appearance-grid .e-cellselectionbackground {
+  background: var(--be-grid-active-cell-background) !important;
+}
+
+.be-appearance-grid .e-groupcaption {
+  color: var(--be-grid-group-text) !important;
+  background: var(--be-grid-group-background) !important;
+}
+
+.be-appearance-grid .e-summarycell,
+.be-appearance-grid .e-pager {
+  color: var(--be-grid-footer-text) !important;
+  background: var(--be-grid-footer-background) !important;
+}
+
+.be-appearance-grid .e-pager {
+  min-height: var(--be-grid-pager-height);
+  border-top: var(--be-grid-border-horizontal-width) solid var(--be-grid-border) !important;
+}
+
+/* es-grid-template's alternate ali/base-table surface consumes these variables. */
+.ui-rc-grid-table-wrapper.ui-rc-grid-table-wrapper {
+  --row-height: var(--be-grid-row-height);
+  --color: var(--be-grid-text);
+  --bgcolor: var(--be-grid-background);
+  --hover-bgcolor: var(--be-grid-hover-background);
+  --highlight-bgcolor: var(--be-grid-selected-background);
+  --header-row-height: var(--be-grid-header-height);
+  --header-color: var(--be-grid-header-text);
+  --header-bgcolor: var(--be-grid-header-background);
+  --footer-bgcolor: var(--be-grid-footer-background);
+  --footer-color: var(--be-grid-footer-text);
+  --cell-padding: var(--be-grid-cell-padding-y) var(--be-grid-cell-padding-x);
+  --font-size: var(--be-grid-font-size);
+  --line-height: var(--be-line-height-base);
+  --border-color: var(--be-grid-border);
+  --cell-border-horizontal: var(--be-grid-border-horizontal-width) solid var(--be-grid-border);
+  --cell-border-vertical: var(--be-grid-border-vertical-width) solid var(--be-grid-border);
+  --header-cell-border-horizontal: var(--be-grid-border-horizontal-width) solid var(--be-grid-border);
+  --header-cell-border-vertical: var(--be-grid-border-vertical-width) solid var(--be-grid-border);
+  font-family: var(--be-font-family);
+  border-radius: var(--be-grid-radius);
+  box-shadow: var(--be-grid-shadow);
+}
+
+.ui-rc-grid-table-wrapper .ui-rc-grid-table-header-cell {
+  padding: var(--be-grid-header-padding-y) var(--be-grid-header-padding-x);
+  font-weight: var(--be-grid-header-font-weight);
+}
+
+/* GridComponent in es-grid-template 1.9.46 renders through table-component,
+ * which does not forward its declared cssVariables prop. Keep the fallback
+ * scoped to the package's stable ui-rc-grid classes. */
+.ui-rc-grid.ui-rc-grid {
+  color: var(--be-grid-text) !important;
+  font-family: var(--be-font-family) !important;
+  font-size: var(--be-grid-font-size) !important;
+  background: var(--be-grid-background) !important;
+  border-radius: var(--be-grid-radius);
+  box-shadow: var(--be-grid-shadow);
+  overflow: hidden;
+}
+
+.ui-rc-grid.ui-rc-grid .ui-rc-grid-container {
+  border: var(--be-grid-border-width) solid var(--be-grid-border) !important;
+  border-right-width: var(--be-grid-border-width) !important;
+}
+
+.ui-rc-grid.ui-rc-grid .ui-rc-grid-container::after {
+  border-right-color: var(--be-grid-border) !important;
+  border-right-width: var(--be-grid-border-width) !important;
+}
+
+.ui-rc-grid.ui-rc-grid .ui-rc-grid-thead {
+  min-height: var(--be-grid-header-height);
+  color: var(--be-grid-header-text) !important;
+  font-weight: var(--be-grid-header-font-weight) !important;
+  background: var(--be-grid-header-background) !important;
+}
+
+.ui-rc-grid.ui-rc-grid .ui-rc-grid-thead .ui-rc-grid-row,
+.ui-rc-grid.ui-rc-grid .ui-rc-grid-thead .ui-rc-grid-cell {
+  min-height: var(--be-grid-header-height) !important;
+}
+
+.ui-rc-grid.ui-rc-grid .ui-rc-grid-thead .ui-rc-grid-cell {
+  padding: var(--be-grid-header-padding-y) var(--be-grid-header-padding-x) !important;
+  color: var(--be-grid-header-text) !important;
+  font-weight: var(--be-grid-header-font-weight) !important;
+  background: var(--be-grid-header-background) !important;
+  border-right: var(--be-grid-border-vertical-width) solid var(--be-grid-border) !important;
+  border-bottom: var(--be-grid-border-horizontal-width) solid var(--be-grid-border) !important;
+}
+
+.ui-rc-grid.ui-rc-grid .ui-rc-grid-tbody .ui-rc-grid-row {
+  color: var(--be-grid-text) !important;
+  background: var(--be-grid-background) !important;
+  border-bottom: var(--be-grid-border-horizontal-width) solid var(--be-grid-border) !important;
+}
+
+.ui-rc-grid.ui-rc-grid .ui-rc-grid-tbody .ui-rc-grid-cell {
+  padding: var(--be-grid-cell-padding-y) var(--be-grid-cell-padding-x) !important;
+  color: inherit;
+  background: inherit;
+  border-right: var(--be-grid-border-vertical-width) solid var(--be-grid-border) !important;
+}
+
+html[data-be-grid-striped=true] .ui-rc-grid.ui-rc-grid .ui-rc-grid-tbody .ui-rc-grid-row-odd:not(.ui-rc-grid-row-selected) {
+  background: var(--be-grid-striped-background) !important;
+}
+
+html[data-be-grid-striped=false] .ui-rc-grid.ui-rc-grid .ui-rc-grid-tbody .ui-rc-grid-row-odd:not(.ui-rc-grid-row-selected) {
+  background: var(--be-grid-background) !important;
+}
+
+html[data-be-grid-hover=true] .ui-rc-grid.ui-rc-grid .ui-rc-grid-tbody .ui-rc-grid-row:hover:not(.ui-rc-grid-row-selected) {
+  background: var(--be-grid-hover-background) !important;
+}
+
+.ui-rc-grid.ui-rc-grid .ui-rc-grid-tbody .ui-rc-grid-row-selected,
+.ui-rc-grid.ui-rc-grid .ui-rc-grid-tbody .ui-rc-grid-row-selected .ui-rc-grid-cell {
+  color: var(--be-grid-selected-text) !important;
+  background: var(--be-grid-selected-background) !important;
+}
+
+.ui-rc-grid.ui-rc-grid .ui-rc-grid-cell-selected,
+.ui-rc-grid.ui-rc-grid .ui-rc-grid-cell-index-selected {
+  background: var(--be-grid-active-cell-background) !important;
+}
+
+.ui-rc-grid.ui-rc-grid .ui-rc-grid-row-parent,
+.ui-rc-grid.ui-rc-grid .ui-rc-grid-row-parent .ui-rc-grid-cell {
+  color: var(--be-grid-group-text) !important;
+  background: var(--be-grid-group-background) !important;
+}
+
+.ui-rc-grid.ui-rc-grid .ui-rc-grid-tfoot,
+.ui-rc-grid.ui-rc-grid .ui-rc-grid-footer-row,
+.ui-rc-grid.ui-rc-grid .ui-rc-grid-tfoot .ui-rc-grid-cell {
+  color: var(--be-grid-footer-text) !important;
+  background: var(--be-grid-footer-background) !important;
+  border-color: var(--be-grid-border) !important;
+}
+
+/* be-table-template 2.9.91 publishes this token scope on every table root. */
+.be-table.be-table-css-var {
+  --be-table-cell-padding-block: var(--be-grid-cell-padding-y);
+  --be-table-cell-padding-inline: var(--be-grid-cell-padding-x);
+  --be-table-cell-height: var(--be-grid-row-height);
+  --be-table-cell-header-height: var(--be-grid-header-height);
+  --be-table-cell-font-size: var(--be-grid-font-size);
+  --be-table-border-color: var(--be-grid-border);
+  --be-table-header-bg: var(--be-grid-header-background);
+  --be-table-header-color: var(--be-grid-header-text);
+  --be-table-row-hover-bg: var(--be-grid-hover-background);
+  --be-table-row-selected-bg: var(--be-grid-selected-background);
+  --be-table-cell-selected-bg: var(--be-grid-selected-background);
+  --be-table-cell-active-bg: var(--be-grid-active-cell-background);
+  --be-table-cell-hover-bg: var(--be-grid-hover-background);
+  --be-table-footer-bg: var(--be-grid-footer-background);
+  --be-table-footer-color: var(--be-grid-footer-text);
+  color: var(--be-grid-text);
+  font-family: var(--be-font-family);
+}
+
+.be-table-wrapper {
+  border-radius: var(--be-grid-radius);
+  box-shadow: var(--be-grid-shadow);
+  overflow: hidden;
+}
+
+/*
+ * Khi runtime thay một nhóm lớn CSS variables, tắt transition đúng một frame
+ * để tránh toàn bộ Navbar/Sidebar/Card animate đồng thời và tạo cảm giác nháy.
+ */
+html.be-theme-applying *,
+html.be-theme-applying *::before,
+html.be-theme-applying *::after {
+  transition: none !important;
+  animation-duration: 0.01ms !important;
+}
+
+html,
+body,
+#root,
+.wrapper {
+  font-family: var(--be-font-family);
+}
+
+html {
+  letter-spacing: var(--be-letter-spacing);
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  color: var(--be-text-primary);
+  background-color: var(--be-background);
+  font-size: var(--be-font-size-base);
+  font-weight: var(--be-body-font-weight);
+  line-height: var(--be-line-height-base);
+}
+
+p {
+  line-height: var(--be-line-height-base);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  color: var(--be-heading-text);
+  font-family: inherit;
+  letter-spacing: 0;
+}
+
+h1,
+.page-title,
+.content-header-title {
+  font-size: var(--be-page-title-size);
+  font-weight: var(--be-page-title-weight);
+}
+
+h2,
+.section-title {
+  font-size: var(--be-section-title-size);
+  font-weight: var(--be-section-title-weight);
+}
+
+.card-title,
+.modal-title {
+  color: var(--be-heading-text);
+  font-size: var(--be-card-title-size);
+  font-weight: var(--be-card-title-weight);
+}
+
+small,
+.small,
+.text-small,
+.breadcrumb {
+  font-size: var(--be-small-font-size);
+}
+
+.text-muted {
+  color: var(--be-text-muted) !important;
+}
+
+.text-secondary {
+  color: var(--be-text-secondary) !important;
+}
+
+.bg-light,
+.table-light,
+.table-light > th,
+.table-light > td,
+.accordion-button:not(.collapsed) {
+  background-color: var(--be-surface-secondary) !important;
+}
+
+a {
+  color: var(--be-link-color);
+}
+
+a:hover {
+  color: var(--be-primary-hover);
+}
+
+::placeholder {
+  color: var(--be-placeholder) !important;
+  opacity: 1;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  height: var(--be-button-height);
+  min-height: var(--be-button-height);
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-inline: var(--be-button-padding-x);
+  border-radius: var(--be-button-radius);
+  font-family: inherit;
+  font-size: var(--be-font-size-base);
+  font-weight: 500;
+  line-height: 1;
+  transition-duration: var(--be-transition-duration);
+}
+
+.btn-sm {
+  height: calc(var(--be-button-height) - 4px);
+  min-height: calc(var(--be-button-height) - 4px);
+}
+
+.btn-lg {
+  height: calc(var(--be-button-height) + 4px);
+  min-height: calc(var(--be-button-height) + 4px);
+}
+
+.btn-primary,
+.btn-primary:disabled,
+.btn-primary.disabled {
+  color: var(--be-primary-contrast);
+  background-color: var(--be-primary);
+  border-color: var(--be-primary);
+}
+
+.btn-primary:hover,
+.btn-primary:focus {
+  color: var(--be-primary-hover-contrast);
+  background-color: var(--be-primary-hover);
+  border-color: var(--be-primary-hover);
+}
+
+.btn-primary:active,
+.btn-primary.active,
+.show > .btn-primary.dropdown-toggle {
+  color: var(--be-primary-active-contrast);
+  background-color: var(--be-primary-active);
+  border-color: var(--be-primary-active);
+}
+
+.btn-outline-primary {
+  color: var(--be-primary);
+  border-color: var(--be-primary);
+}
+
+.btn-outline-primary:hover,
+.btn-outline-primary:focus,
+.btn-outline-primary:active,
+.btn-outline-primary.active {
+  color: var(--be-primary-contrast);
+  background-color: var(--be-primary);
+  border-color: var(--be-primary);
+}
+
+.btn-outline-primary,
+.btn-outline-secondary,
+.btn-outline-primary:hover,
+.btn-outline-secondary:hover,
+.btn-outline-primary:focus,
+.btn-outline-secondary:focus,
+.btn-outline-primary:active,
+.btn-outline-secondary:active,
+.btn-outline-primary.active,
+.btn-outline-secondary.active {
+  color: var(--be-text-primary) !important;
+  background-color: var(--be-surface) !important;
+  border-color: var(--be-border) !important;
+}
+
+.text-primary {
+  color: var(--be-primary) !important;
+}
+
+.bg-primary,
+.badge-primary {
+  color: var(--be-primary-contrast) !important;
+  background-color: var(--be-primary) !important;
+}
+
+.bg-light-primary,
+.badge-light-primary {
+  color: var(--be-primary) !important;
+  background-color: var(--be-primary-soft) !important;
+}
+
+.border-primary {
+  border-color: var(--be-primary) !important;
+}
+
+.text-secondary {
+  color: var(--be-secondary) !important;
+}
+
+.bg-secondary,
+.badge-secondary {
+  color: var(--be-secondary-contrast) !important;
+  background-color: var(--be-secondary) !important;
+}
+
+.bg-light-secondary,
+.badge-light-secondary {
+  color: var(--be-secondary) !important;
+  background-color: rgba(var(--be-secondary-rgb), 0.12) !important;
+}
+
+.border-secondary {
+  border-color: var(--be-secondary) !important;
+}
+
+.btn-secondary {
+  color: var(--be-secondary-contrast);
+  background-color: var(--be-secondary);
+  border-color: var(--be-secondary);
+}
+
+.btn-secondary:hover,
+.btn-secondary:focus {
+  color: var(--be-secondary-hover-contrast);
+  background-color: var(--be-secondary-hover);
+  border-color: var(--be-secondary-hover);
+}
+
+.btn-secondary:active,
+.btn-secondary.active {
+  color: var(--be-secondary-active-contrast);
+  background-color: var(--be-secondary-active);
+  border-color: var(--be-secondary-active);
+}
+
+.btn-outline-secondary {
+  color: var(--be-secondary);
+  border-color: var(--be-secondary);
+}
+
+.btn-outline-secondary:hover,
+.btn-outline-secondary:focus,
+.btn-outline-secondary:active,
+.btn-outline-secondary.active {
+  color: var(--be-secondary-contrast);
+  background-color: var(--be-secondary);
+  border-color: var(--be-secondary);
+}
+
+.alert-secondary {
+  color: var(--be-secondary);
+  background-color: rgba(var(--be-secondary-rgb), 0.12);
+  border-color: rgba(var(--be-secondary-rgb), 0.25);
+}
+
+.text-success {
+  color: var(--be-success) !important;
+}
+
+.bg-success,
+.badge-success {
+  color: var(--be-success-contrast) !important;
+  background-color: var(--be-success) !important;
+}
+
+.bg-light-success,
+.badge-light-success {
+  color: var(--be-success) !important;
+  background-color: rgba(var(--be-success-rgb), 0.12) !important;
+}
+
+.border-success {
+  border-color: var(--be-success) !important;
+}
+
+.btn-success {
+  color: var(--be-success-contrast);
+  background-color: var(--be-success);
+  border-color: var(--be-success);
+}
+
+.btn-success:hover,
+.btn-success:focus {
+  color: var(--be-success-hover-contrast);
+  background-color: var(--be-success-hover);
+  border-color: var(--be-success-hover);
+}
+
+.btn-success:active,
+.btn-success.active {
+  color: var(--be-success-active-contrast);
+  background-color: var(--be-success-active);
+  border-color: var(--be-success-active);
+}
+
+.btn-outline-success {
+  color: var(--be-success);
+  border-color: var(--be-success);
+}
+
+.btn-outline-success:hover,
+.btn-outline-success:focus,
+.btn-outline-success:active,
+.btn-outline-success.active {
+  color: var(--be-success-contrast);
+  background-color: var(--be-success);
+  border-color: var(--be-success);
+}
+
+.alert-success {
+  color: var(--be-success);
+  background-color: rgba(var(--be-success-rgb), 0.12);
+  border-color: rgba(var(--be-success-rgb), 0.25);
+}
+
+.text-warning {
+  color: var(--be-warning) !important;
+}
+
+.bg-warning,
+.badge-warning {
+  color: var(--be-warning-contrast) !important;
+  background-color: var(--be-warning) !important;
+}
+
+.bg-light-warning,
+.badge-light-warning {
+  color: var(--be-warning) !important;
+  background-color: rgba(var(--be-warning-rgb), 0.12) !important;
+}
+
+.border-warning {
+  border-color: var(--be-warning) !important;
+}
+
+.btn-warning {
+  color: var(--be-warning-contrast);
+  background-color: var(--be-warning);
+  border-color: var(--be-warning);
+}
+
+.btn-warning:hover,
+.btn-warning:focus {
+  color: var(--be-warning-hover-contrast);
+  background-color: var(--be-warning-hover);
+  border-color: var(--be-warning-hover);
+}
+
+.btn-warning:active,
+.btn-warning.active {
+  color: var(--be-warning-active-contrast);
+  background-color: var(--be-warning-active);
+  border-color: var(--be-warning-active);
+}
+
+.btn-outline-warning {
+  color: var(--be-warning);
+  border-color: var(--be-warning);
+}
+
+.btn-outline-warning:hover,
+.btn-outline-warning:focus,
+.btn-outline-warning:active,
+.btn-outline-warning.active {
+  color: var(--be-warning-contrast);
+  background-color: var(--be-warning);
+  border-color: var(--be-warning);
+}
+
+.alert-warning {
+  color: var(--be-warning);
+  background-color: rgba(var(--be-warning-rgb), 0.12);
+  border-color: rgba(var(--be-warning-rgb), 0.25);
+}
+
+.text-danger {
+  color: var(--be-danger) !important;
+}
+
+.bg-danger,
+.badge-danger {
+  color: var(--be-danger-contrast) !important;
+  background-color: var(--be-danger) !important;
+}
+
+.bg-light-danger,
+.badge-light-danger {
+  color: var(--be-danger) !important;
+  background-color: rgba(var(--be-danger-rgb), 0.12) !important;
+}
+
+.border-danger {
+  border-color: var(--be-danger) !important;
+}
+
+.btn-danger {
+  color: var(--be-danger-contrast);
+  background-color: var(--be-danger);
+  border-color: var(--be-danger);
+}
+
+.btn-danger:hover,
+.btn-danger:focus {
+  color: var(--be-danger-hover-contrast);
+  background-color: var(--be-danger-hover);
+  border-color: var(--be-danger-hover);
+}
+
+.btn-danger:active,
+.btn-danger.active {
+  color: var(--be-danger-active-contrast);
+  background-color: var(--be-danger-active);
+  border-color: var(--be-danger-active);
+}
+
+.btn-outline-danger {
+  color: var(--be-danger);
+  border-color: var(--be-danger);
+}
+
+.btn-outline-danger:hover,
+.btn-outline-danger:focus,
+.btn-outline-danger:active,
+.btn-outline-danger.active {
+  color: var(--be-danger-contrast);
+  background-color: var(--be-danger);
+  border-color: var(--be-danger);
+}
+
+.alert-danger {
+  color: var(--be-danger);
+  background-color: rgba(var(--be-danger-rgb), 0.12);
+  border-color: rgba(var(--be-danger-rgb), 0.25);
+}
+
+.text-info {
+  color: var(--be-info) !important;
+}
+
+.bg-info,
+.badge-info {
+  color: var(--be-info-contrast) !important;
+  background-color: var(--be-info) !important;
+}
+
+.bg-light-info,
+.badge-light-info {
+  color: var(--be-info) !important;
+  background-color: rgba(var(--be-info-rgb), 0.12) !important;
+}
+
+.border-info {
+  border-color: var(--be-info) !important;
+}
+
+.btn-info {
+  color: var(--be-info-contrast);
+  background-color: var(--be-info);
+  border-color: var(--be-info);
+}
+
+.btn-info:hover,
+.btn-info:focus {
+  color: var(--be-info-hover-contrast);
+  background-color: var(--be-info-hover);
+  border-color: var(--be-info-hover);
+}
+
+.btn-info:active,
+.btn-info.active {
+  color: var(--be-info-active-contrast);
+  background-color: var(--be-info-active);
+  border-color: var(--be-info-active);
+}
+
+.btn-outline-info {
+  color: var(--be-info);
+  border-color: var(--be-info);
+}
+
+.btn-outline-info:hover,
+.btn-outline-info:focus,
+.btn-outline-info:active,
+.btn-outline-info.active {
+  color: var(--be-info-contrast);
+  background-color: var(--be-info);
+  border-color: var(--be-info);
+}
+
+.alert-info {
+  color: var(--be-info);
+  background-color: rgba(var(--be-info-rgb), 0.12);
+  border-color: rgba(var(--be-info-rgb), 0.25);
+}
+
+.form-check-input:checked {
+  background-color: var(--be-primary);
+  border-color: var(--be-primary);
+}
+
+.form-check-input:focus {
+  border-color: var(--be-primary);
+  box-shadow: none;
+}
+
+.progress-bar {
+  color: var(--be-primary-contrast);
+  background-color: var(--be-primary);
+}
+
+.page-item.active .page-link,
+.nav-pills .nav-link.active,
+.nav-pills .show > .nav-link,
+.list-group-item.active {
+  color: var(--be-primary-contrast);
+  background-color: var(--be-primary);
+  border-color: var(--be-primary);
+}
+
+.page-link {
+  color: var(--be-primary);
+}
+
+.page-link:hover,
+.page-link:focus {
+  color: var(--be-primary-hover);
+  background-color: var(--be-hover-background);
+}
+
+.form-label,
+label {
+  color: var(--be-text-primary);
+  font-size: var(--be-form-label-size);
+  font-weight: var(--be-form-label-weight);
+}
+
+.form-control:not(textarea):not(.form-control-sm):not(.form-control-lg),
+.form-select:not(.form-select-sm):not(.form-select-lg),
+.input-group:not(.input-group-sm):not(.input-group-lg) > .form-control,
+.input-group:not(.input-group-sm):not(.input-group-lg) > .form-select,
+.input-group:not(.input-group-sm):not(.input-group-lg) > .input-group-text {
+  height: var(--be-control-height);
+  min-height: var(--be-control-height);
+  padding: 0.3rem 0.5rem;
+  line-height: 1.25rem;
+  box-sizing: border-box;
+}
+
+textarea.form-control {
+  padding: 0.3rem 0.5rem;
+  line-height: 1.25rem;
+}
+
+.form-control,
+.form-select,
+.input-group-text {
+  color: var(--be-text-primary);
+  background-color: var(--be-surface);
+  border-color: var(--be-input-border);
+  border-radius: var(--be-input-radius);
+  font-family: inherit;
+  font-size: var(--be-font-size-base);
+  transition-duration: var(--be-transition-duration);
+}
+
+.form-control:focus,
+.form-select:focus {
+  color: var(--be-text-primary);
+  background-color: var(--be-surface);
+  border-color: var(--be-primary);
+  box-shadow: none !important;
+  outline: none;
+}
+
+.form-control:disabled,
+.form-select:disabled,
+.form-control[readonly] {
+  background-color: var(--be-disabled-background);
+}
+
+.form-control-color {
+  padding: 3px;
+}
+
+.input-group > :not(:first-child),
+.input-group > :not(:first-child) .form-control,
+.input-group > :not(:first-child) .form-select {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.input-group > :not(:last-child),
+.input-group > :not(:last-child) .form-control,
+.input-group > :not(:last-child) .form-select {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.input-group:not(.bootstrap-touchspin):focus-within {
+  box-shadow: none !important;
+}
+
+/* React Select visual tokens only. Inner geometry intentionally stays with
+ * the original react-select/theme.scss contract so toolbar line-height cannot
+ * distort values, indicators or dropdown option density. */
+.select__control,
+.react-select__control {
+  min-height: var(--be-control-height) !important;
+  color: var(--be-text-primary);
+  background-color: var(--be-surface) !important;
+  border-color: var(--be-input-border) !important;
+  border-radius: var(--be-input-radius) !important;
+  font-family: var(--be-font-family);
+  transition-duration: var(--be-transition-duration);
+  box-sizing: border-box;
+}
+
+.select__control--is-focused,
+.react-select__control--is-focused {
+  border-color: var(--be-primary) !important;
+  box-shadow: none !important;
+}
+
+.select__single-value,
+.react-select__single-value,
+.select__input-container,
+.react-select__input-container {
+  color: var(--be-text-primary) !important;
+}
+
+.select__placeholder,
+.react-select__placeholder {
+  color: var(--be-placeholder) !important;
+}
+
+.select__indicator svg,
+.react-select__indicator svg {
+  color: var(--be-text-muted) !important;
+}
+
+.select__menu,
+.react-select__menu {
+  color: var(--be-text-primary) !important;
+  background-color: var(--be-surface) !important;
+  border-color: var(--be-border) !important;
+  font-family: var(--be-font-family);
+}
+
+.select__multi-value {
+  color: var(--be-primary-contrast);
+  background-color: var(--be-primary) !important;
+  border-radius: calc(var(--be-input-radius) / 2);
+}
+
+.select__multi-value__label,
+.select__multi-value__remove {
+  color: var(--be-primary-contrast) !important;
+}
+
+.select__menu,
+.dropdown-menu,
+.popover {
+  color: var(--be-text-primary);
+  background-color: var(--be-surface);
+  border-color: var(--be-border);
+  border-radius: var(--be-dropdown-radius);
+  box-shadow: var(--be-dropdown-shadow);
+  font-family: var(--be-font-family);
+}
+
+.select__option--is-focused,
+.react-select__option--is-focused,
+.dropdown-item:hover,
+.dropdown-item:focus {
+  color: var(--be-text-primary);
+  background-color: var(--be-hover-background);
+}
+
+.select__option--is-selected,
+.react-select__option--is-selected {
+  color: var(--be-primary-contrast) !important;
+  background-color: var(--be-primary) !important;
+}
+
+.dropdown-item.active,
+.dropdown-item:active {
+  color: var(--be-primary);
+  background-color: var(--be-active-background);
+}
+
+.form-check-input[type=checkbox]:not([role=switch]),
+.custom-control-input[type=checkbox] {
+  width: var(--be-checkbox-size);
+  height: var(--be-checkbox-size);
+}
+
+.form-switch .form-check-input,
+.custom-switch .custom-control-input {
+  min-width: calc(var(--be-switch-height) * 1.75);
+  height: var(--be-switch-height);
+}
+
+.form-switch .form-check-input:not(:disabled),
+.custom-switch .custom-control-input:not(:disabled) {
+  cursor: pointer;
+}
+
+.form-switch .form-check-input:disabled,
+.custom-switch .custom-control-input:disabled {
+  cursor: not-allowed;
+}
+
+.card {
+  color: var(--be-text-primary);
+  background-color: var(--be-surface);
+  border-color: var(--be-border);
+  border-radius: var(--be-card-radius);
+  box-shadow: var(--be-card-shadow);
+}
+
+.card-header,
+.card-footer {
+  background-color: var(--be-surface);
+  border-color: var(--be-border);
+}
+
+.card-body {
+  padding: var(--be-card-padding);
+}
+
+.modal-content {
+  color: var(--be-text-primary);
+  background-color: var(--be-surface);
+  border-color: var(--be-border);
+  border-radius: var(--be-modal-radius);
+}
+
+.modal-header,
+.modal-footer {
+  border-color: var(--be-border);
+}
+
+.nav-tabs {
+  border-bottom-color: var(--be-border);
+}
+
+.nav-tabs .nav-link {
+  min-height: var(--be-tab-height);
+  color: var(--be-text-secondary);
+  border-radius: var(--be-tab-radius) var(--be-tab-radius) 0 0;
+  font-size: var(--be-menu-font-size);
+  font-weight: 500;
+}
+
+.nav-tabs .nav-link:hover,
+.nav-tabs .nav-link:focus,
+.nav-tabs .nav-link.active {
+  color: var(--be-primary) !important;
+}
+
+.nav-tabs .nav-link.active {
+  background-color: transparent;
+}
+
+.nav-tabs .nav-link::after {
+  background-color: var(--be-primary) !important;
+}
+
+.header-navbar {
+  color: var(--be-navbar-text);
+  background-color: var(--be-navbar-background) !important;
+  border-color: var(--be-border);
+  font-family: var(--be-font-family);
+}
+
+.header-navbar .nav-link,
+.header-navbar .navbar-nav,
+.header-navbar .navbar-nav .nav-item,
+.header-navbar .navbar-nav .nav-link {
+  color: var(--be-navbar-text);
+}
+
+.footer {
+  color: var(--be-text-secondary);
+  background-color: var(--be-surface);
+  border-color: var(--be-border);
+}
+
+.main-menu {
+  color: var(--be-sidebar-text);
+  background-color: var(--be-sidebar-background) !important;
+  border-color: var(--be-border);
+  font-family: var(--be-font-family);
+}
+
+.main-menu .navbar-header,
+.main-menu .main-menu-content,
+.main-menu .navigation {
+  background-color: var(--be-sidebar-background);
+}
+
+.main-menu .navigation > li > a,
+.main-menu .navigation .menu-content > li > a {
+  color: var(--be-sidebar-text);
+}
+
+.main-menu .navigation,
+.main-menu .navigation li,
+.main-menu .navigation a {
+  font-family: var(--be-font-family);
+}
+
+.main-menu .navigation > li > a,
+.main-menu .navigation .menu-content li > a {
+  display: flex;
+  align-items: center;
+  min-height: var(--be-menu-item-height);
+  font-size: var(--be-menu-font-size);
+  font-weight: var(--be-menu-font-weight);
+}
+
+.main-menu .navigation .menu-content > li > a {
+  padding-left: calc(var(--be-menu-indent) + 15px);
+}
+
+.main-menu .navigation-header {
+  margin-top: var(--be-menu-group-spacing);
+  color: var(--be-sidebar-muted-text);
+  font-family: var(--be-font-family);
+  font-size: var(--be-small-font-size);
+}
+
+.main-menu .navigation li > a > svg,
+.main-menu .navigation li > a > i,
+.main-menu .navigation li > a .menu-icon {
+  width: var(--be-menu-icon-size) !important;
+  min-width: var(--be-menu-icon-size) !important;
+  height: var(--be-menu-icon-size) !important;
+  font-size: var(--be-menu-icon-size) !important;
+  flex: 0 0 var(--be-menu-icon-size) !important;
+}
+
+html[data-be-show-icons=false] .main-menu .navigation li > a > svg,
+html[data-be-show-icons=false] .main-menu .navigation li > a > i {
+  display: none !important;
+}
+
+html[data-be-show-icons=false] .main-menu .navigation li > a > span {
+  margin-left: 0 !important;
+}
+
+html[data-be-show-group-title=false] .main-menu .navigation-header {
+  display: none !important;
+}
+
+html[data-be-navigation-searchable=false] .becoxy-global-search {
+  display: none !important;
+}
+
+.be-compact .card-body {
+  padding: min(var(--be-card-padding), 12px);
+}
+
+.be-compact .main-menu .navigation > li > a,
+.be-compact .main-menu .navigation .menu-content > li > a {
+  min-height: min(var(--be-menu-item-height), 34px);
+}
+
+.be-reduce-motion *,
+.be-reduce-motion *::before,
+.be-reduce-motion *::after {
+  scroll-behavior: auto !important;
+  animation-duration: 0.01ms !important;
+  animation-iteration-count: 1 !important;
+  transition-duration: 0.01ms !important;
+}
+
+.be-high-contrast {
+  --be-border: #000000;
+  --be-input-border: #000000;
+  --be-text-primary: #000000;
+  --be-heading-text: #000000;
+}
+
+.be-high-contrast[data-be-theme=dark] {
+  --be-border: #ffffff;
+  --be-input-border: #ffffff;
+  --be-text-primary: #ffffff;
+  --be-heading-text: #ffffff;
+}
+
+html:not(.be-focus-outline) :focus,
+html:not(.be-focus-outline) :focus-visible {
+  outline: none !important;
+}
+
+.be-focus-outline :focus-visible {
+  outline: var(--be-focus-ring-size) solid rgba(var(--be-primary-rgb), 0.55);
+  outline-offset: 2px;
+}
+
+.be-focus-outline .form-control:focus-visible,
+.be-focus-outline .form-select:focus-visible {
+  outline: none;
+}
+
+.be-hide-tooltips [role=tooltip],
+.be-hide-tooltips .tooltip,
+.be-hide-tooltips .e-tooltip-wrap {
+  display: none !important;
+}
+
+html[data-be-scrollbar=Mảnh] * {
+  scrollbar-width: thin;
+  scrollbar-color: var(--be-scrollbar-thumb) var(--be-scrollbar-track);
+}
+
+html[data-be-scrollbar=Mảnh] *::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+html[data-be-scrollbar=Mảnh] *::-webkit-scrollbar-thumb {
+  background-color: var(--be-scrollbar-thumb);
+  border-radius: 999px;
+}
+
+html[data-be-scrollbar=Mảnh] *::-webkit-scrollbar-track,
+html[data-be-scrollbar="Mặc định"] *::-webkit-scrollbar-track {
+  background-color: var(--be-scrollbar-track);
+}
+
+html[data-be-scrollbar="Mặc định"] * {
+  scrollbar-color: var(--be-scrollbar-thumb) var(--be-scrollbar-track);
+}
+
+html[data-be-scrollbar="Mặc định"] *::-webkit-scrollbar-thumb {
+  background-color: var(--be-scrollbar-thumb);
+  border-radius: 999px;
+}
+
+html[data-be-scrollbar=Ẩn] * {
+  scrollbar-width: none;
+}
+
+html[data-be-scrollbar=Ẩn] *::-webkit-scrollbar {
+  display: none;
+}
+
+.react-tagsinput-tag {
+  color: var(--be-primary-contrast);
+  background-color: var(--be-primary);
+  border-color: var(--be-primary);
+}
+
+.react-tagsinput--focused {
+  border-color: var(--be-primary);
+}
+
+.brand-text,
+.main-menu .navbar-brand .brand-text {
+  color: var(--be-brand-accent) !important;
+}
+
+.app-content .row {
+  --bs-gutter-x: calc(var(--be-gutter) * 2);
+  --bs-gutter-y: var(--be-gutter);
+}
+
+.header-navbar .navbar-container .navbar-nav .nav-item,
+.header-navbar .navbar-container .navbar-nav .nav-link {
+  font-size: var(--be-font-size-base);
+}
+
+/* 4. Navigation compatibility overrides for compiled Vuexy styles. */
+/*
+ * Core Vuexy uses a compiled Sass gradient with `!important` for tab lines.
+ * `background-color` alone cannot replace that old gradient, so reset the
+ * entire background/background-image using the runtime Primary token.
+ */
+.nav-tabs .nav-link.active,
+.becoxy-settings-page__tabs .nav-link.active,
+.becoxy-settings-page__tab-link.active {
+  color: var(--be-tab-active-color) !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+}
+
+.nav-tabs .nav-link::after,
+.becoxy-settings-page__tabs .nav-link::after,
+.becoxy-settings-page__tab-link::after {
+  background: var(--be-tab-active-color) !important;
+  background-color: var(--be-tab-active-color) !important;
+  background-image: none !important;
+  border-color: var(--be-tab-active-color) !important;
+  box-shadow: none !important;
+}
+
+/* Remove the old white gradient/shadow below the Sidebar logo completely. */
+.main-menu,
+.main-menu.menu-shadow,
+.main-menu.menu-light,
+.main-menu.menu-dark,
+.main-menu .navbar-header,
+.main-menu .main-menu-content,
+.main-menu .navigation,
+.main-menu .navigation-main {
+  background-color: var(--be-sidebar-background) !important;
+  background-image: none !important;
+  box-shadow: none !important;
+  filter: none !important;
+}
+
+.main-menu .shadow-bottom,
+.main-menu > .shadow-bottom,
+.main-menu .navbar-header + .shadow-bottom,
+.main-menu .main-menu-content > .shadow-bottom {
+  display: none !important;
+  width: 0 !important;
+  min-width: 0 !important;
+  height: 0 !important;
+  min-height: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  opacity: 0 !important;
+  visibility: hidden !important;
+  background: none !important;
+  background-image: none !important;
+  border: 0 !important;
+  box-shadow: none !important;
+  filter: none !important;
+  pointer-events: none !important;
+}
+
+.main-menu .navbar-header::before,
+.main-menu .navbar-header::after,
+.main-menu .main-menu-content::before,
+.main-menu .main-menu-content::after,
+.main-menu .navigation::before,
+.main-menu .navigation::after {
+  content: none !important;
+  display: none !important;
+  background: none !important;
+  background-image: none !important;
+  box-shadow: none !important;
+}
+
+/* Sidebar normal state. */
+.main-menu .navigation li > a {
+  position: relative;
+  color: var(--be-sidebar-text) !important;
+  background-color: transparent !important;
+  background-image: none !important;
+  box-shadow: none !important;
+}
+
+.main-menu .navigation li > a > span,
+.main-menu .navigation li > a > svg,
+.main-menu .navigation li > a > i,
+.main-menu .navigation li > a .menu-item {
+  color: inherit !important;
+}
+
+/* Navigation hover/focus uses Sidebar-specific state tokens. */
+.main-menu .navigation li:not(.active):not(.sidebar-group-active) > a:hover,
+.main-menu .navigation li:not(.active):not(.sidebar-group-active) > a:focus {
+  color: var(--be-sidebar-hover-text) !important;
+  background-color: var(--be-sidebar-hover-background) !important;
+  background-image: none !important;
+  box-shadow: none !important;
+}
+
+/* Soft-background is the only mode that owns the active indicator. */
+html[data-be-navigation-active=soft-background] .main-menu .navigation li.active > a,
+html[data-be-navigation-active=soft-background] .main-menu .navigation li.sidebar-group-active > a,
+html[data-be-navigation-active=soft-background] .main-menu .navigation a.active {
+  color: var(--be-sidebar-active-text) !important;
+  background: var(--be-sidebar-active-background) !important;
+  background-image: none !important;
+  border-radius: var(--be-menu-active-radius) !important;
+  box-shadow: none !important;
+}
+
+html[data-be-navigation-active=soft-background] .main-menu .navigation li.active > a::before,
+html[data-be-navigation-active=soft-background] .main-menu .navigation li.sidebar-group-active > a::before,
+html[data-be-navigation-active=soft-background] .main-menu .navigation a.active::before {
+  content: "" !important;
+  position: absolute;
+  top: 20%;
+  bottom: 20%;
+  left: 0;
+  width: 3px;
+  border-radius: 0 3px 3px 0;
+  background: var(--be-sidebar-active-indicator) !important;
+  box-shadow: none !important;
+}
+
+/* Left-border mode uses Sidebar accent tokens without a background fill. */
+html[data-be-navigation-active=left-border] .main-menu .navigation li.active > a,
+html[data-be-navigation-active=left-border] .main-menu .navigation li.sidebar-group-active > a,
+html[data-be-navigation-active=left-border] .main-menu .navigation a.active {
+  color: var(--be-sidebar-accent-text) !important;
+  background: transparent !important;
+  background-image: none !important;
+  box-shadow: inset 3px 0 0 var(--be-sidebar-active-indicator) !important;
+}
+
+/* Text-only mode uses only the Sidebar accent text token. */
+html[data-be-navigation-active=text-only] .main-menu .navigation li.active > a,
+html[data-be-navigation-active=text-only] .main-menu .navigation li.sidebar-group-active > a,
+html[data-be-navigation-active=text-only] .main-menu .navigation a.active {
+  color: var(--be-sidebar-accent-text) !important;
+  background: transparent !important;
+  background-image: none !important;
+  box-shadow: none !important;
+}
+
+/* Navbar and Sidebar icons inherit the automatically calculated text color. */
+.header-navbar,
+.header-navbar .navbar-container,
+.header-navbar .nav-link,
+.header-navbar .navbar-nav,
+.header-navbar .navbar-nav .nav-item,
+.header-navbar .navbar-nav .nav-link {
+  color: var(--be-navbar-text) !important;
+}
+
+.header-navbar svg,
+.header-navbar i,
+.header-navbar .nav-link svg,
+.header-navbar .nav-link i {
+  color: currentColor !important;
+}
+
+/* 4. Navigation compatibility: sidebar brand and menu states. */
+/* 1. Logo header luôn trắng ở mọi theme. */
+.main-menu .navbar-header,
+.main-menu.menu-light .navbar-header,
+.main-menu.menu-dark .navbar-header {
+  color: var(--be-sidebar-brand-text) !important;
+  background: var(--be-sidebar-brand-background) !important;
+  background-color: var(--be-sidebar-brand-background) !important;
+  background-image: none !important;
+  border-bottom: 1px solid var(--be-sidebar-brand-border) !important;
+  box-shadow: none !important;
+  filter: none !important;
+}
+
+/* Mọi wrapper bên trong header không được kéo nền Sidebar vào. */
+.main-menu .navbar-header .navbar-brand,
+.main-menu .navbar-header .brand-logo,
+.main-menu .navbar-header .brand-text,
+.main-menu .navbar-header .nav-toggle,
+.main-menu .navbar-header .modern-nav-toggle {
+  color: var(--be-sidebar-brand-text) !important;
+  background: transparent !important;
+  background-image: none !important;
+  box-shadow: none !important;
+}
+
+.main-menu .navbar-header .brand-text {
+  color: var(--be-sidebar-brand-text) !important;
+}
+
+/* Logo ảnh giữ nguyên file; SVG chỉ inherit khi được thiết kế currentColor. */
+.main-menu .navbar-header .navbar-brand-logo,
+.main-menu .navbar-header .brand-logo img {
+  background: transparent !important;
+}
+
+/* Nút thu gọn/mở rộng dùng Primary trên nền trắng. */
+.main-menu .navbar-header .nav-toggle,
+.main-menu .navbar-header .nav-toggle .nav-link,
+.main-menu .navbar-header .modern-nav-toggle,
+.main-menu .navbar-header .modern-nav-toggle .nav-link,
+.main-menu .navbar-header .nav-toggle svg,
+.main-menu .navbar-header .nav-toggle i,
+.main-menu .navbar-header .modern-nav-toggle svg,
+.main-menu .navbar-header .modern-nav-toggle i {
+  color: var(--be-sidebar-brand-toggle) !important;
+}
+
+/* 2. Xóa hoàn toàn shadow/gradient dưới logo. */
+.main-menu,
+.main-menu.menu-shadow,
+.main-menu .navbar-header,
+.main-menu .main-menu-content,
+.main-menu .navigation {
+  box-shadow: none !important;
+}
+
+.main-menu .shadow-bottom,
+.main-menu .navbar-header + .shadow-bottom,
+.main-menu .main-menu-content > .shadow-bottom {
+  display: none !important;
+  width: 0 !important;
+  height: 0 !important;
+  opacity: 0 !important;
+  visibility: hidden !important;
+  background: none !important;
+  background-image: none !important;
+  border: 0 !important;
+  box-shadow: none !important;
+  filter: none !important;
+  pointer-events: none !important;
+}
+
+/* Không xóa pseudo-element của menu item active.
+   Chỉ xóa pseudo-element tạo shadow ở header/content. */
+.main-menu .navbar-header::before,
+.main-menu .navbar-header::after,
+.main-menu .main-menu-content::before,
+.main-menu .main-menu-content::after {
+  content: none !important;
+  display: none !important;
+}
+
+/* 3. Background Sidebar chỉ bắt đầu từ phần nội dung menu. */
+.main-menu .main-menu-content,
+.main-menu .navigation,
+.main-menu .navigation-main,
+.main-menu .main-menu-content .ps,
+.main-menu .main-menu-content .ps__rail-y {
+  background-color: var(--be-sidebar-background) !important;
+}
+
+/* 4. Tiêu đề nhóm dùng muted token riêng, đủ contrast. */
+.main-menu .navigation-header,
+.main-menu .navigation .navigation-header,
+.main-menu .navigation-header span,
+.main-menu .navigation .navigation-header span {
+  color: var(--be-sidebar-group-text) !important;
+  opacity: 1 !important;
+}
+
+/* 5. Menu cha và menu con dùng CÙNG màu chữ thường. */
+.main-menu .navigation > li > a,
+.main-menu .navigation > li.has-sub > a,
+.main-menu .navigation .menu-content > li > a,
+.main-menu .navigation .menu-content .menu-content > li > a {
+  color: var(--be-sidebar-text) !important;
+}
+
+/* Text, icon và mũi tên đều theo màu link. */
+.main-menu .navigation li > a .menu-title,
+.main-menu .navigation li > a .menu-item,
+.main-menu .navigation li > a > span,
+.main-menu .navigation li > a svg,
+.main-menu .navigation li > a i {
+  color: inherit !important;
+}
+
+/*
+ * Parent đang open/group-active nhưng route active nằm ở con:
+ * parent vẫn dùng màu thường như menu con, không tự thành Primary.
+ */
+.main-menu .navigation li.open:not(.active) > a,
+.main-menu .navigation li.sidebar-group-active:not(.active) > a,
+.main-menu .navigation li.has-sub.open:not(.active) > a {
+  color: var(--be-sidebar-text) !important;
+  background-color: transparent !important;
+  box-shadow: none !important;
+}
+
+/* Chevron/mũi tên của parent theo currentColor. */
+.main-menu .navigation li.has-sub > a::after {
+  color: currentColor !important;
+  border-color: currentColor !important;
+}
+
+/* Dark mode không được đổi navbar-header về màu Sidebar. */
+.dark-layout .main-menu .navbar-header,
+.dark-layout .main-menu.menu-dark .navbar-header,
+.dark-layout .main-menu.menu-light .navbar-header {
+  color: var(--be-sidebar-brand-text) !important;
+  background: var(--be-sidebar-brand-background) !important;
+  background-image: none !important;
+}
+
+/* 7. Compatibility overrides for Bootstrap, Reactstrap and Vuexy. */
+/* 5. Surface / card / modal compatibility. */
+html,
+body,
+#root,
+.app-content,
+.app-content.content,
+.content-wrapper,
+.content-body {
+  color: var(--be-text-primary);
+  background-color: var(--be-background);
+}
+
+.card,
+.bx-section-card,
+.modal-content,
+.offcanvas,
+.dropdown-menu,
+.popover,
+.list-group-item {
+  color: var(--be-text-primary);
+  background-color: var(--be-surface);
+  border-color: var(--be-border);
+}
+
+.card-header,
+.card-footer,
+.table thead th {
+  color: var(--be-heading-text);
+  background-color: var(--be-surface-secondary);
+  border-color: var(--be-border);
+}
+
+/* 3. Control colors and primary states. */
+.btn-primary,
+.becoxy-settings-page__actions .btn-primary,
+.bx-settings-actions .btn-primary,
+button.btn-primary,
+.e-btn.e-primary {
+  color: var(--be-primary-contrast) !important;
+  background: var(--be-primary) !important;
+  background-color: var(--be-primary) !important;
+  background-image: none !important;
+  border-color: var(--be-primary) !important;
+  box-shadow: none !important;
+}
+
+.btn-primary:hover,
+.btn-primary:focus,
+.e-btn.e-primary:hover,
+.e-btn.e-primary:focus {
+  color: var(--be-primary-hover-contrast) !important;
+  background: var(--be-primary-hover) !important;
+  border-color: var(--be-primary-hover) !important;
+}
+
+.btn-primary:active,
+.btn-primary.active,
+.show > .btn-primary.dropdown-toggle,
+.e-btn.e-primary:active {
+  color: var(--be-primary-active-contrast) !important;
+  background: var(--be-primary-active) !important;
+  border-color: var(--be-primary-active) !important;
+}
+
+.bg-primary,
+.badge-primary {
+  color: var(--be-primary-contrast) !important;
+  background: var(--be-primary) !important;
+}
+
+/* 3. Tabs. */
+.nav-tabs .nav-link {
+  color: var(--be-text-secondary);
+}
+
+.nav-tabs .nav-link:hover,
+.nav-tabs .nav-link:focus,
+.nav-tabs .nav-link.active,
+.becoxy-settings-page__tab-link.active {
+  color: var(--be-tab-active-color) !important;
+}
+
+.nav-tabs .nav-link::after,
+.nav-tabs .nav-link.active::after,
+.becoxy-settings-page__tab-link::after,
+.becoxy-settings-page__tab-link.active::after {
+  background: var(--be-tab-active-color) !important;
+  background-color: var(--be-tab-active-color) !important;
+  background-image: none !important;
+  border-color: var(--be-tab-active-color) !important;
+  box-shadow: none !important;
+}
+
+/* 4. Navbar compatibility. */
+.header-navbar,
+.header-navbar .navbar-container {
+  color: var(--be-navbar-text);
+  background: var(--be-navbar-background) !important;
+  background-image: none !important;
+  border-color: var(--be-border);
+}
+
+.header-navbar .nav-link,
+.header-navbar .navbar-nav,
+.header-navbar svg,
+.header-navbar i {
+  color: currentColor !important;
+}
+
+/* 4. Sidebar brand compatibility. */
+.main-menu .navbar-header,
+.main-menu.menu-light .navbar-header,
+.main-menu.menu-dark .navbar-header,
+.dark-layout .main-menu .navbar-header {
+  color: var(--be-sidebar-brand-text) !important;
+  background: var(--be-sidebar-brand-background) !important;
+  background-image: none !important;
+  border-bottom: 1px solid var(--be-sidebar-brand-border) !important;
+  box-shadow: none !important;
+}
+
+.main-menu .navbar-header .nav-toggle,
+.main-menu .navbar-header .modern-nav-toggle,
+.main-menu .navbar-header .nav-toggle svg,
+.main-menu .navbar-header .modern-nav-toggle svg,
+.main-menu .navbar-header .nav-toggle i,
+.main-menu .navbar-header .modern-nav-toggle i {
+  color: var(--be-sidebar-brand-toggle) !important;
+}
+
+/* Xóa dải trắng/shadow dưới logo. */
+.main-menu,
+.main-menu.menu-shadow,
+.main-menu .main-menu-content,
+.main-menu .navigation {
+  box-shadow: none !important;
+}
+
+.main-menu .shadow-bottom {
+  display: none !important;
+  width: 0 !important;
+  height: 0 !important;
+  opacity: 0 !important;
+  visibility: hidden !important;
+  background: none !important;
+  background-image: none !important;
+  box-shadow: none !important;
+  pointer-events: none !important;
+}
+
+/* 4. Sidebar navigation states. */
+.main-menu,
+.main-menu .main-menu-content,
+.main-menu .navigation,
+.main-menu .navigation-main,
+.main-menu .main-menu-content .ps {
+  color: var(--be-sidebar-text);
+  background: var(--be-sidebar-background) !important;
+  background-image: none !important;
+}
+
+/*
+ * Navigation-header, menu cha và menu con dùng CÙNG màu.
+ * Token tự ra #000000 trên nền sáng và #FFFFFF trên nền tối.
+ */
+.main-menu .navigation-header,
+.main-menu .navigation-header span,
+.main-menu .navigation-header svg,
+.main-menu .navigation-header i,
+.main-menu .navigation > li > a,
+.main-menu .navigation > li.has-sub > a,
+.main-menu .navigation .menu-content > li > a,
+.main-menu .navigation .menu-content .menu-content > li > a {
+  color: var(--be-sidebar-text) !important;
+  opacity: 1 !important;
+}
+
+.main-menu .navigation-header {
+  font-weight: 500;
+}
+
+/* Text/icon/chevron kế thừa cùng màu. */
+.main-menu .navigation li > a .menu-title,
+.main-menu .navigation li > a .menu-item,
+.main-menu .navigation li > a > span,
+.main-menu .navigation li > a svg,
+.main-menu .navigation li > a i,
+.main-menu .navigation li.has-sub > a::after {
+  color: inherit !important;
+}
+
+/*
+ * Cha đang mở nhưng không phải route active:
+ * không đổi thành màu Primary hoặc muted.
+ */
+.main-menu .navigation li.open:not(.active) > a,
+.main-menu .navigation li.sidebar-group-active:not(.active) > a,
+.main-menu .navigation li.has-sub.open:not(.active) > a {
+  color: var(--be-sidebar-text) !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+/* 3. Form controls. */
+.form-control,
+.form-select,
+.input-group-text {
+  color: var(--be-text-primary);
+  background-color: var(--be-surface);
+  border-color: var(--be-input-border);
+}
+
+.form-control::placeholder,
+.form-select::placeholder {
+  color: var(--be-placeholder);
+}
+
+.form-control:focus,
+.form-select:focus {
+  color: var(--be-text-primary);
+  background-color: var(--be-surface);
+  border-color: var(--be-primary);
+}
+
+/* 7. Checkbox and switch compatibility. */
+.form-check-input:checked,
+.e-css.e-checkbox-wrapper .e-frame.e-check,
+.e-checkbox-wrapper .e-frame.e-check,
+.e-switch-wrapper.e-switch-active .e-switch-handle,
+.e-switch-wrapper.e-switch-active .e-switch-on {
+  color: var(--be-primary-contrast) !important;
+  background-color: var(--be-primary) !important;
+  border-color: var(--be-primary) !important;
+}
+
+/* ---------- Syncfusion Grid ---------- */
+.e-grid {
+  color: var(--be-text-primary);
+  background: var(--be-surface);
+  border-color: var(--be-border);
+  font-family: var(--be-font-family);
+  font-size: var(--be-font-size-base);
+}
+
+.e-grid .e-gridheader,
+.e-grid .e-headercell {
+  color: var(--be-heading-text);
+  background: var(--be-surface-secondary);
+  border-color: var(--be-border);
+}
+
+.e-grid .e-rowcell,
+.e-grid .e-row {
+  color: var(--be-text-primary);
+  border-color: var(--be-border);
+}
+
+.e-grid .e-altrow {
+  background: var(--be-surface-secondary);
+}
+
+.e-grid .e-pager,
+.e-pager {
+  color: var(--be-text-secondary);
+  background: var(--be-surface);
+  border-color: var(--be-border);
+}
+
+.e-pager .e-currentitem,
+.e-grid .e-pager .e-currentitem {
+  color: var(--be-primary-contrast) !important;
+  background: var(--be-primary) !important;
+}
+
+/* 2. Footer and link colors. */
+.footer {
+  color: var(--be-text-secondary);
+  background: var(--be-surface);
+  border-color: var(--be-border);
+}
+
+a:not(.btn):not(.nav-link) {
+  color: var(--be-link-color);
+}
+
+/* 6. Theme switching transition guard. */
+html[data-be-appearance-switching=true] .main-menu,
+html[data-be-appearance-switching=true] .header-navbar,
+html[data-be-appearance-switching=true] .app-content,
+html[data-be-appearance-switching=true] .card,
+html[data-be-appearance-switching=true] footer.footer {
+  transition: none !important;
+}
+@charset "UTF-8";
+.bx-shortcut-management {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  /*
+   * TEMP COMPACT DENSITY — chỉ màn Quản lý phím tắt.
+   * Tạm hardcode theo yêu cầu review hiện tại.
+   * Không ảnh hưởng Grid global / es-grid-template.
+   */
+}
+.bx-shortcut-management .ui-rc-grid-thead .ui-rc-grid-row {
+  height: 30px !important;
+  min-height: 30px !important;
+}
+.bx-shortcut-management .ui-rc-grid-thead .ui-rc-grid-cell {
+  height: 30px !important;
+  min-height: 30px !important;
+  padding: 0 8px !important;
+}
+.bx-shortcut-management .ui-rc-grid-tbody .ui-rc-grid-row.ui-rc-grid-row-parent {
+  height: 30px !important;
+  min-height: 30px !important;
+}
+.bx-shortcut-management .ui-rc-grid-tbody .ui-rc-grid-row.ui-rc-grid-row-parent .ui-rc-grid-cell {
+  height: 30px !important;
+  min-height: 30px !important;
+  padding: 0 8px !important;
+}
+.bx-shortcut-management .ui-rc-grid-tbody .ui-rc-grid-row:not(.ui-rc-grid-row-parent) {
+  height: 32px !important;
+  min-height: 32px !important;
+  max-height: 32px !important;
+}
+.bx-shortcut-management .ui-rc-grid-tbody .ui-rc-grid-row:not(.ui-rc-grid-row-parent) .ui-rc-grid-cell {
+  height: 32px !important;
+  min-height: 0 !important;
+  max-height: 32px !important;
+  padding: 0 8px !important;
+  overflow: hidden;
+  line-height: 16px;
+}
+.bx-shortcut-management .bx-shortcut-feature {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 16px;
+}
+.bx-shortcut-management .bx-shortcut-group-title {
+  font-weight: 600;
+  line-height: 16px;
+  color: var(--be-text-primary, inherit);
+}
+.bx-shortcut-management .bx-shortcut-capture-wrap {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  max-width: 100%;
+  min-width: 0;
+  height: 22px;
+  line-height: 1;
+}
+.bx-shortcut-management .bx-shortcut-capture {
+  display: inline-flex;
+  align-items: center;
+  min-width: 124px;
+  height: 22px;
+  min-height: 22px;
+  padding: 0 6px;
+  border: 1px solid var(--be-border-color, #d8d8d8);
+  border-radius: 4px;
+  background: var(--be-surface-color, #fff);
+  color: var(--be-text-color, #212529);
+  line-height: 1;
+  text-align: left;
+}
+.bx-shortcut-management .bx-shortcut-capture:hover, .bx-shortcut-management .bx-shortcut-capture.is-capturing {
+  border-color: var(--be-primary, #7367f0);
+  color: var(--be-primary, #7367f0);
+}
+.bx-shortcut-management .bx-shortcut-capture.is-capturing {
+  box-shadow: 0 0 0 2px rgba(115, 103, 240, 0.12);
+}
+.bx-shortcut-management .bx-shortcut-capture:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+.bx-shortcut-management .bx-shortcut-clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--be-text-color, #212529);
+  line-height: 1;
+  opacity: 1;
+}
+.bx-shortcut-management .bx-shortcut-clear:hover {
+  background: rgba(0, 0, 0, 0.05);
+  color: var(--be-danger, #ea5455);
+}
+.bx-shortcut-management .bx-shortcut-clear:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+.bx-shortcut-management .bx-shortcut-key {
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  min-height: 20px;
+  padding: 0 6px;
+  border: 1px solid var(--be-border-color, #d8d8d8);
+  border-radius: 4px;
+  color: var(--be-text-color, #212529);
+  line-height: 1;
+  white-space: nowrap;
+}
+.bx-shortcut-management .bx-shortcut-key--locked,
+.bx-shortcut-management .bx-shortcut-state {
+  color: var(--be-text-color, #212529);
+  opacity: 1;
+}
+.bx-shortcut-management .bx-shortcut-state {
+  line-height: 16px;
+  white-space: nowrap;
+}
+.bx-shortcut-management .bx-shortcut-row-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
   height: 20px;
   padding: 0;
-  line-height: 1;
+  line-height: 1;
+}
+.bx-shortcut-management {
+  /*
+   * SwitchInput mặc định có padding / border riêng.
+   * Reset chỉ trong cell Shortcut để không ép row lên ~50px.
+   */
+}
+.bx-shortcut-management .bx-shortcut-switch {
+  height: 22px;
+  min-height: 0;
+  gap: 0 !important;
+  justify-content: center !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  border-bottom: 0 !important;
+}
+.bx-shortcut-management .bx-shortcut-switch > .min-w-0.flex-grow-1 {
+  display: none;
+}
+.bx-shortcut-management .bx-shortcut-switch > .d-flex {
+  height: 22px;
+  min-height: 0;
+  gap: 0 !important;
+  align-items: center !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+.bx-shortcut-management .bx-shortcut-switch .form-check.form-switch {
+  display: flex;
+  align-items: center;
+  min-height: 0;
+  height: 22px;
+  margin: 0 !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+.bx-shortcut-management .bx-shortcut-switch .form-check-input {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+.config-feature-tree-select .select__option {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+
+.config-feature-tree-select__option {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.config-feature-tree-select__toggle,
+.config-feature-tree-select__toggle-spacer {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 22px;
+  width: 22px;
+  height: 22px;
+  margin-right: 2px;
+}
+
+.config-feature-tree-select__toggle {
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  line-height: 1;
+  cursor: pointer;
+}
+.config-feature-tree-select__toggle:hover, .config-feature-tree-select__toggle:focus-visible {
+  background: rgba(var(--be-primary-rgb, 115, 103, 240), 0.12);
+  outline: none;
+}
+
+.config-feature-tree-select__label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.es-application-sidebar-root.is-hidden,
+.es-application-sidebar-backdrop.is-hidden {
+  display: none;
+}
+
+.es-application-sidebar-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.es-application-sidebar-backdrop.show {
+  opacity: 1;
+}
+
+.es-application-sidebar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: min(var(--es-application-sidebar-width, 600px), 100vw);
+  max-width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background: #fff;
+  box-shadow: -4px 0 18px rgba(0, 0, 0, 0.16);
+  transform: translateX(100%);
+  transition: transform 0.4s ease;
+}
+
+.es-application-sidebar.open {
+  transform: translateX(0);
+}
+
+.es-application-sidebar.fullscreen {
+  width: 100vw;
+}
+.config-tree-rules-drawer {
+  width: min(1000px, 100vw);
+  max-width: 100vw;
+  color: #000 !important;
+  background: #fff !important;
+}
+.config-tree-rules-drawer .config-key-sample-layout,
+.config-tree-rules-drawer .config-key-sample-content,
+.config-tree-rules-drawer .config-key-sample-toolbar,
+.config-tree-rules-drawer .config-key-sample-tabs,
+.config-tree-rules-drawer .table,
+.config-tree-rules-drawer .table thead th,
+.config-tree-rules-drawer .table tbody td {
+  color: #000 !important;
+  background: #fff !important;
+}
+.config-tree-rules-drawer .modal-title,
+.config-tree-rules-drawer h6,
+.config-tree-rules-drawer th,
+.config-tree-rules-drawer td,
+.config-tree-rules-drawer strong,
+.config-tree-rules-drawer .config-key-sample-text,
+.config-tree-rules-drawer .config-key-sample-empty,
+.config-tree-rules-drawer .form-control {
+  color: #000 !important;
+}
+.config-tree-rules-drawer .config-key-convention-text {
+  min-width: 720px;
+  padding: 1rem;
+  color: #000;
+  background: #f8f8f8;
+  border: 1px solid #ebe9f1;
+  border-radius: 0.357rem;
+  font-family: monospace;
+  font-size: 12px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.config-tree-rules-drawer .config-key-sample-text {
+  padding: 0;
+  background: transparent !important;
+  font-family: monospace;
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+.config-tree-rules-drawer .config-key-sample-copy-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.config-tree-rules-drawer .config-key-sample-copy-row + .config-key-sample-copy-row {
+  margin-top: 2px;
+}
+.config-tree-rules-drawer .config-key-sample-copy-button {
+  display: inline-flex;
+  flex: 0 0 28px;
+  width: 28px;
+  height: 28px;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  color: #000;
+  background: transparent;
+  border: 0;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.config-tree-rules-drawer .config-key-sample-copy-button:hover {
+  background: #f2f2f2;
+}
+.config-tree-rules-drawer .config-key-sample-copy-button:focus-visible {
+  outline: 2px solid #000;
+  outline-offset: 1px;
+}
+.config-tree-rules-drawer .form-control::placeholder {
+  color: #000;
+  opacity: 1;
+}
+.config-tree-rules-drawer .select__single-value,
+.config-tree-rules-drawer .select__placeholder,
+.config-tree-rules-drawer .select__input-container,
+.config-tree-rules-drawer .select__option {
+  color: #000 !important;
+}
+@charset "UTF-8";
+.bx-appearance-page {
+  min-height: 0;
+}
+
+.bx-appearance-page .becoxy-settings-page__fit,
+.bx-appearance-page .becoxy-settings-page__content--fit {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.bx-appearance-page .becoxy-settings-page__content--fit {
+  padding-bottom: var(--be-settings-block-padding);
+}
+
+.bx-appearance-page .bx-appearance-workspace {
+  --bx-settings-width: 60%;
+  --bx-preview-width: 40%;
+  display: grid;
+  flex: 1 1 auto;
+  grid-template-columns: minmax(0, var(--bx-settings-width)) minmax(0, var(--bx-preview-width));
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+  gap: 0;
+  align-items: stretch;
+  overflow: hidden;
+  background: var(--be-surface);
+  border: 1px solid var(--be-border);
+}
+
+.bx-appearance-page .bx-appearance-workspace.is-settings-expanded {
+  --bx-settings-width: 72%;
+  --bx-preview-width: 28%;
+}
+
+.bx-appearance-page .bx-appearance-workspace.is-preview-expanded {
+  --bx-settings-width: 40%;
+  --bx-preview-width: 60%;
+}
+
+.bx-appearance-page .bx-appearance-workspace.is-settings-collapsed {
+  grid-template-columns: 42px minmax(0, 1fr);
+}
+
+.bx-appearance-page .bx-appearance-workspace.is-preview-collapsed {
+  grid-template-columns: minmax(0, 1fr) 42px;
+}
+
+.bx-appearance-settings-panel,
+.bx-appearance-preview-panel {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--be-surface);
+}
+
+.bx-appearance-settings-panel {
+  border-right: 1px solid var(--be-border);
+}
+
+.bx-appearance-settings-panel__toolbar {
+  display: flex;
+  flex: 0 0 42px;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+  height: 42px;
+  padding-inline: 8px;
+  color: var(--be-text-primary);
+  background: var(--be-surface-secondary);
+  border-bottom: 1px solid var(--be-border);
+}
+
+.bx-appearance-settings-panel__title {
+  display: flex;
+  min-width: 0;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.bx-appearance-settings-panel__title small {
+  color: var(--be-text-muted);
+  font-size: var(--be-small-font-size);
+}
+
+.bx-appearance-settings-scroll {
+  flex: 1 1 auto;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+}
+
+.bx-appearance-settings-scroll > .bx-appearance-controls {
+  min-height: min-content;
+}
+
+.bx-appearance-preview-panel {
+  position: relative;
+}
+
+.bx-appearance-page .bx-appearance-preview-panel > .bx-appearance-preview {
+  position: static;
+  top: auto;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  min-height: 0;
+  padding: 10px;
+  overflow: hidden;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.bx-appearance-page .bx-appearance-preview:not(.is-fullscreen) .bx-appearance-preview__header {
+  flex: 0 0 auto;
+}
+
+.bx-appearance-page .bx-appearance-preview:not(.is-fullscreen) .bx-appearance-preview__body {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.bx-appearance-page .bx-appearance-preview:not(.is-fullscreen) .bx-appearance-preview__stage {
+  flex: 1 1 auto;
+  min-height: 220px;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+.bx-appearance-page .bx-appearance-preview:not(.is-fullscreen) .bx-appearance-preview__details {
+  flex: 0 1 auto;
+  max-height: 34%;
+  overflow: auto;
+}
+
+.bx-appearance-panel-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.bx-appearance-panel-action,
+.bx-appearance-preview__devices .bx-appearance-panel-action {
+  display: inline-grid;
+  width: 30px;
+  height: 28px;
+  place-items: center;
+  padding: 0;
+  color: var(--be-text-secondary);
+  background: var(--be-surface);
+  border: 1px solid var(--be-border);
+  border-radius: var(--be-input-radius);
+}
+
+.bx-appearance-panel-action:hover:not(:disabled),
+.bx-appearance-panel-action.active,
+.bx-appearance-preview__devices .bx-appearance-panel-action:hover:not(:disabled),
+.bx-appearance-preview__devices .bx-appearance-panel-action.active {
+  color: var(--be-primary);
+  background: var(--be-primary-soft);
+  border-color: var(--be-primary);
+}
+
+.bx-appearance-panel-action:disabled,
+.bx-appearance-preview__devices .bx-appearance-panel-action:disabled {
+  cursor: default;
+  opacity: 0.55;
+}
+
+.bx-appearance-panel-rail {
+  display: none;
+  flex: 1 1 auto;
+  align-items: center;
+  flex-direction: column;
+  gap: 8px;
+  padding-top: 8px;
+  background: var(--be-surface);
+}
+
+.bx-appearance-panel-rail > span {
+  writing-mode: vertical-rl;
+  color: var(--be-text-secondary);
+  font-weight: 600;
+  letter-spacing: 0.3px;
+  transform: rotate(180deg);
+}
+
+.bx-appearance-workspace.is-settings-collapsed .bx-appearance-settings-panel__toolbar,
+.bx-appearance-workspace.is-settings-collapsed .bx-appearance-settings-scroll {
+  display: none;
+}
+
+.bx-appearance-workspace.is-settings-collapsed .bx-appearance-settings-panel .bx-appearance-panel-rail,
+.bx-appearance-workspace.is-preview-collapsed .bx-appearance-preview-panel .bx-appearance-panel-rail {
+  display: flex;
+}
+
+.bx-appearance-workspace.is-preview-collapsed .bx-appearance-preview-panel > .bx-appearance-preview {
+  display: none;
+}
+
+.bx-setting-section-toggle {
+  display: inline-grid;
+  width: 28px;
+  height: 27px;
+  place-items: center;
+  padding: 0;
+  color: var(--be-text-muted);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--be-input-radius);
+}
+
+.bx-setting-section-toggle:hover {
+  color: var(--be-primary);
+  background: var(--be-surface);
+  border-color: var(--be-border);
+}
+
+.bx-setting-section-toggle svg {
+  transition: transform var(--be-transition-duration);
+}
+
+.bx-setting-section-toggle svg.is-collapsed {
+  transform: rotate(-90deg);
+}
+
+.bx-appearance-preview__status {
+  display: flex;
+  flex: 0 0 30px;
+  align-items: center;
+  gap: 6px;
+  min-height: 30px;
+  margin-top: 8px;
+  padding-inline: 8px;
+  color: var(--be-text-muted);
+  font-size: calc(var(--be-small-font-size) - 1px);
+  background: var(--be-surface-secondary);
+  border: 1px solid var(--be-border);
+  border-radius: var(--be-input-radius);
+}
+
+.bx-appearance-preview__status-dot {
+  flex: 0 0 7px;
+  width: 7px;
+  height: 7px;
+  background: var(--be-success);
+  border-radius: 50%;
+}
+
+.bx-appearance-controls {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--be-card-gap);
+}
+
+.bx-appearance-form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--be-card-gap);
+}
+
+.bx-appearance-form-grid--3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.bx-appearance-color-fields {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.bx-appearance-color-fields .mb-1 {
+  margin-bottom: 0 !important;
+}
+
+.bx-appearance-primary-palette {
+  display: grid;
+  grid-template-columns: repeat(10, minmax(28px, 1fr));
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.bx-appearance-primary-palette button {
+  position: relative;
+  aspect-ratio: 1;
+  min-height: 30px;
+  padding: 0;
+  border: 2px solid var(--be-surface);
+  border-radius: var(--be-input-radius);
+  box-shadow: 0 0 0 1px var(--be-border);
+}
+
+.bx-appearance-primary-palette button.active::after {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  color: #fff;
+  font-weight: 700;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
+  content: "✓";
+}
+
+.bx-appearance-theme-grid {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.bx-appearance-theme-card {
+  position: relative;
+  min-width: 0;
+  padding: 8px;
+  color: var(--be-text-primary);
+  text-align: left;
+  background: var(--be-surface);
+  border: 1px solid var(--be-border);
+  border-radius: var(--be-card-radius);
+  transition: border-color var(--be-transition-duration), box-shadow var(--be-transition-duration);
+}
+
+.bx-appearance-theme-card:hover,
+.bx-appearance-theme-card.active {
+  border-color: var(--be-primary);
+  box-shadow: 0 0 0 2px rgba(var(--be-primary-rgb), 0.12);
+}
+
+.bx-appearance-theme-card__mini {
+  display: grid;
+  grid-template-columns: 24% 1fr;
+  height: 64px;
+  overflow: hidden;
+  background: var(--theme-background);
+  border: 1px solid var(--theme-border);
+  border-radius: calc(var(--be-card-radius) - 2px);
+}
+
+.bx-appearance-theme-card__sidebar {
+  background: var(--theme-sidebar);
+}
+
+.bx-appearance-theme-card__content {
+  padding: 6px;
+}
+
+.bx-appearance-theme-card__navbar,
+.bx-appearance-theme-card__primary,
+.bx-appearance-theme-card__surface {
+  display: block;
+  border-radius: 3px;
+}
+
+.bx-appearance-theme-card__navbar {
+  height: 8px;
+  margin-bottom: 5px;
+  background: var(--theme-surface);
+}
+
+.bx-appearance-theme-card__primary {
+  width: 55%;
+  height: 5px;
+  margin-bottom: 5px;
+  background: var(--theme-primary);
+}
+
+.bx-appearance-theme-card__surfaces {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4px;
+}
+
+.bx-appearance-theme-card__surface {
+  height: 22px;
+  background: var(--theme-surface);
+  border: 1px solid var(--theme-border);
+}
+
+.bx-appearance-theme-card strong,
+.bx-appearance-theme-card small {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bx-appearance-theme-card strong {
+  margin-top: 6px;
+  color: var(--be-heading-text);
+  font-size: var(--be-small-font-size);
+}
+
+.bx-appearance-theme-card small {
+  color: var(--be-text-muted);
+  font-size: calc(var(--be-small-font-size) - 1px);
+}
+
+.bx-appearance-preset-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.bx-appearance-grid-color-readonly {
+  display: flex;
+  align-items: center;
+  min-height: var(--be-control-height);
+  padding: 4px 8px;
+  color: var(--be-text-secondary);
+  background: var(--be-disabled-background);
+  border: 1px solid var(--be-border);
+  border-radius: var(--be-input-radius);
+}
+
+.bx-appearance-grid-color-readonly span {
+  width: 28px;
+  height: 24px;
+  margin-right: 8px;
+  border: 1px solid var(--be-border);
+  border-radius: 4px;
+}
+
+.bx-appearance-grid-color-readonly code {
+  color: inherit;
+}
+
+.bx-appearance-auto-note {
+  margin-top: 10px;
+  padding: 9px 10px;
+  color: #166534;
+  font-size: var(--be-small-font-size);
+  background: #ecfdf5;
+  border: 1px solid #a7f3d0;
+  border-radius: var(--be-input-radius);
+}
+
+.bx-appearance-number-field {
+  display: grid;
+  grid-template-columns: minmax(140px, 1fr) minmax(230px, 1.25fr);
+  gap: 12px;
+  align-items: center;
+  min-height: 50px;
+  padding-block: 6px;
+  border-bottom: 1px dashed var(--be-border);
+}
+
+.bx-appearance-number-field:last-child {
+  border-bottom: 0;
+}
+
+.bx-appearance-number-field__label small {
+  display: block;
+  margin-top: 2px;
+}
+
+.bx-appearance-number-field__controls {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 96px;
+  gap: 8px;
+  align-items: start;
+  min-width: 0;
+}
+
+.bx-appearance-number-field__input {
+  position: relative;
+}
+
+.bx-appearance-number-field__input.has-suffix .form-control {
+  padding-right: 34px;
+}
+
+.bx-appearance-number-field__suffix {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  color: var(--be-text-muted);
+  font-size: var(--be-small-font-size);
+  pointer-events: none;
+  transform: translateY(-50%);
+}
+
+.bx-appearance-locked-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.bx-appearance-locked-item {
+  padding: 9px 10px;
+  color: #854d0e;
+  font-size: var(--be-small-font-size);
+  background: #fffbeb;
+  border: 1px solid #fde68a;
+  border-radius: var(--be-input-radius);
+}
+
+.bx-appearance-preview {
+  position: static;
+  min-width: 0;
+  padding: 10px;
+  color: var(--bx-preview-text);
+  font-family: var(--bx-preview-font-family);
+  font-size: var(--bx-preview-font-size);
+  font-weight: var(--bx-preview-body-weight);
+  line-height: var(--bx-preview-line-height);
+  letter-spacing: var(--bx-preview-letter-spacing);
+  background: var(--be-surface);
+  border: 1px solid var(--be-border);
+  border-radius: var(--be-card-radius);
+  box-shadow: var(--be-card-shadow);
+}
+
+.bx-appearance-preview *,
+.bx-appearance-preview button,
+.bx-appearance-preview input {
+  box-sizing: border-box;
+  font-family: inherit;
+}
+
+.bx-appearance-preview__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
+.bx-appearance-preview__header strong,
+.bx-appearance-preview__header small {
+  display: block;
+}
+
+.bx-appearance-preview__header small {
+  color: var(--be-text-muted);
+  font-size: var(--be-small-font-size);
+}
+
+.bx-appearance-preview__devices {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  justify-content: flex-end;
+}
+
+.bx-appearance-preview__devices button {
+  height: 26px;
+  padding-inline: 8px;
+  color: var(--be-text-muted);
+  font-size: 10px;
+  font-weight: 600;
+  background: var(--be-surface);
+  border: 1px solid var(--be-border);
+  border-radius: 6px;
+}
+
+.bx-appearance-preview__devices button.active {
+  color: var(--be-primary);
+  background: var(--be-primary-soft);
+  border-color: var(--be-primary);
+}
+
+.bx-appearance-preview__stage {
+  overflow: auto;
+  padding: 8px;
+  background: #eef2f7;
+  border: 1px dashed var(--be-border);
+  border-radius: var(--be-card-radius);
+}
+
+.bx-appearance-preview__frame {
+  width: 100%;
+  min-width: 430px;
+  margin-inline: auto;
+  overflow: hidden;
+  color: var(--bx-preview-text);
+  background: var(--bx-preview-background);
+  border: 1px solid var(--bx-preview-border);
+  border-radius: 9px;
+  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.14);
+  transition: width var(--bx-preview-transition);
+}
+
+.bx-appearance-preview__frame.is-tablet {
+  width: 78%;
+}
+
+.bx-appearance-preview__frame.is-mobile {
+  width: 54%;
+  min-width: 315px;
+}
+
+.bx-appearance-preview__navbar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-height: 36px;
+  height: clamp(36px, var(--bx-preview-navbar-height) * 0.62, 54px);
+  padding-inline: 9px;
+  color: var(--bx-preview-navbar-text);
+  background: var(--bx-preview-navbar);
+  border-bottom: 1px solid var(--bx-preview-border);
+  transition: var(--bx-preview-transition);
+}
+
+.bx-appearance-preview__navbar > small {
+  position: absolute;
+  bottom: 2px;
+  left: 50%;
+  padding: 1px 4px;
+  color: #fff;
+  font-size: 7px;
+  background: #0f172a;
+  border-radius: 999px;
+  transform: translateX(-50%);
+}
+
+.bx-appearance-preview__logo {
+  display: grid;
+  place-items: center;
+  width: 22px;
+  height: 22px;
+  color: var(--bx-preview-primary-text);
+  font-size: 10px;
+  font-weight: 800;
+  background: var(--bx-preview-primary);
+  border-radius: 5px;
+}
+
+.bx-appearance-preview__navbar > strong {
+  font-size: 9px;
+  white-space: nowrap;
+}
+
+.bx-appearance-preview__global-search {
+  width: 124px;
+  height: 21px;
+  margin-left: 14px;
+  background: var(--bx-preview-surface-secondary);
+  border: 1px solid var(--bx-preview-input-border);
+  border-radius: var(--bx-preview-input-radius);
+}
+
+.bx-appearance-preview__navbar-icons {
+  display: flex;
+  gap: 5px;
+  margin-left: auto;
+}
+
+.bx-appearance-preview__navbar-icons i {
+  display: grid;
+  place-items: center;
+  width: 15px;
+  height: 15px;
+  color: currentColor;
+  font-size: 8px;
+  font-style: normal;
+}
+
+.bx-appearance-preview__shell {
+  display: grid;
+  grid-template-columns: clamp(68px, var(--bx-preview-sidebar-width) * 0.42, 132px) minmax(0, 1fr);
+  min-height: 390px;
+  transition: grid-template-columns var(--bx-preview-transition);
+}
+
+.bx-appearance-preview__frame.is-sidebar-collapsed .bx-appearance-preview__shell {
+  grid-template-columns: clamp(38px, var(--bx-preview-collapsed-width) * 0.58, 64px) minmax(0, 1fr);
+}
+
+.bx-appearance-preview__sidebar {
+  position: relative;
+  padding: 8px 6px;
+  overflow: hidden;
+  color: var(--bx-preview-sidebar-text);
+  background: var(--bx-preview-sidebar);
+  border-right: 1px solid var(--bx-preview-border);
+}
+
+.bx-appearance-preview__collapse {
+  position: absolute;
+  top: 4px;
+  right: 3px;
+  z-index: 2;
+  display: grid;
+  place-items: center;
+  width: 15px;
+  height: 15px;
+  padding: 0;
+  color: currentColor;
+  font-size: 10px;
+  background: transparent;
+  border: 1px solid currentColor;
+  border-radius: 50%;
+  opacity: 0.65;
+}
+
+.bx-appearance-preview__group-title {
+  margin: 4px 5px var(--bx-preview-menu-group-spacing);
+  overflow: hidden;
+  color: var(--bx-preview-sidebar-muted);
+  font-size: 7px;
+  font-weight: 800;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bx-appearance-preview__sidebar-caption {
+  display: block;
+  margin: -4px 5px 6px;
+  overflow: hidden;
+  color: var(--bx-preview-sidebar-muted);
+  font-size: 7px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bx-appearance-preview__menu-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 24px;
+  height: clamp(24px, var(--bx-preview-menu-height) * 0.7, 38px);
+  margin-bottom: 3px;
+  padding-inline: 7px;
+  overflow: hidden;
+  color: currentColor;
+  font-size: clamp(7px, var(--bx-preview-menu-font-size) * 0.66, 10px);
+  font-weight: var(--bx-preview-menu-font-weight);
+  border-radius: var(--bx-preview-menu-active-radius);
+  white-space: nowrap;
+}
+
+.bx-appearance-preview__menu-item.is-child {
+  padding-left: calc(7px + var(--bx-preview-menu-indent) * 0.45);
+}
+
+.bx-appearance-preview__menu-item i {
+  flex: 0 0 auto;
+  width: clamp(8px, var(--bx-preview-menu-icon-size) * 0.62, 15px);
+  height: clamp(8px, var(--bx-preview-menu-icon-size) * 0.62, 15px);
+  background: currentColor;
+  border-radius: 3px;
+  opacity: 0.25;
+}
+
+.bx-appearance-preview__menu-item.is-active {
+  color: var(--bx-preview-primary);
+  font-weight: 700;
+  background: var(--bx-preview-active);
+}
+
+.bx-appearance-preview__menu-item.is-hovered:not(.is-active) {
+  color: var(--bx-preview-sidebar-hover-text);
+  background: var(--bx-preview-sidebar-hover);
+}
+
+.bx-appearance-preview__menu-item.is-active.is-left-border {
+  background: transparent;
+  box-shadow: inset 3px 0 0 var(--bx-preview-primary);
+}
+
+.bx-appearance-preview__menu-item.is-active.is-text-only {
+  background: transparent;
+  box-shadow: none;
+}
+
+.bx-appearance-preview__sidebar-measure {
+  position: absolute;
+  right: 3px;
+  bottom: 3px;
+  padding: 1px 4px;
+  color: #fff;
+  font-size: 7px;
+  background: #0f172a;
+  border-radius: 999px;
+}
+
+.bx-appearance-preview__frame.is-sidebar-collapsed .bx-appearance-preview__group-title,
+.bx-appearance-preview__frame.is-sidebar-collapsed .bx-appearance-preview__sidebar-caption,
+.bx-appearance-preview__frame.is-sidebar-collapsed .bx-appearance-preview__menu-item span {
+  display: none;
+}
+
+.bx-appearance-preview__frame.is-sidebar-collapsed .bx-appearance-preview__menu-item {
+  justify-content: center;
+  padding: 0;
+}
+
+.bx-appearance-preview__content {
+  min-width: 0;
+  padding: clamp(4px, var(--bx-preview-content-padding) * 0.75, 22px);
+  background: var(--bx-preview-background);
+}
+
+.bx-appearance-preview__title-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: clamp(5px, var(--bx-preview-section-gap), 24px);
+}
+
+.bx-appearance-preview__title-row h2 {
+  margin: 0;
+  color: var(--bx-preview-heading);
+  font-size: clamp(10px, var(--bx-preview-page-title-size) * 0.55, 16px);
+  font-weight: var(--bx-preview-page-title-weight);
+}
+
+.bx-appearance-preview__title-row small {
+  display: block;
+  color: var(--bx-preview-muted);
+  font-size: clamp(7px, var(--bx-preview-small-size) * 0.58, 10px);
+}
+
+.bx-appearance-preview__title-row button,
+.bx-appearance-preview__toolbar button {
+  height: clamp(22px, var(--bx-preview-button-height) * 0.72, 34px);
+  padding-inline: calc(var(--bx-preview-button-padding) * 0.55);
+  color: var(--bx-preview-primary-text);
+  font-size: 8px;
+  background: var(--bx-preview-primary);
+  border: 1px solid var(--bx-preview-primary);
+  border-radius: var(--bx-preview-button-radius);
+}
+
+.bx-appearance-preview__toolbar {
+  display: flex;
+  gap: 6px;
+  margin-bottom: clamp(5px, var(--bx-preview-section-gap), 24px);
+  padding: 6px;
+  overflow: hidden;
+  background: var(--bx-preview-surface);
+  border: 1px solid var(--bx-preview-border);
+  border-radius: var(--bx-preview-card-radius);
+}
+
+.bx-appearance-preview__toolbar > div {
+  display: flex;
+  align-items: center;
+  height: clamp(22px, var(--bx-preview-control-height) * 0.68, 34px);
+  padding-inline: 6px;
+  overflow: hidden;
+  color: var(--bx-preview-muted);
+  font-size: 7px;
+  background: var(--bx-preview-surface);
+  border: 1px solid var(--bx-preview-input-border);
+  border-radius: var(--bx-preview-input-radius);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bx-appearance-preview__toolbar .is-search {
+  flex: 0 1 42%;
+}
+
+.bx-appearance-preview__toolbar .is-filter {
+  flex: 0 1 28%;
+}
+
+.bx-appearance-preview__toolbar button {
+  flex: 0 0 auto;
+  margin-left: auto;
+}
+
+.bx-appearance-preview__gutter-sample {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: clamp(3px, var(--bx-preview-gutter) * 0.55, 20px);
+  margin-bottom: clamp(5px, var(--bx-preview-section-gap), 24px);
+}
+
+.bx-appearance-preview__gutter-sample span {
+  display: grid;
+  min-height: 24px;
+  place-items: center;
+  padding: 4px 6px;
+  overflow: hidden;
+  color: var(--bx-preview-text-secondary);
+  font-size: 7px;
+  background: var(--bx-preview-surface-secondary);
+  border: 1px solid var(--bx-preview-border);
+  border-radius: var(--bx-preview-input-radius);
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bx-appearance-preview__grid {
+  overflow: hidden;
+  color: var(--bx-preview-grid-text);
+  font-size: var(--bx-preview-grid-font-size);
+  background: var(--bx-preview-grid-background);
+  border: var(--bx-preview-grid-border-width) solid var(--bx-preview-grid-border);
+  border-radius: var(--bx-preview-grid-radius);
+  box-shadow: var(--bx-preview-grid-shadow);
+}
+
+.bx-appearance-preview__grid-row {
+  display: grid;
+  grid-template-columns: 34px 1.05fr 1.4fr 0.9fr 0.8fr;
+  min-height: var(--bx-preview-grid-row-height);
+  color: var(--bx-preview-grid-text);
+  border-bottom: var(--bx-preview-grid-border-horizontal-width) solid var(--bx-preview-grid-border);
+}
+
+.bx-appearance-preview__grid-row.is-header {
+  min-height: var(--bx-preview-grid-header-height);
+  padding: 0;
+  color: var(--bx-preview-grid-header-text);
+  font-weight: var(--bx-preview-grid-header-weight);
+  background: var(--bx-preview-grid-header-background);
+}
+
+.bx-appearance-preview__grid-row.is-fixed {
+  height: var(--bx-preview-grid-row-height);
+}
+
+.bx-appearance-preview__grid-row.is-auto {
+  height: auto;
+  min-height: var(--bx-preview-grid-row-height);
+}
+
+.bx-appearance-preview__grid-row.is-striped {
+  background: var(--bx-preview-grid-striped);
+}
+
+.bx-appearance-preview__grid-row.is-hover-demo {
+  background: var(--bx-preview-grid-hover);
+}
+
+.bx-appearance-preview__grid-row.is-selected {
+  color: var(--bx-preview-grid-selected-text);
+  background: var(--bx-preview-grid-selected);
+}
+
+.bx-appearance-preview__grid-row > span {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  align-self: stretch;
+  padding: var(--bx-preview-grid-cell-padding-y) var(--bx-preview-grid-cell-padding-x);
+  overflow: hidden;
+  color: inherit;
+  font-size: var(--bx-preview-grid-font-size);
+  border-right: var(--bx-preview-grid-border-vertical-width) solid var(--bx-preview-grid-border);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bx-appearance-preview__grid-row > span:last-child {
+  border-right: 0;
+}
+
+.bx-appearance-preview__grid-row.is-header > span {
+  padding: var(--bx-preview-grid-header-padding-y) var(--bx-preview-grid-header-padding-x);
+}
+
+.bx-appearance-preview__grid-row .is-wrap {
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.bx-appearance-preview__grid-row .is-active-cell {
+  background: var(--bx-preview-grid-active-cell);
+}
+
+.bx-appearance-preview__grid-row b {
+  display: inline-flex;
+  align-items: center;
+  min-height: 17px;
+  padding-inline: 5px;
+  color: var(--bx-preview-success-text);
+  font-size: 7px;
+  background: var(--bx-preview-success);
+  border-radius: 999px;
+}
+
+.bx-appearance-preview__person-template {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 6px;
+}
+
+.bx-appearance-preview__person-template > i {
+  display: grid;
+  flex: 0 0 24px;
+  width: 24px;
+  height: 24px;
+  place-items: center;
+  color: var(--bx-preview-primary-text);
+  font-size: 8px;
+  font-style: normal;
+  background: var(--bx-preview-primary);
+  border-radius: 50%;
+}
+
+.bx-appearance-preview__person-template > span {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.bx-appearance-preview__person-template strong,
+.bx-appearance-preview__person-template small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bx-appearance-preview__person-template small {
+  color: inherit;
+  opacity: 0.75;
+}
+
+.bx-appearance-preview__grid-group {
+  display: flex;
+  min-height: var(--bx-preview-grid-row-height);
+  align-items: center;
+  padding: var(--bx-preview-grid-cell-padding-y) var(--bx-preview-grid-cell-padding-x);
+  color: var(--bx-preview-grid-group-text);
+  background: var(--bx-preview-grid-group-background);
+  border-bottom: var(--bx-preview-grid-border-horizontal-width) solid var(--bx-preview-grid-border);
+}
+
+.bx-appearance-preview__grid-cases {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-bottom: 6px;
+}
+
+.bx-appearance-preview__grid-cases button {
+  min-height: 24px;
+  padding: 2px 7px;
+  color: var(--bx-preview-text-secondary);
+  font-size: 7px;
+  background: var(--bx-preview-surface);
+  border: 1px solid var(--bx-preview-border);
+  border-radius: var(--bx-preview-input-radius);
+}
+
+.bx-appearance-preview__grid-cases button.active {
+  color: var(--bx-preview-primary-text);
+  background: var(--bx-preview-primary);
+  border-color: var(--bx-preview-primary);
+}
+
+.bx-appearance-preview__pager {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-height: var(--bx-preview-grid-pager-height);
+  padding-inline: var(--bx-preview-grid-cell-padding-x);
+  color: var(--bx-preview-grid-footer-text);
+  font-size: var(--bx-preview-grid-font-size);
+  background: var(--bx-preview-grid-footer-background);
+}
+
+.bx-appearance-preview__pager > span:last-child {
+  display: flex;
+  gap: 3px;
+}
+
+.bx-appearance-preview__pager i {
+  display: grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+  font-style: normal;
+  border: var(--bx-preview-grid-border-width) solid var(--bx-preview-grid-border);
+  border-radius: 4px;
+}
+
+.bx-appearance-preview__pager i.active {
+  color: var(--bx-preview-primary-text);
+  background: var(--bx-preview-primary);
+  border-color: var(--bx-preview-primary);
+}
+
+.bx-appearance-preview__footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 22px;
+  height: clamp(22px, var(--bx-preview-footer-height) * 0.6, 44px);
+  color: var(--bx-preview-muted);
+  font-size: 7px;
+  background: var(--bx-preview-surface);
+  border-top: 1px solid var(--bx-preview-border);
+}
+
+.bx-appearance-preview__frame.is-mobile .bx-appearance-preview__global-search,
+.bx-appearance-preview__frame.is-mobile .bx-appearance-preview__navbar > strong {
+  display: none;
+}
+
+.bx-appearance-preview__frame.is-mobile .bx-appearance-preview__shell {
+  grid-template-columns: 42px minmax(0, 1fr);
+}
+
+.bx-appearance-preview__frame.is-mobile .bx-appearance-preview__group-title,
+.bx-appearance-preview__frame.is-mobile .bx-appearance-preview__sidebar-caption,
+.bx-appearance-preview__frame.is-mobile .bx-appearance-preview__menu-item span {
+  display: none;
+}
+
+.bx-appearance-preview__frame.is-mobile .bx-appearance-preview__menu-item {
+  justify-content: center;
+  padding: 0;
+}
+
+.bx-appearance-preview__frame.is-mobile .bx-appearance-preview__toolbar .is-filter:nth-of-type(3) {
+  display: none;
+}
+
+.bx-appearance-preview__frame.is-compact .bx-appearance-preview__menu-item {
+  height: min(28px, var(--bx-preview-menu-height));
+}
+
+.bx-appearance-preview__frame.is-reduced-motion * {
+  transition-duration: 0ms !important;
+}
+
+.bx-appearance-preview .is-inspecting {
+  position: relative;
+  z-index: 2;
+  outline: 2px solid #2563eb !important;
+  outline-offset: -2px;
+  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12) !important;
+}
+
+.bx-appearance-preview__color-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 6px;
+  margin-top: 8px;
+}
+
+.bx-appearance-preview__color-grid > div {
+  display: flex;
+  min-height: 46px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1px;
+  padding: 5px;
+  text-align: center;
+  border-radius: 6px;
+}
+
+.bx-appearance-preview__color-grid strong,
+.bx-appearance-preview__color-grid small {
+  display: block;
+}
+
+.bx-appearance-preview__color-grid strong {
+  font-size: 8px;
+}
+
+.bx-appearance-preview__color-grid small {
+  font-size: 7px;
+  opacity: 0.85;
+}
+
+.bx-appearance-preview__metrics {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 5px;
+  margin-top: 8px;
+}
+
+.bx-appearance-preview__metrics > div {
+  padding: 6px 4px;
+  text-align: center;
+  background: var(--bx-preview-surface);
+  border: 1px solid var(--bx-preview-border);
+  border-radius: 6px;
+}
+
+.bx-appearance-preview__metrics small,
+.bx-appearance-preview__metrics strong {
+  display: block;
+}
+
+.bx-appearance-preview__metrics small {
+  color: var(--bx-preview-muted);
+  font-size: 7px;
+}
+
+.bx-appearance-preview__metrics strong {
+  color: var(--bx-preview-heading);
+  font-size: 8px;
+}
+
+.bx-appearance-preview__component-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 6px;
+  margin-top: 8px;
+}
+
+.bx-appearance-preview__component-card {
+  position: relative;
+  min-width: 0;
+  padding: var(--bx-preview-card-padding);
+  background: var(--bx-preview-surface);
+  border: 1px solid var(--bx-preview-border);
+  border-radius: var(--bx-preview-card-radius);
+  box-shadow: var(--be-card-shadow);
+}
+
+.bx-appearance-preview__component-card h3,
+.bx-appearance-preview__component-card h4,
+.bx-appearance-preview__component-card p {
+  margin: 0 0 5px;
+}
+
+.bx-appearance-preview__component-card h3 {
+  color: var(--bx-preview-heading);
+  font-size: calc(var(--bx-preview-section-title-size) * 0.62);
+  font-weight: var(--bx-preview-section-title-weight);
+}
+
+.bx-appearance-preview__component-card h4 {
+  color: var(--bx-preview-heading);
+  font-size: calc(var(--bx-preview-card-title-size) * 0.72);
+  font-weight: var(--bx-preview-card-title-weight);
+}
+
+.bx-appearance-preview__component-card p {
+  color: var(--bx-preview-text-secondary);
+  font-size: calc(var(--bx-preview-font-size) * 0.64);
+}
+
+.bx-appearance-preview__component-card label {
+  display: block;
+  margin: 6px 0 3px;
+  color: var(--bx-preview-text);
+  font-size: calc(var(--bx-preview-label-size) * 0.7);
+  font-weight: var(--bx-preview-label-weight);
+}
+
+.bx-appearance-preview__component-card input {
+  width: 100%;
+  height: calc(var(--bx-preview-control-height) * 0.72);
+  min-height: 24px;
+  padding-inline: 7px;
+  color: var(--bx-preview-text);
+  font-size: 8px;
+  background: var(--bx-preview-surface);
+  border: 1px solid var(--bx-preview-input-border);
+  border-radius: var(--bx-preview-input-radius);
+  outline: none;
+}
+
+.bx-appearance-preview__component-card input::placeholder {
+  color: var(--bx-preview-placeholder);
+}
+
+.bx-appearance-preview__component-card input.is-focused {
+  border-color: var(--bx-preview-primary);
+  box-shadow: 0 0 0 var(--bx-preview-focus-size) rgba(var(--be-primary-rgb), 0.18);
+}
+
+.bx-appearance-preview__buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.bx-appearance-preview__buttons button {
+  height: calc(var(--bx-preview-button-height) * 0.72);
+  min-height: 22px;
+  padding-inline: calc(var(--bx-preview-button-padding) * 0.55);
+  color: var(--bx-preview-text);
+  font-size: 7px;
+  background: var(--bx-preview-surface);
+  border: 1px solid var(--bx-preview-border);
+  border-radius: var(--bx-preview-button-radius);
+}
+
+.bx-appearance-preview__buttons button.primary {
+  color: var(--bx-preview-primary-text);
+  background: var(--bx-preview-primary);
+  border-color: var(--bx-preview-primary);
+}
+
+.bx-appearance-preview__buttons button.secondary {
+  color: var(--bx-preview-secondary-text);
+  background: var(--bx-preview-secondary);
+  border-color: var(--bx-preview-secondary);
+}
+
+.bx-appearance-preview__buttons button.warning {
+  color: var(--bx-preview-warning-text);
+  background: var(--bx-preview-warning);
+  border-color: var(--bx-preview-warning);
+}
+
+.bx-appearance-preview__buttons button.danger {
+  color: var(--bx-preview-danger-text);
+  background: var(--bx-preview-danger);
+  border-color: var(--bx-preview-danger);
+}
+
+.bx-appearance-preview__buttons button.info {
+  color: var(--bx-preview-info-text);
+  background: var(--bx-preview-info);
+  border-color: var(--bx-preview-info);
+}
+
+.bx-appearance-preview__tabs {
+  display: flex;
+  gap: 4px;
+}
+
+.bx-appearance-preview__tabs button {
+  min-width: 50px;
+  height: calc(var(--bx-preview-tab-height) * 0.62);
+  min-height: 24px;
+  padding-inline: 6px;
+  color: var(--bx-preview-muted);
+  font-size: 7px;
+  background: var(--bx-preview-surface);
+  border: 1px solid var(--bx-preview-border);
+  border-radius: var(--bx-preview-tab-radius);
+}
+
+.bx-appearance-preview__tabs button.active {
+  color: var(--bx-preview-primary);
+  font-weight: 700;
+  background: var(--bx-preview-active);
+  border-color: var(--bx-preview-primary);
+}
+
+.bx-appearance-preview__checks {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 8px;
+  font-size: 8px;
+}
+
+.bx-appearance-preview__checks span {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.bx-appearance-preview__checks i.checkbox {
+  display: grid;
+  place-items: center;
+  width: var(--bx-preview-checkbox-size);
+  height: var(--bx-preview-checkbox-size);
+  color: var(--bx-preview-primary-text);
+  font-size: calc(var(--bx-preview-checkbox-size) * 0.55);
+  font-style: normal;
+  background: var(--bx-preview-primary);
+  border-radius: 4px;
+}
+
+.bx-appearance-preview__checks i.switch {
+  display: flex;
+  justify-content: flex-end;
+  width: calc(var(--bx-preview-switch-height) * 1.8);
+  height: var(--bx-preview-switch-height);
+  padding: 2px;
+  background: var(--bx-preview-primary);
+  border-radius: 999px;
+}
+
+.bx-appearance-preview__checks i.switch b {
+  display: block;
+  width: calc(var(--bx-preview-switch-height) - 4px);
+  height: calc(var(--bx-preview-switch-height) - 4px);
+  background: #fff;
+  border-radius: 50%;
+}
+
+.bx-appearance-preview__modal {
+  padding: 8px;
+  background: var(--bx-preview-surface);
+  border: 1px solid var(--bx-preview-border);
+  border-radius: var(--bx-preview-modal-radius);
+  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.16);
+}
+
+.bx-appearance-preview__modal strong,
+.bx-appearance-preview__modal small {
+  display: block;
+}
+
+.bx-appearance-preview__modal strong {
+  color: var(--bx-preview-heading);
+  font-size: 8px;
+}
+
+.bx-appearance-preview__modal small {
+  color: var(--bx-preview-muted);
+  font-size: 7px;
+}
+
+.bx-appearance-preview__dropdown {
+  margin-top: 7px;
+  overflow: hidden;
+  background: var(--bx-preview-surface);
+  border: 1px solid var(--bx-preview-border);
+  border-radius: var(--bx-preview-dropdown-radius);
+  box-shadow: var(--be-dropdown-shadow);
+}
+
+.bx-appearance-preview__dropdown span {
+  display: block;
+  padding: 5px 7px;
+  font-size: 7px;
+  border-bottom: 1px solid var(--bx-preview-border);
+}
+
+.bx-appearance-preview__dropdown span:last-child {
+  border-bottom: 0;
+}
+
+.bx-appearance-preview__dropdown span.active {
+  color: var(--bx-preview-primary);
+  font-weight: 700;
+  background: var(--bx-preview-active);
+}
+
+.bx-appearance-preview__tooltip {
+  display: inline-block;
+  margin-top: 7px;
+  padding: 4px 6px;
+  color: #fff;
+  font-size: 7px;
+  background: #111827;
+  border-radius: 5px;
+  box-shadow: var(--be-dropdown-shadow);
+}
+
+.bx-appearance-preview__states {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+  margin-top: 8px;
+}
+
+.bx-appearance-preview__states span {
+  padding: 3px 6px;
+  color: var(--bx-preview-muted);
+  font-size: 7px;
+  background: var(--bx-preview-surface-secondary);
+  border: 1px solid var(--bx-preview-border);
+  border-radius: 999px;
+}
+
+@container be-settings (max-width: 1180px) {
+  .bx-appearance-page .bx-appearance-workspace {
+    position: relative;
+    grid-template-columns: minmax(0, 1fr) 42px;
+  }
+  .bx-appearance-page .bx-appearance-workspace:not(.is-preview-collapsed) .bx-appearance-preview-panel {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 20;
+    width: min(640px, 72cqw);
+    background: var(--be-surface);
+    border-left: 1px solid var(--be-border);
+    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.18);
+  }
+  .bx-appearance-page .bx-appearance-workspace.is-preview-collapsed .bx-appearance-preview-panel {
+    position: static;
+    width: 42px;
+    box-shadow: none;
+  }
+  .bx-appearance-page .bx-appearance-workspace.is-settings-expanded,
+  .bx-appearance-page .bx-appearance-workspace.is-preview-expanded {
+    grid-template-columns: minmax(0, 1fr) 42px;
+  }
+}
+@container be-settings (max-width: 820px) {
+  .bx-appearance-theme-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .bx-appearance-color-fields,
+  .bx-appearance-form-grid,
+  .bx-appearance-form-grid--3,
+  .bx-appearance-locked-grid {
+    grid-template-columns: 1fr;
+  }
+}
+@container be-settings (max-width: 620px) {
+  .bx-appearance-number-field {
+    grid-template-columns: 1fr;
+    gap: 6px;
+  }
+  .bx-appearance-primary-palette {
+    grid-template-columns: repeat(5, minmax(28px, 1fr));
+  }
+  .bx-appearance-preview__component-grid {
+    grid-template-columns: 1fr;
+  }
+  .bx-appearance-preview__metrics {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+.bx-appearance-preview__sidebar {
+  padding: 0;
+  color: var(--bx-preview-sidebar-text);
+  background: var(--bx-preview-sidebar);
+}
+
+.bx-appearance-preview__brand-header {
+  display: flex;
+  align-items: center;
+  min-height: var(--bx-preview-navbar-height);
+  padding-inline: 8px;
+  color: var(--bx-preview-sidebar-brand-text);
+  background: var(--bx-preview-sidebar-brand-background);
+  border-bottom: 1px solid var(--bx-preview-sidebar-brand-border);
+  box-shadow: none;
+}
+
+.bx-appearance-preview__brand-header .bx-appearance-preview__logo {
+  flex: 0 0 auto;
+}
+
+.bx-appearance-preview__brand-text {
+  overflow: hidden;
+  margin-left: 6px;
+  font-size: 9px;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bx-appearance-preview__brand-toggle {
+  margin-left: auto;
+  padding: 0;
+  color: var(--bx-preview-sidebar-brand-toggle);
+  background: transparent;
+  border: 0;
+}
+
+.bx-appearance-preview__sidebar-body {
+  position: relative;
+  min-height: calc(100% - var(--bx-preview-navbar-height));
+  padding: 8px 6px;
+  color: var(--bx-preview-sidebar-text);
+  background: var(--bx-preview-sidebar);
+}
+
+.bx-appearance-preview__group-title {
+  color: var(--bx-preview-sidebar-group-text);
+}
+
+.bx-appearance-preview__menu-item {
+  color: var(--bx-preview-sidebar-text);
+}
+
+.bx-appearance-preview__menu-item.is-active {
+  color: var(--bx-preview-sidebar-active-text);
+  background: var(--bx-preview-sidebar-active);
+}
+
+.bx-appearance-preview__menu-item.is-active::before {
+  background: var(--bx-preview-sidebar-indicator);
+}
+
+.bx-appearance-preview__menu-item.is-active.is-left-border,
+.bx-appearance-preview__menu-item.is-active.is-text-only {
+  color: var(--bx-preview-sidebar-accent-text);
+}
+
+.bx-appearance-preview__frame.is-sidebar-collapsed .bx-appearance-preview__brand-text,
+.bx-appearance-preview__frame.is-mobile .bx-appearance-preview__brand-text {
+  display: none;
+}
+
+/* MERGE VÀO appearance.scss */
+.bx-appearance-mode {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+}
+
+.bx-appearance-mode__options {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 6px;
+}
+
+.bx-appearance-mode__option {
+  min-height: var(--be-control-height);
+  padding-inline: 10px;
+  color: var(--be-text-primary);
+  font-weight: 600;
+  background: var(--be-surface);
+  border: 1px solid var(--be-input-border);
+  border-radius: var(--be-input-radius);
+  box-shadow: none;
+}
+
+.bx-appearance-mode__option:hover:not(:disabled) {
+  color: var(--be-primary);
+  background: var(--be-primary-soft);
+  border-color: var(--be-primary);
+}
+
+.bx-appearance-mode__option.active {
+  color: var(--be-primary-contrast);
+  background: var(--be-primary);
+  border-color: var(--be-primary);
+}
+
+.bx-appearance-mode__option:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.bx-appearance-mode__status {
+  color: var(--be-text-muted);
 }
-.bx-shortcut-management {
-  /*
-   * SwitchInput mặc định có padding / border riêng.
-   * Reset chỉ trong cell Shortcut để không ép row lên ~50px.
-   */
+
+/* Appearance giữ layout Settings chung: một mặt phẳng cấu hình liền khối. */
+.bx-appearance-page .bx-appearance-controls {
+  gap: 0;
+  overflow: visible;
+  background: var(--be-surface);
+  border: 0;
+  border-radius: 0;
 }
-.bx-shortcut-management .bx-shortcut-switch {
-  height: 22px;
-  min-height: 0;
-  gap: 0 !important;
-  justify-content: center !important;
-  padding: 0 !important;
+
+.bx-appearance-page .bx-appearance-controls .card {
   margin: 0 !important;
-  border-bottom: 0 !important;
+  background: var(--be-surface);
+  border: 0;
+  border-bottom: 1px solid var(--be-border);
+  border-radius: 0;
+  box-shadow: none;
 }
-.bx-shortcut-management .bx-shortcut-switch > .min-w-0.flex-grow-1 {
-  display: none;
+
+.bx-appearance-page .bx-appearance-controls > .card:last-child {
+  border-bottom: 0;
 }
-.bx-shortcut-management .bx-shortcut-switch > .d-flex {
+
+.bx-appearance-page .bx-appearance-controls .card-header {
+  min-height: 42px;
+  padding: 8px 12px;
+  background: var(--be-surface-secondary);
+  border-bottom: 1px solid var(--be-border);
+}
+
+.bx-appearance-page .bx-appearance-controls .card-body {
+  padding: 12px;
+}
+
+.bx-appearance-page .bx-appearance-controls > .bx-appearance-form-grid {
+  gap: 0;
+  border-bottom: 1px solid var(--be-border);
+}
+
+.bx-appearance-page .bx-appearance-controls > .bx-appearance-form-grid > .card {
+  border-bottom: 0;
+}
+
+.bx-appearance-page .bx-appearance-controls > .bx-appearance-form-grid > .card + .card {
+  border-left: 1px solid var(--be-border);
+}
+
+.bx-appearance-page .bx-appearance-preview {
+  border-radius: 0;
+  box-shadow: none;
+}
+
+/* Theme Library */
+.bx-theme-library__toolbar {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: center;
+}
+
+.bx-theme-library__filters,
+.bx-theme-library__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.bx-theme-library__filters {
+  margin-block: 10px;
+}
+
+.bx-theme-library__list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding-bottom: 24px;
+  scroll-padding-bottom: 24px;
+}
+
+.bx-theme-library__card:last-child {
+  margin-bottom: 4px;
+}
+
+.bx-theme-library__loading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 0;
+}
+
+.bx-theme-library__card {
+  display: grid;
+  grid-template-columns: 136px minmax(0, 1fr);
+  gap: 12px;
+  padding: 10px;
+  background: var(--be-surface);
+  border: 1px solid var(--be-border);
+  border-radius: var(--be-card-radius);
+}
+
+.bx-theme-library__card.is-active {
+  border-color: var(--be-primary);
+  box-shadow: 0 0 0 1px var(--be-primary-soft);
+}
+
+.bx-theme-library__preview {
+  display: grid;
+  grid-template-columns: 28% 1fr;
+  min-height: 86px;
+  overflow: hidden;
+  background: var(--theme-background);
+  border: 1px solid var(--theme-border);
+  border-radius: var(--be-input-radius);
+}
+
+.bx-theme-library__preview-sidebar {
+  background: var(--theme-sidebar);
+}
+
+.bx-theme-library__preview > span {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px;
+  padding: 8px;
+}
+
+.bx-theme-library__preview-navbar {
+  grid-column: 1/-1;
+  height: 10px;
+  background: var(--theme-surface);
+  border: 1px solid var(--theme-border);
+}
+
+.bx-theme-library__preview b {
+  grid-column: 1/-1;
+  width: 58%;
+  height: 6px;
+  background: var(--theme-primary);
+  border-radius: 3px;
+}
+
+.bx-theme-library__preview em {
+  height: 28px;
+  background: var(--theme-surface);
+  border: 1px solid var(--theme-border);
+}
+
+.bx-theme-library__content {
+  min-width: 0;
+}
+
+.bx-theme-library__title-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.bx-theme-library__actions {
+  margin-top: 10px;
+}
+
+@container be-settings (max-width: 820px) {
+  .bx-appearance-page .bx-appearance-controls > .bx-appearance-form-grid > .card + .card {
+    border-left: 0;
+    border-top: 1px solid var(--be-border);
+  }
+  .bx-theme-library__card {
+    grid-template-columns: 1fr;
+  }
+}
+.bx-appearance-preview__contrast-summary {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+  padding: 6px 8px;
+  color: #166534;
+  font-size: var(--be-small-font-size);
+  background: #f0fdf4;
+  border: 1px solid #bbf7d0;
+}
+
+.bx-appearance-preview__contrast-summary.has-warning {
+  color: #92400e;
+  background: #fffbeb;
+  border-color: #fde68a;
+}
+
+.bx-appearance-preview__contrast-summary span {
+  color: inherit;
+  font-size: calc(var(--be-small-font-size) - 1px);
+}
+
+/* Review 2026-08-11: fullscreen preview and visual coverage */
+.bx-appearance-preview__body {
+  min-width: 0;
+}
+
+.bx-appearance-preview__details {
+  min-width: 0;
+}
+
+/* Preview phải dùng shadow của draft, không dùng token runtime đang commit. */
+.bx-appearance-preview__component-card {
+  box-shadow: var(--bx-preview-card-shadow);
+}
+
+.bx-appearance-preview__dropdown,
+.bx-appearance-preview__tooltip {
+  box-shadow: var(--bx-preview-dropdown-shadow);
+}
+
+/* Card gap phải nhìn thấy trực tiếp trong preview. */
+.bx-appearance-preview__component-grid {
+  gap: clamp(4px, var(--bx-preview-card-gap) * 0.55, 24px);
+}
+
+/* Focus Outline là setting thật: tắt thì sample focus không được vẽ ring. */
+.bx-appearance-preview__frame:not(.is-focus-outline) .bx-appearance-preview__component-card input.is-focused {
+  border-color: var(--bx-preview-input-border);
+  box-shadow: none;
+}
+
+.bx-appearance-preview__frame.is-focus-outline .bx-appearance-preview__component-card input.is-focused {
+  border-color: var(--bx-preview-primary);
+  box-shadow: 0 0 0 var(--bx-preview-focus-size) color-mix(in srgb, var(--bx-preview-primary) 18%, transparent);
+}
+
+.bx-appearance-preview__state-samples {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 6px;
+}
+
+.bx-appearance-preview__state-samples > span,
+.bx-appearance-preview__state-samples > a {
+  display: inline-flex;
+  min-height: 26px;
+  align-items: center;
+  padding-inline: 8px;
+  color: var(--bx-preview-text);
+  font-size: 8px;
+  text-decoration: none;
+  border: 1px solid var(--bx-preview-border);
+  border-radius: var(--bx-preview-input-radius);
+}
+
+.bx-appearance-preview__state-samples .hover {
+  background: var(--bx-preview-hover);
+}
+
+.bx-appearance-preview__state-samples .active {
+  background: var(--bx-preview-active);
+}
+
+.bx-appearance-preview__state-samples .disabled {
+  color: var(--bx-preview-muted);
+  background: var(--bx-preview-disabled);
+}
+
+.bx-appearance-preview__state-samples a {
+  color: var(--bx-preview-link);
+  background: var(--bx-preview-surface);
+}
+
+.bx-appearance-preview__scrollbar-sample {
+  position: relative;
+  height: 38px;
+  margin-top: 9px;
+  overflow: hidden;
+  color: var(--bx-preview-muted);
+  font-size: 8px;
+  background: var(--bx-preview-scrollbar-track);
+  border: 1px solid var(--bx-preview-border);
+  border-radius: var(--bx-preview-input-radius);
+}
+
+.bx-appearance-preview__scrollbar-sample > div {
+  padding: 8px;
+}
+
+.bx-appearance-preview__scrollbar-sample > span {
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  width: 6px;
   height: 22px;
-  min-height: 0;
-  gap: 0 !important;
-  align-items: center !important;
-  padding: 0 !important;
-  margin: 0 !important;
+  background: var(--bx-preview-scrollbar-thumb);
+  border-radius: 999px;
 }
-.bx-shortcut-management .bx-shortcut-switch .form-check.form-switch {
+
+.bx-appearance-preview__frame.is-scrollbar-hidden .bx-appearance-preview__scrollbar-sample > span {
+  display: none;
+}
+
+.bx-appearance-preview__frame.is-scrollbar-default .bx-appearance-preview__scrollbar-sample > span {
+  width: 10px;
+}
+
+.bx-appearance-preview__frame.is-scrollbar-thin .bx-appearance-preview__scrollbar-sample > span {
+  width: 5px;
+}
+
+/* Fullscreen phải tách khỏi Settings layout bằng portal; header luôn nhìn thấy và phần
+   nội dung/summary cuộn trong chính overlay, không tràn xuống footer ứng dụng. */
+.bx-appearance-preview.is-fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: 10050;
   display: flex;
+  flex-direction: column;
+  padding: 0;
+  overflow: hidden;
+  background: var(--be-surface);
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.bx-appearance-preview.is-fullscreen .bx-appearance-preview__header {
+  position: relative;
+  z-index: 3;
+  min-height: 50px;
+  flex: 0 0 auto;
   align-items: center;
+  margin: 0;
+  padding: 8px 12px;
+  background: var(--be-surface);
+  border-bottom: 1px solid var(--be-border);
+  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
+}
+
+.bx-appearance-preview.is-fullscreen .bx-appearance-preview__devices button.is-close {
+  color: var(--be-text-primary);
+  font-weight: 700;
+  background: var(--be-surface-secondary);
+  border-color: var(--be-input-border);
+}
+
+.bx-appearance-preview.is-fullscreen .bx-appearance-preview__body {
+  flex: 1 1 auto;
   min-height: 0;
-  height: 22px;
-  margin: 0 !important;
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
+  overflow: auto;
+  padding: 12px;
+  background: #eef2f7;
 }
-.bx-shortcut-management .bx-shortcut-switch .form-check-input {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
+
+.bx-appearance-preview.is-fullscreen .bx-appearance-preview__stage {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: visible;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+}
+
+.bx-appearance-preview.is-fullscreen .bx-appearance-preview__details {
+  width: min(100%, 1280px);
+  margin: 12px auto 0;
+  padding-bottom: 12px;
+}
+
+.bx-appearance-preview.is-fullscreen .bx-appearance-preview__frame {
+  margin-inline: auto;
+}
+
+.bx-appearance-preview.is-fullscreen .bx-appearance-preview__frame.is-desktop {
+  width: 1280px;
+  max-width: none;
+}
+
+.bx-appearance-preview.is-fullscreen .bx-appearance-preview__frame.is-tablet {
+  width: 1024px;
+  max-width: none;
+}
+
+.bx-appearance-preview.is-fullscreen .bx-appearance-preview__frame.is-mobile {
+  width: 390px;
+  min-width: 390px;
+  max-width: none;
+}
+
+.bx-appearance-preview.is-fullscreen.is-fit .bx-appearance-preview__frame {
+  width: min(100%, 1280px);
+  min-width: 0;
+}
+
+.bx-appearance-preview.is-fullscreen.is-fit .bx-appearance-preview__frame.is-tablet {
+  width: min(100%, 1024px);
+}
+
+.bx-appearance-preview.is-fullscreen.is-fit .bx-appearance-preview__frame.is-mobile {
+  width: min(100%, 390px);
+  min-width: 315px;
+}
+
+.bx-appearance-preview.is-fullscreen .bx-appearance-preview__color-grid {
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+}
+
+.bx-appearance-preview.is-fullscreen .bx-appearance-preview__component-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.bx-appearance-preview.is-fullscreen .bx-appearance-preview__metrics {
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+}
+
+/* 1:1 phải dùng token thật ở cả component showcase, không chỉ shell. */
+.bx-appearance-preview.is-fullscreen.is-actual .bx-appearance-preview__frame {
+  font-size: var(--bx-preview-font-size);
+  line-height: var(--bx-preview-line-height);
+  letter-spacing: var(--bx-preview-letter-spacing);
+}
+
+.bx-appearance-preview.is-fullscreen.is-actual .bx-appearance-preview__navbar {
+  height: var(--bx-preview-navbar-height);
+  min-height: var(--bx-preview-navbar-height);
+}
+
+.bx-appearance-preview.is-fullscreen.is-actual .bx-appearance-preview__shell {
+  grid-template-columns: var(--bx-preview-sidebar-width) minmax(0, 1fr);
+  min-height: 560px;
+}
+
+.bx-appearance-preview.is-fullscreen.is-actual .bx-appearance-preview__frame.is-sidebar-collapsed .bx-appearance-preview__shell {
+  grid-template-columns: var(--bx-preview-collapsed-width) minmax(0, 1fr);
+}
+
+.bx-appearance-preview.is-fullscreen.is-actual .bx-appearance-preview__content {
+  padding: var(--bx-preview-content-padding);
+}
+
+.bx-appearance-preview.is-fullscreen.is-actual .bx-appearance-preview__gutter-sample {
+  gap: var(--bx-preview-gutter);
+  margin-bottom: var(--bx-preview-section-gap);
+}
+
+.bx-appearance-preview.is-fullscreen.is-actual .bx-appearance-preview__title-row,
+.bx-appearance-preview.is-fullscreen.is-actual .bx-appearance-preview__toolbar {
+  margin-bottom: var(--bx-preview-section-gap);
+}
+
+.bx-appearance-preview.is-fullscreen.is-actual .bx-appearance-preview__title-row h2 {
+  font-size: var(--bx-preview-page-title-size);
+}
+
+.bx-appearance-preview.is-fullscreen.is-actual .bx-appearance-preview__title-row small {
+  font-size: var(--bx-preview-small-size);
+}
+
+.bx-appearance-preview.is-fullscreen.is-actual .bx-appearance-preview__menu-item {
+  height: var(--bx-preview-menu-height);
+  min-height: var(--bx-preview-menu-height);
+  font-size: var(--bx-preview-menu-font-size);
+}
+
+.bx-appearance-preview.is-fullscreen.is-actual .bx-appearance-preview__menu-item.is-child {
+  padding-left: calc(7px + var(--bx-preview-menu-indent));
+}
+
+.bx-appearance-preview.is-fullscreen.is-actual .bx-appearance-preview__menu-item i {
+  width: var(--bx-preview-menu-icon-size);
+  height: var(--bx-preview-menu-icon-size);
+}
+
+.bx-appearance-preview.is-fullscreen.is-actual .bx-appearance-preview__title-row button,
+.bx-appearance-preview.is-fullscreen.is-actual .bx-appearance-preview__toolbar button {
+  height: var(--bx-preview-button-height);
+  padding-inline: var(--bx-preview-button-padding);
+}
+
+.bx-appearance-preview.is-fullscreen.is-actual .bx-appearance-preview__toolbar {
+  gap: 8px;
+}
+
+.bx-appearance-preview.is-fullscreen.is-actual .bx-appearance-preview__toolbar > div {
+  height: var(--bx-preview-control-height);
+}
+
+.bx-appearance-preview.is-fullscreen.is-actual .bx-appearance-preview__toolbar .is-search {
+  flex: 0 0 230px;
+}
+
+.bx-appearance-preview.is-fullscreen.is-actual .bx-appearance-preview__toolbar .is-filter {
+  flex: 0 0 180px;
+}
+
+.bx-appearance-preview.is-fullscreen.is-actual .bx-appearance-preview__footer {
+  height: var(--bx-preview-footer-height);
+  min-height: var(--bx-preview-footer-height);
+  font-size: var(--bx-preview-small-size);
+}
+
+.bx-appearance-preview.is-fullscreen.is-actual .bx-appearance-preview__grid-row span,
+.bx-appearance-preview.is-fullscreen.is-actual .bx-appearance-preview__pager {
+  font-size: var(--bx-preview-grid-font-size);
+}
+
+.bx-appearance-preview.is-fullscreen.is-actual .bx-appearance-preview__component-grid {
+  gap: var(--bx-preview-card-gap);
+}
+
+.bx-appearance-preview.is-fullscreen.is-actual .bx-appearance-preview__component-card h3 {
+  font-size: var(--bx-preview-section-title-size);
+}
+
+.bx-appearance-preview.is-fullscreen.is-actual .bx-appearance-preview__component-card h4 {
+  font-size: var(--bx-preview-card-title-size);
+}
+
+.bx-appearance-preview.is-fullscreen.is-actual .bx-appearance-preview__component-card p {
+  font-size: var(--bx-preview-font-size);
+}
+
+.bx-appearance-preview.is-fullscreen.is-actual .bx-appearance-preview__component-card label {
+  font-size: var(--bx-preview-label-size);
+}
+
+.bx-appearance-preview.is-fullscreen.is-actual .bx-appearance-preview__component-card input {
+  height: var(--bx-preview-control-height);
+  font-size: var(--bx-preview-font-size);
+}
+
+.bx-appearance-preview.is-fullscreen.is-actual .bx-appearance-preview__buttons button {
+  height: var(--bx-preview-button-height);
+  padding-inline: var(--bx-preview-button-padding);
+  font-size: var(--bx-preview-font-size);
+}
+
+.bx-appearance-preview.is-fullscreen.is-actual .bx-appearance-preview__tabs button {
+  height: var(--bx-preview-tab-height);
+  font-size: var(--bx-preview-font-size);
+}
+
+@media (max-width: 900px) {
+  .bx-appearance-preview.is-fullscreen .bx-appearance-preview__header {
+    align-items: flex-start;
+  }
+  .bx-appearance-preview.is-fullscreen .bx-appearance-preview__color-grid,
+  .bx-appearance-preview.is-fullscreen .bx-appearance-preview__component-grid,
+  .bx-appearance-preview.is-fullscreen .bx-appearance-preview__metrics {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }