/* =====================================================================
 * 小贷业务系统 · 表单操作界面升级包 (form-ui-upgrade)
 * 版本: 设计稿 v1.35.2 → 落地候选 v1.35.3
 * 设计语言: 沿用现有深青蓝体系 (--brand #0e5e6f / --accent #14b8a6)
 * 约束: 纯前端呈现增强；不改任何接口、不改菜单权限点、不新增字段
 * 兼容: 现有 index.html 已定义 --brand/--sub/--muted/--err/--line/--ok
 *      本文件只新增组件类与少量补充变量，不覆盖既有定义
 * ===================================================================== */
:root{
  --formui-accent:#14b8a6;        /* 青绿强调 */
  --formui-ok:#1f9d55;            /* 正向/通过 */
  --formui-err:#dc2626;           /* 危险/拒绝 (对比度过 WCAG AA) */
  --formui-warn:#b45309;          /* 转人工/警示 文字 */
  --formui-warn-bg:#fff8e6;
  --formui-warn-bd:#f5d78e;
  --formui-line:#e6edf0;
  --formui-bg:#f4f7f8;
  --formui-card:#ffffff;
  --formui-text:#1f2937;
  --formui-sub:#4b5563;           /* 用 #4b5563 保证与白底对比度 ≥7:1 (原 --muted 偏浅需复核) */
  --formui-radius:10px;
  --formui-radius-sm:8px;
  --formui-shadow:0 2px 10px rgba(15,40,52,.08);
}

