/* ==================== TokenDance Design System (shadcn/ui CSS Variables) ==================== */
/* 这些变量叠加在 Semi Design 之上，供新的 shadcn 风格组件使用 */

:root {
  /* shadcn/ui 基础色板 — Slate 中性色调 (220° hue) */
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 98%;
  --secondary: 220 5% 96%;
  --secondary-foreground: 220 6% 10%;
  --muted: 220 5% 96%;
  --muted-foreground: 220 4% 56%;
  --accent: 220 5% 96%;
  --accent-foreground: 220 6% 10%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 0 0% 9%;
  --radius: 0.5rem;
  --link: 0 0% 9%;
  --link-hover: 0 0% 20%;
  --chart-1: 160 60% 45%;
  --chart-2: 217 91% 60%;
  --chart-3: 43 96% 56%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;
}

.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  --popover: 240 10% 3.9%;
  --popover-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 0 0% 9%;
  --secondary: 220 4% 16%;
  --secondary-foreground: 0 0% 98%;
  --muted: 220 4% 16%;
  --muted-foreground: 220 5% 65%;
  --accent: 220 4% 16%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;
  --border: 220 4% 16%;
  --input: 220 4% 16%;
  --ring: 222 56% 55%;
  --link: 222 56% 65%;
  --link-hover: 222 56% 55%;
  --chart-1: 160 60% 45%;
  --chart-2: 217 91% 60%;
  --chart-3: 43 96% 56%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;
}

/* 全局基础样式 — 使用新字体族 */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  color: hsl(var(--foreground));
  background-color: hsl(var(--background));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==================== Tailwind CSS 配置 ==================== */

/* ==================== Tailwind CSS 閰嶇疆 ==================== */
@layer tailwind-base, semi, tailwind-components, tailwind-utils;

@layer tailwind-base {
  @tailwind base;
}

@layer tailwind-components {
  @tailwind components;
}

@layer tailwind-utils {
  @tailwind utilities;
}

/* ==================== 鍏ㄥ眬鍩虹鏍峰紡 ==================== */
:root {
  --sidebar-width: 180px;
  --sidebar-width-collapsed: 60px;
  --sidebar-current-width: var(--sidebar-width);
}

body.sidebar-collapsed {
  --sidebar-current-width: var(--sidebar-width-collapsed);
}



/* 妗岄潰绔姝?body 绾靛悜婊氬姩 - 闃叉 VChart tooltip 瑙﹀彂椤甸潰婊氬姩鏉?*/
@media (min-width: 768px) {
  body {
    overflow-y: hidden;
  }
}

.app-layout {
  height: 100vh;
  height: 100dvh;
}

.app-sider {
  height: calc(100vh - 64px);
  height: calc(100dvh - 64px);
}

/*
 * 鎿嶇粌鍦?/console/playground锛歩OS Safari 鐐瑰嚮鍚庡湴鍧€鏍忔敹璧蜂細浣?100vh 鍙樺ぇ锛屽簳閮ㄥ尯鍩熻銆岄《楂樸€嶃€? * 浣跨敤 svh锛堝皬瑙嗗彛锛変负涓婚珮搴︼紝閬垮厤闅?UI 鍙樺寲璺冲彉锛涙棤 svh 鐨勬祻瑙堝櫒鍥為€€ 100vh銆? */
.playground-shell-h {
  height: calc(100vh - 66px);
  height: calc(100svh - 66px);
}

/* iOS锛氳緭鍏ユ瀛楀彿灏忎簬 16px 鏃惰仛鐒︿細寮哄埗缂╂斁椤甸潰 */
@media (max-width: 767px) {
  .playground-shell-h textarea,
  .playground-shell-h input:not([type='checkbox']):not([type='radio']):not(
      [type='hidden']
    ) {
    font-size: 16px !important;
  }
}

