:root,
html.dark {
  --el-color-primary: #168cff;
  --el-color-primary-light-3: #45a4ff;
  --el-color-primary-light-5: #73bbff;
  --el-color-primary-light-7: #173c5e;
  --el-color-primary-light-8: #13334d;
  --el-color-primary-light-9: #10283b;
  --el-color-primary-dark-2: #0877e8;
  --el-color-success: #20d6a0;
  --el-color-warning: #f2a23a;
  --el-color-danger: #ff5f6d;
  --el-color-error: #ff5f6d;
  --el-bg-color: #0d1925;
  --el-bg-color-page: #07111b;
  --el-bg-color-overlay: #142433;
  --el-fill-color: #172838;
  --el-fill-color-light: #132331;
  --el-fill-color-lighter: #172838;
  --el-fill-color-extra-light: #1b2e3f;
  --el-fill-color-dark: #0a1520;
  --el-fill-color-darker: #07111b;
  --el-text-color-primary: #f4f8fd;
  --el-text-color-regular: #c8d8e8;
  --el-text-color-secondary: #91a7bf;
  --el-text-color-placeholder: #667f98;
  --el-text-color-disabled: #526b82;
  --el-border-color: rgba(151, 190, 225, 0.24);
  --el-border-color-light: rgba(151, 190, 225, 0.18);
  --el-border-color-lighter: rgba(151, 190, 225, 0.13);
  --el-border-color-extra-light: rgba(151, 190, 225, 0.09);
  --el-border-color-dark: rgba(151, 190, 225, 0.3);
  --el-menu-bg-color: #0b1722;
  --el-menu-text-color: #a9bdd1;
  --el-menu-hover-bg-color: #142838;
  --el-menu-hover-text-color: #f5f9fd;
  --el-menu-active-color: #59afff;
  --el-menu-active-bg-color: rgba(22, 140, 255, 0.14);
  --el-mask-color: rgba(1, 7, 12, 0.72);
  color-scheme: dark;
}

html,
body,
#app {
  background: #07111b !important;
  color: #f4f8fd !important;
}

