/* ============================================================
   Dexuebao UI 升级：立体感 + 动效（参考 wxbai 风格）
   注入方式：nginx sub_filter，可随时移除回滚
   适配 Semi Design（new-api default / classic 两套主题通用）
   ============================================================ */

:root {
  --dxb-radius: 14px;
  --dxb-accent: #11ab9b;
  --dxb-accent-2: #0d8f82;
  --dxb-accent-3: #5f7cf0;
  --dxb-ease: cubic-bezier(.22, .68, .28, .99);
  --dxb-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --dxb-shadow-md: 0 4px 10px -2px rgba(16, 24, 40, .07), 0 14px 30px -14px rgba(16, 24, 40, .16);
  --dxb-shadow-lg: 0 12px 24px -8px rgba(16, 24, 40, .16), 0 28px 56px -20px rgba(76, 110, 245, .22);
}

/* ---------- 页面背景：柔和渐变光晕 ---------- */
body {
  background:
    radial-gradient(1100px 480px at 88% -120px, rgba(124, 92, 255, .075), transparent 60%),
    radial-gradient(900px 460px at -8% 18%, rgba(76, 110, 245, .065), transparent 55%),
    radial-gradient(700px 380px at 55% 110%, rgba(34, 184, 207, .05), transparent 55%),
    #f4f6fb !important;
}

body[theme-mode="dark"] {
  background:
    radial-gradient(1100px 480px at 88% -120px, rgba(124, 92, 255, .10), transparent 60%),
    radial-gradient(900px 460px at -8% 18%, rgba(76, 110, 245, .08), transparent 55%),
    #101319 !important;
}

/* ---------- 卡片：分层阴影 + 悬浮抬升 + 顶部流光 ---------- */
.semi-card {
  border-radius: var(--dxb-radius) !important;
  border: 1px solid rgba(28, 36, 54, .075) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%) !important;
  box-shadow: var(--dxb-shadow-sm), var(--dxb-shadow-md) !important;
  transition: transform .32s var(--dxb-ease), box-shadow .32s var(--dxb-ease), border-color .32s var(--dxb-ease) !important;
  position: relative;
  overflow: hidden;
}

.semi-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--dxb-shadow-lg) !important;
  border-color: rgba(76, 110, 245, .30) !important;
}

.semi-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 5%, rgba(76, 110, 245, .55), rgba(124, 92, 255, .55), transparent 95%);
  opacity: 0;
  transition: opacity .32s var(--dxb-ease);
  pointer-events: none;
}

.semi-card:hover::after { opacity: 1; }

body[theme-mode="dark"] .semi-card {
  background: linear-gradient(180deg, #1a1f29 0%, #171b24 100%) !important;
  border-color: rgba(255, 255, 255, .07) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35), 0 16px 36px -16px rgba(0, 0, 0, .55) !important;
}

body[theme-mode="dark"] .semi-card:hover {
  border-color: rgba(124, 140, 255, .35) !important;
  box-shadow: 0 16px 34px -10px rgba(0, 0, 0, .6), 0 30px 60px -22px rgba(90, 110, 255, .28) !important;
}

/* ---------- 入场动画：卡片依次浮现 ---------- */
@keyframes dxbRise {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.semi-card { animation: dxbRise .5s var(--dxb-ease) backwards; }
.semi-card:nth-of-type(1) { animation-delay: .03s; }
.semi-card:nth-of-type(2) { animation-delay: .09s; }
.semi-card:nth-of-type(3) { animation-delay: .15s; }
.semi-card:nth-of-type(4) { animation-delay: .21s; }
.semi-card:nth-of-type(5) { animation-delay: .27s; }
.semi-card:nth-of-type(6) { animation-delay: .33s; }
.semi-card:nth-of-type(n+7) { animation-delay: .39s; }

/* 主内容区路由切换轻淡入 */
@keyframes dxbFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.semi-layout-content > * { animation: dxbFade .38s var(--dxb-ease) backwards; }

/* ---------- 按钮：渐变主按钮 + 按压/悬浮反馈 ---------- */
.semi-button {
  border-radius: 10px !important;
  transition: transform .18s var(--dxb-ease), box-shadow .18s var(--dxb-ease), filter .18s var(--dxb-ease), background-color .18s !important;
}

.semi-button:not(.semi-button-disabled):hover  { transform: translateY(-1px); filter: brightness(1.04); }
.semi-button:not(.semi-button-disabled):active { transform: translateY(0) scale(.96); filter: brightness(.98); }

.semi-button-primary:not(.semi-button-light):not(.semi-button-borderless) {
  background-image: linear-gradient(135deg, var(--dxb-accent) 0%, var(--dxb-accent-2) 100%) !important;
  border: none !important;
  box-shadow: 0 6px 16px -6px rgba(76, 110, 245, .55) !important;
}

.semi-button-primary:not(.semi-button-light):not(.semi-button-borderless):hover {
  box-shadow: 0 10px 24px -6px rgba(76, 110, 245, .62) !important;
}

/* ---------- 侧边栏：毛玻璃 + 选中渐变 + 悬浮位移 ---------- */
.semi-navigation-vertical {
  background: rgba(255, 255, 255, .80) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-right: 1px solid rgba(28, 36, 54, .06) !important;
}

body[theme-mode="dark"] .semi-navigation-vertical {
  background: rgba(18, 22, 30, .82) !important;
  border-right-color: rgba(255, 255, 255, .06) !important;
}

.semi-navigation-item {
  border-radius: 10px !important;
  transition: background-color .2s var(--dxb-ease), color .2s, transform .2s var(--dxb-ease), box-shadow .2s !important;
}

.semi-navigation-item:hover { transform: translateX(3px); }

/* 非控制台侧边栏的导航选中态（顶栏等） */
.semi-navigation-vertical:not(.sidebar-nav) .semi-navigation-item-selected {
  background: linear-gradient(90deg, rgba(76, 110, 245, .14), rgba(124, 92, 255, .09)) !important;
  box-shadow: inset 3px 0 0 var(--dxb-accent) !important;
  font-weight: 600;
}

/* ---------- 顶栏：轻毛玻璃 + 底部细阴影 ---------- */
.semi-navigation-horizontal {
  background: rgba(255, 255, 255, .78) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(28, 36, 54, .05), 0 6px 18px -14px rgba(16, 24, 40, .25) !important;
}

body[theme-mode="dark"] .semi-navigation-horizontal {
  background: rgba(18, 22, 30, .80) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) !important;
}

/* ---------- 表格：行悬浮高亮 + 左侧提示条 ---------- */
.semi-table-tbody > .semi-table-row {
  transition: background-color .18s var(--dxb-ease), box-shadow .18s var(--dxb-ease) !important;
}

.semi-table-tbody > .semi-table-row:hover {
  background: rgba(76, 110, 245, .055) !important;
  box-shadow: inset 3px 0 0 rgba(76, 110, 245, .55);
}

body[theme-mode="dark"] .semi-table-tbody > .semi-table-row:hover {
  background: rgba(110, 130, 255, .09) !important;
}

.semi-table-thead > .semi-table-row > .semi-table-row-head {
  font-weight: 600 !important;
}

/* ---------- 弹窗 / 下拉 / 气泡：圆角 + 弹出动画 ---------- */
@keyframes dxbPop {
  from { opacity: 0; transform: translateY(10px) scale(.965); }
  to   { opacity: 1; transform: none; }
}

.semi-modal-content {
  border-radius: 16px !important;
  box-shadow: 0 24px 64px -16px rgba(16, 24, 40, .35), 0 8px 24px -12px rgba(16, 24, 40, .22) !important;
  animation: dxbPop .32s var(--dxb-ease);
}

.semi-popover-wrapper, .semi-dropdown, .semi-select-option-list {
  border-radius: 12px !important;
  box-shadow: 0 12px 36px -10px rgba(16, 24, 40, .24), 0 4px 12px -6px rgba(16, 24, 40, .12) !important;
}