code {
  font-family:
    source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

/* ==================== 甯冨眬鐩稿叧鏍峰紡 ==================== */
.semi-layout::-webkit-scrollbar,
.semi-layout-content::-webkit-scrollbar,
.semi-sider::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.semi-layout,
.semi-layout-content,
.semi-sider {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ==================== 瀵艰埅鍜屼晶杈规爮鏍峰紡 ==================== */
.semi-navigation-item {
  margin-bottom: 4px !important;
  padding: 4px 12px !important;
}

.semi-navigation-sub-title {
  padding: 0 !important;
}

.semi-navigation-item-icon {
  justify-items: center;
  align-items: center;
}

.semi-navigation-item-icon-info {
  margin-right: 0;
}

.sidebar-nav .semi-navigation-item-text {
  flex: 1;
  min-width: 0;
}

.semi-navigation-item,
.semi-navigation-sub-title {
  height: 100% !important;
}

.semi-navigation-item-collapsed {
  height: 44px !important;
}

#root
  > section
  > header
  > section
  > div
  > div
  > div
  > div.semi-navigation-header-list-outer
  > div.semi-navigation-list-wrapper
  > ul
  > div
  > a
  > li
  > span {
  font-weight: 600 !important;
}

/* 鑷畾涔変晶杈规爮鏍峰紡 */
.sidebar-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: width 0.3s ease;
  background: var(--semi-color-bg-0);
}

.sidebar-nav {
  flex: 1;
  width: 100%;
  background: var(--semi-color-bg-0);
  height: 100%;
  overflow-x: hidden;
  border-right: none;
  overflow-y: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sidebar-nav::-webkit-scrollbar {
  display: none;
}

/* 渚ц竟鏍忓鑸」鏍峰紡 */
.sidebar-nav-item {
  border-radius: 6px;
  margin: 3px 8px;
  transition: all 0.15s ease;
  padding: 8px 12px;
}

.sidebar-nav-item:hover {
  background-color: rgba(var(--semi-blue-0), 0.08);
  color: var(--semi-color-primary);
}

.sidebar-nav-item-selected {
  background-color: rgba(var(--semi-blue-0), 0.12);
  color: var(--semi-color-primary);
  font-weight: 500;
}

/* 鍥炬爣瀹瑰櫒鏍峰紡 */
.sidebar-icon-container {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  transition: all 0.2s ease;
}

.sidebar-sub-icon-container {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  margin-left: 1px;
  transition: all 0.2s ease;
}

/* 鍒嗗壊绾挎牱寮?*/
.sidebar-divider {
  margin: 4px 8px;
  opacity: 0.15;
}

/* 鍒嗙粍鏍囩鏍峰紡 */
.sidebar-group-label {
  padding: 4px 15px 8px;
  color: var(--semi-color-text-2);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.8;
}

/* 搴曢儴鎶樺彔鎸夐挳 */
.sidebar-collapse-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  margin-top: auto;
  cursor: pointer;
  background-color: var(--semi-color-bg-0);
  position: sticky;
  bottom: 0;
  z-index: 10;
  box-shadow: 0 -10px 10px -5px var(--semi-color-bg-0);
  backdrop-filter: blur(4px);
  border-top: 1px solid rgba(var(--semi-grey-0), 0.08);
}

.sidebar-collapse-button-inner {
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--semi-color-fill-0);
  transition: all 0.2s ease;
}

.sidebar-collapse-icon-container {
  display: inline-block;
  transition: transform 0.3s ease;
}

/* 渚ц竟鏍忓尯鍩熷鍣?*/
.sidebar-section {
  padding-top: 12px;
}

@media (max-width: 767px) {
  .sidebar-container {
    background: var(--semi-color-bg-1);
    border-right: 1px solid var(--semi-color-border);
  }

  .sidebar-nav {
    background: var(--semi-color-bg-1);
  }

  .sidebar-collapse-button {
    background-color: var(--semi-color-bg-1);
    box-shadow: 0 -10px 10px -5px var(--semi-color-bg-1);
  }
}

/* ==================== 鑱婂ぉ鐣岄潰鏍峰紡 ==================== */
.semi-chat {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: 100%;
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
}

.semi-chat-chatBox {
  max-width: 100% !important;
  overflow: hidden !important;
}

.semi-chat-chatBox-wrap {
  max-width: 100% !important;
  overflow: hidden !important;
}

.semi-chat-chatBox-content {
  min-width: auto;
  word-break: break-word;
  max-width: 100% !important;
  overflow-wrap: break-word !important;
}

/* playground 鑱婂ぉ姘旀场瀹藉害闄愬埗锛岄伩鍏嶅獟浣撳唴瀹规妸澶栧眰瀹瑰櫒鎾戞弧 */
.semi-chat .semi-chat-chatBox-content {
  max-width: min(100%, 780px) !important;
}

.semi-chat .semi-chat-chatBox-content-bubble {
  max-width: min(100%, 780px) !important;
  overflow-wrap: anywhere;
}

.semi-chat-content {
  max-width: 100% !important;
  overflow: hidden !important;
}

