/* ===========================================================
   chaobo UI · 超博网络 标准控件库（P0 层）
   ------------------------------------------------------------
   依赖：base.css（设计令牌 + 基础组件）、layout.css（后台骨架）
   约定：延续 base.css 的「无前缀」命名风格
         已存在于 base/layout 的控件（.empty .switch .dropdown .crumb
         .upload-box）本层只做「变体补充」，不重复定义
   控件清单：Tabs / Steps / Tooltip / Uploader / 表格增强 / 打印样式
   =========================================================== */

/* ===========================================================
   1. Tabs 标签页
   结构：.tabs > .tab-item[.active]  +  .tab-panels > .tab-pane[.active]
   变体：.tabs.card（卡片型） / .tabs.pill（胶囊型）
   =========================================================== */
.tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}

.tabs .tab-item {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 9px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .15s, background .15s;
}

.tabs .tab-item:hover { color: var(--brand); background: var(--brand-50); }

.tabs .tab-item.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
  font-weight: 600;
}

.tabs .tab-item .cnt {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--slate-bg);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tabs .tab-item.active .cnt { background: var(--brand); color: #fff; }

.tabs .tab-item[disabled] { opacity: .45; cursor: not-allowed; }

/* 卡片型 */
.tabs.card { border-bottom: 0; background: var(--line-2); padding: 4px; border-radius: var(--radius-sm); gap: 4px; }
.tabs.card .tab-item { border-bottom: 0; margin-bottom: 0; border-radius: var(--radius-sm); padding: 7px 14px; }
.tabs.card .tab-item.active { background: var(--card); box-shadow: var(--shadow-xs); }

/* 胶囊型 */
.tabs.pill { border-bottom: 0; gap: 8px; }
.tabs.pill .tab-item { border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; margin-bottom: 0; background: var(--card); }
.tabs.pill .tab-item.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.tabs.pill .tab-item.active .cnt { background: rgba(255, 255, 255, .25); }

/* 面板 */
.tab-panels { display: block; }
.tab-pane { display: none; }
.tab-pane.active { display: block; animation: cbFade .18s ease; }

@keyframes cbFade { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

/* ===========================================================
   2. Steps 步骤条
   结构：.steps > .step[.done|.current|.error] > .dot + .txt(.t/.d)
   变体：.steps.v（纵向）
   =========================================================== */
.steps { display: flex; align-items: flex-start; }

.steps .step {
  position: relative;
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 0 6px;
}

/* 连接线 */
.steps .step::before,
.steps .step::after {
  content: "";
  position: absolute;
  top: 13px;
  height: 2px;
  background: var(--line);
  z-index: 0;
}

.steps .step::before { left: 0; right: 50%; margin-right: 16px; }
.steps .step::after { left: 50%; right: 0; margin-left: 16px; }
.steps .step:first-child::before,
.steps .step:last-child::after { display: none; }

.steps .step.done::before,
.steps .step.done::after,
.steps .step.current::before { background: var(--brand); }

.steps .step .dot {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  margin: 0 auto 7px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--line);
  color: var(--text-3);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.steps .step.done .dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.steps .step.current .dot { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 4px var(--brand-50); }
.steps .step.error .dot { background: var(--danger); border-color: var(--danger); color: #fff; }

.steps .step .t { font-size: 13px; font-weight: 600; color: var(--text-2); line-height: 1.3; }
.steps .step.current .t { color: var(--brand); }
.steps .step.error .t { color: var(--danger); }
.steps .step .d { font-size: 11.5px; color: var(--text-3); margin-top: 3px; }

/* 纵向 */
.steps.v { flex-direction: column; gap: 0; }
.steps.v .step { display: flex; text-align: left; padding: 0 0 18px 0; flex: none; }
.steps.v .step .dot { margin: 0 12px 0 0; flex: none; }
.steps.v .step::before { display: none; }
.steps.v .step::after {
  top: 26px; bottom: 0; left: 12px; right: auto;
  width: 2px; height: auto; margin: 0;
}
.steps.v .step:last-child::after { display: none; }
.steps.v .step:last-child { padding-bottom: 0; }

/* ===========================================================
   3. Tooltip 文字提示
   用法：data-tip="提示内容"，可加 data-tip-pos="top|bottom|left|right"
   =========================================================== */
[data-tip] { position: relative; }

[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  transform: translateX(-50%) translateY(3px);
  background: rgba(16, 24, 40, .92);
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s, transform .15s;
  z-index: 60;
}

[data-tip]::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(16, 24, 40, .92);
  opacity: 0;
  transition: opacity .15s;
  z-index: 60;
}

[data-tip]:hover::after,
[data-tip]:hover::before { opacity: 1; }
[data-tip]:hover::after { transform: translateX(-50%) translateY(0); }

[data-tip][data-tip-pos="bottom"]::after { bottom: auto; top: calc(100% + 7px); }
[data-tip][data-tip-pos="bottom"]::before {
  bottom: auto; top: calc(100% + 2px);
  border-top-color: transparent; border-bottom-color: rgba(16, 24, 40, .92);
}

[data-tip][data-tip-pos="right"]::after {
  left: calc(100% + 7px); bottom: auto; top: 50%;
  transform: translateY(-50%) translateX(-3px);
}
[data-tip][data-tip-pos="right"]:hover::after { transform: translateY(-50%) translateX(0); }
[data-tip][data-tip-pos="right"]::before { display: none; }

[data-tip][data-tip-pos="left"]::after {
  left: auto; right: calc(100% + 7px); bottom: auto; top: 50%;
  transform: translateY(-50%) translateX(3px);
}
[data-tip][data-tip-pos="left"]:hover::after { transform: translateY(-50%) translateX(0); }
[data-tip][data-tip-pos="left"]::before { display: none; }

[data-tip][data-tip-wide]::after { white-space: normal; width: 200px; text-align: left; }

/* ===========================================================
   4. Uploader 上传控件（含拖拽 / 列表 / 进度 / 缩略图）
   结构：
   .uploader[data-cb-upload] > .up-zone  拖拽区
   .up-list > .up-item[.ok|.error] > .thumb + .meta + .act
   =========================================================== */
.uploader { width: 100%; }

.uploader .up-zone {
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: 24px 18px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.uploader .up-zone:hover { border-color: var(--brand); background: var(--brand-50); }

.uploader.dragover .up-zone {
  border-color: var(--brand);
  background: var(--brand-50);
  box-shadow: 0 0 0 4px rgba(43, 92, 255, .10);
}

.uploader .up-zone .up-ic { color: var(--brand); margin-bottom: 8px; }
.uploader .up-zone .up-ic svg { width: 30px; height: 30px; }
.uploader .up-zone .up-main { font-size: 13.5px; font-weight: 600; color: var(--text); }
.uploader .up-zone .up-main b { color: var(--brand); }
.uploader .up-zone .up-sub { font-size: 12px; color: var(--text-3); margin-top: 4px; }

/* 文件列表 */
.uploader .up-list { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }

.uploader .up-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
}

.uploader .up-item .thumb {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 6px;
  background: var(--brand-50);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
  overflow: hidden;
}

.uploader .up-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.uploader .up-item .thumb svg { width: 18px; height: 18px; }

.uploader .up-item .meta { flex: 1; min-width: 0; }
.uploader .up-item .meta .nm {
  font-size: 13px; font-weight: 500; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.uploader .up-item .meta .sz { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

/* 进度条 */
.uploader .up-item .bar {
  height: 4px;
  border-radius: 2px;
  background: var(--line-2);
  overflow: hidden;
  margin-top: 6px;
}

.uploader .up-item .bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brand);
  border-radius: 2px;
  transition: width .25s;
}

.uploader .up-item.ok .bar i { background: var(--ok); }
.uploader .up-item.error { border-color: var(--danger); background: var(--danger-bg); }
.uploader .up-item.error .bar i { background: var(--danger); }

.uploader .up-item .act { flex: none; display: flex; gap: 4px; }

.uploader .up-item .st {
  flex: none;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
}
.uploader .up-item .st.ok { background: var(--ok-bg); color: var(--ok); }
.uploader .up-item .st.err { background: var(--danger-bg); color: var(--danger); }
.uploader .up-item .st.loading { background: var(--info-bg); color: var(--info); }

/* ===========================================================
   5. 表格增强（基于 base.css 的 table.tbl 做「修饰类」扩展）
   ------------------------------------------------------------
   基座 table.tbl 已由 base.css 提供，本层不重复实现：
     · th 已 sticky 吸顶        · td 已 vertical-align: middle
     · 行 hover 高亮            · .num 数字右对齐（tabular-nums）
     · .oid 订单号强调          · .row-main + .row-sub 主副信息
     · .actions 操作按钮组
   本层补充：
     .tbl-wrap   滚动容器（带边框卡片感）
     .tbl-card   表格卡片 = 标题 + 工具条 + 表格 + 分页 的成品组合
     .zebra      斑马纹        .compact  紧凑行高
     .col-chk    复选列        .col-op   操作列（右对齐）
     .col-st     状态列        .tbl-empty 空态      .tbl-bar 批量条
   =========================================================== */
.tbl-wrap {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: auto;
}

/* 表格卡片：列表页成品组合 */
.tbl-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.tbl-card > .tc-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.tbl-card > .tc-hd .t { font-size: 14px; font-weight: 600; }
.tbl-card > .tc-hd .sp { flex: 1; }
.tbl-card .tbl-wrap { border: 0; border-radius: 0; }
.tbl-card .tbl-bar { margin: 12px 16px 0; }

/* 斑马纹 / 选中 / hover（比 base 更明显的交互反馈） */
table.tbl.zebra tbody tr:nth-child(even) { background: #fafbfe; }
table.tbl tbody tr:hover { background: var(--brand-50); }
table.tbl tbody tr.sel { background: var(--brand-50); }

/* 紧凑行高 */
table.tbl.compact th { padding: 8px 12px; font-size: 12px; }
table.tbl.compact td { padding: 8px 12px; font-size: 12.5px; }
table.tbl.compact td .row-sub { font-size: 11.5px; }

/* 复选列 */
table.tbl .col-chk {
  width: 44px;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}

table.tbl .col-chk input {
  width: 15px;
  height: 15px;
  margin: 0;
  vertical-align: middle;
  accent-color: var(--brand);
  cursor: pointer;
}

/* 操作列：右对齐，按钮等距 */
table.tbl .col-op { text-align: right; white-space: nowrap; }
table.tbl td.col-op .actions { justify-content: flex-end; }
table.tbl td.col-op .btn { margin-left: 6px; }

/* 状态列不换行 */
table.tbl .col-st { white-space: nowrap; }

/* 金额：人民币为主、韩币为辅 */
table.tbl td.num { white-space: nowrap; }
table.tbl td .cny { font-weight: 600; }
table.tbl td .krw { color: var(--text-3); font-size: 11.5px; margin-left: 5px; }

/* 空态（置于 .tbl-wrap / .tbl-card 内，占满整行） */
.tbl-empty { padding: 46px 16px; text-align: center; color: var(--text-3); }
.tbl-empty svg { width: 44px; height: 44px; opacity: .32; margin-bottom: 10px; }
.tbl-empty .t { font-size: 13.5px; color: var(--text-2); margin-bottom: 4px; }
.tbl-empty .d { font-size: 12px; }
.tbl-empty .btn { margin-top: 12px; }

/* 批量操作条（选中行时出现） */
.tbl-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--brand-700);
}

.tbl-bar .cnt { font-weight: 700; }
.tbl-bar .sp { flex: 1; }
/* .tbl-bar 为 flex，会覆盖 UA 的 [hidden]{display:none}，需显式声明 */
.tbl-bar[hidden] { display: none !important; }

/* ===========================================================
   6. 打印样式（财务凭证 / 报表 / 合同专用）
   规则：.no-print 打印时隐藏；.print-only 仅打印时显示
   =========================================================== */
.print-only { display: none !important; }

@media print {
  @page { size: A4; margin: 14mm; }

  html, body { background: #fff !important; font-size: 12px; }

  /* 后台框架与交互元素全部隐藏 */
  .no-print,
  .side,
  .topbar,
  .pager,
  .filter-bar,
  .msg-panel,
  .tabs .tab-item .cnt,
  .btn,
  .tbl-bar,
  .col-op,
  .col-chk,
  .drawer,
  .modal-mask,
  .toast-wrap { display: none !important; }

  .print-only { display: block !important; }

  /* 内容区占满 */
  .content,
  .card-bd,
  .main { padding: 0 !important; margin: 0 !important; box-shadow: none !important; }

  .card {
    box-shadow: none !important;
    border: 1px solid #d5d9e2 !important;
    break-inside: avoid;
  }

  /* 表格：表头每页重复、行不跨页断裂 */
  table.tbl { font-size: 11.5px; border: 1px solid #d5d9e2; }
  table.tbl thead { display: table-header-group; }
  table.tbl th {
    position: static !important;
    background: #f2f4f8 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  table.tbl tr { break-inside: avoid; }
  table.tbl td, table.tbl th { padding: 8px 10px; }
  table.tbl tbody tr:hover { background: transparent !important; }
  table.tbl.zebra tbody tr:nth-child(even) { background: #fafafa !important; }

  /* 容器去圆角与阴影，边框转灰 */
  .tbl-wrap, .tbl-card {
    border-color: #d5d9e2 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .tbl-card > .tc-hd { border-bottom-color: #d5d9e2 !important; }

  /* 状态徽章打印时保留底色 */
  .badge, .tag {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    border: 1px solid #c8cdd8;
  }

  /* 打印页脚 */
  .print-foot {
    margin-top: 16px;
    padding-top: 8px;
    border-top: 1px solid #d5d9e2;
    font-size: 11px;
    color: #666;
    display: flex;
    justify-content: space-between;
  }
}

/* ===========================================================
   7. 变体补充（base.css 已有控件的补充形态，不重复定义主样式）
   =========================================================== */
/* 空状态：小型 / 行内 */
.empty.sm { padding: 22px 12px; }
.empty.sm svg { width: 34px; height: 34px; margin-bottom: 8px; }
.empty.inline { display: flex; align-items: center; gap: 10px; padding: 12px; text-align: left; }
.empty.inline svg { width: 26px; height: 26px; margin: 0; }

/* 开关：base.css 已提供 .switch / .switch.sm，状态由 JS 切换 .on 类控制，此处不重复定义 */

/* 面包屑：斜线分隔 */
.crumb .sep { opacity: .45; }
.crumb a { color: var(--text-2); text-decoration: none; }
.crumb a:hover { color: var(--brand); }

/* 下拉：右对齐 */
.dropdown.right { right: 0; left: auto; }

/* 上传占位框（base.css .upload-box）补充：禁用态 */
.upload-box.disabled { opacity: .5; pointer-events: none; }

/* ===========================================================
   8. 表单布局与校验态
   基座：base.css 的 .field / .input / .select / .textarea
   新增：.form-grid 栅格、.form-sec 分区、.form-foot 底部栏、
        .field.error/.ok 校验态、.check/.radio 自定义选择
   =========================================================== */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}
.form-grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid .span2 { grid-column: span 2; }
.form-grid .full { grid-column: 1 / -1; }

@media (max-width: 760px) {
  .form-grid, .form-grid.c3 { grid-template-columns: 1fr; }
  .form-grid .span2 { grid-column: auto; }
}

/* 分区标题 */
.form-sec {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-2);
}
.form-sec .t { font-size: 13.5px; font-weight: 700; }
.form-sec .d { font-size: 12px; color: var(--text-3); }

/* 底部操作栏 */
.form-foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
}
.form-foot .sp { flex: 1; }

/* 校验态 */
.field.error .input,
.field.error .select,
.field.error .textarea { border-color: var(--danger); background: var(--danger-bg); }
.field.error .hint { color: var(--danger); }
.field.ok .input,
.field.ok .select,
.field.ok .textarea { border-color: var(--ok); }

.field .err {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--danger);
}

/* 尺寸与只读 */
.input.sm, .select.sm { height: 32px; font-size: 12.5px; }
.input.lg, .select.lg { height: 42px; font-size: 14px; }
.input[readonly], .input:disabled { background: var(--line-2); color: var(--text-2); }

/* 输入组（带前后缀） */
.input-group { display: flex; align-items: stretch; }
/* ★ input 在组内必须改为弹性宽度：base 的 .input 是 width:100%，
   否则会挤压 .addon 导致后缀文字换行成两行 */
.input-group .input { width: auto; flex: 1; min-width: 0; border-radius: 0; }
.input-group .input:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group .input:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.input-group .addon {
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 12.5px;
  color: var(--text-2);
  background: var(--line-2);
  border: 1px solid var(--line);
  white-space: nowrap;      /* ★ 后缀不允许换行 */
  flex: none;
}
.input-group .addon:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); border-right: 0; }
.input-group .addon:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-left: 0; }

