/* ==========================================================================
   连信账号状态查询 · 前台样式
   设计系统：Data-Dense Dashboard（深蓝 + 琥珀 · Fira Sans / Fira Code）
   依赖：assets/fonts.css（字体）、assets/tokens.css（令牌）
   --------------------------------------------------------------------------
   布局重构：从「单列堆叠」改成「左侧固定控制栏 + 右侧结果工作区」，
   桌面端 1024px 以上双栏，窄屏自动堆叠。
   ========================================================================== */

/* ==========================================================================
   1. 骨架
   ========================================================================== */
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--s-5); }
.hidden { display: none !important; }
.muted { color: var(--muted-fg); }
.ta-r { text-align: right; }
.grow { flex: 1 1 auto; min-width: 0; }

/* ==========================================================================
   2. 顶栏（App Bar）
   ========================================================================== */
.topbar {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); min-height: 60px; padding-top: var(--s-3); padding-bottom: var(--s-3);
}
.brand { display: flex; align-items: center; gap: var(--s-4); min-width: 0; }
.logo {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  background: var(--primary);           /* 纯色，不再用渐变 */
  color: var(--primary-fg);
  box-shadow: var(--shadow-sm);
}
.brand-text { min-width: 0; }
.brand-text h1 {
  font-size: 15px; font-weight: 600; color: var(--fg);
  letter-spacing: -.01em; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-text p {
  margin: 0; font-size: 12.5px; color: var(--muted-fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 状态徽标：方角（不用 pill —— 全站 pill 只留给数据胶囊） */
.badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: 12px; font-weight: 600; letter-spacing: .01em;
  padding: 4px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--neutral-border);
  background: var(--neutral-bg); color: var(--neutral);
  white-space: nowrap;
}
.badge.free { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok); }
.badge.need { background: var(--info-bg); border-color: var(--info-border); color: var(--info); }

/* ==========================================================================
   3. 双栏外壳
   ========================================================================== */
.shell {
  display: grid;
  grid-template-columns: 384px minmax(0, 1fr);
  gap: var(--s-5);
  align-items: start;
  padding-top: var(--s-5);
  padding-bottom: var(--s-8);
}
.panel { display: flex; flex-direction: column; gap: var(--s-4); position: sticky; top: 76px; }
.work  { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }

@media (max-width: 1023px) {
  .shell { grid-template-columns: 1fr; }
  .panel { position: static; }
}

/* ==========================================================================
   4. 卡片（只在需要「层级」时用阴影，其余用边框 + 间距）
   ========================================================================== */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  scroll-margin-top: 76px;   /* 顶栏是 sticky 的，锚点滚动要给顶栏留位置 */
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border);
  background: var(--bg-sunken);
}
.card-head h2 {
  font-size: 13px; font-weight: 600; color: var(--fg);
  letter-spacing: .02em; text-transform: none;
  display: flex; align-items: center; gap: var(--s-2);
}
.card-head h2 .ico { color: var(--faint-fg); flex: 0 0 auto; }
.hint { font-size: 12px; color: var(--muted-fg); font-weight: 400; }
.card-body { padding: var(--s-5); }
.card-body + .card-body { border-top: 1px solid var(--border); }

/* 结果卡去掉内边距，让表格铺满 */
.card.flush > .card-body { padding: 0; }

/* ==========================================================================
   5. 表单控件
   ========================================================================== */
.input, .textarea {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border-strong);
  color: var(--fg-body);
  border-radius: var(--r-md);
  padding: 9px var(--s-4);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--dur-base), box-shadow var(--dur-base);
  -webkit-appearance: none; appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--faint-fg); }
.input:focus, .textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}
.input-lg {
  font-family: var(--font-mono);
  font-size: 14px; letter-spacing: .02em;
  padding: 10px var(--s-4);
}
.textarea {
  min-height: 168px; resize: vertical;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.7;
}

.row-flex { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.field-tip { font-size: 12.5px; color: var(--muted-fg); margin-top: var(--s-3); line-height: 1.5; }
.field-tip.err  { color: var(--danger); }
.field-tip.warn { color: var(--warn); }
.field-tip.ok   { color: var(--ok); }

/* ==========================================================================
   6. 按钮
   ========================================================================== */
.btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .01em;
  padding: 9px var(--s-4); min-height: 36px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast), border-color var(--dur-fast),
              color var(--dur-fast), transform var(--dur-fast);
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:not(:disabled):active { transform: translateY(1px); }