.semi-chat-list {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.semi-chat-container {
  overflow-x: hidden !important;
}

.semi-chat-chatBox-action {
  column-gap: 0 !important;
}

.semi-chat-inputBox-clearButton.semi-button .semi-icon {
  font-size: 20px !important;
}

/* 闅愯棌鎵€鏈夎亰澶╃浉鍏冲尯鍩熺殑婊氬姩鏉?*/
.semi-chat::-webkit-scrollbar,
.semi-chat-chatBox::-webkit-scrollbar,
.semi-chat-chatBox-wrap::-webkit-scrollbar,
.semi-chat-chatBox-content::-webkit-scrollbar,
.semi-chat-content::-webkit-scrollbar,
.semi-chat-list::-webkit-scrollbar,
.semi-chat-container::-webkit-scrollbar {
  display: none;
}

.semi-chat,
.semi-chat-chatBox,
.semi-chat-chatBox-wrap,
.semi-chat-chatBox-content,
.semi-chat-content,
.semi-chat-list,
.semi-chat-container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ==================== 缁勪欢鐗瑰畾鏍峰紡 ==================== */
/* SelectableButtonGroup */
.sbg-button .semi-button-content {
  min-width: 0 !important;
}

.sbg-content {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
}

.sbg-ellipsis {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Badge for count/multiplier in filter buttons */
.sbg-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  background-color: var(--semi-color-fill-0);
  color: var(--semi-color-text-2);
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.sbg-badge-active {
  background-color: var(--semi-color-primary-light-active);
  color: var(--semi-color-primary);
}

/* ---- SelectableButtonGroup color variants ---- */
.sbg-variant-violet {
  --semi-color-primary: #6d28d9;
  --semi-color-primary-light-default: rgba(124, 58, 237, 0.08);
  --semi-color-primary-light-hover: rgba(124, 58, 237, 0.15);
  --semi-color-primary-light-active: rgba(124, 58, 237, 0.22);
}

.sbg-variant-teal {
  --semi-color-primary: #0f766e;
  --semi-color-primary-light-default: rgba(20, 184, 166, 0.08);
  --semi-color-primary-light-hover: rgba(20, 184, 166, 0.15);
  --semi-color-primary-light-active: rgba(20, 184, 166, 0.22);
}

.sbg-variant-amber {
  --semi-color-primary: #b45309;
  --semi-color-primary-light-default: rgba(245, 158, 11, 0.08);
  --semi-color-primary-light-hover: rgba(245, 158, 11, 0.15);
  --semi-color-primary-light-active: rgba(245, 158, 11, 0.22);
}

.sbg-variant-rose {
  --semi-color-primary: #be123c;
  --semi-color-primary-light-default: rgba(244, 63, 94, 0.08);
  --semi-color-primary-light-hover: rgba(244, 63, 94, 0.15);
  --semi-color-primary-light-active: rgba(244, 63, 94, 0.22);
}

.sbg-variant-green {
  --semi-color-primary: #047857;
  --semi-color-primary-light-default: rgba(16, 185, 129, 0.08);
  --semi-color-primary-light-hover: rgba(16, 185, 129, 0.15);
  --semi-color-primary-light-active: rgba(16, 185, 129, 0.22);
}

/* Dark mode: lighter text, slightly stronger backgrounds */
html.dark .sbg-variant-violet {
  --semi-color-primary: #a78bfa;
  --semi-color-primary-light-default: rgba(139, 92, 246, 0.14);
  --semi-color-primary-light-hover: rgba(139, 92, 246, 0.22);
  --semi-color-primary-light-active: rgba(139, 92, 246, 0.3);
}

html.dark .sbg-variant-teal {
  --semi-color-primary: #2dd4bf;
  --semi-color-primary-light-default: rgba(45, 212, 191, 0.14);
  --semi-color-primary-light-hover: rgba(45, 212, 191, 0.22);
  --semi-color-primary-light-active: rgba(45, 212, 191, 0.3);
}

html.dark .sbg-variant-amber {
  --semi-color-primary: #fbbf24;
  --semi-color-primary-light-default: rgba(251, 191, 36, 0.14);
  --semi-color-primary-light-hover: rgba(251, 191, 36, 0.22);
  --semi-color-primary-light-active: rgba(251, 191, 36, 0.3);
}

html.dark .sbg-variant-rose {
  --semi-color-primary: #fb7185;
  --semi-color-primary-light-default: rgba(251, 113, 133, 0.14);
  --semi-color-primary-light-hover: rgba(251, 113, 133, 0.22);
  --semi-color-primary-light-active: rgba(251, 113, 133, 0.3);
}

html.dark .sbg-variant-green {
  --semi-color-primary: #34d399;
  --semi-color-primary-light-default: rgba(52, 211, 153, 0.14);
  --semi-color-primary-light-hover: rgba(52, 211, 153, 0.22);
  --semi-color-primary-light-active: rgba(52, 211, 153, 0.3);
}

/* Tabs缁勪欢鏍峰紡 */
.semi-tabs-content {
  padding: 0 !important;
  height: calc(100% - 40px) !important;
  flex: 1 !important;
}

.semi-tabs-content .semi-tabs-pane {
  height: 100% !important;
  overflow: hidden !important;
}

.semi-tabs-content .semi-tabs-pane > div {
  height: 100% !important;
}

/* 琛ㄦ牸鏍峰紡 */
.tableShow {
  display: revert;
}

.tableHiddle {
  display: none !important;
}

/* 椤佃剼鏍峰紡 */
.custom-footer {
  font-size: 1.1em;
}
.custom-footer.na-cb6feafeb3990c78 {
  position: relative;
}

/* 鍗＄墖鍐呭瀹瑰櫒閫氱敤鏍峰紡 */
.card-content-container {
  position: relative;
}

.card-content-fade-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  background: linear-gradient(transparent, var(--semi-color-bg-1));
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* ==================== 璋冭瘯闈㈡澘鐗瑰畾鏍峰紡 ==================== */
.debug-panel .semi-tabs {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

.debug-panel .semi-tabs-bar {
  flex-shrink: 0 !important;
}

.debug-panel .semi-tabs-content {
  flex: 1 !important;
  overflow: hidden !important;
}

/* ==================== 婊氬姩鏉℃牱寮忕粺涓€绠＄悊 ==================== */
/* 閫氱敤闅愯棌婊氬姩鏉″伐鍏风被 */
.scrollbar-hide {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  /* Chrome, Safari, Opera */
}

/* 琛ㄦ牸婊氬姩鏉℃牱寮?*/
.semi-table-body::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.semi-table-body::-webkit-scrollbar-thumb {
  background: rgba(var(--semi-grey-2), 0.3);
  border-radius: 2px;
}

.semi-table-body::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--semi-grey-2), 0.5);
}