.semi-dropdown-item, .semi-select-option {
  border-radius: 8px !important;
  transition: background-color .15s, transform .15s !important;
}

.semi-dropdown-item:hover, .semi-select-option:hover { transform: translateX(2px); }

/* ---------- 输入框 / 选择器：聚焦光环 ---------- */
.semi-input-wrapper, .semi-select, .semi-input-textarea-wrapper {
  border-radius: 10px !important;
  transition: box-shadow .2s var(--dxb-ease), border-color .2s, background-color .2s !important;
}

.semi-input-wrapper-focus, .semi-select-focus, .semi-input-textarea-wrapper:focus-within {
  box-shadow: 0 0 0 3px rgba(76, 110, 245, .16) !important;
  border-color: var(--dxb-accent) !important;
}

/* ---------- 标签 / 徽章 / 进度条 ---------- */
.semi-tag { border-radius: 8px !important; transition: transform .15s var(--dxb-ease), box-shadow .15s !important; }
.semi-tag:hover { transform: translateY(-1px); box-shadow: 0 4px 10px -4px rgba(16, 24, 40, .25); }

.semi-progress-track { border-radius: 8px !important; }
.semi-progress-track-inner { border-radius: 8px !important; transition: width .6s var(--dxb-ease) !important; }

/* ---------- Tabs：选中态下划线过渡 ---------- */
.semi-tabs-tab {
  transition: color .2s, background-color .2s, transform .2s var(--dxb-ease) !important;
  border-radius: 8px 8px 0 0 !important;
}

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

/* ---------- 骨架屏微光 ---------- */
.semi-skeleton-item {
  background: linear-gradient(90deg, rgba(28, 36, 54, .06) 25%, rgba(28, 36, 54, .12) 50%, rgba(28, 36, 54, .06) 75%) !important;
  background-size: 400% 100% !important;
  animation: dxbShimmer 1.4s ease infinite !important;
}

@keyframes dxbShimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .32); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, .55); }

/* ---------- 无障碍：尊重减少动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- 控制台侧边栏：毛玻璃 + 选中高亮 ---------- */
.sidebar-container {
  background: rgba(255, 255, 255, .86) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-right: 1px solid rgba(28, 36, 54, .06) !important;
  box-shadow: 4px 0 24px -18px rgba(16, 24, 40, .18);
}

body[theme-mode="dark"] .sidebar-container,
html.dark .sidebar-container {
  background: rgba(18, 22, 30, .88) !important;
  border-right-color: rgba(255, 255, 255, .06) !important;
}

.sidebar-nav-item-selected,
.sidebar-nav-item.semi-navigation-item-selected {
  box-shadow: inset 3px 0 0 var(--dxb-accent), 0 6px 16px -12px rgba(17, 171, 155, .35) !important;
  transform: translateX(2px);
}

/* ---------- 首页 HCAI：定价区 / 模型卡片立体抬升 ---------- */
.hc-nav {
  box-shadow: var(--dxb-shadow-md) !important;
  transition: transform .32s var(--dxb-ease), box-shadow .32s var(--dxb-ease) !important;
}

.hc-nav:hover {
  transform: translateY(-2px);
  box-shadow: var(--dxb-shadow-lg) !important;
}

.hc-frontier-model {
  transform-style: preserve-3d;
  perspective: 900px;
  transition: transform .32s var(--dxb-ease), box-shadow .32s var(--dxb-ease), border-color .32s !important;
}

.hc-frontier-model:hover {
  transform: translateY(-6px) rotateX(2deg);
  box-shadow: 0 22px 44px -18px rgba(17, 171, 155, .28), 0 8px 20px -12px rgba(88, 47, 35, .12) !important;
  border-color: rgba(17, 171, 155, .32) !important;
}

.hc-price-list {
  border-radius: 22px !important;
  overflow: hidden;
  box-shadow: var(--dxb-shadow-md) !important;
  transition: box-shadow .32s var(--dxb-ease), transform .32s var(--dxb-ease);
}

.hc-price-list:hover {
  box-shadow: var(--dxb-shadow-lg) !important;
  transform: translateY(-3px);
}

.hc-price-row:hover,
.hc-price-row:focus-within {
  transform: translateX(4px) !important;
}

.hc-router-card,
.hc-faq-item,
.hc-advantage-card {
  transition: transform .28s var(--dxb-ease), box-shadow .28s var(--dxb-ease) !important;
}

.hc-advantage-card:hover,
.hc-faq-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -16px rgba(17, 171, 155, .22) !important;
}

.hc-button--primary,
.hc-notice__contact {
  box-shadow: 0 10px 24px -8px rgba(17, 171, 155, .45) !important;
  transition: transform .18s var(--dxb-ease), box-shadow .18s var(--dxb-ease), filter .18s !important;
}

.hc-button--primary:hover,
.hc-notice__contact:hover {
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow: 0 14px 30px -8px rgba(17, 171, 155, .55) !important;
}

/* ---------- 顶栏 Logo 区微光 ---------- */
.semi-navigation-header,
.app-header {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ---------- 订阅/充值卡片网格：交错入场 ---------- */
.semi-tabs-pane .semi-card {
  animation: dxbRise .52s var(--dxb-ease) backwards;
}

.semi-tabs-pane .semi-col:nth-child(1) .semi-card { animation-delay: .04s; }
.semi-tabs-pane .semi-col:nth-child(2) .semi-card { animation-delay: .10s; }
.semi-tabs-pane .semi-col:nth-child(3) .semi-card { animation-delay: .16s; }
.semi-tabs-pane .semi-col:nth-child(4) .semi-card { animation-delay: .22s; }
.semi-tabs-pane .semi-col:nth-child(5) .semi-card { animation-delay: .28s; }
.semi-tabs-pane .semi-col:nth-child(6) .semi-card { animation-delay: .34s; }

/* ---------- 定价页 sidebar 卡片 ---------- */
.pricing-sidebar .semi-card,
.pricing-content .semi-card {
  border: 1px solid rgba(17, 171, 155, .10) !important;
}

.pricing-sidebar .semi-card:hover {
  border-color: rgba(17, 171, 155, .28) !important;
}

/* ---------- 背景漂浮光斑（控制台） ---------- */
.app-layout::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(520px 280px at 92% 8%, rgba(95, 124, 240, .07), transparent 60%),
    radial-gradient(480px 260px at 4% 22%, rgba(17, 171, 155, .06), transparent 58%);
}

.app-layout > * {
  position: relative;
  z-index: 1;
}

@keyframes dxbFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

.blur-ball-indigo { animation: dxbFloat 7s ease-in-out infinite; }
.blur-ball-teal    { animation: dxbFloat 9s ease-in-out infinite reverse; }

/* ========== 充值/订阅 全屏仪表盘（参考德学漫画后台） ========== */
.dxb-rise-item {
  animation: dxbRise .55s var(--dxb-ease) backwards;
}

.dxb-topup-page {
  width: 100%;
  max-width: none !important;
}

.dxb-topup-dashboard {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;
  perspective: 1200px;
}

.dxb-topup-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.dxb-topup-header h1 {
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 6px;
  letter-spacing: -0.03em;
  color: var(--semi-color-text-0);
}

.dxb-topup-header p {
  margin: 0;
  font-size: 13px;
  color: var(--semi-color-text-2);
}

.dxb-header-action {
  border-radius: 12px !important;
  padding: 0 20px !important;
  height: 40px !important;
  box-shadow: 0 6px 18px -8px rgba(37, 99, 235, .45) !important;
}

.dxb-topup-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
}

@media (max-width: 1024px) {
  .dxb-topup-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .dxb-topup-stats { grid-template-columns: 1fr; }
}