/* 复选 / 单选（「带文字」的选项项）
   ★ 重要：base.css 的 .check / .radio 是「纯图形勾选框」组件
     （方形 / 圆形，靠 JS 切换 .on 类，自带 ::after 勾），语义完全不同。
     带文字的选项容器必须使用 .cbox / .rbox，切勿再使用 .check / .radio。 */
.cbox, .rbox {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}
.cbox input, .rbox input {
  width: 15px; height: 15px; margin: 0;
  accent-color: var(--brand); cursor: pointer;
}
.cbox:hover, .rbox:hover { color: var(--text); }
.cbox-group, .rbox-group { display: flex; gap: 16px; flex-wrap: wrap; }

/* 卡片式单选（业务类型 / 套餐选择等） */
.radio-card {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.radio-card .rc {
  position: relative;
  flex: 1 1 160px;
  min-width: 150px;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  cursor: pointer;
  transition: .16s;
}
.radio-card .rc:hover { border-color: var(--brand-100); background: var(--brand-50); }
.radio-card .rc.on {
  border-color: var(--brand);
  background: var(--brand-50);
  box-shadow: 0 0 0 3px rgba(43, 92, 255, .10);
}
.radio-card .rc .rt { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.radio-card .rc .rd { font-size: 12px; color: var(--text-3); margin-top: 3px; }
.radio-card .rc .rp { font-size: 15px; font-weight: 700; color: var(--brand); margin-top: 6px; }
.radio-card .rc::after {
  content: "✓";
  position: absolute;
  top: 10px; right: 12px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  display: none;
  align-items: center;
  justify-content: center;
}
.radio-card .rc.on::after { display: flex; }

/* ===========================================================
   9. 搜索框（带图标 / 清空 / 结果面板）
   =========================================================== */
.search { position: relative; display: block; }
.search .input { padding-left: 34px; padding-right: 30px; }
.search > .ic {
  position: absolute;
  left: 11px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  display: flex;
  pointer-events: none;
}
.search > .ic svg { width: 15px; height: 15px; }
.search > .clear {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
}
.search > .clear:hover { background: var(--slate-bg); color: var(--text); }
.search.has-val > .clear { display: flex; }

/* 结果面板（typeahead） */
.search-panel {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 5px);
  z-index: 40;
  max-height: 260px;
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 5px;
  display: none;
}
.search-panel.open { display: block; }
.search-panel .sp-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13px;
}
.search-panel .sp-item:hover { background: var(--brand-50); }
.search-panel .sp-item.on { background: var(--brand-50); }
.search-panel .sp-item .nm { font-weight: 500; }
.search-panel .sp-item .sub { font-size: 11.5px; color: var(--text-3); }
.search-panel .sp-item .sp-tag { margin-left: auto; }
.search-panel .sp-empty { padding: 18px; text-align: center; font-size: 12.5px; color: var(--text-3); }