.semi-table-body::-webkit-scrollbar-track {
  background: transparent;
}

/* 渚ц竟鎶藉眽婊氬姩鏉℃牱寮?*/
.semi-sidesheet-body::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.semi-sidesheet-body::-webkit-scrollbar-thumb {
  background: rgba(var(--semi-grey-2), 0.3);
  border-radius: 2px;
}

.semi-sidesheet-body::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--semi-grey-2), 0.5);
}

.semi-sidesheet-body::-webkit-scrollbar-track {
  background: transparent;
}

/* 闅愯棌鍐呭鍖哄煙婊氬姩鏉?*/
.pricing-scroll-hide,
.model-test-scroll,
.card-content-scroll,
.model-settings-scroll,
.thinking-content-scroll,
.custom-request-textarea .semi-input,
.custom-request-textarea textarea,
.notice-content-scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.pricing-scroll-hide::-webkit-scrollbar,
.model-test-scroll::-webkit-scrollbar,
.card-content-scroll::-webkit-scrollbar,
.model-settings-scroll::-webkit-scrollbar,
.thinking-content-scroll::-webkit-scrollbar,
.custom-request-textarea .semi-input::-webkit-scrollbar,
.custom-request-textarea textarea::-webkit-scrollbar,
.notice-content-scroll::-webkit-scrollbar {
  display: none;
}

/* 鍥剧墖鍒楄〃婊氬姩鏉℃牱寮?*/
.image-list-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.image-list-scroll::-webkit-scrollbar-thumb {
  background: var(--semi-color-tertiary-light-default);
  border-radius: 3px;
}

.image-list-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--semi-color-tertiary);
}

.image-list-scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* ==================== 鍚屾鍊嶇巼 - 娓犻亾閫夋嫨鍣?==================== */

.components-transfer-source-item,
.components-transfer-selected-item {
  display: flex;
  align-items: center;
  padding: 8px;
}

.semi-transfer-left-list,
.semi-transfer-right-list {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.semi-transfer-left-list::-webkit-scrollbar,
.semi-transfer-right-list::-webkit-scrollbar {
  display: none;
}

.components-transfer-source-item .semi-checkbox,
.components-transfer-selected-item .semi-checkbox {
  display: flex;
  align-items: center;
  width: 100%;
}

.components-transfer-source-item .semi-avatar,
.components-transfer-selected-item .semi-avatar {
  margin-right: 12px;
  flex-shrink: 0;
}

.components-transfer-source-item .info,
.components-transfer-selected-item .info {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.components-transfer-source-item .name,
.components-transfer-selected-item .name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.components-transfer-source-item .email,
.components-transfer-selected-item .email {
  font-size: 12px;
  color: var(--semi-color-text-2);
  display: flex;
  align-items: center;
}

.components-transfer-selected-item .semi-icon-close {
  margin-left: 8px;
  cursor: pointer;
  color: var(--semi-color-text-2);
}

.components-transfer-selected-item .semi-icon-close:hover {
  color: var(--semi-color-text-0);
}

/* ==================== 鏈閫氱煡闂厜鏁堟灉 ==================== */
@keyframes sweep-shine {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.shine-text {
  background: linear-gradient(
    90deg,
    currentColor 0%,
    currentColor 40%,
    rgba(255, 255, 255, 0.9) 50%,
    currentColor 60%,
    currentColor 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sweep-shine 4s linear infinite;
}

.dark .shine-text {
  background: linear-gradient(
    90deg,
    currentColor 0%,
    currentColor 40%,
    #facc15 50%,
    currentColor 60%,
    currentColor 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ==================== ScrollList 瀹氬埗鏍峰紡 ==================== */
.semi-scrolllist,
.semi-scrolllist * {
  -ms-overflow-style: none;
  /* IE, Edge */
  scrollbar-width: none;
  /* Firefox */
  background: transparent !important;
}

.semi-scrolllist::-webkit-scrollbar,
.semi-scrolllist *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

.semi-scrolllist-body {
  padding: 1px !important;
}

.semi-scrolllist-list-outer {
  padding-right: 0 !important;
}

/* ==================== Banner 鑳屾櫙妯＄硦鐞?==================== */
.blur-ball {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: -1;
}

.blur-ball-indigo {
  background: #6366f1;
  /* indigo-500 */
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.5;
}

.blur-ball-teal {
  background: #14b8a6;
  /* teal-400 */
  top: 200px;
  left: 30%;
  opacity: 0.4;
}

/* 娴呰壊涓婚涓嬭妯＄硦鐞冩洿鏌斿拰 */
html:not(.dark) .blur-ball-indigo {
  opacity: 0.25;
}

html:not(.dark) .blur-ball-teal {
  opacity: 0.2;
}

/* ==================== Home Page Clean Background ==================== */
.home-banner-bg {
  position: relative;
  background: linear-gradient(180deg, #e8f0fe 0%, #ffffff 50%, #f8f9fa 100%);
}

/* 娴呰壊涓婚 - 娓呮櫚鐨勬笎鍙樻晥鏋?*/
html:not(.dark) .home-banner-bg {
  background: linear-gradient(180deg, #e8f0fe 0%, #ffffff 50%, #f8f9fa 100%);
}

/* 鏆楄壊涓婚 */
html.dark .home-banner-bg {
  background: linear-gradient(
    180deg,
    rgba(99, 102, 241, 0.1) 0%,
    transparent 50%,
    rgba(20, 184, 166, 0.08) 100%
  );
}

/* 棣栭〉銆岀敵璇锋垚涓轰唬鐞嗐€嶏細鎵佸钩涓昏壊 + 杞诲井澶栧湀鍏夛紙鏃犲帤鎶曞奖/鍐呴珮鍏夛級 */
@keyframes home-distributor-cta-glow {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.14),
      0 0 14px rgba(99, 102, 241, 0.28);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.18),
      0 0 22px rgba(99, 102, 241, 0.38);
  }
}

.home-distributor-cta-btn {
  font-weight: 600 !important;
  border: none !important;
  background: var(--semi-color-primary) !important;
  color: #fff !important;
  animation: home-distributor-cta-glow 3s ease-in-out infinite;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease;
}

.home-distributor-cta-btn:hover {
  background: var(--semi-color-primary-hover) !important;
}

html.dark .home-distributor-cta-btn {
  animation-name: home-distributor-cta-glow-dark;
}

@keyframes home-distributor-cta-glow-dark {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.1),
      0 0 16px rgba(129, 140, 248, 0.32);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.14),
      0 0 24px rgba(167, 139, 250, 0.4);
  }
}

/* 棣栭〉鍒嗛攢鎷涘嫙鏉★細杞婚噺鍏ュ満 + 鎮仠楂樹寒 */
@keyframes home-distributor-recruit-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes home-distributor-recruit-shimmer {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.55;
  }
}

.home-distributor-recruit-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  animation: home-distributor-recruit-in 0.65s cubic-bezier(0.22, 1, 0.36, 1)
    both;
  transition:
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s ease;
}

