/* merchant 端 surface 层:依赖 business.css(工艺令牌 + 基础组件)→ theme-juliu.css(品牌族)→ 本文件;
   只保留品牌档位与端独有布局,按钮五态由基础层接管,禁止渐变与 :root 原子令牌重定义。 */
:root {
  /* 品牌蓝 = 聚流蓝家族内深档位;以下 5 个 hex 字面量系门禁白名单例外(见任务报告协调项) */
  --brand: #1b5b96;
  --brand-hover: #164b7d;
  --brand-active: #123d68;
  --brand-soft: #e8f1f9;
  --surface-inverse: #102b49;
  /* 兼容别名:旧 JS / HTML 仍引用 --primary 族,指向品牌族防断链 */
  --primary: var(--brand); --primary-ink: var(--brand-ink); --primary-soft: var(--brand-soft);
}
/* 商户端在统一令牌内使用清晰的业务布局，不影响代理与管理端。 */
.merchant-login { background: var(--surface-sunken); }
.merchant-login .login-card { border-radius: var(--r-lg); box-shadow: var(--elev-1); }
/* 工作区页眉下划线(merchant 独有) */
.workspace > header { padding-bottom: var(--s-4); border-bottom: var(--bw-1) solid var(--line); }
/* 深蓝侧栏导航悬停 / 激活:品牌蓝 60% 混反色面(源序晚于基础层,可覆盖其断点浅色版) */
nav button:hover,
nav button.active { color: var(--n-0); background: color-mix(in srgb, var(--brand) 60%, var(--surface-inverse)); }
.merchant-public-header { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) max(var(--s-6), calc((100vw - 1120px) / 2)); background: var(--surface); border-bottom: var(--bw-1) solid var(--line); }
.merchant-public-header a { color: var(--brand); text-decoration: none; min-height: var(--tap-min); display: inline-flex; align-items: center; }
.merchant-wordmark { display: inline-flex; align-items: baseline; gap: var(--s-3); color: var(--brand); font-size: var(--fs-xl); font-weight: var(--fw-bold); text-decoration: none; }
.merchant-wordmark span { color: var(--ink-secondary); font-size: var(--fs-base); font-weight: var(--fw-regular); }
.merchant-entry { grid-template-columns: minmax(0, 440px) minmax(0, 440px); justify-content: center; align-content: center; gap: clamp(32px, 6vw, 96px); padding: var(--s-12) var(--s-6); }
.merchant-public-header + .merchant-entry { min-height: calc(100dvh - 80px); }
.merchant-entry-intro { justify-self: stretch; }
.merchant-entry-intro h1 { margin: var(--s-8) 0 var(--s-6); font-size: clamp(var(--fs-2xl), 3vw, var(--fs-3xl)); line-height: var(--lh-tight); font-weight: var(--fw-semibold); }
.merchant-entry-intro > p { color: var(--ink-secondary); }
.merchant-kicker { font-weight: var(--fw-semibold); }
.merchant-entry-steps { list-style: none; padding: 0; margin: var(--s-8) 0; counter-reset: entry; }
.merchant-entry-steps li { position: relative; padding: 0 0 var(--s-6) var(--s-10); counter-increment: entry; }
.merchant-entry-steps li::before { content: counter(entry, decimal-leading-zero); position: absolute; left: 0; top: 0; color: var(--brand); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.merchant-entry-steps strong, .merchant-entry-steps span { display: block; }
.merchant-entry-steps strong { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.merchant-entry-steps span { color: var(--ink-secondary); margin-top: var(--s-1); }
.merchant-entry .merchant-entry-card { width: 100%; padding: var(--s-8); }
.merchant-entry-card h1 { text-align: left; margin: 0 0 var(--s-2); font-size: var(--fs-xl); }
.merchant-entry-card > p { text-align: left; margin-bottom: var(--s-6); }
.merchant-entry-card label { margin-bottom: var(--s-5); color: var(--ink); font-weight: var(--fw-medium); }
.merchant-entry-card label small { display: block; margin-top: var(--s-2); color: var(--ink-secondary); font-size: var(--fs-sm); font-weight: var(--fw-regular); }
.merchant-entry-card input { background: var(--surface); font-size: var(--fs-md); min-height: 48px; }
.merchant-entry-card .merchant-entry-footer { margin: var(--s-6) 0 0; text-align: center; }
.merchant-entry-tabs { display: flex; gap: var(--s-6); margin-bottom: var(--s-8); border-bottom: var(--bw-1) solid var(--line); }
.merchant-entry-tabs button { border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ink-secondary); padding: var(--s-3) 0; min-height: var(--tap-min); font-weight: var(--fw-medium); cursor: pointer; }
.merchant-entry-tabs button[aria-pressed="true"] { color: var(--brand); border-bottom-color: var(--brand); }
.merchant-entry-tabs button:hover { color: var(--brand-hover); }
.merchant-text-link { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--brand); font-weight: var(--fw-medium); text-decoration: none; text-underline-offset: 4px; }
.merchant-text-link:hover { color: var(--brand-hover); text-decoration: underline; }
.merchant-registration-result { padding: var(--s-5); margin-top: var(--s-6); background: var(--surface-sunken); border-radius: var(--r-sm); overflow-wrap: anywhere; }
.merchant-registration-result h2 { margin: 0 0 var(--s-2); font-size: var(--fs-md); }
.merchant-registration-result p { margin: var(--s-2) 0; color: var(--ink-secondary); }
.merchant-registration-result[data-status="APPROVED"] h2 { color: var(--success); }
.merchant-registration-result[data-status="REJECTED"] h2 { color: var(--danger); }
.app { grid-template-columns: 216px minmax(0, 1fr); }
.app aside { display: flex; flex-direction: column; overflow-y: auto; padding: var(--s-6) var(--s-4); }
.app .brand { padding-bottom: var(--s-5); }
.app nav { gap: var(--s-1); }
.app nav button { font-weight: var(--fw-medium); }
.merchant-nav-group { margin: var(--s-4) var(--s-3) var(--s-1); color: var(--n-300); font-size: var(--fs-xs); }
.app .logout { position: static; width: 100%; flex-shrink: 0; margin-top: auto; padding-top: var(--s-4); }
.workspace { padding: var(--s-6) var(--s-8); }
.workspace > header { align-items: center; gap: var(--s-4); }
.merchant-page-heading { margin-right: auto; min-width: 0; }
.workspace h1 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); }
.workspace .account-identity { min-width: 0; max-width: 280px; margin-left: 0; text-align: right; overflow-wrap: anywhere; }
.workspace .account-identity strong { overflow: hidden; text-overflow: ellipsis; }
.workspace .panel, .workspace .card { box-shadow: none; border-radius: var(--r-md); }
.workspace .panel-head { padding: var(--s-4) var(--s-5); }
.workspace th { color: var(--ink-secondary); font-size: var(--fs-sm); }
.workspace td { padding: var(--s-4) var(--s-5); }
.workspace tbody tr:hover { background: var(--surface-muted); }
.workspace .table-action { background: transparent; border-color: transparent; padding-inline: var(--s-2); font-weight: var(--fw-medium); }
.workspace .table-action:hover { background: var(--brand-soft); }
.workspace .table-action.danger { color: var(--danger); }
.workspace .panel-head .table-action { background: var(--brand-soft); padding-inline: var(--s-4); }
.merchant-document-entry { display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); padding: var(--s-6); margin-bottom: var(--s-4); background: var(--surface); border: var(--bw-1) solid var(--line); border-radius: var(--r-md); }
.merchant-document-entry h2 { margin: 0; font-size: var(--fs-lg); }
.merchant-document-entry p { margin: var(--s-2) 0 0; color: var(--ink-secondary); }
.merchant-document-entry .actions { gap: var(--s-5); flex-wrap: wrap; }
.merchant-channel-link { margin-bottom: var(--s-4); }
.merchant-menu-toggle { display: none; }
.merchant-funds-summary .balance-primary { grid-column: auto; }
.merchant-order-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-6); padding: var(--s-5) var(--s-6); margin-bottom: var(--s-5); background: var(--surface); border: var(--bw-1) solid var(--line); border-radius: var(--r-md); }
.merchant-order-summary > div { display: flex; align-items: center; gap: var(--s-4); }
.merchant-order-summary > div:nth-child(2) { margin-right: auto; }
.merchant-order-summary span { color: var(--ink-secondary); }
.merchant-order-summary strong { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
/* 长渠道表单使用两列，密码、回调地址与开关始终占完整一行。 */
#dialogFields:has([name="productChannel"]) { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-5); }
#dialogFields:has([name="productChannel"]) > .form-toggle,
#dialogFields:has([name="productChannel"]) > label:has([name="fixedAmountsCny"]) { grid-column: 1 / -1; }
@media (max-width: 1024px) {
  .app { grid-template-columns: 184px minmax(0, 1fr); }
  .workspace { padding: var(--s-5); }
}
/* 移动端:顶部 sticky 深蓝导航条(端独有布局,复位基础层底部条;断点合规取 640) */
@media (max-width: 640px) {
  body { padding-bottom: 0; }
  .app aside {
    position: sticky; top: 0; bottom: auto; z-index: 20;
    height: auto; padding: var(--s-2) var(--s-3); border: 0; box-shadow: var(--elev-1); background: var(--surface-inverse);
  }
  .merchant-public-header { min-height: 64px; padding: var(--s-3) var(--s-5); }
  .merchant-entry { display: block; min-height: 100dvh; padding: var(--s-6) var(--s-4); }
  .merchant-public-header + .merchant-entry { min-height: calc(100dvh - 64px); }
  .merchant-entry-intro h1, .merchant-entry-intro > p, .merchant-entry-steps, .merchant-entry-intro > .merchant-text-link { display: none; }
  .merchant-entry-intro .merchant-wordmark { margin: var(--s-2) 0 var(--s-6); }
  .merchant-entry .merchant-entry-card { max-width: 480px; margin-inline: auto; padding: var(--s-6); }
  .app { display: block; }
  .merchant-menu-toggle { display: block; min-height: var(--tap-min); width: 100%; text-align: left; padding: var(--s-2) var(--s-3); border: 0; background: transparent; color: var(--n-0); cursor: pointer; }
  .merchant-menu-toggle::after { content: '+'; float: right; font-size: var(--fs-lg); }
  .merchant-menu-toggle[aria-expanded="true"]::after { content: '−'; }
  .app nav { display: none; }
  .app nav.merchant-menu-open { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); padding-bottom: var(--s-3); }
  .app nav button { flex: 0 0 auto; width: auto; padding: var(--s-2) var(--s-3); font-size: var(--fs-base); }
  .merchant-nav-group { display: none; }
  .app .logout { display: none; }
  nav button { color: var(--n-300); }
  .workspace { padding: var(--s-5) var(--s-4); }
  /* 客服消息在自身区域滚动，输入区不再被大块空态挤到首屏之外。 */
  .workspace:has(.agent-support) > header { gap: var(--s-2); margin-bottom: var(--s-3); }
  .workspace:has(.agent-support) .merchant-page-heading > p { display: none; }
  .workspace:has(.agent-support) .account-identity { flex-direction: row; gap: var(--s-3); min-height: 0; border: 0; }
  .workspace .agent-support { display: flex; flex-direction: column; height: max(420px, calc(100dvh - 224px)); margin-bottom: 0; }
  .workspace .service-hours { margin: 0; padding-block: var(--s-2); font-size: var(--fs-sm); }
  .workspace .support-toolbar { flex-shrink: 0; gap: var(--s-2); }
  .workspace .support-toolbar h2 { display: none; }
  .workspace .support-toolbar select { min-width: 0; width: 100%; }
  .workspace .support-conversation { flex: 1; min-height: 64px; max-height: none; }
  .workspace .support-conversation .empty-state { padding: var(--s-4); min-height: 0; }
  .workspace .support-connection:empty { display: none; }
  .workspace .support-composer { flex-shrink: 0; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2); padding-top: var(--s-3); padding-bottom: env(safe-area-inset-bottom); background: var(--surface); }
  .workspace .support-composer textarea { min-height: 64px; height: 64px; max-height: 120px; font-size: var(--fs-md); }
  .workspace .support-composer input { min-width: 0; font-size: var(--fs-md); }
  .workspace .support-composer button { width: auto; min-width: 64px; }
  .workspace > header { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .workspace .account-identity { grid-column: 1 / -1; max-width: none; width: 100%; text-align: left; border-radius: 0; padding: var(--s-2) 0; background: transparent; }
  .workspace .panel-head { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .merchant-document-entry { display: block; padding: var(--s-5); }
  .merchant-document-entry .actions { margin-top: var(--s-3); gap: var(--s-4); }
  .merchant-order-summary { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); padding: var(--s-4); }
  .merchant-order-summary > div { justify-content: space-between; gap: var(--s-2); }
  .merchant-order-summary > div:nth-child(2) { margin-right: 0; }
  .merchant-order-summary > .table-action { background: var(--brand-soft); }
  #dialogFields:has([name="productChannel"]) { display: block; }
  /* 手机以带字段名的记录展示，不要求商户左右拖动宽表寻找金额和操作。 */
  .workspace .table-wrap { overflow: visible; }
  .workspace table { display: block; white-space: normal; }
  .workspace thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .workspace tbody { display: block; }
  .workspace tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); padding: var(--s-5); border-bottom: var(--bw-1) solid var(--line); }
  .workspace tbody tr:last-child { border-bottom: 0; }
  .workspace tbody td { display: block; min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; white-space: normal; }
  .workspace tbody td::before { content: attr(data-label); display: block; color: var(--ink-secondary); font-size: var(--fs-sm); margin-bottom: var(--s-1); }
  .workspace td[data-label="订单编号"], .workspace td[data-label="密钥标识"], .workspace td[data-label="回调地址"], .workspace td[data-label="操作"] { grid-column: 1 / -1; }
  .workspace td[data-label="操作"] .actions { gap: var(--s-2); flex-wrap: wrap; }
}