.dxb-stat-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, #ffffff 0%, #f3f6fb 55%, #eef2ff 100%);
  border-radius: 20px;
  border: 1px solid rgba(28, 36, 54, .09);
  padding: 22px 24px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .85) inset,
    0 2px 4px rgba(16, 24, 40, .04),
    0 10px 28px -14px rgba(16, 24, 40, .16),
    0 22px 48px -28px rgba(37, 99, 235, .18);
  transition: transform .32s var(--dxb-ease), box-shadow .32s var(--dxb-ease), border-color .32s;
}

.dxb-stat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, .55) 0%, transparent 42%);
  pointer-events: none;
}

.dxb-stat-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(76, 110, 245, .55), rgba(124, 92, 255, .45), transparent);
  opacity: .65;
}

.dxb-stat-card:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(37, 99, 235, .22);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 14px 36px -12px rgba(37, 99, 235, .28),
    0 28px 56px -24px rgba(76, 110, 245, .22);
}

.dxb-stat-card__value {
  position: relative;
  z-index: 1;
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 800;
  line-height: 1.12;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dxb-stat-card__value--orange {
  background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dxb-stat-card__value--teal {
  background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dxb-stat-card__value--purple {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dxb-stat-card__label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--semi-color-text-2);
}

.dxb-topup-panel {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
  border-radius: 22px;
  border: 1px solid rgba(28, 36, 54, .09);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 6px 24px -10px rgba(16, 24, 40, .12),
    0 24px 56px -28px rgba(37, 99, 235, .14);
  padding: 22px 24px 26px;
}

.dxb-topup-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2563eb, #7c3aed, #14b8a6);
  opacity: .75;
}

.dxb-topup-tabs .semi-tabs-bar {
  margin-bottom: 22px !important;
}

.dxb-topup-tabs .semi-tabs-tab-button {
  border-radius: 12px !important;
  font-weight: 600;
  padding: 9px 20px !important;
  transition: transform .2s var(--dxb-ease), box-shadow .2s !important;
}

.dxb-topup-tabs .semi-tabs-tab-button.semi-tabs-tab-active {
  box-shadow: 0 8px 20px -10px rgba(37, 99, 235, .35);
}

.dxb-topup-form,
.dxb-topup-form .semi-form-field,
.dxb-topup-form .semi-form-field-main,
.dxb-topup-form .semi-form-slot,
.dxb-topup-form .semi-form-field-child {
  width: 100% !important;
  max-width: none !important;
}

.dxb-section-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--semi-color-text-0);
  letter-spacing: -0.01em;
}

.dxb-section-hint {
  color: var(--semi-color-text-2);
  font-size: 12px;
  font-weight: normal;
}

.dxb-amount-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}

@media (min-width: 640px) {
  .dxb-amount-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .dxb-amount-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@keyframes dxbActivePulse {
  0%, 100% {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .9) inset,
      0 10px 28px -12px rgba(37, 99, 235, .38),
      0 0 0 0 rgba(37, 99, 235, .18);
  }
  50% {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .95) inset,
      0 16px 36px -10px rgba(37, 99, 235, .48),
      0 0 0 8px rgba(37, 99, 235, .06);
  }
}

.dxb-amount-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border-radius: 16px;
  border: 1px solid rgba(28, 36, 54, .10);
  background: linear-gradient(165deg, #ffffff 0%, #f8fafc 100%);
  padding: 16px 12px;
  text-align: center;
  transition: transform .26s var(--dxb-ease), border-color .26s, box-shadow .26s;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .85) inset,
    0 2px 6px rgba(16, 24, 40, .05),
    0 10px 24px -14px rgba(16, 24, 40, .14);
}

.dxb-amount-card__shine {
  position: absolute;
  top: 0;
  left: -120%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left .65s var(--dxb-ease);
}

.dxb-amount-card:hover {
  transform: translateY(-5px) scale(1.03);
  border-color: rgba(37, 99, 235, .38);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 14px 32px -12px rgba(37, 99, 235, .32);
}

.dxb-amount-card:hover .dxb-amount-card__shine {
  left: 130%;
}

.dxb-amount-card:active {
  transform: translateY(-2px) scale(.98);
  transition-duration: .12s;
}

.dxb-amount-card--active {
  border: 2px solid #2563eb;
  background: linear-gradient(165deg, #eff6ff 0%, #ffffff 55%, #f5f3ff 100%);
  animation: dxbActivePulse 2.4s ease-in-out infinite;
}

.dxb-amount-card__value {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 6px;
  color: var(--semi-color-text-0);
}

.dxb-amount-card__meta {
  position: relative;
  z-index: 1;
  font-size: 11px;
  color: var(--semi-color-text-2);
  line-height: 1.4;
}

.dxb-pay-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.dxb-pay-btn {
  min-width: 140px;
  border-radius: 12px !important;
  box-shadow: 0 8px 20px -12px rgba(16, 24, 40, .25) !important;
  transition: transform .22s var(--dxb-ease), box-shadow .22s !important;
}

.dxb-pay-btn:hover:not(.semi-button-disabled) {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 14px 28px -12px rgba(37, 99, 235, .35) !important;
}

.dxb-redeem-panel {
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px dashed rgba(28, 36, 54, .14);
}

.dxb-subscription-status {
  width: 100%;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border: 1px solid rgba(28, 36, 54, .08);
  border-radius: 18px;
  padding: 16px 18px;
  margin-bottom: 6px;
  box-shadow: 0 8px 24px -16px rgba(16, 24, 40, .12);
}

.dxb-subscription-status--compact {
  padding: 10px 12px;
  margin-bottom: 2px;
}

.dxb-subscription-status__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.dxb-subscription-status__tags {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.dxb-subscription-status__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.dxb-sub-billing-pref {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(14, 165, 233, 0.06) 48%, rgba(255, 255, 255, 0.95) 100%);
  border: 1px solid rgba(37, 99, 235, 0.22);
  box-shadow:
    0 10px 28px -18px rgba(37, 99, 235, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.7) inset;
}

.dxb-sub-billing-pref__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.dxb-sub-billing-pref__title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.dxb-sub-billing-pref__icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: #2563eb;
}

.dxb-sub-billing-pref__title {
  display: block;
  font-size: 15px;
  line-height: 1.35;
  color: #0f172a;
}

.dxb-sub-billing-pref__subtitle {
  display: block;
  margin-top: 2px;
  line-height: 1.45;
}

.dxb-sub-billing-pref__control {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 420px;
}

.dxb-sub-billing-pref__field-label {
  letter-spacing: 0.02em;
}

.dxb-sub-billing-pref__select {
  width: 100%;
}

.dxb-sub-billing-pref__hint {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px dashed rgba(37, 99, 235, 0.24);
  line-height: 1.5;
}

.dxb-sub-billing-pref__warn {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(251, 191, 36, 0.14);
}

body[theme-mode="dark"] .dxb-sub-billing-pref {
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.2) 0%, rgba(14, 165, 233, 0.1) 52%, rgba(15, 23, 42, 0.92) 100%);
  border-color: rgba(96, 165, 250, 0.32);
}

body[theme-mode="dark"] .dxb-sub-billing-pref__title {
  color: #e2e8f0;
}

body[theme-mode="dark"] .dxb-sub-billing-pref__hint {
  background: rgba(15, 23, 42, 0.55);
  border-color: rgba(96, 165, 250, 0.28);
}

.dxb-sub-expired-toggle {
  cursor: pointer;
  user-select: none;
}

.dxb-sub-inline-hint {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--semi-color-text-2);
}

.dxb-sub-empty {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--semi-color-text-2);
}

.dxb-sub-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(28, 36, 54, .1);
}

.dxb-sub-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(248, 250, 252, .9);
  border: 1px solid rgba(28, 36, 54, .06);
  min-width: 0;
}

