html,
body,
#root {
  min-height: 100%;
  background: #05070b !important;
}

body {
  color: #e8fbff !important;
  overflow-x: hidden !important;
  background:
    linear-gradient(115deg, rgba(38, 255, 210, .08), transparent 31%),
    linear-gradient(245deg, rgba(91, 141, 255, .12), transparent 36%),
    linear-gradient(180deg, #05070b 0%, #071018 48%, #03070b 100%) !important;
}

body:before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(120, 255, 232, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 255, 232, .055) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .82), transparent 92%);
}

.semi-layout,
.semi-layout-content,
.semi-navigation,
.semi-navigation-list-wrapper,
.semi-tabs-content,
.semi-tabs-pane,
main {
  background: transparent !important;
}

.semi-layout-header,
header.text-semi-color-text-0,
.semi-navigation-header,
.semi-navigation-footer,
.sidebar-container,
.sidebar-nav {
  background: rgba(5, 10, 17, .86) !important;
  border-color: rgba(113, 255, 226, .14) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .28) !important;
  backdrop-filter: blur(18px);
}

.semi-layout-header a,
.semi-layout-header span,
.semi-layout-header .semi-typography {
  color: rgba(229, 251, 255, .82) !important;
}

.semi-layout-header a:hover,
.semi-layout-header .semi-button:hover span,
.semi-layout-header .semi-button:hover svg {
  color: #7dffe9 !important;
}

.semi-card,
.semi-table,
.semi-table-container,
.semi-modal-content,
.semi-sidesheet-content,
.semi-collapse,
.semi-tabs-bar,
.table-scroll-card,
[class*="card"],
[class*="Card"] {
  background: linear-gradient(180deg, rgba(11, 25, 37, .92), rgba(4, 12, 20, .94)) !important;
  border: 1px solid rgba(128, 244, 230, .18) !important;
  box-shadow: 0 18px 54px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .055) !important;
}

.semi-card,
.semi-table-container,
.semi-modal-content,
.semi-sidesheet-content,
.table-scroll-card {
  border-radius: 8px !important;
}

.semi-card-body,
.semi-card-header,
.semi-card-footer,
.semi-table-thead > .semi-table-row > .semi-table-row-head,
.semi-table-tbody > .semi-table-row > .semi-table-row-cell {
  background: transparent !important;
  border-color: rgba(132, 255, 233, .11) !important;
}

.semi-table-thead > .semi-table-row > .semi-table-row-head {
  color: rgba(190, 255, 244, .88) !important;
  background: rgba(35, 255, 214, .07) !important;
}

.semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell,
.semi-list-item:hover,
.semi-navigation-item:hover,
.semi-tabs-tab:hover {
  background: rgba(51, 255, 218, .075) !important;
}