.btn-primary {
  background: var(--primary); color: var(--primary-fg);
  border-color: var(--primary);
}
.btn-primary:not(:disabled):hover { background: var(--primary-hover); border-color: var(--primary-hover); }

.btn-secondary {
  background: var(--card); color: var(--fg);
  border-color: var(--border-strong);
}
.btn-secondary:not(:disabled):hover { background: var(--muted); border-color: var(--secondary); }

.btn-accent {
  background: var(--accent); color: var(--accent-fg);
  border-color: var(--accent);
}
.btn-accent:not(:disabled):hover { filter: brightness(1.06); }

.btn-danger {
  background: var(--danger); color: #fff; border-color: var(--danger);
}
.btn-danger:not(:disabled):hover { filter: brightness(1.08); }

.btn-ghost {
  background: transparent; color: var(--muted-fg); border-color: transparent;
  padding-left: var(--s-3); padding-right: var(--s-3);
}
.btn-ghost:not(:disabled):hover { background: var(--muted); color: var(--fg); }

.btn-lg { font-size: 14px; padding: 11px var(--s-5); min-height: 42px; }
.btn-block { width: 100%; }

@media (prefers-color-scheme: dark) {
  .btn-danger { color: #450A0A; }
}

/* ==========================================================================
   7. 提示条
   ========================================================================== */
.alert {
  display: flex; align-items: flex-start; gap: var(--s-3);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  font-size: 13px; line-height: 1.55;
  border: 1px solid var(--border);
  background: var(--card);
}
.alert .ico { flex: 0 0 auto; margin-top: 1px; }
.alert-info { background: var(--info-bg); border-color: var(--info-border); color: var(--info); white-space: pre-line; }
.alert-warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn); }
.alert-free { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok); }
.alert-body { min-width: 0; }
.free-line1 { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.free-line1 span { font-weight: 400; font-size: 12px; opacity: .85; }
.free-line2 { font-size: 12.5px; margin-top: 2px; opacity: .9; }

/* ==========================================================================
   8. 数据面板（KPI 卡）
   ========================================================================== */
.balance-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}
.bal-item {
  background: var(--card);
  padding: var(--s-4) var(--s-5);
  display: flex; flex-direction: column; gap: 2px;
  transition: opacity var(--dur-base);
}
.bal-item.updating { opacity: .45; }
.bal-label {
  font-size: 11px; color: var(--muted-fg); font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
}
.bal-value {
  font-family: var(--font-mono);
  font-size: 19px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg); line-height: 1.25;
}
.bal-main .bal-value { color: var(--accent-text); font-size: 22px; }

/* ==========================================================================
   9. 号码统计 / 工具栏
   ========================================================================== */
.phone-stats {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted-fg); margin-top: var(--s-3);
}
.phone-stats b { color: var(--fg); font-family: var(--font-mono); font-weight: 600; }
.phone-stats .dot { color: var(--muted-fg); }   /* 原 --border-strong 对比度仅 1.42:1 */
.phone-stats .err b { color: var(--danger); }
.phone-stats .right { margin-left: auto; }
.toolbar {
  display: flex; gap: var(--s-3); flex-wrap: wrap;
  margin-top: var(--s-5); padding-top: var(--s-5);
  border-top: 1px solid var(--border);
}

/* ==========================================================================
   10. 进度
   修复缺陷：原来动画 width（布局属性），改成 transform: scaleX（仅合成层）
   ========================================================================== */