.dxb-sub-chip__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--semi-color-text-0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dxb-sub-chip__meta {
  font-size: 11px;
  color: var(--semi-color-text-2);
}

.dxb-sub-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}

.dxb-sub-list--active {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
}

.dxb-sub-list--expired {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(28, 36, 54, .1);
}

.dxb-sub-item {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(248, 250, 252, .85);
  border: 1px solid rgba(28, 36, 54, .06);
}

.dxb-sub-item--active {
  background: linear-gradient(135deg, #ecfdf5 0%, #f8fafc 100%);
  border-color: rgba(16, 185, 129, .18);
}

.dxb-sub-item__main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dxb-sub-item__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--semi-color-text-0);
}

.dxb-sub-item__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--semi-color-text-2);
}

.dxb-sub-item__quota {
  cursor: help;
  text-decoration: underline dotted;
}

body[theme-mode="dark"] .dxb-sub-item {
  background: rgba(255, 255, 255, .03);
  border-color: rgba(255, 255, 255, .06);
}

body[theme-mode="dark"] .dxb-sub-item--active {
  background: linear-gradient(135deg, rgba(16, 185, 129, .08) 0%, rgba(255, 255, 255, .02) 100%);
}

.dxb-plan-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 18px;
  width: 100%;
}

@media (min-width: 768px) {
  .dxb-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .dxb-plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1500px) {
  .dxb-plan-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.dxb-plan-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(28, 36, 54, .10);
  background: linear-gradient(165deg, #ffffff 0%, #fafbff 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .88) inset,
    0 4px 10px rgba(16, 24, 40, .05),
    0 16px 36px -18px rgba(16, 24, 40, .16);
  transition: transform .32s var(--dxb-ease), box-shadow .32s var(--dxb-ease), border-color .32s;
  height: 100%;
}

.dxb-plan-card__glow {
  position: absolute;
  inset: -40% -20% auto;
  height: 120px;
  background: radial-gradient(circle, rgba(124, 58, 237, .16) 0%, transparent 68%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s var(--dxb-ease);
}

.dxb-plan-card:hover {
  transform: translateY(-8px) scale(1.015);
  border-color: rgba(124, 58, 237, .32);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .92) inset,
    0 20px 44px -16px rgba(124, 58, 237, .28);
}

.dxb-plan-card:hover .dxb-plan-card__glow {
  opacity: 1;
}

.dxb-plan-card--featured {
  border-color: rgba(124, 58, 237, .42);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 10px 32px -14px rgba(124, 58, 237, .32);
}

.dxb-plan-card--featured .dxb-plan-card__glow {
  opacity: .85;
}

.dxb-plan-card__inner {
  position: relative;
  z-index: 1;
  padding: 20px 20px 18px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

body[theme-mode="dark"] .dxb-stat-card,
body[theme-mode="dark"] .dxb-topup-panel,
body[theme-mode="dark"] .dxb-amount-card,
body[theme-mode="dark"] .dxb-plan-card,
body[theme-mode="dark"] .dxb-subscription-status {
  background: linear-gradient(180deg, #1e2430 0%, #181c26 100%);
  border-color: rgba(255, 255, 255, .08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .04) inset,
    0 16px 36px -18px rgba(0, 0, 0, .55);
}

body[theme-mode="dark"] .dxb-amount-card--active {
  background: linear-gradient(165deg, rgba(37, 99, 235, .18) 0%, #1e2430 100%);
  border-color: rgba(96, 165, 250, .55);
}

body[theme-mode="dark"] .dxb-stat-card::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, .06) 0%, transparent 42%);
}

/* wxbai 风格订阅卡 + 淘宝兑换 */
.dxb-subscription-redeem-panel {
  margin-bottom: 18px;
  padding: 18px 20px;
  border-radius: 18px;
  border: 1px dashed rgba(245, 158, 11, .35);
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 55%, #fff7ed 100%);
  box-shadow: 0 10px 28px -18px rgba(245, 158, 11, .35);
}

.dxb-subscription-redeem-panel__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--semi-color-text-0);
  margin-bottom: 6px;
}

.dxb-subscription-redeem-panel__desc {
  font-size: 13px;
  color: var(--semi-color-text-2);
  margin-bottom: 14px;
}

.dxb-subscription-redeem-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.dxb-subscription-redeem-input {
  flex: 1 1 240px;
  min-width: 0;
}

.dxb-taobao-buy-btn {
  border-radius: 12px !important;
}

@media (min-width: 1280px) {
  .dxb-plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.dxb-plan-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.dxb-plan-card__title-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.dxb-plan-card__header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.dxb-plan-provider--openai {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #fff !important;
  border: none !important;
}

.dxb-plan-provider--anthropic {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
  color: #fff !important;
  border: none !important;
}

.dxb-plan-card__price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  white-space: nowrap;
}

.dxb-plan-card__price-symbol {
  font-size: 14px;
  font-weight: 700;
  color: #7c3aed;
}

.dxb-plan-card__price-value {
  font-size: 24px;
  font-weight: 800;
  color: #7c3aed;
  letter-spacing: -0.02em;
}

.dxb-plan-card__price-period {
  font-size: 12px;
  color: var(--semi-color-text-2);
  margin-left: 2px;
}

.dxb-plan-card--openai .dxb-plan-card__price-symbol,
.dxb-plan-card--openai .dxb-plan-card__price-value {
  color: #059669;
}

.dxb-plan-card--anthropic .dxb-plan-card__price-symbol,
.dxb-plan-card--anthropic .dxb-plan-card__price-value {
  color: #ea580c;
}

.dxb-plan-card__desc {
  display: block;
  margin-bottom: 12px;
  line-height: 1.5;
}

.dxb-plan-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.dxb-plan-stat {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(248, 250, 252, .9);
  border: 1px solid rgba(28, 36, 54, .06);
}

.dxb-plan-stat__label {
  display: block;
  font-size: 11px;
  color: var(--semi-color-text-2);
  margin-bottom: 2px;
}

.dxb-plan-stat__value {
  font-size: 13px;
  font-weight: 700;
  color: var(--semi-color-text-0);
}

.dxb-plan-card__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dxb-plan-open-btn--openai {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: none !important;
}

.dxb-plan-open-btn--anthropic {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
  border: none !important;
}

.dxb-plan-taobao-btn {
  border-radius: 12px !important;
}