/* ===========================================================
   10. 按钮补充（base.css 的 .btn 之上）
   =========================================================== */
.btn.icon { width: 34px; padding: 0; }
.btn.icon.sm { width: 28px; }
.btn.link {
  border-color: transparent; background: transparent;
  color: var(--brand); padding: 0 4px; height: auto;
}
.btn.link:hover { background: transparent; text-decoration: underline; }
.btn.loading { color: transparent !important; position: relative; pointer-events: none; }
.btn.loading::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: cbSpin .7s linear infinite;
}
.btn.ghost.loading::after,
.btn.loading.btn-light::after { border-color: rgba(0, 0, 0, .18); border-top-color: var(--brand); }

@keyframes cbSpin { to { transform: rotate(360deg); } }

/* 按钮组（base 已有 .btn-group，补垂直与分段联动） */
.btn-group.v { flex-direction: column; }
.btn-group.v .btn { margin: -1px 0 0; border-radius: 0; }
.btn-group.v .btn:first-child { border-radius: var(--radius-sm) var(--radius-sm) 0 0; margin-top: 0; }
.btn-group.v .btn:last-child { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }

/* ===========================================================
   11. 图片上传（网格预览 / 主图标记 / 删除 / 上传进度）
   结构：.imgup > .iu-item[.uploading] + .iu-add
   =========================================================== */
.imgup { display: flex; flex-wrap: wrap; gap: 10px; }

.imgup .iu-item {
  position: relative;
  width: 98px; height: 98px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--line-2);
}

.imgup .iu-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.imgup .iu-item .iu-mask {
  position: absolute; inset: 0;
  background: rgba(16, 24, 40, .52);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  opacity: 0; transition: opacity .16s;
}
.imgup .iu-item:hover .iu-mask { opacity: 1; }

.imgup .iu-item .iu-mask button {
  width: 26px; height: 26px;
  border: 0; border-radius: 7px;
  background: rgba(255, 255, 255, .92);
  color: var(--text-2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.imgup .iu-item .iu-mask button:hover { background: #fff; color: var(--brand); }
.imgup .iu-item .iu-mask button svg { width: 14px; height: 14px; }

.imgup .iu-item .main-tag {
  position: absolute; left: 0; bottom: 0;
  padding: 2px 7px;
  font-size: 10.5px; font-weight: 600;
  color: #fff; background: var(--brand);
  border-radius: 0 6px 0 0;
}

.imgup .iu-item.uploading .bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: rgba(255, 255, 255, .45);
}
.imgup .iu-item.uploading .bar i {
  display: block; height: 100%; width: 0;
  background: var(--brand); transition: width .25s;
}

.imgup .iu-add {
  width: 98px; height: 98px;
  border: 1.5px dashed var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--text-3);
  cursor: pointer;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  font-size: 11.5px;
  transition: .16s;
}
.imgup .iu-add:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-50); }
.imgup .iu-add svg { width: 20px; height: 20px; }

/* ===========================================================
   12. 图集 Gallery（网格 + 灯箱预览）
   结构：.gallery > .g-item > img[+ .cap][+ .del]
   灯箱由 JS 生成 .lightbox 追加至 body
   =========================================================== */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
}