.progress-head { display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; align-items: baseline; }
.progress-title { font-size: 13px; font-weight: 500; color: var(--muted-fg); }
.progress-title b { color: var(--fg); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.progress-sub { font-size: 12px; color: var(--muted-fg); }
.progress-bar {
  height: 6px; border-radius: var(--r-pill);
  background: var(--muted); overflow: hidden; margin: var(--s-4) 0 var(--s-5);
}
.progress-fill {
  width: 100%; height: 100%;
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
  background: var(--primary);
  border-radius: var(--r-pill);
  transition: transform var(--dur-slow) var(--ease-out);
}

.summary-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-3); }
.sum-item {
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  display: flex; flex-direction: column; gap: 1px;
}
.sum-item span { font-size: 11px; color: var(--muted-fg); letter-spacing: .03em; }
.sum-item b {
  font-size: 17px; font-weight: 600; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; color: var(--fg); line-height: 1.3;
}
.c-ok     { color: var(--ok) !important; }
.c-err    { color: var(--danger) !important; }
.c-blue   { color: var(--info) !important; }
.c-gray   { color: var(--muted-fg) !important; }
/* 琥珀做文字时用它的深色版，白底 4.6:1 达标（#D97706 只有 2.91:1） */
.c-orange { color: var(--accent-text) !important; }

.billing-line {
  margin-top: var(--s-4); padding: var(--s-3) var(--s-4);
  background: var(--bg-sunken);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  font-size: 12.5px; color: var(--muted-fg); line-height: 1.6;
}
.billing-line b { color: var(--fg); font-family: var(--font-mono); font-weight: 600; }

/* ==========================================================================
   11. 筛选（分段式，方角，不用 pill）
   ========================================================================== */
.filters {
  display: inline-flex; gap: 2px; padding: 2px;
  background: var(--muted);
  border-radius: var(--r-md);
}
.chip {
  -webkit-appearance: none; appearance: none;
  border: none; background: transparent;
  color: var(--muted-fg);
  border-radius: var(--r-sm);
  padding: 5px 11px;
  font-size: 12.5px; font-weight: 500; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.chip:hover { color: var(--fg); }
.chip-active {
  background: var(--card); color: var(--primary);
  font-weight: 600; box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   12. 结果表
   ========================================================================== */
.row-grid {
  display: grid;
  /* 连信号列从 104px 加宽到 122px —— 原宽度放不下「该用户未设置连信号」（需 117px）会被省略号截断 */
  grid-template-columns: 34px 110px 94px 72px minmax(72px, 1fr) 42px 42px 122px 116px 70px 50px 58px;
  gap: 10px; align-items: center;
}
.table-head {
  font-size: 11px; color: var(--muted-fg); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase;
  padding: var(--s-3) var(--s-5);
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 60px; z-index: var(--z-sticky);
}
.result-rows { display: flex; flex-direction: column; }

.res-row {
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--fg-body);
  cursor: pointer;
  transition: background var(--dur-fast);
  background: var(--card);
}
.res-row:last-child { border-bottom: none; }
.res-row:hover { background: var(--bg-sunken); }
.res-row .cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-row .c-phone {
  font-family: var(--font-mono); font-weight: 600; font-size: 12.5px;
  color: var(--fg); font-variant-numeric: tabular-nums;
}
.res-row .c-idx { color: var(--faint-fg); font-size: 11.5px; font-family: var(--font-mono); }
.res-row .c-msg { color: var(--danger); white-space: normal; grid-column: 1 / -1; padding-left: 34px; font-size: 12.5px; }
.res-row .c-warn { color: var(--warn); white-space: normal; grid-column: 1 / -1; padding-left: 34px; font-size: 12.5px; }

/* 风控档位配色（业务规则：0/10/20/30 绿 · 40/50 红） */
.c-risk.risk-green, .v.risk-green { color: var(--ok); font-weight: 600; }
.c-risk.risk-red,   .v.risk-red   { color: var(--danger); font-weight: 600; }

/* 行状态 */
.st-err    { background: var(--danger-bg); }
.st-err:hover { background: color-mix(in srgb, var(--danger-bg) 70%, var(--danger) 6%); }
.st-wait   { color: var(--faint-fg); }
.st-cancel { color: var(--faint-fg); background: var(--bg-sunken); }

/* ==========================================================================
   13. 标签 / 加载
   ========================================================================== */
.tag {
  display: inline-block; padding: 2px 8px; border-radius: var(--r-sm);
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  border: 1px solid transparent;
}
.tag-ok     { background: var(--ok-bg);      border-color: var(--ok-border);      color: var(--ok); }
.tag-info   { background: var(--info-bg);    border-color: var(--info-border);    color: var(--info); }
.tag-gray   { background: var(--neutral-bg); border-color: var(--neutral-border); color: var(--neutral); }
.tag-warn   { background: var(--warn-bg);    border-color: var(--warn-border);    color: var(--warn); }
.tag-err    { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger); }
.tag-load   { background: var(--info-bg);    border-color: var(--info-border);    color: var(--info); }
.tag-wait   { background: var(--neutral-bg); border-color: var(--neutral-border); color: var(--muted-fg); }
.tag-cancel { background: var(--neutral-bg); border-color: transparent;          color: var(--faint-fg); }