body {
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

::selection {
  background: rgba(22, 140, 255, 0.4);
  color: #fff;
}

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-thumb {
  background: #38516a;
  border-radius: 8px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #66b8ff !important;
  outline-offset: 2px;
}

.el-container,
.el-main,
.main-box,
.layout,
.home,
.home-container {
  background: #07111b !important;
  color: #f4f8fd !important;
}

.el-container .el-aside,
.aside-box,
.aside-split {
  background: #0b1722 !important;
  border-color: rgba(151, 190, 225, 0.18) !important;
}

.logo,
.logo-text {
  color: #f4f8fd !important;
}

.logo-img,
.logo img {
  object-fit: contain !important;
  border-radius: 8px;
}

img.logo-img,
.logo img {
  content: url("/brand-logo.png") !important;
}

.login-card .el-input__wrapper,
.login-form .el-input__wrapper {
  outline: 0 !important;
}

.login-card .el-input__prefix,
.login-card .el-input__prefix-inner,
.login-card .el-input__suffix,
.login-card .el-input__suffix-inner,
.login-card .el-input-group__prepend,
.login-card .el-input-group__append,
.login-form .el-input__prefix,
.login-form .el-input__prefix-inner,
.login-form .el-input__suffix,
.login-form .el-input__suffix-inner,
.login-form .el-input-group__prepend,
.login-form .el-input-group__append {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.el-menu {
  background: transparent !important;
  border: 0 !important;
}

.el-menu-item,
.el-sub-menu__title {
  margin: 4px 10px;
  width: calc(100% - 20px) !important;
  border-radius: 12px;
  color: #a9bdd1 !important;
}

.el-menu-item:hover,
.el-sub-menu__title:hover {
  background: #142838 !important;
  color: #f4f8fd !important;
}

.el-container .aside-split .el-scrollbar .split-list .split-item.mb-6px:hover {
  background: linear-gradient(135deg, #0b6fd8, #168cff) !important;
  color: #ffffff !important;
  border-color: #168cff !important;
  box-shadow: 0 6px 18px rgba(22, 140, 255, 0.24) !important;
}

.el-container .aside-split .el-scrollbar .split-list .split-item.mb-6px:hover .title,
.el-container .aside-split .el-scrollbar .split-list .split-item.mb-6px:hover .el-icon,
.el-container .aside-split .el-scrollbar .split-list .split-item.mb-6px:hover .i-icon,
.el-container .aside-split .el-scrollbar .split-list .split-item.mb-6px:hover svg {
  color: #ffffff !important;
}

.el-menu-item.is-active {
  background: linear-gradient(135deg, rgba(11, 111, 216, 0.86), rgba(22, 140, 255, 0.86)) !important;
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(0, 103, 218, 0.24);
}

.split-item.split-active,
.bd-tab-item.chrome-tab_active {
  background: linear-gradient(135deg, #0b6fd8, #168cff) !important;
  color: #ffffff !important;
  border-color: #168cff !important;
  box-shadow: 0 6px 18px rgba(22, 140, 255, 0.24) !important;
}

.split-item.split-active .title,
.split-item.split-active .i-icon,
.split-item.split-active svg,
.el-container .aside-split .el-scrollbar .split-list .split-item.split-active .title,
.el-container .aside-split .el-scrollbar .split-list .split-item.split-active .el-icon,
.bd-tab-item.chrome-tab_active .text,
.bd-tab-item.chrome-tab_active .close,
.bd-tab-item.chrome-tab_active .i-icon,
.bd-tab-item.chrome-tab_active svg {
  color: #ffffff !important;
}

.bd-tab-item.chrome-tab_active::before,
.bd-tab-item.chrome-tab_active::after {
  background: #168cff !important;
  border-color: #168cff !important;
}

.right-icon {
  background: linear-gradient(135deg, #0b6fd8, #168cff) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(22, 140, 255, 0.24) !important;
}

.right-icon .i-icon,
.right-icon svg {
  color: #ffffff !important;
}

.index {
  background: #0b6fd8 !important;
  color: #ffffff !important;
}

.qj-identity-hidden-column {
  display: none !important;
}

.el-menu-item.is-active::before {
  display: none !important;
}

.el-header,
.el-container .el-header {
  background: #0d1b28 !important;
  border-color: rgba(151, 190, 225, 0.18) !important;
  color: #f4f8fd !important;
}

.tabs-box,
.tabs-menu,
.tabs-card,
.tabs-view,
.tags-view-container,
.el-tabs__header,
.el-tabs__nav-wrap,
.el-tabs__nav-scroll,
.el-tabs__nav,
.el-tabs__content {
  background: #0d1b28 !important;
  border-color: rgba(151, 190, 225, 0.18) !important;
}

.el-tabs--card > .el-tabs__header,
.el-tabs--card > .el-tabs__header .el-tabs__nav,
.el-tabs--card > .el-tabs__header .el-tabs__item {
  border-color: rgba(151, 190, 225, 0.18) !important;
}

.el-tabs__item {
  background: #0d1b28 !important;
}

.el-tabs__item.is-active {
  background: #152735 !important;
  color: #59afff !important;
}

.toolBar-icon,
.username,
.el-breadcrumb__inner,
.el-breadcrumb__separator {
  color: #b9cee2 !important;
}

.el-card,
.card,
.table-box,
.search-card,
.content-box,
.el-dialog,
.el-drawer,
.el-message-box,
.el-popper,
.el-dropdown-menu {
  background: #111f2c !important;
  color: #f4f8fd !important;
  border: 1px solid rgba(151, 190, 225, 0.18) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.24) !important;
}

.el-card {
  border-radius: 14px !important;
}

.el-card__header,
.el-dialog__header,
.el-drawer__header {
  border-color: rgba(151, 190, 225, 0.14) !important;
  color: #f4f8fd !important;
}

.el-table,
.el-table tr,
.el-table th.el-table__cell,
.el-table td.el-table__cell,
.el-table__inner-wrapper,
.el-table__body-wrapper,
.el-table__header-wrapper {
  background: #111f2c !important;
  color: #dce8f3 !important;
  border-color: rgba(151, 190, 225, 0.13) !important;
}

.el-table th.el-table__cell {
  background: #162838 !important;
  color: #f4f8fd !important;
}

.el-table__row:hover td.el-table__cell {
  background: #172c3d !important;
}

.el-table__inner-wrapper::before,
.el-table--border::after,
.el-table--border::before {
  background: rgba(151, 190, 225, 0.16) !important;
}

.el-input__wrapper,
.el-textarea__inner,
.el-select__wrapper,
.el-date-editor,
.el-pagination button,
.el-pager li {
  background: #0d1b28 !important;
  color: #e5eef7 !important;
  border-color: rgba(151, 190, 225, 0.2) !important;
  box-shadow: 0 0 0 1px rgba(151, 190, 225, 0.18) inset !important;
}

.el-input__wrapper.is-focus,
.el-select__wrapper.is-focused {
  box-shadow: 0 0 0 1px #168cff inset, 0 0 0 3px rgba(22, 140, 255, 0.18) !important;
}

.el-input__inner,
.el-textarea__inner,
.el-select__placeholder,
.el-select__selected-item {
  color: #eef5fb !important;
}

.el-button--primary {
  background: linear-gradient(135deg, #0b6fd8, #168cff) !important;
  border-color: #168cff !important;
  box-shadow: 0 6px 16px rgba(22, 140, 255, 0.22);
}

.el-button:not(.el-button--primary):not(.el-button--danger):not(.el-button--success) {
  background: #172838;
  color: #dce8f3;
  border-color: rgba(151, 190, 225, 0.22);
}

.el-tag--success,
.status-success,
.online,
.normal {
  color: #42e5b2 !important;
}

.el-tag--warning,
.status-warning {
  color: #ffc56f !important;
}

.el-tag--danger,
.status-danger,
.offline,
.error {
  color: #ff8490 !important;
}

.el-progress-bar__outer {
  background: #203447 !important;
}

.el-progress-bar__inner {
  background: linear-gradient(90deg, #0877e8, #3aa7ff) !important;
}

.el-tabs__item,
.el-radio-button__inner {
  color: #9eb2c8 !important;
}

.el-tabs__item.is-active,
.el-radio-button__original-radio:checked + .el-radio-button__inner {
  color: #fff !important;
}

.el-tabs__active-bar {
  background: #168cff !important;
}

.el-overlay {
  background: rgba(1, 7, 12, 0.72) !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 900px) {
  .el-menu-item,
  .el-sub-menu__title {
    margin-left: 6px;
    margin-right: 6px;
    width: calc(100% - 12px) !important;
  }

  .el-main {
    padding: 12px !important;
  }
}