.home-distributor-recruit-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    120deg,
    var(--semi-color-primary-light-default) 0%,
    transparent 45%,
    var(--semi-color-primary-light-hover) 100%
  );
  animation: home-distributor-recruit-shimmer 5s ease-in-out infinite;
}

.home-distributor-recruit-card:hover {
  border-color: var(--semi-color-primary-light-active);
  box-shadow: 0 12px 40px -16px var(--semi-color-primary-light-hover);
  transform: translateY(-2px);
}

.home-distributor-recruit-card > * {
  position: relative;
  z-index: 1;
}

/* 浠ｇ悊鐢宠椤碉細鏍囬鍖鸿儗鏅厜鏂?+ 鏂囨鍏ュ満 */
@keyframes distributor-apply-blob {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(8%, -6%) scale(1.05);
  }
  66% {
    transform: translate(-6%, 4%) scale(0.96);
  }
}

@keyframes distributor-apply-fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes distributor-apply-icon-soft {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.06),
      0 8px 24px -12px rgba(99, 102, 241, 0.35);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.1),
      0 10px 28px -10px rgba(99, 102, 241, 0.45);
  }
}

.distributor-apply-hero {
  isolation: isolate;
}

/* 浠ｇ悊鐢宠涓诲崱鐗囷細鏁翠綋娓愬彉搴?+ 娣¤竟绾?+ 杞荤珛浣撳厜锛堜笂娌块珮鍏?/ 涓嬫部娴呭奖锛?*/
.distributor-apply-main-card.semi-card {
  background: linear-gradient(
    152deg,
    var(--semi-color-primary-light-default) 0%,
    var(--semi-color-bg-0) 42%,
    color-mix(in srgb, var(--semi-color-primary) 10%, var(--semi-color-fill-0))
      100%
  );
  border: 1px solid
    color-mix(in srgb, var(--semi-color-border) 32%, var(--semi-color-bg-0));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--semi-color-border) 8%, transparent),
    0 1px 0 0 color-mix(in srgb, white 55%, transparent),
    0 2px 6px -1px
      color-mix(in srgb, var(--semi-color-primary) 5%, rgba(15, 23, 42, 0.05)),
    0 10px 28px -6px
      color-mix(in srgb, var(--semi-color-primary) 7%, rgba(15, 23, 42, 0.06));
}

