/* ==========================================================================
   鸿途Pay 商户端定制样式（二开 UI 复刻）
   1. 深海军蓝侧边栏 + 蓝色高亮
   2. 仪表盘：蓝色 Welcome 横幅 / 8 统计卡片 / 小时流水 / 支付类型占比
   ========================================================================== */

:root {
  --ht-navy: #0b1a3a;
  --ht-navy-2: #0f2350;
  --ht-navy-3: #132c63;
  --ht-blue: #2f6bff;
  --ht-blue-deep: #1e54e6;
  --ht-text: #e8eefc;
  --ht-text-dim: #93a4c8;
}

/* ============================ 侧边栏（深海军蓝） ============================ */
.layout-sidebar .menu-left,
.layout-sidebar .menu-left.menu-left-light {
  background: var(--ht-navy) !important;
}
.layout-sidebar .menu-left .header {
  background: var(--ht-navy) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.layout-sidebar .menu-left .header .logo img {
  filter: none;
}
.layout-sidebar .menu-left .header p {
  color: #fff !important;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
}

/* 菜单容器（el-menu 自身白底需透明，露出深色侧边栏） */
.layout-sidebar .el-menu,
.layout-sidebar .el-menu--vertical,
.layout-sidebar .el-menu--inline,
.layout-sidebar .el-scrollbar__view,
.layout-sidebar .el-menu .el-sub-menu {
  background: transparent !important;
}

/* 一级 / 二级菜单项 */
.layout-sidebar .el-menu-item,
.layout-sidebar .el-sub-menu__title {
  color: var(--ht-text-dim) !important;
  background: transparent !important;
  height: 44px;
  line-height: 44px;
}
.layout-sidebar .menu-icon .art-svg-icon,
.layout-sidebar .el-menu-item .art-svg-icon,
.layout-sidebar .el-sub-menu__title .art-svg-icon {
  color: var(--ht-text-dim) !important;
  font-size: 18px;
}
.layout-sidebar .menu-name {
  color: var(--ht-text-dim);
  font-size: 14px;
}
.layout-sidebar .el-menu-item:hover,
.layout-sidebar .el-sub-menu__title:hover {
  background: rgba(255, 255, 255, 0.07) !important;
}
.layout-sidebar .el-menu-item:hover .menu-name,
.layout-sidebar .el-sub-menu__title:hover .menu-name,
.layout-sidebar .el-menu-item:hover .art-svg-icon,
.layout-sidebar .el-sub-menu__title:hover .art-svg-icon {
  color: #ffffff !important;
}

/* 展开态子菜单容器 */
.layout-sidebar .el-menu--inline,
.layout-sidebar .el-menu--inline .el-sub-menu,
.layout-sidebar .el-menu-item[role="menuitem"] .el-menu {
  background: rgba(0, 0, 0, 0.18) !important;
}
.layout-sidebar .el-menu--inline .el-menu-item {
  height: 40px;
  line-height: 40px;
  min-width: 0;
}
.layout-sidebar .el-menu--inline .el-menu-item .menu-name {
  font-size: 13px;
}

/* 折叠态弹出层也保持深色 */
.el-popper.is-light.ht-menu-popper,
.el-menu--popup {
  background: var(--ht-navy-2) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 6px 0 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}
.el-menu--popup .el-menu-item,
.el-menu--popup .el-sub-menu__title {
  color: var(--ht-text-dim) !important;
  height: 44px;
  line-height: 44px;
}
.el-menu--popup .el-menu-item:hover,
.el-menu--popup .el-sub-menu__title:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}
.el-menu--popup .el-menu-item.is-active {
  background: var(--ht-blue) !important;
  color: #fff !important;
}
.el-menu--popup .el-menu-item.is-active::before {
  display: none !important;
}
.el-popper.is-light.ht-menu-popper .el-popper__arrow::before,
.el-popper.el-menu--popup .el-popper__arrow::before {
  background: var(--ht-navy-2) !important;
  border: none !important;
}

