erp-next/ruoyi-ui/src/assets/styles/theme-jd.scss

/* ═══════════════════════════════════════════════════════════════
   京东风格 — 全局主题（CSS 变量 + Element UI 覆盖）
   主色：#e4393c  深红：#c81623  背景灰：#ffffff
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ═══ 品牌色（京东红） ═══ */
  --jd-red: #e4393c;
  --jd-red-dark: #c81623;
  --jd-red-hover: #e55a5d;
  --jd-red-light: #fafafa;
  --jd-red-bg: #ffffff;

  /* ═══ 灰色系 ═══ */
  --bg-gray: #ffffff;
  --bg-white: #ffffff;
  --border-gray: #e5e5e5;
  --border-light: #f0f0f0;

  /* ═══ 文字色 ═══ */
  --text-dark: #333333;
  --text-medium: #666666;
  --text-light: #999999;

  /* ═══ 功能色 ═══ */
  --link-blue: #e4393c;
  --color-success: #67c23a;
  --color-warning: #e6a23c;
  --color-danger: #f56c6c;
  --color-info: #909399;

  /* ═══ 兼容旧变量名（逐步迁移） ═══ */
  --brand-primary: var(--jd-red);
  --brand-primary-hover: var(--jd-red-dark);
  --brand-primary-light: var(--jd-red-light);
  --bg-page: var(--bg-gray);
  --text-primary: var(--text-dark);
  --text-secondary: var(--text-medium);
  --text-muted: var(--text-light);
  --silver-border: var(--border-gray);
  --silver-bg: var(--bg-gray);
  --silver-text: var(--text-light);

  /* ═══ 金额色 ═══ */
  --color-amount: var(--jd-red);

  /* ═══ 圆角 ═══ */
  --radius-base: 2px;
  --radius-small: 2px;

  /* ═══ 阴影 ═══ */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-dialog: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-nav: 0 1px 3px rgba(0, 0, 0, 0.1);

  /* ═══ 间距 ═══ */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;

  /* ═══ 表格 ═══ */
  --table-header-bg: #ffffff;
  --table-header-text: #666666;
  --table-row-hover: #f5f7fa;
  --table-stripe: #fafafa;
  --table-border: #e5e5e5;

  /* ═══ 导航 ═══ */
  --nav-height: 50px;
  --nav-bg: #ffffff;
  --nav-text: #333333;
  --nav-hover: rgba(0, 0, 0, 0.04);

  /* ═══ 侧栏 ═══ */
  --sidebar-width: 192px;
  --sidebar-bg: #ffffff;
  --sidebar-text: #666666;
  --sidebar-text-active: #e4393c;
  --sidebar-hover-bg: rgba(0, 0, 0, 0.04);
  --sidebar-active-border: #e4393c;
  --sidebar-sub-bg: #fafafa;
}

/* ═══════════════════════════════════════════
   页面基础
   ═══════════════════════════════════════════ */
body {
  background: var(--bg-gray) !important;
  color: var(--text-dark);
}

/* 主内容区背景 */
.app-main,
.app-container,
.main-container {
  background: var(--bg-gray);
}

/* 面包屑背景匹配 */
.el-breadcrumb {
  font-size: 13px;
}

/* ═══════════════════════════════════════════
   顶部导航栏
   ═══════════════════════════════════════════ */