.gallery .g-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--line-2);
  cursor: zoom-in;
}

.gallery .g-item img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .25s;
}
.gallery .g-item:hover img { transform: scale(1.06); }

.gallery .g-item .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 8px 6px;
  font-size: 11.5px; color: #fff;
  background: linear-gradient(transparent, rgba(16, 24, 40, .62));
}

.gallery .g-item .del {
  position: absolute; top: 5px; right: 5px;
  width: 22px; height: 22px;
  border: 0; border-radius: 50%;
  background: rgba(16, 24, 40, .55);
  color: #fff; cursor: pointer;
  display: none; align-items: center; justify-content: center;
}
.gallery .g-item:hover .del { display: flex; }
.gallery .g-item .del svg { width: 13px; height: 13px; }

.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(16, 24, 40, .88);
  display: none; align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 88vw; max-height: 84vh; border-radius: 8px; }
.lightbox .lb-close,
.lightbox .lb-nav {
  position: absolute;
  border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border-radius: 50%;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
}
.lightbox .lb-close:hover,
.lightbox .lb-nav:hover { background: rgba(255, 255, 255, .26); }
.lightbox .lb-close { top: 20px; right: 24px; }
.lightbox .lb-nav.prev { left: 24px; }
.lightbox .lb-nav.next { right: 24px; }
.lightbox .lb-cap {
  position: absolute; bottom: 26px; left: 0; right: 0;
  text-align: center; color: #fff; font-size: 13px;
}

/* ===========================================================
   13. 日历 / 日期选择（原生 input 增强 + 自绘面板）
   结构：.dp > .input[readonly] + .dp-ic ；面板 .cal 由 JS 挂载
   =========================================================== */
.dp { position: relative; display: inline-block; }
.dp.block { display: block; }
.dp .input { padding-right: 34px; cursor: pointer; background: var(--card); }
.dp .dp-ic {
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  display: flex; pointer-events: none;
}
.dp .dp-ic svg { width: 15px; height: 15px; }

/* ★ 面板挂在 body 下、用 fixed 定位（由 JS 计算坐标）：
   这样不会被任何父级的 overflow:hidden 裁剪（卡片 / 抽屉 / 弹窗内常见） */
.cal {
  position: fixed;
  top: 0; left: 0;
  z-index: 300;
  width: 272px;
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  display: none;
}
.cal.open { display: block; }

.cal .cal-hd { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.cal .cal-hd .t { flex: 1; text-align: center; font-size: 13px; font-weight: 600; }
.cal .cal-hd button {
  width: 26px; height: 26px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--card); color: var(--text-2);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.cal .cal-hd button:hover { border-color: var(--brand); color: var(--brand); }
.cal .cal-hd button svg { width: 13px; height: 13px; }

.cal table { width: 100%; border-collapse: collapse; }
.cal th { font-size: 11.5px; font-weight: 500; color: var(--text-3); padding: 4px 0; text-align: center; }
.cal td { padding: 1px; text-align: center; }
.cal td button {
  width: 33px; height: 32px;
  border: 0; border-radius: 8px;
  background: transparent;
  font-size: 12.5px; color: var(--text-2);
  cursor: pointer;
}
.cal td button:hover { background: var(--brand-50); color: var(--brand); }
.cal td button.other { color: var(--text-3); opacity: .5; }
.cal td button.on { background: var(--brand); color: #fff; font-weight: 600; }
.cal td button.today { box-shadow: inset 0 0 0 1px var(--brand); }
.cal td button.disabled { color: var(--text-3); opacity: .35; cursor: not-allowed; }

.cal .cal-ft {
  display: flex; gap: 8px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line-2);
}
.cal .cal-ft .sp { flex: 1; }

/* 快捷范围 */
.dp-quick { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }

/* ===========================================================
   14. 树 Tree（展开 / 复选 / 单选）
   结构：.tree > .tn（节点）+ .children（子节点容器）
   =========================================================== */
.tree { font-size: 13px; user-select: none; }

.tree .tn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--text-2);
}
.tree .tn:hover { background: var(--brand-50); }
.tree .tn.on { background: var(--brand-50); color: var(--brand); font-weight: 600; }

.tree .tn .arrow {
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3);
  transition: transform .16s;
}
.tree .tn .arrow svg { width: 12px; height: 12px; }
.tree .tn .arrow.open { transform: rotate(90deg); }
.tree .tn .arrow.empty { visibility: hidden; }

.tree .tn input[type="checkbox"],
.tree .tn input[type="radio"] {
  width: 14px; height: 14px; margin: 0;
  accent-color: var(--brand); cursor: pointer;
}
.tree .tn .cnt { margin-left: auto; font-size: 11.5px; color: var(--text-3); }

.tree .children { display: none; padding-left: 18px; }
.tree .children.open { display: block; }

/* ===========================================================
   15. 多选下拉 mselect（标签回显 + 搜索 + 全选）
   结构：.mselect > .ms-box + .ms-panel
   =========================================================== */
.mselect { position: relative; }

.mselect .ms-box {
  min-height: 36px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
  padding: 5px 30px 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  cursor: pointer;
}
.mselect.open .ms-box { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(43, 92, 255, .12); }
.mselect .ms-box .ph { font-size: 13px; color: #b3bbc9; }

.mselect .ms-arrow {
  position: absolute; right: 9px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  display: flex; pointer-events: none;
  transition: transform .16s;
}
.mselect.open .ms-arrow { transform: translateY(-50%) rotate(180deg); }
.mselect .ms-arrow svg { width: 14px; height: 14px; }

.mselect .ms-panel {
  position: absolute;
  top: calc(100% + 5px); left: 0; right: 0;
  z-index: 45;
  max-height: 268px; overflow: auto;
  padding: 6px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  display: none;
}
.mselect.open .ms-panel { display: block; }

.mselect .ms-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.mselect .ms-opt:hover { background: var(--brand-50); }
.mselect .ms-opt.on { color: var(--brand); font-weight: 600; }
.mselect .ms-opt input { width: 14px; height: 14px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.mselect .ms-opt .sub { font-size: 11.5px; color: var(--text-3); margin-left: auto; }

.mselect .ms-ft {
  display: flex; gap: 6px;
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--line-2);
}
.mselect .ms-ft .sp { flex: 1; }

/* ===========================================================
   16. 标签输入 taginput（回车生成 / 点击删除 / 预设候选）
   =========================================================== */
.taginput {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  min-height: 36px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  cursor: text;
}
.taginput.focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(43, 92, 255, .12); }
.taginput .ti-inp {
  flex: 1; min-width: 96px; height: 26px;
  border: 0; outline: none;
  font-size: 13px; background: transparent;
}
.taginput .chip .x { cursor: pointer; }

.tagpick { display: flex; flex-wrap: wrap; gap: 6px; }
.tagpick .chip { cursor: pointer; }

/* 选中态：浅蓝底 + 蓝边框 + 前置对勾，一眼可辨 */
.tagpick .chip.on {
  background: var(--brand-50);
  color: var(--brand);
  border-color: var(--brand);
  font-weight: 600;
}
.tagpick .chip.on::before {
  content: "✓";
  width: 15px;
  height: 15px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* ===========================================================
   17. 客户选择 custpick（搜索 + 列表 + 回显）
   =========================================================== */
.custpick .cp-box {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 13px;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--text-3);
  font-size: 13px;
  cursor: pointer;
}
.custpick .cp-box:hover { border-color: var(--brand); background: var(--brand-50); color: var(--brand); }
.custpick .cp-box svg { width: 17px; height: 17px; }

