/* ========== 深色主题 Element Plus 覆盖样式 ========== */

/* 全局基础样式 */
[data-theme="dark"] {
  background:
    linear-gradient(135deg, rgb(10, 10, 10) 0%, rgb(13, 21, 32) 30%, rgb(10, 10, 10) 70%, rgb(15, 21, 32) 100%),
    linear-gradient(135deg, rgba(0, 255, 136, 0.03) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 255, 136, 0.02) 100%);
  background-attachment: fixed;
  color: #f3f4f6;
}

[data-theme="dark"] body {
  background:
    linear-gradient(135deg, rgb(10, 10, 10) 0%, rgb(13, 21, 32) 30%, rgb(10, 10, 10) 70%, rgb(15, 21, 32) 100%),
    linear-gradient(135deg, rgba(0, 255, 136, 0.03) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 255, 136, 0.02) 100%);
  background-attachment: fixed;
  color: #f3f4f6;
}

/* ========== 脉冲动画 ========== */
@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(0, 255, 136, 0);
  }
}

[data-theme="dark"] {
  /* ========== Element Plus 核心变量 ========== */
  --el-color-primary: #00ff88;
  --el-color-primary-light-3: #00ff88;
  --el-color-primary-light-5: #00ff88;
  --el-color-primary-light-7: rgba(0, 255, 136, 0.15);
  --el-color-primary-light-8: rgba(0, 255, 136, 0.1);
  --el-color-primary-light-9: rgba(0, 255, 136, 0.05);
  --el-color-primary-dark-2: #00d36e;

  --el-color-success: #00d36e;
  --el-color-warning: #fbbf24;
  --el-color-danger: #f87171;
  --el-color-error: #f87171;
  --el-color-info: #9ca3af;

  /* 背景色 */
  --el-bg-color: #04080b;
  --el-bg-color-page: transparent;
  --el-bg-color-overlay: #04080b;

  /* 文字颜色 */
  --el-text-color-primary: #ffffff;
  --el-text-color-regular: #a0a0a0;
  --el-text-color-secondary: #a0a0a0;
  --el-text-color-placeholder: #666;
  --el-text-color-disabled: #4b5563;

  /* 边框颜色 */
  --el-border-color: rgba(0, 255, 136, 0.15);
  --el-border-color-light: rgba(0, 255, 136, 0.2);
  --el-border-color-lighter: rgba(0, 255, 136, 0.15);
  --el-border-color-extra-light: rgba(0, 255, 136, 0.1);
  --el-border-color-dark: rgba(0, 255, 136, 0.3);
  --el-border-color-darker: rgba(0, 255, 136, 0.4);

  /* 填充色 */
  --el-fill-color: #04080b;
  --el-fill-color-light: rgba(0, 255, 136, 0.08);
  --el-fill-color-lighter: #0a0a0a;
  --el-fill-color-extra-light: transparent;
  --el-fill-color-dark: rgba(0, 255, 136, 0.12);
  --el-fill-color-darker: rgba(0, 255, 136, 0.15);
  --el-fill-color-blank: #04080b;

  /* 遮罩层 */
  --el-mask-color: rgba(0, 0, 0, 0.8);
  --el-mask-color-extra-light: rgba(0, 0, 0, 0.5);

  /* 阴影 */
  --el-box-shadow: 0 12px 32px 4px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.7);
  --el-box-shadow-light: 0 0 12px rgba(0, 255, 136, 0.1);
  --el-box-shadow-lighter: 0 0 6px rgba(0, 0, 0, 0.4);
  --el-box-shadow-dark: 0 16px 48px 16px rgba(0, 0, 0, 0.6), 0 12px 32px rgba(0, 0, 0, 0.5);
}

