:root {
  --qj-primary: #4f46e5;
  --qj-primary-2: #0ea5e9;
  --qj-accent: #14b8a6;
  --qj-ink: #0f172a;
  --qj-muted: #64748b;
  --qj-line: #e2e8f0;
  --qj-canvas: #f4f7fb;
  --qj-surface: rgba(255, 255, 255, .96);
  --qj-surface-solid: #ffffff;
  --qj-shadow: 0 10px 30px rgba(15, 23, 42, .07);
  --qj-shadow-hover: 0 16px 40px rgba(15, 23, 42, .12);
  --qj-radius: 14px;
}

body.qiji-dark {
  --qj-ink: #e5eefb;
  --qj-muted: #94a3b8;
  --qj-line: #263348;
  --qj-canvas: #08111f;
  --qj-surface: rgba(15, 23, 42, .96);
  --qj-surface-solid: #0f172a;
  --qj-shadow: 0 12px 34px rgba(0, 0, 0, .28);
  --qj-shadow-hover: 0 18px 46px rgba(0, 0, 0, .38);
}

html, body, #app { min-height: 100%; }

body {
  color: var(--qj-ink);
  background:
    radial-gradient(circle at 10% -10%, rgba(79, 70, 229, .08), transparent 30rem),
    radial-gradient(circle at 100% 0%, rgba(14, 165, 233, .07), transparent 28rem),
    var(--qj-canvas) !important;
  font-family: "Microsoft YaHei", "PingFang SC", Inter, -apple-system, BlinkMacSystemFont, sans-serif !important;
  text-rendering: optimizeLegibility;
}

* { scrollbar-width: thin; scrollbar-color: #94a3b8 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }

/* Top navigation */
#main-menu {
  min-height: 62px !important;
  padding: 0 24px !important;
  color: #dbeafe !important;
  background: linear-gradient(105deg, #071426 0%, #111b34 58%, #172554 100%) !important;
  border-bottom: 1px solid rgba(148, 163, 184, .18) !important;
  box-shadow: 0 12px 30px rgba(2, 6, 23, .2) !important;
  position: relative;
  z-index: 100;
}

#main-menu::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(90deg, #2dd4bf, #38bdf8 42%, #818cf8 72%, transparent);
  opacity: .9;
}

#main-menu > .ant-row { min-height: 62px; align-items: center; }
#main-menu .ant-image { height: 40px !important; display: flex; align-items: center; }
#main-menu .ant-image-img { width: 218px !important; height: 40px !important; object-fit: contain; }
#main-menu .ant-image-img { content: url('/qiji-ui/qiji-brand.svg') !important; }
#main-menu .ant-menu,
#main-menu .ant-menu-light,
#main-menu .ant-menu-item,
#main-menu .ant-menu-submenu,
#main-menu .ant-menu-submenu-title { background: transparent !important; color: #cbd5e1 !important; }
#main-menu .ant-menu-item,
#main-menu .ant-menu-submenu-title { border-radius: 9px !important; margin-inline: 3px !important; }
#main-menu .ant-menu-title-content,
#main-menu .ant-menu-title-content a,
#main-menu .anticon { color: inherit !important; font-weight: 600; }
#main-menu .ant-menu-item:hover,
#main-menu .ant-menu-submenu-title:hover,
#main-menu .ant-menu-item-selected {
  color: #ffffff !important;
  background: rgba(255, 255, 255, .10) !important;
}

/* Dropdowns, buttons and form controls */
.ant-dropdown-menu,
.ant-menu-submenu-popup > .ant-menu,
.ant-popover-inner,
.ant-modal-content {
  border: 1px solid var(--qj-line) !important;
  border-radius: 14px !important;
  background: var(--qj-surface-solid) !important;
  box-shadow: var(--qj-shadow-hover) !important;
}