/* 激活项：蓝色底 + 白字 + 左侧指示条 */
.layout-sidebar .el-menu-item.is-active {
  background: linear-gradient(90deg, var(--ht-blue) 0%, var(--ht-blue-deep) 100%) !important;
  color: #fff !important;
  border-radius: 8px;
  margin: 4px 10px;
  width: auto !important;
  padding-left: 16px !important;
  position: relative;
}
.layout-sidebar .el-menu--inline .el-menu-item.is-active {
  margin: 3px 10px 3px 18px;
}
.layout-sidebar .el-menu-item.is-active .menu-name,
.layout-sidebar .el-menu-item.is-active .art-svg-icon {
  color: #ffffff !important;
}
.layout-sidebar .el-menu-item.is-active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 8px;
  bottom: 8px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: #6ea2ff;
}
.layout-sidebar .el-menu--inline .el-menu-item.is-active::before {
  left: -18px;
}

/* 展开箭头 */
.layout-sidebar .el-sub-menu__icon-arrow {
  color: var(--ht-text-dim);
}
.layout-sidebar .el-menu-item .art-badge,
.layout-sidebar .el-sub-menu__title .art-badge {
  background: #ff4d4f;
}

/* 滚动条 */
.layout-sidebar .el-scrollbar__bar {
  opacity: 0.35;
}

/* 全局强制展开侧边栏（任何视口永不折叠） */
#app-sidebar {
  width: 230px !important;
  min-width: 230px !important;
}
.layout-sidebar {
  width: 230px !important;
}
.layout-sidebar .menu-left,
.layout-sidebar .menu-left.menu-left-close {
  width: 230px !important;
}
.layout-sidebar .menu-left-close .menu-name {
  display: block !important;
  visibility: visible !important;
  width: auto !important;
  opacity: 1 !important;
}
.layout-sidebar .menu-left-close .header p {
  display: block !important;
  visibility: visible !important;
  width: auto !important;
  opacity: 1 !important;
}
.layout-sidebar .menu-left-close .el-menu-item,
.layout-sidebar .menu-left-close .el-sub-menu__title {
  justify-content: flex-start;
  padding: 0 18px !important;
}
.layout-sidebar .menu-left-close .menu-icon {
  margin-right: 12px;
}
.layout-sidebar .el-menu-item.is-active {
  width: auto !important;
}

/* 隐藏汉堡按钮：通用 .tad-300 里排除已知的刷新/全屏/设置 */
.tad-300 { display: none !important; }

/* ============================ 仪表盘定制区 ============================ */
/* 注入定制仪表盘后，隐藏原页面所有区块 */
.dashboard-console #ht-dash ~ * {
  display: none !important;
}
#ht-dash {
  padding: 4px 2px 24px;
}

/* Welcome 蓝色横幅 */
.ht-welcome {
  background: linear-gradient(120deg, #1e5fff 0%, #3b82ff 55%, #63a4ff 100%);
  border-radius: 14px;
  padding: 18px 30px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 10px 24px rgba(30, 95, 255, 0.22);
  position: relative;
  overflow: hidden;
}
.ht-welcome::after {
  content: "";
  position: absolute;
  left: 30px;
  top: -20px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
}
.ht-welcome::before {
  content: "";
  position: absolute;
  right: 40px;
  bottom: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
}
.ht-welcome .ht-wl-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
  position: relative;
  z-index: 1;
  text-align: center;
}

/* ============================ 分账账号简化版 ============================ */
/* 激活状态：隐藏原 Vue 页面，显示我们的覆盖页 */
body.ht-ps-active .art-page-view { display: none !important; }
body.ht-ps-active .layout-content > .art-page-view { display: none !important; }
body.ht-ps-active #ht-ps { display: block; }
body.ht-psorder-active .art-page-view { display: none !important; }
body.ht-psorder-active .layout-content > .art-page-view { display: none !important; }
body.ht-psorder-active #ht-or { display: block; }