/* ========== 深色主题组件样式 ========== */
[data-theme="dark"] {
  /* 页面背景 */
  background-color: var(--bg-color-primary);
  color: var(--text-color-primary);

  /* 头部导航 */
  .header-container,
  .el-header {
    background-color: var(--header-background-color) !important;
    box-shadow: var(--header-box-shadow);
    border-bottom: var(--header-border);
  }

  .header-menu,
  .el-menu--horizontal {
    background-color: var(--header-background-color) !important;
    border-bottom: none !important;
  }

  .brand-text,
  .mobile-brand-text {
    color: var(--text-color-primary) !important;
  }

  .menu-title {
    color: var(--text-color-secondary) !important;
  }

  /* 侧边栏 */
  .aside-container,
  .aside-wrapper {
    background-color: var(--sidebar-background-color) !important;
    border-color: var(--sidebar-border-color) !important;
  }

  .aside-header {
    border-bottom-color: var(--sidebar-border-color) !important;
  }

  .logo-text {
    color: var(--text-color-primary) !important;
  }

  /* 聊天区域 */
  .chat-with-id-container,
  .chat-default-container,
  .conversation-page {
    background-color: var(--content-background-color) !important;
  }

  .chat-warp {
    background-color: var(--chat-container-bg) !important;
  }

  /* 气泡样式 */
  .el-bubble {
    &[data-placement="start"] {
      .el-bubble-content {
        background-color: var(--chat-bubble-ai-bg) !important;
        color: var(--chat-bubble-ai-text) !important;
      }
    }
  }

  /* 输入框 */
  .el-input__wrapper,
  .el-textarea__inner {
    background-color: #04080b !important;
    box-shadow: 0 0 0 1px rgba(0, 255, 136, 0.2) inset !important;
    border-radius: 0 !important;

    &:hover {
      box-shadow: 0 0 0 1px rgba(0, 255, 136, 0.3) inset !important;
    }

    &.is-focus {
      box-shadow: 0 0 0 1px rgba(0, 255, 136, 0.4) inset !important;
    }
  }

  .el-input__inner {
    color: #a0a0a0 !important;

    &::placeholder {
      color: #666 !important;
    }
  }

  .el-textarea__inner {
    color: #a0a0a0 !important;

    &::placeholder {
      color: #666 !important;
    }
  }

  /* ========== 按钮样式 ========== */
  .el-button{
    background-color: #00d36e !important;
    border-color: #00d36e !important;
    color: #000000 !important;
    font-weight: 600 !important;
    border: none !important;
    padding: 14px 28px !important;
    font-size: 1rem !important;
    line-height: 1.5rem !important;
    border-radius: 0 !important;
    animation: pulse 2s infinite !important;

    &:hover {
      box-shadow: 0 10px 25px rgba(0, 255, 136, 0.3) !important;
    }
  }
  
  /* 主要按钮 */
  .el-button--primary {
    background-color: #00d36e !important;
    border-color: #00d36e !important;
    color: #000000 !important;
    font-weight: 600 !important;
    border: none !important;
    padding: 14px 28px !important;
    font-size: 1rem !important;
    line-height: 1.5rem !important;
    border-radius: 0 !important;
    animation: pulse 2s infinite !important;

    &:hover {
      box-shadow: 0 10px 25px rgba(0, 255, 136, 0.3) !important;
    }
  }

  /* 次要按钮 */
  .el-button--default {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 14px 28px !important;
    font-size: 1rem !important;
    line-height: 1.5rem !important;
    border-radius: 0 !important;

    &:hover {
      background-color: rgba(255, 255, 255, 0.1) !important;
      border-color: rgba(255, 255, 255, 0.3) !important;
    }
  }

  /* 成功按钮（使用主要样式） */
  .el-button--success {
    background-color: #00d36e !important;
    border-color: #00d36e !important;
    color: #000000 !important;
    font-weight: 600 !important;
    border-radius: 0 !important;
    animation: pulse 2s infinite !important;

    &:hover {
      box-shadow: 0 10px 25px rgba(0, 255, 136, 0.3) !important;
    }
  }

  /* 卡片 */
  .el-card {
    background-color: #04080b !important;
    border-color: rgba(0, 255, 136, 0.2) !important;
    border-width: 1px;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 20px !important;
    display: flex;
    flex-direction: column;
    align-self: stretch;

    &:hover {
      border-color: rgba(0, 255, 136, 0.4) !important;
    }

    .el-card__body {
      padding: 0 !important;
    }
  }

  /* 产品卡片 */
  .product-card {
    background-color: #04080b !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    border-radius: 0 !important;
    padding: 20px;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    align-self: stretch;

    &:hover {
      border-color: rgba(0, 255, 136, 0.4) !important;
    }
  }

  /* 弹窗 */
  .el-dialog {
    background-color: #04080b !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;

    .el-dialog__header {
      border-bottom-color: rgba(0, 255, 136, 0.15) !important;
    }

    .el-dialog__title {
      color: #ffffff !important;
    }

    .el-dialog__body {
      color: #a0a0a0 !important;
    }
  }

  /* 抽屉 */
  .el-drawer {
    background-color: #04080b !important;

    .el-drawer__header {
      color: #ffffff !important;
      border-bottom-color: rgba(0, 255, 136, 0.15) !important;
    }
  }

  /* 下拉菜单 */
  .el-dropdown-menu,
  .el-select-dropdown,
  .el-popper {
    background-color: #04080b !important;
    border-color: rgba(0, 255, 136, 0.2) !important;
  }

  .el-dropdown-menu__item {
    color: #a0a0a0 !important;

    &:hover {
      background-color: rgba(0, 255, 136, 0.08) !important;
      color: #00ff88 !important;
    }
  }

  /* 表格 */
  .el-table {
    border-radius: 0 !important;
    background: transparent !important;
    border: 1px solid rgba(0, 255, 136, .2) !important;
    color: #fff !important;
.cell{
  color: #ffffff !important;
}
    th.el-table__cell {
      background-color: transparent !important;
      color: #fff;
      border-color: rgba(0, 255, 136, 0.15) !important;
    }

    td.el-table__cell {
      background-color: transparent !important;
    
    }

    tr {
      background-color: transparent !important;

      &:hover > td.el-table__cell {
        color: #00ff88 !important;
        background-color: #032D1D !important;
      }
    }

    .el-table__row {
      
      background-color: transparent !important;
    }
  }

  /* 分页 */
  .el-pagination {
    button,
    .el-pager li {
      background-color: #04080b !important;
      color: #a0a0a0 !important;
      border: 1px solid rgba(0, 255, 136, 0.15) !important;

      &:hover {
        color: #00ff88 !important;
        border-color: rgba(0, 255, 136, 0.3) !important;
      }

      &.is-active {
        background-color: #00ff88 !important;
        color: #000000 !important;
        border-color: #00ff88 !important;
      }
    }
  }

  /* 消息框 */
  .el-message-box {
    background-color: var(--bg-color-secondary) !important;
    border-color: var(--border-color-light) !important;

    .el-message-box__title {
      color: var(--text-color-primary) !important;
    }

    .el-message-box__message {
      color: var(--text-color-secondary) !important;
    }
  }

  /* 标签页 */
  .el-tabs__item {
    color: #a0a0a0 !important;

    &.is-active {
      color: #00ff88 !important;
    }

    &:hover {
      color: #00ff88 !important;
    }
  }

  .el-tabs__active-bar {
    background-color: #00ff88 !important;
  }

  /* 空状态 */
  .el-empty__description {
    color: var(--text-color-tertiary) !important;
  }
}

