:root {
  --saas-bg: #f6f8fb;
  --saas-bg-accent: #eef6ff;
  --saas-surface: #ffffff;
  --saas-surface-soft: #f8fafc;
  --saas-border: #e2e8f0;
  --saas-border-strong: #cbd5e1;
  --saas-text: #0f172a;
  --saas-text-soft: #475569;
  --saas-text-muted: #64748b;
  --saas-primary: #0ea5e9;
  --saas-primary-hover: #0284c7;
  --saas-primary-active: #0369a1;
  --saas-success: #10b981;
  --saas-warning: #f59e0b;
  --saas-danger: #ef4444;
  --saas-radius-sm: 10px;
  --saas-radius-md: 14px;
  --saas-radius-lg: 18px;
  --saas-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --saas-shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04);
  --saas-shadow-lg: 0 18px 45px rgba(15, 23, 42, 0.10), 0 4px 16px rgba(15, 23, 42, 0.06);
}

html,
body {
  background: radial-gradient(circle at top, var(--saas-bg-accent) 0, var(--saas-bg) 38%, var(--saas-bg) 100%) fixed;
  color: var(--saas-text);
}

body,
body .semi-always-light,
:host,
:host .semi-always-light {
  --semi-color-primary: var(--saas-primary);
  --semi-color-primary-hover: var(--saas-primary-hover);
  --semi-color-primary-active: var(--saas-primary-active);
  --semi-color-primary-light-default: rgba(14, 165, 233, 0.10);
  --semi-color-primary-light-hover: rgba(14, 165, 233, 0.16);
  --semi-color-primary-light-active: rgba(14, 165, 233, 0.24);
  --semi-color-success: var(--saas-success);
  --semi-color-warning: var(--saas-warning);
  --semi-color-danger: var(--saas-danger);
  --semi-color-bg-0: var(--saas-bg);
  --semi-color-bg-1: var(--saas-surface);
  --semi-color-bg-2: var(--saas-surface);
  --semi-color-bg-3: var(--saas-surface-soft);
  --semi-color-bg-4: #edf2f7;
  --semi-color-border: rgba(148, 163, 184, 0.22);
  --semi-color-text-0: var(--saas-text);
  --semi-color-text-1: var(--saas-text-soft);
  --semi-color-text-2: var(--saas-text-muted);
  --semi-color-text-3: rgba(100, 116, 139, 0.65);
  --semi-color-fill-0: rgba(148, 163, 184, 0.10);
  --semi-color-fill-1: rgba(148, 163, 184, 0.16);
  --semi-color-fill-2: rgba(148, 163, 184, 0.22);
  --semi-border-radius-small: var(--saas-radius-sm);
  --semi-border-radius-medium: var(--saas-radius-sm);
  --semi-border-radius-large: var(--saas-radius-md);
  --semi-shadow-elevated: var(--saas-shadow-md);
}

#root {
  min-height: 100vh;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 12%, rgba(14, 165, 233, 0.10), transparent 26%),
    radial-gradient(circle at 92% 10%, rgba(16, 185, 129, 0.08), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(59, 130, 246, 0.07), transparent 30%);
  z-index: 0;
}

#root,
.semi-layout,
.semi-layout-content,
.semi-layout-footer,
.semi-layout-header {
  position: relative;
  background: transparent !important;
}

.semi-card,
.semi-modal-content,
.semi-sidesheet-content,
.semi-dropdown-menu,
.semi-select-option-list,
.semi-cascader-option-list,
.semi-popover-content,
.semi-tooltip-wrapper,
.semi-banner,
.semi-descriptions {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  border-radius: var(--saas-radius-md) !important;
  box-shadow: var(--saas-shadow-md) !important;
  backdrop-filter: blur(10px);
}

.semi-card {
  overflow: hidden;
}

.semi-card-header {
  padding: 16px 18px !important;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.98));
  border-bottom: 1px solid rgba(226, 232, 240, 0.85);
}

.semi-card-body {
  padding: 18px !important;
}

.sidebar-container,
.sidebar-nav,
.semi-navigation,
.semi-navigation-sub,
.semi-navigation-list,
.semi-navigation-header,
.semi-navigation-footer {
  background: linear-gradient(180deg, #0f172a 0%, #111827 100%) !important;
}

.sidebar-container,
.semi-navigation {
  border-right: 1px solid rgba(148, 163, 184, 0.16) !important;
}

.sidebar-collapse-button {
  background: rgba(15, 23, 42, 0.96) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(148, 163, 184, 0.18) !important;
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.28) !important;
}

.semi-navigation .semi-navigation-item,
.semi-navigation .semi-navigation-sub-title,
.semi-navigation .semi-navigation-item-text,
.semi-navigation .semi-navigation-item-icon,
.semi-navigation .semi-navigation-footer,
.semi-navigation .semi-navigation-header {
  color: #cbd5e1 !important;
}

.semi-navigation .semi-navigation-item:hover,
.semi-navigation .semi-navigation-sub-title:hover {
  background: rgba(148, 163, 184, 0.12) !important;
}

