/* =========================================================
   token-bridge.css —— 旧主题 → 设计令牌 桥接层
   ---------------------------------------------------------
   作用：把服务器旧主题 CSS（/statics/home/default/css/*）里
         硬编码的颜色 / 圆角 / 阴影 / 字体，以及 5 套互相冲突的
         :root 变量系统，统一收敛到 main.css 的设计令牌。
   原则：
     1) 不修改旧主题 CSS 一个字节；本文件只做覆盖。
     2) 必须最后加载 —— 由 composables/usePageCss.ts 追加在页面 CSS 之后。
     3) 变量块用 html:root 提升特异性，保证不受加载顺序影响。
     4) 仅覆盖"系统值"；一次性渐变、插画、第三方品牌色（微信绿等）保持原样。
   层次：0 :root 归一  1 字体基线  2 主色/按钮  3 圆角
         4 卡片/阴影  5 分页  6 表格  7 表单  8 容器宽度
   ========================================================= */

/* ========== 0. 变量归一（消除 5 套冲突变量系统） ==========
   旧主题在 integral/journal/news/purchase/supply 各自定义了 :root，
   同名变量值不同（--primary-color 分别是橙/蓝/蓝/红/灰蓝），
   后加载者覆盖前者 —— 这是"同一组件在不同页面长得不一样"的根因。
   html:root 特异性 (0,1,1) > 旧主题的 :root (0,1,0)，必然胜出。 */
html:root {
  /* integral.css:1 系列 */
  --primary-color: var(--c-accent);
  --primary-light: var(--c-accent-light);
  --primary-dark: var(--c-accent-dark);
  --primary-gradient: linear-gradient(135deg, var(--c-accent), var(--c-accent-light));
  --secondary-color: var(--c-accent);
  --secondary-light: var(--c-accent-light);
  --accent-color: var(--c-accent);
  --accent-light: var(--c-accent-light);
  --gold-color: var(--c-warn);
  --silver-color: var(--c-label);
  --bronze-color: var(--c-price);
  --text-dark: var(--c-ink);
  --text-medium: var(--c-muted);
  --text-light: var(--c-label);
  --bg-light: var(--c-bg);
  --bg-white: var(--c-card);
  --border-color: var(--c-line);
  --shadow-sm: var(--sh-soft);
  --shadow-md: var(--sh-soft-hover);
  --shadow-lg: var(--sh-hover);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-sm);
  --radius-lg: var(--r-md);
  --radius-xl: var(--r-md);
  --transition: var(--ease);

  /* journal.css:130 系列 */
  --text-primary: var(--c-ink);
  --text-secondary: var(--c-muted);
  --divider-color: var(--c-line);
  --background-light: var(--c-bg);
  --white: var(--c-card);
  --border-radius: var(--r-xs);
  --box-shadow: var(--sh-soft);

  /* news.css:92 / supply.css:1 系列 */
  --text-color: var(--c-ink);
  --light-text: var(--c-muted);
  --card-shadow: var(--sh-soft);
  --tag-color: var(--c-accent);

  /* purchase.css:329 系列（其 --primary:#e74c3c 会覆盖 main.css，必须纠正） */
  --primary: var(--c-accent);
  --secondary: var(--c-accent-dark);
  --accent: var(--c-accent);
  --light: var(--c-accent-soft);
  --border: var(--c-line);
  --text: var(--c-ink);
}

/* ========== 1. 字体基线 ========== */
body,
.site {
  font-family: var(--font-sans);
}
/* 全站字号整体上调一档：旧主题 style.css 把 body 定死 14px，
   这里用 html:root 提权覆盖为 15px（继承型文本随之变大）。 */
html:root body {
  font-size: 15px;
}
.site .sku,
.site .mono,
.site code,
.site kbd {
  font-family: var(--font-mono);
}

/* ========== 2. 主色 / 按钮 / 强调元素 ==========
   旧主题按钮分散在 26 个文件里，主色分别用了
   #e93323 / #ff6a00 / #0094e8 / #4a6baf / #1890ff / #0075bd /
   #1E9FFF / #1057a7 / #ff1818 / #ff6700 / #ff6b6b / #e74c3c …
   这里统一收敛到 --c-accent。 */