/* ========== View Transitions 主题切换动画 ========== */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  z-index: 1;
}

::view-transition-new(root) {
  z-index: 9999;
}

/* 圆形扩散动画 */
::view-transition-new(root) {
  animation: theme-circle-clip 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes theme-circle-clip {
  from {
    clip-path: circle(0% at var(--theme-transition-x, 50%) var(--theme-transition-y, 50%));
  }
  to {
    clip-path: circle(var(--theme-transition-radius, 100%) at var(--theme-transition-x, 50%) var(--theme-transition-y, 50%));
  }
}

/* 深色模式切换时反向动画 */
[data-theme="dark"]::view-transition-old(root) {
  z-index: 9999;
  animation: theme-circle-clip-reverse 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"]::view-transition-new(root) {
  z-index: 1;
  animation: none;
}

@keyframes theme-circle-clip-reverse {
  from {
    clip-path: circle(var(--theme-transition-radius, 100%) at var(--theme-transition-x, 50%) var(--theme-transition-y, 50%));
  }
  to {
    clip-path: circle(0% at var(--theme-transition-x, 50%) var(--theme-transition-y, 50%));
  }
}

/* ========== 深色主题额外组件样式 ========== */
[data-theme="dark"] {
  /* Sender 组件 */
  .el-sender {
    background-color: var(--bg-color-secondary) !important;
    border-color: var(--border-color-light) !important;
  }

  /* 会话列表 */
  .conversations-wrap {
    .conversation-item {
      &:hover {
        background-color: var(--bg-color-tertiary) !important;
      }
    }
  }

  /* 创建对话按钮 */
  .creat-chat-btn {
    background-color: rgba(0, 255, 136, 0.1) !important;
    border-color: rgba(0, 255, 136, 0.2) !important;
    color: #00ff88 !important;
    border-radius: 0 !important;

    &:hover:not(.is-disabled) {
      background-color: rgba(0, 255, 136, 0.2) !important;
      border-color: rgba(0, 255, 136, 0.3) !important;
    }
  }

  /* 滚动条 */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    background: var(--bg-color-secondary);
  }

  ::-webkit-scrollbar-thumb {
    background: var(--border-color-default);
    border-radius: 3px;

    &:hover {
      background: var(--border-color-dark);
    }
  }

  /* 代码块 */
  pre, code {
    background-color: var(--bg-color-tertiary) !important;
  }

  /* Markdown 样式 */
  .markdown-body {
    color: #a0a0a0 !important;
    background-color: transparent !important;

    h1, h2, h3, h4, h5, h6 {
      color: #ffffff !important;
      border-bottom-color: rgba(0, 255, 136, 0.2) !important;
    }

    a {
      color: #00ff88 !important;

      &:hover {
        color: #ffffff !important;
      }
    }

    blockquote {
      border-left-color: rgba(0, 255, 136, 0.3) !important;
      color: #666 !important;
    }

    table {
      th, td {
        border-color: rgba(0, 255, 136, 0.15) !important;
      }

      tr {
        background-color: #04080b !important;

        &:nth-child(2n) {
          background-color: rgba(0, 255, 136, 0.05) !important;
        }
      }
    }

    hr {
      background-color: rgba(0, 255, 136, 0.2) !important;
    }

    p {
      color: #a0a0a0 !important;
    }

    code {
      color: #00ff88 !important;
      background-color: rgba(0, 255, 136, 0.1) !important;
    }
  }
}

/* ========== 登录弹窗深色样式 ========== */
[data-theme="dark"] {
  /* 登录弹窗 */
  .glass-dialog {
    background-color: #04080b !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
  }

  .left-section {
    background: linear-gradient(
      233deg,
      rgba(0, 255, 136, 0.2) 17.67%,
      rgba(0, 211, 110, 0.15) 70.4%
    ) !important;
  }

  .right-section {
    background-color: #04080b !important;

    .content-title {
      color: #ffffff !important;
    }

    .mode-toggle {
      color: #00ff88 !important;
    }
  }

  .form-container,
  .qr-container {
    color: #a0a0a0 !important;
  }

  /* 第三方登录按钮 */
  .third-party-btn {
    background-color: #04080b !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;

    &:hover {
      background-color: rgba(0, 255, 136, 0.1) !important;
      border-color: rgba(0, 255, 136, 0.3) !important;
    }
  }

  /* 分割线 */
  .el-divider__text {
    background-color: #04080b !important;
    color: #666 !important;
  }
}