.spinner {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--info) 30%, transparent);
  border-top-color: var(--info);
  animation: spin .7s linear infinite;
  vertical-align: -1px; margin-right: 5px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 骨架屏（修复缺陷：原来 200 行结果出来前只有一个转圈） */
.skeleton-list { padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.sk-row { display: grid; grid-template-columns: 34px 112px 98px 76px 1fr 52px; gap: var(--s-3); align-items: center; }
.sk {
  position: relative; overflow: hidden;
  height: 12px; border-radius: var(--r-sm);
  background: var(--muted);
}
.sk::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent,
              color-mix(in srgb, var(--card) 70%, transparent), transparent);
  transform: translateX(-100%);
  animation: sk 1.3s var(--ease-out) infinite;
}
@keyframes sk { to { transform: translateX(100%); } }
.sk.w40 { width: 40%; } .sk.w60 { width: 60%; } .sk.w80 { width: 80%; }
.sk-row:nth-child(2) .sk { animation-delay: .1s; }
.sk-row:nth-child(3) .sk { animation-delay: .2s; }
.sk-row:nth-child(4) .sk { animation-delay: .3s; }

/* ==========================================================================
   14. 空状态（修复缺陷：原来只有一句「没有符合条件的结果」，没有下一步动作）
   ========================================================================== */
.empty {
  padding: var(--s-9) var(--s-5);
  text-align: center; color: var(--muted-fg);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
}
.empty .ico { color: var(--faint-fg); }
.empty-title { font-size: 14px; font-weight: 600; color: var(--fg); }
.empty-desc { font-size: 12.5px; max-width: 46ch; line-height: 1.6; margin: 0; }

/* ==========================================================================
   15. 详情弹窗
   ========================================================================== */
.modal-mask {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: color-mix(in srgb, var(--fg) 42%, transparent);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-5);
}
.modal {
  width: 100%; max-width: 620px; max-height: 86vh;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--border);
  background: var(--bg-sunken);
}
.modal-head h3 { font-size: 14px; font-weight: 600; color: var(--fg); font-family: var(--font-mono); }
.modal-close {
  background: transparent; border: 1px solid transparent; color: var(--muted-fg);
  width: 30px; height: 30px; border-radius: var(--r-sm);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.modal-close:hover { background: var(--muted); color: var(--fg); }
.modal-body { padding: var(--s-5); overflow: auto; -webkit-overflow-scrolling: touch; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--border);
  background: var(--bg-sunken);
}

.kv { display: grid; grid-template-columns: 108px 1fr; font-size: 13px; }
.kv .k { color: var(--muted-fg); padding: 7px var(--s-4) 7px 0; border-bottom: 1px solid var(--border); }
.kv .v {
  padding: 7px 0; border-bottom: 1px solid var(--border);
  word-break: break-word; color: var(--fg-body);
  font-variant-numeric: tabular-nums;
}
.kv .v.null { color: var(--faint-fg); font-family: var(--font-mono); font-size: 12px; }
.kv .k:nth-last-child(2), .kv .v:last-child { border-bottom: none; }

.avatar { width: 52px; height: 52px; border-radius: var(--r-md); object-fit: cover; border: 1px solid var(--border); }
.detail-head { display: flex; gap: var(--s-4); align-items: center; margin-bottom: var(--s-5); }
.detail-head .t {
  font-size: 17px; font-weight: 600; color: var(--fg);
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
}
.detail-head .s { font-size: 12.5px; color: var(--muted-fg); margin-top: 3px; font-family: var(--font-mono); }