body[theme-mode="dark"] .dxb-subscription-redeem-panel {
  background: linear-gradient(135deg, rgba(245, 158, 11, .08) 0%, #1e2430 100%);
  border-color: rgba(245, 158, 11, .25);
}

body[theme-mode="dark"] .dxb-plan-stat {
  background: rgba(255, 255, 255, .03);
  border-color: rgba(255, 255, 255, .06);
}

/* ---------- 隐藏 New API 品牌链接 ---------- */
.semi-layout-footer a[href*="QuantumNous/new-api"],
.semi-layout-footer a[href*="newapi.pro"],
.custom-footer a[href*="QuantumNous/new-api"],
.custom-footer a[href*="newapi.pro"] {
  display: none !important;
}

/* ============================================================
   侧边栏立体感动效 v2（参考德学漫画管理后台）
   ============================================================ */

@keyframes dxbSidebarBrandGlow {
  0%, 100% { opacity: .55; transform: translateX(-8%) scale(1); }
  50%      { opacity: .85; transform: translateX(8%) scale(1.08); }
}

@keyframes dxbSidebarItemIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes dxbFilterChipPop {
  from { opacity: 0; transform: translateY(6px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 控制台侧边栏 ---------- */
.sidebar-container {
  background: linear-gradient(180deg, #e8f7ff 0%, #f0fbfa 28%, #f8fafc 62%, #ffffff 100%) !important;
  border-right: 1px solid rgba(17, 171, 155, .12) !important;
  box-shadow:
    6px 0 28px -12px rgba(17, 171, 155, .22),
    inset -1px 0 0 rgba(255, 255, 255, .85) !important;
}

body[theme-mode="dark"] .sidebar-container,
html.dark .sidebar-container {
  background: linear-gradient(180deg, #0f1a24 0%, #121820 45%, #151a22 100%) !important;
  border-right-color: rgba(45, 212, 191, .12) !important;
  box-shadow: 6px 0 28px -12px rgba(0, 0, 0, .45) !important;
}

.sidebar-brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 10px 6px;
  padding: 12px 12px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 48%, #3b82f6 100%);
  box-shadow:
    0 14px 28px -10px rgba(37, 99, 235, 0.55),
    0 4px 0 rgba(255, 255, 255, .22) inset,
    0 -2px 0 rgba(0, 0, 0, .08) inset;
  animation: dxbSidebarItemIn .45s var(--dxb-ease);
}

.sidebar-brand::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .35), transparent 68%);
  animation: dxbSidebarBrandGlow 4s ease-in-out infinite;
  pointer-events: none;
}

.sidebar-brand--collapsed {
  justify-content: center;
  padding: 10px;
  margin: 10px 8px 6px;
}

.sidebar-brand__logo-wrap {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 6px 14px -6px rgba(15, 23, 42, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-brand__logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.sidebar-brand__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.sidebar-brand__name {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.sidebar-brand__sub {
  font-size: 11px;
  color: rgba(255, 255, 255, .88);
  margin-top: 2px;
}

.sidebar-nav {
  background: transparent !important;
}

.sidebar-nav .semi-navigation-item,
.sidebar-nav-item {
  border-radius: 12px !important;
  margin: 4px 10px !important;
  padding: 9px 12px !important;
  border: 1px solid transparent !important;
  background: rgba(255, 255, 255, .55) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
  transition:
    transform .22s var(--dxb-ease),
    box-shadow .22s var(--dxb-ease),
    background .22s,
    border-color .22s,
    color .22s !important;
  animation: dxbSidebarItemIn .42s var(--dxb-ease) backwards;
}

.sidebar-nav .semi-navigation-item:nth-child(1)  { animation-delay: .03s; }
.sidebar-nav .semi-navigation-item:nth-child(2)  { animation-delay: .06s; }
.sidebar-nav .semi-navigation-item:nth-child(3)  { animation-delay: .09s; }
.sidebar-nav .semi-navigation-item:nth-child(4)  { animation-delay: .12s; }
.sidebar-nav .semi-navigation-item:nth-child(5)  { animation-delay: .15s; }
.sidebar-nav .semi-navigation-item:nth-child(6)  { animation-delay: .18s; }
.sidebar-nav .semi-navigation-item:nth-child(7)  { animation-delay: .21s; }
.sidebar-nav .semi-navigation-item:nth-child(8)  { animation-delay: .24s; }
.sidebar-nav .semi-navigation-item:nth-child(9)  { animation-delay: .27s; }
.sidebar-nav .semi-navigation-item:nth-child(10) { animation-delay: .30s; }

body[theme-mode="dark"] .sidebar-nav .semi-navigation-item,
html.dark .sidebar-nav .semi-navigation-item {
  background: rgba(255, 255, 255, .04) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2) !important;
}

.sidebar-nav .semi-navigation-item:hover,
.sidebar-nav-item:hover {
  transform: translateX(4px) translateY(-1px) !important;
  background: rgba(255, 255, 255, .92) !important;
  border-color: rgba(17, 171, 155, .18) !important;
  box-shadow:
    0 8px 18px -10px rgba(17, 171, 155, .35),
    0 1px 0 rgba(255, 255, 255, .8) inset !important;
  color: #0f766e !important;
}

/* 选中：深色渐变底 + 白字（提高优先级，覆盖默认浅色底） */
.sidebar-nav .semi-navigation-item.semi-navigation-item-selected,
.sidebar-nav .semi-navigation-item.sidebar-nav-item-selected,
.sidebar-nav-item.semi-navigation-item-selected,
.sidebar-nav-item-selected,
.semi-navigation-item-selected.sidebar-nav-item {
  background: linear-gradient(135deg, #38bdf8 0%, #11ab9b 48%, #0d9488 100%) !important;
  border-color: rgba(255, 255, 255, .25) !important;
  color: #fff !important;
  transform: translateX(5px) scale(1.02) !important;
  box-shadow:
    0 12px 26px -8px rgba(17, 171, 155, .62),
    0 2px 0 rgba(255, 255, 255, .28) inset,
    0 -1px 0 rgba(0, 0, 0, .08) inset !important;
}

.sidebar-nav .semi-navigation-item.semi-navigation-item-selected .semi-navigation-item-text,
.sidebar-nav .semi-navigation-item.semi-navigation-item-selected .sidebar-nav-label,
.sidebar-nav .semi-navigation-item.sidebar-nav-item-selected .sidebar-nav-label,
.sidebar-nav-item-selected .semi-navigation-item-text,
.sidebar-nav-item-selected .sidebar-nav-label,
.semi-navigation-item-selected.sidebar-nav-item .sidebar-nav-label {
  color: #fff !important;
  font-weight: 700 !important;
  -webkit-text-fill-color: #fff !important;
}

.sidebar-nav .semi-navigation-item.semi-navigation-item-selected .sidebar-icon-container,
.sidebar-nav-item-selected .sidebar-icon-container,
.semi-navigation-item-selected.sidebar-nav-item .sidebar-icon-container {
  background: rgba(255, 255, 255, .95) !important;
  box-shadow: 0 4px 10px -3px rgba(0, 0, 0, .2) !important;
}

.sidebar-icon-container {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  margin-right: 8px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  border-radius: 9px;
  background: linear-gradient(180deg, #fff 0%, #f1f5f9 100%);
  box-shadow:
    0 3px 8px -4px rgba(15, 23, 42, .25),
    0 1px 0 rgba(255, 255, 255, .9) inset;
  transition: transform .22s var(--dxb-ease), box-shadow .22s var(--dxb-ease);
}

.sidebar-icon-container svg {
  display: block !important;
  flex-shrink: 0;
  width: 16px !important;
  height: 16px !important;
  color: #64748b !important;
  stroke: #64748b !important;
}

.sidebar-nav .semi-navigation-item-selected .sidebar-icon-container svg,
.sidebar-nav-item-selected .sidebar-icon-container svg {
  color: var(--semi-color-primary, #11ab9b) !important;
  stroke: var(--semi-color-primary, #11ab9b) !important;
}

.sidebar-nav-label {
  color: #334155;
  transition: color .2s var(--dxb-ease);
}

.sidebar-nav .semi-navigation-item:hover .sidebar-nav-label {
  color: #0f766e !important;
}

.sidebar-nav-label--selected,
.sidebar-nav .semi-navigation-item-selected .sidebar-nav-label {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.sidebar-nav .semi-navigation-item:hover .sidebar-icon-container {
  transform: scale(1.06);
  box-shadow: 0 6px 12px -4px rgba(17, 171, 155, .35);
}

.sidebar-nav .sidebar-group-label {
  padding: 10px 16px 6px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  letter-spacing: .08em !important;
}

.sidebar-collapse-button {
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.98)) !important;
  border-top: 1px solid rgba(17, 171, 155, .1) !important;
  box-shadow: 0 -8px 20px -12px rgba(15, 23, 42, .15) !important;
}

.sidebar-collapse-button .semi-button {
  border-radius: 10px !important;
  box-shadow: 0 4px 12px -6px rgba(17, 171, 155, .3) !important;
}

/* ---------- 收起侧边栏：图标居中完整显示 ---------- */
body.sidebar-collapsed .sidebar-nav .semi-navigation-item,
body.sidebar-collapsed .sidebar-nav-item {
  margin: 4px 6px !important;
  padding: 8px 0 !important;
  justify-content: center !important;
}

body.sidebar-collapsed .sidebar-nav .semi-navigation-item:hover,
body.sidebar-collapsed .sidebar-nav .semi-navigation-item.semi-navigation-item-selected,
body.sidebar-collapsed .sidebar-nav .semi-navigation-item.sidebar-nav-item-selected,
body.sidebar-collapsed .sidebar-nav-item-selected {
  transform: none !important;
}

body.sidebar-collapsed .sidebar-nav .semi-navigation-item:hover .sidebar-icon-container {
  transform: scale(1.06);
}

body.sidebar-collapsed .sidebar-nav .semi-navigation-item-icon,
body.sidebar-collapsed .sidebar-nav .semi-navigation-item-icon-info {
  margin: 0 !important;
  justify-content: center !important;
}

body.sidebar-collapsed .sidebar-icon-container {
  margin-right: 0 !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
}

body.sidebar-collapsed .sidebar-brand--collapsed {
  margin: 10px 6px 6px;
  padding: 8px;
}

body.sidebar-collapsed .sidebar-brand__logo-wrap {
  width: 32px;
  height: 32px;
}

body.sidebar-collapsed .sidebar-brand__logo {
  width: 24px;
  height: 24px;
}

body.sidebar-collapsed .sidebar-collapse-button {
  padding: 12px 6px;
}

/* ---------- 定价页左侧筛选栏 ---------- */
.pricing-sidebar {
  background: linear-gradient(180deg, #eef9ff 0%, #f4fbfb 35%, #f8fafc 100%) !important;
  border-right: 1px solid rgba(17, 171, 155, .12) !important;
  box-shadow: 8px 0 32px -16px rgba(17, 171, 155, .2) !important;
}

.dxb-pricing-filter-panel {
  animation: dxbSidebarItemIn .4s var(--dxb-ease);
}

.dxb-pricing-filter-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #0ea5e9 0%, #11ab9b 55%, #0d9488 100%);
  box-shadow:
    0 12px 24px -10px rgba(14, 165, 233, .5),
    0 2px 0 rgba(255, 255, 255, .22) inset;
}

.dxb-pricing-filter-panel__title {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .02em;
}

.dxb-pricing-filter-reset.semi-button {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .45) !important;
  background: rgba(255, 255, 255, .12) !important;
  backdrop-filter: blur(6px);
}

.dxb-pricing-filter-reset.semi-button:hover {
  background: rgba(255, 255, 255, .22) !important;
  transform: translateY(-1px);
}

.pricing-sidebar .semi-divider {
  border-color: rgba(17, 171, 155, .12) !important;
}

.pricing-sidebar .semi-divider-inner-text {
  font-weight: 700 !important;
  color: #475569 !important;
}

.pricing-sidebar .sbg-button.semi-button {
  border-radius: 10px !important;
  min-height: 34px !important;
  border: 1px solid rgba(148, 163, 184, .35) !important;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%) !important;
  box-shadow:
    0 2px 4px rgba(15, 23, 42, .06),
    0 1px 0 rgba(255, 255, 255, .9) inset !important;
  transition:
    transform .2s var(--dxb-ease),
    box-shadow .2s var(--dxb-ease),
    border-color .2s,
    background .2s !important;
  animation: dxbFilterChipPop .35s var(--dxb-ease) backwards;
}

.pricing-sidebar .sbg-button.semi-button:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(17, 171, 155, .35) !important;
  box-shadow:
    0 8px 16px -8px rgba(17, 171, 155, .35),
    0 1px 0 rgba(255, 255, 255, .95) inset !important;
}

.pricing-sidebar .sbg-button.semi-button-primary.semi-button-light,
.pricing-sidebar .sbg-button.semi-button.semi-button-primary {
  background: linear-gradient(135deg, #38bdf8 0%, #11ab9b 50%, #0d9488 100%) !important;
  border: 1px solid rgba(255, 255, 255, .3) !important;
  color: #fff !important;
  box-shadow:
    0 10px 20px -8px rgba(17, 171, 155, .55),
    0 2px 0 rgba(255, 255, 255, .25) inset !important;
  transform: translateY(-1px) scale(1.02);
}

.pricing-sidebar .sbg-button.semi-button-primary .sbg-badge,
.pricing-sidebar .sbg-button.semi-button-primary .sbg-badge-active {
  background: rgba(255, 255, 255, .22) !important;
  color: #fff !important;
}

.pricing-sidebar .sbg-button.semi-button:active {
  transform: translateY(0) scale(.98) !important;
}

/* ========== 使用记录 wxbai 风格 ========== */
.dxb-usage-overview {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}

.dxb-usage-overview__hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.dxb-usage-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.dxb-usage-stat-card {
  border: 1px solid rgba(17, 171, 155, .12) !important;
  box-shadow: var(--dxb-shadow-sm) !important;
}

.dxb-usage-stat-card__label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
  font-size: 13px;
  margin-bottom: 8px;
}

.dxb-usage-stat-card__value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: #0f172a;
}

.dxb-usage-stat-card__meta {
  margin-top: 8px;
  font-size: 12px;
  color: #94a3b8;
}

.dxb-usage-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dxb-usage-panel {
  border: 1px solid rgba(17, 171, 155, .1) !important;
  box-shadow: var(--dxb-shadow-sm) !important;
}

.dxb-usage-panel__head {
  margin-bottom: 8px;
}

.dxb-usage-panel__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #0f172a;
}

.dxb-usage-panel__body {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 12px;
  align-items: center;
  min-height: 220px;
}

.dxb-usage-panel__chart {
  height: 200px;
}

.dxb-usage-panel__trend {
  height: 240px;
}

.dxb-usage-panel__empty {
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
}

.dxb-usage-panel__table-head,
.dxb-usage-panel__table-row {
  display: grid;
  grid-template-columns: 1.4fr .7fr .8fr .8fr;
  gap: 8px;
  font-size: 12px;
  padding: 6px 0;
}

.dxb-usage-panel__table-head {
  color: #94a3b8;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
}

.dxb-usage-panel__table-row {
  color: #334155;
  border-bottom: 1px dashed rgba(15, 23, 42, .06);
}

.dxb-usage-filters__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

@media (max-width: 1200px) {
  .dxb-usage-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .dxb-usage-charts-grid {
    grid-template-columns: 1fr;
  }

  .dxb-usage-panel__body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .dxb-usage-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ========== 仪表盘 wxbai 风格 ========== */
.dxb-dashboard-page {
  display: flex;
  flex-direction: column;
  gap: 0;
  perspective: 1200px;
}

.dxb-dash-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  animation: dxbRise .45s var(--dxb-ease) backwards;
}

.dxb-dash-header__title {
  margin-bottom: 4px !important;
  transition: opacity .5s var(--dxb-ease);
}

.dxb-dash-header__actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.dxb-dash-header__btn {
  border-radius: 10px !important;
  transition: transform .2s var(--dxb-ease), box-shadow .2s !important;
}

.dxb-dash-header__btn:hover {
  transform: translateY(-2px);
}

.dxb-dash-header__btn--primary {
  background: linear-gradient(135deg, #11ab9b 0%, #0d9488 100%) !important;
  box-shadow: 0 8px 20px -10px rgba(17, 171, 155, .65) !important;
}

.dxb-dash-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.dxb-dash-stat-card {
  border: 1px solid rgba(17, 171, 155, .12) !important;
  box-shadow: var(--dxb-shadow-sm) !important;
  transition: transform .28s var(--dxb-ease), box-shadow .28s var(--dxb-ease) !important;
  overflow: hidden !important;
  position: relative;
}

.dxb-dash-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  opacity: .9;
}

.dxb-dash-stat--blue::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.dxb-dash-stat--green::before { background: linear-gradient(90deg, #10b981, #34d399); }
.dxb-dash-stat--purple::before { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
.dxb-dash-stat--cyan::before { background: linear-gradient(90deg, #06b6d4, #22d3ee); }
.dxb-dash-stat--amber::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.dxb-dash-stat--pink::before { background: linear-gradient(90deg, #ec4899, #f472b6); }
.dxb-dash-stat--indigo::before { background: linear-gradient(90deg, #6366f1, #818cf8); }
.dxb-dash-stat--orange::before { background: linear-gradient(90deg, #f97316, #fb923c); }

.dxb-dash-stat-card:hover {
  transform: translateY(-4px) scale(1.008);
  box-shadow: var(--dxb-shadow-md) !important;
}

.dxb-dash-stat-card__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
}

.dxb-dash-stat-card__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, rgba(255, 255, 255, .95), rgba(248, 250, 252, .9));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 6px 14px -10px rgba(15, 23, 42, .35);
  color: #0f766e;
  flex-shrink: 0;
  transition: transform .25s var(--dxb-ease);
}

.dxb-dash-stat-card:hover .dxb-dash-stat-card__icon {
  transform: translateY(-2px) scale(1.04);
}

.dxb-dash-stat-card__content {
  flex: 1;
  min-width: 0;
}

.dxb-dash-stat-card__label {
  color: #64748b;
  font-size: 13px;
  margin-bottom: 4px;
}

.dxb-dash-stat-card__value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  color: #0f172a;
}

.dxb-dash-stat-card__action {
  flex-shrink: 0;
  cursor: pointer;
  transition: transform .2s var(--dxb-ease);
}

.dxb-dash-stat-card__action:hover {
  transform: scale(1.05);
}

.dxb-dash-stat-card__spark {
  width: 72px;
  height: 36px;
  flex-shrink: 0;
  opacity: .85;
  filter: drop-shadow(0 4px 8px rgba(17, 171, 155, .12));
}

.dxb-dash-platform {
  position: relative;
  border: 1px solid rgba(17, 171, 155, .12) !important;
  box-shadow: var(--dxb-shadow-sm) !important;
  overflow: hidden;
}

.dxb-dash-platform::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #38bdf8, #11ab9b 45%, #5f7cf0);
}

.dxb-dash-platform__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 14px;
}

.dxb-dash-platform__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.dxb-dash-platform__item {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(17, 171, 155, .14);
  background: linear-gradient(160deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 8px 20px -16px rgba(17, 171, 155, .35);
  transition: transform .24s var(--dxb-ease), box-shadow .24s var(--dxb-ease), border-color .24s;
}

.dxb-dash-platform__item:hover {
  transform: translateY(-3px);
  border-color: rgba(17, 171, 155, .28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 14px 28px -16px rgba(17, 171, 155, .42);
}

.dxb-dash-platform__name {
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
}

.dxb-dash-platform__metric {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
}

.dxb-dash-platform__metric strong {
  color: #0f766e;
  font-size: 13px;
}

.dxb-dash-chart-panel {
  position: relative;
  border: 1px solid rgba(17, 171, 155, .12) !important;
  box-shadow: var(--dxb-shadow-sm) !important;
  overflow: hidden;
}

.dxb-dash-chart-panel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #38bdf8, #11ab9b 45%, #5f7cf0);
  z-index: 1;
}

.dxb-dash-chart-panel__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  font-weight: 600;
}

.dxb-dash-chart-panel__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.dxb-dash-chart-tabs .semi-tabs-tab {
  border-radius: 8px !important;
  transition: transform .18s var(--dxb-ease), background .18s !important;
}

.dxb-dash-chart-tabs .semi-tabs-tab:hover {
  transform: translateY(-1px);
}

.dxb-dash-chart-body {
  padding: 8px 14px 16px;
  min-height: 340px;
}

.dxb-dash-chart-canvas {
  height: 300px;
  filter: drop-shadow(0 10px 18px rgba(17, 171, 155, .1));
  transition: filter .3s var(--dxb-ease), transform .3s var(--dxb-ease);
}

.dxb-dash-chart-panel:hover .dxb-dash-chart-canvas {
  filter: drop-shadow(0 14px 26px rgba(17, 171, 155, .16));
}

.dxb-dash-chart-split {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(240px, 1.1fr);
  gap: 12px;
  align-items: center;
  min-height: 300px;
}

.dxb-dash-chart-split__chart {
  height: 280px;
}

.dxb-dash-chart-split__table {
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .08);
  background: linear-gradient(180deg, rgba(248, 250, 252, .95), rgba(255, 255, 255, .98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  padding: 8px 10px;
  max-height: 280px;
  overflow: auto;
}

.dxb-dash-model-table__head,
.dxb-dash-model-table__row {
  display: grid;
  grid-template-columns: 1.5fr .7fr .6fr;
  gap: 8px;
  font-size: 12px;
  padding: 7px 4px;
}

.dxb-dash-model-table__head {
  color: #94a3b8;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
  font-weight: 600;
}

.dxb-dash-model-table__row {
  color: #334155;
  border-bottom: 1px dashed rgba(15, 23, 42, .06);
  transition: background .18s, transform .18s var(--dxb-ease);
}

.dxb-dash-model-table__row:hover {
  background: rgba(17, 171, 155, .05);
  transform: translateX(2px);
}

.dxb-dash-bottom-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dxb-dash-panel {
  position: relative;
  border: 1px solid rgba(17, 171, 155, .12) !important;
  box-shadow: var(--dxb-shadow-sm) !important;
  overflow: hidden;
}

.dxb-dash-panel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #38bdf8, #11ab9b 45%, #5f7cf0);
}

.dxb-dash-panel__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 12px;
}

.dxb-dash-panel__link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: none;
  background: transparent;
  color: #0f766e;
  font-size: 13px;
  cursor: pointer;
  transition: transform .18s var(--dxb-ease), color .18s;
}

.dxb-dash-panel__link:hover {
  transform: translateX(2px);
  color: #0d9488;
}

.dxb-dash-recent-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dxb-dash-recent-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .06);
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .94));
  box-shadow: 0 6px 16px -14px rgba(15, 23, 42, .25);
  transition: transform .22s var(--dxb-ease), box-shadow .22s var(--dxb-ease), border-color .22s;
}

.dxb-dash-recent-item:hover {
  transform: translateY(-2px);
  border-color: rgba(17, 171, 155, .22);
  box-shadow: 0 10px 22px -14px rgba(17, 171, 155, .28);
}

.dxb-dash-recent-item__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dxb-dash-recent-item__model {
  font-weight: 600;
  color: #0f172a;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dxb-dash-recent-item__time {
  font-size: 12px;
  color: #94a3b8;
}

.dxb-dash-recent-item__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 12px;
  color: #64748b;
  flex-shrink: 0;
}