.ant-btn { border-radius: 9px !important; font-weight: 600; box-shadow: none !important; }
.ant-btn-primary {
  border: 0 !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--qj-primary), var(--qj-primary-2)) !important;
  box-shadow: 0 7px 18px rgba(79, 70, 229, .20) !important;
}
.ant-btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ant-input, .ant-input-affix-wrapper, .ant-select-selector, .ant-picker {
  border-radius: 9px !important;
  border-color: var(--qj-line) !important;
  background: var(--qj-surface-solid) !important;
}
.ant-input:hover, .ant-input-affix-wrapper:hover, .ant-select-selector:hover, .ant-picker:hover { border-color: #818cf8 !important; }

/* Main canvas and secondary navigation */
main.ant-layout-content { background: transparent !important; }
main.ant-layout-content > div { max-width: 100%; }
main .ant-row.menu {
  min-height: 58px;
  padding-inline: 22px !important;
  background: var(--qj-surface) !important;
  border-bottom: 1px solid var(--qj-line) !important;
  box-shadow: 0 5px 20px rgba(15, 23, 42, .035);
  backdrop-filter: blur(14px);
}
main .ant-row.menu .header { font-size: 18px !important; font-weight: 750 !important; letter-spacing: -.02em; color: var(--qj-ink) !important; }

/* Cards and lists */
.ant-card,
[data-test="card-container"],
.dashboard-card,
.chart-card {
  border: 1px solid var(--qj-line) !important;
  border-radius: var(--qj-radius) !important;
  background: var(--qj-surface-solid) !important;
  box-shadow: var(--qj-shadow) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ant-card:hover,
.dashboard-card:hover,
.chart-card:hover { transform: translateY(-2px); border-color: rgba(99, 102, 241, .38) !important; box-shadow: var(--qj-shadow-hover) !important; }
.ant-card-head { border-color: var(--qj-line) !important; }
.ant-card-head-title { color: var(--qj-ink) !important; font-weight: 700 !important; }

/* Tables */
.ant-table-wrapper,
.table-container {
  border: 1px solid var(--qj-line);
  border-radius: var(--qj-radius);
  overflow: hidden;
  background: var(--qj-surface-solid);
  box-shadow: var(--qj-shadow);
}
.ant-table, .ant-table-container { background: var(--qj-surface-solid) !important; }
.ant-table-thead > tr > th {
  color: var(--qj-ink) !important;
  background: color-mix(in srgb, var(--qj-canvas) 82%, #e0e7ff 18%) !important;
  border-bottom: 1px solid var(--qj-line) !important;
  font-size: 12px;
  font-weight: 700 !important;
}
.ant-table-tbody > tr > td { border-bottom-color: var(--qj-line) !important; }
.ant-table-tbody > tr:hover > td { background: rgba(99, 102, 241, .055) !important; }

/* Dashboard shell and chart tiles */
body[data-qiji-page="dashboard"] .dashboard-content,
body[data-qiji-page="dashboard"] .dashboard-grid { background: transparent !important; }
.dashboard-component-chart-holder,
.dashboard-component-tabs,
.dashboard-component-row > div,
.chart-container {
  border-radius: 13px !important;
}
.dashboard-component-chart-holder {
  border: 1px solid var(--qj-line) !important;
  background: var(--qj-surface-solid) !important;
  box-shadow: 0 7px 24px rgba(15, 23, 42, .055) !important;
  overflow: hidden;
}
.dashboard-component-header,
.dashboard-header { border-color: var(--qj-line) !important; }
.dashboard-component-chart-holder:hover { box-shadow: var(--qj-shadow-hover) !important; }
.chart-header .header-title,
.dashboard-component-header .header-title { color: var(--qj-ink) !important; font-weight: 700 !important; }

/* Tabs, tags and progress affordances */
.ant-tabs-tab { border-radius: 9px 9px 0 0 !important; font-weight: 600; }
.ant-tabs-ink-bar { height: 3px !important; border-radius: 99px; background: linear-gradient(90deg, var(--qj-primary), var(--qj-primary-2)) !important; }
.ant-tag { border-radius: 999px !important; padding-inline: 9px !important; }
.ant-pagination-item, .ant-pagination-prev, .ant-pagination-next { border-radius: 8px !important; }
.ant-pagination-item-active { border-color: #6366f1 !important; background: rgba(99, 102, 241, .08) !important; }

/* Polished loading skeletons */
.ant-skeleton-content .ant-skeleton-title,
.ant-skeleton-content .ant-skeleton-paragraph > li,
.ant-skeleton-avatar {
  background: linear-gradient(90deg, rgba(148,163,184,.12), rgba(148,163,184,.28), rgba(148,163,184,.12)) !important;
  background-size: 200% 100% !important;
  animation: qj-shimmer 1.35s ease-in-out infinite !important;
}
@keyframes qj-shimmer { to { background-position-x: -200%; } }

@media (max-width: 900px) {
  #main-menu { padding-inline: 12px !important; }
  #main-menu .ant-image-img { width: 150px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Qiji UI refinement: Apple restraint, Tesla shell, Tableau clarity */
:root {
  --qj-primary: #2563eb;
  --qj-primary-2: #0a84ff;
  --qj-accent: #14b8a6;
  --qj-ink: #1d1d1f;
  --qj-muted: #6e6e73;
  --qj-line: #e5e7eb;
  --qj-canvas: #f5f5f7;
  --qj-shadow: 0 1px 2px rgba(15, 23, 42, .045);
  --qj-shadow-hover: 0 8px 24px rgba(15, 23, 42, .08);
  --qj-radius: 12px;
}

/* Responsive navigation keeps utilities visible at 1280px. */
#main-menu {
  min-height: 56px !important;
  height: 56px !important;
  padding-inline: 20px !important;
}
#main-menu > .ant-row {
  width: 100% !important;
  min-height: 56px !important;
  height: 56px !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
}
#main-menu > .ant-row > .ant-col:first-child {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 56px !important;
}
#main-menu > .ant-row > .ant-col:last-child {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  height: 56px !important;
  margin-left: auto !important;
}
#main-menu span[aria-describedby="brand-tooltip"] {
  flex: 0 0 184px !important;
  width: 184px !important;
  margin-right: 18px !important;
}
#main-menu .ant-image,
#main-menu .ant-image-img {
  width: 184px !important;
  height: 40px !important;
}
#main-menu .ant-image-img { content: url('/qiji-ui/qiji-brand-compact.svg') !important; }
#main-menu .main-nav { flex: 0 1 auto !important; min-width: 338px !important; }
#main-menu .ant-menu-item,
#main-menu .ant-menu-submenu-title { height: 36px !important; line-height: 36px !important; }
#main-menu > .ant-row > .ant-col:last-child .ant-menu { display: flex !important; justify-content: flex-end !important; }