/* ========== 聊天页面深色样式 ========== */
[data-theme="dark"] {
  /* 聊天默认页 */
  .chat-default {
    background-color: transparent !important;
  }

  .chat-default-wrap {
    background-color: transparent !important;
  }

  /* 欢迎文字 */
  .welcome-text {
    color: #ffffff !important;
  }

  /* 打字机效果背景 */
  .typer-container {
    background-color: transparent !important;
  }

  .el-typewriter__fog {
    background: linear-gradient(to right, transparent, rgba(10, 10, 10, 0.8)) !important;
  }

  /* 滚动按钮 */
  .scroll-btn {
    background-color: #04080b !important;
    border-color: rgba(0, 255, 136, 0.2) !important;
    color: #666 !important;

    &:hover {
      background-color: rgba(0, 255, 136, 0.1) !important;
      color: #00ff88 !important;
    }
  }
}

/* ========== Sender 输入框深色样式 ========== */
[data-theme="dark"] {
  .el-sender,
  .chat-defaul-sender,
  .chat-default-sender {
    background-color: #04080b !important;
    border-color: rgba(0, 255, 136, 0.2) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
  }

  .el-sender__inner {
    background-color: #04080b !important;
  }

  .el-sender__header {
    background-color: #04080b !important;
    border-bottom-color: rgba(0, 255, 136, 0.15) !important;
  }

  .el-sender__footer {
    background-color: #04080b !important;
    border-top-color: rgba(0, 255, 136, 0.15) !important;
  }

  /* 文本域 */
  .el-sender textarea,
  .el-sender .el-textarea__inner {
    background-color: transparent !important;
    color: #a0a0a0 !important;

    &::placeholder {
      color: #666 !important;
    }
  }
}

/* ========== 菜单深色样式 ========== */
[data-theme="dark"] {
  .el-menu {
    background-color: #04080b !important;
    border-color: rgba(0, 255, 136, 0.15) !important;
  }

  .el-menu-item,
  .el-sub-menu__title {
    color: #a0a0a0 !important;

    &:hover {
      background-color: rgba(0, 255, 136, 0.08) !important;
    }

    &.is-active {
      color: #00ff88 !important;
      background-color: rgba(0, 255, 136, 0.15) !important;
    }
  }

  .el-sub-menu .el-menu {
    background-color: #04080b !important;
  }
}

/* ========== 气泡和消息深色样式 ========== */
[data-theme="dark"] {
  /* 气泡列表 */
  .el-bubble-list {
    background-color: transparent !important;
  }

  /* AI 气泡 */
  .el-bubble[data-placement="start"] .el-bubble-content,
  .el-bubble--start .el-bubble-content {
    background-color: #04080b !important;
    color: #a0a0a0 !important;
    border: 1px solid rgba(0, 255, 136, 0.15) !important;
  }

  /* 用户气泡 */
  .el-bubble[data-placement="end"] .el-bubble-content,
  .el-bubble--end .el-bubble-content {
    background-color: #00d36e !important;
    color: #000000 !important;
  }

  /* 用户文件项 */
  .user-file-item {
    background-color: rgba(0, 255, 136, 0.1) !important;
    color: #a0a0a0 !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
  }

  /* 思考链 */
  .el-thinking,
  .thinking-chain-warp {
    background-color: #04080b !important;
    border-color: rgba(0, 255, 136, 0.15) !important;
    color: #666 !important;
  }
}

/* ========== 附件和文件卡片深色样式 ========== */
[data-theme="dark"] {
  .el-attachments,
  .el-files-card {
    background-color: #04080b !important;
    border-color: rgba(0, 255, 136, 0.2) !important;
  }

  .el-files-card__name {
    color: #a0a0a0 !important;
  }

  .el-files-card__size {
    color: #666 !important;
  }
}

/* ========== 模型选择深色样式 ========== */
[data-theme="dark"] {
  .model-select-trigger {
    background-color: #04080b !important;
    border-color: rgba(0, 255, 136, 0.2) !important;
    color: #a0a0a0 !important;
  }

  .model-select-dropdown {
    background-color: #04080b !important;
    border-color: rgba(0, 255, 136, 0.2) !important;
  }

  .model-item {
    color: #a0a0a0 !important;

    &:hover {
      background-color: rgba(0, 255, 136, 0.05) !important;
    }

    &.is-active {
      background-color: rgba(0, 255, 136, 0.15) !important;
      color: #00ff88 !important;
    }
  }
}