.dxb-dash-empty {
  padding: 28px 12px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
}

.dxb-dash-quick-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dxb-dash-quick-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, .08);
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .95));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 8px 20px -16px rgba(15, 23, 42, .28);
  cursor: pointer;
  text-align: left;
  transition: transform .24s var(--dxb-ease), box-shadow .24s var(--dxb-ease), border-color .24s;
}

.dxb-dash-quick-item:hover {
  transform: translateY(-3px) translateX(2px);
  border-color: rgba(17, 171, 155, .24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 14px 28px -16px rgba(17, 171, 155, .32);
}

.dxb-dash-quick-item__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}

.dxb-dash-quick-item--teal .dxb-dash-quick-item__icon {
  background: linear-gradient(145deg, rgba(17, 171, 155, .18), rgba(17, 171, 155, .08));
  color: #0f766e;
}

.dxb-dash-quick-item--green .dxb-dash-quick-item__icon {
  background: linear-gradient(145deg, rgba(16, 185, 129, .18), rgba(16, 185, 129, .08));
  color: #059669;
}

.dxb-dash-quick-item--amber .dxb-dash-quick-item__icon {
  background: linear-gradient(145deg, rgba(245, 158, 11, .2), rgba(245, 158, 11, .08));
  color: #d97706;
}

