:root {
  color-scheme: light;
  --aiw-bg: #f5f8fc;
  --aiw-surface: #ffffff;
  --aiw-soft: #f8fbff;
  --aiw-text: #172033;
  --aiw-muted: #66758c;
  --aiw-line: #dce5f1;
  --aiw-line-strong: #c7d5e8;
  --aiw-blue: #2b84ff;
  --aiw-blue-strong: #146ef5;
  --aiw-violet: #9b5cff;
  --aiw-green: #24b47e;
  --aiw-shadow: 0 18px 48px rgba(33, 67, 118, 0.12);
  --aiw-shadow-soft: 0 12px 30px rgba(51, 86, 132, 0.08);
  --semi-color-primary: #2b84ff;
  --semi-color-primary-hover: #146ef5;
  --semi-color-primary-active: #0e5ed6;
  --semi-color-primary-light-default: #eef6ff;
  --semi-color-primary-light-hover: #e4f0ff;
  --semi-color-primary-light-active: #d6e8ff;
  --semi-color-bg-0: #ffffff;
  --semi-color-bg-1: #f8fbff;
  --semi-color-bg-2: #f3f7fc;
  --semi-color-fill-0: #f3f7fb;
  --semi-color-fill-1: #eef4fb;
  --semi-color-fill-2: #e4edf7;
  --semi-color-border: #dce5f1;
  --semi-color-text-0: #172033;
  --semi-color-text-1: #45556f;
  --semi-color-text-2: #66758c;
}

html.dark,
html.dark body,
body[theme-mode="dark"] {
  color-scheme: light !important;
  --semi-color-primary: #2b84ff !important;
  --semi-color-primary-hover: #146ef5 !important;
  --semi-color-primary-active: #0e5ed6 !important;
  --semi-color-primary-light-default: #eef6ff !important;
  --semi-color-primary-light-hover: #e4f0ff !important;
  --semi-color-primary-light-active: #d6e8ff !important;
  --semi-color-bg-0: #ffffff !important;
  --semi-color-bg-1: #f8fbff !important;
  --semi-color-bg-2: #f3f7fc !important;
  --semi-color-fill-0: #f3f7fb !important;
  --semi-color-fill-1: #eef4fb !important;
  --semi-color-fill-2: #e4edf7 !important;
  --semi-color-border: #dce5f1 !important;
  --semi-color-text-0: #172033 !important;
  --semi-color-text-1: #45556f !important;
  --semi-color-text-2: #66758c !important;
}

html,
body,
#root {
  min-height: 100%;
  background:
    linear-gradient(135deg, rgba(43, 132, 255, 0.08), transparent 34%),
    linear-gradient(225deg, rgba(36, 180, 126, 0.08), transparent 34%),
    linear-gradient(180deg, #f3f7fd 0%, #f7faff 42%, #ffffff 100%) !important;
  color: var(--aiw-text);
  letter-spacing: 0;
}

#root .app-layout,
#root .semi-layout,
#root .classic-page-fill {
  background: transparent !important;
}

#root .semi-layout-content {
  background: transparent !important;
}

#root .semi-layout-header {
  height: auto !important;
  padding: 8px 0 0 !important;
  background: transparent !important;
}

#root header.sticky {
  top: 8px !important;
  width: min(calc(100% - 96px), 1344px);
  min-height: 64px;
  margin: 0 auto;
  padding: 0 10px 0 16px;
  border: 1px solid rgba(210, 222, 238, 0.95);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84) !important;
  box-shadow: 0 10px 28px rgba(36, 67, 109, 0.1);
  backdrop-filter: blur(18px);
}

#root header.sticky h4 {
  color: var(--aiw-text) !important;
  font-size: 21px !important;
  font-weight: 800 !important;
}

#root header.sticky img {
  border-radius: 8px !important;
  box-shadow: 0 8px 18px rgba(43, 132, 255, 0.18);
}

#root header.sticky nav a {
  position: relative;
  min-height: 44px;
  padding: 0 10px !important;
  color: #20304a;
  border-radius: 8px !important;
}

#root header.sticky nav a:hover {
  color: var(--aiw-blue-strong) !important;
  background: #eef6ff !important;
}

#root header.sticky .semi-button {
  border-radius: 999px !important;
}

#root header.sticky .semi-button[class*="rounded-r-none"],
#root header.sticky .semi-button[class*="rounded-l-none"] {
  border-radius: 999px !important;
}

#root header.sticky .semi-button[class*="rounded-r-none"] {
  margin-right: 6px;
}