.semi-navigation .semi-navigation-item-selected,
.semi-navigation .semi-navigation-item-selected:hover {
  background: linear-gradient(90deg, rgba(14, 165, 233, 0.24), rgba(14, 165, 233, 0.10)) !important;
  box-shadow: inset 3px 0 0 #38bdf8;
}

.semi-navigation .semi-navigation-item-selected .semi-navigation-item-text,
.semi-navigation .semi-navigation-item-selected .semi-navigation-item-icon {
  color: #f8fafc !important;
}

.semi-button {
  border-radius: 12px !important;
  font-weight: 600;
  box-shadow: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, border-color 0.16s ease;
}

.semi-button:hover {
  transform: translateY(-1px);
}

.semi-button-primary,
.semi-button-primary:not(.semi-button-borderless) {
  background: linear-gradient(135deg, var(--saas-primary) 0%, var(--saas-primary-hover) 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px rgba(14, 165, 233, 0.24) !important;
}

.semi-button-primary:hover,
.semi-button-primary:not(.semi-button-borderless):hover {
  background: linear-gradient(135deg, #22b8f2 0%, var(--saas-primary) 100%) !important;
  box-shadow: 0 12px 26px rgba(14, 165, 233, 0.28) !important;
}

.semi-button-tertiary,
.semi-button-secondary,
.semi-button-light,
.semi-button-borderless:not(.semi-button-primary) {
  border-color: rgba(203, 213, 225, 0.9) !important;
  background: rgba(255, 255, 255, 0.92) !important;
}

.semi-input-wrapper,
.semi-input-number,
.semi-input-textarea-wrapper,
.semi-select,
.semi-datepicker-range-input,
.semi-datepicker-input,
.semi-tagInput,
.semi-treeSelect {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(203, 213, 225, 0.92) !important;
  border-radius: 12px !important;
  box-shadow: var(--saas-shadow-sm);
}

.semi-input-wrapper:hover,
.semi-input-number:hover,
.semi-input-textarea-wrapper:hover,
.semi-select:hover,
.semi-datepicker-range-input:hover,
.semi-datepicker-input:hover,
.semi-tagInput:hover,
.semi-treeSelect:hover {
  border-color: rgba(14, 165, 233, 0.45) !important;
}

.semi-input-wrapper-focus,
.semi-input-number-focus,
.semi-input-textarea-focus,
.semi-select-focus,
.semi-tagInput-focus,
.semi-treeSelect-focus {
  border-color: rgba(14, 165, 233, 0.8) !important;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.10) !important;
}

.semi-form-field-label,
.semi-typography,
.semi-descriptions-item-label,
.semi-descriptions-item-value {
  color: var(--saas-text) !important;
}

.semi-tabs-bar {
  background: rgba(248, 250, 252, 0.92);
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 14px;
  padding: 6px;
}

.semi-tabs-tab {
  border-radius: 10px;
}

.semi-tabs-tab-button {
  border-radius: 10px !important;
  color: var(--saas-text-muted);
}

.semi-tabs-tab-active .semi-tabs-tab-button {
  background: #ffffff !important;
  color: var(--saas-text) !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.semi-table-wrapper,
.semi-table-container {
  border-radius: var(--saas-radius-md) !important;
  overflow: hidden;
}

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

.semi-table-thead > .semi-table-row > .semi-table-cell {
  background: #f8fafc !important;
  color: #475569 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  font-weight: 700;
}

.semi-table-tbody > .semi-table-row > .semi-table-cell {
  border-bottom: 1px solid #eef2f7 !important;
  background: rgba(255, 255, 255, 0.82);
}

.semi-table-tbody > .semi-table-row:hover > .semi-table-cell {
  background: #f8fbff !important;
}

.semi-tag,
.semi-badge,
.semi-pagination-item,
.semi-empty,
.semi-banner-light {
  border-radius: 999px;
}

.semi-tag {
  font-weight: 600;
  border: 1px solid rgba(203, 213, 225, 0.8) !important;
}

.semi-breadcrumb,
.semi-page-item,
.semi-pagination-item {
  color: var(--saas-text-soft) !important;
}

.semi-page-item-active,
.semi-pagination-item-active {
  background: rgba(14, 165, 233, 0.10) !important;
  color: var(--saas-primary-hover) !important;
}

.semi-modal-mask,
.semi-sidesheet-mask {
  backdrop-filter: blur(10px);
  background: rgba(15, 23, 42, 0.24) !important;
}

.semi-toast,
.semi-notification {
  border-radius: 14px !important;
  box-shadow: var(--saas-shadow-lg) !important;
}

.semi-card:hover,
.semi-modal-content:hover,
.semi-sidesheet-content:hover {
  box-shadow: var(--saas-shadow-lg) !important;
}

html.dark body,
body[theme-mode=dark] {
  background: #0b1220 !important;
}

html.dark body::before,
body[theme-mode=dark]::before {
  opacity: 0.4;
}

html.dark .semi-card,
html.dark .semi-modal-content,
html.dark .semi-sidesheet-content,
body[theme-mode=dark] .semi-card,
body[theme-mode=dark] .semi-modal-content,
body[theme-mode=dark] .semi-sidesheet-content {
  background: rgba(17, 24, 39, 0.92) !important;
}