#ht-ps { padding: 0 6px 20px; display: none; }
.ht-ps-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.ht-ps-title { font-size: 18px; font-weight: 700; color: #1c2b4a; }
.ht-ps-add { background: linear-gradient(120deg,#1e5fff,#3b82ff); color:#fff; border:none; padding:8px 20px; border-radius: 8px; font-size:13px; cursor:pointer; }
.ht-ps-empty { text-align:center; color:#7b88a3; padding:60px 0; font-size:13px; }
.ht-ps-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ht-ps-card { background:#fff; border-radius:12px; box-shadow:0 2px 10px rgba(17,38,90,.06); border:1px solid #eef2f8; padding:18px 20px; display:flex; align-items:center; gap:16px; }
.ht-ps-card-icon { font-size: 32px; width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:#f2f6ff; border-radius:10px; }
.ht-ps-card-body { flex:1; min-width:0; }
.ht-ps-card-title { font-size:13px; color:#1c2b4a; font-weight:600; margin-bottom:4px; display:flex; gap:8px; align-items:center; }
.ht-ps-bank { font-size:11px; background:#eef2ff; color:#3b5bdb; padding:1px 7px; border-radius:10px; font-weight:normal; }
.ht-ps-card-account { font-size:16px; font-weight:600; color:#1e5fff; font-family: Menlo, Consolas, monospace; margin-bottom:4px; }
.ht-ps-card-name { font-size:12px; color:#7b88a3; }
.ht-ps-card-op .ht-ps-del { background:none; border:none; color:#ff4d4f; font-size:12px; cursor:pointer; padding:4px 10px; }
.ht-ps-card-op .ht-ps-del:hover { text-decoration:underline; }
@media (max-width: 1100px) { .ht-ps-list { grid-template-columns: 1fr; } }
/* Dialog */
.ht-ps-mask { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:2000; display:flex; align-items:center; justify-content:center; }
.ht-ps-dialog { background:#fff; border-radius:14px; width:460px; max-width:94vw; box-shadow:0 20px 60px rgba(0,0,0,.2); overflow:hidden; }
.ht-ps-dlg-head { padding:16px 20px; border-bottom:1px solid #f0f2f8; font-size:15px; font-weight:700; color:#1c2b4a; display:flex; justify-content:space-between; align-items:center; }
.ht-ps-close { cursor:pointer; color:#999; font-size:22px; line-height:1; }
.ht-ps-close:hover { color:#333; }
.ht-ps-tabs { display:flex; border-bottom:1px solid #f0f2f8; }
.ht-ps-tab { flex:1; padding:12px 0; border:none; background:none; font-size:14px; color:#7b88a3; cursor:pointer; border-bottom:2px solid transparent; }
.ht-ps-tab.active { color:#1e5fff; border-bottom-color:#1e5fff; font-weight:600; }
.ht-ps-body { padding:16px 20px; }
.ht-ps-row { display:flex; align-items:center; margin-bottom:14px; gap:14px; }
.ht-ps-row label { width:80px; font-size:13px; color:#1c2b4a; flex-shrink:0; }
.ht-ps-row input { flex:1; padding:8px 12px; border:1px solid #e0e7f3; border-radius:8px; font-size:13px; outline:none; }
.ht-ps-row input:focus { border-color:#1e5fff; }
.ht-ps-row select {
  flex:1; min-width:0; padding:8px 10px; border:1px solid #e0e7f3; border-radius:8px;
  font-size:13px; color:#1c2b4a; background:#fff; outline:none; cursor:pointer;
}
.ht-ps-row select:focus { border-color:#1e5fff; }
.ht-ps-row select option { padding:4px; }
.ht-ps-switch label { display:flex; align-items:center; gap:6px; cursor:pointer; font-size:13px; color:#1c2b4a; margin-right:16px; }
.ht-ps-switch input[type=radio] { accent-color:#1e5fff; }
.ht-ps-foot { padding:12px 20px; border-top:1px solid #f0f2f8; display:flex; justify-content:flex-end; gap:10px; }
.ht-ps-foot button { padding:7px 18px; border-radius:8px; font-size:13px; cursor:pointer; border:1px solid #e0e7f3; background:#fff; }
.ht-ps-foot .ht-ps-save { background:#1e5fff; color:#fff; border-color:#1e5fff; }

/* 8 统计卡片 */
.ht-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 18px;
}
.ht-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 10px rgba(17, 38, 90, 0.06);
  border: 1px solid #eef2f8;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ht-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(17, 38, 90, 0.1);
}
.ht-card .ht-c-label {
  font-size: 13px;
  color: #7b88a3;
  margin-bottom: 10px;
}
.ht-card .ht-c-value {
  font-size: 26px;
  font-weight: 700;
  color: #1c2b4a;
  line-height: 1.1;
}
.ht-card .ht-c-value small {
  font-size: 14px;
  font-weight: 500;
  color: #98a4bd;
  margin-left: 2px;
}
.ht-card .ht-c-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 14px;
}
.ht-card .ht-c-icon svg {
  width: 26px;
  height: 26px;
}
.ht-ic-blue   { background: #e8f0ff; color: #2f6bff; }
.ht-ic-cyan   { background: #e3f7ff; color: #12a8d8; }
.ht-ic-green  { background: #e4f9ec; color: #12b76a; }
.ht-ic-orange { background: #fff2e3; color: #f59e0b; }
.ht-ic-red    { background: #ffecec; color: #f04438; }
.ht-ic-purple { background: #f1eaff; color: #7c3aed; }
.ht-ic-teal   { background: #e2f8f5; color: #0db8a4; }
.ht-ic-indigo { background: #e9ecff; color: #4f5bd5; }

/* 图表行 */
.ht-charts {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 16px;
}
.ht-panel {
  background: #fff;
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: 0 2px 10px rgba(17, 38, 90, 0.06);
  border: 1px solid #eef2f8;
}
.ht-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.ht-panel-title {
  font-size: 15px;
  font-weight: 600;
  color: #1c2b4a;
}
.ht-seg {
  display: inline-flex;
  background: #f1f4fa;
  border-radius: 8px;
  padding: 3px;
}
.ht-seg button {
  border: 0;
  background: transparent;
  font-size: 12px;
  color: #7b88a3;
  padding: 5px 14px;
  border-radius: 6px;
  cursor: pointer;
}
.ht-seg button.on {
  background: #2f6bff;
  color: #fff;
  font-weight: 500;
}
.ht-chart-box {
  width: 100%;
}
.ht-chart-box svg {
  width: 100%;
  height: auto;
  display: block;
}
.ht-empty {
  height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #a8b2c7;
  font-size: 13px;
}
.ht-empty svg {
  width: 64px;
  height: 64px;
  margin-bottom: 10px;
  opacity: 0.5;
}

/* 环形图 + 图例 */
.ht-donut-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
}
.ht-donut {
  width: 168px;
  height: 168px;
  position: relative;
  flex-shrink: 0;
}
.ht-donut svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.ht-donut .ht-dn-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: none;
}
.ht-donut .ht-dn-num {
  font-size: 19px;
  font-weight: 700;
  color: #1c2b4a;
}
.ht-donut .ht-dn-cap {
  font-size: 12px;
  color: #98a4bd;
  margin-top: 2px;
}
.ht-legend {
  flex: 1;
  min-width: 0;
}
.ht-legend-item {
  display: flex;
  align-items: center;
  font-size: 13px;
  padding: 7px 0;
  border-bottom: 1px dashed #eef2f8;
}
.ht-legend-item:last-child {
  border-bottom: 0;
}
.ht-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 8px;
  flex-shrink: 0;
}
.ht-legend-name {
  color: #4a5878;
  flex: 1;
}
.ht-legend-val {
  color: #1c2b4a;
  font-weight: 600;
  margin-right: 10px;
}
.ht-legend-pct {
  color: #98a4bd;
  font-size: 12px;
  width: 42px;
  text-align: right;
}

/* 响应式 */
@media (max-width: 1380px) {
  .ht-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 1100px) {
  .ht-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .ht-charts {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .ht-cards {
    grid-template-columns: 1fr;
  }
  .ht-welcome {
    padding: 20px;
  }
  .ht-welcome .ht-wl-title {
    font-size: 19px;
  }
}

/* 暗色主题下保持定制区为浅色 */
html.dark .ht-card,
html.dark .ht-panel {
  background: #fff;
}

/* ============================ 收银台简化版 ============================ */
body.ht-cashier-active .art-page-view { display: none !important; }
body.ht-cashier-active #ht-cashier { display: flex; }

#ht-cashier {
  display: none;
  padding: 20px;
  min-height: calc(100vh - 100px);
  justify-content: center;
  align-items: flex-start;
}

.ht-cashier-wrap {
  width: 420px;
  max-width: 100%;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  border: 1px solid #eef2f8;
}

/* Logo 头部 */
.ht-cashier-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #1e5fff 0%, #3b82ff 100%);
  color: #fff;
}
.ht-cashier-logo-img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  padding: 2px;
}
.ht-cashier-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
}
.ht-cashier-sub {
  font-size: 12px;
  opacity: 0.85;
  margin-top: 2px;
}

/* 二维码主体 */
.ht-cashier-qr {
  padding: 28px 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, #e8f0ff 0%, #ffffff 60px);
}
.ht-cashier-amount {
  font-size: 15px;
  color: #1c2b4a;
  font-weight: 500;
  margin-bottom: 16px;
}
.ht-cashier-qrcode {
  width: 260px;
  height: 260px;
  background: #fff;
  border: 8px solid #fff;
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ht-cashier-qrcode img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}
.ht-cashier-qrcode canvas {
  width: 100%;
  height: 100%;
}
.ht-cs-loading {
  color: #7b88a3;
  font-size: 13px;
}
.ht-cs-retry {
  color: #1e5fff;
  cursor: pointer;
  text-decoration: underline;
}

/* 支付方式图标 */
.ht-cashier-payments {
  display: flex;
  gap: 16px;
  margin-top: 18px;
}
.ht-cs-pay-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ht-cs-pay-item span {
  font-size: 11px;
  color: #7b88a3;
}
.ht-cs-pay-wx, .ht-cs-pay-zfb, .ht-cs-pay-qq, .ht-cs-pay-other {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
.ht-cs-pay-wx { background: linear-gradient(135deg, #07c160, #06ad56); }
.ht-cs-pay-zfb { background: linear-gradient(135deg, #1677ff, #0958d9); }
.ht-cs-pay-qq { background: linear-gradient(135deg, #12b7f5, #0e9fd8); }
.ht-cs-pay-other { background: linear-gradient(135deg, #ff7a45, #d4380d); }

.ht-cashier-tips {
  text-align: center;
  font-size: 12px;
  color: #999;
  padding: 0 24px 20px;
}

/* ============================ 分账账号-提示 ============================ */
.ht-ps-tip {
  background: linear-gradient(120deg, #eef4ff, #f5f9ff);
  border: 1px solid #d9e7ff;
  color: #4a6080;
  font-size: 12px;
  padding: 9px 14px;
  border-radius: 8px;
  margin: -8px 0 16px;
}
.ht-ps-tip { line-height: 1.6; }

/* ============================ 分账记录页 ============================ */
#ht-or { padding: 0 6px 20px; display: none; }

.ht-or-balance {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.ht-or-bal-card {
  flex: 1;
  background: linear-gradient(120deg, #1e5fff, #3b82f6);
  border-radius: 12px;
  padding: 18px 22px;
  color: #fff;
  box-shadow: 0 6px 18px rgba(30,95,255,.18);
}
.ht-or-bal-card.pending {
  background: linear-gradient(120deg, #f59e0b, #fbbf24);
  box-shadow: 0 6px 18px rgba(245,158,11,.18);
}
.ht-or-bal-label { font-size: 12px; opacity: .88; margin-bottom: 6px; }
.ht-or-bal-value { font-size: 26px; font-weight: 700; letter-spacing: .5px; }
.ht-or-submit {
  background: linear-gradient(120deg, #07c160, #06ad56);
  color: #fff;
  border: none;
  padding: 12px 26px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(7,193,96,.25);
}
.ht-or-submit:hover { filter: brightness(1.05); }

.ht-or-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.ht-or-tabs button {
  border: 1px solid #dce3ee;
  background: #fff;
  color: #5a6a85;
  padding: 6px 18px;
  border-radius: 16px;
  font-size: 13px;
  cursor: pointer;
}
.ht-or-tabs button.active {
  background: #1e5fff;
  border-color: #1e5fff;
  color: #fff;
}

.ht-or-tablewrap {
  background: #fff;
  border: 1px solid #eef1f6;
  border-radius: 10px;
  overflow: hidden;
}
.ht-or-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ht-or-table th {
  background: #f7f9fc;
  color: #5a6a85;
  font-weight: 600;
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid #eef1f6;
  white-space: nowrap;
}
.ht-or-table td {
  padding: 12px 14px;
  border-bottom: 1px solid #f3f5f9;
  color: #2c3a55;
  vertical-align: middle;
  line-height: 1.6;
}
.ht-or-table tr:last-child td { border-bottom: none; }
.ht-or-table tr:hover td { background: #fafcff; }
.ht-or-sub { color: #8a97ad; font-size: 12px; }
.ht-or-money { color: #e1251b; font-weight: 700; white-space: nowrap; }

.ht-or-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  white-space: nowrap;
}
.ht-or-badge.pending { background: #fff5e6; color: #d48806; }
.ht-or-badge.done { background: #e8f9ef; color: #0a9d4e; }
.ht-or-badge.reject { background: #fff0f0; color: #cf1322; }

.ht-or-avail {
  background: #f5f8ff;
  border: 1px dashed #b9d1ff;
  color: #35507a;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13px;
}
.ht-or-avail b { color: #1e5fff; font-size: 16px; }
.ht-or-target {
  background: #fafbfd;
  border: 1px solid #eef1f6;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: #4a5a78;
  line-height: 1.7;
}
.ht-ps-dialog select {
  width: 100%;
  height: 38px;
  border: 1px solid #dce3ee;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 13px;
  background: #fff;
  color: #2c3a55;
}

/* ============================ 对接文档页 UI 重排 ============================ */
body.ht-doc-active .api-info-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}
body.ht-doc-active .api-info-page > .art-card {
  margin-bottom: 0 !important;
  border-radius: 14px;
  border: 1px solid #edf1f7;
  box-shadow: 0 4px 18px rgba(31, 56, 110, .06);
  transition: box-shadow .2s;
}
body.ht-doc-active .api-info-page > .art-card:hover {
  box-shadow: 0 8px 26px rgba(31, 56, 110, .1);
}
/* 第 1 张：接口信息 横跨两列 */
body.ht-doc-active .api-info-page > .art-card:nth-child(1) { grid-column: 1 / 3; }
/* MD5、RSA 两张并排 */
body.ht-doc-active .api-info-page > .art-card:nth-child(2),
body.ht-doc-active .api-info-page > .art-card:nth-child(3) { grid-column: auto; }
/* 第 4 张：签名方式设置 横跨两列 */
body.ht-doc-active .api-info-page > .art-card:nth-child(4) { grid-column: 1 / 3; }

/* 卡片标题装饰条 */
body.ht-doc-active .api-info-page h3 {
  position: relative;
  padding-left: 12px;
}
body.ht-doc-active .api-info-page h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: linear-gradient(180deg, #1e5fff, #3b82f6);
}

/* 密钥块：等宽深色底，更像"密钥" */
body.ht-doc-active .key-textarea {
  background: #0f1b33 !important;
  color: #9fd0ff !important;
  border: 1px solid #1f3358 !important;
  border-radius: 8px !important;
  font-family: Consolas, 'Courier New', monospace !important;
  font-size: 12px !important;
  letter-spacing: .3px;
  padding: 12px 14px !important;
  word-break: break-all;
}
body.ht-doc-active .info-row {
  padding: 10px 0;
  border-bottom: 1px dashed #f0f2f7;
}
body.ht-doc-active .info-row:last-child { border-bottom: none; }
body.ht-doc-active .info-label {
  color: #7b88a3;
  font-size: 13px;
  min-width: 84px;
}

@media (max-width: 900px) {
  body.ht-doc-active .api-info-page { grid-template-columns: 1fr; }
  body.ht-doc-active .api-info-page > .art-card:nth-child(1),
  body.ht-doc-active .api-info-page > .art-card:nth-child(4) { grid-column: auto; }
  .ht-or-balance { flex-direction: column; align-items: stretch; }
  .ht-or-submit { width: 100%; padding: 12px; }
}

/* ============================ 订单列表/退款记录/交易投诉：无筛选 ============================ */
.ht-no-filter {
  padding-top: 8px !important;
}
.ht-no-filter .art-table,
.ht-no-filter .el-table {
  margin-top: 0 !important;
}