.detail-note {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  font-size: 12.5px; margin-bottom: var(--s-4); line-height: 1.55;
  border: 1px solid transparent;
}
.detail-note .ico { flex: 0 0 auto; margin-top: 1px; }
.detail-note.err  { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.detail-note.warn { background: var(--warn-bg);   border-color: var(--warn-border);   color: var(--warn); }

/* ==========================================================================
   16. Toast（瞬时反馈才用 toast，表单错误一律内联）
   ========================================================================== */
.toast-wrap {
  position: fixed; left: 50%; bottom: var(--s-7); transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--s-3);
  width: min(92vw, 440px); pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-md);
  background: var(--card); color: var(--fg-body);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  font-size: 13px; font-weight: 500;
}
.toast .ico { flex: 0 0 auto; }
.toast.ok   { border-color: var(--ok-border);     color: var(--ok); }
.toast.err  { border-color: var(--danger-border); color: var(--danger); }
.toast.warn { border-color: var(--warn-border);   color: var(--warn); }

/* ==========================================================================
   17. 页脚
   ========================================================================== */
.footer {
  max-width: 1440px; margin: 0 auto;
  padding: var(--s-6) var(--s-5) var(--s-8);
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  font-size: 12px; color: var(--muted-fg);
}

/* ==========================================================================
   18. 窄屏
   ========================================================================== */
@media (max-width: 900px) {
  .wrap, .footer { padding-left: var(--s-4); padding-right: var(--s-4); }
  .shell { gap: var(--s-4); }
  .panel { position: static; }
  .summary-grid { grid-template-columns: repeat(3, 1fr); }
  .table-head { display: none; }

  /* ------------------------------------------------------------------
     结果行：改成「紧凑信息流」而不是 12 格卡片
     原来每行 ≈ 290px 高，12 行 = 3577px，手机上要翻 4 屏才看完；
     改成内联标签流后每行 ≈ 80px，总高降到约 1/3。
     ------------------------------------------------------------------ */
  .result-rows { padding: var(--s-4); gap: var(--s-3); background: var(--bg-sunken); }

  .res-row {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 4px 12px;
    padding: var(--s-4);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-strong);
    border-radius: var(--r-md);
    background: var(--card);
    font-size: 12.5px;
  }
  .res-row .c-idx { display: none; }
  .res-row .c-phone { font-size: 14.5px; font-weight: 600; }
  .res-row .cell {
    display: inline-flex; align-items: baseline; gap: 4px;
    white-space: nowrap; overflow: visible; min-width: 0;
    font-size: 12.5px; color: var(--fg-body);
  }
  .res-row .cell::before {
    content: attr(data-label);
    font-size: 10px; color: var(--faint-fg);
    letter-spacing: .02em; white-space: nowrap;
  }
  .res-row .c-msg, .res-row .c-warn { flex: 1 1 100%; white-space: normal; padding-left: 0; }
  .res-row .ta-r { text-align: left; }

  /* 状态色改走左侧色条（原来整行染色太抢眼） */
  .st-ok    { border-left-color: var(--ok); }
  .st-info  { border-left-color: var(--info); }
  .st-gray  { border-left-color: var(--neutral-border); }
  .st-err   { background: var(--danger-bg); border-left-color: var(--danger); }
  .st-wait  { border-left-color: var(--border-strong); }
  .st-cancel{ border-left-color: var(--border); background: var(--bg-sunken); }

  /* 触控目标：筛选按钮原来只有 27px 高，低于 36px 下限 */
  .filters { width: 100%; overflow-x: auto; padding: 3px; }
  .chip { min-height: 36px; padding: 8px 14px; font-size: 13px; }
  .toolbar .btn { min-height: 44px; }
  .btn-ghost { min-height: 40px; }
}

@media (max-width: 560px) {
  .summary-grid { grid-template-columns: 1fr 1fr; }
  .balance-grid { grid-template-columns: 1fr 1fr; }
  .toolbar .btn { flex: 1 1 calc(50% - var(--s-3)); }
  .toolbar .btn-lg { flex: 1 1 100%; }
  .row-flex .btn { flex: 1 1 auto; }
  .filters { width: 100%; overflow-x: auto; }
  .kv { grid-template-columns: 92px 1fr; }
  .modal { max-height: 92vh; }
  .card-head { flex-direction: column; align-items: flex-start; }
}

/* 打印 */
@media print {
  .topbar, .toolbar, .filters, .panel { display: none !important; }
  .shell { display: block; }
  body { background: #fff; }
}