.distributor-apply-main-card .semi-card-body {
  background-color: transparent;
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

/* 鍒嗛攢鐢宠 - 缁嗘粴鍔ㄦ潯锛堜綆瀵规瘮銆佹贰鑹诧級锛氳鏄庡尯鐙珛婊氬姩 鎴?绐勫睆鏁村崱鍗曞垪婊氬姩 */
.distributor-apply-intro-scroll,
.distributor-apply-card-stacked-scroll {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: color-mix(
      in srgb,
      var(--semi-color-primary) 18%,
      var(--semi-color-fill-1)
    )
    color-mix(in srgb, var(--semi-color-border) 12%, transparent);
}

.distributor-apply-intro-scroll::-webkit-scrollbar,
.distributor-apply-card-stacked-scroll::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

.distributor-apply-intro-scroll::-webkit-scrollbar-track,
.distributor-apply-card-stacked-scroll::-webkit-scrollbar-track {
  margin: 6px 0 8px;
  background: color-mix(in srgb, var(--semi-color-border) 12%, transparent);
  border-radius: 100px;
}

.distributor-apply-intro-scroll::-webkit-scrollbar-thumb,
.distributor-apply-card-stacked-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--semi-color-primary) 16%, var(--semi-color-fill-2))
      0%,
    color-mix(in srgb, var(--semi-color-primary) 22%, var(--semi-color-fill-1))
      100%
  );
  border-radius: 100px;
  border: 2px solid
    color-mix(in srgb, var(--semi-color-bg-0) 92%, var(--semi-color-border));
  background-clip: padding-box;
}

.distributor-apply-intro-scroll::-webkit-scrollbar-thumb:hover,
.distributor-apply-card-stacked-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--semi-color-primary) 26%, var(--semi-color-fill-1))
      0%,
    color-mix(in srgb, var(--semi-color-primary) 34%, var(--semi-color-fill-0))
      100%
  );
  background-clip: padding-box;
}

/* 浠ｇ悊鐢宠椤碉細鍥哄畾涓诲尯鍩熴€侀伩鍏嶅灞傛粴鍔紝浠呭崱鐗囧唴閮ㄦ粴鍔?*/
.distributor-apply-page-root {
  position: fixed;
  z-index: 1;
  top: 64px;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  box-sizing: border-box;
  padding: 12px 16px;
  overflow: hidden;
  pointer-events: auto;
}

@media (min-width: 768px) {
  .distributor-apply-page-root {
    left: var(--sidebar-current-width, 220px);
    padding: 20px 24px;
  }
}

html.dark .distributor-apply-main-card.semi-card {
  background: linear-gradient(
    152deg,
    color-mix(in srgb, var(--semi-color-primary) 24%, var(--semi-color-bg-0)) 0%,
    var(--semi-color-bg-0) 45%,
    color-mix(in srgb, var(--semi-color-primary) 14%, var(--semi-color-bg-1))
      100%
  );
  border: 1px solid
    color-mix(in srgb, var(--semi-color-border) 38%, var(--semi-color-bg-0));
  box-shadow:
    0 0 0 1px color-mix(in srgb, white 6%, transparent),
    0 1px 0 0 color-mix(in srgb, white 8%, transparent),
    0 2px 8px -2px rgba(0, 0, 0, 0.32),
    0 10px 28px -8px
      color-mix(in srgb, var(--semi-color-primary) 10%, rgba(0, 0, 0, 0.25));
}

.distributor-apply-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  pointer-events: none;
  z-index: 0;
  animation: distributor-apply-blob 12s ease-in-out infinite;
}

.distributor-apply-hero-orb--a {
  width: 180px;
  height: 180px;
  top: -60px;
  right: -40px;
  background: radial-gradient(
    circle,
    var(--semi-color-primary-light-active) 0%,
    transparent 70%
  );
}

.distributor-apply-hero-orb--b {
  width: 140px;
  height: 140px;
  bottom: -50px;
  left: -30px;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--semi-color-primary) 22%, transparent) 0%,
    transparent 70%
  );
  animation-delay: -4s;
}

.distributor-apply-hero-title {
  animation: distributor-apply-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1)
    0.05s both;
}

.distributor-apply-hero-desc {
  animation: distributor-apply-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1)
    0.14s both;
}

.distributor-apply-hero-icon {
  border-color: color-mix(
    in srgb,
    var(--semi-color-border) 34%,
    var(--semi-color-bg-0)
  ) !important;
  animation:
    distributor-apply-fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) both,
    distributor-apply-icon-soft 4s ease-in-out infinite 0.6s;
}

html.dark .distributor-apply-hero .distributor-apply-hero-icon {
  border-color: color-mix(
    in srgb,
    var(--semi-color-border) 45%,
    var(--semi-color-bg-0)
  ) !important;
}

/* 宸?涓婏細璇存槑 涓?鍙?涓嬶細琛ㄥ崟 涔嬮棿鍒嗛殧绾匡紙楂樻贩鍏ュ簳鑹诧紝姣旈粯璁?border 鏇存贰锛?*/
.distributor-apply-panels-divider {
  border-color: color-mix(
    in srgb,
    var(--semi-color-border) 26%,
    var(--semi-color-bg-0)
  ) !important;
}