/* --- 2.1 实心主按钮（排除 disabled 态） --- */
.site .btn-primary,
.site .btn-atc,
.site .btn-primary--prom,
.site .tipDia--sus__sub,
.site .btn-quote,
.site .layui-btn-normal,
.site .goods-btn.cart,
.site .action-button,
.site .quote-button,
.site .compare-btn,
.site .apply-btn,
.site .notification-btn,
.site .btn-quick-quote,
.site .primary-action-btn,
.site .primary-button,
.site .action-btn,
.site .message-action-btn.primary,
.site .price-modal-btn-primary,
.site .send-btn,
.site .confirm-btn:not(.disabled),
.site .exchange-btn:not(.disabled),
.site .check-in-btn:not(.disabled),
.site .login-btn,
.site .view-btn.active,
.site .tab-btn.active,
.site .sort-btn.active,
.site .filter-btn.active,
.site .pagination-btn.active,
.site .page-btn.active,
.site .period-btn.active,
.site .cta-button,
.site .view-button,
.site .detail-btn,
.site .card-button {
  background: var(--c-accent) !important;
  border-color: var(--c-accent) !important;
  color: #fff !important;
}

.site .btn-primary:hover,
.site .btn-atc:hover,
.site .btn-primary--prom:hover,
.site .layui-btn-normal:hover,
.site .goods-btn.cart:hover,
.site .action-button:hover,
.site .quote-button:hover,
.site .compare-btn:hover,
.site .apply-btn:hover,
.site .notification-btn:hover,
.site .btn-quick-quote:hover,
.site .primary-action-btn:hover,
.site .primary-button:hover,
.site .action-btn:hover,
.site .message-action-btn.primary:hover,
.site .price-modal-btn-primary:hover,
.site .send-btn:hover,
.site .confirm-btn:not(.disabled):hover,
.site .exchange-btn:not(.disabled):hover,
.site .check-in-btn:not(.disabled):hover,
.site .login-btn:hover,
.site .cta-button:hover,
.site .view-button:hover,
.site .detail-btn:hover,
.site .card-button:hover {
  background: var(--c-accent-dark) !important;
  border-color: var(--c-accent-dark) !important;
  color: #fff !important;
}

/* --- 2.2 旧主按钮 .default-btn（原 #e93323 红） --- */
.site .default-btn {
  background-color: var(--c-accent);
}
.site .default-btn:hover {
  background-color: var(--c-accent-dark);
}

/* --- 2.3 描边 / 次按钮 --- */
.site .goods-btn,
.site .register-btn,
.site .btn-remove,
.site .message-action-btn,
.site .view-detail-btn,
.site .clear-compare-btn,
.site .reset-btn,
.site .sample-btn,
.site .btn-view-detail,
.site .filter-btn,
.site .tab-button.active {
  border-color: var(--c-accent) !important;
  color: var(--c-accent) !important;
}
.site .goods-btn:hover,
.site .register-btn:hover,
.site .btn-remove:hover,
.site .message-action-btn:hover,
.site .view-detail-btn:hover,
.site .btn-view-detail:hover {
  background: var(--c-accent-soft) !important;
  border-color: var(--c-accent) !important;
  color: var(--c-accent) !important;
}

/* --- 2.4 搜索按钮 --- */
.site .middle-header .search-box .search-btn,
.site .search-box1 .search-btn {
  background-color: var(--c-accent) !important;
  color: #fff !important;
}
.site .middle-header .search-box .search-btn:hover,
.site .search-box1 .search-btn:hover {
  background: var(--c-accent-dark) !important;
}

/* --- 2.5 危险 / 提醒按钮 --- */
.site .layui-btn-danger {
  background-color: var(--c-hot);
}

/* --- 2.6 选中/激活态 --- */
.site .article_srh.is-active .btn,
.site .store-bar .button-item.active {
  background: var(--c-accent) !important;
  border-color: var(--c-accent) !important;
  color: #fff !important;
}
.site .tab-button.active,
.site .tab-btn.active,
.site .pagination-btn.active,
.site .page-btn.active,
.site .sort-btn.active,
.site .filter-btn.active,
.site .period-btn.active {
  border-color: var(--c-accent) !important;
}
.site .order-btn:hover {
  color: var(--c-accent) !important;
  border-color: var(--c-accent) !important;
}
.site .btn-buy {
  background: var(--c-accent) !important;
  border-color: var(--c-accent) !important;
  color: #fff !important;
}
.site .btn-buy:hover {
  background: var(--c-accent-dark) !important;
  border-color: var(--c-accent-dark) !important;
}