.dxb-dash-quick-item__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dxb-dash-quick-item__arrow {
  color: #94a3b8;
  flex-shrink: 0;
  transition: transform .2s var(--dxb-ease), color .2s;
}

.dxb-dash-quick-item:hover .dxb-dash-quick-item__arrow {
  transform: translateX(3px);
  color: #0f766e;
}

@media (max-width: 1200px) {
  .dxb-dash-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .dxb-dash-chart-split {
    grid-template-columns: 1fr;
  }

  .dxb-dash-bottom-grid {
    grid-template-columns: 1fr;
  }

  .dxb-dash-chart-panel__head {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .dxb-dash-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* ========== 仪表盘分析图表 wxbai 风格 ========== */
.dxb-dash-analytics {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dxb-dash-analytics__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(17, 171, 155, .12);
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 250, 252, .96));
  box-shadow: var(--dxb-shadow-sm);
}

.dxb-dash-analytics__toolbar-label {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}

.dxb-dash-analytics__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.dxb-dash-analytics-panel {
  position: relative;
  border: 1px solid rgba(17, 171, 155, .12) !important;
  box-shadow: var(--dxb-shadow-sm) !important;
  overflow: hidden;
}

.dxb-dash-analytics-panel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #38bdf8, #11ab9b 45%, #5f7cf0);
}