html.dark .distributor-apply-hero-orb--a {
  background: radial-gradient(
    circle,
    rgba(129, 140, 248, 0.28) 0%,
    transparent 70%
  );
}

html.dark .distributor-apply-hero-orb--b {
  background: radial-gradient(
    circle,
    rgba(45, 212, 191, 0.18) 0%,
    transparent 70%
  );
}

@media (prefers-reduced-motion: reduce) {
  .home-distributor-recruit-card,
  .home-distributor-recruit-card::before,
  .distributor-apply-hero-orb,
  .distributor-apply-hero-title,
  .distributor-apply-hero-desc,
  .distributor-apply-hero-icon {
    animation: none !important;
  }

  .home-distributor-recruit-card:hover {
    transform: none;
  }
}

/* ==================== 鍗＄墖椹崱榫欐ā绯婄悆锛堢被灏佽锛?==================== */
/* 浣跨敤鏂瑰紡锛氱粰瀹瑰櫒鍔犱笂 with-pastel-balls 绫诲嵆鍙紝鏃犻渶鍦?JSX 涓彃鍏ラ澶栬妭鐐?*/
.with-pastel-balls {
  position: relative;
  overflow: hidden;
  /* 榛樿鍙橀噺锛堟槑浜ā寮忥級 */
  --pb1: #ffd1dc;
  /* 绮?*/
  --pb2: #e5d4ff;
  /* 钖拌。鑽?*/
  --pb3: #d1fff6;
  /* 钖勮嵎 */
  --pb4: #ffe5d9;
  /* 妗?*/
  --pb-opacity: 0.55;
  --pb-blur: 60px;
}

.with-pastel-balls::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at -5% -10%, var(--pb1) 0%, transparent 60%),
    radial-gradient(circle at 105% -10%, var(--pb2) 0%, transparent 55%),
    radial-gradient(circle at 5% 110%, var(--pb3) 0%, transparent 55%),
    radial-gradient(circle at 105% 110%, var(--pb4) 0%, transparent 50%);
  filter: blur(var(--pb-blur));
  opacity: var(--pb-opacity);
  transform: translateZ(0);
}

/* 鏆楅粦妯″紡涓嬫洿鏌斿拰鐨勮壊褰╁拰閫忔槑搴?*/
html.dark .with-pastel-balls {
  /* 浣跨敤涓庢槑浜ā寮忎竴鑷寸殑鈥滃垰鎵嶉偅缁勨€濋┈鍗￠緳鑹诧紝浣嗘暣浣撴洿鏌斿拰 */
  --pb1: #ffd1dc;
  /* 绮?*/
  --pb2: #e5d4ff;
  /* 钖拌。鑽?*/
  --pb3: #d1fff6;
  /* 钖勮嵎 */
  --pb4: #ffe5d9;
  /* 妗?*/
  --pb-opacity: 0.36;
  --pb-blur: 65px;
}

/* 鏆楅粦妯″紡涓嬬敤鏇存煍鍜岀殑娣峰悎妯″紡閬垮厤绐佸厐鐨勯珮浜?*/
html.dark .with-pastel-balls::before {
  mix-blend-mode: screen;
}

/* ==================== 琛ㄦ牸鍗＄墖婊氬姩璁剧疆 ==================== */
.table-scroll-card {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 110px);
  max-height: calc(100vh - 110px);
}

.table-scroll-card .semi-card-body {
  flex: 1 1 auto;
  overflow-y: auto;
}

.table-scroll-card .semi-card-body::-webkit-scrollbar {
  width: 6px;
}

.table-scroll-card .semi-card-body::-webkit-scrollbar-thumb {
  background: rgba(var(--semi-grey-2), 0.3);
  border-radius: 2px;
}

.table-scroll-card .semi-card-body::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--semi-grey-2), 0.5);
}

.table-scroll-card .semi-card-body::-webkit-scrollbar-track {
  background: transparent;
}

@media (max-width: 767px) {
  .table-scroll-card {
    height: calc(100vh - 77px);
    max-height: calc(100vh - 77px);
  }
}

/*
 * 浠ｇ悊绠＄悊椤碉細Tabs 鏍囩鏍忎笌涓嬫柟 Card 鐨勯棿璺濄€? * 鍏ㄥ眬 `.semi-tabs-content { padding: 0 !important; }` 浼氱洊鎺夊瓙鍏冪礌 margin锛屾澶勭敤鏇撮珮浼樺厛绾ц鐩栦笂鍐呰竟璺濄€? */
.distributor-admin-tabs.semi-tabs .semi-tabs-content {
  padding-top: 0.75rem !important;
}

/* ==================== 妯″瀷瀹氫环椤甸潰甯冨眬 ==================== */
.pricing-layout {
  height: calc(100vh - 60px);
  overflow: hidden;
  margin-top: 60px;
}

.pricing-sidebar {
  width: clamp(280px, 24vw, 520px) !important;
  min-width: clamp(280px, 24vw, 520px) !important;
  max-width: clamp(280px, 24vw, 520px) !important;
  height: calc(100vh - 60px);
  background-color: var(--semi-color-bg-0);
  overflow: auto;
}