#root header.sticky .semi-button + .semi-button {
  margin-left: 6px;
}

#root .semi-button {
  border-radius: 999px !important;
  font-weight: 800;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, background 150ms ease;
}

#root .semi-button:hover:not(.semi-button-disabled) {
  transform: translateY(-1px);
}

#root .semi-button-primary.semi-button-solid {
  border-color: transparent !important;
  background: linear-gradient(90deg, #2b84ff, #9b5cff) !important;
  box-shadow: 0 12px 26px rgba(82, 105, 255, 0.2);
}

#root .semi-button-tertiary,
#root .semi-button-light,
#root .semi-button-outline,
#root .semi-button-borderless {
  border-color: var(--aiw-line) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  color: #20304a !important;
}

#root .semi-button-tertiary:hover,
#root .semi-button-light:hover,
#root .semi-button-outline:hover,
#root .semi-button-borderless:hover {
  border-color: #b6c9e3 !important;
  background: #f8fbff !important;
  box-shadow: var(--aiw-shadow-soft);
}

#root .semi-card {
  overflow: hidden;
  border: 1px solid var(--aiw-line) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 14px 34px rgba(39, 72, 116, 0.07) !important;
}

#root .semi-card-body {
  color: var(--aiw-text);
  background: transparent !important;
}

#root .semi-input-wrapper {
  min-height: 40px;
  border: 1px solid var(--aiw-line) !important;
  border-radius: 8px !important;
  background: rgba(248, 251, 255, 0.95) !important;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

#root .semi-input-wrapper:hover,
#root .semi-input-wrapper-focus,
#root .semi-input-wrapper:focus-within {
  border-color: #9fc4f3 !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(43, 132, 255, 0.1) !important;
}

#root .semi-input,
#root input,
#root textarea {
  color: var(--aiw-text) !important;
}

#root .semi-form-field-label-text {
  color: #20304a !important;
  font-weight: 800;
}

#root .semi-tag {
  border-radius: 999px !important;
  background: #eef6ff !important;
  color: var(--aiw-blue-strong) !important;
}

#root .semi-switch {
  background: #dce5f1 !important;
}

#root .semi-switch-checked {
  background: linear-gradient(90deg, #2b84ff, #24b47e) !important;
}

#root .semi-toast-innerWrapper {
  border: 1px solid var(--aiw-line) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: var(--aiw-shadow) !important;
}

#root .classic-page-fill {
  position: relative;
  isolation: isolate;
}

#root .blur-ball {
  display: none !important;
}

#root footer .absolute.rounded-full[class*="bg-"] {
  display: none !important;
}

#root .classic-page-fill::before {
  position: fixed;
  inset: 72px auto auto 0;
  z-index: -1;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(36, 180, 126, 0.14), transparent 68%);
  content: "";
  pointer-events: none;
}

#root .classic-page-fill::after {
  position: fixed;
  top: 48px;
  left: 46%;
  z-index: -1;
  width: 480px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(155, 92, 255, 0.12), transparent 68%);
  content: "";
  pointer-events: none;
}

#root .classic-page-fill .semi-card {
  width: min(100%, 384px);
  border-radius: 8px !important;
  box-shadow: var(--aiw-shadow) !important;
}

#root .classic-page-fill .semi-card .semi-button-tertiary,
#root .classic-page-fill .semi-card .semi-button-borderless {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--aiw-blue-strong) !important;
}

#root .classic-page-fill .semi-card .semi-button-tertiary:hover,
#root .classic-page-fill .semi-card .semi-button-borderless:hover {
  transform: none;
  background: #eef6ff !important;
}

#root .classic-page-fill .semi-typography-h3 {
  color: var(--aiw-text) !important;
  font-weight: 900 !important;
  letter-spacing: 0;
}

#root .pricing-layout {
  gap: 18px;
  padding: 18px 24px 28px !important;
  background: transparent !important;
}

#root .pricing-sidebar {
  width: 330px !important;
  max-width: 330px !important;
  padding: 18px 16px !important;
  border: 1px solid var(--aiw-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: var(--aiw-shadow-soft);
}

#root .pricing-sidebar .semi-divider {
  border-color: var(--aiw-line) !important;
}

#root .pricing-sidebar .semi-divider_inner-text {
  color: var(--aiw-text);
  font-weight: 900;
}

#root .pricing-sidebar .sbg-button {
  min-height: 34px;
  border-radius: 8px !important;
}

#root .pricing-content {
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border-radius: 8px;
}

#root .pricing-content > .semi-card {
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.92) !important;
}

