:root {
  --okey-blue: #0e8df2;
  --okey-blue-2: #38bdf8;
  --okey-deep: #0b3b8f;
  --okey-ink: #0f172a;
  --okey-muted: #475569;
  --okey-mist: #eaf6ff;
  --okey-line: rgba(125, 211, 252, 0.34);
  --okey-shadow: 0 18px 48px rgba(15, 23, 42, 0.09);
  --semi-color-primary: #0e8df2;
  --semi-color-primary-hover: #0b7fda;
  --semi-color-primary-active: #0b3b8f;
  --semi-color-text-0: #0f172a;
  --semi-color-text-1: #334155;
  --semi-color-text-2: #64748b;
}

html,
body,
#root {
  min-height: 100%;
}

body {
  color: var(--okey-ink) !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(14, 141, 242, 0.14), transparent 34rem),
    radial-gradient(circle at 92% 12%, rgba(56, 189, 248, 0.12), transparent 30rem),
    linear-gradient(180deg, #f8fcff 0%, #edf7ff 46%, #f8fbff 100%) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(rgba(11, 59, 143, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 59, 143, 0.04) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.68), transparent 84%);
}

.semi-layout,
.semi-layout-content,
.semi-layout-sider,
.semi-portal,
.semi-navigation {
  background: transparent !important;
}

.semi-layout-sider,
aside[class*="sider"],
div[class*="sidebar"],
.semi-navigation-vertical {
  border-right: 1px solid rgba(125, 211, 252, 0.30) !important;
}

.semi-layout-sider,
.semi-navigation-vertical,
aside[class*="sider"] {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(234, 246, 255, 0.90)) !important;
  box-shadow: 14px 0 42px rgba(15, 23, 42, 0.07) !important;
  backdrop-filter: blur(16px);
}

.semi-navigation-item,
.semi-navigation-sub-title,
.semi-navigation-header-list-outer .semi-navigation-item {
  border-radius: 10px !important;
  color: #1e3a5f !important;
  margin: 3px 8px !important;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease !important;
}

.semi-navigation-item:hover,
.semi-navigation-sub-title:hover {
  background: rgba(14, 141, 242, 0.10) !important;
  color: #0b3b8f !important;
  transform: translateX(2px);
}

.semi-navigation-item-selected,
.semi-navigation-item-active {
  background: linear-gradient(135deg, rgba(14, 141, 242, 0.96), rgba(11, 59, 143, 0.92)) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(14, 141, 242, 0.22) !important;
}

.semi-navigation-item-icon,
.semi-navigation-sub-title-icon {
  color: inherit !important;
}

.semi-card,
.semi-tabs-content,
.semi-table-container,
.semi-modal-content,
.semi-drawer-content {
  border: 1px solid rgba(186, 230, 253, 0.68) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.90) !important;
  box-shadow: var(--okey-shadow) !important;
  backdrop-filter: blur(14px);
}

.semi-card-header {
  border-bottom-color: rgba(186, 230, 253, 0.62) !important;
}

.semi-card-title,
.semi-typography,
.semi-typography h1,
.semi-typography h2,
.semi-typography h3,
h1,
h2,
h3,
[class*="pricing"],
[class*="Pricing"],
[class*="model"],
[class*="Model"] {
  color: var(--okey-ink) !important;
  letter-spacing: 0 !important;
}

.semi-typography-secondary,
.semi-typography-tertiary,
.semi-card-meta-description,
[class*="description"],
[class*="Description"] {
  color: var(--okey-muted) !important;
}

[class*="pricing"] *,
[class*="Pricing"] *,
[class*="model"] *,
[class*="Model"] * {
  text-shadow: none !important;
}

[class*="pricing"] .semi-card,
[class*="Pricing"] .semi-card,
[class*="model"] .semi-card,
[class*="Model"] .semi-card {
  background: rgba(255, 255, 255, 0.94) !important;
  color: var(--okey-ink) !important;
}

.semi-button-primary:not(.semi-button-light):not(.semi-button-borderless),
.semi-button-primary.semi-button-solid {
  border: 0 !important;
  background: linear-gradient(135deg, #0e8df2, #0b3b8f) !important;
  box-shadow: 0 10px 24px rgba(14, 141, 242, 0.22) !important;
}

.semi-button-primary:hover {
  filter: saturate(1.08) brightness(1.02);
}

.semi-button,
.semi-input-wrapper,
.semi-select,
.semi-select-selection,
.semi-tagInput,
.semi-datepicker,
.semi-datepicker-range-input,
.semi-input-textarea-wrapper {
  border-radius: 12px !important;
}

.semi-input-wrapper,
.semi-select,
.semi-tagInput,
.semi-datepicker-range-input,
.semi-input-textarea-wrapper {
  border-color: rgba(14, 141, 242, 0.24) !important;
  background: rgba(255, 255, 255, 0.92) !important;
}

.semi-input-wrapper-focus,
.semi-select-focus,
.semi-tagInput-focus,
.semi-input-textarea-wrapper-focus {
  border-color: rgba(14, 141, 242, 0.72) !important;
  box-shadow: 0 0 0 3px rgba(14, 141, 242, 0.12) !important;
}

.semi-table {
  background: transparent !important;
}

.semi-table-thead > .semi-table-row > .semi-table-row-head {
  background: linear-gradient(180deg, #f0f9ff, #e8f5ff) !important;
  color: #0b3b8f !important;
  font-weight: 800 !important;
  border-bottom-color: rgba(125, 211, 252, 0.32) !important;
}

.semi-table-tbody > .semi-table-row > .semi-table-row-cell {
  background: rgba(255, 255, 255, 0.72) !important;
  color: var(--okey-ink) !important;
  border-bottom-color: rgba(186, 230, 253, 0.52) !important;
}

.semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell {
  background: rgba(234, 246, 255, 0.86) !important;
}

.semi-tabs-tab {
  border-radius: 999px !important;
}

.semi-tabs-tab-active,
.semi-tabs-tab:hover {
  color: #0b3b8f !important;
}

.semi-tabs-tab-active::before {
  background: linear-gradient(90deg, #0e8df2, #0b3b8f) !important;
}

.semi-tag,
.semi-badge-status-dot {
  border-radius: 999px !important;
}

.semi-toast-content,
.semi-notification-notice {
  border-radius: 14px !important;
  border: 1px solid rgba(186, 230, 253, 0.72) !important;
  box-shadow: 0 16px 44px rgba(15, 23, 42, 0.13) !important;
}

main,
[class*="content"],
[class*="Content"] {
  scrollbar-color: rgba(14, 141, 242, 0.45) rgba(234, 246, 255, 0.72);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* okey-selected-nav-contrast */
.semi-navigation-item-selected,
.semi-navigation-item-selected *,
.semi-navigation-item-selected span,
.semi-navigation-item-selected svg,
.semi-navigation-item-active,
.semi-navigation-item-active *,
.semi-navigation-item-active span,
.semi-navigation-item-active svg {
  color: #ffffff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

.semi-navigation-item-selected .semi-typography,
.semi-navigation-item-active .semi-typography {
  color: #ffffff !important;
}