.pricing-content {
  height: calc(100vh - 60px);
  background-color: var(--semi-color-bg-0);
  display: flex;
  flex-direction: column;
}

.pricing-pagination-divider {
  border-color: var(--semi-color-border);
}

.pricing-content-mobile {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.pricing-search-header {
  padding: 0.5rem;
  background-color: var(--semi-color-bg-0);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 5;
}

.pricing-view-container {
  flex: 1;
  overflow: auto;
}

.pricing-view-container-mobile {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

/* ─── Models 新布局 ─── */
.models-page-layout {
  display: flex;
  max-width: 1440px;
  margin: 0 auto;
  padding: 56px 24px 0;
  gap: 32px;
  height: 100vh;
  overflow: hidden;
  box-sizing: border-box;
}

.models-sidebar {
  width: 280px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 0 16px 24px 0;
  border-right: 1px solid var(--border-color, #e5e7eb);
}

.models-sidebar::-webkit-scrollbar {
  width: 4px;
}
.models-sidebar::-webkit-scrollbar-thumb {
  background: transparent;
}
.models-sidebar:hover::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: 2px;
}

.models-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.models-tabs-bar {
  display: flex;
  gap: 8px;
  padding: 16px 0;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.models-tab-btn {
  padding: 6px 20px;
  border-radius: 20px;
  border: 1px solid var(--border-color, #d1d5db);
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-muted, #6b7280);
  transition: all 0.2s;
  white-space: nowrap;
}
.models-tab-btn:hover {
  border-color: var(--primary-color, #3b82f6);
  color: var(--primary-color, #3b82f6);
}
.models-tab-btn.active {
  background: var(--primary-color, #3b82f6);
  color: white;
  border-color: var(--primary-color, #3b82f6);
}

.models-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 16px 0;
  overflow-y: auto;
  flex: 1;
}

.models-card-grid::-webkit-scrollbar {
  width: 6px;
}
.models-card-grid::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.12);
  border-radius: 3px;
}

/* 筛选面板标题 */
.models-filter-section {
  margin-bottom: 24px;
}
.models-filter-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, #6b7280);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.models-filter-item {
  display: flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 14px;
  color: var(--text-color, #374151);
  gap: 8px;
}
.models-filter-item:hover {
  background: var(--hover-bg, #f3f4f6);
}
.models-filter-item.active {
  background: var(--primary-light, #eff6ff);
  color: var(--primary-color, #3b82f6);
  font-weight: 500;
}
.models-filter-item .count {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted, #9ca3af);
}

/* ==================== semi-ui 缁勪欢鑷畾涔夋牱寮?==================== */
.semi-card-header,
.semi-card-body {
  padding: 10px !important;
}

/* ==================== 浣跨敤鏃ュ織: channel affinity tag ==================== */
.semi-tag.channel-affinity-tag {
  border: 1px solid rgba(var(--semi-cyan-5), 0.35);
  background-color: rgba(var(--semi-cyan-5), 0.15);
  color: rgba(var(--semi-cyan-9), 1);
  cursor: help;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease;
}

.semi-tag.channel-affinity-tag:hover {
  background-color: rgba(var(--semi-cyan-5), 0.22);
  border-color: rgba(var(--semi-cyan-5), 0.6);
  box-shadow: 0 0 0 2px rgba(var(--semi-cyan-5), 0.18);
}

.semi-tag.channel-affinity-tag:active {
  background-color: rgba(var(--semi-cyan-5), 0.28);
}

.semi-tag.channel-affinity-tag .channel-affinity-tag-content {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* ==================== 鑷畾涔夊渾瑙掓牱寮?==================== */
.semi-radio,
.semi-tagInput,
.semi-input-textarea-wrapper,
.semi-navigation-sub-title,
.semi-chat-inputBox-sendButton,
.semi-page-item,
.semi-navigation-item,
.semi-tag-closable,
.semi-input-wrapper,
.semi-tabs-tab-button,
.semi-select,
.semi-button,
.semi-datepicker-range-input {
  border-radius: 10px !important;
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Channel advanced settings side panel animations */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.ec-dbcd0a3c01b55203 {
  forced-color-adjust: auto;
}




/* ==================== TokenDance Home Page Styles ==================== */
.home-page {
  font-family: "Source Serif 4", "Noto Serif SC", Georgia, serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.home-page ::selection {
  background-color: #000;
  color: #fff;
}

@keyframes homeFadeIn {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

.home-fade-in {
  animation: homeFadeIn 0.6s ease-out both;
}

.home-fade-in-delay-1 {
  animation: homeFadeIn 0.6s ease-out 0.2s both;
}

.home-fade-in-delay-2 {
  animation: homeFadeIn 0.6s ease-out 0.4s both;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.home-marquee {
  animation: marquee 20s linear infinite;
  display: flex;
  width: fit-content;
}

.font-heading {
  font-family: "Source Serif 4", "Noto Serif SC", Georgia, serif;
}

.font-body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}