:root {
  --tt-bg: #eef1f6;
  --tt-surface: rgba(255,255,255,.92);
  --tt-solid: #fff;
  --tt-sidebar: rgba(247,248,251,.96);
  --tt-border: #d9dee8;
  --tt-border-soft: #e8ecf3;
  --tt-text: #1d1d1f;
  --tt-muted: #687083;
  --tt-blue: #0a84ff;
  --tt-green: #34c759;
  --tt-orange: #ff9f0a;
  --tt-red: #ff453a;
  --tt-radius: 8px;
  --tt-shadow: 0 10px 28px rgba(27,39,64,.1);
  --el-color-primary: #0a84ff;
  --el-color-success: #34c759;
  --el-color-warning: #ff9f0a;
  --el-color-danger: #ff453a;
  --el-bg-color-page: #eef1f6;
  --el-bg-color: #fff;
  --el-border-radius-base: 8px;
  --left-menu-max-width: 212px;
  --left-menu-min-width: 68px;
  --left-menu-bg-color: rgba(247,248,251,.96);
  --left-menu-bg-light-color: rgba(238,241,246,.92);
  --left-menu-bg-active-color: #fff;
  --left-menu-collapse-bg-active-color: #fff;
  --left-menu-text-color: #4f596b;
  --left-menu-text-active-color: #0a84ff;
  --logo-height: 58px;
  --logo-title-text-color: #1d1d1f;
  --top-header-bg-color: rgba(255,255,255,.82);
  --top-header-text-color: #1d1d1f;
  --top-header-hover-color: rgba(10,132,255,.08);
  --app-content-bg-color: transparent;
  --app-content-padding: 18px;
}

html,
body,
#app {
  background: linear-gradient(180deg,#f8fafc 0%,#eef1f6 52%,#e7ebf2 100%) !important;
  color: var(--tt-text) !important;
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI","Microsoft YaHei UI",sans-serif !important;
}

* {
  letter-spacing: 0 !important;
  scrollbar-width: thin;
  scrollbar-color: #b8c0ce transparent;
}

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

::-webkit-scrollbar-track {
  background: transparent !important;
}

::-webkit-scrollbar-thumb {
  background: #b8c0ce !important;
  border: 3px solid transparent;
  border-radius: 8px;
  background-clip: padding-box !important;
}

/* App shell */
.v-layout,
.layout,
[class*="layout"],
[class*="Layout"] {
  background: transparent !important;
}

.left-menu,
.v-menu,
.el-menu,
[class*="LeftMenu"],
[class*="left-menu"],
[class*="side"],
[class*="Side"] {
  background: var(--tt-sidebar) !important;
  border-right: 1px solid var(--tt-border) !important;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.7) !important;
}

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

.el-menu-item,
.el-sub-menu__title {
  height: 42px !important;
  line-height: 42px !important;
  margin: 4px 10px !important;
  border-radius: var(--tt-radius) !important;
  color: #4f596b !important;
  font-weight: 650 !important;
}

.el-menu-item:hover,
.el-sub-menu__title:hover {
  background: rgba(255,255,255,.75) !important;
  color: var(--tt-text) !important;
}

.el-menu-item.is-active,
.el-sub-menu.is-active > .el-sub-menu__title {
  background: var(--tt-solid) !important;
  color: var(--tt-blue) !important;
  box-shadow: 0 8px 20px rgba(27,39,64,.08) !important;
}

.logo,
[class*="Logo"],
[class*="logo"] {
  background: transparent !important;
  color: var(--tt-text) !important;
}

.logo img,
[class*="logo"] img,
[class*="Logo"] img {
  border-radius: 8px !important;
}

/* Top and content */
.top-tool,
.top-header,
.v-tool-header,
[class*="Top"],
[class*="Header"] {
  background: rgba(255,255,255,.82) !important;
  border-bottom: 1px solid var(--tt-border) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px);
}

.app-content,
.v-content,
.main-content,
[class*="Content"],
[class*="content"] {
  background: transparent !important;
}

.el-card,
.content-wrap,
.search,
.v-search,
[class*="ContentWrap"],
[class*="Search"] {
  border: 1px solid var(--tt-border-soft) !important;
  border-radius: var(--tt-radius) !important;
  background: var(--tt-surface) !important;
  box-shadow: var(--tt-shadow) !important;
}

.el-card__body {
  padding: 18px !important;
}

/* Forms */
.el-input__wrapper,
.el-select__wrapper,
.el-textarea__inner,
.el-input-number,
.el-date-editor,
.el-range-editor {
  border-radius: var(--tt-radius) !important;
  box-shadow: 0 0 0 1px var(--tt-border) inset !important;
  background: rgba(255,255,255,.9) !important;
}