.navbar {
  background: #ffffff !important;
  border-bottom: 1px solid #ececec !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  height: var(--nav-height) !important;
  color: #333 !important;
  position: relative;

  /* 顶部红色品牌细条 */
  &::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 3px;
    background: linear-gradient(90deg, #e4393c 0%, #c81623 60%, #e4393c 100%);
  }

  .hamburger-container svg {
    color: #666 !important;
    fill: #666 !important;
  }

  .hamburger-container:hover {
    background: rgba(228, 57, 60, 0.06) !important;
    svg { fill: #e4393c !important; color: #e4393c !important; }
  }

  .breadcrumb-container {
    .el-breadcrumb__inner,
    .el-breadcrumb__inner a,
    .el-breadcrumb__separator {
      color: #999 !important;
      font-weight: 400 !important;
    }
    .el-breadcrumb__inner.is-link {
      font-weight: 400 !important;
      &:hover { color: #e4393c !important; }
    }
    .el-breadcrumb__item:last-child .el-breadcrumb__inner {
      color: #333 !important;
      font-weight: 500 !important;
    }
  }

  .right-menu {
    .right-menu-item {
      color: #666 !important;
      font-size: 16px !important;

      &.hover-effect:hover {
        color: #e4393c !important;
        background: rgba(228, 57, 60, 0.06) !important;
      }

      svg, i { color: #666 !important; }
      &:hover svg, &:hover i { color: #e4393c !important; }
    }

    .avatar-container {
      .user-nickname { color: #333 !important; font-weight: 500 !important; }
      .avatar-wrapper { margin-top: 6px !important; }
    }

    .el-dropdown { color: #333 !important; }

    .el-badge__content {
      border-color: #fff !important;
      background: #e4393c !important;
      color: #fff !important;
    }
  }

  /* TopBar nav3 模式 */
  .topbar-container {
    .el-menu--horizontal {
      background: transparent !important;
      border-bottom: none !important;

      .el-menu-item,
      .el-submenu__title {
        color: #555 !important;
        background: transparent !important;
        border-bottom: none !important;
        height: var(--nav-height) !important;
        line-height: var(--nav-height) !important;

        &:hover {
          color: #e4393c !important;
          background: rgba(228, 57, 60, 0.04) !important;
        }

        &.is-active {
          color: #e4393c !important;
          background: transparent !important;
          border-bottom: 2px solid #e4393c !important;
        }
      }
    }
  }
}

/* 返回顶部按钮 */
.top-btn {
  background: var(--jd-red) !important;
  border-color: var(--jd-red) !important;
}

/* ═══════════════════════════════════════════
   左侧菜单
   ═══════════════════════════════════════════ */
.sidebar-container {
  &.theme-light {
    background: var(--sidebar-bg) !important;
    border-right: 1px solid var(--border-gray) !important;
    box-shadow: none !important;
    width: var(--sidebar-width) !important;
  }

  .el-menu {
    background: var(--sidebar-bg) !important;
    border-right: none !important;
  }

  .el-menu-item,
  .el-submenu__title {
    color: var(--sidebar-text) !important;
    height: 40px !important;
    line-height: 40px !important;
    font-size: 13px !important;

    &:hover {
      color: var(--sidebar-text) !important;
      background: var(--sidebar-hover-bg) !important;
    }

    i, svg {
      color: var(--sidebar-text) !important;
    }
    &:hover i,
    &:hover svg {
      color: var(--sidebar-text) !important;
    }
  }

  .el-menu-item.is-active {
    color: var(--sidebar-text-active) !important;
    background: var(--sidebar-hover-bg) !important;
    position: relative;

    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: var(--sidebar-active-border) !important;
      z-index: 2;
    }

    i, svg {
      color: var(--sidebar-text-active) !important;
    }
  }

  .el-submenu.is-active > .el-submenu__title {
    color: var(--sidebar-text-active) !important;
    background: transparent !important;
  }

  /* 强制清除 element-ui 默认 hover 黄色背景 */
  .el-submenu__title:hover,
  .el-submenu__title:focus,
  .el-menu-item:focus {
    background: var(--sidebar-hover-bg) !important;
    outline: none !important;
  }

  /* 子菜单展开时 inline-style 的浅色背景一并覆盖 */
  .el-menu .el-menu-item,
  .el-menu .el-submenu__title {
    background-color: transparent !important;
  }

  /* 子菜单 */
  .el-submenu .el-menu {
    background: var(--sidebar-sub-bg) !important;
  }

  .el-submenu .el-menu-item {
    padding-left: 32px !important;
    height: 34px !important;
    line-height: 34px !important;
    font-size: 12px !important;
    color: var(--text-medium) !important;

    /* 二级菜单图标隐藏 */
    .svg-icon,
    > i,
    > .el-icon-,
    [class^="el-icon-"],
    [class*=" el-icon-"] {
      display: none !important;
      width: 0 !important;
      margin: 0 !important;
    }

    &:hover {
      color: var(--text-medium) !important;
      background: var(--sidebar-hover-bg) !important;
    }

    &.is-active {
      color: var(--sidebar-text-active) !important;
      background: var(--sidebar-hover-bg) !important;

      &::before {
        display: none;
      }
    }
  }

  /* Logo */
  .sidebar-logo {
    background: var(--sidebar-bg) !important;
    border-bottom: 1px solid var(--border-gray) !important;

    .sidebar-logo-title {
      color: var(--text-dark) !important;
      font-size: 15px !important;
      font-weight: 700;
    }
  }

  /* 折叠状态 */
  .el-menu--collapse {
    .el-menu-item,
    .el-submenu__title {
      padding-left: 16px !important;
    }
  }
}

/* ═══════════════════════════════════════════
   按钮样式 — 银灰风格
   ═══════════════════════════════════════════ */
/* 主按钮 — 京东红 */
.el-button--primary {
  background: var(--jd-red) !important;
  border: 1px solid var(--jd-red) !important;
  color: #fff !important;
  border-radius: var(--radius-base) !important;
  transition: all 0.2s;

  &:hover,
  &:focus {
    background: var(--jd-red-dark) !important;
    border-color: var(--jd-red-dark) !important;
  }

  &:active {
    background: #a30f1c !important;
    border-color: #a30f1c !important;
  }

  &.is-disabled,
  &.is-disabled:hover {
    background: #fbcecf !important;
    border-color: #fbcecf !important;
    color: #fff !important;
  }

  &.is-plain {
    background: #fff !important;
    border-color: var(--jd-red) !important;
    color: var(--jd-red) !important;

    &:hover {
      background: var(--jd-red) !important;
      color: #fff !important;
    }
  }
}

/* 次要按钮 */
.el-button--default {
  background: var(--bg-white) !important;
  border: 1px solid var(--border-gray) !important;
  color: var(--text-medium) !important;
  border-radius: var(--radius-base) !important;
  transition: all 0.2s;

  &:hover,
  &:focus {
    border-color: var(--jd-red) !important;
    color: var(--jd-red) !important;
  }

  &:active {
    border-color: var(--jd-red-dark) !important;
    color: var(--jd-red-dark) !important;
  }
}

/* 文字按钮（表格操作列链接） */
.el-button--text {
  color: var(--text-dark) !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  height: auto !important;
  line-height: normal !important;

  &:hover {
    color: var(--jd-red) !important;
    text-decoration: underline;
  }
}

/* 成功/危险/警告按钮统一圆角 */
.el-button--success,
.el-button--danger,
.el-button--warning,
.el-button--info {
  border-radius: var(--radius-base) !important;
}

/* 小按钮紧凑 */
.el-button--mini {
  padding: 4px 7px !important;
  font-size: 12px !important;
}

.el-button--small {
  padding: 6px 10px !important;
  font-size: 12px !important;
}

/* ═══════════════════════════════════════════
   表格样式 — 京东订单风格（紧凑单行）
   ═══════════════════════════════════════════ */
.el-table {
  border: 1px solid var(--border-gray) !important;
  border-bottom: none !important;
  font-size: 12px !important;

  /* 表头 */
  thead th {
    background: var(--table-header-bg) !important;
    color: var(--table-header-text) !important;
    font-weight: 500 !important;
    font-size: 11px !important;
    border-bottom: 1px solid var(--border-gray) !important;
    padding: 4px 6px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 表体 */
  td {
    color: var(--text-dark) !important;
    font-size: 12px !important;
    padding: 3px 4px !important;
    border-bottom: 1px solid var(--border-light) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* cell 内部（操作列允许换行） */
  .cell {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.3 !important;
    padding-left: 1px !important;
    padding-right: 1px !important;
  }

  /* 行悬停 */
  .el-table__body .el-table__row:hover td {
    background: var(--table-row-hover) !important;
  }

  /* 斑马纹 */
  &.el-table--striped {
    .el-table__body tr.el-table__row--striped td {
      background: var(--table-stripe) !important;
    }
    .el-table__body tr.el-table__row--striped:hover td {
      background: var(--table-row-hover) !important;
    }
  }

  /* 取消边框表格内部双线 */
  &.el-table--border {
    th,
    td {
      border-right: 1px solid var(--border-gray) !important;
    }
  }

  /* 空状态 */
  .el-table__empty-text {
    color: var(--text-light) !important;
    font-size: 13px;
  }

  /* 筛选列样式 */
  .el-table__column-filter-trigger i {
    color: var(--text-light) !important;
  }

  /* 表格内部按钮/标签紧凑 */
  .el-tag,
  .el-button--mini,
  .el-button--small {
    white-space: nowrap !important;
  }

  /* el-switch 紧凑 */
  .el-switch {
    height: 18px !important;
    line-height: 18px !important;
  }
  .el-switch__core {
    height: 14px !important;
    width: 36px !important;
  }
  .el-switch__core::after {
    width: 10px !important;
    height: 10px !important;
  }

  /* el-avatar 紧凑 */
  .el-avatar--small {
    width: 22px !important;
    height: 22px !important;
    line-height: 22px !important;
  }
}

/* 金额列红字加粗 */
.amount,
.amount-cell,
.el-table td .amount {
  color: var(--jd-red) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}

/* 标签内部按钮文本不折行 */
.el-table .el-button--text {
  white-space: nowrap !important;
  overflow: visible !important;
}

/* 表格所在容器禁止横向滚动 */
.app-container,
.jd-table-wrap,
.jd-order-page,
.cq-page,
.cd-page,
.client-manage {
  overflow-x: hidden !important;
}

/* 金额列红字加粗 */
.amount,
.amount-cell,
.el-table td .amount {
  color: var(--jd-red) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
}

/* 蓝色链接样式 */
.link-type,
.order-link {
  color: var(--link-blue) !important;
  cursor: pointer;
  transition: color 0.2s;

  &:hover {
    color: var(--jd-red) !important;
    text-decoration: underline;
  }
}

/* ═══════════════════════════════════════════
   分页器样式
   ═══════════════════════════════════════════ */
.el-pagination {
  padding: 14px 5px !important;
  font-weight: 400 !important;
  color: var(--text-medium) !important;

  .el-pager {
    li {
      border: 1px solid var(--border-gray) !important;
      border-radius: var(--radius-base) !important;
      margin: 0 2px !important;
      min-width: 28px !important;
      height: 28px !important;
      line-height: 28px !important;
      font-size: 12px !important;
      color: var(--text-medium) !important;
      background: var(--bg-white) !important;

      &:hover {
        border-color: var(--jd-red) !important;
        color: var(--jd-red) !important;
      }

      &.active {
        background: var(--jd-red) !important;
        border-color: var(--jd-red) !important;
        color: #fff !important;
      }
    }
  }

  .el-pagination__btn {
    border: 1px solid var(--border-gray) !important;
    border-radius: var(--radius-base) !important;
    min-width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
    font-size: 12px !important;
    color: var(--text-medium) !important;
    background: var(--bg-white) !important;

    &:hover {
      border-color: var(--jd-red) !important;
      color: var(--jd-red) !important;
    }

    &.is-disabled {
      color: var(--text-light) !important;
      border-color: var(--border-gray) !important;
    }
  }

  .el-pagination__sizes {
    .el-input__inner {
      border-color: var(--border-gray) !important;
      border-radius: var(--radius-base) !important;
      height: 28px !important;
      line-height: 28px !important;
      font-size: 12px !important;
    }
  }

  .el-pagination__total,
  .el-pagination__jump {
    font-size: 12px !important;
    color: var(--text-medium) !important;
  }
}

/* ═══════════════════════════════════════════
   输入框/选择器样式
   ═══════════════════════════════════════════ */
.el-input__inner,
.el-select .el-input__inner,
.el-textarea__inner {
  border: 1px solid var(--border-gray) !important;
  border-radius: var(--radius-base) !important;
  transition: all 0.2s;
  color: var(--text-dark) !important;

  &:focus {
    border-color: var(--jd-red) !important;
  }

  &:hover {
    border-color: var(--jd-red) !important;
  }
}

.el-input.is-disabled .el-input__inner {
  background: var(--bg-gray) !important;
  border-color: var(--border-light) !important;
  color: var(--text-light) !important;
}

.el-input__prefix,
.el-input__suffix {
  color: var(--text-light) !important;
}

/* 下拉框选项选中 */
.el-select-dropdown__item.selected {
  color: var(--sidebar-text-active) !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════
   日期选择器
   ═══════════════════════════════════════════ */
.el-date-editor {
  .el-input__inner {
    border-radius: var(--radius-base) !important;
  }

  &:hover .el-input__inner {
    border-color: var(--jd-red) !important;
  }
}

.el-date-table td.today {
  color: var(--jd-red) !important;
  font-weight: 700 !important;
}

.el-date-table td.current:not(.disabled) span {
  background: var(--jd-red) !important;
}

/* ═══════════════════════════════════════════
   Tabs 样式
   ═══════════════════════════════════════════ */
.el-tabs__item {
  color: var(--text-medium) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  padding: 0 14px !important;
  height: 38px !important;
  line-height: 38px !important;

  &:hover {
    color: var(--jd-red) !important;
  }

  &.is-active {
    color: var(--jd-red) !important;
    font-weight: 700 !important;
  }
}

.el-tabs__active-bar {
  background: var(--jd-red) !important;
  height: 2px !important;
}

.el-tabs__nav-wrap::after {
  height: 1px !important;
  background: var(--border-gray) !important;
}

/* ═══════════════════════════════════════════
   Tag 标签
   ═══════════════════════════════════════════ */
.el-tag {
  border-radius: var(--radius-small) !important;
  border: none !important;
  font-size: 12px !important;
  padding: 0 6px !important;
  height: 22px !important;
  line-height: 22px !important;
}

.el-tag--warning {
  background: #fdf6ec !important;
  color: #e6a23c !important;
}
.el-tag--primary {
  background: var(--jd-red-light) !important;
  color: var(--jd-red) !important;
}
.el-tag--success {
  background: #f0f9eb !important;
  color: #67c23a !important;
}
.el-tag--danger {
  background: #fef0f0 !important;
  color: #f56c6c !important;
}
.el-tag--info {
  background: #f4f4f5 !important;
  color: #909399 !important;
}

/* ═══════════════════════════════════════════
   卡片/面板
   ═══════════════════════════════════════════ */
.el-card {
  border: 1px solid var(--border-gray) !important;
  border-radius: var(--radius-base) !important;
  box-shadow: none !important;
}

.el-card__body {
  padding: 14px 16px !important;
}

/* ═══════════════════════════════════════════
   Dialog 弹窗
   ═══════════════════════════════════════════ */
.el-dialog {
  border-radius: var(--radius-base) !important;
  box-shadow: var(--shadow-dialog);
}

.el-dialog__header {
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--border-gray) !important;

  .el-dialog__title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
  }

  .el-dialog__headerbtn {
    font-size: 16px !important;
    top: 14px !important;
    right: 16px !important;

    .el-dialog__close {
      color: var(--text-light) !important;
      &:hover {
        color: var(--jd-red) !important;
      }
    }
  }
}

.el-dialog__body {
  padding: 16px 20px !important;
}

.el-dialog__footer {
  padding: 10px 20px 14px !important;
  border-top: 1px solid var(--border-light) !important;
}

/* ═══════════════════════════════════════════
   下拉菜单 Dropdown
   ═══════════════════════════════════════════ */
.el-dropdown-menu {
  border: 1px solid var(--border-gray) !important;
  border-radius: var(--radius-base) !important;
  box-shadow: var(--shadow-dialog) !important;
  padding: 4px 0 !important;

  .el-dropdown-menu__item {
    font-size: 13px !important;
    color: var(--text-medium) !important;
    padding: 6px 18px !important;

    &:hover {
      background: var(--jd-red-light) !important;
      color: var(--jd-red) !important;
    }
  }
}

/* ═══════════════════════════════════════════
   表单样式
   ═══════════════════════════════════════════ */
.el-form-item__label {
  color: var(--text-medium) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}

.el-form-item {
  margin-bottom: 16px !important;
}

/* ═══════════════════════════════════════════
   消息/通知
   ═══════════════════════════════════════════ */
.el-message {
  border-radius: var(--radius-base) !important;
  border-color: var(--border-gray) !important;
  box-shadow: var(--shadow-dialog) !important;
}

/* ═══════════════════════════════════════════
   Loading 加载
   ═══════════════════════════════════════════ */
.el-loading-spinner .path {
  stroke: var(--jd-red) !important;
}

.el-loading-spinner .el-loading-text {
  color: var(--jd-red) !important;
}

/* ═══════════════════════════════════════════
   步骤条
   ═══════════════════════════════════════════ */
.el-steps--simple {
  border-radius: var(--radius-base) !important;
  border: 1px solid var(--border-gray) !important;
  padding: 10px 16px !important;
}

/* ═══════════════════════════════════════════
   Switch 开关
   ═══════════════════════════════════════════ */
.el-switch.is-checked .el-switch__core {
  background: var(--jd-red) !important;
  border-color: var(--jd-red) !important;
}

/* ═══════════════════════════════════════════
   Radio 单选
   ═══════════════════════════════════════════ */
.el-radio__input.is-checked .el-radio__inner {
  background: var(--jd-red) !important;
  border-color: var(--jd-red) !important;
}

.el-radio__input.is-checked + .el-radio__label {
  color: var(--jd-red) !important;
}

/* ═══════════════════════════════════════════
   Checkbox 复选
   ═══════════════════════════════════════════ */
.el-checkbox__input.is-checked .el-checkbox__inner {
  background: var(--jd-red) !important;
  border-color: var(--jd-red) !important;
}

.el-checkbox__input.is-checked + .el-checkbox__label {
  color: var(--jd-red) !important;
}

/* ═══════════════════════════════════════════
   Tooltip 提示
   ═══════════════════════════════════════════ */
.el-tooltip__popper {
  border-radius: var(--radius-base) !important;
}

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

/* ═══════════════════════════════════════════
   Badge 徽标
   ═══════════════════════════════════════════ */
.el-badge__content {
  border-radius: 8px !important;
  font-size: 11px !important;
  padding: 0 5px !important;
}

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

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #d0d0d0;
  border-radius: 3px;

  &:hover {
    background: #b0b0b0;
  }
}

/* ═══════════════════════════════════════════
   淡入动画
   ═══════════════════════════════════════════ */
.fade-in {
  animation: fadeIn 0.2s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════
   统计卡片统一样式
   ═══════════════════════════════════════════ */
.el-row.stat-row {
  margin-bottom: 12px !important;
}

.stat-card {
  background: var(--bg-white) !important;
  border: 1px solid var(--border-gray) !important;
  border-top: none !important;
  border-radius: var(--radius-base) !important;
  padding: 12px 16px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;

  &:hover {
    box-shadow: var(--shadow-card);
  }

  .stat-num {
    font-size: 22px !important;
    font-weight: 400 !important;
    color: var(--text-dark) !important;
    line-height: 1.2;
  }

  .stat-lbl {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--text-light) !important;
    margin-top: 2px;
  }

  .stat-icon {
    font-size: 22px !important;
    opacity: 0.35;
  }
}

/* ═══════════════════════════════════════════
   旧品牌色迁移 — 将所有 #409EFF（Element 默认蓝）
   自动转为京东红，覆盖 inline style 和 class
   ═══════════════════════════════════════════ */
.amount,
[style*="color:#409EFF"],
[style*="color: #409EFF"],
[style*="color:#409eff"],
[style*="background:#409EFF"],
[style*="background: #409EFF"] {
  color: var(--jd-red) !important;
}

/* 迁移蓝色背景 */
[style*="background: linear-gradient(180deg, #409eff"] {
  background: var(--jd-red) !important;
}

/* 迁移蓝色边框 */
[style*="border-color: #409eff"],
[style*="border-color:#409eff"],
[style*="border-left: 4px solid #409EFF"],
[style*="border-bottom:2px solid #409EFF"] {
  border-color: var(--jd-red) !important;
}

/* 迁移蓝色 border-left 变体 */
[style*="border-left: 3px solid #409eff"],
[style*="border-left: 4px solid #409eff"] {
  border-left-color: var(--jd-red) !important;
}