/* Compact dashboard filter rail without sacrificing control readability. */
body[data-qiji-page="dashboard"] div[width="260"] {
  width: 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
}
body[data-qiji-page="dashboard"] div[width="260"] .ant-form-item { margin-bottom: 4px !important; }
body[data-qiji-page="dashboard"] div[width="260"] div:has(> div > form) { gap: 0 !important; }
body[data-qiji-page="dashboard"] div[width="260"] .ant-form-item-label { padding-bottom: 2px !important; }
body[data-qiji-page="dashboard"] div[width="260"] h4 {
  margin: 0 0 2px !important;
  font-size: 12px !important;
  line-height: 18px !important;
  font-weight: 600 !important;
}
body[data-qiji-page="dashboard"] div[width="260"] .ant-select-selector { min-height: 32px !important; }

/* Analytic surfaces use borders and alignment, not floating-card effects. */
body:not([data-qiji-page="welcome"]) .ant-card:hover,
body:not([data-qiji-page="welcome"]) .dashboard-card:hover,
body:not([data-qiji-page="welcome"]) .chart-card:hover { transform: none !important; }
.dashboard-component-chart-holder {
  border-radius: 12px !important;
  border-color: var(--qj-line) !important;
  box-shadow: var(--qj-shadow) !important;
}
.dashboard-component-chart-holder:hover { box-shadow: 0 2px 8px rgba(15, 23, 42, .06) !important; }
.dashboard-component-chart-holder .chart-slice > div:first-child {
  min-height: 44px !important;
  padding: 10px 14px 6px !important;
  align-items: center !important;
}
.dashboard-component-chart-holder .header-title {
  flex: 1 1 auto !important;
  justify-content: flex-start !important;
  text-align: left !important;
  min-width: 0 !important;
}
.dashboard-component-chart-holder .header-title a,
.dashboard-component-chart-holder .editable-title {
  display: block !important;
  text-align: left !important;
  color: var(--qj-ink) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 22px !important;
}
.dashboard-component-chart-holder .header-controls {
  opacity: .42;
  transition: opacity .16s ease;
}
.dashboard-component-chart-holder:hover .header-controls,
.dashboard-component-chart-holder:focus-within .header-controls { opacity: 1; }