.semi-button-primary,
.semi-button-primary:not(.semi-button-disabled) {
  color: #03110f !important;
  background: linear-gradient(90deg, #2dffd2, #74a8ff) !important;
  border-color: rgba(124, 255, 232, .45) !important;
  box-shadow: 0 12px 32px rgba(45, 255, 215, .2) !important;
}

.semi-button-tertiary,
.semi-button-outline,
.semi-button-borderless {
  color: rgba(225, 250, 255, .86) !important;
  border-color: rgba(130, 255, 231, .16) !important;
}

.semi-button,
.semi-input-wrapper,
.semi-select,
.semi-tagInput,
.semi-input-textarea-wrapper,
.semi-datepicker-range-input,
.semi-radio,
.semi-tabs-tab-button,
.semi-page-item {
  border-radius: 8px !important;
  border-color: rgba(130, 255, 231, .18) !important;
}

.semi-input-wrapper,
.semi-select,
.semi-tagInput,
.semi-input-textarea-wrapper,
.semi-datepicker-range-input {
  color: #e8fbff !important;
  background: rgba(5, 17, 27, .84) !important;
}

.semi-input,
.semi-input::placeholder,
.semi-select-selection-text,
.semi-form-field-label,
.semi-form-field-label-text {
  color: rgba(231, 250, 255, .78) !important;
}

.semi-tag,
[class*="badge"],
[class*="Badge"] {
  border-color: rgba(116, 168, 255, .24) !important;
  background: rgba(116, 168, 255, .1) !important;
}

h1,
h2,
h3,
h4,
.semi-typography,
.semi-card-header-wrapper-title {
  letter-spacing: 0 !important;
}

h1,
h2,
h3,
h4,
.text-gray-900,
.text-gray-800,
.text-semi-color-text-0,
.semi-typography-primary,
.semi-card-header-wrapper-title {
  color: #f1fdff !important;
}

.text-gray-700,
.text-gray-600,
.text-semi-color-text-1,
.semi-typography-secondary,
[style*="--semi-color-text-1"] {
  color: rgba(205, 233, 241, .78) !important;
}

.text-gray-500,
.text-gray-400,
.text-semi-color-text-2,
[style*="--semi-color-text-2"] {
  color: rgba(177, 212, 224, .64) !important;
}

.blur-ball,
.with-pastel-balls:before,
footer .absolute {
  display: none !important;
}

.semi-layout-footer,
.semi-layout-footer > div,
.semi-layout-footer footer,
footer.semi-layout-footer {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.custom-footer {
  display: none !important;
}

.pricing-pagination-divider {
  border-color: rgba(120, 255, 232, .13) !important;
}

.semi-layout-content > .bg-white,
.pricing-layout {
  background:
    linear-gradient(180deg, rgba(4, 10, 16, .96), rgba(4, 10, 16, .9)),
    radial-gradient(circle at 74% 12%, rgba(72, 134, 255, .15), transparent 32%) !important;
}

.pricing-layout {
  min-height: calc(100vh - 64px);
}

.pricing-sidebar {
  background:
    linear-gradient(180deg, rgba(7, 18, 28, .96), rgba(4, 11, 17, .98)) !important;
  border-right: 1px solid rgba(120, 255, 232, .16) !important;
  box-shadow: 18px 0 54px rgba(0, 0, 0, .22) !important;
}

.pricing-sidebar .semi-layout-sider-children {
  background: transparent !important;
}

.pricing-sidebar .p-2 {
  padding: 14px 10px !important;
}

.pricing-sidebar .text-lg,
.pricing-sidebar .semi-divider_inner-text {
  color: #effdff !important;
}

.pricing-sidebar .semi-divider {
  border-color: rgba(120, 255, 232, .13) !important;
}

.pricing-sidebar .sbg-button {
  min-height: 34px !important;
  background: rgba(7, 24, 36, .74) !important;
  border: 1px solid rgba(121, 255, 232, .18) !important;
  color: rgba(224, 250, 255, .86) !important;
}

.pricing-sidebar .sbg-button.semi-button-primary,
.pricing-sidebar .semi-button-primary.sbg-button {
  color: #02110f !important;
  background: linear-gradient(90deg, #2dffd2, #75a8ff) !important;
  border-color: rgba(128, 255, 232, .48) !important;
}

.pricing-sidebar .sbg-button .sbg-content,
.pricing-sidebar .sbg-button .sbg-ellipsis,
.pricing-sidebar .sbg-button .sbg-badge {
  color: inherit !important;
}

.pricing-sidebar .sbg-badge {
  background: rgba(133, 168, 255, .14) !important;
  border: 1px solid rgba(133, 168, 255, .18) !important;
}

.pricing-sidebar .sbg-badge-active {
  color: #02201a !important;
  background: rgba(255, 255, 255, .34) !important;
}

main .grid .semi-card,
main [class*="grid"] .semi-card {
  min-height: 180px;
}

main .semi-card h3,
main .semi-card .text-lg,
main .semi-card .font-bold {
  color: #f0fdff !important;
  text-shadow: 0 0 18px rgba(45, 255, 215, .12);
}

main .semi-card span,
main .semi-card p,
main .semi-card div {
  border-color: rgba(122, 255, 232, .13);
}

.semi-avatar-grey {
  color: #071018 !important;
  background: linear-gradient(135deg, #e7fbff, #7dffe9) !important;
}

.semi-page-item-active,
.semi-tabs-tab-active,
.semi-navigation-item-selected,
.semi-navigation-item-active {
  color: #03110f !important;
  background: linear-gradient(90deg, #2dffd2, #74a8ff) !important;
}

.semi-page-item-active *,
.semi-tabs-tab-active *,
.semi-navigation-item-selected *,
.semi-navigation-item-active * {
  color: #03110f !important;
}

aside,
[class*="sidebar"],
[class*="filter"],
[class*="Filter"] {
  border-color: rgba(120, 255, 232, .14) !important;
}

@media (max-width: 768px) {
  html,
  body,
  #root {
    max-width: 100%;
    overflow-x: hidden !important;
  }

  body:before {
    background-size: 34px 34px;
  }

  .semi-layout-header .h-16 {
    height: 58px !important;
  }

  .semi-layout-header .md\:gap-3 {
    display: none !important;
  }

  .semi-layout-header nav {
    flex: 0 1 auto !important;
    gap: 0 !important;
    margin-left: 6px !important;
    margin-right: 0 !important;
  }

  .semi-layout-header nav a {
    padding: 6px !important;
    font-size: 14px !important;
  }
}