.el-input__wrapper:hover,
.el-select__wrapper:hover,
.el-textarea__inner:hover {
  box-shadow: 0 0 0 1px #b7c1d1 inset !important;
}

.is-focus,
.el-input__wrapper.is-focus,
.el-select__wrapper.is-focused {
  box-shadow: 0 0 0 1px var(--tt-blue) inset, 0 0 0 3px rgba(10,132,255,.14) !important;
}

.el-form-item__label {
  color: #3f4758 !important;
  font-weight: 650 !important;
}

/* Buttons */
.el-button {
  min-height: 34px !important;
  border-radius: var(--tt-radius) !important;
  border-color: var(--tt-border) !important;
  background: #fff !important;
  color: var(--tt-text) !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}

.el-button:hover,
.el-button:focus {
  border-color: #b7c1d1 !important;
  background: #f9fafc !important;
}

.el-button--primary {
  border-color: var(--tt-blue) !important;
  background: linear-gradient(180deg,#1a90ff 0%,var(--tt-blue) 100%) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(10,132,255,.18) !important;
}

.el-button--success {
  border-color: var(--tt-green) !important;
  background: linear-gradient(180deg,#42d66b 0%,var(--tt-green) 100%) !important;
  color: #fff !important;
}

.el-button--warning {
  border-color: var(--tt-orange) !important;
  background: linear-gradient(180deg,#ffb340 0%,var(--tt-orange) 100%) !important;
  color: #fff !important;
}

.el-button--danger {
  border-color: var(--tt-red) !important;
  background: linear-gradient(180deg,#ff6961 0%,var(--tt-red) 100%) !important;
  color: #fff !important;
}

.el-button--text,
.el-button.is-link {
  border-color: transparent !important;
  background: transparent !important;
  color: var(--tt-blue) !important;
}

/* Tables */
.el-table,
.el-table__inner-wrapper,
.el-table tr,
.el-table th.el-table__cell {
  background: transparent !important;
}

.el-table {
  border: 1px solid var(--tt-border-soft) !important;
  border-radius: var(--tt-radius) !important;
  overflow: hidden !important;
  color: #4f596b !important;
}

.el-table th.el-table__cell {
  background: #f5f7fb !important;
  color: #5f687a !important;
  font-weight: 750 !important;
}

.el-table td.el-table__cell,
.el-table th.el-table__cell {
  border-bottom-color: var(--tt-border-soft) !important;
}

.el-table__row:hover > td.el-table__cell {
  background: rgba(10,132,255,.06) !important;
}

.el-pagination .el-pager li,
.el-pagination button,
.el-pagination .el-select .el-input {
  border-radius: 7px !important;
}

/* Dialogs */
.el-dialog,
.el-message-box,
.el-popover,
.el-popper,
.el-select-dropdown,
.el-picker-panel {
  border: 1px solid var(--tt-border-soft) !important;
  border-radius: var(--tt-radius) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 16px 46px rgba(27,39,64,.16) !important;
  backdrop-filter: blur(18px);
}

.el-dialog__header,
.el-message-box__header {
  padding: 18px 20px 10px !important;
}

.el-dialog__title,
.el-message-box__title {
  color: var(--tt-text) !important;
  font-weight: 750 !important;
}

.el-dialog__footer,
.el-message-box__btns {
  border-top: 1px solid var(--tt-border-soft);
  padding: 12px 20px 16px !important;
}

/* Loading page */
.app-loading {
  background: linear-gradient(180deg,#f8fafc 0%,#eef1f6 52%,#e7ebf2 100%) !important;
}

.app-loading-logo {
  width: 74px !important;
  border-radius: 16px !important;
}

.app-loading-title {
  color: var(--tt-text) !important;
}

/* Vben admin shell */
.v-layout,
.v-layout[class*="v-layout"],
.v-layout-content,
.v-layout-content-scrollbar,
.v-layout .el-scrollbar,
.v-layout .el-scrollbar__wrap,
.v-layout .el-scrollbar__view {
  background: transparent !important;
}

.layout-border__right {
  border-right: 1px solid var(--tt-border) !important;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.72) !important;
}

.layout-border__bottom,
.layout-border__top {
  border-color: var(--tt-border-soft) !important;
}

.v-logo,
[class*="v-logo"],
.bg-\[var\(--left-menu-bg-color\)\] {
  background: var(--tt-sidebar) !important;
  color: var(--tt-text) !important;
}

.v-logo img,
[class*="v-logo"] img,
img[src*="logo"] {
  border-radius: 8px !important;
  object-fit: cover !important;
}

.v-menu,
.v-menu .el-menu,
.v-menu-popper--vertical .el-menu,
.v-menu-popper--horizontal .el-menu {
  background: var(--tt-sidebar) !important;
  border: 0 !important;
}

.v-menu .el-scrollbar__view {
  padding: 8px 8px 14px !important;
}

.v-menu .el-menu-item,
.v-menu .el-sub-menu__title,
.v-menu-popper--vertical .el-menu-item,
.v-menu-popper--vertical .el-sub-menu__title {
  min-height: 42px !important;
  height: 42px !important;
  line-height: 42px !important;
  margin: 4px 6px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  border-radius: var(--tt-radius) !important;
  background: transparent !important;
  color: #4f596b !important;
}

.v-menu .el-menu .el-menu .el-menu-item:not(.is-active),
.v-menu .el-menu .el-menu .el-sub-menu__title {
  background: rgba(238,241,246,.64) !important;
}

.v-menu .el-menu-item:hover,
.v-menu .el-sub-menu__title:hover,
.v-menu-popper--vertical .el-menu-item:hover,
.v-menu-popper--vertical .el-sub-menu__title:hover {
  background: rgba(255,255,255,.76) !important;
  color: var(--tt-text) !important;
}

.v-menu .el-menu-item.is-active,
.v-menu .is-active > .el-sub-menu__title,
.v-menu-popper--vertical .el-menu-item.is-active,
.v-menu-popper--vertical .is-active > .el-sub-menu__title {
  background: #fff !important;
  color: var(--tt-blue) !important;
  box-shadow: 0 8px 20px rgba(27,39,64,.08) !important;
}

.v-tool-header {
  background: rgba(255,255,255,.82) !important;
  border-bottom: 1px solid var(--tt-border-soft) !important;
  color: var(--tt-text) !important;
  backdrop-filter: blur(18px);
}

.custom-hover:hover,
.v-tool-header .cursor-pointer:hover {
  background: rgba(10,132,255,.08) !important;
  border-radius: var(--tt-radius) !important;
}

.v-tags-view,
[class*="v-tags-view"] {
  background: rgba(255,255,255,.74) !important;
  border-color: var(--tt-border-soft) !important;
  backdrop-filter: blur(16px);
}

.v-tags-view__item {
  height: 26px !important;
  border-radius: 7px !important;
  border-color: var(--tt-border-soft) !important;
  background: rgba(255,255,255,.78) !important;
  color: #4f596b !important;
}

.v-tags-view__item.is-active {
  background: #fff !important;
  border-color: var(--tt-blue) !important;
  color: var(--tt-blue) !important;
  box-shadow: 0 6px 16px rgba(10,132,255,.12) !important;
}

.p-\[var\(--app-content-padding\)\],
.bg-\[var\(--app-content-bg-color\)\] {
  background: transparent !important;
}

.content-wrap,
.v-content-wrap,
[class*="content-wrap"],
[class*="ContentWrap"],
.el-card {
  border: 1px solid var(--tt-border-soft) !important;
  border-radius: var(--tt-radius) !important;
  background: var(--tt-surface) !important;
  box-shadow: var(--tt-shadow) !important;
}

.el-form,
.el-table,
.el-pagination {
  color: var(--tt-text) !important;
}

.el-table__header-wrapper,
.el-table__fixed-header-wrapper {
  border-radius: var(--tt-radius) var(--tt-radius) 0 0 !important;
}

.el-table__body-wrapper {
  background: #fff !important;
}

.el-table td.el-table__cell {
  background: rgba(255,255,255,.92) !important;
}

.el-table__row:hover td.el-table__cell {
  background: rgba(10,132,255,.06) !important;
}

.el-checkbox__inner,
.el-radio__inner,
.el-switch__core {
  border-radius: 7px !important;
}

.el-message,
.el-notification {
  border-radius: var(--tt-radius) !important;
  border-color: var(--tt-border-soft) !important;
  box-shadow: 0 14px 38px rgba(27,39,64,.14) !important;
}

/* Login page */
.v-login,
[class*="v-login"] {
  min-height: 100vh !important;
  background: linear-gradient(180deg,#f8fafc 0%,#eef1f6 52%,#e7ebf2 100%) !important;
}

.v-login__left,
[class*="v-login__left"] {
  background: transparent !important;
}

.v-login__left:before,
[class*="v-login__left"]:before {
  opacity: .18 !important;
  filter: grayscale(.18) saturate(.72) !important;
}

.v-login .el-card,
.v-login [class*="login"] .el-form,
.v-login [class*="form"] {
  border-radius: var(--tt-radius) !important;
}

.v-login .el-input__wrapper {
  min-height: 42px !important;
}

.v-login .el-button--primary {
  min-height: 42px !important;
}