:root,
body {
  --lugyy-page-bg: #fbfaf7;
  --lugyy-page-bg-soft: #f7f1e7;
  --lugyy-panel-bg: #fffdf8;
  --lugyy-panel-bg-muted: #fffaf0;
  --lugyy-border: rgba(31, 24, 15, 0.1);
  --semi-color-bg-0: var(--lugyy-panel-bg);
  --semi-color-bg-1: var(--lugyy-page-bg);
  --semi-color-bg-2: var(--lugyy-page-bg-soft);
  --semi-color-bg-3: #f2eadc;
  --semi-color-bg-4: #eee2d0;
  --semi-color-nav-bg: rgba(251, 250, 247, 0.96);
  --semi-color-border: var(--lugyy-border);
  --semi-color-fill-0: rgba(23, 23, 23, 0.045);
  --semi-color-fill-1: rgba(23, 23, 23, 0.075);
  --semi-color-fill-2: rgba(23, 23, 23, 0.105);
}

html,
body,
#root,
.app-layout,
.semi-layout,
.semi-layout-content,
main.mobile-scroll-content {
  background-color: var(--lugyy-page-bg) !important;
}

.semi-layout-sider,
.semi-layout-sider-children,
.semi-navigation,
.semi-navigation-inner,
.semi-navigation-list-wrapper {
  background-color: rgba(251, 250, 247, 0.96) !important;
}

.semi-navigation,
.semi-navigation-footer,
.semi-layout-sider {
  border-color: var(--lugyy-border) !important;
}

.semi-card,
.semi-card-body,
.semi-card-header,
.semi-table,
.semi-table-container,
.semi-table-body,
.semi-table-header,
.semi-table-thead,
.semi-table-tbody,
.semi-table-tbody > .semi-table-row > .semi-table-row-cell,
.semi-table-thead > .semi-table-row > .semi-table-row-head,
.semi-tabs-content,
.semi-tabs-pane,
.semi-form,
.semi-list,
.semi-descriptions,
.semi-spin-children,
.semi-collapse,
.semi-upload,
.semi-banner,
.semi-input-wrapper,
.semi-textarea-wrapper,
.semi-select,
.semi-select-selection,
.semi-modal-content,
.semi-drawer-content,
.semi-dropdown,
.semi-popover {
  background-color: var(--lugyy-panel-bg) !important;
}

.semi-card,
.semi-card-bordered,
.semi-table,
.semi-table-container,
.semi-input-wrapper,
.semi-textarea-wrapper,
.semi-select,
.semi-select-selection,
.semi-modal-content,
.semi-drawer-content {
  border-color: var(--lugyy-border) !important;
}

[class~="bg-white"] {
  background-color: var(--lugyy-panel-bg) !important;
}

[class~="bg-white/80"] {
  background-color: rgba(255, 253, 248, 0.86) !important;
}

[class~="bg-gray-50"],
[class~="bg-gray-100"] {
  background-color: var(--lugyy-page-bg) !important;
}

[class~="bg-slate-50"] {
  background-color: var(--lugyy-page-bg-soft) !important;
}

.semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell,
.semi-navigation-item:hover {
  background-color: rgba(23, 23, 23, 0.045) !important;
}

.dark,
html.dark,
body.dark,
html[theme-mode="dark"],
body[theme-mode="dark"] {
  --lugyy-page-bg: #11110f;
  --lugyy-page-bg-soft: #171612;
  --lugyy-panel-bg: #1c1a16;
  --lugyy-panel-bg-muted: #201e19;
  --lugyy-border: rgba(255, 255, 255, 0.08);
  --semi-color-bg-0: var(--lugyy-panel-bg);
  --semi-color-bg-1: var(--lugyy-page-bg);
  --semi-color-bg-2: var(--lugyy-page-bg-soft);
  --semi-color-bg-3: #24221d;
  --semi-color-bg-4: #2a2822;
  --semi-color-nav-bg: rgba(17, 17, 15, 0.96);
  --semi-color-border: var(--lugyy-border);
}

.dark html,
.dark body,
.dark #root,
.dark .app-layout,
.dark .semi-layout,
.dark .semi-layout-content,
.dark main.mobile-scroll-content,
html.dark,
html.dark body,
html.dark #root,
html.dark .app-layout,
html.dark .semi-layout,
html.dark .semi-layout-content,
html.dark main.mobile-scroll-content {
  background-color: var(--lugyy-page-bg) !important;
}

.dark .semi-layout-sider,
.dark .semi-layout-sider-children,
.dark .semi-navigation,
.dark .semi-navigation-inner,
.dark .semi-navigation-list-wrapper,
html.dark .semi-layout-sider,
html.dark .semi-layout-sider-children,
html.dark .semi-navigation,
html.dark .semi-navigation-inner,
html.dark .semi-navigation-list-wrapper {
  background-color: rgba(17, 17, 15, 0.96) !important;
}