/* ---------- 按钮体系 (主/次/正向/危险/幽灵) ---------- */
.formui-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;                 /* 触控目标 ≥44px */
  padding:0 18px;font-size:14px;font-weight:600;line-height:1;
  border-radius:var(--formui-radius-sm);border:1px solid transparent;
  cursor:pointer;white-space:nowrap;transition:filter .15s,background .15s;
  font-family:inherit;
}
.formui-btn:focus-visible{outline:3px solid rgba(20,184,166,.5);outline-offset:2px;}
.formui-btn[disabled]{opacity:.5;cursor:not-allowed;}
.formui-btn-primary{background:var(--brand);color:#fff;}
.formui-btn-primary:hover{filter:brightness(1.08);}
.formui-btn-ok{background:var(--formui-ok);color:#fff;}      /* 正向动作: 通过/放款 */
.formui-btn-ok:hover{filter:brightness(1.08);}
.formui-btn-gray{background:#fff;color:var(--formui-sub);border-color:var(--formui-line);}
.formui-btn-gray:hover{background:#f3f6f7;}
.formui-btn-danger{background:#fff;color:var(--formui-err);border-color:var(--formui-err);}
.formui-btn-danger:hover{background:#fef2f2;}
.formui-btn-ghost{background:transparent;color:var(--brand);border-color:transparent;}
.formui-btn-ghost:hover{background:rgba(14,94,111,.08);}
.formui-btn-sm{min-height:36px;padding:0 12px;font-size:13px;}

/* 同屏最多 1 个实心主按钮；正向动作(绿)不与主按钮(品牌色)同屏 */
.formui-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--formui-line);}

/* ---------- 流程步进器 Stepper (13 态) ---------- */
.formui-stepper-wrap{margin:0 0 16px;}
.formui-stepper{display:flex;align-items:flex-start;list-style:none;margin:0;padding:10px 4px;overflow-x:auto;}
.formui-step{position:relative;flex:1 0 auto;min-width:64px;text-align:center;padding-top:26px;}
.formui-step::before{ /* 连接线 */
  content:"";position:absolute;top:12px;left:-50%;width:100%;height:2px;background:var(--formui-line);z-index:0;
}
.formui-step:first-child::before{display:none;}
.formui-step .dot{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--formui-line);
  color:var(--formui-sub);font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;z-index:1;
}
.formui-step .lb{font-size:12px;color:var(--formui-sub);line-height:1.3;padding:0 2px;}
.formui-step.done::before{background:var(--formui-accent);}
.formui-step.done .dot{background:var(--formui-accent);border-color:var(--formui-accent);color:#fff;}
.formui-step.cur .dot{border-color:var(--brand);box-shadow:0 0 0 4px rgba(14,94,111,.15);color:var(--brand);}
.formui-step.cur .lb{color:var(--brand);font-weight:700;}
.formui-step.branch .dot{background:var(--formui-err);border-color:var(--formui-err);color:#fff;}
.formui-step.branch .lb{color:var(--formui-err);font-weight:700;}
.formui-branch-note{
  display:inline-block;margin:4px 0 0;padding:6px 12px;border-radius:8px;
  background:var(--formui-warn-bg);border:1px solid var(--formui-warn-bd);
  color:var(--formui-warn);font-size:12.5px;line-height:1.6;
}

/* ---------- 确认模态 (role=dialog + 焦点陷阱 + ESC) ---------- */
.formui-modal-mask{
  position:fixed;inset:0;background:rgba(15,40,52,.45);display:none;
  align-items:center;justify-content:center;z-index:9999;padding:16px;
}
.formui-modal-mask.show{display:flex;}
.formui-modal{
  background:var(--formui-card);border-radius:14px;max-width:440px;width:100%;
  box-shadow:0 12px 40px rgba(0,0,0,.22);overflow:hidden;
}
.formui-modal-head{padding:18px 20px 0;font-size:17px;font-weight:700;color:var(--formui-text);}
.formui-modal-body{padding:12px 20px 4px;font-size:14px;color:var(--formui-sub);line-height:1.7;}
.formui-modal-cost{
  margin:12px 0 4px;padding:12px 14px;border-radius:10px;
  background:#f0fbf8;border:1px solid #b8ece4;color:#0f766e;font-size:13px;line-height:1.8;
}
.formui-modal-cost b{color:#0b5d54;}
.formui-modal-foot{padding:14px 20px 20px;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;}
.formui-modal.danger .formui-modal-head{color:var(--formui-err);}

/* ---------- 右侧锚点导航 (录单长表单) ---------- */
.formui-anchor{position:sticky;top:16px;align-self:flex-start;background:var(--formui-card);
  border:1px solid var(--formui-line);border-radius:var(--formui-radius);padding:12px 10px;box-shadow:var(--formui-shadow);}
.formui-anchor a{display:block;padding:7px 10px;border-radius:7px;color:var(--formui-sub);
  font-size:13px;text-decoration:none;line-height:1.4;}
.formui-anchor a:hover{background:rgba(14,94,111,.07);color:var(--brand);}
.formui-anchor a.cur{background:var(--brand);color:#fff;}
.formui-progress{height:6px;border-radius:6px;background:var(--formui-line);overflow:hidden;margin:8px 0 4px;}
.formui-progress > i{display:block;height:100%;background:var(--formui-accent);width:0;transition:width .3s;}

/* ---------- 表单字段规范 ---------- */
.formui-field{margin-bottom:14px;}
.formui-field > label{display:block;font-size:13px;color:var(--formui-sub);margin-bottom:6px;font-weight:600;}
.formui-field .req{color:var(--formui-err);margin-left:2px;}
.formui-control{width:100%;min-height:44px;padding:10px 12px;font-size:14px;font-family:inherit;
  border:1px solid var(--formui-line);border-radius:var(--formui-radius-sm);background:#fff;color:var(--formui-text);
  box-sizing:border-box;transition:border-color .15s,box-shadow .15s;}
.formui-control:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(14,94,111,.12);}
.formui-msg{font-size:12px;margin-top:5px;display:none;}
.formui-field.err .formui-control{border-color:var(--formui-err);}
.formui-field.err .formui-msg{display:block;color:var(--formui-err);}

/* 状态: 只读 / 禁用 / 加载 / 空 */
.formui-readonly{background:#f6f8f9;color:var(--formui-sub);}
[disabled],.formui-disabled{opacity:.55;cursor:not-allowed;}
.formui-empty{padding:28px;text-align:center;color:var(--formui-sub);font-size:13px;border:1px dashed var(--formui-line);border-radius:var(--formui-radius);}
.formui-loading{display:inline-block;width:16px;height:16px;border:2px solid var(--formui-line);
  border-top-color:var(--brand);border-radius:50%;animation:formui-spin .7s linear infinite;vertical-align:-3px;margin-right:6px;}
@keyframes formui-spin{to{transform:rotate(360deg);}}

/* ---------- 轻提示 toast ---------- */
.formui-toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(20px);
  background:rgba(15,40,52,.92);color:#fff;padding:10px 18px;border-radius:10px;font-size:13.5px;
  opacity:0;pointer-events:none;transition:.25s;z-index:10000;max-width:90vw;}
.formui-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.formui-toast.ok{background:rgba(31,157,85,.95);}
.formui-toast.err{background:rgba(220,38,38,.95);}