.custpick .cp-sel {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px;
  border: 1px solid var(--brand-100);
  background: var(--brand-50);
  border-radius: var(--radius);
}
.custpick .cp-sel .nm { font-size: 13.5px; font-weight: 600; }
.custpick .cp-sel .sub { font-size: 12px; color: var(--text-2); }
.custpick .cp-sel .x { margin-left: auto; }

.custpick .cp-list {
  max-height: 236px; overflow: auto;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
}
.custpick .cp-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--line-2);
}
.custpick .cp-item:last-child { border-bottom: 0; }
.custpick .cp-item:hover { background: var(--brand-50); }
.custpick .cp-item.on { background: var(--brand-50); }
.custpick .cp-item .nm { font-size: 13px; font-weight: 500; }
.custpick .cp-item .sub { font-size: 11.5px; color: var(--text-3); }
.custpick .cp-item .rt {
  margin-left: auto;
  font-size: 11.5px; color: var(--text-3);
  white-space: nowrap;
}
.custpick .cp-empty { padding: 20px; text-align: center; font-size: 12.5px; color: var(--text-3); }

/* ===========================================================
   18. 图标库展示 icongrid
   =========================================================== */
.icongrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
}
.icongrid .ig {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  padding: 11px 5px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  cursor: pointer;
  transition: .16s;
}
.icongrid .ig:hover { border-color: var(--brand); background: var(--brand-50); color: var(--brand); }
.icongrid .ig svg { width: 19px; height: 19px; }
.icongrid .ig span {
  font-size: 10.5px; color: var(--text-3);
  text-align: center; line-height: 1.3;
  word-break: break-all;
}
.icongrid .ig:hover span { color: var(--brand); }

/* ===========================================================
   19. 卡片补充变体（base.css .card 之上）
   =========================================================== */
.card.hoverable { cursor: pointer; transition: .16s; }
.card.hoverable:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.card.sel { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(43, 92, 255, .10); }
.card.disabled { opacity: .6; pointer-events: none; }
.card.flat { box-shadow: none; border: 1px solid var(--line); }

/* ===========================================================
   20. Toast 语义色
   base.css 的 .toast 统一深灰底（仅图标颜色不同），
   此处按类型区分底色，让「成功 / 错误 / 警告」一眼可辨
   =========================================================== */