#root .pricing-content .semi-card-cover,
#root .pricing-content .semi-card-cover > div {
  background:
    linear-gradient(135deg, rgba(43, 132, 255, 0.12), rgba(36, 180, 126, 0.08)),
    linear-gradient(180deg, #ffffff, #f5f9ff) !important;
  background-image:
    linear-gradient(135deg, rgba(43, 132, 255, 0.12), rgba(36, 180, 126, 0.08)),
    linear-gradient(180deg, #ffffff, #f5f9ff) !important;
  color: var(--aiw-text) !important;
}

#root .pricing-content .semi-card-cover h1,
#root .pricing-content .semi-card-cover h2,
#root .pricing-content .semi-card-cover h3,
#root .pricing-content .semi-card-cover p,
#root .pricing-content .semi-card-cover span {
  color: var(--aiw-text) !important;
}

#root .pricing-search-header,
#root .pricing-content .semi-card-body {
  background: rgba(255, 255, 255, 0.86) !important;
}

#root .pricing-content .semi-empty,
#root .pricing-content .semi-empty-content,
#root .pricing-content .semi-empty-description {
  background: transparent !important;
  color: var(--aiw-muted) !important;
}

#root .pricing-content > .semi-card,
#root .pricing-content .semi-card-body,
#root .pricing-content .semi-empty {
  min-height: 0;
}

#root .semi-layout-sider:not(.pricing-sidebar),
#root .app-sider,
#root aside[class*="sider"] {
  background: rgba(255, 255, 255, 0.9) !important;
  border-right: 1px solid var(--aiw-line) !important;
  box-shadow: 12px 0 28px rgba(36, 67, 109, 0.07) !important;
  color: var(--aiw-muted) !important;
}

#root .semi-layout-sider:not(.pricing-sidebar) *,
#root .app-sider *,
#root aside[class*="sider"] * {
  color: inherit !important;
}

#root .semi-layout-sider:not(.pricing-sidebar) a,
#root .semi-layout-sider:not(.pricing-sidebar) button,
#root .app-sider a,
#root .app-sider button,
#root aside[class*="sider"] a,
#root aside[class*="sider"] button {
  border-radius: 8px !important;
  color: #45556f !important;
}

#root .semi-layout-sider:not(.pricing-sidebar) a:hover,
#root .semi-layout-sider:not(.pricing-sidebar) button:hover,
#root .semi-layout-sider:not(.pricing-sidebar) [class*="selected"],
#root .semi-layout-sider:not(.pricing-sidebar) [class*="active"],
#root .app-sider a:hover,
#root .app-sider button:hover,
#root .app-sider [class*="selected"],
#root .app-sider [class*="active"],
#root aside[class*="sider"] a:hover,
#root aside[class*="sider"] button:hover,
#root aside[class*="sider"] [class*="selected"],
#root aside[class*="sider"] [class*="active"] {
  background: #eef6ff !important;
  color: var(--aiw-blue-strong) !important;
}

#root [class*="bg-zinc-"],
#root [class*="bg-gray-900"],
#root [class*="bg-slate-900"],
#root [class*="dark:bg-"],
#root [class*="dark:!bg-"] {
  background-color: transparent !important;
}

#root .semi-card [style*="background-color: rgb(20"],
#root .semi-card [style*="background-color: #1"],
#root .semi-card [style*="background: rgb(20"],
#root .semi-card [style*="background: #1"] {
  background: #ffffff !important;
}

#root canvas {
  border-radius: 8px;
}

#root .semi-card canvas,
#root .semi-card div[_echarts_instance_] {
  background: #ffffff !important;
}

#root .semi-empty-description {
  color: var(--aiw-muted) !important;
}

#root .custom-footer {
  color: var(--aiw-muted) !important;
}

@media (max-width: 900px) {
  #root header.sticky {
    width: min(calc(100% - 24px), 720px);
    border-radius: 14px;
  }

  #root header.sticky nav {
    gap: 4px !important;
  }

  #root .pricing-layout {
    display: block !important;
    padding: 12px 14px 24px !important;
  }

  #root .pricing-sidebar {
    width: 100% !important;
    max-width: none !important;
    margin-bottom: 14px;
  }
}

@media (max-width: 560px) {
  #root header.sticky {
    width: min(calc(100% - 16px), 420px);
    padding: 0 8px !important;
  }

  #root header.sticky h4 {
    font-size: 18px !important;
  }

  #root header.sticky nav {
    display: none !important;
  }

  #root .semi-button {
    min-height: 36px;
  }

  #root .classic-page-fill .semi-card {
    width: min(100%, 360px);
  }
}