/* --- 2.7 价格 / 强调色 --- */
.site .price,
.site .price .unit,
.site .goods-price,
.site .detail-price {
  color: var(--c-price);
}

/* ========== 3. 圆角归一 ========== */
.site .default-btn.radius-btn,
.site .layui-btn,
.site .layui-btn-sm,
.site .layui-btn-xs,
.site .goods-btn,
.site .action-button,
.site .quote-button,
.site .compare-btn,
.site .apply-btn,
.site .reset-btn,
.site .period-btn,
.site .sort-btn,
.site .filter-btn,
.site .view-detail-btn,
.site .tab-btn,
.site .sample-btn,
.site .pagination-btn,
.site .page-btn,
.site .price-modal-btn {
  border-radius: var(--r-xs);
}
.site .card-button,
.site .primary-button,
.site .action-btn,
.site .message-action-btn,
.site .cta-button,
.site .login-btn,
.site .register-btn,
.site .exchange-btn,
.site .btn-small {
  border-radius: var(--r-sm);
}
.site .search-box1 .search-btn,
.site .notification-btn,
.site .search-btn {
  border-radius: var(--r-sm);
}

/* ========== 4. 卡片 / 面板 / 阴影 ========== */
.site .soft-card,
.site .card,
.site .panel {
  border-radius: var(--r-md);
  box-shadow: var(--sh-soft);
}
.site .layui-table-view,
.site .layui-table-box {
  border-color: var(--c-line);
}

/* ========== 5. 分页归一 ========== */
.site .list_pagination ul.pagination > li > a,
.site .pagination .page-go button,
.site .pagination-btn,
.site .page-btn,
.site .pagination-jump button {
  border-radius: var(--r-xs);
}
.site .pagination .page-go button,
.site .pagination-btn.active,
.site .page-btn.active,
.site .pagination-jump button {
  background-color: var(--c-accent) !important;
  border-color: var(--c-accent) !important;
  color: #fff !important;
}
.site .pagination-btn,
.site .page-btn {
  border-color: var(--c-line);
  color: var(--c-muted);
  background: var(--c-card);
}
.site .pagination-btn:hover:not(.disabled):not(.active),
.site .page-btn:hover:not(:disabled) {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: var(--c-card);
}

/* ========== 6. 表格归一 ========== */
.site .layui-table,
.site .layui-table td,
.site .layui-table th {
  border-color: var(--c-line);
}
.site .layui-table thead tr,
.site .cate_table .thead,
.site .listTable thead tr {
  background: var(--c-bg);
}
.site .layui-table th,
.site .listTable th,
.site .cate_table .thead td {
  color: var(--c-muted);
}
.site .layui-table tbody tr:hover,
.site .listTable tbody tr:hover {
  background: var(--c-bg);
}

/* ========== 7. 表单控件归一 ========== */
.site input:focus,
.site select:focus,
.site textarea:focus,
.site .form-control:focus {
  border-color: var(--c-accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}
.site input[type='checkbox'],
.site input[type='radio'],
.site input[type='range'] {
  accent-color: var(--c-accent);
}

/* ========== 8. 容器宽度统一（旧内页 1200 → 全站 1560 网格） ==========
   部分频道页 CSS 自带 max-width:1200px，导致商品 5 列、右侧留白，
   与首页 1560 不一致。这里在宽屏下统一到 --max。 */
@media (min-width: 1600px) {
  .site .container,
  .site .container-sm,
  .site .container-md,
  .site .container-lg,
  .site .container-xl,
  .site .container-xxl {
    max-width: var(--max) !important;
  }
}

/* ========== 9. 个别页面收敛 ========== */

/* /replace 替代型号：旧 replace.css 里 `.rep-box` 的居中 margin 被注释掉，
   导致 800px 表单卡片贴在容器左缘。这里在容器内重新居中。 */
.site .replace .rep-box {
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

/* /journal 期刊网格：末行单卡片与其它卡片等高（图片容器已由 journal.css
   固定 140% 宽高比，这里保证卡片本身撑满行高、末行不塌）。 */
.site .journal-grid {
  align-items: stretch;
}
.site .journal-card {
  display: flex;
  flex-direction: column;
}
.site .journal-card__link {
  flex: 1 1 auto;
}