/* ========== 会话列表深色样式 ========== */
[data-theme="dark"] {
  .conversations-list {
    background-color: transparent !important;
  }

  .conversation-item {
    color: #a0a0a0 !important;
    border-radius: 0 !important;

    &:hover {
      background-color: rgba(0, 255, 136, 0.05) !important;
    }
  }

  .conversation-item-active {
    background-color: rgba(0, 255, 136, 0.1) !important;
    border-left: 2px solid #00ff88 !important;
    box-shadow: none !important;
  }

  .conversation-title {
    color: #ffffff !important;
  }

  .conversation-preview {
    color: #666 !important;
  }

  .avatar-circle {
    background: linear-gradient(135deg, #00ff88 0%, #00d36e 100%) !important;
  }
}

/* ========== Tooltip 和 Popover 深色样式 ========== */
[data-theme="dark"] {
  .el-tooltip__popper,
  .el-popover {
    background-color: #04080b !important;
    border-color: rgba(0, 255, 136, 0.2) !important;
    color: #a0a0a0 !important;
  }

  .el-tooltip__popper.is-dark {
    background-color: #04080b !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
  }
}

/* ========== 通用文字和链接深色样式 ========== */
[data-theme="dark"] {
  /* 大标题样式 */
  h1 {
    color: #ffffff !important;
    font-size: 68px !important;
    line-height: 74px !important;
  }

  h2 {
    color: #ffffff !important;
    font-size: 24px !important;
    line-height: 62px !important;
  }

  h3 {
    color: #ffffff !important;
    font-size: 22px !important;
    line-height: 54px !important;
  }

  /* 正文标题 */
  h4, h5, h6 {
    color: #ffffff !important;
    font-size: 28px !important;
    line-height: 30px !important;
  }

  /* 正文 */
  p {
    color: #a0a0a0 !important;
    line-height: 22px !important;
    font-size: 16px !important;
    font-weight: 400 !important;
  }

  /* 备注内容 */
  small, .note, .hint, .tip {
    color: #666 !important;
    font-size: 12px !important;
    line-height: 18px !important;
  }

  /* 链接 */
  a {
    color: #00ff88 !important;

    &:hover {
      color: #ffffff !important;
      border-bottom-color: #00ff88 !important;
    }
  }

  /* 突出内容 */
  .highlight, .accent, strong {
    color: #00ff88 !important;
  }

  /* 标签 */
  .el-tag {
    color: #00ff88 !important;
    background: rgba(0, 255, 136, 0.1) !important;
    border-radius: 0 !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
  }

  /* 自定义标签样式 */
  .tag, .badge, .label {
    color: #00ff88 !important;
    background: rgba(0, 255, 136, 0.1) !important;
    border-radius: 0 !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
  }

  /* 徽章 */
  .el-badge__content {
    background-color: #ef4444 !important;
  }
}

/* ========== 布局容器深色样式 ========== */
[data-theme="dark"] {
  .el-container {
    background-color: transparent !important;
  }

  .el-main {
    background-color: transparent !important;
  }

  .el-aside {
    background-color: #04080b !important;
  }
}

/* ========== 自定义弹出框深色样式 ========== */
[data-theme="dark"] {
  .custom-popover .el-menu {
    background-color: #04080b !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;

    .el-menu-item {
      color: #a0a0a0 !important;

      &:hover {
        background-color: rgba(0, 255, 136, 0.08) !important;
        color: #00ff88 !important;
      }

      &.is-active {
        color: #00ff88 !important;
        background-color: rgba(0, 255, 136, 0.15) !important;
      }
    }
  }
}

/* ========== 移动端抽屉深色样式 ========== */
[data-theme="dark"] {
  .mobile-drawer .el-drawer {
    background-color: #04080b !important;
  }

  .drawer-title {
    color: #ffffff !important;
  }

  .mobile-menu {
    background-color: #04080b !important;
  }

  .mobile-menu-actions {
    border-top-color: rgba(0, 255, 136, 0.15) !important;
  }
}

/* ========== 二维码登录深色样式 ========== */
[data-theme="dark"] {
  .qr-code-container {
    background-color: #04080b !important;
  }

  .qr-code-tip {
    color: #666 !important;
  }
}

/* ========== 控制台页面深色样式 ========== */
[data-theme="dark"] {
  .console-container,
  .console-page {
    background-color: transparent !important;
  }

  .console-card {
    background-color: #04080b !important;
    border-color: rgba(0, 255, 136, 0.2) !important;
  }

  .console-title {
    color: #ffffff !important;
  }

  .console-desc {
    color: #a0a0a0 !important;
  }
}

/* ========== 产品/定价页面深色样式 ========== */
[data-theme="dark"] {
  .products-container,
  .pricing-container {
    background-color: transparent !important;
  }

  .product-card {
    background-color: #04080b !important;
    border: 1px solid rgba(0, 255, 136, 0.2) !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    &:hover {
      border-color: rgba(0, 255, 136, 0.4) !important;
    }
  }

  .product-title {
    color: #ffffff !important;
  }

  .product-price {
    color: #00ff88 !important;
  }

  .product-desc {
    color: #a0a0a0 !important;
  }
}

/* ========== Select 选择器深色样式 ========== */
[data-theme="dark"] {
  .el-select {
    .el-input__wrapper {
      background-color: #04080b !important;
      box-shadow: 0 0 0 1px rgba(0, 255, 136, 0.2) inset !important;
      border-radius: 0 !important;
    }

    .el-input__inner {
      color: #a0a0a0 !important;
    }
  }

  .el-select-dropdown {
    background-color: #04080b !important;
    border-color: rgba(0, 255, 136, 0.2) !important;

    .el-select-dropdown__item {
      color: #a0a0a0 !important;

      &:hover {
        background-color: rgba(0, 255, 136, 0.08) !important;
      }

      &.selected {
        color: #00ff88 !important;
        background-color: rgba(0, 255, 136, 0.15) !important;
      }
    }
  }
}

/* ========== 复选框和单选框深色样式 ========== */
[data-theme="dark"] {
  .el-checkbox__inner,
  .el-radio__inner {
    background-color: #04080b !important;
    border-color: rgba(0, 255, 136, 0.3) !important;
  }

  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-radio__input.is-checked .el-radio__inner {
    background-color: #00ff88 !important;
    border-color: #00ff88 !important;
  }

  .el-checkbox__label,
  .el-radio__label {
    color: #a0a0a0 !important;
  }
}

/* ========== Switch 开关深色样式 ========== */
[data-theme="dark"] {
  .el-switch__core {
    background-color: #4b5563 !important;
    border-color: #4b5563 !important;
  }

  .el-switch.is-checked .el-switch__core {
    background-color: #00ff88 !important;
    border-color: #00ff88 !important;
  }
}

/* ========== Loading 加载深色样式 ========== */
[data-theme="dark"] {
  .el-loading-mask {
    background-color: rgba(17, 24, 39, 0.9) !important;
  }

  .el-loading-text {
    color: #e5e7eb !important;
  }
}

/* ========== Message 消息深色样式 ========== */
[data-theme="dark"] {
  .el-message {
    background-color: #04080b !important;
    border-color: rgba(0, 255, 136, 0.2) !important;

    .el-message__content {
      color: #a0a0a0 !important;
    }

    &.el-message--success {
      background-color: rgba(0, 211, 110, 0.1) !important;
      border-color: rgba(0, 255, 136, 0.3) !important;

      .el-message__content {
        color: #00ff88 !important;
      }
    }
  }
}

/* ========== Notification 通知深色样式 ========== */
[data-theme="dark"] {
  .el-notification {
    background-color: #04080b !important;
    border-color: rgba(0, 255, 136, 0.2) !important;

    .el-notification__title {
      color: #ffffff !important;
    }

    .el-notification__content {
      color: #a0a0a0 !important;
    }
  }
}

/* ========== 日期选择器深色样式 ========== */
[data-theme="dark"] {
  .el-date-picker,
  .el-picker-panel {
    background-color: #04080b !important;
    border-color: rgba(0, 255, 136, 0.2) !important;
  }

  .el-date-picker__header-label,
  .el-picker-panel__icon-btn {
    color: #a0a0a0 !important;
  }

  .el-date-table td.available:hover,
  .el-date-table td.current:not(.disabled) {
    color: #00ff88 !important;
    background-color: rgba(0, 255, 136, 0.15) !important;
  }

  .el-date-table td.today span {
    color: #00ff88 !important;
  }
}

/* ========== 模型选择弹窗深色样式 ========== */
[data-theme="dark"] {
  .model-select-dialog {
    .el-dialog {
      background-color: #1f2937 !important;
    }

    .el-dialog__header {
      border-bottom-color: #374151 !important;
    }

    .el-dialog__title {
      color: #f3f4f6 !important;
    }

    .el-dialog__body {
      background-color: #1f2937 !important;
    }
  }

  .model-list-container {
    background-color: #1f2937 !important;
  }

  /* 侧边导航 */
  .border-gray-100 {
    border-color: #374151 !important;
  }

  /* 分组标题 */
  .group-title,
  .text-gray-500 {
    color: #666 !important;
  }

  .text-gray-600 {
    color: #a0a0a0 !important;
  }

  .text-gray-700 {
    color: #a0a0a0 !important;
  }

  .text-gray-400 {
    color: #666 !important;
  }

  /* 背景色 */
  .bg-gray-50 {
    background-color: rgba(0, 255, 136, 0.05) !important;
  }

  .bg-gray-100 {
    background-color: #04080b !important;
  }

  .hover\:bg-gray-50:hover {
    background-color: rgba(0, 255, 136, 0.08) !important;
  }

  .bg-blue-50 {
    background-color: rgba(0, 255, 136, 0.1) !important;
  }

  /* 边框 */
  .border-gray-200 {
    border-color: rgba(0, 255, 136, 0.2) !important;
  }

  /* 模型 Logo 背景 */
  .bg-white {
    background-color: #04080b !important;
  }

  /* 更多 Tailwind 背景色 */
  .bg-green-100 {
    background-color: rgba(0, 255, 136, 0.1) !important;
  }

  .bg-orange-100 {
    background-color: rgba(251, 191, 36, 0.2) !important;
  }

  .bg-yellow-100 {
    background-color: rgba(251, 191, 36, 0.2) !important;
  }

  /* 更多 Tailwind 文字色 */
  .text-green-600 {
    color: #00ff88 !important;
  }

  .text-orange-600 {
    color: #fbbf24 !important;
  }

  .text-yellow-600 {
    color: #fbbf24 !important;
  }

  .text-blue-600 {
    color: #00ff88 !important;
  }

  .text-gray-600 {
    color: #a0a0a0 !important;
  }
}

/* ========== 欢迎文字打字机效果深色样式 ========== */
[data-theme="dark"] {
  .welcome-text {
    color: #ffffff !important;
  }

  .el-typewriter__fog {
    background: linear-gradient(to right, transparent, rgba(10, 10, 10, 0.8)) !important;
  }

  .typer-container {
    background-color: transparent !important;
  }
}

/* ========== 产品套餐弹窗深色样式 ========== */
[data-theme="dark"] {
  .product-package-dialog {
    .el-dialog {
      background-color: #04080b !important;
    }
  }

  .package-card {
    background-color: #04080b !important;
    border-color: rgba(0, 255, 136, 0.2) !important;
    border-radius: 0 !important;

    &:hover {
      border-color: rgba(0, 255, 136, 0.4) !important;
    }
  }

  .package-title {
    color: #ffffff !important;
  }

  .package-price {
    color: #00ff88 !important;
  }

  .package-desc {
    color: #a0a0a0 !important;
  }
}

/* ========== 用户中心深色样式 ========== */
[data-theme="dark"] {
  .user-center-card {
    background-color: #04080b !important;
    border-color: rgba(0, 255, 136, 0.2) !important;
  }

  .user-info-item {
    color: #a0a0a0 !important;
  }

  .user-info-label {
    color: #666 !important;
  }
}

/* ========== 尊享过滤标签深色样式 ========== */
[data-theme="dark"] {
  .premium-filter-tag {
    background: linear-gradient(#04080b, #04080b) padding-box,
                linear-gradient(90deg, #00ff88, #00d36e, #00c060, #00a850, #00ff88) border-box !important;
  }
}

/* ========== 更多 Tailwind 工具类深色覆盖 ========== */
[data-theme="dark"] {
  /* 边框颜色 */
  .border-gray-100 {
    border-color: rgba(0, 255, 136, 0.15) !important;
  }

  .border-gray-200 {
    border-color: rgba(0, 255, 136, 0.2) !important;
  }

  /* 文字颜色 */
  .text-lg,
  .text-base,
  .text-sm,
  .text-xs {
    color: #a0a0a0 !important;
  }

  .text-white {
    color: #ffffff !important;
  }

  /* 字体粗细保持不变 */
  .font-bold,
  .font-semibold,
  .font-medium {
    font-weight: inherit;
  }
}

/* ========== 联系我们弹窗深色样式 ========== */
[data-theme="dark"] {
  .wechat-message-box {
    .el-message-box {
      background-color: #04080b !important;
    }

    .text-blue-600 {
      color: #00ff88 !important;
    }

    .text-gray-600 {
      color: #a0a0a0 !important;
    }

    .bg-yellow-100 {
      background-color: rgba(251, 191, 36, 0.2) !important;
    }

    .text-yellow-800 {
      color: #fbbf24 !important;
    }
  }
}

/* ========== 模型库页面深色样式 ========== */
[data-theme="dark"] {
  .model-library-container {
    background-color: transparent !important;
  }

  .model-library-card {
    background-color: #04080b !important;
    border-color: rgba(0, 255, 136, 0.2) !important;

    &:hover {
      border-color: rgba(0, 255, 136, 0.4) !important;
    }
  }
}

/* ========== 深度思考组件深色样式 ========== */
[data-theme="dark"] {
  .deep-thinking-container {
    background-color: #04080b !important;
    border-color: rgba(0, 255, 136, 0.2) !important;
  }
}

/* ========== 文件选择组件深色样式 ========== */
[data-theme="dark"] {
  .files-select-container {
    background-color: #04080b !important;
    border-color: rgba(0, 255, 136, 0.2) !important;
  }
}

/* ========== 系统公告弹窗深色样式 ========== */
[data-theme="dark"] {
  .system-announcement-dialog {
    .el-dialog {
      background-color: #04080b !important;
    }
  }
}

/* ========== 其他 ========== */
[data-theme="dark"] {
  .conversation-content .conversation-label
  {
    color: #CFD3DC;
  }

  .conversations-wrap .conversation-item:hover{
    border: 1px solid rgba(0, 255, 136, .2);
    border-color: #0f86 !important;
  }

  .conversation-item.active{
    border: 1px solid rgba(0, 255, 136, .2);
    border-color: #0f86 !important;
    background-color: transparent !important;
  }
  .model-select-box{
    background-color: transparent !important;
    border-radius: 0 !important;
  }

  .c-\#0057ff{
    color: #00ff88 !important;
  }
  .b-\#0057ff{
    border-color:  #00ff88 !important;
  }
  .btn-icon-btn .svg-icon{
    color: #00ff88 !important;
  }
  .el-sender{
    border-radius: 0;
  }
  
  .typer-content{
    color: #fff !important;
  }

  .nav-header{
    background: transparent !important;
  }
  .info-item{
    border-radius: 0 !important;
    background-color: transparent !important;
    border: 1px solid rgba(0, 255, 136, .2) !important;
  }
  .info-value{
    color: #fff !important;
  }
  .recharge-log-container{
    background: transparent !important;
  }
  .filter-toolbar{
    background: transparent !important;
    border-radius: 0 !important;
    border: 1px solid rgba(0, 255, 136, .2) !important;
  }
  .el-select__wrapper{
    border-radius: 0 !important;
    background-color: transparent !important;

  }
  .el-select{
    border: 1px solid rgba(0, 255, 136, .2) !important;
  }
  .toolbar{
    border-radius: 0 !important;
    background-color: transparent !important;
    border: 1px solid rgba(0, 255, 136, .2) !important;
    color: #fff !important;
  }
  .el-card__header{
    border-radius: 0 !important;
    background: transparent !important;
    border: 1px solid rgba(0, 255, 136, .2) !important;
    color: #fff !important;
  }
  .header-title{
    color: #fff !important;
  }
  .token-table-wrapper{
    border-radius: 0 !important;
    background: transparent !important;
    border: 1px solid rgba(0, 255, 136, .2) !important;
    color: #fff !important;
  }
  .guide-title{
    color: #fff !important;
  }
  .name-text{
    color: #fff !important;
  }
  .key-text{
    border-radius: 0 !important;
    background: transparent !important;
    color: #fff !important;
  }
  .chart-container{
    border-radius: 0 !important;
    background: transparent !important;
    border: 1px solid rgba(0, 255, 136, .2) !important;
    color: #fff !important;
  }
  .stat-item{
    border-radius: 0 !important;
    background: transparent !important;
    border: 1px solid rgba(0, 255, 136, .2) !important;
    color: #fff !important;
  }
  .progress-section{
    border-radius: 0 !important;
    background: transparent !important;
    border: 1px solid rgba(0, 255, 136, .2) !important;
    color: #fff !important;
  }
  .el-alert{
    border-radius: 0 !important;
    background: transparent !important;
    border: 1px solid rgba(0, 255, 136, .2) !important;
    color: #fff !important;
  }
  .chart-container-wrapper{
    border-radius: 0 !important;
    background: transparent !important;
    border: 1px solid rgba(0, 255, 136, .2) !important;
    color: #fff !important;
  }
  .token-stat-item{
    border-radius: 0 !important;
    background: transparent !important;
    border: 1px solid rgba(0, 255, 136, .2) !important;
    color: #fff !important;
  }
  .token-value{
    color: #fff !important;
  }
  .progress-label{
    color: #fff !important;
  }
  .token-name{
    color: #fff !important;
  }
  .consumption-card{
    border-radius: 0 !important;
    background: transparent !important;
    border: 1px solid rgba(0, 255, 136, .2) !important;
    color: #fff !important;
  }
  .task-item{
    border-radius: 0 !important;
    background: transparent !important;
    border: 1px solid rgba(0, 255, 136, .2) !important;
    color: #fff !important;
  }
  .task-name{
    color: #fff !important;
  }
  .video-generation-page{
    background: transparent !important;
    color: #fff !important;
  }
  .el-empty i{
    color: #fff !important;
  }
  .session-sidebar{
    background: #04080b !important
    
  }
  .session-sidebar .session-item:hover{
    background: transparent !important;
    border: 1px solid rgba(0, 255, 136, 0.4);
    border-radius: 0;
  }
  .tip-item{
    border-radius: 0 !important;
    background: transparent !important;
    border: 1px solid rgba(0, 255, 136, .2) !important;
    color: #fff !important;
  }
  .tools-panel{
    border-radius: 0 !important;
    background: transparent !important;
    border: 1px solid rgba(0, 255, 136, .2) !important;
    color: #fff !important;
  }
  .tool-item {
    border-radius: 0 !important;
    background: transparent !important;
    border: 1px solid rgba(0, 255, 136, .2) !important;
    color: #fff !important;
  }
  .el-tabs--border-card{
    border-radius: 0 !important;
    background: transparent !important;
    border: 1px solid rgba(0, 255, 136, .2) !important;
  }
  .el-tabs--border-card>.el-tabs__header{
    border-radius: 0 !important;
    background: transparent !important;
  }
  .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
    color: #00ff88 !important;
    background-color: rgba(0, 255, 136, 0.15) !important;
  }
  .channel-management{
    border-radius: 0 !important;
    background: transparent !important;
    border: 1px solid rgba(0, 255, 136, .2) !important;
    color: #fff !important;
  }
  .model-list-panel{
    border-radius: 0 !important;
    background: transparent !important;
    border: 1px solid rgba(0, 255, 136, .2) !important;
    color: #fff !important;
  }
  .app-list-panel{
    border-radius: 0 !important;
    background: transparent !important;
    border: 1px solid rgba(0, 255, 136, .2) !important;
    color: #fff !important;
  }
}