.dxb-dash-analytics-panel__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 10px;
}

.dxb-dash-analytics-panel__body {
  display: grid;
  grid-template-columns: minmax(180px, 220px) 1fr;
  gap: 12px;
  align-items: center;
  min-height: 260px;
}

.dxb-dash-analytics-panel__chart {
  height: 240px;
  filter: drop-shadow(0 10px 18px rgba(17, 171, 155, .1));
}

.dxb-dash-analytics-panel__table {
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .08);
  background: linear-gradient(180deg, rgba(248, 250, 252, .95), rgba(255, 255, 255, .98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  padding: 8px 10px;
  max-height: 260px;
  overflow: auto;
}

.dxb-dash-analytics-table__head,
.dxb-dash-analytics-table__row {
  display: grid;
  grid-template-columns: 1.4fr .7fr .8fr .8fr;
  gap: 8px;
  font-size: 12px;
  padding: 7px 4px;
}

.dxb-dash-analytics-table__head {
  color: #94a3b8;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
  font-weight: 600;
}

.dxb-dash-analytics-table__row {
  color: #334155;
  border-bottom: 1px dashed rgba(15, 23, 42, .06);
  transition: background .18s, transform .18s var(--dxb-ease);
}

.dxb-dash-analytics-table__row:hover {
  background: rgba(17, 171, 155, .05);
  transform: translateX(2px);
}

.dxb-dash-analytics-panel__trend {
  height: 280px;
  filter: drop-shadow(0 10px 18px rgba(17, 171, 155, .1));
}

@media (max-width: 1100px) {
  .dxb-dash-analytics__grid {
    grid-template-columns: 1fr;
  }

  .dxb-dash-analytics-panel__body {
    grid-template-columns: 1fr;
  }
}

/* ========== API 密钥 wxbai 风格 ========== */
.dxb-tokens-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  perspective: 1200px;
}

.dxb-tokens-overview {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dxb-tokens-hero h4 {
  font-weight: 800 !important;
  letter-spacing: -0.03em;
}

.dxb-tokens-stats-grid {
  display: grid;
  grid-template-columns: 160px 160px 1fr;
  gap: 12px;
}

.dxb-tokens-stat-card {
  border: 1px solid rgba(17, 171, 155, .12) !important;
  box-shadow: var(--dxb-shadow-sm) !important;
  transition: transform .28s var(--dxb-ease), box-shadow .28s var(--dxb-ease) !important;
}

.dxb-tokens-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--dxb-shadow-md) !important;
}

.dxb-tokens-stat-card__label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
  font-size: 13px;
  margin-bottom: 8px;
}

.dxb-tokens-stat-card__value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: #0f172a;
}

.dxb-tokens-endpoint {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: 4px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(17, 171, 155, .18);
  background: linear-gradient(135deg, rgba(17, 171, 155, .08), rgba(95, 124, 240, .06));
  color: #0f766e;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  cursor: pointer;
  transition: transform .22s var(--dxb-ease), box-shadow .22s var(--dxb-ease), border-color .22s;
}

.dxb-tokens-endpoint:hover {
  transform: translateY(-2px);
  border-color: rgba(17, 171, 155, .35);
  box-shadow: 0 10px 24px -14px rgba(17, 171, 155, .45);
}

.dxb-tokens-panel {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(17, 171, 155, .12);
  background: linear-gradient(180deg, rgba(255, 255, 255, .98) 0%, rgba(248, 250, 252, .96) 100%);
  box-shadow:
    0 1px 2px rgba(16, 24, 40, .04),
    0 14px 34px -18px rgba(17, 171, 155, .28);
  padding: 16px;
  overflow: hidden;
  animation: dxbRise .5s var(--dxb-ease) backwards;
}

.dxb-tokens-panel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #38bdf8, #11ab9b 45%, #5f7cf0);
}

.dxb-tokens-toolbar__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.dxb-tokens-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  flex: 1;
}

.dxb-tokens-toolbar__filters .semi-input-wrapper,
.dxb-tokens-toolbar__filters .semi-select {
  min-width: 140px;
}

.dxb-tokens-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.dxb-tokens-btn-create {
  border-radius: 12px !important;
  background: linear-gradient(135deg, #11ab9b 0%, #0d9488 100%) !important;
  box-shadow: 0 8px 20px -10px rgba(17, 171, 155, .65) !important;
  transition: transform .2s var(--dxb-ease), box-shadow .2s var(--dxb-ease) !important;
}

.dxb-tokens-btn-create:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -12px rgba(17, 171, 155, .75) !important;
}

.dxb-tokens-btn-ghost {
  border-radius: 10px !important;
  transition: transform .18s var(--dxb-ease), background .18s !important;
}

.dxb-tokens-btn-ghost:hover {
  transform: translateY(-1px);
}

.dxb-tokens-btn-danger {
  border-radius: 10px !important;
}

.dxb-tokens-panel__batch {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(15, 23, 42, .08);
}

.dxb-tokens-batch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dxb-tokens-panel__table {
  margin-top: 12px;
}

.dxb-tokens-panel__pagination {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(15, 23, 42, .06);
}

.dxb-tokens-table .semi-table-row {
  transition: transform .22s var(--dxb-ease), box-shadow .22s var(--dxb-ease), background .22s !important;
}

.dxb-tokens-table .semi-table-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -16px rgba(17, 171, 155, .35);
  background: rgba(17, 171, 155, .03) !important;
}

.dxb-tokens-table .semi-table-row:nth-child(odd) {
  animation: dxbRise .45s var(--dxb-ease) backwards;
}

.dxb-tokens-table .semi-table-row:nth-child(even) {
  animation: dxbRise .45s var(--dxb-ease) backwards;
}

.dxb-token-key {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(17, 171, 155, .14);
  background: linear-gradient(135deg, rgba(248, 250, 252, .95), rgba(255, 255, 255, .98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: border-color .2s, box-shadow .2s, transform .2s var(--dxb-ease);
}

.dxb-tokens-table .semi-table-row:hover .dxb-token-key {
  border-color: rgba(17, 171, 155, .28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 6px 16px -12px rgba(17, 171, 155, .35);
}

.dxb-token-key__text {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: #334155;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dxb-token-key__actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .dxb-tokens-stats-grid {
    grid-template-columns: 1fr;
  }

  .dxb-tokens-toolbar__row {
    flex-direction: column;
    align-items: stretch;
  }

  .dxb-tokens-toolbar__actions {
    justify-content: flex-end;
  }
}