.toast.ok {
  background: linear-gradient(135deg, #12a150, #17b95d);
  box-shadow: 0 8px 24px rgba(18, 161, 80, .28);
}
.toast.err {
  background: linear-gradient(135deg, #e5484d, #ef5f64);
  box-shadow: 0 8px 24px rgba(229, 72, 77, .28);
}
.toast.warn {
  background: linear-gradient(135deg, #e08700, #f2a133);
  box-shadow: 0 8px 24px rgba(224, 135, 0, .28);
}
/* 彩色底上图标统一白色，覆盖 base 的彩色图标 */
.toast.ok svg,
.toast.err svg,
.toast.warn svg { color: #fff; }

/* ===========================================================
   21. 服务环节（服务项目拆解 / 节点进度 / 交付物）
   ------------------------------------------------------------
   业务场景：一个服务项目（如「韩国公司注册」）拆解为多个环节
   （核名 → 注册 → 刻章 → 银行开户 → 税务登记），每个环节带
   进度状态、负责人、计划/实际日期、完成状态、交付物。
   两种形态：
     A. .svcflow   环节流程条（横向概览，节点少时用）
     B. .svcnodes  环节清单（明细，可展开，含交付物与操作）
   =========================================================== */

/* ---------- A. 环节流程条 ---------- */
.svcflow { display: flex; align-items: flex-start; flex-wrap: wrap; }

.svcflow .sf-node {
  position: relative;
  flex: 1;
  min-width: 92px;
  text-align: center;
  padding: 0 4px;
}

/* 连接线 */
.svcflow .sf-node::before,
.svcflow .sf-node::after {
  content: "";
  position: absolute;
  top: 13px;
  height: 2px;
  background: var(--line);
  z-index: 0;
}
.svcflow .sf-node::before { left: 0; right: 50%; margin-right: 18px; }
.svcflow .sf-node::after  { left: 50%; right: 0; margin-left: 18px; }
.svcflow .sf-node:first-child::before,
.svcflow .sf-node:last-child::after { display: none; }

.svcflow .sf-node.done::before,
.svcflow .sf-node.done::after,
.svcflow .sf-node.current::before { background: var(--ok); }

.svcflow .sf-dot {
  position: relative;
  z-index: 1;
  width: 26px; height: 26px;
  margin: 0 auto 6px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--line);
  color: var(--text-3);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.svcflow .sf-node.done .sf-dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.svcflow .sf-node.current .sf-dot {
  border-color: var(--brand); color: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-50);
}
.svcflow .sf-node.error .sf-dot { background: var(--danger); border-color: var(--danger); color: #fff; }

.svcflow .sf-t { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.svcflow .sf-node.current .sf-t { color: var(--brand); }
.svcflow .sf-d { font-size: 11px; color: var(--text-3); margin-top: 2px; }

/* ---------- B. 环节清单 ---------- */
.svcnodes {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
}

/* 头部：服务名 + 总进度 + 完成统计 */
.svcnodes .sn-hd {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfe;
}
.svcnodes .sn-hd .t { font-size: 14px; font-weight: 700; }
.svcnodes .sn-hd .prog { flex: 1; min-width: 120px; max-width: 240px; }
.svcnodes .sn-hd .sn-stat { font-size: 12px; color: var(--text-2); }
.svcnodes .sn-hd .sn-stat b { color: var(--brand); }

/* 列表 */
.svcnodes .sn-list { display: flex; flex-direction: column; }
.svcnodes .sn-item { border-bottom: 1px solid var(--line-2); }
.svcnodes .sn-item:last-child { border-bottom: 0; }

.svcnodes .sn-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background .14s;
}
.svcnodes .sn-row:hover { background: var(--brand-50); }

/* 状态圆点 */
.svcnodes .sn-ic {
  width: 26px; height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--slate-bg);
  color: var(--text-2);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.svcnodes .sn-item.done .sn-ic  { background: var(--ok); color: #fff; }
.svcnodes .sn-item.doing .sn-ic { background: var(--brand); color: #fff; }
.svcnodes .sn-item.late .sn-ic  { background: var(--warn); color: #fff; }
.svcnodes .sn-item.err .sn-ic   { background: var(--danger); color: #fff; }

/* 主体 */
.svcnodes .sn-body { flex: 1; min-width: 0; }
.svcnodes .sn-name {
  font-size: 13.5px; font-weight: 600;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.svcnodes .sn-desc { font-size: 12px; color: var(--text-3); margin-top: 3px; }

.svcnodes .sn-meta {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  margin-top: 7px;
  font-size: 12px; color: var(--text-2);
}
.svcnodes .sn-meta .m { display: flex; align-items: center; gap: 5px; }
.svcnodes .sn-meta .m svg { width: 13px; height: 13px; color: var(--text-3); }
.svcnodes .sn-meta .m b { font-weight: 600; color: var(--text); }
.svcnodes .sn-meta .m.late b { color: var(--warn); }

/* 交付物 */
.svcnodes .sn-files { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.svcnodes .sn-file {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 6px;
  background: var(--brand-50);
  color: var(--brand);
  font-size: 11.5px;
  text-decoration: none;
}
.svcnodes .sn-file:hover { background: var(--brand-100); }
.svcnodes .sn-file svg { width: 12px; height: 12px; }
.svcnodes .sn-file.none { background: var(--slate-bg); color: var(--text-3); }

/* 右侧：状态 + 展开箭头 */
.svcnodes .sn-side { flex: none; display: flex; align-items: center; gap: 10px; }
.svcnodes .sn-arrow {
  width: 16px; height: 16px;
  color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
  transition: transform .16s;
}
.svcnodes .sn-arrow svg { width: 12px; height: 12px; }
.svcnodes .sn-item.open .sn-arrow { transform: rotate(90deg); }

/* 展开详情 */
.svcnodes .sn-detail {
  display: none;
  padding: 0 16px 14px 54px;
  background: #fafbfe;
  border-top: 1px dashed var(--line-2);
}
.svcnodes .sn-item.open .sn-detail { display: block; }
.svcnodes .sn-detail .dl { display: flex; flex-direction: column; gap: 9px; padding-top: 12px; }
.svcnodes .sn-detail .row2 {
  display: flex; gap: 22px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--text-2);
}
.svcnodes .sn-detail .row2 .sn-k { color: var(--text-3); }
.svcnodes .sn-note {
  font-size: 12.5px; color: var(--text-2); line-height: 1.7;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 9px 11px;
}
.svcnodes .sn-detail .sn-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===========================================================
   22. 环节配置器（后台流程配置）
   ------------------------------------------------------------
   用途：为「服务类型」配置它的环节拆解——增删改环节、拖拽排序、
   设置负责角色、前置环节、计划工期、超期提醒天数、是否客户可见。
   结构：.svccfg > .cfg-hd + .cfg-list > .cfg-row(+.cfg-edit) + .cfg-add + .cfg-ft
   =========================================================== */
.svccfg {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
}

.svccfg .cfg-hd {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfe;
}
.svccfg .cfg-hd .t { font-size: 13.5px; font-weight: 700; }
.svccfg .cfg-hd .sp { flex: 1; }

.svccfg .cfg-list { display: flex; flex-direction: column; }

.svccfg .cfg-row {
  display: flex; align-items: flex-start; gap: 10px;
  flex-wrap: wrap;                       /* 编辑区换行到下方 */
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-2);
  background: var(--card);
  transition: background .14s;
}
.svccfg .cfg-row:last-child { border-bottom: 0; }
.svccfg .cfg-row:hover { background: #fafbfe; }
.svccfg .cfg-row.dragging { opacity: .45; }
.svccfg .cfg-row.over { box-shadow: inset 0 2px 0 var(--brand); }

/* 拖拽手柄 */
.svccfg .cfg-drag {
  width: 22px; height: 26px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3); cursor: grab; border-radius: 6px;
}
.svccfg .cfg-drag:hover { background: var(--slate-bg); color: var(--text); }
.svccfg .cfg-drag svg { width: 14px; height: 14px; }

.svccfg .cfg-no {
  width: 24px; height: 24px; flex: none;
  border-radius: 7px;
  background: var(--slate-bg); color: var(--text-2);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

.svccfg .cfg-main { flex: 1; min-width: 0; }
.svccfg .cfg-name {
  font-size: 13.5px; font-weight: 600;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.svccfg .cfg-desc { font-size: 12px; color: var(--text-3); margin-top: 3px; }

.svccfg .cfg-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.svccfg .cfg-tag {
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--slate-bg);
  color: var(--text-2);
}
.svccfg .cfg-tag.blue  { background: var(--brand-50); color: var(--brand); }
.svccfg .cfg-tag.gold  { background: #fbf5e9; color: #9a7b32; }
.svccfg .cfg-tag.green { background: var(--ok-bg); color: var(--ok); }
.svccfg .cfg-tag.red   { background: var(--danger-bg); color: var(--danger); }

.svccfg .cfg-side { flex: none; display: flex; align-items: center; gap: 4px; }

/* 展开的编辑区 */
.svccfg .cfg-edit {
  display: none;
  flex: 0 0 100%;                        /* 独占一行，换行到下方 */
  padding: 12px 16px 14px 52px;
  background: #fafbfe;
  border-top: 1px dashed var(--line-2);
}
.svccfg .cfg-row.open .cfg-edit { display: block; }
.svccfg .cfg-edit .form-grid { gap: 12px 14px; }
.svccfg .cfg-edit .cfg-eft { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }

/* 添加行 */
.svccfg .cfg-add {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px;
  border-top: 1px dashed var(--line);
  color: var(--text-3); font-size: 12.5px;
  cursor: pointer; background: var(--card);
  transition: .14s;
}
.svccfg .cfg-add:hover { background: var(--brand-50); color: var(--brand); }
.svccfg .cfg-add svg { width: 15px; height: 15px; }

.svccfg .cfg-empty { padding: 26px; text-align: center; color: var(--text-3); font-size: 12.5px; }

.svccfg .cfg-ft {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px;
  border-top: 1px solid var(--line);
  background: #fbfcfe;
}
.svccfg .cfg-ft .sp { flex: 1; }

/* ===========================================================
   23. 看板 Board（数据概览面板）
   ------------------------------------------------------------
   用途：工作台 / 服务看板 / 商机看板。与 base 的 .stat 统计卡、
   .rank-list 排行、.legend 图例、.progress 进度、table.mini 简表
   配合使用；本层只提供「布局容器 + 卡片 + KPI + 条形 + 漏斗」。
   结构：.board > .bd-card[.wide|.full] > .bd-hd + .bd-bd
   =========================================================== */
.board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.board.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.board.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1100px) {
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .board, .board.c3, .board.c2 { grid-template-columns: 1fr; }
  .board .bd-card.wide, .board .bd-card.full { grid-column: auto; }
}

.board .bd-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  min-width: 0;
}
.board .bd-card.wide { grid-column: span 2; }
.board .bd-card.full { grid-column: 1 / -1; }

.board .bd-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.board .bd-hd .t { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.board .bd-hd .sp { flex: 1; }
.board .bd-hd .more { font-size: 11.5px; color: var(--text-3); }

/* KPI 大数字 */
.board .bd-kpi .v {
  font-size: 26px; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.board .bd-kpi .v small { font-size: 14px; font-weight: 600; color: var(--text-3); margin-left: 3px; }
.board .bd-kpi .lb { font-size: 12px; color: var(--text-3); margin-top: 5px; }
.board .bd-kpi .tr {
  font-size: 11.5px; margin-top: 8px;
  display: flex; align-items: center; gap: 4px;
}
.board .bd-kpi .tr.up { color: var(--ok); }
.board .bd-kpi .tr.down { color: var(--danger); }

/* 条形指标（服务类型占比 / 环节负载） */
.board .bd-bars { display: flex; flex-direction: column; gap: 11px; }
.board .bd-bars .b { display: flex; flex-direction: column; gap: 5px; }
.board .bd-bars .b .h {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px;
}
.board .bd-bars .b .h .nm { color: var(--text-2); }
.board .bd-bars .b .h .vl {
  margin-left: auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* 漏斗（商机转化） */
.board .funnel { display: flex; flex-direction: column; gap: 8px; }
.board .funnel .fn { display: flex; align-items: center; gap: 10px; }
.board .funnel .fn .bar {
  flex: none;
  height: 34px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px;
  color: #fff;
  font-size: 12.5px; font-weight: 600;
  background: linear-gradient(90deg, var(--brand), #6d94ff);
  min-width: 76px;
  transition: width .3s;
}
.board .funnel .fn:nth-child(2) .bar { background: linear-gradient(90deg, #3560dd, #7899ff); }
.board .funnel .fn:nth-child(3) .bar { background: linear-gradient(90deg, #2f57c9, #6f92f5); }
.board .funnel .fn:nth-child(4) .bar { background: linear-gradient(90deg, #2a4fb8, #6688ee); }
.board .funnel .fn:nth-child(5) .bar { background: linear-gradient(90deg, #2547a6, #5d7fe6); }
.board .funnel .fn .cv { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }

/* ===========================================================
   24. 套餐 Package（套餐 → 服务项目 → 服务环节）
   ------------------------------------------------------------
   业务场景：企业服务常以「套餐」售卖，一个套餐包含多个服务项目，
   每个服务项目又可拆解为多个环节（见 .svcnodes）。
   两种形态：
     A. .pkglist > .pkg-card   套餐卡片（含服务项目列表，可展开看环节）
     B. .pkgtable              套餐对比表（横向比较多个套餐）
   =========================================================== */
.pkglist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 14px;
}

.pkg-card {
  position: relative;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  transition: .16s;
}
.pkg-card:hover { border-color: var(--brand-100); box-shadow: var(--shadow-md); }
.pkg-card.on { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(43, 92, 255, .10); }

/* 推荐角标 */
.pkg-badge {
  position: absolute; top: -1px; right: 14px;
  padding: 3px 10px;
  border-radius: 0 0 8px 8px;
  background: var(--brand); color: #fff;
  font-size: 11px; font-weight: 600;
}

.pkg-card .pk-hd { padding: 14px 16px 12px; border-bottom: 1px solid var(--line-2); }
.pkg-card .pk-hd .nm {
  font-size: 14.5px; font-weight: 700;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.pkg-card .pk-hd .ds { font-size: 12px; color: var(--text-3); margin-top: 4px; }

.pkg-tag {
  font-size: 11px; padding: 2px 8px;
  border-radius: 6px;
  background: var(--brand-50); color: var(--brand);
  font-weight: 600;
}
.pkg-tag.gold { background: #fbf5e9; color: #9a7b32; }
.pkg-tag.red { background: var(--danger-bg); color: var(--danger); }
.pkg-tag.green { background: var(--ok-bg); color: var(--ok); }

/* 价格 */
.pkg-price { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.pkg-price .cur { font-size: 13px; color: var(--text-3); }
.pkg-price .v {
  font-size: 26px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pkg-price .krw { font-size: 12px; color: var(--text-3); }
.pkg-price .unit { font-size: 12px; color: var(--text-3); }
.pkg-price .old { font-size: 12px; color: var(--text-3); text-decoration: line-through; }

/* 包含的服务项目 */
.pkg-items { padding: 10px 16px; display: flex; flex-direction: column; gap: 2px; }

.pkg-item .pi-hd {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
.pkg-item .pi-hd:hover { background: var(--brand-50); }

.pkg-item .pi-ck {
  width: 16px; height: 16px; flex: none;
  border-radius: 50%;
  background: var(--ok); color: #fff;
  font-size: 10px;
  display: flex; align-items: center; justify-content: center;
}
.pkg-item.off .pi-ck { background: var(--slate-bg); color: var(--text-3); }

.pkg-item .pi-nm { font-weight: 500; }
.pkg-item.off .pi-nm { color: var(--text-3); }
.pkg-item .pi-nodes { margin-left: auto; font-size: 11.5px; color: var(--text-3); }

.pkg-item .pi-ar {
  width: 14px; height: 14px; flex: none;
  color: var(--text-3);
  display: flex; align-items: center; justify-content: center;
  transition: transform .16s;
}
.pkg-item .pi-ar svg { width: 11px; height: 11px; }
.pkg-item.open .pi-ar { transform: rotate(90deg); }

/* 展开：该服务项目的环节拆解 */
.pkg-item .pi-detail { display: none; padding: 2px 8px 10px 32px; }
.pkg-item.open .pi-detail { display: block; }

.pkg-nodes { display: flex; flex-wrap: wrap; gap: 5px; }
.pkg-node {
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--slate-bg);
  color: var(--text-2);
}
.pkg-node.done { background: var(--ok-bg); color: var(--ok); }
.pkg-node.doing { background: var(--brand-50); color: var(--brand); }

.pkg-ft { padding: 12px 16px 14px; margin-top: auto; display: flex; gap: 8px; }
.pkg-ft .btn { flex: 1; }

/* ---------- 套餐对比表 ---------- */
.pkgtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.pkgtable th, .pkgtable td { padding: 11px 14px; border-bottom: 1px solid var(--line-2); text-align: center; }
.pkgtable th:first-child, .pkgtable td:first-child { text-align: left; }

.pkgtable thead th { background: #f8fafd; vertical-align: top; }
.pkgtable thead th .pn { display: block; font-size: 13.5px; font-weight: 700; }
.pkgtable thead th .pp { display: block; font-size: 12px; color: var(--brand); font-weight: 600; margin-top: 3px; }
.pkgtable thead th.on, .pkgtable tbody td.on { background: var(--brand-50); }

.pkgtable tbody tr.grp td {
  background: #fbfcfe;
  text-align: left;
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
}
.pkgtable .yes { color: var(--ok); font-weight: 700; }
.pkgtable .no { color: var(--text-3); }

/* ===========================================================
   25. 阶段泳道 Kanban（按阶段分列 + 卡片跨列拖拽）
   ------------------------------------------------------------
   用途：商机漏斗（初步接触 → 意向沟通 → 方案报价 → 待签约 → 已成交）、
   订单流转（待审核 → 处理中 → 待交付 → 已完成）。
   结构：
     .kanban > .kb-col[data-col] > .kb-hd + .kb-list > .kb-card
   卡片状态提示用 .kb-when.warn|danger|ok
   =========================================================== */
.kanban {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 6px;
}

.kanban .kb-col {
  flex: none;
  width: 248px;
  background: #f7f8fb;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kanban .kb-col.over { border-color: var(--brand); background: var(--brand-50); }

/* 列头：阶段名 + 数量 */
.kanban .kb-hd { display: flex; align-items: center; gap: 7px; padding: 2px 4px 4px; }
.kanban .kb-hd .t { font-size: 13px; font-weight: 700; }
.kanban .kb-hd .cnt {
  min-width: 18px; height: 18px; padding: 0 6px;
  margin-left: auto;
  border-radius: 9px;
  background: #e8ebf2; color: var(--text-2);
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.kanban .kb-hd .cnt.warn { background: var(--warn-bg); color: var(--warn); }
.kanban .kb-hd .cnt.danger { background: var(--danger-bg); color: var(--danger); }

.kanban .kb-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 44px;
}

/* 卡片 */
.kanban .kb-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  cursor: grab;
  transition: .14s;
}
.kanban .kb-card:hover { border-color: var(--brand-100); box-shadow: var(--shadow-md); }
.kanban .kb-card:active { cursor: grabbing; }
.kanban .kb-card.dragging { opacity: .5; }
.kanban .kb-card.on { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(43, 92, 255, .10); }

.kanban .kb-name { font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.kanban .kb-info { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.kanban .kb-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 7px; }

/* 卡片底行：头像 + 负责人 + 时间提示 */
.kanban .kb-ft {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
}
.kanban .kb-ft .who { color: var(--text-2); font-weight: 500; }
.kanban .kb-when {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--text-3);
  white-space: nowrap;
}
.kanban .kb-when.warn { color: var(--warn); font-weight: 600; }
.kanban .kb-when.danger { color: var(--danger); font-weight: 600; }
.kanban .kb-when.ok { color: var(--ok); font-weight: 600; }

/* 列尾「添加」 */
.kanban .kb-add {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 8px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--text-3);
  font-size: 12.5px;
  cursor: pointer;
  transition: .14s;
}
.kanban .kb-add:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-50); }
.kanban .kb-add svg { width: 13px; height: 13px; }

/* 头像补充灰色系（base 已有默认蓝 / .g / .o / .p / .r） */
.avatar.slate { background: linear-gradient(135deg, #94a3b8, #64748b); }

/* ===========================================================
   26. 服务项目计价（合同 / 报价单明细）
   ------------------------------------------------------------
   业务场景：合同的「服务项目明细」逐项添加服务，而每项收费方式不同：
   按次 / 按项 / 按套餐 / 按周期 —— 选完产品还要配置计价参数。
   核心抽象：
     way（计价方式）+ qty（数量/期数）+ price（单价）→ 小计
     once / item / pkg : 小计 = 单价 × 数量
     period           : 小计 = 单价 × 期数
   两种形态：
     A. .svcpick   产品选择器（分类浏览 + 搜索 + 点选）
     B. .svcitems  计价明细表（每项可展开配置，实时算小计与合计）
   =========================================================== */

/* ---------- A. 产品选择器 ---------- */
.svcpick {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
}
.svcpick .sp-hd {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 16px; border-bottom: 1px solid var(--line); background: #fbfcfe;
}
.svcpick .sp-hd .t { font-size: 13.5px; font-weight: 700; }
.svcpick .sp-hd .sp { flex: 1; }

.svcpick .sp-body { display: grid; grid-template-columns: 200px 1fr; }

.svcpick .sp-cats {
  border-right: 1px solid var(--line-2);
  padding: 8px;
  max-height: 312px;
  overflow: auto;
}
.svcpick .sp-cat {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-radius: 7px;
  font-size: 13px; cursor: pointer;
}
.svcpick .sp-cat:hover { background: var(--brand-50); }
.svcpick .sp-cat.on { background: var(--brand-50); color: var(--brand); font-weight: 600; }
.svcpick .sp-cat .cnt { margin-left: auto; font-size: 11.5px; color: var(--text-3); }

.svcpick .sp-list {
  padding: 8px;
  max-height: 312px;
  overflow: auto;
  display: flex; flex-direction: column; gap: 6px;
}
.svcpick .sp-prod {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 9px;
  cursor: pointer; transition: .14s;
}
.svcpick .sp-prod:hover { border-color: var(--brand-100); background: var(--brand-50); }
.svcpick .sp-prod.on { border-color: var(--brand); background: var(--brand-50); }
.svcpick .sp-prod .pn { font-size: 13px; font-weight: 600; }
.svcpick .sp-prod .pm { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }
.svcpick .sp-prod .pp {
  margin-left: auto;
  font-size: 12.5px; font-weight: 600; color: var(--brand);
  white-space: nowrap;
}

.svcpick .sp-ft {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-top: 1px solid var(--line); background: #fbfcfe;
}
.svcpick .sp-ft .sp { flex: 1; }

@media (max-width: 760px) {
  .svcpick .sp-body { grid-template-columns: 1fr; }
  .svcpick .sp-cats { border-right: 0; border-bottom: 1px solid var(--line-2); max-height: 160px; }
}

/* ---------- B. 计价明细表 ---------- */
.svcitems {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
}
.svcitems .si-hd {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 16px; border-bottom: 1px solid var(--line); background: #fbfcfe;
}
.svcitems .si-hd .t { font-size: 13.5px; font-weight: 700; }
.svcitems .si-hd .sp { flex: 1; }

.svcitems .si-row {
  display: flex; align-items: flex-start; gap: 12px;
  flex-wrap: wrap;                       /* 配置区换行到下方 */
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-2);
  transition: background .14s;
}
.svcitems .si-row:hover { background: #fafbfe; }

.svcitems .si-ic {
  width: 26px; height: 26px; flex: none;
  border-radius: 7px;
  background: var(--brand-50); color: var(--brand);
  font-size: 11.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.svcitems .si-body { flex: 1; min-width: 0; }
.svcitems .si-name {
  font-size: 13.5px; font-weight: 600;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.svcitems .si-sub { font-size: 12px; color: var(--text-3); margin-top: 3px; }

/* 计价配置区（点击「配置」展开） */
.svcitems .si-cfg { display: none; flex: 0 0 100%; padding: 12px 0 4px 38px; }
.svcitems .si-row.open .si-cfg { display: block; }

/* 金额 */
.svcitems .si-amt { flex: none; text-align: right; min-width: 118px; }
.svcitems .si-amt .cny { font-size: 15px; font-weight: 700; }
.svcitems .si-amt .krw { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

.svcitems .si-side { flex: none; display: flex; gap: 4px; }

/* 合计 */
.svcitems .si-total {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 16px; border-top: 1px solid var(--line); background: #fbfcfe;
}
.svcitems .si-total .sp { flex: 1; }
.svcitems .si-total .lb { font-size: 13px; color: var(--text-2); }
.svcitems .si-total .cny { font-size: 20px; font-weight: 800; }
.svcitems .si-total .krw { font-size: 12px; color: var(--text-3); }

.svcitems .si-add {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px;
  border-top: 1px dashed var(--line);
  color: var(--text-3); font-size: 12.5px;
  cursor: pointer; background: var(--card); transition: .14s;
}
.svcitems .si-add:hover { background: var(--brand-50); color: var(--brand); }
.svcitems .si-add svg { width: 15px; height: 15px; }

/* 阶梯 / 档位表（way = tier 时展示，命中档位高亮） */
.tier-tb { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; }
.tier-tb th {
  text-align: left; padding: 6px 10px;
  background: #f2f4f8; color: var(--text-2); font-weight: 600;
}
.tier-tb td { padding: 6px 10px; border-bottom: 1px solid var(--line-2); }
.tier-tb tr.hit td { background: var(--brand-50); color: var(--brand); font-weight: 600; }
.tier-note { font-size: 11.5px; color: var(--text-3); margin-top: 6px; }

/* 计价方式标签（四种配色，语义化） */
.way-tag { font-size: 11px; padding: 2px 8px; border-radius: 6px; background: var(--slate-bg); color: var(--text-2); }
.way-tag.once { background: var(--info-bg); color: var(--info); }
.way-tag.item { background: var(--brand-50); color: var(--brand); }
.way-tag.pkg { background: var(--purple-bg); color: var(--purple); }
.way-tag.period { background: var(--ok-bg); color: var(--ok); }

/* ★ 计价配置靠 hidden 属性显隐字段；而 base 的 .field 是 flex，
   会覆盖 UA 的 [hidden]{display:none}，必须显式声明 */
.field[hidden] { display: none !important; }

/* ---------- C. 形态 C：右侧分上下（产品 + 价格配置） ---------- */
.svcpick.cfg .sp-right { display: flex; flex-direction: column; min-width: 0; }
.svcpick.cfg .sp-list { max-height: 196px; border-bottom: 1px solid var(--line-2); }

.svcpick.cfg .sp-cfg { padding: 14px 16px; background: #fafbfe; }
.svcpick.cfg .sp-cfg .cf-hd {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 11px;
}
.svcpick.cfg .sp-cfg .cf-hd .t { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.svcpick.cfg .sp-cfg .cf-hd .sp { flex: 1; }
.svcpick.cfg .sp-cfg .cf-hd .nm { font-size: 13.5px; font-weight: 700; }

.svcpick.cfg .sp-cfg .cf-none {
  padding: 26px; text-align: center;
  color: var(--text-3); font-size: 12.5px;
}

/* 小计预览 */
.svcpick.cfg .cf-sum {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 11px;
  border-top: 1px dashed var(--line);
}
.svcpick.cfg .cf-sum .sp { flex: 1; }
.svcpick.cfg .cf-sum .lb { font-size: 12.5px; color: var(--text-2); }
.svcpick.cfg .cf-sum .cny { font-size: 17px; font-weight: 800; }
.svcpick.cfg .cf-sum .krw { font-size: 11.5px; color: var(--text-3); }