/* Tableau-style table hierarchy. */
.dashboard-component-chart-holder .superset-chart-table table th {
  background: #f3f4f6 !important;
  color: #344054 !important;
  border-color: #e5e7eb !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 16px !important;
  font-variant-numeric: tabular-nums;
  text-align: center !important;
  vertical-align: middle !important;
}
.dashboard-component-chart-holder .superset-chart-table table td {
  border-color: #eceef2 !important;
  font-size: 12px !important;
  line-height: 18px !important;
  font-variant-numeric: tabular-nums;
  text-align: center !important;
  vertical-align: middle !important;
}
.dashboard-component-chart-holder .superset-chart-table table th > div {
  justify-content: center !important;
  text-align: center !important;
}
.dashboard-component-chart-holder .superset-chart-table tbody tr:hover td {
  box-shadow: inset 0 0 0 999px rgba(37, 99, 235, .045);
}

/* Cleaner tab strip and page hierarchy. */
body[data-qiji-page="dashboard"] [role="tablist"] { gap: 4px; }
body[data-qiji-page="dashboard"] [role="tab"] {
  min-height: 36px;
  padding-inline: 14px !important;
  color: var(--qj-muted) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
body[data-qiji-page="dashboard"] [role="tab"][aria-selected="true"] {
  color: var(--qj-primary) !important;
  font-weight: 650 !important;
}

/* Compact viewer header while retaining draft status and last-modified trust signal. */
body[data-qiji-page="dashboard"] .dashboard-header-container {
  height: 49px !important;
  min-height: 49px !important;
}
body[data-qiji-page="dashboard"] .dashboard-header-container .header-with-actions {
  height: 48px !important;
  min-height: 48px !important;
  padding-inline: 14px !important;
}
body[data-qiji-page="dashboard"] .dashboard-header-container .title-panel {
  margin-right: 24px !important;
}
body[data-qiji-page="dashboard"] .dashboard-header-container .title-panel div:has(> .anticon-user.metadata-icon) {
  display: none !important;
}
body[data-qiji-page="dashboard"] .dashboard-header-container .title-panel div:has(> div > .metadata-text) {
  padding: 4px 8px !important;
}

/* Stable CSS-only localization for native table controls; no DOM scanning. */
.dt-select-page-size {
  align-items: center !important;
  display: inline-flex !important;
  font-size: 0 !important;
  gap: 6px !important;
}
.dt-select-page-size::before {
  content: "每页显示";
  font-size: 12px;
}
.dt-select-page-size::after {
  content: "条";
  font-size: 12px;
}
.dt-select-page-size .ant-select {
  font-size: 12px !important;
}
.search-by-label {
  font-size: 0 !important;
}
.search-by-label::after {
  content: "按字段筛选：";
  font-size: 12px;
}

/* Home is an entry surface, so it may retain a restrained hover lift. */
body[data-qiji-page="welcome"] .ant-card { min-height: 96px; }

/* Dark mode refinements, including analytic tables. */
body.qiji-dark .dashboard-component-chart-holder .superset-chart-table table th {
  background: #172033 !important;
  color: #d9e3f0 !important;
  border-color: #263348 !important;
}
body.qiji-dark .dashboard-component-chart-holder .superset-chart-table table td { border-color: #263348 !important; }

@media (max-width: 1400px) {
  #main-menu { padding-inline: 14px !important; }
  #main-menu span[aria-describedby="brand-tooltip"] { margin-right: 10px !important; }
  #main-menu .ant-menu-item,
  #main-menu .ant-menu-submenu-title { padding-inline: 10px !important; }
  body[data-qiji-page="dashboard"] div[width="260"] {
    width: 232px !important;
    min-width: 232px !important;
    max-width: 232px !important;
  }
}

@media (max-width: 1120px) {
  #main-menu [data-menu-id$="theme-sub-menu"],
  #main-menu [data-menu-id$="language-submenu"] { display: none !important; }
  body[data-qiji-page="dashboard"] div[width="260"] {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
  }
}

/* Reporting system refinements */
body[data-qiji-page="dashboard"] div:has(> .filter-apply-button) {
  border-top: 1px solid var(--qj-line) !important;
  background: color-mix(in srgb, var(--qj-surface-solid) 92%, transparent) !important;
  box-shadow: 0 -8px 24px rgba(15, 23, 42, .055) !important;
  backdrop-filter: blur(14px);
}
body[data-qiji-page="dashboard"] .filter-apply-button {
  min-width: 96px !important;
  min-height: 36px !important;
}
body[data-qiji-page="dashboard"] div[width="260"] form { padding-bottom: 0 !important; }

/* Consistent keyboard focus and touch targets. */
.ant-btn:focus-visible,
.ant-select-focused .ant-select-selector,
.ant-input:focus-visible,
a:focus-visible,
[role="tab"]:focus-visible {
  outline: 2px solid rgba(37, 99, 235, .78) !important;
  outline-offset: 2px !important;
}
#main-menu .ant-menu-submenu-title,
#main-menu .ant-menu-item { min-width: 40px !important; }

/* Keep chart chrome quiet while preserving discoverability. */
.dashboard-component-chart-holder .filter-counts,
.dashboard-component-chart-holder .header-controls .ant-btn {
  color: #64748b !important;
}
.dashboard-component-chart-holder .ant-badge-count {
  background: #2563eb !important;
  box-shadow: 0 0 0 2px var(--qj-surface-solid) !important;
}
.dashboard-component-chart-holder canvas { border-radius: 0 0 10px 10px; }

/* Unified loading, empty and error states. */
.ant-empty,
[data-test="no-results"],
.chart-container .alert,
.dashboard-component-chart-holder .error-container {
  color: var(--qj-muted) !important;
  border-radius: 12px !important;
}
.dashboard-component-chart-holder .alert-danger,
.dashboard-component-chart-holder .ant-alert-error {
  color: #b42318 !important;
  border: 1px solid #fecdca !important;
  background: #fef3f2 !important;
}
.ant-spin-dot-item { background-color: var(--qj-primary) !important; }

/* Dark analytic surfaces remain coherent with the shell. */
body.qiji-dark .dashboard-component-chart-holder,
body.qiji-dark .chart-container,
body.qiji-dark .ant-table,
body.qiji-dark .ant-table-container {
  background: #0f172a !important;
}
body.qiji-dark .dashboard-component-chart-holder .header-title a { color: #e5eefb !important; }
body.qiji-dark .dashboard-component-chart-holder .ant-badge-count {
  background: #818cf8 !important;
  box-shadow: 0 0 0 2px #0f172a !important;
}
body.qiji-dark .dashboard-component-chart-holder .alert-danger,
body.qiji-dark .dashboard-component-chart-holder .ant-alert-error {
  color: #fecaca !important;
  border-color: #7f1d1d !important;
  background: rgba(127, 29, 29, .24) !important;
}

@media (max-width: 1120px) {
  body[data-qiji-page="dashboard"] .dashboard-component-chart-holder .header-title a {
    font-size: 14px !important;
  }
  body[data-qiji-page="dashboard"] [role="tab"] {
    padding-inline: 10px !important;
    font-size: 13px !important;
  }
}

/* Data overview pilot: one coherent chart-card language, scoped to its 8 charts. */
body[data-qiji-page="dashboard"] :is(
  .dashboard-chart-id-89,
  .dashboard-chart-id-90,
  .dashboard-chart-id-105
) { --qj-chart-accent: #0a84ff; }

body[data-qiji-page="dashboard"] :is(
  .dashboard-chart-id-97,
  .dashboard-chart-id-106,
  .dashboard-chart-id-96
) { --qj-chart-accent: #14b8a6; }

body[data-qiji-page="dashboard"] :is(
  .dashboard-chart-id-57,
  .dashboard-chart-id-9
) { --qj-chart-accent: #6366f1; }

body[data-qiji-page="dashboard"] :is(
  .dashboard-chart-id-89,
  .dashboard-chart-id-97,
  .dashboard-chart-id-90,
  .dashboard-chart-id-106,
  .dashboard-chart-id-105,
  .dashboard-chart-id-96,
  .dashboard-chart-id-57,
  .dashboard-chart-id-9
) {
  border-color: #dde2ea !important;
  border-radius: 11px !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .045) !important;
  transition: border-color .16s ease, box-shadow .16s ease !important;
}

body[data-qiji-page="dashboard"] :is(
  .dashboard-chart-id-89,
  .dashboard-chart-id-97,
  .dashboard-chart-id-90,
  .dashboard-chart-id-106,
  .dashboard-chart-id-105,
  .dashboard-chart-id-96,
  .dashboard-chart-id-57,
  .dashboard-chart-id-9
):hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .065) !important;
}

body[data-qiji-page="dashboard"] :is(
  .dashboard-chart-id-89,
  .dashboard-chart-id-97,
  .dashboard-chart-id-90,
  .dashboard-chart-id-106,
  .dashboard-chart-id-105,
  .dashboard-chart-id-96,
  .dashboard-chart-id-57,
  .dashboard-chart-id-9
) .chart-slice > div:first-child {
  min-height: 42px !important;
  padding: 8px 10px 7px 12px !important;
  border-bottom: 1px solid #edf0f4 !important;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--qj-chart-accent) 6%, var(--qj-surface-solid)),
      var(--qj-surface-solid) 34%
    ) !important;
}

body[data-qiji-page="dashboard"] :is(
  .dashboard-chart-id-89,
  .dashboard-chart-id-97,
  .dashboard-chart-id-90,
  .dashboard-chart-id-106,
  .dashboard-chart-id-105,
  .dashboard-chart-id-96,
  .dashboard-chart-id-57,
  .dashboard-chart-id-9
) .header-title {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

body[data-qiji-page="dashboard"] :is(
  .dashboard-chart-id-89,
  .dashboard-chart-id-97,
  .dashboard-chart-id-90,
  .dashboard-chart-id-106,
  .dashboard-chart-id-105,
  .dashboard-chart-id-96,
  .dashboard-chart-id-57,
  .dashboard-chart-id-9
) .header-title::before {
  content: "";
  width: 3px;
  height: 15px;
  flex: 0 0 3px;
  border-radius: 999px;
  background: var(--qj-chart-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--qj-chart-accent) 10%, transparent);
}

body[data-qiji-page="dashboard"] :is(
  .dashboard-chart-id-89,
  .dashboard-chart-id-97,
  .dashboard-chart-id-90,
  .dashboard-chart-id-106,
  .dashboard-chart-id-105,
  .dashboard-chart-id-96,
  .dashboard-chart-id-57,
  .dashboard-chart-id-9
) .header-title a {
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 20px !important;
  letter-spacing: -.01em !important;
}

body[data-qiji-page="dashboard"] :is(
  .dashboard-chart-id-89,
  .dashboard-chart-id-97,
  .dashboard-chart-id-90,
  .dashboard-chart-id-106,
  .dashboard-chart-id-105,
  .dashboard-chart-id-96,
  .dashboard-chart-id-57,
  .dashboard-chart-id-9
) .header-controls {
  opacity: .28;
  gap: 2px;
}

body[data-qiji-page="dashboard"] :is(
  .dashboard-chart-id-89,
  .dashboard-chart-id-97,
  .dashboard-chart-id-90,
  .dashboard-chart-id-106,
  .dashboard-chart-id-105,
  .dashboard-chart-id-96,
  .dashboard-chart-id-57,
  .dashboard-chart-id-9
) .header-controls :is(.filter-counts, .ant-btn) {
  min-width: 28px !important;
  min-height: 28px !important;
  border-radius: 8px !important;
  transition: background-color .16s ease, color .16s ease !important;
}

body[data-qiji-page="dashboard"] :is(
  .dashboard-chart-id-89,
  .dashboard-chart-id-97,
  .dashboard-chart-id-90,
  .dashboard-chart-id-106,
  .dashboard-chart-id-105,
  .dashboard-chart-id-96,
  .dashboard-chart-id-57,
  .dashboard-chart-id-9
) .header-controls :is(.filter-counts, .ant-btn):hover {
  color: var(--qj-chart-accent) !important;
  background: color-mix(in srgb, var(--qj-chart-accent) 9%, transparent) !important;
}

body.qiji-dark[data-qiji-page="dashboard"] :is(
  .dashboard-chart-id-89,
  .dashboard-chart-id-97,
  .dashboard-chart-id-90,
  .dashboard-chart-id-106,
  .dashboard-chart-id-105,
  .dashboard-chart-id-96,
  .dashboard-chart-id-57,
  .dashboard-chart-id-9
) {
  border-color: #2a3649 !important;
}

body.qiji-dark[data-qiji-page="dashboard"] :is(
  .dashboard-chart-id-89,
  .dashboard-chart-id-97,
  .dashboard-chart-id-90,
  .dashboard-chart-id-106,
  .dashboard-chart-id-105,
  .dashboard-chart-id-96,
  .dashboard-chart-id-57,
  .dashboard-chart-id-9
) .chart-slice > div:first-child {
  border-bottom-color: #263348 !important;
}