/* ═══════════════════════════════════════════════════════════
   辉科食品 CRM — 移动端界面 v9
   设计理念：人性化 · 简单明了 · 清晰好读
   · 柔和配色、干净层级、友好文案、轻量微交互
   ═══════════════════════════════════════════════════════════ */
:root {
  /* 品牌 & 状态（柔和、清晰） */
  --primary:#2563eb; --primary-dark:#1d4ed8;
  --brand:#2563eb; --brand-soft:#eef2ff;
  --success:#16a34a; --warning:#ea580c; --danger:#dc2626;
  /* 状态色：✅绿=完成 / 🔵蓝=进行中 / ⚪灰=未开始 / 🔴红=驳回 */
  --st-done:#16a34a; --st-run:#2563eb; --st-wait:#94a3b8; --st-reject:#dc2626; --st-warn:#d97706;
  /* 中性 */
  --bg:#f2f4f8; --bg-soft:#f7f9fc;
  --card:#ffffff; --text:#1f2a3d; --text-light:#6b7a90; --text-secondary:#6b7a90;
  --border:#e3e8ef; --border-soft:#eef2f6;
  /* 圆角 / 阴影（柔和） */
  --radius:14px; --radius-sm:10px;
  --shadow-card:0 1px 2px rgba(22,33,62,.05),0 2px 8px rgba(22,33,62,.05);
  --shadow-lift:0 8px 24px rgba(30,45,90,.10);
}
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  background:var(--bg); color:var(--text); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{ -webkit-tap-highlight-color:transparent; }

/* ── 顶部栏：清爽品牌色 ── */
.top-bar{
  position:sticky; top:0; z-index:100;
  background:linear-gradient(135deg,#2563eb,#4338ca);
  color:#fff; padding:13px 16px;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 3px 12px rgba(37,99,235,.20);
}
.top-bar h1{ font-size:17px; font-weight:700; }
.top-bar .right-wrap{ display:flex; align-items:center; gap:8px; }
.top-bar .right-wrap a{ color:#fff; text-decoration:none; font-size:13px; }
.top-bar .right-wrap a:active{ opacity:.6; }
.top-bar .user-badge{
  background:rgba(255,255,255,.2); padding:4px 12px; border-radius:20px;
  font-size:12px; font-weight:600; max-width:150px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.top-bar .notif-icon{
  position:relative; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; font-size:18px;
  cursor:pointer;
}
.top-bar .notif-icon:active{ opacity:.7; }
.top-bar .notif-icon .badge{
  position:absolute; top:-3px; right:-3px; background:#ef4444; color:#fff;
  border-radius:50%; min-width:19px; height:19px; font-size:10px; font-weight:700;
  display:none; align-items:center; justify-content:center; padding:0 4px; border:2px solid #fff;
}

/* ── 导航：简洁双排 ── */
.tab-nav{
  position:sticky; top:52px; z-index:99;
  background:rgba(255,255,255,.96); border-bottom:1px solid var(--border);
  box-shadow:0 1px 3px rgba(22,33,62,.04);
  padding:8px 10px;
}
.tab-row{ display:flex; gap:6px; }
.tab-row + .tab-row{ margin-top:5px; }
.tab-row a{
  flex:1; min-width:0; text-align:center; padding:9px 4px 7px;
  text-decoration:none; font-size:12px; font-weight:500; color:var(--text-light);
  border-radius:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:background .15s,color .15s;
}
.tab-row a:active{ background:#f1f5f9; }
.tab-row a.active{ background:var(--brand); color:#fff; font-weight:600; }
.tab-row a .tab-icon{ font-size:20px; display:block; margin-bottom:2px; line-height:1.2; }
.tab-row a.active .tab-badge{ background:#fff; color:#ef4444; }

/* ── 内容区 ── */
.container{ max-width:520px; margin:0 auto; padding:14px 12px 30px; }

/* ── 卡片：干净白卡 ── */
.card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow-card);
  margin-bottom:14px; overflow:hidden; border:1px solid var(--border-soft);
}
.card-header{
  padding:15px 16px 11px; font-size:15px; font-weight:700; color:var(--text);
  border-bottom:1px solid var(--border-soft); display:flex; align-items:center; gap:8px;
}
.card-body{ padding:16px; }

/* ── 首页统计卡 ── */
.stats-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:2px 0 14px; }
.stat-card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow-card);
  padding:18px 16px; border:1px solid var(--border-soft);
}
.stat-value,.stat-num{ font-size:34px; font-weight:800; line-height:1.1; color:var(--primary); margin-bottom:5px; }
.stat-value[style*="color"],.stat-num[style*="color"]{ color:inherit; }
.stat-label{ font-size:13px; color:var(--text-light); font-weight:500; }
.stat-card .stat-icon{ font-size:18px; margin-bottom:2px; }

/* ── 按钮：清晰柔和 ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 20px; border-radius:12px; font-size:14px; font-weight:600;
  border:none; cursor:pointer; text-decoration:none; min-height:44px;
  transition:opacity .15s, transform .1s;
}
.btn:active{ opacity:.8; transform:scale(.97); }
.btn-primary{ background:var(--primary); color:#fff; box-shadow:0 2px 6px rgba(37,99,235,.25); }
.btn-success{ background:var(--success); color:#fff; }
.btn-warning{ background:var(--warning); color:#fff; }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-outline{ background:#fff; border:1.5px solid var(--border); color:var(--text); }
.btn-outline:active{ background:var(--bg); }
.btn-block{ width:100%; }
.btn-sm{ padding:6px 14px; font-size:13px; min-height:auto; border-radius:10px; }
.btn-group{ display:flex; gap:8px; flex-wrap:wrap; }

/* ── 表单 ── */
.form-group{ margin-bottom:14px; }
.form-group label{ display:block; font-size:13px; font-weight:600; color:var(--text); margin-bottom:6px; }
.form-control{
  width:100%; padding:11px 13px; border:1.5px solid var(--border);
  border-radius:12px; font-size:15px; background:#fff; min-height:46px;
  transition:border-color .15s, box-shadow .15s;
}
.form-control:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
textarea.form-control{ min-height:84px; resize:vertical; }
select.form-control{ appearance:auto; }

/* ── 列表项 ── */
.list-item{
  display:flex; align-items:center; padding:14px 16px;
  border-bottom:1px solid var(--border-soft); text-decoration:none; color:var(--text);
}
.list-item:last-child{ border-bottom:none; }
.list-item:active{ background:var(--bg-soft); }
.item-main{ flex:1; min-width:0; }
.item-title{ font-size:15px; font-weight:600; margin-bottom:3px; }
.item-sub{ font-size:12px; color:var(--text-light); }
.item-right{ text-align:right; flex-shrink:0; margin-left:8px; }
.item-badge{
  display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600;
}
.badge-pending{ background:#fef3c7; color:#92400e; }
.badge-approved{ background:#dcfce7; color:#166534; }
.badge-rejected{ background:#fee2e2; color:#991b1b; }
.badge-shipped{ background:#dbeafe; color:#1e40af; }
.badge-signed{ background:#e0e7ff; color:#3730a3; }
.badge-pass{ background:#dcfce7; color:#166534; }
.badge-fail{ background:#fee2e2; color:#991b1b; }

/* ── 状态徽章 chips（清晰可读） ── */
.st{ display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; line-height:1.4; }
.st::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.st-done{ background:#dcfce7; color:#166534; }
.st-run{ background:#dbeafe; color:#1e40af; }
.st-wait{ background:#eef2f6; color:#64748b; }
.st-reject{ background:#fee2e2; color:#b91c1c; }
.st-warn{ background:#fef3c7; color:#b45309; }

/* ── 细进度条 ── */
.pbar{ height:7px; background:#eef2f6; border-radius:7px; overflow:hidden; position:relative; }
.pbar>i{ display:block; height:100%; border-radius:7px; background:var(--primary); transition:width .4s ease; }
.pbar.p-done>i{ background:var(--success); }
.pbar.p-warn>i{ background:var(--warning); }

/* ── Flash 消息 ── */
.flash{
  padding:12px 16px; border-radius:12px; margin-bottom:12px; font-size:14px; font-weight:500;
  border:1px solid transparent;
}
.flash-success{ background:#f0fdf4; color:#166534; border-color:#bbf7d0; }
.flash-danger{ background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.flash-warning{ background:#fffbeb; color:#92400e; border-color:#fde68a; }

/* ── 详情行 ── */
.detail-row{ display:flex; padding:10px 0; border-bottom:1px solid var(--border-soft); }
.detail-label{ width:96px; flex-shrink:0; font-size:13px; color:var(--text-light); font-weight:500; }
.detail-value{ flex:1; font-size:14px; color:var(--text); }

/* ── 流程步骤 ── */
.progress-steps{ display:flex; padding:14px 8px; gap:2px; }
.progress-step{ flex:1; text-align:center; font-size:11px; color:var(--text-light); position:relative; }
.progress-step .dot{
  width:26px; height:26px; border-radius:50%; background:#e3e8ef;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; margin-bottom:5px; color:#fff;
}
.progress-step.active .dot{ background:var(--primary); }
.progress-step.done .dot{ background:var(--success); }
.progress-step.fail .dot{ background:var(--danger); }

/* ── 表格 ── */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table{ width:100%; border-collapse:collapse; font-size:13px; }
table th,table td{ padding:11px 12px; text-align:left; white-space:nowrap; }
table thead th{ background:#f8fafc; color:var(--text-light); font-size:12px; font-weight:700; }
table tbody tr{ border-bottom:1px solid var(--border-soft); }
table tbody tr:active{ background:var(--bg-soft); }

/* ── 空状态 ── */
.empty-state{ text-align:center; padding:44px 24px; color:var(--text-light); border-radius:var(--radius); }
.empty-state .icon{ font-size:48px; margin-bottom:12px; display:block; }
.empty-state p{ font-size:14px; }

/* ── 页面标题 ── */
.page-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.page-header h2{ font-size:19px; font-weight:800; }

/* ── 角色标记 ── */
.role-tag{ display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600; }
.role-admin{ background:#e0e7ff; color:#3730a3; }
.role-sales{ background:#dbeafe; color:#1e40af; }
.role-market{ background:#fef3c7; color:#92400e; }
.role-warehouse{ background:#dcfce7; color:#166534; }
.role-marketer{ background:#f3e8ff; color:#6b21a8; }
.role-general_manager{ background:#ffedd5; color:#9a3412; }
.role-finance{ background:#fce4ec; color:#9b1c1c; }
.role-quality{ background:#ccfbf1; color:#0f766e; }
.role-hr{ background:#ffedd5; color:#c2410c; }
.role-workshop{ background:#f1f5f9; color:#475569; }
.role-logistics{ background:#e0f2fe; color:#0369a1; }
.role-rd{ background:#ede9fe; color:#6d28d9; }
.role-procurement{ background:#fce7f3; color:#9d174d; }

/* ── 分析页 ── */
.ana-tabs{
  display:flex; gap:4px; overflow-x:auto; background:#fff; border-radius:12px;
  margin-bottom:14px; padding:4px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  box-shadow:var(--shadow-card);
}
.ana-tabs::-webkit-scrollbar{ display:none; }
.ana-tabs a{
  flex-shrink:0; padding:9px 14px; text-decoration:none; font-size:13px;
  font-weight:600; color:var(--text-light); border-radius:9px;
}
.ana-tabs a.active{ background:var(--brand-soft); color:var(--primary); font-weight:700; }
.ana-stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.ana-stat{ background:#fff; border-radius:12px; padding:16px; text-align:center; box-shadow:var(--shadow-card); }
.ana-stat .num{ font-size:24px; font-weight:800; color:var(--primary); }
.ana-stat .label{ font-size:11px; color:var(--text-light); margin-top:3px; }
.bar-chart{ padding:12px 16px; }
.bar-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.bar-label{ width:72px; flex-shrink:0; font-size:12px; color:var(--text); text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-track{ flex:1; height:20px; background:#f1f5f9; border-radius:10px; overflow:hidden; }
.bar-fill{ height:100%; border-radius:10px; background:var(--primary); transition:width .4s ease; min-width:4px; }
.bar-val{ font-size:12px; font-weight:700; color:var(--text); min-width:30px; text-align:right; }
.rank-list{ list-style:none; }
.rank-list li{ display:flex; align-items:center; padding:11px 16px; border-bottom:1px solid var(--border-soft); gap:10px; }
.rank-list li:last-child{ border-bottom:none; }
.rank-num{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex-shrink:0; }
.rank-1{ background:#fef3c7; color:#d97706; }
.rank-2{ background:#e2e8f0; color:#475569; }
.rank-3{ background:#fde68a; color:#92400e; }
.rank-n{ background:#f1f5f9; color:#94a3b8; }

/* ── 流程总览 ── */
.flow-overview{ display:flex; align-items:center; justify-content:center; gap:2px; padding:0 4px; }
.flow-node{ flex:1; text-align:center; background:#f8fafc; border-radius:10px; padding:7px 2px; border:1.5px solid var(--border); max-width:92px; }
.flow-node .fn-icon{ font-size:22px; margin-bottom:2px; }
.flow-node .fn-label{ font-size:11px; font-weight:700; color:var(--text); line-height:1.3; }
.flow-node .fn-role{ font-size:10px; color:var(--text-light); margin-top:1px; }
.flow-arrow{ font-size:16px; color:var(--text-light); flex-shrink:0; padding:0 2px; }

/* ── 敏感信息 ── */
.sensitive-hidden{ filter:blur(4px); user-select:none; }

/* ── 角标 / 加载条 / 下拉刷新 ── */
.tab-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  background:#ef4444; color:#fff; font-size:10px; font-weight:700; line-height:1;
  margin-left:3px; vertical-align:middle; position:relative; top:-1px;
}
#topprog{ position:fixed; top:0; left:0; height:3px; width:0; z-index:9999; border-radius:0 3px 3px 0; opacity:0; transition:opacity .3s; }
#ptr-ind{
  position:fixed; top:112px; left:50%; transform:translate(-50%,-30px);
  background:rgba(30,41,59,.86); color:#fff; font-size:12px; padding:7px 16px;
  border-radius:22px; z-index:999; opacity:0; transition:opacity .18s,transform .18s;
  pointer-events:none; box-shadow:var(--shadow-lift);
}
#ptr-ind.on{ opacity:1; transform:translate(-50%,0); }
#ptr-ind .spin{ display:inline-block; margin-right:6px; animation:ptrSpin .8s linear infinite; }
@keyframes ptrSpin{ to{ transform:rotate(360deg); } }

/* ── 移动端 ── */
@media (max-width:640px){
  .container{ padding:12px 10px 24px; }
  .top-bar{ padding:10px 12px; }
  .top-bar h1{ font-size:16px; }
  .tab-nav{ padding:7px 8px; top:50px; }
  .card{ border-radius:13px; }
  .form-control,.form-group input,.form-group select,.form-group textarea{ font-size:15px; min-height:46px; }
  .btn{ min-height:46px; font-size:15px; }
  .page-header h2{ font-size:18px; }
  .stat-value,.stat-num{ font-size:30px; }
}

/* ═══════════════════════════════════════════════════════════
   详情/子页面统一样式（客户/样品/产品详情共用）
   ═══════════════════════════════════════════════════════════ */
/* 返回链接 */
.back-link{
  display:inline-flex; align-items:center; gap:4px;
  color:var(--text-light); text-decoration:none; font-size:13px; font-weight:500;
  margin-bottom:10px; padding:4px 10px 4px 4px; border-radius:8px;
}
.back-link:active{ background:var(--bg); }
.detail-hero{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }

/* Tag 徽章（详情头/列表用） */
.tag{ display:inline-block; padding:2px 10px; border-radius:20px; font-size:11px; font-weight:600; vertical-align:middle; }
.tag-info{ background:#dbeafe; color:#1e40af; }
.tag-success,.tag-done,.tag-approved,.tag-pass{ background:#dcfce7; color:#166534; }
.tag-warning,.tag-pending{ background:#fef3c7; color:#92400e; }
.tag-danger,.tag-rejected,.tag-fail{ background:#f1f5f9; color:#64748b; }

/* 详情信息网格 */
.detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4px 18px; }
.detail-field{ padding:9px 0; border-bottom:1px solid var(--border-soft); }
.detail-grid > .detail-field:nth-last-child(-n+2){ border-bottom:none; }
.field-label{ font-size:12px; color:var(--text-light); font-weight:500; margin-bottom:2px; }
.field-value{ font-size:14px; color:var(--text); word-break:break-word; }

/* 进度条（产品详情） */
.progress-bar{ width:100%; background:#eef2f6; border-radius:20px; overflow:hidden; position:relative; }
.progress-bar-fill{ background:var(--primary); border-radius:20px; transition:width .5s ease; }
.progress-bar-fill.green{ background:var(--success); }
.progress-bar-fill.orange{ background:var(--warning); }

/* 里程碑（产品详情） */
.milestones{ margin-top:6px; }
.milestone{
  display:flex; align-items:center; gap:6px; padding:10px 12px; margin:6px 0;
  background:var(--bg-soft); border:1px solid var(--border-soft); border-radius:10px;
  font-size:13px; color:var(--text-light);
}
.milestone.done{ background:#f0fdf4; border-color:#bbf7d0; color:#166534; }

/* 审批流程节点（样品详情等） */
.approval-flow{ display:flex; flex-direction:column; gap:8px; }
.approval-node{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; background:var(--bg-soft); border:1.5px solid var(--border);
  border-radius:12px;
}
.approval-node .node-label{ font-size:13px; font-weight:600; color:var(--text); }
.approval-node .node-status{ font-size:12px; font-weight:600; color:var(--text-light); }
.approval-node.passed{ background:#f0fdf4; border-color:#86efac; }
.approval-node.passed .node-status{ color:#16a34a; }
.approval-node.rejected{ background:#fef2f2; border-color:#fecaca; }
.approval-node.rejected .node-status{ color:#dc2626; }
.approval-node.pending{ border-style:dashed; }

/* 子页卡片内小块标题 */
.sub-title{ font-size:14px; font-weight:700; color:var(--text); margin:16px 0 8px; }

/* 列表内链接 */
.table-wrap tbody a{ color:var(--primary); text-decoration:none; font-weight:600; }
.table-wrap tbody a:active{ text-decoration:underline; }

@media (max-width:640px){
  .detail-grid{ grid-template-columns:1fr; }
  .detail-hero{ flex-direction:column; align-items:flex-start; }
}

/* ═══════════════════════════════════════════════════════════
   列表卡片共用样式（研发/立项/样品列表统一视觉）
   ═══════════════════════════════════════════════════════════ */
.pcard{background:#fff;border-radius:12px;margin-bottom:8px;box-shadow:var(--shadow-card);overflow:hidden;position:relative;}
.pcard > a{text-decoration:none;color:inherit;display:block;padding:12px 14px 6px;}
.pcard-body{display:flex;align-items:flex-start;gap:10px;}
.pcard-left{flex:1;min-width:0;}
.pcard-name{font-size:15px;font-weight:700;color:#1e293b;line-height:1.3;}
.pcard-name .pid{font-size:10px;color:#94a3b8;font-weight:400;margin-left:4px;}
.pcard-meta{font-size:12px;color:#64748b;margin-top:4px;display:flex;flex-wrap:wrap;gap:3px 10px;}
.pcard-meta b{font-weight:700;color:#334155;}
.pcard-status{position:absolute;right:12px;top:12px;font-size:11px;font-weight:700;padding:2px 10px;border-radius:12px;letter-spacing:.2px;display:inline-flex;align-items:center;gap:4px;}
.pcard-status.done{background:#dcfce7;color:#15803d;}
.pcard-status.running,.pcard-status.approved,.pcard-status.info{background:#dbeafe;color:#1d4ed8;}
.pcard-status.paused{background:#f1f5f9;color:#64748b;}
.pcard-status.waiting,.pcard-status.pending{background:#fef3c7;color:#b45309;}
/* 已撤销/已驳回 → 一律灰色，不做彩色强调 */
.pcard-status.rejected{background:#f1f5f9;color:#64748b;}
.pcard-desc{font-size:12px;color:#64748b;margin-top:6px;line-height:1.5;padding-right:6px;}
.pcard-foot{padding:2px 14px 10px;}
.pcard-process{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-top:6px;}
.proc-step{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#64748b;background:#f1f5f9;border-radius:12px;padding:3px 9px;}
.proc-step.ok{background:#dcfce7;color:#15803d;}
.proc-step.no{background:#fee2e2;color:#b91c1c;}
.proc-step.todo{background:#fff;border:1px dashed #cbd5e1;}
/* 红点脉冲（审批中/未完成） */
.todo-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#ef4444;vertical-align:middle;animation:tdPulse 1.2s infinite;flex-shrink:0;}
@keyframes tdPulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.6);}70%{box-shadow:0 0 0 7px rgba(239,68,68,0);}100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}}
/* 分组头 */
.sec-header{display:flex;align-items:center;gap:8px;padding:12px 4px 6px;}
.sec-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.sec-title{font-size:14px;font-weight:700;color:#1e293b;}
.sec-count{font-size:12px;color:#94a3b8;font-weight:400;}
.sec-subtitle{font-size:12px;font-weight:600;color:#64748b;padding:6px 4px 2px;display:flex;align-items:center;gap:4px;}
/* 列表页上方操作条 */
.action-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 0 10px;}

/* 列表页分类标签栏 + 分组区块 */
.tab-scroll{display:flex;gap:6px;overflow-x:auto;padding:6px 2px 10px;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.tab-scroll::-webkit-scrollbar{display:none;}
.tab-btn{border:1px solid var(--border,#e2e8f0);background:#fff;color:#475569;padding:7px 14px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;flex-shrink:0;}
.tab-btn.active{background:var(--primary,#2563eb);color:#fff;border-color:var(--primary,#2563eb);}
.tab-btn .cnt{font-size:10px;background:rgba(0,0,0,.1);border-radius:10px;padding:1px 6px;margin-left:3px;font-weight:400;}
.tab-btn.active .cnt{background:rgba(255,255,255,.25);}
.list-section{padding:0 2px;}

/* ═══════════════════════════════════════════════════════════
   流程进度时间轴（研发/立项/样品通用 · 标识卡在哪个节点）
   ═══════════════════════════════════════════════════════════ */
.flow-tl{display:flex;align-items:flex-start;justify-content:space-between;gap:0;padding:8px 2px 4px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.ftl-node{flex:1;min-width:52px;display:flex;flex-direction:column;align-items:center;position:relative;padding:2px;}
.ftl-node::before{content:'';position:absolute;top:9px;left:-50%;width:100%;height:2px;background:#e2e8f0;z-index:1;}
.ftl-node:first-child::before{display:none;}
.ftl-dot{width:16px;height:16px;border-radius:50%;background:#e2e8f0;border:2px solid #fff;box-shadow:0 0 0 1.5px #e2e8f0;z-index:2;margin-bottom:3px;flex-shrink:0;}
.ftl-node.done::before{background:#86efac;}
.ftl-node.done .ftl-dot{background:var(--success,#16a34a);box-shadow:0 0 0 1.5px #bbf7d0;}
.ftl-node.cur::before{background:#93c5fd;}
.ftl-node.cur .ftl-dot{background:var(--primary,#2563eb);box-shadow:0 0 0 1.5px #bfdbfe;animation:ftlPulse 1.2s infinite;}
.ftl-node.reject .ftl-dot{background:#cbd5e1;box-shadow:0 0 0 1.5px #e2e8f0;}
.ftl-node.todo::before{background:#e2e8f0;}
.ftl-label{font-size:10px;color:#475569;white-space:nowrap;text-align:center;line-height:1.15;}
.ftl-label small{display:block;font-size:8px;color:#94a3b8;font-weight:400;}
@keyframes ftlPulse{0%{box-shadow:0 0 0 0 rgba(37,99,235,.5),0 0 0 1.5px #bfdbfe;}70%{box-shadow:0 0 0 9px rgba(37,99,235,0),0 0 0 1.5px #bfdbfe;}100%{box-shadow:0 0 0 0 rgba(37,99,235,0),0 0 0 1.5px #bfdbfe;}}
/* 卡在当前节点横幅 */
.flow-banner{display:flex;align-items:center;gap:6px;background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;font-size:12px;border-radius:8px;padding:5px 10px;margin:2px 2px 2px;}
.flow-banner.done{background:#f0fdf4;border-color:#bbf7d0;color:#166534;}
.flow-banner.muted{background:#f8fafc;border-color:#e2e8f0;color:#64748b;}
.flow-banner .fb-dot{width:9px;height:9px;border-radius:50%;background:var(--primary,#2563eb);flex-shrink:0;animation:ftlPulse .9s infinite;}

/* ═══════════ 搜索/筛选栏（.search-bar）v13 ═══════════ */
.search-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:10px;margin:0 0 14px;box-shadow:0 1px 2px rgba(15,23,42,.04);}
.search-bar input[type=text],.search-bar input[type=search],.search-bar input:not([type]){
  flex:1 1 200px;min-width:150px;padding:9px 12px 9px 36px;border:1px solid #e2e8f0;border-radius:10px;
  font-size:14px;color:var(--text,#1e293b);background:#f8fafc url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%2394a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>') no-repeat 12px center;background-size:16px;transition:border-color .15s,box-shadow .15s,background .15s;}
.search-bar input:focus{outline:none;border-color:var(--primary,#2563eb);background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%232563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>') no-repeat 12px center;background-size:16px;box-shadow:0 0 0 3px rgba(37,99,235,.12);}
.search-bar select{padding:9px 30px 9px 12px;border:1px solid #e2e8f0;border-radius:10px;font-size:14px;color:var(--text,#1e293b);background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') no-repeat right 10px center;background-size:14px;appearance:none;-webkit-appearance:none;cursor:pointer;transition:border-color .15s,box-shadow .15s;min-width:110px;}
.search-bar select:focus{outline:none;border-color:var(--primary,#2563eb);box-shadow:0 0 0 3px rgba(37,99,235,.12);}
.search-bar .btn{padding:9px 16px;border-radius:10px;white-space:nowrap;}
.search-bar .filter-count{margin-left:auto;font-size:12.5px;color:var(--text-light,#64748b);background:#f1f5f9;padding:7px 12px;border-radius:10px;white-space:nowrap;}
.search-bar .filter-count b{color:var(--primary,#2563eb);font-weight:700;}
@media(max-width:640px){.search-bar input[type=text],.search-bar input:not([type]){flex:1 1 100%;}.search-bar .filter-count{margin-left:0;}}

/* ═══════════ 申请/新增类表单美化 v14 ═══════════ */
.form-hero{padding:16px 18px;border-radius:14px;margin-bottom:14px;background:linear-gradient(120deg,rgba(37,99,235,.08),rgba(37,99,235,.02));border:1px solid rgba(37,99,235,.14);}
.form-hero h3{margin:0;font-size:18px;font-weight:700;color:#1e293b;display:flex;align-items:center;gap:8px;}
.form-hero p{margin:4px 0 0;font-size:12.5px;color:#64748b;line-height:1.5;}
.form-section{display:flex;align-items:center;gap:8px;margin:20px 0 12px;padding-bottom:8px;border-bottom:1.5px solid #eef2f7;font-size:14px;font-weight:700;color:#1e293b;}
.form-section:first-of-type{margin-top:0;}
.form-section .sec-ic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#eff6ff;color:#2563eb;font-size:14px;flex-shrink:0;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:640px){.form-row{grid-template-columns:1fr;}}
.form-group{margin-bottom:12px;}
.form-group label{display:block;font-size:13px;font-weight:600;color:#1e293b;margin-bottom:6px;}
.form-group .req{color:#dc2626;margin-left:2px;}
.form-hint{font-size:12px;color:#94a3b8;margin-top:5px;line-height:1.45;}
/* 表单输入控件（作用于 .card-body 内的裸 input/select/textarea） */
.card-body input[type=text],.card-body input:not([type]),.card-body input[type=tel],.card-body input[type=number],
.card-body select,.card-body textarea{
  width:100%;padding:11px 13px;border:1.5px solid #e2e8f0;border-radius:12px;font-size:15px;
  background:#fff;min-height:46px;color:#1e293b;transition:border-color .15s,box-shadow .15s,background .15s;
  box-sizing:border-box;
}
.card-body input:focus,.card-body select:focus,.card-body textarea:focus{
  outline:none;border-color:#2563eb;background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.card-body textarea{min-height:92px;resize:vertical;}
.form-actions{display:flex;gap:10px;padding:12px 2px;margin-top:area 6px;}
.form-actions{position:sticky;bottom:0;gap:10px;padding:12px;margin:6px -18px -18px;background:rgba(248,250,252,.94);backdrop-filter:blur(6px);border-top:1px solid #eef2f7;border-radius:0 0 14px 14px;}
.form-actions .btn{padding:11px 22px;border-radius:12px;min-height:44px;}

/* ═══════════════════════════════════════════════
   移动端人性化/美化增强 v15（主流手机屏 < 600px）
   · 更大触控目标 · 更柔更圆按钮 · 刘海安全区 · 留白呼吸
   ═══════════════════════════════════════════════ */
.btn{
  min-height:46px;
  letter-spacing:.2px;
  box-shadow:0 2px 6px rgba(22,33,62,.06);
  transition:opacity .15s, transform .1s, box-shadow .15s;
}
.btn-primary{ box-shadow:0 3px 10px rgba(37,99,235,.28); }
.btn:active{ transform:scale(.96); }
.btn-sm{ min-height:38px; gap:5px; }

/* iPhone 刘海安全区适配（桌面宽度不受影响） */
@supports(padding:max(0px)){
  .top-bar{
    padding-left:max(14px,env(safe-area-inset-left));
    padding-right:max(14px,env(safe-area-inset-right));
  }
  .container{
    padding-left:max(12px,env(safe-area-inset-left));
    padding-right:max(12px,env(safe-area-inset-right));
    padding-bottom:max(32px,env(safe-area-inset-bottom));
  }
  .form-actions{ padding-bottom:max(12px,env(safe-area-inset-bottom)); }
}

/* 首页统计：更圆更柔 */
.stat-card{ border-radius:18px; padding:20px 18px; box-shadow:var(--shadow-card); }

/* ============ 主流手机屏 < 600px ============ */
@media (max-width:600px){
  /* 顶栏：自动换行、不拥挤 */
  .top-bar{ flex-wrap:wrap; gap:6px 10px; padding:12px 12px; align-items:center; }
  .top-bar h1{ font-size:16px; }
  .top-bar .right-wrap{ margin-left:auto; }
  .top-bar .user-badge{ max-width:104px; font-size:11px; padding:4px 10px; }

  /* 按钮：整块化 + 更舒服的触控区 */
  .btn{ min-height:48px; font-size:15px; border-radius:14px; }
  .btn-sm{ min-height:44px; font-size:14px; padding:8px 16px; border-radius:12px; }
  .form-actions{ position:sticky; bottom:0; gap:12px; padding:12px; }
  .form-actions .btn{ flex:1; min-height:50px; font-size:15px; }
  .btn-group .btn{ flex:1; }

  /* 卡片留白呼吸 */
  .card-body{ padding:18px; }
  .card-header{ padding:16px 18px 12px; }

  /* 流程卡脚操作按钮：两列整块、好点易触 */
  .pcard-foot .btn-sm{ flex:1; min-width:0; justify-content:center; }
  .pcard-foot form[method=POST]{ display:flex; }
  .pcard-foot form button[type=submit]{ flex:1; min-height:44px; flex:1 1 0; }
  .pcard-foot form input[type=text]{ min-height:46px; font-size:16px; }

  /* 表单输入：16px 防 iOS 聚焦自动放大 */
  .card-body input[type=text],.card-body input:not([type]),.card-body input[type=tel],
  .card-body input[type=number],.card-body input[type=date],.card-body select,.card-body textarea,
  .form-control{
    min-height:48px; font-size:16px;
  }
  .card-body input[type=date]{ font-size:15px; }
  textarea.form-control{ min-height:96px; }

  /* 导航标签更大更易点 */
  .tab-nav{ padding:8px 8px; }
  .tab-row a{ padding-top:11px; padding-bottom:9px; font-size:13px; }
  .tab-row a .tab-icon{ font-size:22px; }

  /* 列表项 / 详情行 更大触控与行距 */
  .list-item{ padding:15px 16px; }
  .item-title{ font-size:16px; }
  .item-sub{ font-size:13px; }
  .detail-row{ padding:12px 2px; }
  .detail-label{ width:104px; }
  .detail-value{ font-size:15px; }

  /* 空状态 */
  .empty-state{ padding:52px 24px; }

  /* 表格横向滑动更顺滑 */
  .table-wrap{ -webkit-overflow-scrolling:touch; }
  table th,table td{ padding:13px 12px; font-size:14px; }

  /* 首页统计卡两列更透气 */
  .stats-grid{ gap:12px; }
}

/* ═══ 五部门并行审批：清爽卡片网格 v16 ═══ */
.approval-flow{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:10px;
}
.approval-node{
  padding:13px 14px; background:var(--bg-soft); border:1.5px solid var(--border);
  border-radius:14px; display:flex; flex-direction:column; gap:9px;
}
.approval-node.passed{ background:#f0fdf4; border-color:#86efac; }
.approval-node.rejected{ background:#fef2f2; border-color:#fecaca; }
.approval-node.pending{ border-style:dashed; }
.approval-node .node-label,
.approval-node .node-status{ display:none; }
.an-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.an-title{ font-size:14px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:6px; }
.an-badge{ font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap; }
.an-badge.p{ background:#fef3c7; color:#b45309; }
.an-badge.a{ background:#dcfce7; color:#166534; }
.an-badge.r{ background:#fee2e2; color:#b91c1c; }
.an-comment{ font-size:12px; color:#6b7280; background:#fff; border:1px solid var(--border-soft); border-radius:8px; padding:7px 10px; word-break:break-all; }
.an-actions{ display:flex; flex-direction:column; gap:8px; margin-top:auto; }
.an-remind{ width:100%; }
.an-remind .btn{ width:100%; min-height:38px; justify-content:center; }
.an-approve{ display:flex; flex-direction:column; gap:8px; }
.an-approve input{ width:100%; padding:9px 11px; border:1.5px solid var(--border); border-radius:10px; font-size:13px; min-height:40px; background:#fff; box-sizing:border-box; }
.an-approve .an-btns{ display:flex; gap:8px; }
.an-approve .an-btns .btn{ flex:1; min-height:42px; justify-content:center; }
@media(max-width:560px){ .approval-flow{ grid-template-columns:1fr; } }

/* ── 下拉式导航菜单 ── */
.nav-hd{ display:flex; align-items:center; gap:8px; min-height:38px; }
.nav-hamburger{ background:rgba(37,99,235,.08); border:none; color:var(--brand,#2563eb); font-size:20px; cursor:pointer; padding:4px 12px; border-radius:10px; min-height:38px; line-height:1; }
.nav-current{ flex:1; font-size:15px; font-weight:600; color:#1e293b; display:flex; align-items:center; gap:4px; }
.nav-caret{ cursor:pointer; color:#94a3b8; font-size:13px; padding:2px 6px; }
.tab-dropdown{ position:absolute; left:8px; right:8px; top:calc(100% + 6px); z-index:120; background:#fff; border:1px solid var(--border,#e2e8f0); border-radius:14px; box-shadow:0 14px 34px rgba(15,23,42,.16); padding:8px; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.tab-drop-item{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 6px 10px; border-radius:11px; color:#475569; text-decoration:none; font-size:13px; font-weight:600; transition:background .15s; }
.tab-drop-item .tab-icon{ font-size:22px; line-height:1.2; }
.tab-drop-item:hover{ background:#f1f5f9; }
.tab-drop-item.active{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ grid-template-columns:repeat(2,1fr); padding:10px; } .tab-drop-item{ padding:15px 6px; font-size:14px; } }

/* ── 下拉导航-纯文字版 ── */
.tab-dropdown{ grid-template-columns:1fr; padding:8px; gap:4px; max-height:min(70vh,470px); overflow-y:auto; }
.tab-drop-item{ flex-direction:row; justify-content:center; padding:13px 10px; border-radius:10px; font-size:14px; letter-spacing:.5px; }
.tab-drop-item .tab-icon{ display:none; }
.tab-drop-item:hover{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ grid-template-columns:1fr; padding:8px; } .tab-drop-item{ padding:16px 10px; font-size:15px; min-height:48px; } }

/* ── 下拉导航-紧凑双列纯文字 ── */
.tab-dropdown{ grid-template-columns:repeat(2,1fr) !important; gap:4px; padding:6px; max-height:min(60vh,430px); overflow-y:auto; }
.tab-drop-item{ flex-direction:column; justify-content:center; padding:8px 4px; border-radius:8px; font-size:12px; color:#475569; }
.tab-drop-item .tab-icon{ display:none !important; }
.tab-drop-item .tab-label{ line-height:1.2; }
.tab-drop-item:hover{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ grid-template-columns:repeat(2,1fr); gap:4px; padding:6px; } .tab-drop-item{ padding:9px 4px; font-size:12px; } }

/* ── 下拉导航-单列左对齐紧凑 ── */
.tab-dropdown{ grid-template-columns:1fr !important; gap:2px; padding:5px; max-height:min(58vh,400px); overflow-y:auto; }
.tab-drop-item{ flex-direction:row; justify-content:flex-start; align-items:center; padding:8px 12px; border-radius:7px; font-size:13px; color:#475569; }
.tab-drop-item .tab-icon{ display:none !important; }
.tab-drop-item:active{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ grid-template-columns:1fr; gap:2px; padding:5px; } .tab-drop-item{ padding:10px 12px; font-size:13px; } }

/* ── 下拉导航-行高-30% ── */
.tab-drop-item{ padding-top:6px !important; padding-bottom:6px !important; }
@media (max-width:640px){ .tab-drop-item{ padding:7px 12px !important; } }

/* ── 下拉导航-行高再缩 ── */
.tab-drop-item{ padding-top:4px !important; padding-bottom:4px !important; }
@media (max-width:640px){ .tab-drop-item{ padding:5px 12px !important; } }
/* ═══════════════════════════════════════════════════════════
   辉科食品 CRM — 移动端界面 v9
   设计理念：人性化 · 简单明了 · 清晰好读
   · 柔和配色、干净层级、友好文案、轻量微交互
   ═══════════════════════════════════════════════════════════ */
:root {
  /* 品牌 & 状态（柔和、清晰） */
  --primary:#2563eb; --primary-dark:#1d4ed8;
  --brand:#2563eb; --brand-soft:#eef2ff;
  --success:#16a34a; --warning:#ea580c; --danger:#dc2626;
  /* 状态色：✅绿=完成 / 🔵蓝=进行中 / ⚪灰=未开始 / 🔴红=驳回 */
  --st-done:#16a34a; --st-run:#2563eb; --st-wait:#94a3b8; --st-reject:#dc2626; --st-warn:#d97706;
  /* 中性 */
  --bg:#f2f4f8; --bg-soft:#f7f9fc;
  --card:#ffffff; --text:#1f2a3d; --text-light:#6b7a90; --text-secondary:#6b7a90;
  --border:#e3e8ef; --border-soft:#eef2f6;
  /* 圆角 / 阴影（柔和） */
  --radius:14px; --radius-sm:10px;
  --shadow-card:0 1px 2px rgba(22,33,62,.05),0 2px 8px rgba(22,33,62,.05);
  --shadow-lift:0 8px 24px rgba(30,45,90,.10);
}
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  background:var(--bg); color:var(--text); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{ -webkit-tap-highlight-color:transparent; }

/* ── 顶部栏：清爽品牌色 ── */
.top-bar{
  position:sticky; top:0; z-index:100;
  background:linear-gradient(135deg,#2563eb,#4338ca);
  color:#fff; padding:13px 16px;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 3px 12px rgba(37,99,235,.20);
}
.top-bar h1{ font-size:17px; font-weight:700; }
.top-bar .right-wrap{ display:flex; align-items:center; gap:8px; }
.top-bar .right-wrap a{ color:#fff; text-decoration:none; font-size:13px; }
.top-bar .right-wrap a:active{ opacity:.6; }
.top-bar .user-badge{
  background:rgba(255,255,255,.2); padding:4px 12px; border-radius:20px;
  font-size:12px; font-weight:600; max-width:150px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.top-bar .notif-icon{
  position:relative; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; font-size:18px;
  cursor:pointer;
}
.top-bar .notif-icon:active{ opacity:.7; }
.top-bar .notif-icon .badge{
  position:absolute; top:-3px; right:-3px; background:#ef4444; color:#fff;
  border-radius:50%; min-width:19px; height:19px; font-size:10px; font-weight:700;
  display:none; align-items:center; justify-content:center; padding:0 4px; border:2px solid #fff;
}

/* ── 导航：简洁双排 ── */
.tab-nav{
  position:sticky; top:52px; z-index:99;
  background:rgba(255,255,255,.96); border-bottom:1px solid var(--border);
  box-shadow:0 1px 3px rgba(22,33,62,.04);
  padding:8px 10px;
}
.tab-row{ display:flex; gap:6px; }
.tab-row + .tab-row{ margin-top:5px; }
.tab-row a{
  flex:1; min-width:0; text-align:center; padding:9px 4px 7px;
  text-decoration:none; font-size:12px; font-weight:500; color:var(--text-light);
  border-radius:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:background .15s,color .15s;
}
.tab-row a:active{ background:#f1f5f9; }
.tab-row a.active{ background:var(--brand); color:#fff; font-weight:600; }
.tab-row a .tab-icon{ font-size:20px; display:block; margin-bottom:2px; line-height:1.2; }
.tab-row a.active .tab-badge{ background:#fff; color:#ef4444; }

/* ── 内容区 ── */
.container{ max-width:520px; margin:0 auto; padding:14px 12px 30px; }

/* ── 卡片：干净白卡 ── */
.card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow-card);
  margin-bottom:14px; overflow:hidden; border:1px solid var(--border-soft);
}
.card-header{
  padding:15px 16px 11px; font-size:15px; font-weight:700; color:var(--text);
  border-bottom:1px solid var(--border-soft); display:flex; align-items:center; gap:8px;
}
.card-body{ padding:16px; }

/* ── 首页统计卡 ── */
.stats-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:2px 0 14px; }
.stat-card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow-card);
  padding:18px 16px; border:1px solid var(--border-soft);
}
.stat-value,.stat-num{ font-size:34px; font-weight:800; line-height:1.1; color:var(--primary); margin-bottom:5px; }
.stat-value[style*="color"],.stat-num[style*="color"]{ color:inherit; }
.stat-label{ font-size:13px; color:var(--text-light); font-weight:500; }
.stat-card .stat-icon{ font-size:18px; margin-bottom:2px; }

/* ── 按钮：清晰柔和 ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 20px; border-radius:12px; font-size:14px; font-weight:600;
  border:none; cursor:pointer; text-decoration:none; min-height:44px;
  transition:opacity .15s, transform .1s;
}
.btn:active{ opacity:.8; transform:scale(.97); }
.btn-primary{ background:var(--primary); color:#fff; box-shadow:0 2px 6px rgba(37,99,235,.25); }
.btn-success{ background:var(--success); color:#fff; }
.btn-warning{ background:var(--warning); color:#fff; }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-outline{ background:#fff; border:1.5px solid var(--border); color:var(--text); }
.btn-outline:active{ background:var(--bg); }
.btn-block{ width:100%; }
.btn-sm{ padding:6px 14px; font-size:13px; min-height:auto; border-radius:10px; }
.btn-group{ display:flex; gap:8px; flex-wrap:wrap; }

/* ── 表单 ── */
.form-group{ margin-bottom:14px; }
.form-group label{ display:block; font-size:13px; font-weight:600; color:var(--text); margin-bottom:6px; }
.form-control{
  width:100%; padding:11px 13px; border:1.5px solid var(--border);
  border-radius:12px; font-size:15px; background:#fff; min-height:46px;
  transition:border-color .15s, box-shadow .15s;
}
.form-control:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
textarea.form-control{ min-height:84px; resize:vertical; }
select.form-control{ appearance:auto; }

/* ── 列表项 ── */
.list-item{
  display:flex; align-items:center; padding:14px 16px;
  border-bottom:1px solid var(--border-soft); text-decoration:none; color:var(--text);
}
.list-item:last-child{ border-bottom:none; }
.list-item:active{ background:var(--bg-soft); }
.item-main{ flex:1; min-width:0; }
.item-title{ font-size:15px; font-weight:600; margin-bottom:3px; }
.item-sub{ font-size:12px; color:var(--text-light); }
.item-right{ text-align:right; flex-shrink:0; margin-left:8px; }
.item-badge{
  display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600;
}
.badge-pending{ background:#fef3c7; color:#92400e; }
.badge-approved{ background:#dcfce7; color:#166534; }
.badge-rejected{ background:#fee2e2; color:#991b1b; }
.badge-shipped{ background:#dbeafe; color:#1e40af; }
.badge-signed{ background:#e0e7ff; color:#3730a3; }
.badge-pass{ background:#dcfce7; color:#166534; }
.badge-fail{ background:#fee2e2; color:#991b1b; }

/* ── 状态徽章 chips（清晰可读） ── */
.st{ display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; line-height:1.4; }
.st::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.st-done{ background:#dcfce7; color:#166534; }
.st-run{ background:#dbeafe; color:#1e40af; }
.st-wait{ background:#eef2f6; color:#64748b; }
.st-reject{ background:#fee2e2; color:#b91c1c; }
.st-warn{ background:#fef3c7; color:#b45309; }

/* ── 细进度条 ── */
.pbar{ height:7px; background:#eef2f6; border-radius:7px; overflow:hidden; position:relative; }
.pbar>i{ display:block; height:100%; border-radius:7px; background:var(--primary); transition:width .4s ease; }
.pbar.p-done>i{ background:var(--success); }
.pbar.p-warn>i{ background:var(--warning); }

/* ── Flash 消息 ── */
.flash{
  padding:12px 16px; border-radius:12px; margin-bottom:12px; font-size:14px; font-weight:500;
  border:1px solid transparent;
}
.flash-success{ background:#f0fdf4; color:#166534; border-color:#bbf7d0; }
.flash-danger{ background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.flash-warning{ background:#fffbeb; color:#92400e; border-color:#fde68a; }

/* ── 详情行 ── */
.detail-row{ display:flex; padding:10px 0; border-bottom:1px solid var(--border-soft); }
.detail-label{ width:96px; flex-shrink:0; font-size:13px; color:var(--text-light); font-weight:500; }
.detail-value{ flex:1; font-size:14px; color:var(--text); }

/* ── 流程步骤 ── */
.progress-steps{ display:flex; padding:14px 8px; gap:2px; }
.progress-step{ flex:1; text-align:center; font-size:11px; color:var(--text-light); position:relative; }
.progress-step .dot{
  width:26px; height:26px; border-radius:50%; background:#e3e8ef;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; margin-bottom:5px; color:#fff;
}
.progress-step.active .dot{ background:var(--primary); }
.progress-step.done .dot{ background:var(--success); }
.progress-step.fail .dot{ background:var(--danger); }

/* ── 表格 ── */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table{ width:100%; border-collapse:collapse; font-size:13px; }
table th,table td{ padding:11px 12px; text-align:left; white-space:nowrap; }
table thead th{ background:#f8fafc; color:var(--text-light); font-size:12px; font-weight:700; }
table tbody tr{ border-bottom:1px solid var(--border-soft); }
table tbody tr:active{ background:var(--bg-soft); }

/* ── 空状态 ── */
.empty-state{ text-align:center; padding:44px 24px; color:var(--text-light); border-radius:var(--radius); }
.empty-state .icon{ font-size:48px; margin-bottom:12px; display:block; }
.empty-state p{ font-size:14px; }

/* ── 页面标题 ── */
.page-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.page-header h2{ font-size:19px; font-weight:800; }

/* ── 角色标记 ── */
.role-tag{ display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600; }
.role-admin{ background:#e0e7ff; color:#3730a3; }
.role-sales{ background:#dbeafe; color:#1e40af; }
.role-market{ background:#fef3c7; color:#92400e; }
.role-warehouse{ background:#dcfce7; color:#166534; }
.role-marketer{ background:#f3e8ff; color:#6b21a8; }
.role-general_manager{ background:#ffedd5; color:#9a3412; }
.role-finance{ background:#fce4ec; color:#9b1c1c; }
.role-quality{ background:#ccfbf1; color:#0f766e; }
.role-hr{ background:#ffedd5; color:#c2410c; }
.role-workshop{ background:#f1f5f9; color:#475569; }
.role-logistics{ background:#e0f2fe; color:#0369a1; }
.role-rd{ background:#ede9fe; color:#6d28d9; }
.role-procurement{ background:#fce7f3; color:#9d174d; }

/* ── 分析页 ── */
.ana-tabs{
  display:flex; gap:4px; overflow-x:auto; background:#fff; border-radius:12px;
  margin-bottom:14px; padding:4px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  box-shadow:var(--shadow-card);
}
.ana-tabs::-webkit-scrollbar{ display:none; }
.ana-tabs a{
  flex-shrink:0; padding:9px 14px; text-decoration:none; font-size:13px;
  font-weight:600; color:var(--text-light); border-radius:9px;
}
.ana-tabs a.active{ background:var(--brand-soft); color:var(--primary); font-weight:700; }
.ana-stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.ana-stat{ background:#fff; border-radius:12px; padding:16px; text-align:center; box-shadow:var(--shadow-card); }
.ana-stat .num{ font-size:24px; font-weight:800; color:var(--primary); }
.ana-stat .label{ font-size:11px; color:var(--text-light); margin-top:3px; }
.bar-chart{ padding:12px 16px; }
.bar-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.bar-label{ width:72px; flex-shrink:0; font-size:12px; color:var(--text); text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-track{ flex:1; height:20px; background:#f1f5f9; border-radius:10px; overflow:hidden; }
.bar-fill{ height:100%; border-radius:10px; background:var(--primary); transition:width .4s ease; min-width:4px; }
.bar-val{ font-size:12px; font-weight:700; color:var(--text); min-width:30px; text-align:right; }
.rank-list{ list-style:none; }
.rank-list li{ display:flex; align-items:center; padding:11px 16px; border-bottom:1px solid var(--border-soft); gap:10px; }
.rank-list li:last-child{ border-bottom:none; }
.rank-num{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex-shrink:0; }
.rank-1{ background:#fef3c7; color:#d97706; }
.rank-2{ background:#e2e8f0; color:#475569; }
.rank-3{ background:#fde68a; color:#92400e; }
.rank-n{ background:#f1f5f9; color:#94a3b8; }

/* ── 流程总览 ── */
.flow-overview{ display:flex; align-items:center; justify-content:center; gap:2px; padding:0 4px; }
.flow-node{ flex:1; text-align:center; background:#f8fafc; border-radius:10px; padding:7px 2px; border:1.5px solid var(--border); max-width:92px; }
.flow-node .fn-icon{ font-size:22px; margin-bottom:2px; }
.flow-node .fn-label{ font-size:11px; font-weight:700; color:var(--text); line-height:1.3; }
.flow-node .fn-role{ font-size:10px; color:var(--text-light); margin-top:1px; }
.flow-arrow{ font-size:16px; color:var(--text-light); flex-shrink:0; padding:0 2px; }

/* ── 敏感信息 ── */
.sensitive-hidden{ filter:blur(4px); user-select:none; }

/* ── 角标 / 加载条 / 下拉刷新 ── */
.tab-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  background:#ef4444; color:#fff; font-size:10px; font-weight:700; line-height:1;
  margin-left:3px; vertical-align:middle; position:relative; top:-1px;
}
#topprog{ position:fixed; top:0; left:0; height:3px; width:0; z-index:9999; border-radius:0 3px 3px 0; opacity:0; transition:opacity .3s; }
#ptr-ind{
  position:fixed; top:112px; left:50%; transform:translate(-50%,-30px);
  background:rgba(30,41,59,.86); color:#fff; font-size:12px; padding:7px 16px;
  border-radius:22px; z-index:999; opacity:0; transition:opacity .18s,transform .18s;
  pointer-events:none; box-shadow:var(--shadow-lift);
}
#ptr-ind.on{ opacity:1; transform:translate(-50%,0); }
#ptr-ind .spin{ display:inline-block; margin-right:6px; animation:ptrSpin .8s linear infinite; }
@keyframes ptrSpin{ to{ transform:rotate(360deg); } }

/* ── 移动端 ── */
@media (max-width:640px){
  .container{ padding:12px 10px 24px; }
  .top-bar{ padding:10px 12px; }
  .top-bar h1{ font-size:16px; }
  .tab-nav{ padding:7px 8px; top:50px; }
  .card{ border-radius:13px; }
  .form-control,.form-group input,.form-group select,.form-group textarea{ font-size:15px; min-height:46px; }
  .btn{ min-height:46px; font-size:15px; }
  .page-header h2{ font-size:18px; }
  .stat-value,.stat-num{ font-size:30px; }
}

/* ═══════════════════════════════════════════════════════════
   详情/子页面统一样式（客户/样品/产品详情共用）
   ═══════════════════════════════════════════════════════════ */
/* 返回链接 */
.back-link{
  display:inline-flex; align-items:center; gap:4px;
  color:var(--text-light); text-decoration:none; font-size:13px; font-weight:500;
  margin-bottom:10px; padding:4px 10px 4px 4px; border-radius:8px;
}
.back-link:active{ background:var(--bg); }
.detail-hero{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }

/* Tag 徽章（详情头/列表用） */
.tag{ display:inline-block; padding:2px 10px; border-radius:20px; font-size:11px; font-weight:600; vertical-align:middle; }
.tag-info{ background:#dbeafe; color:#1e40af; }
.tag-success,.tag-done,.tag-approved,.tag-pass{ background:#dcfce7; color:#166534; }
.tag-warning,.tag-pending{ background:#fef3c7; color:#92400e; }
.tag-danger,.tag-rejected,.tag-fail{ background:#f1f5f9; color:#64748b; }

/* 详情信息网格 */
.detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4px 18px; }
.detail-field{ padding:9px 0; border-bottom:1px solid var(--border-soft); }
.detail-grid > .detail-field:nth-last-child(-n+2){ border-bottom:none; }
.field-label{ font-size:12px; color:var(--text-light); font-weight:500; margin-bottom:2px; }
.field-value{ font-size:14px; color:var(--text); word-break:break-word; }

/* 进度条（产品详情） */
.progress-bar{ width:100%; background:#eef2f6; border-radius:20px; overflow:hidden; position:relative; }
.progress-bar-fill{ background:var(--primary); border-radius:20px; transition:width .5s ease; }
.progress-bar-fill.green{ background:var(--success); }
.progress-bar-fill.orange{ background:var(--warning); }

/* 里程碑（产品详情） */
.milestones{ margin-top:6px; }
.milestone{
  display:flex; align-items:center; gap:6px; padding:10px 12px; margin:6px 0;
  background:var(--bg-soft); border:1px solid var(--border-soft); border-radius:10px;
  font-size:13px; color:var(--text-light);
}
.milestone.done{ background:#f0fdf4; border-color:#bbf7d0; color:#166534; }

/* 审批流程节点（样品详情等） */
.approval-flow{ display:flex; flex-direction:column; gap:8px; }
.approval-node{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; background:var(--bg-soft); border:1.5px solid var(--border);
  border-radius:12px;
}
.approval-node .node-label{ font-size:13px; font-weight:600; color:var(--text); }
.approval-node .node-status{ font-size:12px; font-weight:600; color:var(--text-light); }
.approval-node.passed{ background:#f0fdf4; border-color:#86efac; }
.approval-node.passed .node-status{ color:#16a34a; }
.approval-node.rejected{ background:#fef2f2; border-color:#fecaca; }
.approval-node.rejected .node-status{ color:#dc2626; }
.approval-node.pending{ border-style:dashed; }

/* 子页卡片内小块标题 */
.sub-title{ font-size:14px; font-weight:700; color:var(--text); margin:16px 0 8px; }

/* 列表内链接 */
.table-wrap tbody a{ color:var(--primary); text-decoration:none; font-weight:600; }
.table-wrap tbody a:active{ text-decoration:underline; }

@media (max-width:640px){
  .detail-grid{ grid-template-columns:1fr; }
  .detail-hero{ flex-direction:column; align-items:flex-start; }
}

/* ═══════════════════════════════════════════════════════════
   列表卡片共用样式（研发/立项/样品列表统一视觉）
   ═══════════════════════════════════════════════════════════ */
.pcard{background:#fff;border-radius:12px;margin-bottom:8px;box-shadow:var(--shadow-card);overflow:hidden;position:relative;}
.pcard > a{text-decoration:none;color:inherit;display:block;padding:12px 14px 6px;}
.pcard-body{display:flex;align-items:flex-start;gap:10px;}
.pcard-left{flex:1;min-width:0;}
.pcard-name{font-size:15px;font-weight:700;color:#1e293b;line-height:1.3;}
.pcard-name .pid{font-size:10px;color:#94a3b8;font-weight:400;margin-left:4px;}
.pcard-meta{font-size:12px;color:#64748b;margin-top:4px;display:flex;flex-wrap:wrap;gap:3px 10px;}
.pcard-meta b{font-weight:700;color:#334155;}
.pcard-status{position:absolute;right:12px;top:12px;font-size:11px;font-weight:700;padding:2px 10px;border-radius:12px;letter-spacing:.2px;display:inline-flex;align-items:center;gap:4px;}
.pcard-status.done{background:#dcfce7;color:#15803d;}
.pcard-status.running,.pcard-status.approved,.pcard-status.info{background:#dbeafe;color:#1d4ed8;}
.pcard-status.paused{background:#f1f5f9;color:#64748b;}
.pcard-status.waiting,.pcard-status.pending{background:#fef3c7;color:#b45309;}
/* 已撤销/已驳回 → 一律灰色，不做彩色强调 */
.pcard-status.rejected{background:#f1f5f9;color:#64748b;}
.pcard-desc{font-size:12px;color:#64748b;margin-top:6px;line-height:1.5;padding-right:6px;}
.pcard-foot{padding:2px 14px 10px;}
.pcard-process{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-top:6px;}
.proc-step{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#64748b;background:#f1f5f9;border-radius:12px;padding:3px 9px;}
.proc-step.ok{background:#dcfce7;color:#15803d;}
.proc-step.no{background:#fee2e2;color:#b91c1c;}
.proc-step.todo{background:#fff;border:1px dashed #cbd5e1;}
/* 红点脉冲（审批中/未完成） */
.todo-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#ef4444;vertical-align:middle;animation:tdPulse 1.2s infinite;flex-shrink:0;}
@keyframes tdPulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.6);}70%{box-shadow:0 0 0 7px rgba(239,68,68,0);}100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}}
/* 分组头 */
.sec-header{display:flex;align-items:center;gap:8px;padding:12px 4px 6px;}
.sec-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.sec-title{font-size:14px;font-weight:700;color:#1e293b;}
.sec-count{font-size:12px;color:#94a3b8;font-weight:400;}
.sec-subtitle{font-size:12px;font-weight:600;color:#64748b;padding:6px 4px 2px;display:flex;align-items:center;gap:4px;}
/* 列表页上方操作条 */
.action-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 0 10px;}

/* 列表页分类标签栏 + 分组区块 */
.tab-scroll{display:flex;gap:6px;overflow-x:auto;padding:6px 2px 10px;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.tab-scroll::-webkit-scrollbar{display:none;}
.tab-btn{border:1px solid var(--border,#e2e8f0);background:#fff;color:#475569;padding:7px 14px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;flex-shrink:0;}
.tab-btn.active{background:var(--primary,#2563eb);color:#fff;border-color:var(--primary,#2563eb);}
.tab-btn .cnt{font-size:10px;background:rgba(0,0,0,.1);border-radius:10px;padding:1px 6px;margin-left:3px;font-weight:400;}
.tab-btn.active .cnt{background:rgba(255,255,255,.25);}
.list-section{padding:0 2px;}

/* ═══════════════════════════════════════════════════════════
   流程进度时间轴（研发/立项/样品通用 · 标识卡在哪个节点）
   ═══════════════════════════════════════════════════════════ */
.flow-tl{display:flex;align-items:flex-start;justify-content:space-between;gap:0;padding:8px 2px 4px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.ftl-node{flex:1;min-width:52px;display:flex;flex-direction:column;align-items:center;position:relative;padding:2px;}
.ftl-node::before{content:'';position:absolute;top:9px;left:-50%;width:100%;height:2px;background:#e2e8f0;z-index:1;}
.ftl-node:first-child::before{display:none;}
.ftl-dot{width:16px;height:16px;border-radius:50%;background:#e2e8f0;border:2px solid #fff;box-shadow:0 0 0 1.5px #e2e8f0;z-index:2;margin-bottom:3px;flex-shrink:0;}
.ftl-node.done::before{background:#86efac;}
.ftl-node.done .ftl-dot{background:var(--success,#16a34a);box-shadow:0 0 0 1.5px #bbf7d0;}
.ftl-node.cur::before{background:#93c5fd;}
.ftl-node.cur .ftl-dot{background:var(--primary,#2563eb);box-shadow:0 0 0 1.5px #bfdbfe;animation:ftlPulse 1.2s infinite;}
.ftl-node.reject .ftl-dot{background:#cbd5e1;box-shadow:0 0 0 1.5px #e2e8f0;}
.ftl-node.todo::before{background:#e2e8f0;}
.ftl-label{font-size:10px;color:#475569;white-space:nowrap;text-align:center;line-height:1.15;}
.ftl-label small{display:block;font-size:8px;color:#94a3b8;font-weight:400;}
@keyframes ftlPulse{0%{box-shadow:0 0 0 0 rgba(37,99,235,.5),0 0 0 1.5px #bfdbfe;}70%{box-shadow:0 0 0 9px rgba(37,99,235,0),0 0 0 1.5px #bfdbfe;}100%{box-shadow:0 0 0 0 rgba(37,99,235,0),0 0 0 1.5px #bfdbfe;}}
/* 卡在当前节点横幅 */
.flow-banner{display:flex;align-items:center;gap:6px;background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;font-size:12px;border-radius:8px;padding:5px 10px;margin:2px 2px 2px;}
.flow-banner.done{background:#f0fdf4;border-color:#bbf7d0;color:#166534;}
.flow-banner.muted{background:#f8fafc;border-color:#e2e8f0;color:#64748b;}
.flow-banner .fb-dot{width:9px;height:9px;border-radius:50%;background:var(--primary,#2563eb);flex-shrink:0;animation:ftlPulse .9s infinite;}

/* ═══════════ 搜索/筛选栏（.search-bar）v13 ═══════════ */
.search-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:10px;margin:0 0 14px;box-shadow:0 1px 2px rgba(15,23,42,.04);}
.search-bar input[type=text],.search-bar input[type=search],.search-bar input:not([type]){
  flex:1 1 200px;min-width:150px;padding:9px 12px 9px 36px;border:1px solid #e2e8f0;border-radius:10px;
  font-size:14px;color:var(--text,#1e293b);background:#f8fafc url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%2394a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>') no-repeat 12px center;background-size:16px;transition:border-color .15s,box-shadow .15s,background .15s;}
.search-bar input:focus{outline:none;border-color:var(--primary,#2563eb);background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%232563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>') no-repeat 12px center;background-size:16px;box-shadow:0 0 0 3px rgba(37,99,235,.12);}
.search-bar select{padding:9px 30px 9px 12px;border:1px solid #e2e8f0;border-radius:10px;font-size:14px;color:var(--text,#1e293b);background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') no-repeat right 10px center;background-size:14px;appearance:none;-webkit-appearance:none;cursor:pointer;transition:border-color .15s,box-shadow .15s;min-width:110px;}
.search-bar select:focus{outline:none;border-color:var(--primary,#2563eb);box-shadow:0 0 0 3px rgba(37,99,235,.12);}
.search-bar .btn{padding:9px 16px;border-radius:10px;white-space:nowrap;}
.search-bar .filter-count{margin-left:auto;font-size:12.5px;color:var(--text-light,#64748b);background:#f1f5f9;padding:7px 12px;border-radius:10px;white-space:nowrap;}
.search-bar .filter-count b{color:var(--primary,#2563eb);font-weight:700;}
@media(max-width:640px){.search-bar input[type=text],.search-bar input:not([type]){flex:1 1 100%;}.search-bar .filter-count{margin-left:0;}}

/* ═══════════ 申请/新增类表单美化 v14 ═══════════ */
.form-hero{padding:16px 18px;border-radius:14px;margin-bottom:14px;background:linear-gradient(120deg,rgba(37,99,235,.08),rgba(37,99,235,.02));border:1px solid rgba(37,99,235,.14);}
.form-hero h3{margin:0;font-size:18px;font-weight:700;color:#1e293b;display:flex;align-items:center;gap:8px;}
.form-hero p{margin:4px 0 0;font-size:12.5px;color:#64748b;line-height:1.5;}
.form-section{display:flex;align-items:center;gap:8px;margin:20px 0 12px;padding-bottom:8px;border-bottom:1.5px solid #eef2f7;font-size:14px;font-weight:700;color:#1e293b;}
.form-section:first-of-type{margin-top:0;}
.form-section .sec-ic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#eff6ff;color:#2563eb;font-size:14px;flex-shrink:0;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:640px){.form-row{grid-template-columns:1fr;}}
.form-group{margin-bottom:12px;}
.form-group label{display:block;font-size:13px;font-weight:600;color:#1e293b;margin-bottom:6px;}
.form-group .req{color:#dc2626;margin-left:2px;}
.form-hint{font-size:12px;color:#94a3b8;margin-top:5px;line-height:1.45;}
/* 表单输入控件（作用于 .card-body 内的裸 input/select/textarea） */
.card-body input[type=text],.card-body input:not([type]),.card-body input[type=tel],.card-body input[type=number],
.card-body select,.card-body textarea{
  width:100%;padding:11px 13px;border:1.5px solid #e2e8f0;border-radius:12px;font-size:15px;
  background:#fff;min-height:46px;color:#1e293b;transition:border-color .15s,box-shadow .15s,background .15s;
  box-sizing:border-box;
}
.card-body input:focus,.card-body select:focus,.card-body textarea:focus{
  outline:none;border-color:#2563eb;background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.card-body textarea{min-height:92px;resize:vertical;}
.form-actions{display:flex;gap:10px;padding:12px 2px;margin-top:area 6px;}
.form-actions{position:sticky;bottom:0;gap:10px;padding:12px;margin:6px -18px -18px;background:rgba(248,250,252,.94);backdrop-filter:blur(6px);border-top:1px solid #eef2f7;border-radius:0 0 14px 14px;}
.form-actions .btn{padding:11px 22px;border-radius:12px;min-height:44px;}

/* ═══════════════════════════════════════════════
   移动端人性化/美化增强 v15（主流手机屏 < 600px）
   · 更大触控目标 · 更柔更圆按钮 · 刘海安全区 · 留白呼吸
   ═══════════════════════════════════════════════ */
.btn{
  min-height:46px;
  letter-spacing:.2px;
  box-shadow:0 2px 6px rgba(22,33,62,.06);
  transition:opacity .15s, transform .1s, box-shadow .15s;
}
.btn-primary{ box-shadow:0 3px 10px rgba(37,99,235,.28); }
.btn:active{ transform:scale(.96); }
.btn-sm{ min-height:38px; gap:5px; }

/* iPhone 刘海安全区适配（桌面宽度不受影响） */
@supports(padding:max(0px)){
  .top-bar{
    padding-left:max(14px,env(safe-area-inset-left));
    padding-right:max(14px,env(safe-area-inset-right));
  }
  .container{
    padding-left:max(12px,env(safe-area-inset-left));
    padding-right:max(12px,env(safe-area-inset-right));
    padding-bottom:max(32px,env(safe-area-inset-bottom));
  }
  .form-actions{ padding-bottom:max(12px,env(safe-area-inset-bottom)); }
}

/* 首页统计：更圆更柔 */
.stat-card{ border-radius:18px; padding:20px 18px; box-shadow:var(--shadow-card); }

/* ============ 主流手机屏 < 600px ============ */
@media (max-width:600px){
  /* 顶栏：自动换行、不拥挤 */
  .top-bar{ flex-wrap:wrap; gap:6px 10px; padding:12px 12px; align-items:center; }
  .top-bar h1{ font-size:16px; }
  .top-bar .right-wrap{ margin-left:auto; }
  .top-bar .user-badge{ max-width:104px; font-size:11px; padding:4px 10px; }

  /* 按钮：整块化 + 更舒服的触控区 */
  .btn{ min-height:48px; font-size:15px; border-radius:14px; }
  .btn-sm{ min-height:44px; font-size:14px; padding:8px 16px; border-radius:12px; }
  .form-actions{ position:sticky; bottom:0; gap:12px; padding:12px; }
  .form-actions .btn{ flex:1; min-height:50px; font-size:15px; }
  .btn-group .btn{ flex:1; }

  /* 卡片留白呼吸 */
  .card-body{ padding:18px; }
  .card-header{ padding:16px 18px 12px; }

  /* 流程卡脚操作按钮：两列整块、好点易触 */
  .pcard-foot .btn-sm{ flex:1; min-width:0; justify-content:center; }
  .pcard-foot form[method=POST]{ display:flex; }
  .pcard-foot form button[type=submit]{ flex:1; min-height:44px; flex:1 1 0; }
  .pcard-foot form input[type=text]{ min-height:46px; font-size:16px; }

  /* 表单输入：16px 防 iOS 聚焦自动放大 */
  .card-body input[type=text],.card-body input:not([type]),.card-body input[type=tel],
  .card-body input[type=number],.card-body input[type=date],.card-body select,.card-body textarea,
  .form-control{
    min-height:48px; font-size:16px;
  }
  .card-body input[type=date]{ font-size:15px; }
  textarea.form-control{ min-height:96px; }

  /* 导航标签更大更易点 */
  .tab-nav{ padding:8px 8px; }
  .tab-row a{ padding-top:11px; padding-bottom:9px; font-size:13px; }
  .tab-row a .tab-icon{ font-size:22px; }

  /* 列表项 / 详情行 更大触控与行距 */
  .list-item{ padding:15px 16px; }
  .item-title{ font-size:16px; }
  .item-sub{ font-size:13px; }
  .detail-row{ padding:12px 2px; }
  .detail-label{ width:104px; }
  .detail-value{ font-size:15px; }

  /* 空状态 */
  .empty-state{ padding:52px 24px; }

  /* 表格横向滑动更顺滑 */
  .table-wrap{ -webkit-overflow-scrolling:touch; }
  table th,table td{ padding:13px 12px; font-size:14px; }

  /* 首页统计卡两列更透气 */
  .stats-grid{ gap:12px; }
}

/* ═══ 五部门并行审批：清爽卡片网格 v16 ═══ */
.approval-flow{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:10px;
}
.approval-node{
  padding:13px 14px; background:var(--bg-soft); border:1.5px solid var(--border);
  border-radius:14px; display:flex; flex-direction:column; gap:9px;
}
.approval-node.passed{ background:#f0fdf4; border-color:#86efac; }
.approval-node.rejected{ background:#fef2f2; border-color:#fecaca; }
.approval-node.pending{ border-style:dashed; }
.approval-node .node-label,
.approval-node .node-status{ display:none; }
.an-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.an-title{ font-size:14px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:6px; }
.an-badge{ font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap; }
.an-badge.p{ background:#fef3c7; color:#b45309; }
.an-badge.a{ background:#dcfce7; color:#166534; }
.an-badge.r{ background:#fee2e2; color:#b91c1c; }
.an-comment{ font-size:12px; color:#6b7280; background:#fff; border:1px solid var(--border-soft); border-radius:8px; padding:7px 10px; word-break:break-all; }
.an-actions{ display:flex; flex-direction:column; gap:8px; margin-top:auto; }
.an-remind{ width:100%; }
.an-remind .btn{ width:100%; min-height:38px; justify-content:center; }
.an-approve{ display:flex; flex-direction:column; gap:8px; }
.an-approve input{ width:100%; padding:9px 11px; border:1.5px solid var(--border); border-radius:10px; font-size:13px; min-height:40px; background:#fff; box-sizing:border-box; }
.an-approve .an-btns{ display:flex; gap:8px; }
.an-approve .an-btns .btn{ flex:1; min-height:42px; justify-content:center; }
@media(max-width:560px){ .approval-flow{ grid-template-columns:1fr; } }

/* ── 下拉式导航菜单 ── */
.nav-hd{ display:flex; align-items:center; gap:8px; min-height:38px; }
.nav-hamburger{ background:rgba(37,99,235,.08); border:none; color:var(--brand,#2563eb); font-size:20px; cursor:pointer; padding:4px 12px; border-radius:10px; min-height:38px; line-height:1; }
.nav-current{ flex:1; font-size:15px; font-weight:600; color:#1e293b; display:flex; align-items:center; gap:4px; }
.nav-caret{ cursor:pointer; color:#94a3b8; font-size:13px; padding:2px 6px; }
.tab-dropdown{ position:absolute; left:8px; right:8px; top:calc(100% + 6px); z-index:120; background:#fff; border:1px solid var(--border,#e2e8f0); border-radius:14px; box-shadow:0 14px 34px rgba(15,23,42,.16); padding:8px; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.tab-drop-item{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 6px 10px; border-radius:11px; color:#475569; text-decoration:none; font-size:13px; font-weight:600; transition:background .15s; }
.tab-drop-item .tab-icon{ font-size:22px; line-height:1.2; }
.tab-drop-item:hover{ background:#f1f5f9; }
.tab-drop-item.active{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ grid-template-columns:repeat(2,1fr); padding:10px; } .tab-drop-item{ padding:15px 6px; font-size:14px; } }

/* ── 下拉导航-纯文字版 ── */
.tab-dropdown{ grid-template-columns:1fr; padding:8px; gap:4px; max-height:min(70vh,470px); overflow-y:auto; }
.tab-drop-item{ flex-direction:row; justify-content:center; padding:13px 10px; border-radius:10px; font-size:14px; letter-spacing:.5px; }
.tab-drop-item .tab-icon{ display:none; }
.tab-drop-item:hover{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ grid-template-columns:1fr; padding:8px; } .tab-drop-item{ padding:16px 10px; font-size:15px; min-height:48px; } }

/* ── 下拉导航-紧凑双列纯文字 ── */
.tab-dropdown{ grid-template-columns:repeat(2,1fr) !important; gap:4px; padding:6px; max-height:min(60vh,430px); overflow-y:auto; }
.tab-drop-item{ flex-direction:column; justify-content:center; padding:8px 4px; border-radius:8px; font-size:12px; color:#475569; }
.tab-drop-item .tab-icon{ display:none !important; }
.tab-drop-item .tab-label{ line-height:1.2; }
.tab-drop-item:hover{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ grid-template-columns:repeat(2,1fr); gap:4px; padding:6px; } .tab-drop-item{ padding:9px 4px; font-size:12px; } }

/* ── 下拉导航-单列左对齐紧凑 ── */
.tab-dropdown{ grid-template-columns:1fr !important; gap:2px; padding:5px; max-height:min(58vh,400px); overflow-y:auto; }
.tab-drop-item{ flex-direction:row; justify-content:flex-start; align-items:center; padding:8px 12px; border-radius:7px; font-size:13px; color:#475569; }
.tab-drop-item .tab-icon{ display:none !important; }
.tab-drop-item:active{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ grid-template-columns:1fr; gap:2px; padding:5px; } .tab-drop-item{ padding:10px 12px; font-size:13px; } }

/* ── 下拉导航-行高-30% ── */
.tab-drop-item{ padding-top:6px !important; padding-bottom:6px !important; }
@media (max-width:640px){ .tab-drop-item{ padding:7px 12px !important; } }

/* ── 下拉导航-行高再缩 ── */
.tab-drop-item{ padding-top:4px !important; padding-bottom:4px !important; }
@media (max-width:640px){ .tab-drop-item{ padding:5px 12px !important; } }

/* ── 顶栏汉堡按钮 + 当前模块 + 独立下拉 ── */
.nav-hamburger{ background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.45); color:#fff; font-size:19px; cursor:pointer; padding:2px 10px; border-radius:8px; min-height:34px; line-height:1; }
.nav-cur{ color:#fff; font-size:13px; font-weight:600; margin-right:2px; }
.tab-dropdown{ position:fixed !important; top:56px; left:6px; right:6px; z-index:130; grid-template-columns:1fr; gap:2px; padding:6px; background:#fff; border:1px solid var(--border,#e2e8f0); border-radius:12px; box-shadow:0 14px 34px rgba(15,23,42,.18); max-height:min(62vh,440px); overflow-y:auto; }
.tab-drop-item{ flex-direction:row; justify-content:flex-start; align-items:center; padding:6px 12px; border-radius:7px; font-size:13px; color:#475569; }
.tab-drop-item .tab-icon{ display:none !important; }
.tab-drop-item:hover{ background:var(--brand,#2563eb); color:#fff; }
.tab-drop-item.active{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ top:52px; padding:6px; } .tab-drop-item{ padding:7px 12px; font-size:13px; } }
/* ═══════════════════════════════════════════════════════════
   辉科食品 CRM — 移动端界面 v9
   设计理念：人性化 · 简单明了 · 清晰好读
   · 柔和配色、干净层级、友好文案、轻量微交互
   ═══════════════════════════════════════════════════════════ */
:root {
  /* 品牌 & 状态（柔和、清晰） */
  --primary:#2563eb; --primary-dark:#1d4ed8;
  --brand:#2563eb; --brand-soft:#eef2ff;
  --success:#16a34a; --warning:#ea580c; --danger:#dc2626;
  /* 状态色：✅绿=完成 / 🔵蓝=进行中 / ⚪灰=未开始 / 🔴红=驳回 */
  --st-done:#16a34a; --st-run:#2563eb; --st-wait:#94a3b8; --st-reject:#dc2626; --st-warn:#d97706;
  /* 中性 */
  --bg:#f2f4f8; --bg-soft:#f7f9fc;
  --card:#ffffff; --text:#1f2a3d; --text-light:#6b7a90; --text-secondary:#6b7a90;
  --border:#e3e8ef; --border-soft:#eef2f6;
  /* 圆角 / 阴影（柔和） */
  --radius:14px; --radius-sm:10px;
  --shadow-card:0 1px 2px rgba(22,33,62,.05),0 2px 8px rgba(22,33,62,.05);
  --shadow-lift:0 8px 24px rgba(30,45,90,.10);
}
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  background:var(--bg); color:var(--text); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{ -webkit-tap-highlight-color:transparent; }

/* ── 顶部栏：清爽品牌色 ── */
.top-bar{
  position:sticky; top:0; z-index:100;
  background:linear-gradient(135deg,#2563eb,#4338ca);
  color:#fff; padding:13px 16px;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 3px 12px rgba(37,99,235,.20);
}
.top-bar h1{ font-size:17px; font-weight:700; }
.top-bar .right-wrap{ display:flex; align-items:center; gap:8px; }
.top-bar .right-wrap a{ color:#fff; text-decoration:none; font-size:13px; }
.top-bar .right-wrap a:active{ opacity:.6; }
.top-bar .user-badge{
  background:rgba(255,255,255,.2); padding:4px 12px; border-radius:20px;
  font-size:12px; font-weight:600; max-width:150px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.top-bar .notif-icon{
  position:relative; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; font-size:18px;
  cursor:pointer;
}
.top-bar .notif-icon:active{ opacity:.7; }
.top-bar .notif-icon .badge{
  position:absolute; top:-3px; right:-3px; background:#ef4444; color:#fff;
  border-radius:50%; min-width:19px; height:19px; font-size:10px; font-weight:700;
  display:none; align-items:center; justify-content:center; padding:0 4px; border:2px solid #fff;
}

/* ── 导航：简洁双排 ── */
.tab-nav{
  position:sticky; top:52px; z-index:99;
  background:rgba(255,255,255,.96); border-bottom:1px solid var(--border);
  box-shadow:0 1px 3px rgba(22,33,62,.04);
  padding:8px 10px;
}
.tab-row{ display:flex; gap:6px; }
.tab-row + .tab-row{ margin-top:5px; }
.tab-row a{
  flex:1; min-width:0; text-align:center; padding:9px 4px 7px;
  text-decoration:none; font-size:12px; font-weight:500; color:var(--text-light);
  border-radius:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:background .15s,color .15s;
}
.tab-row a:active{ background:#f1f5f9; }
.tab-row a.active{ background:var(--brand); color:#fff; font-weight:600; }
.tab-row a .tab-icon{ font-size:20px; display:block; margin-bottom:2px; line-height:1.2; }
.tab-row a.active .tab-badge{ background:#fff; color:#ef4444; }

/* ── 内容区 ── */
.container{ max-width:520px; margin:0 auto; padding:14px 12px 30px; }

/* ── 卡片：干净白卡 ── */
.card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow-card);
  margin-bottom:14px; overflow:hidden; border:1px solid var(--border-soft);
}
.card-header{
  padding:15px 16px 11px; font-size:15px; font-weight:700; color:var(--text);
  border-bottom:1px solid var(--border-soft); display:flex; align-items:center; gap:8px;
}
.card-body{ padding:16px; }

/* ── 首页统计卡 ── */
.stats-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:2px 0 14px; }
.stat-card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow-card);
  padding:18px 16px; border:1px solid var(--border-soft);
}
.stat-value,.stat-num{ font-size:34px; font-weight:800; line-height:1.1; color:var(--primary); margin-bottom:5px; }
.stat-value[style*="color"],.stat-num[style*="color"]{ color:inherit; }
.stat-label{ font-size:13px; color:var(--text-light); font-weight:500; }
.stat-card .stat-icon{ font-size:18px; margin-bottom:2px; }

/* ── 按钮：清晰柔和 ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 20px; border-radius:12px; font-size:14px; font-weight:600;
  border:none; cursor:pointer; text-decoration:none; min-height:44px;
  transition:opacity .15s, transform .1s;
}
.btn:active{ opacity:.8; transform:scale(.97); }
.btn-primary{ background:var(--primary); color:#fff; box-shadow:0 2px 6px rgba(37,99,235,.25); }
.btn-success{ background:var(--success); color:#fff; }
.btn-warning{ background:var(--warning); color:#fff; }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-outline{ background:#fff; border:1.5px solid var(--border); color:var(--text); }
.btn-outline:active{ background:var(--bg); }
.btn-block{ width:100%; }
.btn-sm{ padding:6px 14px; font-size:13px; min-height:auto; border-radius:10px; }
.btn-group{ display:flex; gap:8px; flex-wrap:wrap; }

/* ── 表单 ── */
.form-group{ margin-bottom:14px; }
.form-group label{ display:block; font-size:13px; font-weight:600; color:var(--text); margin-bottom:6px; }
.form-control{
  width:100%; padding:11px 13px; border:1.5px solid var(--border);
  border-radius:12px; font-size:15px; background:#fff; min-height:46px;
  transition:border-color .15s, box-shadow .15s;
}
.form-control:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
textarea.form-control{ min-height:84px; resize:vertical; }
select.form-control{ appearance:auto; }

/* ── 列表项 ── */
.list-item{
  display:flex; align-items:center; padding:14px 16px;
  border-bottom:1px solid var(--border-soft); text-decoration:none; color:var(--text);
}
.list-item:last-child{ border-bottom:none; }
.list-item:active{ background:var(--bg-soft); }
.item-main{ flex:1; min-width:0; }
.item-title{ font-size:15px; font-weight:600; margin-bottom:3px; }
.item-sub{ font-size:12px; color:var(--text-light); }
.item-right{ text-align:right; flex-shrink:0; margin-left:8px; }
.item-badge{
  display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600;
}
.badge-pending{ background:#fef3c7; color:#92400e; }
.badge-approved{ background:#dcfce7; color:#166534; }
.badge-rejected{ background:#fee2e2; color:#991b1b; }
.badge-shipped{ background:#dbeafe; color:#1e40af; }
.badge-signed{ background:#e0e7ff; color:#3730a3; }
.badge-pass{ background:#dcfce7; color:#166534; }
.badge-fail{ background:#fee2e2; color:#991b1b; }

/* ── 状态徽章 chips（清晰可读） ── */
.st{ display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; line-height:1.4; }
.st::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.st-done{ background:#dcfce7; color:#166534; }
.st-run{ background:#dbeafe; color:#1e40af; }
.st-wait{ background:#eef2f6; color:#64748b; }
.st-reject{ background:#fee2e2; color:#b91c1c; }
.st-warn{ background:#fef3c7; color:#b45309; }

/* ── 细进度条 ── */
.pbar{ height:7px; background:#eef2f6; border-radius:7px; overflow:hidden; position:relative; }
.pbar>i{ display:block; height:100%; border-radius:7px; background:var(--primary); transition:width .4s ease; }
.pbar.p-done>i{ background:var(--success); }
.pbar.p-warn>i{ background:var(--warning); }

/* ── Flash 消息 ── */
.flash{
  padding:12px 16px; border-radius:12px; margin-bottom:12px; font-size:14px; font-weight:500;
  border:1px solid transparent;
}
.flash-success{ background:#f0fdf4; color:#166534; border-color:#bbf7d0; }
.flash-danger{ background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.flash-warning{ background:#fffbeb; color:#92400e; border-color:#fde68a; }

/* ── 详情行 ── */
.detail-row{ display:flex; padding:10px 0; border-bottom:1px solid var(--border-soft); }
.detail-label{ width:96px; flex-shrink:0; font-size:13px; color:var(--text-light); font-weight:500; }
.detail-value{ flex:1; font-size:14px; color:var(--text); }

/* ── 流程步骤 ── */
.progress-steps{ display:flex; padding:14px 8px; gap:2px; }
.progress-step{ flex:1; text-align:center; font-size:11px; color:var(--text-light); position:relative; }
.progress-step .dot{
  width:26px; height:26px; border-radius:50%; background:#e3e8ef;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; margin-bottom:5px; color:#fff;
}
.progress-step.active .dot{ background:var(--primary); }
.progress-step.done .dot{ background:var(--success); }
.progress-step.fail .dot{ background:var(--danger); }

/* ── 表格 ── */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table{ width:100%; border-collapse:collapse; font-size:13px; }
table th,table td{ padding:11px 12px; text-align:left; white-space:nowrap; }
table thead th{ background:#f8fafc; color:var(--text-light); font-size:12px; font-weight:700; }
table tbody tr{ border-bottom:1px solid var(--border-soft); }
table tbody tr:active{ background:var(--bg-soft); }

/* ── 空状态 ── */
.empty-state{ text-align:center; padding:44px 24px; color:var(--text-light); border-radius:var(--radius); }
.empty-state .icon{ font-size:48px; margin-bottom:12px; display:block; }
.empty-state p{ font-size:14px; }

/* ── 页面标题 ── */
.page-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.page-header h2{ font-size:19px; font-weight:800; }

/* ── 角色标记 ── */
.role-tag{ display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600; }
.role-admin{ background:#e0e7ff; color:#3730a3; }
.role-sales{ background:#dbeafe; color:#1e40af; }
.role-market{ background:#fef3c7; color:#92400e; }
.role-warehouse{ background:#dcfce7; color:#166534; }
.role-marketer{ background:#f3e8ff; color:#6b21a8; }
.role-general_manager{ background:#ffedd5; color:#9a3412; }
.role-finance{ background:#fce4ec; color:#9b1c1c; }
.role-quality{ background:#ccfbf1; color:#0f766e; }
.role-hr{ background:#ffedd5; color:#c2410c; }
.role-workshop{ background:#f1f5f9; color:#475569; }
.role-logistics{ background:#e0f2fe; color:#0369a1; }
.role-rd{ background:#ede9fe; color:#6d28d9; }
.role-procurement{ background:#fce7f3; color:#9d174d; }

/* ── 分析页 ── */
.ana-tabs{
  display:flex; gap:4px; overflow-x:auto; background:#fff; border-radius:12px;
  margin-bottom:14px; padding:4px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  box-shadow:var(--shadow-card);
}
.ana-tabs::-webkit-scrollbar{ display:none; }
.ana-tabs a{
  flex-shrink:0; padding:9px 14px; text-decoration:none; font-size:13px;
  font-weight:600; color:var(--text-light); border-radius:9px;
}
.ana-tabs a.active{ background:var(--brand-soft); color:var(--primary); font-weight:700; }
.ana-stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.ana-stat{ background:#fff; border-radius:12px; padding:16px; text-align:center; box-shadow:var(--shadow-card); }
.ana-stat .num{ font-size:24px; font-weight:800; color:var(--primary); }
.ana-stat .label{ font-size:11px; color:var(--text-light); margin-top:3px; }
.bar-chart{ padding:12px 16px; }
.bar-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.bar-label{ width:72px; flex-shrink:0; font-size:12px; color:var(--text); text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-track{ flex:1; height:20px; background:#f1f5f9; border-radius:10px; overflow:hidden; }
.bar-fill{ height:100%; border-radius:10px; background:var(--primary); transition:width .4s ease; min-width:4px; }
.bar-val{ font-size:12px; font-weight:700; color:var(--text); min-width:30px; text-align:right; }
.rank-list{ list-style:none; }
.rank-list li{ display:flex; align-items:center; padding:11px 16px; border-bottom:1px solid var(--border-soft); gap:10px; }
.rank-list li:last-child{ border-bottom:none; }
.rank-num{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex-shrink:0; }
.rank-1{ background:#fef3c7; color:#d97706; }
.rank-2{ background:#e2e8f0; color:#475569; }
.rank-3{ background:#fde68a; color:#92400e; }
.rank-n{ background:#f1f5f9; color:#94a3b8; }

/* ── 流程总览 ── */
.flow-overview{ display:flex; align-items:center; justify-content:center; gap:2px; padding:0 4px; }
.flow-node{ flex:1; text-align:center; background:#f8fafc; border-radius:10px; padding:7px 2px; border:1.5px solid var(--border); max-width:92px; }
.flow-node .fn-icon{ font-size:22px; margin-bottom:2px; }
.flow-node .fn-label{ font-size:11px; font-weight:700; color:var(--text); line-height:1.3; }
.flow-node .fn-role{ font-size:10px; color:var(--text-light); margin-top:1px; }
.flow-arrow{ font-size:16px; color:var(--text-light); flex-shrink:0; padding:0 2px; }

/* ── 敏感信息 ── */
.sensitive-hidden{ filter:blur(4px); user-select:none; }

/* ── 角标 / 加载条 / 下拉刷新 ── */
.tab-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  background:#ef4444; color:#fff; font-size:10px; font-weight:700; line-height:1;
  margin-left:3px; vertical-align:middle; position:relative; top:-1px;
}
#topprog{ position:fixed; top:0; left:0; height:3px; width:0; z-index:9999; border-radius:0 3px 3px 0; opacity:0; transition:opacity .3s; }
#ptr-ind{
  position:fixed; top:112px; left:50%; transform:translate(-50%,-30px);
  background:rgba(30,41,59,.86); color:#fff; font-size:12px; padding:7px 16px;
  border-radius:22px; z-index:999; opacity:0; transition:opacity .18s,transform .18s;
  pointer-events:none; box-shadow:var(--shadow-lift);
}
#ptr-ind.on{ opacity:1; transform:translate(-50%,0); }
#ptr-ind .spin{ display:inline-block; margin-right:6px; animation:ptrSpin .8s linear infinite; }
@keyframes ptrSpin{ to{ transform:rotate(360deg); } }

/* ── 移动端 ── */
@media (max-width:640px){
  .container{ padding:12px 10px 24px; }
  .top-bar{ padding:10px 12px; }
  .top-bar h1{ font-size:16px; }
  .tab-nav{ padding:7px 8px; top:50px; }
  .card{ border-radius:13px; }
  .form-control,.form-group input,.form-group select,.form-group textarea{ font-size:15px; min-height:46px; }
  .btn{ min-height:46px; font-size:15px; }
  .page-header h2{ font-size:18px; }
  .stat-value,.stat-num{ font-size:30px; }
}

/* ═══════════════════════════════════════════════════════════
   详情/子页面统一样式（客户/样品/产品详情共用）
   ═══════════════════════════════════════════════════════════ */
/* 返回链接 */
.back-link{
  display:inline-flex; align-items:center; gap:4px;
  color:var(--text-light); text-decoration:none; font-size:13px; font-weight:500;
  margin-bottom:10px; padding:4px 10px 4px 4px; border-radius:8px;
}
.back-link:active{ background:var(--bg); }
.detail-hero{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }

/* Tag 徽章（详情头/列表用） */
.tag{ display:inline-block; padding:2px 10px; border-radius:20px; font-size:11px; font-weight:600; vertical-align:middle; }
.tag-info{ background:#dbeafe; color:#1e40af; }
.tag-success,.tag-done,.tag-approved,.tag-pass{ background:#dcfce7; color:#166534; }
.tag-warning,.tag-pending{ background:#fef3c7; color:#92400e; }
.tag-danger,.tag-rejected,.tag-fail{ background:#f1f5f9; color:#64748b; }

/* 详情信息网格 */
.detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4px 18px; }
.detail-field{ padding:9px 0; border-bottom:1px solid var(--border-soft); }
.detail-grid > .detail-field:nth-last-child(-n+2){ border-bottom:none; }
.field-label{ font-size:12px; color:var(--text-light); font-weight:500; margin-bottom:2px; }
.field-value{ font-size:14px; color:var(--text); word-break:break-word; }

/* 进度条（产品详情） */
.progress-bar{ width:100%; background:#eef2f6; border-radius:20px; overflow:hidden; position:relative; }
.progress-bar-fill{ background:var(--primary); border-radius:20px; transition:width .5s ease; }
.progress-bar-fill.green{ background:var(--success); }
.progress-bar-fill.orange{ background:var(--warning); }

/* 里程碑（产品详情） */
.milestones{ margin-top:6px; }
.milestone{
  display:flex; align-items:center; gap:6px; padding:10px 12px; margin:6px 0;
  background:var(--bg-soft); border:1px solid var(--border-soft); border-radius:10px;
  font-size:13px; color:var(--text-light);
}
.milestone.done{ background:#f0fdf4; border-color:#bbf7d0; color:#166534; }

/* 审批流程节点（样品详情等） */
.approval-flow{ display:flex; flex-direction:column; gap:8px; }
.approval-node{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; background:var(--bg-soft); border:1.5px solid var(--border);
  border-radius:12px;
}
.approval-node .node-label{ font-size:13px; font-weight:600; color:var(--text); }
.approval-node .node-status{ font-size:12px; font-weight:600; color:var(--text-light); }
.approval-node.passed{ background:#f0fdf4; border-color:#86efac; }
.approval-node.passed .node-status{ color:#16a34a; }
.approval-node.rejected{ background:#fef2f2; border-color:#fecaca; }
.approval-node.rejected .node-status{ color:#dc2626; }
.approval-node.pending{ border-style:dashed; }

/* 子页卡片内小块标题 */
.sub-title{ font-size:14px; font-weight:700; color:var(--text); margin:16px 0 8px; }

/* 列表内链接 */
.table-wrap tbody a{ color:var(--primary); text-decoration:none; font-weight:600; }
.table-wrap tbody a:active{ text-decoration:underline; }

@media (max-width:640px){
  .detail-grid{ grid-template-columns:1fr; }
  .detail-hero{ flex-direction:column; align-items:flex-start; }
}

/* ═══════════════════════════════════════════════════════════
   列表卡片共用样式（研发/立项/样品列表统一视觉）
   ═══════════════════════════════════════════════════════════ */
.pcard{background:#fff;border-radius:12px;margin-bottom:8px;box-shadow:var(--shadow-card);overflow:hidden;position:relative;}
.pcard > a{text-decoration:none;color:inherit;display:block;padding:12px 14px 6px;}
.pcard-body{display:flex;align-items:flex-start;gap:10px;}
.pcard-left{flex:1;min-width:0;}
.pcard-name{font-size:15px;font-weight:700;color:#1e293b;line-height:1.3;}
.pcard-name .pid{font-size:10px;color:#94a3b8;font-weight:400;margin-left:4px;}
.pcard-meta{font-size:12px;color:#64748b;margin-top:4px;display:flex;flex-wrap:wrap;gap:3px 10px;}
.pcard-meta b{font-weight:700;color:#334155;}
.pcard-status{position:absolute;right:12px;top:12px;font-size:11px;font-weight:700;padding:2px 10px;border-radius:12px;letter-spacing:.2px;display:inline-flex;align-items:center;gap:4px;}
.pcard-status.done{background:#dcfce7;color:#15803d;}
.pcard-status.running,.pcard-status.approved,.pcard-status.info{background:#dbeafe;color:#1d4ed8;}
.pcard-status.paused{background:#f1f5f9;color:#64748b;}
.pcard-status.waiting,.pcard-status.pending{background:#fef3c7;color:#b45309;}
/* 已撤销/已驳回 → 一律灰色，不做彩色强调 */
.pcard-status.rejected{background:#f1f5f9;color:#64748b;}
.pcard-desc{font-size:12px;color:#64748b;margin-top:6px;line-height:1.5;padding-right:6px;}
.pcard-foot{padding:2px 14px 10px;}
.pcard-process{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-top:6px;}
.proc-step{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#64748b;background:#f1f5f9;border-radius:12px;padding:3px 9px;}
.proc-step.ok{background:#dcfce7;color:#15803d;}
.proc-step.no{background:#fee2e2;color:#b91c1c;}
.proc-step.todo{background:#fff;border:1px dashed #cbd5e1;}
/* 红点脉冲（审批中/未完成） */
.todo-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#ef4444;vertical-align:middle;animation:tdPulse 1.2s infinite;flex-shrink:0;}
@keyframes tdPulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.6);}70%{box-shadow:0 0 0 7px rgba(239,68,68,0);}100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}}
/* 分组头 */
.sec-header{display:flex;align-items:center;gap:8px;padding:12px 4px 6px;}
.sec-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.sec-title{font-size:14px;font-weight:700;color:#1e293b;}
.sec-count{font-size:12px;color:#94a3b8;font-weight:400;}
.sec-subtitle{font-size:12px;font-weight:600;color:#64748b;padding:6px 4px 2px;display:flex;align-items:center;gap:4px;}
/* 列表页上方操作条 */
.action-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 0 10px;}

/* 列表页分类标签栏 + 分组区块 */
.tab-scroll{display:flex;gap:6px;overflow-x:auto;padding:6px 2px 10px;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.tab-scroll::-webkit-scrollbar{display:none;}
.tab-btn{border:1px solid var(--border,#e2e8f0);background:#fff;color:#475569;padding:7px 14px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;flex-shrink:0;}
.tab-btn.active{background:var(--primary,#2563eb);color:#fff;border-color:var(--primary,#2563eb);}
.tab-btn .cnt{font-size:10px;background:rgba(0,0,0,.1);border-radius:10px;padding:1px 6px;margin-left:3px;font-weight:400;}
.tab-btn.active .cnt{background:rgba(255,255,255,.25);}
.list-section{padding:0 2px;}

/* ═══════════════════════════════════════════════════════════
   流程进度时间轴（研发/立项/样品通用 · 标识卡在哪个节点）
   ═══════════════════════════════════════════════════════════ */
.flow-tl{display:flex;align-items:flex-start;justify-content:space-between;gap:0;padding:8px 2px 4px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.ftl-node{flex:1;min-width:52px;display:flex;flex-direction:column;align-items:center;position:relative;padding:2px;}
.ftl-node::before{content:'';position:absolute;top:9px;left:-50%;width:100%;height:2px;background:#e2e8f0;z-index:1;}
.ftl-node:first-child::before{display:none;}
.ftl-dot{width:16px;height:16px;border-radius:50%;background:#e2e8f0;border:2px solid #fff;box-shadow:0 0 0 1.5px #e2e8f0;z-index:2;margin-bottom:3px;flex-shrink:0;}
.ftl-node.done::before{background:#86efac;}
.ftl-node.done .ftl-dot{background:var(--success,#16a34a);box-shadow:0 0 0 1.5px #bbf7d0;}
.ftl-node.cur::before{background:#93c5fd;}
.ftl-node.cur .ftl-dot{background:var(--primary,#2563eb);box-shadow:0 0 0 1.5px #bfdbfe;animation:ftlPulse 1.2s infinite;}
.ftl-node.reject .ftl-dot{background:#cbd5e1;box-shadow:0 0 0 1.5px #e2e8f0;}
.ftl-node.todo::before{background:#e2e8f0;}
.ftl-label{font-size:10px;color:#475569;white-space:nowrap;text-align:center;line-height:1.15;}
.ftl-label small{display:block;font-size:8px;color:#94a3b8;font-weight:400;}
@keyframes ftlPulse{0%{box-shadow:0 0 0 0 rgba(37,99,235,.5),0 0 0 1.5px #bfdbfe;}70%{box-shadow:0 0 0 9px rgba(37,99,235,0),0 0 0 1.5px #bfdbfe;}100%{box-shadow:0 0 0 0 rgba(37,99,235,0),0 0 0 1.5px #bfdbfe;}}
/* 卡在当前节点横幅 */
.flow-banner{display:flex;align-items:center;gap:6px;background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;font-size:12px;border-radius:8px;padding:5px 10px;margin:2px 2px 2px;}
.flow-banner.done{background:#f0fdf4;border-color:#bbf7d0;color:#166534;}
.flow-banner.muted{background:#f8fafc;border-color:#e2e8f0;color:#64748b;}
.flow-banner .fb-dot{width:9px;height:9px;border-radius:50%;background:var(--primary,#2563eb);flex-shrink:0;animation:ftlPulse .9s infinite;}

/* ═══════════ 搜索/筛选栏（.search-bar）v13 ═══════════ */
.search-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:10px;margin:0 0 14px;box-shadow:0 1px 2px rgba(15,23,42,.04);}
.search-bar input[type=text],.search-bar input[type=search],.search-bar input:not([type]){
  flex:1 1 200px;min-width:150px;padding:9px 12px 9px 36px;border:1px solid #e2e8f0;border-radius:10px;
  font-size:14px;color:var(--text,#1e293b);background:#f8fafc url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%2394a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>') no-repeat 12px center;background-size:16px;transition:border-color .15s,box-shadow .15s,background .15s;}
.search-bar input:focus{outline:none;border-color:var(--primary,#2563eb);background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%232563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>') no-repeat 12px center;background-size:16px;box-shadow:0 0 0 3px rgba(37,99,235,.12);}
.search-bar select{padding:9px 30px 9px 12px;border:1px solid #e2e8f0;border-radius:10px;font-size:14px;color:var(--text,#1e293b);background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') no-repeat right 10px center;background-size:14px;appearance:none;-webkit-appearance:none;cursor:pointer;transition:border-color .15s,box-shadow .15s;min-width:110px;}
.search-bar select:focus{outline:none;border-color:var(--primary,#2563eb);box-shadow:0 0 0 3px rgba(37,99,235,.12);}
.search-bar .btn{padding:9px 16px;border-radius:10px;white-space:nowrap;}
.search-bar .filter-count{margin-left:auto;font-size:12.5px;color:var(--text-light,#64748b);background:#f1f5f9;padding:7px 12px;border-radius:10px;white-space:nowrap;}
.search-bar .filter-count b{color:var(--primary,#2563eb);font-weight:700;}
@media(max-width:640px){.search-bar input[type=text],.search-bar input:not([type]){flex:1 1 100%;}.search-bar .filter-count{margin-left:0;}}

/* ═══════════ 申请/新增类表单美化 v14 ═══════════ */
.form-hero{padding:16px 18px;border-radius:14px;margin-bottom:14px;background:linear-gradient(120deg,rgba(37,99,235,.08),rgba(37,99,235,.02));border:1px solid rgba(37,99,235,.14);}
.form-hero h3{margin:0;font-size:18px;font-weight:700;color:#1e293b;display:flex;align-items:center;gap:8px;}
.form-hero p{margin:4px 0 0;font-size:12.5px;color:#64748b;line-height:1.5;}
.form-section{display:flex;align-items:center;gap:8px;margin:20px 0 12px;padding-bottom:8px;border-bottom:1.5px solid #eef2f7;font-size:14px;font-weight:700;color:#1e293b;}
.form-section:first-of-type{margin-top:0;}
.form-section .sec-ic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#eff6ff;color:#2563eb;font-size:14px;flex-shrink:0;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:640px){.form-row{grid-template-columns:1fr;}}
.form-group{margin-bottom:12px;}
.form-group label{display:block;font-size:13px;font-weight:600;color:#1e293b;margin-bottom:6px;}
.form-group .req{color:#dc2626;margin-left:2px;}
.form-hint{font-size:12px;color:#94a3b8;margin-top:5px;line-height:1.45;}
/* 表单输入控件（作用于 .card-body 内的裸 input/select/textarea） */
.card-body input[type=text],.card-body input:not([type]),.card-body input[type=tel],.card-body input[type=number],
.card-body select,.card-body textarea{
  width:100%;padding:11px 13px;border:1.5px solid #e2e8f0;border-radius:12px;font-size:15px;
  background:#fff;min-height:46px;color:#1e293b;transition:border-color .15s,box-shadow .15s,background .15s;
  box-sizing:border-box;
}
.card-body input:focus,.card-body select:focus,.card-body textarea:focus{
  outline:none;border-color:#2563eb;background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.card-body textarea{min-height:92px;resize:vertical;}
.form-actions{display:flex;gap:10px;padding:12px 2px;margin-top:area 6px;}
.form-actions{position:sticky;bottom:0;gap:10px;padding:12px;margin:6px -18px -18px;background:rgba(248,250,252,.94);backdrop-filter:blur(6px);border-top:1px solid #eef2f7;border-radius:0 0 14px 14px;}
.form-actions .btn{padding:11px 22px;border-radius:12px;min-height:44px;}

/* ═══════════════════════════════════════════════
   移动端人性化/美化增强 v15（主流手机屏 < 600px）
   · 更大触控目标 · 更柔更圆按钮 · 刘海安全区 · 留白呼吸
   ═══════════════════════════════════════════════ */
.btn{
  min-height:46px;
  letter-spacing:.2px;
  box-shadow:0 2px 6px rgba(22,33,62,.06);
  transition:opacity .15s, transform .1s, box-shadow .15s;
}
.btn-primary{ box-shadow:0 3px 10px rgba(37,99,235,.28); }
.btn:active{ transform:scale(.96); }
.btn-sm{ min-height:38px; gap:5px; }

/* iPhone 刘海安全区适配（桌面宽度不受影响） */
@supports(padding:max(0px)){
  .top-bar{
    padding-left:max(14px,env(safe-area-inset-left));
    padding-right:max(14px,env(safe-area-inset-right));
  }
  .container{
    padding-left:max(12px,env(safe-area-inset-left));
    padding-right:max(12px,env(safe-area-inset-right));
    padding-bottom:max(32px,env(safe-area-inset-bottom));
  }
  .form-actions{ padding-bottom:max(12px,env(safe-area-inset-bottom)); }
}

/* 首页统计：更圆更柔 */
.stat-card{ border-radius:18px; padding:20px 18px; box-shadow:var(--shadow-card); }

/* ============ 主流手机屏 < 600px ============ */
@media (max-width:600px){
  /* 顶栏：自动换行、不拥挤 */
  .top-bar{ flex-wrap:wrap; gap:6px 10px; padding:12px 12px; align-items:center; }
  .top-bar h1{ font-size:16px; }
  .top-bar .right-wrap{ margin-left:auto; }
  .top-bar .user-badge{ max-width:104px; font-size:11px; padding:4px 10px; }

  /* 按钮：整块化 + 更舒服的触控区 */
  .btn{ min-height:48px; font-size:15px; border-radius:14px; }
  .btn-sm{ min-height:44px; font-size:14px; padding:8px 16px; border-radius:12px; }
  .form-actions{ position:sticky; bottom:0; gap:12px; padding:12px; }
  .form-actions .btn{ flex:1; min-height:50px; font-size:15px; }
  .btn-group .btn{ flex:1; }

  /* 卡片留白呼吸 */
  .card-body{ padding:18px; }
  .card-header{ padding:16px 18px 12px; }

  /* 流程卡脚操作按钮：两列整块、好点易触 */
  .pcard-foot .btn-sm{ flex:1; min-width:0; justify-content:center; }
  .pcard-foot form[method=POST]{ display:flex; }
  .pcard-foot form button[type=submit]{ flex:1; min-height:44px; flex:1 1 0; }
  .pcard-foot form input[type=text]{ min-height:46px; font-size:16px; }

  /* 表单输入：16px 防 iOS 聚焦自动放大 */
  .card-body input[type=text],.card-body input:not([type]),.card-body input[type=tel],
  .card-body input[type=number],.card-body input[type=date],.card-body select,.card-body textarea,
  .form-control{
    min-height:48px; font-size:16px;
  }
  .card-body input[type=date]{ font-size:15px; }
  textarea.form-control{ min-height:96px; }

  /* 导航标签更大更易点 */
  .tab-nav{ padding:8px 8px; }
  .tab-row a{ padding-top:11px; padding-bottom:9px; font-size:13px; }
  .tab-row a .tab-icon{ font-size:22px; }

  /* 列表项 / 详情行 更大触控与行距 */
  .list-item{ padding:15px 16px; }
  .item-title{ font-size:16px; }
  .item-sub{ font-size:13px; }
  .detail-row{ padding:12px 2px; }
  .detail-label{ width:104px; }
  .detail-value{ font-size:15px; }

  /* 空状态 */
  .empty-state{ padding:52px 24px; }

  /* 表格横向滑动更顺滑 */
  .table-wrap{ -webkit-overflow-scrolling:touch; }
  table th,table td{ padding:13px 12px; font-size:14px; }

  /* 首页统计卡两列更透气 */
  .stats-grid{ gap:12px; }
}

/* ═══ 五部门并行审批：清爽卡片网格 v16 ═══ */
.approval-flow{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:10px;
}
.approval-node{
  padding:13px 14px; background:var(--bg-soft); border:1.5px solid var(--border);
  border-radius:14px; display:flex; flex-direction:column; gap:9px;
}
.approval-node.passed{ background:#f0fdf4; border-color:#86efac; }
.approval-node.rejected{ background:#fef2f2; border-color:#fecaca; }
.approval-node.pending{ border-style:dashed; }
.approval-node .node-label,
.approval-node .node-status{ display:none; }
.an-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.an-title{ font-size:14px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:6px; }
.an-badge{ font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap; }
.an-badge.p{ background:#fef3c7; color:#b45309; }
.an-badge.a{ background:#dcfce7; color:#166534; }
.an-badge.r{ background:#fee2e2; color:#b91c1c; }
.an-comment{ font-size:12px; color:#6b7280; background:#fff; border:1px solid var(--border-soft); border-radius:8px; padding:7px 10px; word-break:break-all; }
.an-actions{ display:flex; flex-direction:column; gap:8px; margin-top:auto; }
.an-remind{ width:100%; }
.an-remind .btn{ width:100%; min-height:38px; justify-content:center; }
.an-approve{ display:flex; flex-direction:column; gap:8px; }
.an-approve input{ width:100%; padding:9px 11px; border:1.5px solid var(--border); border-radius:10px; font-size:13px; min-height:40px; background:#fff; box-sizing:border-box; }
.an-approve .an-btns{ display:flex; gap:8px; }
.an-approve .an-btns .btn{ flex:1; min-height:42px; justify-content:center; }
@media(max-width:560px){ .approval-flow{ grid-template-columns:1fr; } }

/* ── 下拉式导航菜单 ── */
.nav-hd{ display:flex; align-items:center; gap:8px; min-height:38px; }
.nav-hamburger{ background:rgba(37,99,235,.08); border:none; color:var(--brand,#2563eb); font-size:20px; cursor:pointer; padding:4px 12px; border-radius:10px; min-height:38px; line-height:1; }
.nav-current{ flex:1; font-size:15px; font-weight:600; color:#1e293b; display:flex; align-items:center; gap:4px; }
.nav-caret{ cursor:pointer; color:#94a3b8; font-size:13px; padding:2px 6px; }
.tab-dropdown{ position:absolute; left:8px; right:8px; top:calc(100% + 6px); z-index:120; background:#fff; border:1px solid var(--border,#e2e8f0); border-radius:14px; box-shadow:0 14px 34px rgba(15,23,42,.16); padding:8px; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.tab-drop-item{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 6px 10px; border-radius:11px; color:#475569; text-decoration:none; font-size:13px; font-weight:600; transition:background .15s; }
.tab-drop-item .tab-icon{ font-size:22px; line-height:1.2; }
.tab-drop-item:hover{ background:#f1f5f9; }
.tab-drop-item.active{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ grid-template-columns:repeat(2,1fr); padding:10px; } .tab-drop-item{ padding:15px 6px; font-size:14px; } }

/* ── 下拉导航-纯文字版 ── */
.tab-dropdown{ grid-template-columns:1fr; padding:8px; gap:4px; max-height:min(70vh,470px); overflow-y:auto; }
.tab-drop-item{ flex-direction:row; justify-content:center; padding:13px 10px; border-radius:10px; font-size:14px; letter-spacing:.5px; }
.tab-drop-item .tab-icon{ display:none; }
.tab-drop-item:hover{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ grid-template-columns:1fr; padding:8px; } .tab-drop-item{ padding:16px 10px; font-size:15px; min-height:48px; } }

/* ── 下拉导航-紧凑双列纯文字 ── */
.tab-dropdown{ grid-template-columns:repeat(2,1fr) !important; gap:4px; padding:6px; max-height:min(60vh,430px); overflow-y:auto; }
.tab-drop-item{ flex-direction:column; justify-content:center; padding:8px 4px; border-radius:8px; font-size:12px; color:#475569; }
.tab-drop-item .tab-icon{ display:none !important; }
.tab-drop-item .tab-label{ line-height:1.2; }
.tab-drop-item:hover{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ grid-template-columns:repeat(2,1fr); gap:4px; padding:6px; } .tab-drop-item{ padding:9px 4px; font-size:12px; } }

/* ── 下拉导航-单列左对齐紧凑 ── */
.tab-dropdown{ grid-template-columns:1fr !important; gap:2px; padding:5px; max-height:min(58vh,400px); overflow-y:auto; }
.tab-drop-item{ flex-direction:row; justify-content:flex-start; align-items:center; padding:8px 12px; border-radius:7px; font-size:13px; color:#475569; }
.tab-drop-item .tab-icon{ display:none !important; }
.tab-drop-item:active{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ grid-template-columns:1fr; gap:2px; padding:5px; } .tab-drop-item{ padding:10px 12px; font-size:13px; } }

/* ── 下拉导航-行高-30% ── */
.tab-drop-item{ padding-top:6px !important; padding-bottom:6px !important; }
@media (max-width:640px){ .tab-drop-item{ padding:7px 12px !important; } }

/* ── 下拉导航-行高再缩 ── */
.tab-drop-item{ padding-top:4px !important; padding-bottom:4px !important; }
@media (max-width:640px){ .tab-drop-item{ padding:5px 12px !important; } }
/* ═══════════════════════════════════════════════════════════
   辉科食品 CRM — 移动端界面 v9
   设计理念：人性化 · 简单明了 · 清晰好读
   · 柔和配色、干净层级、友好文案、轻量微交互
   ═══════════════════════════════════════════════════════════ */
:root {
  /* 品牌 & 状态（柔和、清晰） */
  --primary:#2563eb; --primary-dark:#1d4ed8;
  --brand:#2563eb; --brand-soft:#eef2ff;
  --success:#16a34a; --warning:#ea580c; --danger:#dc2626;
  /* 状态色：✅绿=完成 / 🔵蓝=进行中 / ⚪灰=未开始 / 🔴红=驳回 */
  --st-done:#16a34a; --st-run:#2563eb; --st-wait:#94a3b8; --st-reject:#dc2626; --st-warn:#d97706;
  /* 中性 */
  --bg:#f2f4f8; --bg-soft:#f7f9fc;
  --card:#ffffff; --text:#1f2a3d; --text-light:#6b7a90; --text-secondary:#6b7a90;
  --border:#e3e8ef; --border-soft:#eef2f6;
  /* 圆角 / 阴影（柔和） */
  --radius:14px; --radius-sm:10px;
  --shadow-card:0 1px 2px rgba(22,33,62,.05),0 2px 8px rgba(22,33,62,.05);
  --shadow-lift:0 8px 24px rgba(30,45,90,.10);
}
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  background:var(--bg); color:var(--text); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{ -webkit-tap-highlight-color:transparent; }

/* ── 顶部栏：清爽品牌色 ── */
.top-bar{
  position:sticky; top:0; z-index:100;
  background:linear-gradient(135deg,#2563eb,#4338ca);
  color:#fff; padding:13px 16px;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 3px 12px rgba(37,99,235,.20);
}
.top-bar h1{ font-size:17px; font-weight:700; }
.top-bar .right-wrap{ display:flex; align-items:center; gap:8px; }
.top-bar .right-wrap a{ color:#fff; text-decoration:none; font-size:13px; }
.top-bar .right-wrap a:active{ opacity:.6; }
.top-bar .user-badge{
  background:rgba(255,255,255,.2); padding:4px 12px; border-radius:20px;
  font-size:12px; font-weight:600; max-width:150px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.top-bar .notif-icon{
  position:relative; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; font-size:18px;
  cursor:pointer;
}
.top-bar .notif-icon:active{ opacity:.7; }
.top-bar .notif-icon .badge{
  position:absolute; top:-3px; right:-3px; background:#ef4444; color:#fff;
  border-radius:50%; min-width:19px; height:19px; font-size:10px; font-weight:700;
  display:none; align-items:center; justify-content:center; padding:0 4px; border:2px solid #fff;
}

/* ── 导航：简洁双排 ── */
.tab-nav{
  position:sticky; top:52px; z-index:99;
  background:rgba(255,255,255,.96); border-bottom:1px solid var(--border);
  box-shadow:0 1px 3px rgba(22,33,62,.04);
  padding:8px 10px;
}
.tab-row{ display:flex; gap:6px; }
.tab-row + .tab-row{ margin-top:5px; }
.tab-row a{
  flex:1; min-width:0; text-align:center; padding:9px 4px 7px;
  text-decoration:none; font-size:12px; font-weight:500; color:var(--text-light);
  border-radius:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:background .15s,color .15s;
}
.tab-row a:active{ background:#f1f5f9; }
.tab-row a.active{ background:var(--brand); color:#fff; font-weight:600; }
.tab-row a .tab-icon{ font-size:20px; display:block; margin-bottom:2px; line-height:1.2; }
.tab-row a.active .tab-badge{ background:#fff; color:#ef4444; }

/* ── 内容区 ── */
.container{ max-width:520px; margin:0 auto; padding:14px 12px 30px; }

/* ── 卡片：干净白卡 ── */
.card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow-card);
  margin-bottom:14px; overflow:hidden; border:1px solid var(--border-soft);
}
.card-header{
  padding:15px 16px 11px; font-size:15px; font-weight:700; color:var(--text);
  border-bottom:1px solid var(--border-soft); display:flex; align-items:center; gap:8px;
}
.card-body{ padding:16px; }

/* ── 首页统计卡 ── */
.stats-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:2px 0 14px; }
.stat-card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow-card);
  padding:18px 16px; border:1px solid var(--border-soft);
}
.stat-value,.stat-num{ font-size:34px; font-weight:800; line-height:1.1; color:var(--primary); margin-bottom:5px; }
.stat-value[style*="color"],.stat-num[style*="color"]{ color:inherit; }
.stat-label{ font-size:13px; color:var(--text-light); font-weight:500; }
.stat-card .stat-icon{ font-size:18px; margin-bottom:2px; }

/* ── 按钮：清晰柔和 ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 20px; border-radius:12px; font-size:14px; font-weight:600;
  border:none; cursor:pointer; text-decoration:none; min-height:44px;
  transition:opacity .15s, transform .1s;
}
.btn:active{ opacity:.8; transform:scale(.97); }
.btn-primary{ background:var(--primary); color:#fff; box-shadow:0 2px 6px rgba(37,99,235,.25); }
.btn-success{ background:var(--success); color:#fff; }
.btn-warning{ background:var(--warning); color:#fff; }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-outline{ background:#fff; border:1.5px solid var(--border); color:var(--text); }
.btn-outline:active{ background:var(--bg); }
.btn-block{ width:100%; }
.btn-sm{ padding:6px 14px; font-size:13px; min-height:auto; border-radius:10px; }
.btn-group{ display:flex; gap:8px; flex-wrap:wrap; }

/* ── 表单 ── */
.form-group{ margin-bottom:14px; }
.form-group label{ display:block; font-size:13px; font-weight:600; color:var(--text); margin-bottom:6px; }
.form-control{
  width:100%; padding:11px 13px; border:1.5px solid var(--border);
  border-radius:12px; font-size:15px; background:#fff; min-height:46px;
  transition:border-color .15s, box-shadow .15s;
}
.form-control:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
textarea.form-control{ min-height:84px; resize:vertical; }
select.form-control{ appearance:auto; }

/* ── 列表项 ── */
.list-item{
  display:flex; align-items:center; padding:14px 16px;
  border-bottom:1px solid var(--border-soft); text-decoration:none; color:var(--text);
}
.list-item:last-child{ border-bottom:none; }
.list-item:active{ background:var(--bg-soft); }
.item-main{ flex:1; min-width:0; }
.item-title{ font-size:15px; font-weight:600; margin-bottom:3px; }
.item-sub{ font-size:12px; color:var(--text-light); }
.item-right{ text-align:right; flex-shrink:0; margin-left:8px; }
.item-badge{
  display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600;
}
.badge-pending{ background:#fef3c7; color:#92400e; }
.badge-approved{ background:#dcfce7; color:#166534; }
.badge-rejected{ background:#fee2e2; color:#991b1b; }
.badge-shipped{ background:#dbeafe; color:#1e40af; }
.badge-signed{ background:#e0e7ff; color:#3730a3; }
.badge-pass{ background:#dcfce7; color:#166534; }
.badge-fail{ background:#fee2e2; color:#991b1b; }

/* ── 状态徽章 chips（清晰可读） ── */
.st{ display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; line-height:1.4; }
.st::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.st-done{ background:#dcfce7; color:#166534; }
.st-run{ background:#dbeafe; color:#1e40af; }
.st-wait{ background:#eef2f6; color:#64748b; }
.st-reject{ background:#fee2e2; color:#b91c1c; }
.st-warn{ background:#fef3c7; color:#b45309; }

/* ── 细进度条 ── */
.pbar{ height:7px; background:#eef2f6; border-radius:7px; overflow:hidden; position:relative; }
.pbar>i{ display:block; height:100%; border-radius:7px; background:var(--primary); transition:width .4s ease; }
.pbar.p-done>i{ background:var(--success); }
.pbar.p-warn>i{ background:var(--warning); }

/* ── Flash 消息 ── */
.flash{
  padding:12px 16px; border-radius:12px; margin-bottom:12px; font-size:14px; font-weight:500;
  border:1px solid transparent;
}
.flash-success{ background:#f0fdf4; color:#166534; border-color:#bbf7d0; }
.flash-danger{ background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.flash-warning{ background:#fffbeb; color:#92400e; border-color:#fde68a; }

/* ── 详情行 ── */
.detail-row{ display:flex; padding:10px 0; border-bottom:1px solid var(--border-soft); }
.detail-label{ width:96px; flex-shrink:0; font-size:13px; color:var(--text-light); font-weight:500; }
.detail-value{ flex:1; font-size:14px; color:var(--text); }

/* ── 流程步骤 ── */
.progress-steps{ display:flex; padding:14px 8px; gap:2px; }
.progress-step{ flex:1; text-align:center; font-size:11px; color:var(--text-light); position:relative; }
.progress-step .dot{
  width:26px; height:26px; border-radius:50%; background:#e3e8ef;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; margin-bottom:5px; color:#fff;
}
.progress-step.active .dot{ background:var(--primary); }
.progress-step.done .dot{ background:var(--success); }
.progress-step.fail .dot{ background:var(--danger); }

/* ── 表格 ── */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table{ width:100%; border-collapse:collapse; font-size:13px; }
table th,table td{ padding:11px 12px; text-align:left; white-space:nowrap; }
table thead th{ background:#f8fafc; color:var(--text-light); font-size:12px; font-weight:700; }
table tbody tr{ border-bottom:1px solid var(--border-soft); }
table tbody tr:active{ background:var(--bg-soft); }

/* ── 空状态 ── */
.empty-state{ text-align:center; padding:44px 24px; color:var(--text-light); border-radius:var(--radius); }
.empty-state .icon{ font-size:48px; margin-bottom:12px; display:block; }
.empty-state p{ font-size:14px; }

/* ── 页面标题 ── */
.page-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.page-header h2{ font-size:19px; font-weight:800; }

/* ── 角色标记 ── */
.role-tag{ display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600; }
.role-admin{ background:#e0e7ff; color:#3730a3; }
.role-sales{ background:#dbeafe; color:#1e40af; }
.role-market{ background:#fef3c7; color:#92400e; }
.role-warehouse{ background:#dcfce7; color:#166534; }
.role-marketer{ background:#f3e8ff; color:#6b21a8; }
.role-general_manager{ background:#ffedd5; color:#9a3412; }
.role-finance{ background:#fce4ec; color:#9b1c1c; }
.role-quality{ background:#ccfbf1; color:#0f766e; }
.role-hr{ background:#ffedd5; color:#c2410c; }
.role-workshop{ background:#f1f5f9; color:#475569; }
.role-logistics{ background:#e0f2fe; color:#0369a1; }
.role-rd{ background:#ede9fe; color:#6d28d9; }
.role-procurement{ background:#fce7f3; color:#9d174d; }

/* ── 分析页 ── */
.ana-tabs{
  display:flex; gap:4px; overflow-x:auto; background:#fff; border-radius:12px;
  margin-bottom:14px; padding:4px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  box-shadow:var(--shadow-card);
}
.ana-tabs::-webkit-scrollbar{ display:none; }
.ana-tabs a{
  flex-shrink:0; padding:9px 14px; text-decoration:none; font-size:13px;
  font-weight:600; color:var(--text-light); border-radius:9px;
}
.ana-tabs a.active{ background:var(--brand-soft); color:var(--primary); font-weight:700; }
.ana-stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.ana-stat{ background:#fff; border-radius:12px; padding:16px; text-align:center; box-shadow:var(--shadow-card); }
.ana-stat .num{ font-size:24px; font-weight:800; color:var(--primary); }
.ana-stat .label{ font-size:11px; color:var(--text-light); margin-top:3px; }
.bar-chart{ padding:12px 16px; }
.bar-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.bar-label{ width:72px; flex-shrink:0; font-size:12px; color:var(--text); text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-track{ flex:1; height:20px; background:#f1f5f9; border-radius:10px; overflow:hidden; }
.bar-fill{ height:100%; border-radius:10px; background:var(--primary); transition:width .4s ease; min-width:4px; }
.bar-val{ font-size:12px; font-weight:700; color:var(--text); min-width:30px; text-align:right; }
.rank-list{ list-style:none; }
.rank-list li{ display:flex; align-items:center; padding:11px 16px; border-bottom:1px solid var(--border-soft); gap:10px; }
.rank-list li:last-child{ border-bottom:none; }
.rank-num{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex-shrink:0; }
.rank-1{ background:#fef3c7; color:#d97706; }
.rank-2{ background:#e2e8f0; color:#475569; }
.rank-3{ background:#fde68a; color:#92400e; }
.rank-n{ background:#f1f5f9; color:#94a3b8; }

/* ── 流程总览 ── */
.flow-overview{ display:flex; align-items:center; justify-content:center; gap:2px; padding:0 4px; }
.flow-node{ flex:1; text-align:center; background:#f8fafc; border-radius:10px; padding:7px 2px; border:1.5px solid var(--border); max-width:92px; }
.flow-node .fn-icon{ font-size:22px; margin-bottom:2px; }
.flow-node .fn-label{ font-size:11px; font-weight:700; color:var(--text); line-height:1.3; }
.flow-node .fn-role{ font-size:10px; color:var(--text-light); margin-top:1px; }
.flow-arrow{ font-size:16px; color:var(--text-light); flex-shrink:0; padding:0 2px; }

/* ── 敏感信息 ── */
.sensitive-hidden{ filter:blur(4px); user-select:none; }

/* ── 角标 / 加载条 / 下拉刷新 ── */
.tab-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  background:#ef4444; color:#fff; font-size:10px; font-weight:700; line-height:1;
  margin-left:3px; vertical-align:middle; position:relative; top:-1px;
}
#topprog{ position:fixed; top:0; left:0; height:3px; width:0; z-index:9999; border-radius:0 3px 3px 0; opacity:0; transition:opacity .3s; }
#ptr-ind{
  position:fixed; top:112px; left:50%; transform:translate(-50%,-30px);
  background:rgba(30,41,59,.86); color:#fff; font-size:12px; padding:7px 16px;
  border-radius:22px; z-index:999; opacity:0; transition:opacity .18s,transform .18s;
  pointer-events:none; box-shadow:var(--shadow-lift);
}
#ptr-ind.on{ opacity:1; transform:translate(-50%,0); }
#ptr-ind .spin{ display:inline-block; margin-right:6px; animation:ptrSpin .8s linear infinite; }
@keyframes ptrSpin{ to{ transform:rotate(360deg); } }

/* ── 移动端 ── */
@media (max-width:640px){
  .container{ padding:12px 10px 24px; }
  .top-bar{ padding:10px 12px; }
  .top-bar h1{ font-size:16px; }
  .tab-nav{ padding:7px 8px; top:50px; }
  .card{ border-radius:13px; }
  .form-control,.form-group input,.form-group select,.form-group textarea{ font-size:15px; min-height:46px; }
  .btn{ min-height:46px; font-size:15px; }
  .page-header h2{ font-size:18px; }
  .stat-value,.stat-num{ font-size:30px; }
}

/* ═══════════════════════════════════════════════════════════
   详情/子页面统一样式（客户/样品/产品详情共用）
   ═══════════════════════════════════════════════════════════ */
/* 返回链接 */
.back-link{
  display:inline-flex; align-items:center; gap:4px;
  color:var(--text-light); text-decoration:none; font-size:13px; font-weight:500;
  margin-bottom:10px; padding:4px 10px 4px 4px; border-radius:8px;
}
.back-link:active{ background:var(--bg); }
.detail-hero{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }

/* Tag 徽章（详情头/列表用） */
.tag{ display:inline-block; padding:2px 10px; border-radius:20px; font-size:11px; font-weight:600; vertical-align:middle; }
.tag-info{ background:#dbeafe; color:#1e40af; }
.tag-success,.tag-done,.tag-approved,.tag-pass{ background:#dcfce7; color:#166534; }
.tag-warning,.tag-pending{ background:#fef3c7; color:#92400e; }
.tag-danger,.tag-rejected,.tag-fail{ background:#f1f5f9; color:#64748b; }

/* 详情信息网格 */
.detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4px 18px; }
.detail-field{ padding:9px 0; border-bottom:1px solid var(--border-soft); }
.detail-grid > .detail-field:nth-last-child(-n+2){ border-bottom:none; }
.field-label{ font-size:12px; color:var(--text-light); font-weight:500; margin-bottom:2px; }
.field-value{ font-size:14px; color:var(--text); word-break:break-word; }

/* 进度条（产品详情） */
.progress-bar{ width:100%; background:#eef2f6; border-radius:20px; overflow:hidden; position:relative; }
.progress-bar-fill{ background:var(--primary); border-radius:20px; transition:width .5s ease; }
.progress-bar-fill.green{ background:var(--success); }
.progress-bar-fill.orange{ background:var(--warning); }

/* 里程碑（产品详情） */
.milestones{ margin-top:6px; }
.milestone{
  display:flex; align-items:center; gap:6px; padding:10px 12px; margin:6px 0;
  background:var(--bg-soft); border:1px solid var(--border-soft); border-radius:10px;
  font-size:13px; color:var(--text-light);
}
.milestone.done{ background:#f0fdf4; border-color:#bbf7d0; color:#166534; }

/* 审批流程节点（样品详情等） */
.approval-flow{ display:flex; flex-direction:column; gap:8px; }
.approval-node{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; background:var(--bg-soft); border:1.5px solid var(--border);
  border-radius:12px;
}
.approval-node .node-label{ font-size:13px; font-weight:600; color:var(--text); }
.approval-node .node-status{ font-size:12px; font-weight:600; color:var(--text-light); }
.approval-node.passed{ background:#f0fdf4; border-color:#86efac; }
.approval-node.passed .node-status{ color:#16a34a; }
.approval-node.rejected{ background:#fef2f2; border-color:#fecaca; }
.approval-node.rejected .node-status{ color:#dc2626; }
.approval-node.pending{ border-style:dashed; }

/* 子页卡片内小块标题 */
.sub-title{ font-size:14px; font-weight:700; color:var(--text); margin:16px 0 8px; }

/* 列表内链接 */
.table-wrap tbody a{ color:var(--primary); text-decoration:none; font-weight:600; }
.table-wrap tbody a:active{ text-decoration:underline; }

@media (max-width:640px){
  .detail-grid{ grid-template-columns:1fr; }
  .detail-hero{ flex-direction:column; align-items:flex-start; }
}

/* ═══════════════════════════════════════════════════════════
   列表卡片共用样式（研发/立项/样品列表统一视觉）
   ═══════════════════════════════════════════════════════════ */
.pcard{background:#fff;border-radius:12px;margin-bottom:8px;box-shadow:var(--shadow-card);overflow:hidden;position:relative;}
.pcard > a{text-decoration:none;color:inherit;display:block;padding:12px 14px 6px;}
.pcard-body{display:flex;align-items:flex-start;gap:10px;}
.pcard-left{flex:1;min-width:0;}
.pcard-name{font-size:15px;font-weight:700;color:#1e293b;line-height:1.3;}
.pcard-name .pid{font-size:10px;color:#94a3b8;font-weight:400;margin-left:4px;}
.pcard-meta{font-size:12px;color:#64748b;margin-top:4px;display:flex;flex-wrap:wrap;gap:3px 10px;}
.pcard-meta b{font-weight:700;color:#334155;}
.pcard-status{position:absolute;right:12px;top:12px;font-size:11px;font-weight:700;padding:2px 10px;border-radius:12px;letter-spacing:.2px;display:inline-flex;align-items:center;gap:4px;}
.pcard-status.done{background:#dcfce7;color:#15803d;}
.pcard-status.running,.pcard-status.approved,.pcard-status.info{background:#dbeafe;color:#1d4ed8;}
.pcard-status.paused{background:#f1f5f9;color:#64748b;}
.pcard-status.waiting,.pcard-status.pending{background:#fef3c7;color:#b45309;}
/* 已撤销/已驳回 → 一律灰色，不做彩色强调 */
.pcard-status.rejected{background:#f1f5f9;color:#64748b;}
.pcard-desc{font-size:12px;color:#64748b;margin-top:6px;line-height:1.5;padding-right:6px;}
.pcard-foot{padding:2px 14px 10px;}
.pcard-process{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-top:6px;}
.proc-step{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#64748b;background:#f1f5f9;border-radius:12px;padding:3px 9px;}
.proc-step.ok{background:#dcfce7;color:#15803d;}
.proc-step.no{background:#fee2e2;color:#b91c1c;}
.proc-step.todo{background:#fff;border:1px dashed #cbd5e1;}
/* 红点脉冲（审批中/未完成） */
.todo-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#ef4444;vertical-align:middle;animation:tdPulse 1.2s infinite;flex-shrink:0;}
@keyframes tdPulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.6);}70%{box-shadow:0 0 0 7px rgba(239,68,68,0);}100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}}
/* 分组头 */
.sec-header{display:flex;align-items:center;gap:8px;padding:12px 4px 6px;}
.sec-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.sec-title{font-size:14px;font-weight:700;color:#1e293b;}
.sec-count{font-size:12px;color:#94a3b8;font-weight:400;}
.sec-subtitle{font-size:12px;font-weight:600;color:#64748b;padding:6px 4px 2px;display:flex;align-items:center;gap:4px;}
/* 列表页上方操作条 */
.action-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 0 10px;}

/* 列表页分类标签栏 + 分组区块 */
.tab-scroll{display:flex;gap:6px;overflow-x:auto;padding:6px 2px 10px;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.tab-scroll::-webkit-scrollbar{display:none;}
.tab-btn{border:1px solid var(--border,#e2e8f0);background:#fff;color:#475569;padding:7px 14px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;flex-shrink:0;}
.tab-btn.active{background:var(--primary,#2563eb);color:#fff;border-color:var(--primary,#2563eb);}
.tab-btn .cnt{font-size:10px;background:rgba(0,0,0,.1);border-radius:10px;padding:1px 6px;margin-left:3px;font-weight:400;}
.tab-btn.active .cnt{background:rgba(255,255,255,.25);}
.list-section{padding:0 2px;}

/* ═══════════════════════════════════════════════════════════
   流程进度时间轴（研发/立项/样品通用 · 标识卡在哪个节点）
   ═══════════════════════════════════════════════════════════ */
.flow-tl{display:flex;align-items:flex-start;justify-content:space-between;gap:0;padding:8px 2px 4px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.ftl-node{flex:1;min-width:52px;display:flex;flex-direction:column;align-items:center;position:relative;padding:2px;}
.ftl-node::before{content:'';position:absolute;top:9px;left:-50%;width:100%;height:2px;background:#e2e8f0;z-index:1;}
.ftl-node:first-child::before{display:none;}
.ftl-dot{width:16px;height:16px;border-radius:50%;background:#e2e8f0;border:2px solid #fff;box-shadow:0 0 0 1.5px #e2e8f0;z-index:2;margin-bottom:3px;flex-shrink:0;}
.ftl-node.done::before{background:#86efac;}
.ftl-node.done .ftl-dot{background:var(--success,#16a34a);box-shadow:0 0 0 1.5px #bbf7d0;}
.ftl-node.cur::before{background:#93c5fd;}
.ftl-node.cur .ftl-dot{background:var(--primary,#2563eb);box-shadow:0 0 0 1.5px #bfdbfe;animation:ftlPulse 1.2s infinite;}
.ftl-node.reject .ftl-dot{background:#cbd5e1;box-shadow:0 0 0 1.5px #e2e8f0;}
.ftl-node.todo::before{background:#e2e8f0;}
.ftl-label{font-size:10px;color:#475569;white-space:nowrap;text-align:center;line-height:1.15;}
.ftl-label small{display:block;font-size:8px;color:#94a3b8;font-weight:400;}
@keyframes ftlPulse{0%{box-shadow:0 0 0 0 rgba(37,99,235,.5),0 0 0 1.5px #bfdbfe;}70%{box-shadow:0 0 0 9px rgba(37,99,235,0),0 0 0 1.5px #bfdbfe;}100%{box-shadow:0 0 0 0 rgba(37,99,235,0),0 0 0 1.5px #bfdbfe;}}
/* 卡在当前节点横幅 */
.flow-banner{display:flex;align-items:center;gap:6px;background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;font-size:12px;border-radius:8px;padding:5px 10px;margin:2px 2px 2px;}
.flow-banner.done{background:#f0fdf4;border-color:#bbf7d0;color:#166534;}
.flow-banner.muted{background:#f8fafc;border-color:#e2e8f0;color:#64748b;}
.flow-banner .fb-dot{width:9px;height:9px;border-radius:50%;background:var(--primary,#2563eb);flex-shrink:0;animation:ftlPulse .9s infinite;}

/* ═══════════ 搜索/筛选栏（.search-bar）v13 ═══════════ */
.search-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:10px;margin:0 0 14px;box-shadow:0 1px 2px rgba(15,23,42,.04);}
.search-bar input[type=text],.search-bar input[type=search],.search-bar input:not([type]){
  flex:1 1 200px;min-width:150px;padding:9px 12px 9px 36px;border:1px solid #e2e8f0;border-radius:10px;
  font-size:14px;color:var(--text,#1e293b);background:#f8fafc url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%2394a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>') no-repeat 12px center;background-size:16px;transition:border-color .15s,box-shadow .15s,background .15s;}
.search-bar input:focus{outline:none;border-color:var(--primary,#2563eb);background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%232563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>') no-repeat 12px center;background-size:16px;box-shadow:0 0 0 3px rgba(37,99,235,.12);}
.search-bar select{padding:9px 30px 9px 12px;border:1px solid #e2e8f0;border-radius:10px;font-size:14px;color:var(--text,#1e293b);background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') no-repeat right 10px center;background-size:14px;appearance:none;-webkit-appearance:none;cursor:pointer;transition:border-color .15s,box-shadow .15s;min-width:110px;}
.search-bar select:focus{outline:none;border-color:var(--primary,#2563eb);box-shadow:0 0 0 3px rgba(37,99,235,.12);}
.search-bar .btn{padding:9px 16px;border-radius:10px;white-space:nowrap;}
.search-bar .filter-count{margin-left:auto;font-size:12.5px;color:var(--text-light,#64748b);background:#f1f5f9;padding:7px 12px;border-radius:10px;white-space:nowrap;}
.search-bar .filter-count b{color:var(--primary,#2563eb);font-weight:700;}
@media(max-width:640px){.search-bar input[type=text],.search-bar input:not([type]){flex:1 1 100%;}.search-bar .filter-count{margin-left:0;}}

/* ═══════════ 申请/新增类表单美化 v14 ═══════════ */
.form-hero{padding:16px 18px;border-radius:14px;margin-bottom:14px;background:linear-gradient(120deg,rgba(37,99,235,.08),rgba(37,99,235,.02));border:1px solid rgba(37,99,235,.14);}
.form-hero h3{margin:0;font-size:18px;font-weight:700;color:#1e293b;display:flex;align-items:center;gap:8px;}
.form-hero p{margin:4px 0 0;font-size:12.5px;color:#64748b;line-height:1.5;}
.form-section{display:flex;align-items:center;gap:8px;margin:20px 0 12px;padding-bottom:8px;border-bottom:1.5px solid #eef2f7;font-size:14px;font-weight:700;color:#1e293b;}
.form-section:first-of-type{margin-top:0;}
.form-section .sec-ic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#eff6ff;color:#2563eb;font-size:14px;flex-shrink:0;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:640px){.form-row{grid-template-columns:1fr;}}
.form-group{margin-bottom:12px;}
.form-group label{display:block;font-size:13px;font-weight:600;color:#1e293b;margin-bottom:6px;}
.form-group .req{color:#dc2626;margin-left:2px;}
.form-hint{font-size:12px;color:#94a3b8;margin-top:5px;line-height:1.45;}
/* 表单输入控件（作用于 .card-body 内的裸 input/select/textarea） */
.card-body input[type=text],.card-body input:not([type]),.card-body input[type=tel],.card-body input[type=number],
.card-body select,.card-body textarea{
  width:100%;padding:11px 13px;border:1.5px solid #e2e8f0;border-radius:12px;font-size:15px;
  background:#fff;min-height:46px;color:#1e293b;transition:border-color .15s,box-shadow .15s,background .15s;
  box-sizing:border-box;
}
.card-body input:focus,.card-body select:focus,.card-body textarea:focus{
  outline:none;border-color:#2563eb;background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.card-body textarea{min-height:92px;resize:vertical;}
.form-actions{display:flex;gap:10px;padding:12px 2px;margin-top:area 6px;}
.form-actions{position:sticky;bottom:0;gap:10px;padding:12px;margin:6px -18px -18px;background:rgba(248,250,252,.94);backdrop-filter:blur(6px);border-top:1px solid #eef2f7;border-radius:0 0 14px 14px;}
.form-actions .btn{padding:11px 22px;border-radius:12px;min-height:44px;}

/* ═══════════════════════════════════════════════
   移动端人性化/美化增强 v15（主流手机屏 < 600px）
   · 更大触控目标 · 更柔更圆按钮 · 刘海安全区 · 留白呼吸
   ═══════════════════════════════════════════════ */
.btn{
  min-height:46px;
  letter-spacing:.2px;
  box-shadow:0 2px 6px rgba(22,33,62,.06);
  transition:opacity .15s, transform .1s, box-shadow .15s;
}
.btn-primary{ box-shadow:0 3px 10px rgba(37,99,235,.28); }
.btn:active{ transform:scale(.96); }
.btn-sm{ min-height:38px; gap:5px; }

/* iPhone 刘海安全区适配（桌面宽度不受影响） */
@supports(padding:max(0px)){
  .top-bar{
    padding-left:max(14px,env(safe-area-inset-left));
    padding-right:max(14px,env(safe-area-inset-right));
  }
  .container{
    padding-left:max(12px,env(safe-area-inset-left));
    padding-right:max(12px,env(safe-area-inset-right));
    padding-bottom:max(32px,env(safe-area-inset-bottom));
  }
  .form-actions{ padding-bottom:max(12px,env(safe-area-inset-bottom)); }
}

/* 首页统计：更圆更柔 */
.stat-card{ border-radius:18px; padding:20px 18px; box-shadow:var(--shadow-card); }

/* ============ 主流手机屏 < 600px ============ */
@media (max-width:600px){
  /* 顶栏：自动换行、不拥挤 */
  .top-bar{ flex-wrap:wrap; gap:6px 10px; padding:12px 12px; align-items:center; }
  .top-bar h1{ font-size:16px; }
  .top-bar .right-wrap{ margin-left:auto; }
  .top-bar .user-badge{ max-width:104px; font-size:11px; padding:4px 10px; }

  /* 按钮：整块化 + 更舒服的触控区 */
  .btn{ min-height:48px; font-size:15px; border-radius:14px; }
  .btn-sm{ min-height:44px; font-size:14px; padding:8px 16px; border-radius:12px; }
  .form-actions{ position:sticky; bottom:0; gap:12px; padding:12px; }
  .form-actions .btn{ flex:1; min-height:50px; font-size:15px; }
  .btn-group .btn{ flex:1; }

  /* 卡片留白呼吸 */
  .card-body{ padding:18px; }
  .card-header{ padding:16px 18px 12px; }

  /* 流程卡脚操作按钮：两列整块、好点易触 */
  .pcard-foot .btn-sm{ flex:1; min-width:0; justify-content:center; }
  .pcard-foot form[method=POST]{ display:flex; }
  .pcard-foot form button[type=submit]{ flex:1; min-height:44px; flex:1 1 0; }
  .pcard-foot form input[type=text]{ min-height:46px; font-size:16px; }

  /* 表单输入：16px 防 iOS 聚焦自动放大 */
  .card-body input[type=text],.card-body input:not([type]),.card-body input[type=tel],
  .card-body input[type=number],.card-body input[type=date],.card-body select,.card-body textarea,
  .form-control{
    min-height:48px; font-size:16px;
  }
  .card-body input[type=date]{ font-size:15px; }
  textarea.form-control{ min-height:96px; }

  /* 导航标签更大更易点 */
  .tab-nav{ padding:8px 8px; }
  .tab-row a{ padding-top:11px; padding-bottom:9px; font-size:13px; }
  .tab-row a .tab-icon{ font-size:22px; }

  /* 列表项 / 详情行 更大触控与行距 */
  .list-item{ padding:15px 16px; }
  .item-title{ font-size:16px; }
  .item-sub{ font-size:13px; }
  .detail-row{ padding:12px 2px; }
  .detail-label{ width:104px; }
  .detail-value{ font-size:15px; }

  /* 空状态 */
  .empty-state{ padding:52px 24px; }

  /* 表格横向滑动更顺滑 */
  .table-wrap{ -webkit-overflow-scrolling:touch; }
  table th,table td{ padding:13px 12px; font-size:14px; }

  /* 首页统计卡两列更透气 */
  .stats-grid{ gap:12px; }
}

/* ═══ 五部门并行审批：清爽卡片网格 v16 ═══ */
.approval-flow{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:10px;
}
.approval-node{
  padding:13px 14px; background:var(--bg-soft); border:1.5px solid var(--border);
  border-radius:14px; display:flex; flex-direction:column; gap:9px;
}
.approval-node.passed{ background:#f0fdf4; border-color:#86efac; }
.approval-node.rejected{ background:#fef2f2; border-color:#fecaca; }
.approval-node.pending{ border-style:dashed; }
.approval-node .node-label,
.approval-node .node-status{ display:none; }
.an-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.an-title{ font-size:14px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:6px; }
.an-badge{ font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap; }
.an-badge.p{ background:#fef3c7; color:#b45309; }
.an-badge.a{ background:#dcfce7; color:#166534; }
.an-badge.r{ background:#fee2e2; color:#b91c1c; }
.an-comment{ font-size:12px; color:#6b7280; background:#fff; border:1px solid var(--border-soft); border-radius:8px; padding:7px 10px; word-break:break-all; }
.an-actions{ display:flex; flex-direction:column; gap:8px; margin-top:auto; }
.an-remind{ width:100%; }
.an-remind .btn{ width:100%; min-height:38px; justify-content:center; }
.an-approve{ display:flex; flex-direction:column; gap:8px; }
.an-approve input{ width:100%; padding:9px 11px; border:1.5px solid var(--border); border-radius:10px; font-size:13px; min-height:40px; background:#fff; box-sizing:border-box; }
.an-approve .an-btns{ display:flex; gap:8px; }
.an-approve .an-btns .btn{ flex:1; min-height:42px; justify-content:center; }
@media(max-width:560px){ .approval-flow{ grid-template-columns:1fr; } }

/* ── 下拉式导航菜单 ── */
.nav-hd{ display:flex; align-items:center; gap:8px; min-height:38px; }
.nav-hamburger{ background:rgba(37,99,235,.08); border:none; color:var(--brand,#2563eb); font-size:20px; cursor:pointer; padding:4px 12px; border-radius:10px; min-height:38px; line-height:1; }
.nav-current{ flex:1; font-size:15px; font-weight:600; color:#1e293b; display:flex; align-items:center; gap:4px; }
.nav-caret{ cursor:pointer; color:#94a3b8; font-size:13px; padding:2px 6px; }
.tab-dropdown{ position:absolute; left:8px; right:8px; top:calc(100% + 6px); z-index:120; background:#fff; border:1px solid var(--border,#e2e8f0); border-radius:14px; box-shadow:0 14px 34px rgba(15,23,42,.16); padding:8px; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.tab-drop-item{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 6px 10px; border-radius:11px; color:#475569; text-decoration:none; font-size:13px; font-weight:600; transition:background .15s; }
.tab-drop-item .tab-icon{ font-size:22px; line-height:1.2; }
.tab-drop-item:hover{ background:#f1f5f9; }
.tab-drop-item.active{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ grid-template-columns:repeat(2,1fr); padding:10px; } .tab-drop-item{ padding:15px 6px; font-size:14px; } }

/* ── 下拉导航-纯文字版 ── */
.tab-dropdown{ grid-template-columns:1fr; padding:8px; gap:4px; max-height:min(70vh,470px); overflow-y:auto; }
.tab-drop-item{ flex-direction:row; justify-content:center; padding:13px 10px; border-radius:10px; font-size:14px; letter-spacing:.5px; }
.tab-drop-item .tab-icon{ display:none; }
.tab-drop-item:hover{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ grid-template-columns:1fr; padding:8px; } .tab-drop-item{ padding:16px 10px; font-size:15px; min-height:48px; } }

/* ── 下拉导航-紧凑双列纯文字 ── */
.tab-dropdown{ grid-template-columns:repeat(2,1fr) !important; gap:4px; padding:6px; max-height:min(60vh,430px); overflow-y:auto; }
.tab-drop-item{ flex-direction:column; justify-content:center; padding:8px 4px; border-radius:8px; font-size:12px; color:#475569; }
.tab-drop-item .tab-icon{ display:none !important; }
.tab-drop-item .tab-label{ line-height:1.2; }
.tab-drop-item:hover{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ grid-template-columns:repeat(2,1fr); gap:4px; padding:6px; } .tab-drop-item{ padding:9px 4px; font-size:12px; } }

/* ── 下拉导航-单列左对齐紧凑 ── */
.tab-dropdown{ grid-template-columns:1fr !important; gap:2px; padding:5px; max-height:min(58vh,400px); overflow-y:auto; }
.tab-drop-item{ flex-direction:row; justify-content:flex-start; align-items:center; padding:8px 12px; border-radius:7px; font-size:13px; color:#475569; }
.tab-drop-item .tab-icon{ display:none !important; }
.tab-drop-item:active{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ grid-template-columns:1fr; gap:2px; padding:5px; } .tab-drop-item{ padding:10px 12px; font-size:13px; } }

/* ── 下拉导航-行高-30% ── */
.tab-drop-item{ padding-top:6px !important; padding-bottom:6px !important; }
@media (max-width:640px){ .tab-drop-item{ padding:7px 12px !important; } }

/* ── 下拉导航-行高再缩 ── */
.tab-drop-item{ padding-top:4px !important; padding-bottom:4px !important; }
@media (max-width:640px){ .tab-drop-item{ padding:5px 12px !important; } }

/* ── 顶栏汉堡按钮 + 当前模块 + 独立下拉 ── */
.nav-hamburger{ background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.45); color:#fff; font-size:19px; cursor:pointer; padding:2px 10px; border-radius:8px; min-height:34px; line-height:1; }
.nav-cur{ color:#fff; font-size:13px; font-weight:600; margin-right:2px; }
.tab-dropdown{ position:fixed !important; top:56px; left:6px; right:6px; z-index:130; grid-template-columns:1fr; gap:2px; padding:6px; background:#fff; border:1px solid var(--border,#e2e8f0); border-radius:12px; box-shadow:0 14px 34px rgba(15,23,42,.18); max-height:min(62vh,440px); overflow-y:auto; }
.tab-drop-item{ flex-direction:row; justify-content:flex-start; align-items:center; padding:6px 12px; border-radius:7px; font-size:13px; color:#475569; }
.tab-drop-item .tab-icon{ display:none !important; }
.tab-drop-item:hover{ background:var(--brand,#2563eb); color:#fff; }
.tab-drop-item.active{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ top:52px; padding:6px; } .tab-drop-item{ padding:7px 12px; font-size:13px; } }

/* ── 待办下拉面板 + 顶栏紧凑 ── */
.top-bar{ justify-content:flex-end; }
.top-bar .right-wrap{ gap:6px; }
.todo-drop{ position:fixed !important; top:56px; right:8px; width:min(92vw,360px); max-height:70vh; overflow-y:auto; z-index:130; background:#fff; border:1px solid var(--border,#e2e8f0); border-radius:14px; box-shadow:0 16px 40px rgba(15,23,42,.20); padding:8px; }
.todo-item{ display:flex; align-items:center; gap:8px; padding:10px; border-radius:9px; color:#1e293b; text-decoration:none; font-size:13px; border-bottom:1px solid #f1f5f9; }
.todo-item:hover{ background:#f1f5f9; }
.todo-item .ti{ font-size:16px; flex-shrink:0; }
.todo-item .tt{ flex:1; line-height:1.3; }
.todo-item .go{ color:#94a3b8; font-size:16px; }
.todo-more{ text-align:center; font-size:11px; color:#94a3b8; padding:6px 0 2px; }
.todo-all{ display:block; text-align:center; padding:10px; margin-top:4px; color:#2563eb; font-weight:700; font-size:13px; text-decoration:none; border-radius:8px; background:#eff6ff; }
.todo-all:hover{ background:#dbeafe; }
.todo-empty{ text-align:center; padding:18px 10px; color:#94a3b8; font-size:13px; }
@media(max-width:640px){ .todo-drop{ top:52px; right:6px; left:6px; width:auto; } }
/* ═══════════════════════════════════════════════════════════
   辉科食品 CRM — 移动端界面 v9
   设计理念：人性化 · 简单明了 · 清晰好读
   · 柔和配色、干净层级、友好文案、轻量微交互
   ═══════════════════════════════════════════════════════════ */
:root {
  /* 品牌 & 状态（柔和、清晰） */
  --primary:#2563eb; --primary-dark:#1d4ed8;
  --brand:#2563eb; --brand-soft:#eef2ff;
  --success:#16a34a; --warning:#ea580c; --danger:#dc2626;
  /* 状态色：✅绿=完成 / 🔵蓝=进行中 / ⚪灰=未开始 / 🔴红=驳回 */
  --st-done:#16a34a; --st-run:#2563eb; --st-wait:#94a3b8; --st-reject:#dc2626; --st-warn:#d97706;
  /* 中性 */
  --bg:#f2f4f8; --bg-soft:#f7f9fc;
  --card:#ffffff; --text:#1f2a3d; --text-light:#6b7a90; --text-secondary:#6b7a90;
  --border:#e3e8ef; --border-soft:#eef2f6;
  /* 圆角 / 阴影（柔和） */
  --radius:14px; --radius-sm:10px;
  --shadow-card:0 1px 2px rgba(22,33,62,.05),0 2px 8px rgba(22,33,62,.05);
  --shadow-lift:0 8px 24px rgba(30,45,90,.10);
}
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  background:var(--bg); color:var(--text); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{ -webkit-tap-highlight-color:transparent; }

/* ── 顶部栏：清爽品牌色 ── */
.top-bar{
  position:sticky; top:0; z-index:100;
  background:linear-gradient(135deg,#2563eb,#4338ca);
  color:#fff; padding:13px 16px;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 3px 12px rgba(37,99,235,.20);
}
.top-bar h1{ font-size:17px; font-weight:700; }
.top-bar .right-wrap{ display:flex; align-items:center; gap:8px; }
.top-bar .right-wrap a{ color:#fff; text-decoration:none; font-size:13px; }
.top-bar .right-wrap a:active{ opacity:.6; }
.top-bar .user-badge{
  background:rgba(255,255,255,.2); padding:4px 12px; border-radius:20px;
  font-size:12px; font-weight:600; max-width:150px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.top-bar .notif-icon{
  position:relative; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; font-size:18px;
  cursor:pointer;
}
.top-bar .notif-icon:active{ opacity:.7; }
.top-bar .notif-icon .badge{
  position:absolute; top:-3px; right:-3px; background:#ef4444; color:#fff;
  border-radius:50%; min-width:19px; height:19px; font-size:10px; font-weight:700;
  display:none; align-items:center; justify-content:center; padding:0 4px; border:2px solid #fff;
}

/* ── 导航：简洁双排 ── */
.tab-nav{
  position:sticky; top:52px; z-index:99;
  background:rgba(255,255,255,.96); border-bottom:1px solid var(--border);
  box-shadow:0 1px 3px rgba(22,33,62,.04);
  padding:8px 10px;
}
.tab-row{ display:flex; gap:6px; }
.tab-row + .tab-row{ margin-top:5px; }
.tab-row a{
  flex:1; min-width:0; text-align:center; padding:9px 4px 7px;
  text-decoration:none; font-size:12px; font-weight:500; color:var(--text-light);
  border-radius:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:background .15s,color .15s;
}
.tab-row a:active{ background:#f1f5f9; }
.tab-row a.active{ background:var(--brand); color:#fff; font-weight:600; }
.tab-row a .tab-icon{ font-size:20px; display:block; margin-bottom:2px; line-height:1.2; }
.tab-row a.active .tab-badge{ background:#fff; color:#ef4444; }

/* ── 内容区 ── */
.container{ max-width:520px; margin:0 auto; padding:14px 12px 30px; }

/* ── 卡片：干净白卡 ── */
.card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow-card);
  margin-bottom:14px; overflow:hidden; border:1px solid var(--border-soft);
}
.card-header{
  padding:15px 16px 11px; font-size:15px; font-weight:700; color:var(--text);
  border-bottom:1px solid var(--border-soft); display:flex; align-items:center; gap:8px;
}
.card-body{ padding:16px; }

/* ── 首页统计卡 ── */
.stats-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:2px 0 14px; }
.stat-card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow-card);
  padding:18px 16px; border:1px solid var(--border-soft);
}
.stat-value,.stat-num{ font-size:34px; font-weight:800; line-height:1.1; color:var(--primary); margin-bottom:5px; }
.stat-value[style*="color"],.stat-num[style*="color"]{ color:inherit; }
.stat-label{ font-size:13px; color:var(--text-light); font-weight:500; }
.stat-card .stat-icon{ font-size:18px; margin-bottom:2px; }

/* ── 按钮：清晰柔和 ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 20px; border-radius:12px; font-size:14px; font-weight:600;
  border:none; cursor:pointer; text-decoration:none; min-height:44px;
  transition:opacity .15s, transform .1s;
}
.btn:active{ opacity:.8; transform:scale(.97); }
.btn-primary{ background:var(--primary); color:#fff; box-shadow:0 2px 6px rgba(37,99,235,.25); }
.btn-success{ background:var(--success); color:#fff; }
.btn-warning{ background:var(--warning); color:#fff; }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-outline{ background:#fff; border:1.5px solid var(--border); color:var(--text); }
.btn-outline:active{ background:var(--bg); }
.btn-block{ width:100%; }
.btn-sm{ padding:6px 14px; font-size:13px; min-height:auto; border-radius:10px; }
.btn-group{ display:flex; gap:8px; flex-wrap:wrap; }

/* ── 表单 ── */
.form-group{ margin-bottom:14px; }
.form-group label{ display:block; font-size:13px; font-weight:600; color:var(--text); margin-bottom:6px; }
.form-control{
  width:100%; padding:11px 13px; border:1.5px solid var(--border);
  border-radius:12px; font-size:15px; background:#fff; min-height:46px;
  transition:border-color .15s, box-shadow .15s;
}
.form-control:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
textarea.form-control{ min-height:84px; resize:vertical; }
select.form-control{ appearance:auto; }

/* ── 列表项 ── */
.list-item{
  display:flex; align-items:center; padding:14px 16px;
  border-bottom:1px solid var(--border-soft); text-decoration:none; color:var(--text);
}
.list-item:last-child{ border-bottom:none; }
.list-item:active{ background:var(--bg-soft); }
.item-main{ flex:1; min-width:0; }
.item-title{ font-size:15px; font-weight:600; margin-bottom:3px; }
.item-sub{ font-size:12px; color:var(--text-light); }
.item-right{ text-align:right; flex-shrink:0; margin-left:8px; }
.item-badge{
  display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600;
}
.badge-pending{ background:#fef3c7; color:#92400e; }
.badge-approved{ background:#dcfce7; color:#166534; }
.badge-rejected{ background:#fee2e2; color:#991b1b; }
.badge-shipped{ background:#dbeafe; color:#1e40af; }
.badge-signed{ background:#e0e7ff; color:#3730a3; }
.badge-pass{ background:#dcfce7; color:#166534; }
.badge-fail{ background:#fee2e2; color:#991b1b; }

/* ── 状态徽章 chips（清晰可读） ── */
.st{ display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; line-height:1.4; }
.st::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.st-done{ background:#dcfce7; color:#166534; }
.st-run{ background:#dbeafe; color:#1e40af; }
.st-wait{ background:#eef2f6; color:#64748b; }
.st-reject{ background:#fee2e2; color:#b91c1c; }
.st-warn{ background:#fef3c7; color:#b45309; }

/* ── 细进度条 ── */
.pbar{ height:7px; background:#eef2f6; border-radius:7px; overflow:hidden; position:relative; }
.pbar>i{ display:block; height:100%; border-radius:7px; background:var(--primary); transition:width .4s ease; }
.pbar.p-done>i{ background:var(--success); }
.pbar.p-warn>i{ background:var(--warning); }

/* ── Flash 消息 ── */
.flash{
  padding:12px 16px; border-radius:12px; margin-bottom:12px; font-size:14px; font-weight:500;
  border:1px solid transparent;
}
.flash-success{ background:#f0fdf4; color:#166534; border-color:#bbf7d0; }
.flash-danger{ background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.flash-warning{ background:#fffbeb; color:#92400e; border-color:#fde68a; }

/* ── 详情行 ── */
.detail-row{ display:flex; padding:10px 0; border-bottom:1px solid var(--border-soft); }
.detail-label{ width:96px; flex-shrink:0; font-size:13px; color:var(--text-light); font-weight:500; }
.detail-value{ flex:1; font-size:14px; color:var(--text); }

/* ── 流程步骤 ── */
.progress-steps{ display:flex; padding:14px 8px; gap:2px; }
.progress-step{ flex:1; text-align:center; font-size:11px; color:var(--text-light); position:relative; }
.progress-step .dot{
  width:26px; height:26px; border-radius:50%; background:#e3e8ef;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; margin-bottom:5px; color:#fff;
}
.progress-step.active .dot{ background:var(--primary); }
.progress-step.done .dot{ background:var(--success); }
.progress-step.fail .dot{ background:var(--danger); }

/* ── 表格 ── */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table{ width:100%; border-collapse:collapse; font-size:13px; }
table th,table td{ padding:11px 12px; text-align:left; white-space:nowrap; }
table thead th{ background:#f8fafc; color:var(--text-light); font-size:12px; font-weight:700; }
table tbody tr{ border-bottom:1px solid var(--border-soft); }
table tbody tr:active{ background:var(--bg-soft); }

/* ── 空状态 ── */
.empty-state{ text-align:center; padding:44px 24px; color:var(--text-light); border-radius:var(--radius); }
.empty-state .icon{ font-size:48px; margin-bottom:12px; display:block; }
.empty-state p{ font-size:14px; }

/* ── 页面标题 ── */
.page-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.page-header h2{ font-size:19px; font-weight:800; }

/* ── 角色标记 ── */
.role-tag{ display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600; }
.role-admin{ background:#e0e7ff; color:#3730a3; }
.role-sales{ background:#dbeafe; color:#1e40af; }
.role-market{ background:#fef3c7; color:#92400e; }
.role-warehouse{ background:#dcfce7; color:#166534; }
.role-marketer{ background:#f3e8ff; color:#6b21a8; }
.role-general_manager{ background:#ffedd5; color:#9a3412; }
.role-finance{ background:#fce4ec; color:#9b1c1c; }
.role-quality{ background:#ccfbf1; color:#0f766e; }
.role-hr{ background:#ffedd5; color:#c2410c; }
.role-workshop{ background:#f1f5f9; color:#475569; }
.role-logistics{ background:#e0f2fe; color:#0369a1; }
.role-rd{ background:#ede9fe; color:#6d28d9; }
.role-procurement{ background:#fce7f3; color:#9d174d; }

/* ── 分析页 ── */
.ana-tabs{
  display:flex; gap:4px; overflow-x:auto; background:#fff; border-radius:12px;
  margin-bottom:14px; padding:4px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  box-shadow:var(--shadow-card);
}
.ana-tabs::-webkit-scrollbar{ display:none; }
.ana-tabs a{
  flex-shrink:0; padding:9px 14px; text-decoration:none; font-size:13px;
  font-weight:600; color:var(--text-light); border-radius:9px;
}
.ana-tabs a.active{ background:var(--brand-soft); color:var(--primary); font-weight:700; }
.ana-stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.ana-stat{ background:#fff; border-radius:12px; padding:16px; text-align:center; box-shadow:var(--shadow-card); }
.ana-stat .num{ font-size:24px; font-weight:800; color:var(--primary); }
.ana-stat .label{ font-size:11px; color:var(--text-light); margin-top:3px; }
.bar-chart{ padding:12px 16px; }
.bar-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.bar-label{ width:72px; flex-shrink:0; font-size:12px; color:var(--text); text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-track{ flex:1; height:20px; background:#f1f5f9; border-radius:10px; overflow:hidden; }
.bar-fill{ height:100%; border-radius:10px; background:var(--primary); transition:width .4s ease; min-width:4px; }
.bar-val{ font-size:12px; font-weight:700; color:var(--text); min-width:30px; text-align:right; }
.rank-list{ list-style:none; }
.rank-list li{ display:flex; align-items:center; padding:11px 16px; border-bottom:1px solid var(--border-soft); gap:10px; }
.rank-list li:last-child{ border-bottom:none; }
.rank-num{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex-shrink:0; }
.rank-1{ background:#fef3c7; color:#d97706; }
.rank-2{ background:#e2e8f0; color:#475569; }
.rank-3{ background:#fde68a; color:#92400e; }
.rank-n{ background:#f1f5f9; color:#94a3b8; }

/* ── 流程总览 ── */
.flow-overview{ display:flex; align-items:center; justify-content:center; gap:2px; padding:0 4px; }
.flow-node{ flex:1; text-align:center; background:#f8fafc; border-radius:10px; padding:7px 2px; border:1.5px solid var(--border); max-width:92px; }
.flow-node .fn-icon{ font-size:22px; margin-bottom:2px; }
.flow-node .fn-label{ font-size:11px; font-weight:700; color:var(--text); line-height:1.3; }
.flow-node .fn-role{ font-size:10px; color:var(--text-light); margin-top:1px; }
.flow-arrow{ font-size:16px; color:var(--text-light); flex-shrink:0; padding:0 2px; }

/* ── 敏感信息 ── */
.sensitive-hidden{ filter:blur(4px); user-select:none; }

/* ── 角标 / 加载条 / 下拉刷新 ── */
.tab-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  background:#ef4444; color:#fff; font-size:10px; font-weight:700; line-height:1;
  margin-left:3px; vertical-align:middle; position:relative; top:-1px;
}
#topprog{ position:fixed; top:0; left:0; height:3px; width:0; z-index:9999; border-radius:0 3px 3px 0; opacity:0; transition:opacity .3s; }
#ptr-ind{
  position:fixed; top:112px; left:50%; transform:translate(-50%,-30px);
  background:rgba(30,41,59,.86); color:#fff; font-size:12px; padding:7px 16px;
  border-radius:22px; z-index:999; opacity:0; transition:opacity .18s,transform .18s;
  pointer-events:none; box-shadow:var(--shadow-lift);
}
#ptr-ind.on{ opacity:1; transform:translate(-50%,0); }
#ptr-ind .spin{ display:inline-block; margin-right:6px; animation:ptrSpin .8s linear infinite; }
@keyframes ptrSpin{ to{ transform:rotate(360deg); } }

/* ── 移动端 ── */
@media (max-width:640px){
  .container{ padding:12px 10px 24px; }
  .top-bar{ padding:10px 12px; }
  .top-bar h1{ font-size:16px; }
  .tab-nav{ padding:7px 8px; top:50px; }
  .card{ border-radius:13px; }
  .form-control,.form-group input,.form-group select,.form-group textarea{ font-size:15px; min-height:46px; }
  .btn{ min-height:46px; font-size:15px; }
  .page-header h2{ font-size:18px; }
  .stat-value,.stat-num{ font-size:30px; }
}

/* ═══════════════════════════════════════════════════════════
   详情/子页面统一样式（客户/样品/产品详情共用）
   ═══════════════════════════════════════════════════════════ */
/* 返回链接 */
.back-link{
  display:inline-flex; align-items:center; gap:4px;
  color:var(--text-light); text-decoration:none; font-size:13px; font-weight:500;
  margin-bottom:10px; padding:4px 10px 4px 4px; border-radius:8px;
}
.back-link:active{ background:var(--bg); }
.detail-hero{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }

/* Tag 徽章（详情头/列表用） */
.tag{ display:inline-block; padding:2px 10px; border-radius:20px; font-size:11px; font-weight:600; vertical-align:middle; }
.tag-info{ background:#dbeafe; color:#1e40af; }
.tag-success,.tag-done,.tag-approved,.tag-pass{ background:#dcfce7; color:#166534; }
.tag-warning,.tag-pending{ background:#fef3c7; color:#92400e; }
.tag-danger,.tag-rejected,.tag-fail{ background:#f1f5f9; color:#64748b; }

/* 详情信息网格 */
.detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4px 18px; }
.detail-field{ padding:9px 0; border-bottom:1px solid var(--border-soft); }
.detail-grid > .detail-field:nth-last-child(-n+2){ border-bottom:none; }
.field-label{ font-size:12px; color:var(--text-light); font-weight:500; margin-bottom:2px; }
.field-value{ font-size:14px; color:var(--text); word-break:break-word; }

/* 进度条（产品详情） */
.progress-bar{ width:100%; background:#eef2f6; border-radius:20px; overflow:hidden; position:relative; }
.progress-bar-fill{ background:var(--primary); border-radius:20px; transition:width .5s ease; }
.progress-bar-fill.green{ background:var(--success); }
.progress-bar-fill.orange{ background:var(--warning); }

/* 里程碑（产品详情） */
.milestones{ margin-top:6px; }
.milestone{
  display:flex; align-items:center; gap:6px; padding:10px 12px; margin:6px 0;
  background:var(--bg-soft); border:1px solid var(--border-soft); border-radius:10px;
  font-size:13px; color:var(--text-light);
}
.milestone.done{ background:#f0fdf4; border-color:#bbf7d0; color:#166534; }

/* 审批流程节点（样品详情等） */
.approval-flow{ display:flex; flex-direction:column; gap:8px; }
.approval-node{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; background:var(--bg-soft); border:1.5px solid var(--border);
  border-radius:12px;
}
.approval-node .node-label{ font-size:13px; font-weight:600; color:var(--text); }
.approval-node .node-status{ font-size:12px; font-weight:600; color:var(--text-light); }
.approval-node.passed{ background:#f0fdf4; border-color:#86efac; }
.approval-node.passed .node-status{ color:#16a34a; }
.approval-node.rejected{ background:#fef2f2; border-color:#fecaca; }
.approval-node.rejected .node-status{ color:#dc2626; }
.approval-node.pending{ border-style:dashed; }

/* 子页卡片内小块标题 */
.sub-title{ font-size:14px; font-weight:700; color:var(--text); margin:16px 0 8px; }

/* 列表内链接 */
.table-wrap tbody a{ color:var(--primary); text-decoration:none; font-weight:600; }
.table-wrap tbody a:active{ text-decoration:underline; }

@media (max-width:640px){
  .detail-grid{ grid-template-columns:1fr; }
  .detail-hero{ flex-direction:column; align-items:flex-start; }
}

/* ═══════════════════════════════════════════════════════════
   列表卡片共用样式（研发/立项/样品列表统一视觉）
   ═══════════════════════════════════════════════════════════ */
.pcard{background:#fff;border-radius:12px;margin-bottom:8px;box-shadow:var(--shadow-card);overflow:hidden;position:relative;}
.pcard > a{text-decoration:none;color:inherit;display:block;padding:12px 14px 6px;}
.pcard-body{display:flex;align-items:flex-start;gap:10px;}
.pcard-left{flex:1;min-width:0;}
.pcard-name{font-size:15px;font-weight:700;color:#1e293b;line-height:1.3;}
.pcard-name .pid{font-size:10px;color:#94a3b8;font-weight:400;margin-left:4px;}
.pcard-meta{font-size:12px;color:#64748b;margin-top:4px;display:flex;flex-wrap:wrap;gap:3px 10px;}
.pcard-meta b{font-weight:700;color:#334155;}
.pcard-status{position:absolute;right:12px;top:12px;font-size:11px;font-weight:700;padding:2px 10px;border-radius:12px;letter-spacing:.2px;display:inline-flex;align-items:center;gap:4px;}
.pcard-status.done{background:#dcfce7;color:#15803d;}
.pcard-status.running,.pcard-status.approved,.pcard-status.info{background:#dbeafe;color:#1d4ed8;}
.pcard-status.paused{background:#f1f5f9;color:#64748b;}
.pcard-status.waiting,.pcard-status.pending{background:#fef3c7;color:#b45309;}
/* 已撤销/已驳回 → 一律灰色，不做彩色强调 */
.pcard-status.rejected{background:#f1f5f9;color:#64748b;}
.pcard-desc{font-size:12px;color:#64748b;margin-top:6px;line-height:1.5;padding-right:6px;}
.pcard-foot{padding:2px 14px 10px;}
.pcard-process{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-top:6px;}
.proc-step{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#64748b;background:#f1f5f9;border-radius:12px;padding:3px 9px;}
.proc-step.ok{background:#dcfce7;color:#15803d;}
.proc-step.no{background:#fee2e2;color:#b91c1c;}
.proc-step.todo{background:#fff;border:1px dashed #cbd5e1;}
/* 红点脉冲（审批中/未完成） */
.todo-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#ef4444;vertical-align:middle;animation:tdPulse 1.2s infinite;flex-shrink:0;}
@keyframes tdPulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.6);}70%{box-shadow:0 0 0 7px rgba(239,68,68,0);}100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}}
/* 分组头 */
.sec-header{display:flex;align-items:center;gap:8px;padding:12px 4px 6px;}
.sec-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.sec-title{font-size:14px;font-weight:700;color:#1e293b;}
.sec-count{font-size:12px;color:#94a3b8;font-weight:400;}
.sec-subtitle{font-size:12px;font-weight:600;color:#64748b;padding:6px 4px 2px;display:flex;align-items:center;gap:4px;}
/* 列表页上方操作条 */
.action-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 0 10px;}

/* 列表页分类标签栏 + 分组区块 */
.tab-scroll{display:flex;gap:6px;overflow-x:auto;padding:6px 2px 10px;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.tab-scroll::-webkit-scrollbar{display:none;}
.tab-btn{border:1px solid var(--border,#e2e8f0);background:#fff;color:#475569;padding:7px 14px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;flex-shrink:0;}
.tab-btn.active{background:var(--primary,#2563eb);color:#fff;border-color:var(--primary,#2563eb);}
.tab-btn .cnt{font-size:10px;background:rgba(0,0,0,.1);border-radius:10px;padding:1px 6px;margin-left:3px;font-weight:400;}
.tab-btn.active .cnt{background:rgba(255,255,255,.25);}
.list-section{padding:0 2px;}

/* ═══════════════════════════════════════════════════════════
   流程进度时间轴（研发/立项/样品通用 · 标识卡在哪个节点）
   ═══════════════════════════════════════════════════════════ */
.flow-tl{display:flex;align-items:flex-start;justify-content:space-between;gap:0;padding:8px 2px 4px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.ftl-node{flex:1;min-width:52px;display:flex;flex-direction:column;align-items:center;position:relative;padding:2px;}
.ftl-node::before{content:'';position:absolute;top:9px;left:-50%;width:100%;height:2px;background:#e2e8f0;z-index:1;}
.ftl-node:first-child::before{display:none;}
.ftl-dot{width:16px;height:16px;border-radius:50%;background:#e2e8f0;border:2px solid #fff;box-shadow:0 0 0 1.5px #e2e8f0;z-index:2;margin-bottom:3px;flex-shrink:0;}
.ftl-node.done::before{background:#86efac;}
.ftl-node.done .ftl-dot{background:var(--success,#16a34a);box-shadow:0 0 0 1.5px #bbf7d0;}
.ftl-node.cur::before{background:#93c5fd;}
.ftl-node.cur .ftl-dot{background:var(--primary,#2563eb);box-shadow:0 0 0 1.5px #bfdbfe;animation:ftlPulse 1.2s infinite;}
.ftl-node.reject .ftl-dot{background:#cbd5e1;box-shadow:0 0 0 1.5px #e2e8f0;}
.ftl-node.todo::before{background:#e2e8f0;}
.ftl-label{font-size:10px;color:#475569;white-space:nowrap;text-align:center;line-height:1.15;}
.ftl-label small{display:block;font-size:8px;color:#94a3b8;font-weight:400;}
@keyframes ftlPulse{0%{box-shadow:0 0 0 0 rgba(37,99,235,.5),0 0 0 1.5px #bfdbfe;}70%{box-shadow:0 0 0 9px rgba(37,99,235,0),0 0 0 1.5px #bfdbfe;}100%{box-shadow:0 0 0 0 rgba(37,99,235,0),0 0 0 1.5px #bfdbfe;}}
/* 卡在当前节点横幅 */
.flow-banner{display:flex;align-items:center;gap:6px;background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;font-size:12px;border-radius:8px;padding:5px 10px;margin:2px 2px 2px;}
.flow-banner.done{background:#f0fdf4;border-color:#bbf7d0;color:#166534;}
.flow-banner.muted{background:#f8fafc;border-color:#e2e8f0;color:#64748b;}
.flow-banner .fb-dot{width:9px;height:9px;border-radius:50%;background:var(--primary,#2563eb);flex-shrink:0;animation:ftlPulse .9s infinite;}

/* ═══════════ 搜索/筛选栏（.search-bar）v13 ═══════════ */
.search-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:10px;margin:0 0 14px;box-shadow:0 1px 2px rgba(15,23,42,.04);}
.search-bar input[type=text],.search-bar input[type=search],.search-bar input:not([type]){
  flex:1 1 200px;min-width:150px;padding:9px 12px 9px 36px;border:1px solid #e2e8f0;border-radius:10px;
  font-size:14px;color:var(--text,#1e293b);background:#f8fafc url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%2394a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>') no-repeat 12px center;background-size:16px;transition:border-color .15s,box-shadow .15s,background .15s;}
.search-bar input:focus{outline:none;border-color:var(--primary,#2563eb);background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%232563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>') no-repeat 12px center;background-size:16px;box-shadow:0 0 0 3px rgba(37,99,235,.12);}
.search-bar select{padding:9px 30px 9px 12px;border:1px solid #e2e8f0;border-radius:10px;font-size:14px;color:var(--text,#1e293b);background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') no-repeat right 10px center;background-size:14px;appearance:none;-webkit-appearance:none;cursor:pointer;transition:border-color .15s,box-shadow .15s;min-width:110px;}
.search-bar select:focus{outline:none;border-color:var(--primary,#2563eb);box-shadow:0 0 0 3px rgba(37,99,235,.12);}
.search-bar .btn{padding:9px 16px;border-radius:10px;white-space:nowrap;}
.search-bar .filter-count{margin-left:auto;font-size:12.5px;color:var(--text-light,#64748b);background:#f1f5f9;padding:7px 12px;border-radius:10px;white-space:nowrap;}
.search-bar .filter-count b{color:var(--primary,#2563eb);font-weight:700;}
@media(max-width:640px){.search-bar input[type=text],.search-bar input:not([type]){flex:1 1 100%;}.search-bar .filter-count{margin-left:0;}}

/* ═══════════ 申请/新增类表单美化 v14 ═══════════ */
.form-hero{padding:16px 18px;border-radius:14px;margin-bottom:14px;background:linear-gradient(120deg,rgba(37,99,235,.08),rgba(37,99,235,.02));border:1px solid rgba(37,99,235,.14);}
.form-hero h3{margin:0;font-size:18px;font-weight:700;color:#1e293b;display:flex;align-items:center;gap:8px;}
.form-hero p{margin:4px 0 0;font-size:12.5px;color:#64748b;line-height:1.5;}
.form-section{display:flex;align-items:center;gap:8px;margin:20px 0 12px;padding-bottom:8px;border-bottom:1.5px solid #eef2f7;font-size:14px;font-weight:700;color:#1e293b;}
.form-section:first-of-type{margin-top:0;}
.form-section .sec-ic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#eff6ff;color:#2563eb;font-size:14px;flex-shrink:0;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:640px){.form-row{grid-template-columns:1fr;}}
.form-group{margin-bottom:12px;}
.form-group label{display:block;font-size:13px;font-weight:600;color:#1e293b;margin-bottom:6px;}
.form-group .req{color:#dc2626;margin-left:2px;}
.form-hint{font-size:12px;color:#94a3b8;margin-top:5px;line-height:1.45;}
/* 表单输入控件（作用于 .card-body 内的裸 input/select/textarea） */
.card-body input[type=text],.card-body input:not([type]),.card-body input[type=tel],.card-body input[type=number],
.card-body select,.card-body textarea{
  width:100%;padding:11px 13px;border:1.5px solid #e2e8f0;border-radius:12px;font-size:15px;
  background:#fff;min-height:46px;color:#1e293b;transition:border-color .15s,box-shadow .15s,background .15s;
  box-sizing:border-box;
}
.card-body input:focus,.card-body select:focus,.card-body textarea:focus{
  outline:none;border-color:#2563eb;background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.card-body textarea{min-height:92px;resize:vertical;}
.form-actions{display:flex;gap:10px;padding:12px 2px;margin-top:area 6px;}
.form-actions{position:sticky;bottom:0;gap:10px;padding:12px;margin:6px -18px -18px;background:rgba(248,250,252,.94);backdrop-filter:blur(6px);border-top:1px solid #eef2f7;border-radius:0 0 14px 14px;}
.form-actions .btn{padding:11px 22px;border-radius:12px;min-height:44px;}

/* ═══════════════════════════════════════════════
   移动端人性化/美化增强 v15（主流手机屏 < 600px）
   · 更大触控目标 · 更柔更圆按钮 · 刘海安全区 · 留白呼吸
   ═══════════════════════════════════════════════ */
.btn{
  min-height:46px;
  letter-spacing:.2px;
  box-shadow:0 2px 6px rgba(22,33,62,.06);
  transition:opacity .15s, transform .1s, box-shadow .15s;
}
.btn-primary{ box-shadow:0 3px 10px rgba(37,99,235,.28); }
.btn:active{ transform:scale(.96); }
.btn-sm{ min-height:38px; gap:5px; }

/* iPhone 刘海安全区适配（桌面宽度不受影响） */
@supports(padding:max(0px)){
  .top-bar{
    padding-left:max(14px,env(safe-area-inset-left));
    padding-right:max(14px,env(safe-area-inset-right));
  }
  .container{
    padding-left:max(12px,env(safe-area-inset-left));
    padding-right:max(12px,env(safe-area-inset-right));
    padding-bottom:max(32px,env(safe-area-inset-bottom));
  }
  .form-actions{ padding-bottom:max(12px,env(safe-area-inset-bottom)); }
}

/* 首页统计：更圆更柔 */
.stat-card{ border-radius:18px; padding:20px 18px; box-shadow:var(--shadow-card); }

/* ============ 主流手机屏 < 600px ============ */
@media (max-width:600px){
  /* 顶栏：自动换行、不拥挤 */
  .top-bar{ flex-wrap:wrap; gap:6px 10px; padding:12px 12px; align-items:center; }
  .top-bar h1{ font-size:16px; }
  .top-bar .right-wrap{ margin-left:auto; }
  .top-bar .user-badge{ max-width:104px; font-size:11px; padding:4px 10px; }

  /* 按钮：整块化 + 更舒服的触控区 */
  .btn{ min-height:48px; font-size:15px; border-radius:14px; }
  .btn-sm{ min-height:44px; font-size:14px; padding:8px 16px; border-radius:12px; }
  .form-actions{ position:sticky; bottom:0; gap:12px; padding:12px; }
  .form-actions .btn{ flex:1; min-height:50px; font-size:15px; }
  .btn-group .btn{ flex:1; }

  /* 卡片留白呼吸 */
  .card-body{ padding:18px; }
  .card-header{ padding:16px 18px 12px; }

  /* 流程卡脚操作按钮：两列整块、好点易触 */
  .pcard-foot .btn-sm{ flex:1; min-width:0; justify-content:center; }
  .pcard-foot form[method=POST]{ display:flex; }
  .pcard-foot form button[type=submit]{ flex:1; min-height:44px; flex:1 1 0; }
  .pcard-foot form input[type=text]{ min-height:46px; font-size:16px; }

  /* 表单输入：16px 防 iOS 聚焦自动放大 */
  .card-body input[type=text],.card-body input:not([type]),.card-body input[type=tel],
  .card-body input[type=number],.card-body input[type=date],.card-body select,.card-body textarea,
  .form-control{
    min-height:48px; font-size:16px;
  }
  .card-body input[type=date]{ font-size:15px; }
  textarea.form-control{ min-height:96px; }

  /* 导航标签更大更易点 */
  .tab-nav{ padding:8px 8px; }
  .tab-row a{ padding-top:11px; padding-bottom:9px; font-size:13px; }
  .tab-row a .tab-icon{ font-size:22px; }

  /* 列表项 / 详情行 更大触控与行距 */
  .list-item{ padding:15px 16px; }
  .item-title{ font-size:16px; }
  .item-sub{ font-size:13px; }
  .detail-row{ padding:12px 2px; }
  .detail-label{ width:104px; }
  .detail-value{ font-size:15px; }

  /* 空状态 */
  .empty-state{ padding:52px 24px; }

  /* 表格横向滑动更顺滑 */
  .table-wrap{ -webkit-overflow-scrolling:touch; }
  table th,table td{ padding:13px 12px; font-size:14px; }

  /* 首页统计卡两列更透气 */
  .stats-grid{ gap:12px; }
}

/* ═══ 五部门并行审批：清爽卡片网格 v16 ═══ */
.approval-flow{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:10px;
}
.approval-node{
  padding:13px 14px; background:var(--bg-soft); border:1.5px solid var(--border);
  border-radius:14px; display:flex; flex-direction:column; gap:9px;
}
.approval-node.passed{ background:#f0fdf4; border-color:#86efac; }
.approval-node.rejected{ background:#fef2f2; border-color:#fecaca; }
.approval-node.pending{ border-style:dashed; }
.approval-node .node-label,
.approval-node .node-status{ display:none; }
.an-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.an-title{ font-size:14px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:6px; }
.an-badge{ font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap; }
.an-badge.p{ background:#fef3c7; color:#b45309; }
.an-badge.a{ background:#dcfce7; color:#166534; }
.an-badge.r{ background:#fee2e2; color:#b91c1c; }
.an-comment{ font-size:12px; color:#6b7280; background:#fff; border:1px solid var(--border-soft); border-radius:8px; padding:7px 10px; word-break:break-all; }
.an-actions{ display:flex; flex-direction:column; gap:8px; margin-top:auto; }
.an-remind{ width:100%; }
.an-remind .btn{ width:100%; min-height:38px; justify-content:center; }
.an-approve{ display:flex; flex-direction:column; gap:8px; }
.an-approve input{ width:100%; padding:9px 11px; border:1.5px solid var(--border); border-radius:10px; font-size:13px; min-height:40px; background:#fff; box-sizing:border-box; }
.an-approve .an-btns{ display:flex; gap:8px; }
.an-approve .an-btns .btn{ flex:1; min-height:42px; justify-content:center; }
@media(max-width:560px){ .approval-flow{ grid-template-columns:1fr; } }

/* ── 下拉式导航菜单 ── */
.nav-hd{ display:flex; align-items:center; gap:8px; min-height:38px; }
.nav-hamburger{ background:rgba(37,99,235,.08); border:none; color:var(--brand,#2563eb); font-size:20px; cursor:pointer; padding:4px 12px; border-radius:10px; min-height:38px; line-height:1; }
.nav-current{ flex:1; font-size:15px; font-weight:600; color:#1e293b; display:flex; align-items:center; gap:4px; }
.nav-caret{ cursor:pointer; color:#94a3b8; font-size:13px; padding:2px 6px; }
.tab-dropdown{ position:absolute; left:8px; right:8px; top:calc(100% + 6px); z-index:120; background:#fff; border:1px solid var(--border,#e2e8f0); border-radius:14px; box-shadow:0 14px 34px rgba(15,23,42,.16); padding:8px; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.tab-drop-item{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 6px 10px; border-radius:11px; color:#475569; text-decoration:none; font-size:13px; font-weight:600; transition:background .15s; }
.tab-drop-item .tab-icon{ font-size:22px; line-height:1.2; }
.tab-drop-item:hover{ background:#f1f5f9; }
.tab-drop-item.active{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ grid-template-columns:repeat(2,1fr); padding:10px; } .tab-drop-item{ padding:15px 6px; font-size:14px; } }

/* ── 下拉导航-纯文字版 ── */
.tab-dropdown{ grid-template-columns:1fr; padding:8px; gap:4px; max-height:min(70vh,470px); overflow-y:auto; }
.tab-drop-item{ flex-direction:row; justify-content:center; padding:13px 10px; border-radius:10px; font-size:14px; letter-spacing:.5px; }
.tab-drop-item .tab-icon{ display:none; }
.tab-drop-item:hover{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ grid-template-columns:1fr; padding:8px; } .tab-drop-item{ padding:16px 10px; font-size:15px; min-height:48px; } }

/* ── 下拉导航-紧凑双列纯文字 ── */
.tab-dropdown{ grid-template-columns:repeat(2,1fr) !important; gap:4px; padding:6px; max-height:min(60vh,430px); overflow-y:auto; }
.tab-drop-item{ flex-direction:column; justify-content:center; padding:8px 4px; border-radius:8px; font-size:12px; color:#475569; }
.tab-drop-item .tab-icon{ display:none !important; }
.tab-drop-item .tab-label{ line-height:1.2; }
.tab-drop-item:hover{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ grid-template-columns:repeat(2,1fr); gap:4px; padding:6px; } .tab-drop-item{ padding:9px 4px; font-size:12px; } }

/* ── 下拉导航-单列左对齐紧凑 ── */
.tab-dropdown{ grid-template-columns:1fr !important; gap:2px; padding:5px; max-height:min(58vh,400px); overflow-y:auto; }
.tab-drop-item{ flex-direction:row; justify-content:flex-start; align-items:center; padding:8px 12px; border-radius:7px; font-size:13px; color:#475569; }
.tab-drop-item .tab-icon{ display:none !important; }
.tab-drop-item:active{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ grid-template-columns:1fr; gap:2px; padding:5px; } .tab-drop-item{ padding:10px 12px; font-size:13px; } }

/* ── 下拉导航-行高-30% ── */
.tab-drop-item{ padding-top:6px !important; padding-bottom:6px !important; }
@media (max-width:640px){ .tab-drop-item{ padding:7px 12px !important; } }

/* ── 下拉导航-行高再缩 ── */
.tab-drop-item{ padding-top:4px !important; padding-bottom:4px !important; }
@media (max-width:640px){ .tab-drop-item{ padding:5px 12px !important; } }
/* ═══════════════════════════════════════════════════════════
   辉科食品 CRM — 移动端界面 v9
   设计理念：人性化 · 简单明了 · 清晰好读
   · 柔和配色、干净层级、友好文案、轻量微交互
   ═══════════════════════════════════════════════════════════ */
:root {
  /* 品牌 & 状态（柔和、清晰） */
  --primary:#2563eb; --primary-dark:#1d4ed8;
  --brand:#2563eb; --brand-soft:#eef2ff;
  --success:#16a34a; --warning:#ea580c; --danger:#dc2626;
  /* 状态色：✅绿=完成 / 🔵蓝=进行中 / ⚪灰=未开始 / 🔴红=驳回 */
  --st-done:#16a34a; --st-run:#2563eb; --st-wait:#94a3b8; --st-reject:#dc2626; --st-warn:#d97706;
  /* 中性 */
  --bg:#f2f4f8; --bg-soft:#f7f9fc;
  --card:#ffffff; --text:#1f2a3d; --text-light:#6b7a90; --text-secondary:#6b7a90;
  --border:#e3e8ef; --border-soft:#eef2f6;
  /* 圆角 / 阴影（柔和） */
  --radius:14px; --radius-sm:10px;
  --shadow-card:0 1px 2px rgba(22,33,62,.05),0 2px 8px rgba(22,33,62,.05);
  --shadow-lift:0 8px 24px rgba(30,45,90,.10);
}
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  background:var(--bg); color:var(--text); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{ -webkit-tap-highlight-color:transparent; }

/* ── 顶部栏：清爽品牌色 ── */
.top-bar{
  position:sticky; top:0; z-index:100;
  background:linear-gradient(135deg,#2563eb,#4338ca);
  color:#fff; padding:13px 16px;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 3px 12px rgba(37,99,235,.20);
}
.top-bar h1{ font-size:17px; font-weight:700; }
.top-bar .right-wrap{ display:flex; align-items:center; gap:8px; }
.top-bar .right-wrap a{ color:#fff; text-decoration:none; font-size:13px; }
.top-bar .right-wrap a:active{ opacity:.6; }
.top-bar .user-badge{
  background:rgba(255,255,255,.2); padding:4px 12px; border-radius:20px;
  font-size:12px; font-weight:600; max-width:150px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.top-bar .notif-icon{
  position:relative; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; font-size:18px;
  cursor:pointer;
}
.top-bar .notif-icon:active{ opacity:.7; }
.top-bar .notif-icon .badge{
  position:absolute; top:-3px; right:-3px; background:#ef4444; color:#fff;
  border-radius:50%; min-width:19px; height:19px; font-size:10px; font-weight:700;
  display:none; align-items:center; justify-content:center; padding:0 4px; border:2px solid #fff;
}

/* ── 导航：简洁双排 ── */
.tab-nav{
  position:sticky; top:52px; z-index:99;
  background:rgba(255,255,255,.96); border-bottom:1px solid var(--border);
  box-shadow:0 1px 3px rgba(22,33,62,.04);
  padding:8px 10px;
}
.tab-row{ display:flex; gap:6px; }
.tab-row + .tab-row{ margin-top:5px; }
.tab-row a{
  flex:1; min-width:0; text-align:center; padding:9px 4px 7px;
  text-decoration:none; font-size:12px; font-weight:500; color:var(--text-light);
  border-radius:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:background .15s,color .15s;
}
.tab-row a:active{ background:#f1f5f9; }
.tab-row a.active{ background:var(--brand); color:#fff; font-weight:600; }
.tab-row a .tab-icon{ font-size:20px; display:block; margin-bottom:2px; line-height:1.2; }
.tab-row a.active .tab-badge{ background:#fff; color:#ef4444; }

/* ── 内容区 ── */
.container{ max-width:520px; margin:0 auto; padding:14px 12px 30px; }

/* ── 卡片：干净白卡 ── */
.card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow-card);
  margin-bottom:14px; overflow:hidden; border:1px solid var(--border-soft);
}
.card-header{
  padding:15px 16px 11px; font-size:15px; font-weight:700; color:var(--text);
  border-bottom:1px solid var(--border-soft); display:flex; align-items:center; gap:8px;
}
.card-body{ padding:16px; }

/* ── 首页统计卡 ── */
.stats-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:2px 0 14px; }
.stat-card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow-card);
  padding:18px 16px; border:1px solid var(--border-soft);
}
.stat-value,.stat-num{ font-size:34px; font-weight:800; line-height:1.1; color:var(--primary); margin-bottom:5px; }
.stat-value[style*="color"],.stat-num[style*="color"]{ color:inherit; }
.stat-label{ font-size:13px; color:var(--text-light); font-weight:500; }
.stat-card .stat-icon{ font-size:18px; margin-bottom:2px; }

/* ── 按钮：清晰柔和 ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 20px; border-radius:12px; font-size:14px; font-weight:600;
  border:none; cursor:pointer; text-decoration:none; min-height:44px;
  transition:opacity .15s, transform .1s;
}
.btn:active{ opacity:.8; transform:scale(.97); }
.btn-primary{ background:var(--primary); color:#fff; box-shadow:0 2px 6px rgba(37,99,235,.25); }
.btn-success{ background:var(--success); color:#fff; }
.btn-warning{ background:var(--warning); color:#fff; }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-outline{ background:#fff; border:1.5px solid var(--border); color:var(--text); }
.btn-outline:active{ background:var(--bg); }
.btn-block{ width:100%; }
.btn-sm{ padding:6px 14px; font-size:13px; min-height:auto; border-radius:10px; }
.btn-group{ display:flex; gap:8px; flex-wrap:wrap; }

/* ── 表单 ── */
.form-group{ margin-bottom:14px; }
.form-group label{ display:block; font-size:13px; font-weight:600; color:var(--text); margin-bottom:6px; }
.form-control{
  width:100%; padding:11px 13px; border:1.5px solid var(--border);
  border-radius:12px; font-size:15px; background:#fff; min-height:46px;
  transition:border-color .15s, box-shadow .15s;
}
.form-control:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
textarea.form-control{ min-height:84px; resize:vertical; }
select.form-control{ appearance:auto; }

/* ── 列表项 ── */
.list-item{
  display:flex; align-items:center; padding:14px 16px;
  border-bottom:1px solid var(--border-soft); text-decoration:none; color:var(--text);
}
.list-item:last-child{ border-bottom:none; }
.list-item:active{ background:var(--bg-soft); }
.item-main{ flex:1; min-width:0; }
.item-title{ font-size:15px; font-weight:600; margin-bottom:3px; }
.item-sub{ font-size:12px; color:var(--text-light); }
.item-right{ text-align:right; flex-shrink:0; margin-left:8px; }
.item-badge{
  display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600;
}
.badge-pending{ background:#fef3c7; color:#92400e; }
.badge-approved{ background:#dcfce7; color:#166534; }
.badge-rejected{ background:#fee2e2; color:#991b1b; }
.badge-shipped{ background:#dbeafe; color:#1e40af; }
.badge-signed{ background:#e0e7ff; color:#3730a3; }
.badge-pass{ background:#dcfce7; color:#166534; }
.badge-fail{ background:#fee2e2; color:#991b1b; }

/* ── 状态徽章 chips（清晰可读） ── */
.st{ display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; line-height:1.4; }
.st::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.st-done{ background:#dcfce7; color:#166534; }
.st-run{ background:#dbeafe; color:#1e40af; }
.st-wait{ background:#eef2f6; color:#64748b; }
.st-reject{ background:#fee2e2; color:#b91c1c; }
.st-warn{ background:#fef3c7; color:#b45309; }

/* ── 细进度条 ── */
.pbar{ height:7px; background:#eef2f6; border-radius:7px; overflow:hidden; position:relative; }
.pbar>i{ display:block; height:100%; border-radius:7px; background:var(--primary); transition:width .4s ease; }
.pbar.p-done>i{ background:var(--success); }
.pbar.p-warn>i{ background:var(--warning); }

/* ── Flash 消息 ── */
.flash{
  padding:12px 16px; border-radius:12px; margin-bottom:12px; font-size:14px; font-weight:500;
  border:1px solid transparent;
}
.flash-success{ background:#f0fdf4; color:#166534; border-color:#bbf7d0; }
.flash-danger{ background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.flash-warning{ background:#fffbeb; color:#92400e; border-color:#fde68a; }

/* ── 详情行 ── */
.detail-row{ display:flex; padding:10px 0; border-bottom:1px solid var(--border-soft); }
.detail-label{ width:96px; flex-shrink:0; font-size:13px; color:var(--text-light); font-weight:500; }
.detail-value{ flex:1; font-size:14px; color:var(--text); }

/* ── 流程步骤 ── */
.progress-steps{ display:flex; padding:14px 8px; gap:2px; }
.progress-step{ flex:1; text-align:center; font-size:11px; color:var(--text-light); position:relative; }
.progress-step .dot{
  width:26px; height:26px; border-radius:50%; background:#e3e8ef;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; margin-bottom:5px; color:#fff;
}
.progress-step.active .dot{ background:var(--primary); }
.progress-step.done .dot{ background:var(--success); }
.progress-step.fail .dot{ background:var(--danger); }

/* ── 表格 ── */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table{ width:100%; border-collapse:collapse; font-size:13px; }
table th,table td{ padding:11px 12px; text-align:left; white-space:nowrap; }
table thead th{ background:#f8fafc; color:var(--text-light); font-size:12px; font-weight:700; }
table tbody tr{ border-bottom:1px solid var(--border-soft); }
table tbody tr:active{ background:var(--bg-soft); }

/* ── 空状态 ── */
.empty-state{ text-align:center; padding:44px 24px; color:var(--text-light); border-radius:var(--radius); }
.empty-state .icon{ font-size:48px; margin-bottom:12px; display:block; }
.empty-state p{ font-size:14px; }

/* ── 页面标题 ── */
.page-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.page-header h2{ font-size:19px; font-weight:800; }

/* ── 角色标记 ── */
.role-tag{ display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600; }
.role-admin{ background:#e0e7ff; color:#3730a3; }
.role-sales{ background:#dbeafe; color:#1e40af; }
.role-market{ background:#fef3c7; color:#92400e; }
.role-warehouse{ background:#dcfce7; color:#166534; }
.role-marketer{ background:#f3e8ff; color:#6b21a8; }
.role-general_manager{ background:#ffedd5; color:#9a3412; }
.role-finance{ background:#fce4ec; color:#9b1c1c; }
.role-quality{ background:#ccfbf1; color:#0f766e; }
.role-hr{ background:#ffedd5; color:#c2410c; }
.role-workshop{ background:#f1f5f9; color:#475569; }
.role-logistics{ background:#e0f2fe; color:#0369a1; }
.role-rd{ background:#ede9fe; color:#6d28d9; }
.role-procurement{ background:#fce7f3; color:#9d174d; }

/* ── 分析页 ── */
.ana-tabs{
  display:flex; gap:4px; overflow-x:auto; background:#fff; border-radius:12px;
  margin-bottom:14px; padding:4px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  box-shadow:var(--shadow-card);
}
.ana-tabs::-webkit-scrollbar{ display:none; }
.ana-tabs a{
  flex-shrink:0; padding:9px 14px; text-decoration:none; font-size:13px;
  font-weight:600; color:var(--text-light); border-radius:9px;
}
.ana-tabs a.active{ background:var(--brand-soft); color:var(--primary); font-weight:700; }
.ana-stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.ana-stat{ background:#fff; border-radius:12px; padding:16px; text-align:center; box-shadow:var(--shadow-card); }
.ana-stat .num{ font-size:24px; font-weight:800; color:var(--primary); }
.ana-stat .label{ font-size:11px; color:var(--text-light); margin-top:3px; }
.bar-chart{ padding:12px 16px; }
.bar-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.bar-label{ width:72px; flex-shrink:0; font-size:12px; color:var(--text); text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-track{ flex:1; height:20px; background:#f1f5f9; border-radius:10px; overflow:hidden; }
.bar-fill{ height:100%; border-radius:10px; background:var(--primary); transition:width .4s ease; min-width:4px; }
.bar-val{ font-size:12px; font-weight:700; color:var(--text); min-width:30px; text-align:right; }
.rank-list{ list-style:none; }
.rank-list li{ display:flex; align-items:center; padding:11px 16px; border-bottom:1px solid var(--border-soft); gap:10px; }
.rank-list li:last-child{ border-bottom:none; }
.rank-num{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex-shrink:0; }
.rank-1{ background:#fef3c7; color:#d97706; }
.rank-2{ background:#e2e8f0; color:#475569; }
.rank-3{ background:#fde68a; color:#92400e; }
.rank-n{ background:#f1f5f9; color:#94a3b8; }

/* ── 流程总览 ── */
.flow-overview{ display:flex; align-items:center; justify-content:center; gap:2px; padding:0 4px; }
.flow-node{ flex:1; text-align:center; background:#f8fafc; border-radius:10px; padding:7px 2px; border:1.5px solid var(--border); max-width:92px; }
.flow-node .fn-icon{ font-size:22px; margin-bottom:2px; }
.flow-node .fn-label{ font-size:11px; font-weight:700; color:var(--text); line-height:1.3; }
.flow-node .fn-role{ font-size:10px; color:var(--text-light); margin-top:1px; }
.flow-arrow{ font-size:16px; color:var(--text-light); flex-shrink:0; padding:0 2px; }

/* ── 敏感信息 ── */
.sensitive-hidden{ filter:blur(4px); user-select:none; }

/* ── 角标 / 加载条 / 下拉刷新 ── */
.tab-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  background:#ef4444; color:#fff; font-size:10px; font-weight:700; line-height:1;
  margin-left:3px; vertical-align:middle; position:relative; top:-1px;
}
#topprog{ position:fixed; top:0; left:0; height:3px; width:0; z-index:9999; border-radius:0 3px 3px 0; opacity:0; transition:opacity .3s; }
#ptr-ind{
  position:fixed; top:112px; left:50%; transform:translate(-50%,-30px);
  background:rgba(30,41,59,.86); color:#fff; font-size:12px; padding:7px 16px;
  border-radius:22px; z-index:999; opacity:0; transition:opacity .18s,transform .18s;
  pointer-events:none; box-shadow:var(--shadow-lift);
}
#ptr-ind.on{ opacity:1; transform:translate(-50%,0); }
#ptr-ind .spin{ display:inline-block; margin-right:6px; animation:ptrSpin .8s linear infinite; }
@keyframes ptrSpin{ to{ transform:rotate(360deg); } }

/* ── 移动端 ── */
@media (max-width:640px){
  .container{ padding:12px 10px 24px; }
  .top-bar{ padding:10px 12px; }
  .top-bar h1{ font-size:16px; }
  .tab-nav{ padding:7px 8px; top:50px; }
  .card{ border-radius:13px; }
  .form-control,.form-group input,.form-group select,.form-group textarea{ font-size:15px; min-height:46px; }
  .btn{ min-height:46px; font-size:15px; }
  .page-header h2{ font-size:18px; }
  .stat-value,.stat-num{ font-size:30px; }
}

/* ═══════════════════════════════════════════════════════════
   详情/子页面统一样式（客户/样品/产品详情共用）
   ═══════════════════════════════════════════════════════════ */
/* 返回链接 */
.back-link{
  display:inline-flex; align-items:center; gap:4px;
  color:var(--text-light); text-decoration:none; font-size:13px; font-weight:500;
  margin-bottom:10px; padding:4px 10px 4px 4px; border-radius:8px;
}
.back-link:active{ background:var(--bg); }
.detail-hero{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }

/* Tag 徽章（详情头/列表用） */
.tag{ display:inline-block; padding:2px 10px; border-radius:20px; font-size:11px; font-weight:600; vertical-align:middle; }
.tag-info{ background:#dbeafe; color:#1e40af; }
.tag-success,.tag-done,.tag-approved,.tag-pass{ background:#dcfce7; color:#166534; }
.tag-warning,.tag-pending{ background:#fef3c7; color:#92400e; }
.tag-danger,.tag-rejected,.tag-fail{ background:#f1f5f9; color:#64748b; }

/* 详情信息网格 */
.detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4px 18px; }
.detail-field{ padding:9px 0; border-bottom:1px solid var(--border-soft); }
.detail-grid > .detail-field:nth-last-child(-n+2){ border-bottom:none; }
.field-label{ font-size:12px; color:var(--text-light); font-weight:500; margin-bottom:2px; }
.field-value{ font-size:14px; color:var(--text); word-break:break-word; }

/* 进度条（产品详情） */
.progress-bar{ width:100%; background:#eef2f6; border-radius:20px; overflow:hidden; position:relative; }
.progress-bar-fill{ background:var(--primary); border-radius:20px; transition:width .5s ease; }
.progress-bar-fill.green{ background:var(--success); }
.progress-bar-fill.orange{ background:var(--warning); }

/* 里程碑（产品详情） */
.milestones{ margin-top:6px; }
.milestone{
  display:flex; align-items:center; gap:6px; padding:10px 12px; margin:6px 0;
  background:var(--bg-soft); border:1px solid var(--border-soft); border-radius:10px;
  font-size:13px; color:var(--text-light);
}
.milestone.done{ background:#f0fdf4; border-color:#bbf7d0; color:#166534; }

/* 审批流程节点（样品详情等） */
.approval-flow{ display:flex; flex-direction:column; gap:8px; }
.approval-node{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; background:var(--bg-soft); border:1.5px solid var(--border);
  border-radius:12px;
}
.approval-node .node-label{ font-size:13px; font-weight:600; color:var(--text); }
.approval-node .node-status{ font-size:12px; font-weight:600; color:var(--text-light); }
.approval-node.passed{ background:#f0fdf4; border-color:#86efac; }
.approval-node.passed .node-status{ color:#16a34a; }
.approval-node.rejected{ background:#fef2f2; border-color:#fecaca; }
.approval-node.rejected .node-status{ color:#dc2626; }
.approval-node.pending{ border-style:dashed; }

/* 子页卡片内小块标题 */
.sub-title{ font-size:14px; font-weight:700; color:var(--text); margin:16px 0 8px; }

/* 列表内链接 */
.table-wrap tbody a{ color:var(--primary); text-decoration:none; font-weight:600; }
.table-wrap tbody a:active{ text-decoration:underline; }

@media (max-width:640px){
  .detail-grid{ grid-template-columns:1fr; }
  .detail-hero{ flex-direction:column; align-items:flex-start; }
}

/* ═══════════════════════════════════════════════════════════
   列表卡片共用样式（研发/立项/样品列表统一视觉）
   ═══════════════════════════════════════════════════════════ */
.pcard{background:#fff;border-radius:12px;margin-bottom:8px;box-shadow:var(--shadow-card);overflow:hidden;position:relative;}
.pcard > a{text-decoration:none;color:inherit;display:block;padding:12px 14px 6px;}
.pcard-body{display:flex;align-items:flex-start;gap:10px;}
.pcard-left{flex:1;min-width:0;}
.pcard-name{font-size:15px;font-weight:700;color:#1e293b;line-height:1.3;}
.pcard-name .pid{font-size:10px;color:#94a3b8;font-weight:400;margin-left:4px;}
.pcard-meta{font-size:12px;color:#64748b;margin-top:4px;display:flex;flex-wrap:wrap;gap:3px 10px;}
.pcard-meta b{font-weight:700;color:#334155;}
.pcard-status{position:absolute;right:12px;top:12px;font-size:11px;font-weight:700;padding:2px 10px;border-radius:12px;letter-spacing:.2px;display:inline-flex;align-items:center;gap:4px;}
.pcard-status.done{background:#dcfce7;color:#15803d;}
.pcard-status.running,.pcard-status.approved,.pcard-status.info{background:#dbeafe;color:#1d4ed8;}
.pcard-status.paused{background:#f1f5f9;color:#64748b;}
.pcard-status.waiting,.pcard-status.pending{background:#fef3c7;color:#b45309;}
/* 已撤销/已驳回 → 一律灰色，不做彩色强调 */
.pcard-status.rejected{background:#f1f5f9;color:#64748b;}
.pcard-desc{font-size:12px;color:#64748b;margin-top:6px;line-height:1.5;padding-right:6px;}
.pcard-foot{padding:2px 14px 10px;}
.pcard-process{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-top:6px;}
.proc-step{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#64748b;background:#f1f5f9;border-radius:12px;padding:3px 9px;}
.proc-step.ok{background:#dcfce7;color:#15803d;}
.proc-step.no{background:#fee2e2;color:#b91c1c;}
.proc-step.todo{background:#fff;border:1px dashed #cbd5e1;}
/* 红点脉冲（审批中/未完成） */
.todo-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#ef4444;vertical-align:middle;animation:tdPulse 1.2s infinite;flex-shrink:0;}
@keyframes tdPulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.6);}70%{box-shadow:0 0 0 7px rgba(239,68,68,0);}100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}}
/* 分组头 */
.sec-header{display:flex;align-items:center;gap:8px;padding:12px 4px 6px;}
.sec-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.sec-title{font-size:14px;font-weight:700;color:#1e293b;}
.sec-count{font-size:12px;color:#94a3b8;font-weight:400;}
.sec-subtitle{font-size:12px;font-weight:600;color:#64748b;padding:6px 4px 2px;display:flex;align-items:center;gap:4px;}
/* 列表页上方操作条 */
.action-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 0 10px;}

/* 列表页分类标签栏 + 分组区块 */
.tab-scroll{display:flex;gap:6px;overflow-x:auto;padding:6px 2px 10px;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.tab-scroll::-webkit-scrollbar{display:none;}
.tab-btn{border:1px solid var(--border,#e2e8f0);background:#fff;color:#475569;padding:7px 14px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;flex-shrink:0;}
.tab-btn.active{background:var(--primary,#2563eb);color:#fff;border-color:var(--primary,#2563eb);}
.tab-btn .cnt{font-size:10px;background:rgba(0,0,0,.1);border-radius:10px;padding:1px 6px;margin-left:3px;font-weight:400;}
.tab-btn.active .cnt{background:rgba(255,255,255,.25);}
.list-section{padding:0 2px;}

/* ═══════════════════════════════════════════════════════════
   流程进度时间轴（研发/立项/样品通用 · 标识卡在哪个节点）
   ═══════════════════════════════════════════════════════════ */
.flow-tl{display:flex;align-items:flex-start;justify-content:space-between;gap:0;padding:8px 2px 4px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.ftl-node{flex:1;min-width:52px;display:flex;flex-direction:column;align-items:center;position:relative;padding:2px;}
.ftl-node::before{content:'';position:absolute;top:9px;left:-50%;width:100%;height:2px;background:#e2e8f0;z-index:1;}
.ftl-node:first-child::before{display:none;}
.ftl-dot{width:16px;height:16px;border-radius:50%;background:#e2e8f0;border:2px solid #fff;box-shadow:0 0 0 1.5px #e2e8f0;z-index:2;margin-bottom:3px;flex-shrink:0;}
.ftl-node.done::before{background:#86efac;}
.ftl-node.done .ftl-dot{background:var(--success,#16a34a);box-shadow:0 0 0 1.5px #bbf7d0;}
.ftl-node.cur::before{background:#93c5fd;}
.ftl-node.cur .ftl-dot{background:var(--primary,#2563eb);box-shadow:0 0 0 1.5px #bfdbfe;animation:ftlPulse 1.2s infinite;}
.ftl-node.reject .ftl-dot{background:#cbd5e1;box-shadow:0 0 0 1.5px #e2e8f0;}
.ftl-node.todo::before{background:#e2e8f0;}
.ftl-label{font-size:10px;color:#475569;white-space:nowrap;text-align:center;line-height:1.15;}
.ftl-label small{display:block;font-size:8px;color:#94a3b8;font-weight:400;}
@keyframes ftlPulse{0%{box-shadow:0 0 0 0 rgba(37,99,235,.5),0 0 0 1.5px #bfdbfe;}70%{box-shadow:0 0 0 9px rgba(37,99,235,0),0 0 0 1.5px #bfdbfe;}100%{box-shadow:0 0 0 0 rgba(37,99,235,0),0 0 0 1.5px #bfdbfe;}}
/* 卡在当前节点横幅 */
.flow-banner{display:flex;align-items:center;gap:6px;background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;font-size:12px;border-radius:8px;padding:5px 10px;margin:2px 2px 2px;}
.flow-banner.done{background:#f0fdf4;border-color:#bbf7d0;color:#166534;}
.flow-banner.muted{background:#f8fafc;border-color:#e2e8f0;color:#64748b;}
.flow-banner .fb-dot{width:9px;height:9px;border-radius:50%;background:var(--primary,#2563eb);flex-shrink:0;animation:ftlPulse .9s infinite;}

/* ═══════════ 搜索/筛选栏（.search-bar）v13 ═══════════ */
.search-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:10px;margin:0 0 14px;box-shadow:0 1px 2px rgba(15,23,42,.04);}
.search-bar input[type=text],.search-bar input[type=search],.search-bar input:not([type]){
  flex:1 1 200px;min-width:150px;padding:9px 12px 9px 36px;border:1px solid #e2e8f0;border-radius:10px;
  font-size:14px;color:var(--text,#1e293b);background:#f8fafc url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%2394a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>') no-repeat 12px center;background-size:16px;transition:border-color .15s,box-shadow .15s,background .15s;}
.search-bar input:focus{outline:none;border-color:var(--primary,#2563eb);background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%232563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>') no-repeat 12px center;background-size:16px;box-shadow:0 0 0 3px rgba(37,99,235,.12);}
.search-bar select{padding:9px 30px 9px 12px;border:1px solid #e2e8f0;border-radius:10px;font-size:14px;color:var(--text,#1e293b);background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') no-repeat right 10px center;background-size:14px;appearance:none;-webkit-appearance:none;cursor:pointer;transition:border-color .15s,box-shadow .15s;min-width:110px;}
.search-bar select:focus{outline:none;border-color:var(--primary,#2563eb);box-shadow:0 0 0 3px rgba(37,99,235,.12);}
.search-bar .btn{padding:9px 16px;border-radius:10px;white-space:nowrap;}
.search-bar .filter-count{margin-left:auto;font-size:12.5px;color:var(--text-light,#64748b);background:#f1f5f9;padding:7px 12px;border-radius:10px;white-space:nowrap;}
.search-bar .filter-count b{color:var(--primary,#2563eb);font-weight:700;}
@media(max-width:640px){.search-bar input[type=text],.search-bar input:not([type]){flex:1 1 100%;}.search-bar .filter-count{margin-left:0;}}

/* ═══════════ 申请/新增类表单美化 v14 ═══════════ */
.form-hero{padding:16px 18px;border-radius:14px;margin-bottom:14px;background:linear-gradient(120deg,rgba(37,99,235,.08),rgba(37,99,235,.02));border:1px solid rgba(37,99,235,.14);}
.form-hero h3{margin:0;font-size:18px;font-weight:700;color:#1e293b;display:flex;align-items:center;gap:8px;}
.form-hero p{margin:4px 0 0;font-size:12.5px;color:#64748b;line-height:1.5;}
.form-section{display:flex;align-items:center;gap:8px;margin:20px 0 12px;padding-bottom:8px;border-bottom:1.5px solid #eef2f7;font-size:14px;font-weight:700;color:#1e293b;}
.form-section:first-of-type{margin-top:0;}
.form-section .sec-ic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#eff6ff;color:#2563eb;font-size:14px;flex-shrink:0;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:640px){.form-row{grid-template-columns:1fr;}}
.form-group{margin-bottom:12px;}
.form-group label{display:block;font-size:13px;font-weight:600;color:#1e293b;margin-bottom:6px;}
.form-group .req{color:#dc2626;margin-left:2px;}
.form-hint{font-size:12px;color:#94a3b8;margin-top:5px;line-height:1.45;}
/* 表单输入控件（作用于 .card-body 内的裸 input/select/textarea） */
.card-body input[type=text],.card-body input:not([type]),.card-body input[type=tel],.card-body input[type=number],
.card-body select,.card-body textarea{
  width:100%;padding:11px 13px;border:1.5px solid #e2e8f0;border-radius:12px;font-size:15px;
  background:#fff;min-height:46px;color:#1e293b;transition:border-color .15s,box-shadow .15s,background .15s;
  box-sizing:border-box;
}
.card-body input:focus,.card-body select:focus,.card-body textarea:focus{
  outline:none;border-color:#2563eb;background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.card-body textarea{min-height:92px;resize:vertical;}
.form-actions{display:flex;gap:10px;padding:12px 2px;margin-top:area 6px;}
.form-actions{position:sticky;bottom:0;gap:10px;padding:12px;margin:6px -18px -18px;background:rgba(248,250,252,.94);backdrop-filter:blur(6px);border-top:1px solid #eef2f7;border-radius:0 0 14px 14px;}
.form-actions .btn{padding:11px 22px;border-radius:12px;min-height:44px;}

/* ═══════════════════════════════════════════════
   移动端人性化/美化增强 v15（主流手机屏 < 600px）
   · 更大触控目标 · 更柔更圆按钮 · 刘海安全区 · 留白呼吸
   ═══════════════════════════════════════════════ */
.btn{
  min-height:46px;
  letter-spacing:.2px;
  box-shadow:0 2px 6px rgba(22,33,62,.06);
  transition:opacity .15s, transform .1s, box-shadow .15s;
}
.btn-primary{ box-shadow:0 3px 10px rgba(37,99,235,.28); }
.btn:active{ transform:scale(.96); }
.btn-sm{ min-height:38px; gap:5px; }

/* iPhone 刘海安全区适配（桌面宽度不受影响） */
@supports(padding:max(0px)){
  .top-bar{
    padding-left:max(14px,env(safe-area-inset-left));
    padding-right:max(14px,env(safe-area-inset-right));
  }
  .container{
    padding-left:max(12px,env(safe-area-inset-left));
    padding-right:max(12px,env(safe-area-inset-right));
    padding-bottom:max(32px,env(safe-area-inset-bottom));
  }
  .form-actions{ padding-bottom:max(12px,env(safe-area-inset-bottom)); }
}

/* 首页统计：更圆更柔 */
.stat-card{ border-radius:18px; padding:20px 18px; box-shadow:var(--shadow-card); }

/* ============ 主流手机屏 < 600px ============ */
@media (max-width:600px){
  /* 顶栏：自动换行、不拥挤 */
  .top-bar{ flex-wrap:wrap; gap:6px 10px; padding:12px 12px; align-items:center; }
  .top-bar h1{ font-size:16px; }
  .top-bar .right-wrap{ margin-left:auto; }
  .top-bar .user-badge{ max-width:104px; font-size:11px; padding:4px 10px; }

  /* 按钮：整块化 + 更舒服的触控区 */
  .btn{ min-height:48px; font-size:15px; border-radius:14px; }
  .btn-sm{ min-height:44px; font-size:14px; padding:8px 16px; border-radius:12px; }
  .form-actions{ position:sticky; bottom:0; gap:12px; padding:12px; }
  .form-actions .btn{ flex:1; min-height:50px; font-size:15px; }
  .btn-group .btn{ flex:1; }

  /* 卡片留白呼吸 */
  .card-body{ padding:18px; }
  .card-header{ padding:16px 18px 12px; }

  /* 流程卡脚操作按钮：两列整块、好点易触 */
  .pcard-foot .btn-sm{ flex:1; min-width:0; justify-content:center; }
  .pcard-foot form[method=POST]{ display:flex; }
  .pcard-foot form button[type=submit]{ flex:1; min-height:44px; flex:1 1 0; }
  .pcard-foot form input[type=text]{ min-height:46px; font-size:16px; }

  /* 表单输入：16px 防 iOS 聚焦自动放大 */
  .card-body input[type=text],.card-body input:not([type]),.card-body input[type=tel],
  .card-body input[type=number],.card-body input[type=date],.card-body select,.card-body textarea,
  .form-control{
    min-height:48px; font-size:16px;
  }
  .card-body input[type=date]{ font-size:15px; }
  textarea.form-control{ min-height:96px; }

  /* 导航标签更大更易点 */
  .tab-nav{ padding:8px 8px; }
  .tab-row a{ padding-top:11px; padding-bottom:9px; font-size:13px; }
  .tab-row a .tab-icon{ font-size:22px; }

  /* 列表项 / 详情行 更大触控与行距 */
  .list-item{ padding:15px 16px; }
  .item-title{ font-size:16px; }
  .item-sub{ font-size:13px; }
  .detail-row{ padding:12px 2px; }
  .detail-label{ width:104px; }
  .detail-value{ font-size:15px; }

  /* 空状态 */
  .empty-state{ padding:52px 24px; }

  /* 表格横向滑动更顺滑 */
  .table-wrap{ -webkit-overflow-scrolling:touch; }
  table th,table td{ padding:13px 12px; font-size:14px; }

  /* 首页统计卡两列更透气 */
  .stats-grid{ gap:12px; }
}

/* ═══ 五部门并行审批：清爽卡片网格 v16 ═══ */
.approval-flow{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:10px;
}
.approval-node{
  padding:13px 14px; background:var(--bg-soft); border:1.5px solid var(--border);
  border-radius:14px; display:flex; flex-direction:column; gap:9px;
}
.approval-node.passed{ background:#f0fdf4; border-color:#86efac; }
.approval-node.rejected{ background:#fef2f2; border-color:#fecaca; }
.approval-node.pending{ border-style:dashed; }
.approval-node .node-label,
.approval-node .node-status{ display:none; }
.an-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.an-title{ font-size:14px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:6px; }
.an-badge{ font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap; }
.an-badge.p{ background:#fef3c7; color:#b45309; }
.an-badge.a{ background:#dcfce7; color:#166534; }
.an-badge.r{ background:#fee2e2; color:#b91c1c; }
.an-comment{ font-size:12px; color:#6b7280; background:#fff; border:1px solid var(--border-soft); border-radius:8px; padding:7px 10px; word-break:break-all; }
.an-actions{ display:flex; flex-direction:column; gap:8px; margin-top:auto; }
.an-remind{ width:100%; }
.an-remind .btn{ width:100%; min-height:38px; justify-content:center; }
.an-approve{ display:flex; flex-direction:column; gap:8px; }
.an-approve input{ width:100%; padding:9px 11px; border:1.5px solid var(--border); border-radius:10px; font-size:13px; min-height:40px; background:#fff; box-sizing:border-box; }
.an-approve .an-btns{ display:flex; gap:8px; }
.an-approve .an-btns .btn{ flex:1; min-height:42px; justify-content:center; }
@media(max-width:560px){ .approval-flow{ grid-template-columns:1fr; } }

/* ── 下拉式导航菜单 ── */
.nav-hd{ display:flex; align-items:center; gap:8px; min-height:38px; }
.nav-hamburger{ background:rgba(37,99,235,.08); border:none; color:var(--brand,#2563eb); font-size:20px; cursor:pointer; padding:4px 12px; border-radius:10px; min-height:38px; line-height:1; }
.nav-current{ flex:1; font-size:15px; font-weight:600; color:#1e293b; display:flex; align-items:center; gap:4px; }
.nav-caret{ cursor:pointer; color:#94a3b8; font-size:13px; padding:2px 6px; }
.tab-dropdown{ position:absolute; left:8px; right:8px; top:calc(100% + 6px); z-index:120; background:#fff; border:1px solid var(--border,#e2e8f0); border-radius:14px; box-shadow:0 14px 34px rgba(15,23,42,.16); padding:8px; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.tab-drop-item{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 6px 10px; border-radius:11px; color:#475569; text-decoration:none; font-size:13px; font-weight:600; transition:background .15s; }
.tab-drop-item .tab-icon{ font-size:22px; line-height:1.2; }
.tab-drop-item:hover{ background:#f1f5f9; }
.tab-drop-item.active{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ grid-template-columns:repeat(2,1fr); padding:10px; } .tab-drop-item{ padding:15px 6px; font-size:14px; } }

/* ── 下拉导航-纯文字版 ── */
.tab-dropdown{ grid-template-columns:1fr; padding:8px; gap:4px; max-height:min(70vh,470px); overflow-y:auto; }
.tab-drop-item{ flex-direction:row; justify-content:center; padding:13px 10px; border-radius:10px; font-size:14px; letter-spacing:.5px; }
.tab-drop-item .tab-icon{ display:none; }
.tab-drop-item:hover{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ grid-template-columns:1fr; padding:8px; } .tab-drop-item{ padding:16px 10px; font-size:15px; min-height:48px; } }

/* ── 下拉导航-紧凑双列纯文字 ── */
.tab-dropdown{ grid-template-columns:repeat(2,1fr) !important; gap:4px; padding:6px; max-height:min(60vh,430px); overflow-y:auto; }
.tab-drop-item{ flex-direction:column; justify-content:center; padding:8px 4px; border-radius:8px; font-size:12px; color:#475569; }
.tab-drop-item .tab-icon{ display:none !important; }
.tab-drop-item .tab-label{ line-height:1.2; }
.tab-drop-item:hover{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ grid-template-columns:repeat(2,1fr); gap:4px; padding:6px; } .tab-drop-item{ padding:9px 4px; font-size:12px; } }

/* ── 下拉导航-单列左对齐紧凑 ── */
.tab-dropdown{ grid-template-columns:1fr !important; gap:2px; padding:5px; max-height:min(58vh,400px); overflow-y:auto; }
.tab-drop-item{ flex-direction:row; justify-content:flex-start; align-items:center; padding:8px 12px; border-radius:7px; font-size:13px; color:#475569; }
.tab-drop-item .tab-icon{ display:none !important; }
.tab-drop-item:active{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ grid-template-columns:1fr; gap:2px; padding:5px; } .tab-drop-item{ padding:10px 12px; font-size:13px; } }

/* ── 下拉导航-行高-30% ── */
.tab-drop-item{ padding-top:6px !important; padding-bottom:6px !important; }
@media (max-width:640px){ .tab-drop-item{ padding:7px 12px !important; } }

/* ── 下拉导航-行高再缩 ── */
.tab-drop-item{ padding-top:4px !important; padding-bottom:4px !important; }
@media (max-width:640px){ .tab-drop-item{ padding:5px 12px !important; } }

/* ── 顶栏汉堡按钮 + 当前模块 + 独立下拉 ── */
.nav-hamburger{ background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.45); color:#fff; font-size:19px; cursor:pointer; padding:2px 10px; border-radius:8px; min-height:34px; line-height:1; }
.nav-cur{ color:#fff; font-size:13px; font-weight:600; margin-right:2px; }
.tab-dropdown{ position:fixed !important; top:56px; left:6px; right:6px; z-index:130; grid-template-columns:1fr; gap:2px; padding:6px; background:#fff; border:1px solid var(--border,#e2e8f0); border-radius:12px; box-shadow:0 14px 34px rgba(15,23,42,.18); max-height:min(62vh,440px); overflow-y:auto; }
.tab-drop-item{ flex-direction:row; justify-content:flex-start; align-items:center; padding:6px 12px; border-radius:7px; font-size:13px; color:#475569; }
.tab-drop-item .tab-icon{ display:none !important; }
.tab-drop-item:hover{ background:var(--brand,#2563eb); color:#fff; }
.tab-drop-item.active{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ top:52px; padding:6px; } .tab-drop-item{ padding:7px 12px; font-size:13px; } }
/* ═══════════════════════════════════════════════════════════
   辉科食品 CRM — 移动端界面 v9
   设计理念：人性化 · 简单明了 · 清晰好读
   · 柔和配色、干净层级、友好文案、轻量微交互
   ═══════════════════════════════════════════════════════════ */
:root {
  /* 品牌 & 状态（柔和、清晰） */
  --primary:#2563eb; --primary-dark:#1d4ed8;
  --brand:#2563eb; --brand-soft:#eef2ff;
  --success:#16a34a; --warning:#ea580c; --danger:#dc2626;
  /* 状态色：✅绿=完成 / 🔵蓝=进行中 / ⚪灰=未开始 / 🔴红=驳回 */
  --st-done:#16a34a; --st-run:#2563eb; --st-wait:#94a3b8; --st-reject:#dc2626; --st-warn:#d97706;
  /* 中性 */
  --bg:#f2f4f8; --bg-soft:#f7f9fc;
  --card:#ffffff; --text:#1f2a3d; --text-light:#6b7a90; --text-secondary:#6b7a90;
  --border:#e3e8ef; --border-soft:#eef2f6;
  /* 圆角 / 阴影（柔和） */
  --radius:14px; --radius-sm:10px;
  --shadow-card:0 1px 2px rgba(22,33,62,.05),0 2px 8px rgba(22,33,62,.05);
  --shadow-lift:0 8px 24px rgba(30,45,90,.10);
}
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  background:var(--bg); color:var(--text); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{ -webkit-tap-highlight-color:transparent; }

/* ── 顶部栏：清爽品牌色 ── */
.top-bar{
  position:sticky; top:0; z-index:100;
  background:linear-gradient(135deg,#2563eb,#4338ca);
  color:#fff; padding:13px 16px;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 3px 12px rgba(37,99,235,.20);
}
.top-bar h1{ font-size:17px; font-weight:700; }
.top-bar .right-wrap{ display:flex; align-items:center; gap:8px; }
.top-bar .right-wrap a{ color:#fff; text-decoration:none; font-size:13px; }
.top-bar .right-wrap a:active{ opacity:.6; }
.top-bar .user-badge{
  background:rgba(255,255,255,.2); padding:4px 12px; border-radius:20px;
  font-size:12px; font-weight:600; max-width:150px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.top-bar .notif-icon{
  position:relative; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; font-size:18px;
  cursor:pointer;
}
.top-bar .notif-icon:active{ opacity:.7; }
.top-bar .notif-icon .badge{
  position:absolute; top:-3px; right:-3px; background:#ef4444; color:#fff;
  border-radius:50%; min-width:19px; height:19px; font-size:10px; font-weight:700;
  display:none; align-items:center; justify-content:center; padding:0 4px; border:2px solid #fff;
}

/* ── 导航：简洁双排 ── */
.tab-nav{
  position:sticky; top:52px; z-index:99;
  background:rgba(255,255,255,.96); border-bottom:1px solid var(--border);
  box-shadow:0 1px 3px rgba(22,33,62,.04);
  padding:8px 10px;
}
.tab-row{ display:flex; gap:6px; }
.tab-row + .tab-row{ margin-top:5px; }
.tab-row a{
  flex:1; min-width:0; text-align:center; padding:9px 4px 7px;
  text-decoration:none; font-size:12px; font-weight:500; color:var(--text-light);
  border-radius:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:background .15s,color .15s;
}
.tab-row a:active{ background:#f1f5f9; }
.tab-row a.active{ background:var(--brand); color:#fff; font-weight:600; }
.tab-row a .tab-icon{ font-size:20px; display:block; margin-bottom:2px; line-height:1.2; }
.tab-row a.active .tab-badge{ background:#fff; color:#ef4444; }

/* ── 内容区 ── */
.container{ max-width:520px; margin:0 auto; padding:14px 12px 30px; }

/* ── 卡片：干净白卡 ── */
.card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow-card);
  margin-bottom:14px; overflow:hidden; border:1px solid var(--border-soft);
}
.card-header{
  padding:15px 16px 11px; font-size:15px; font-weight:700; color:var(--text);
  border-bottom:1px solid var(--border-soft); display:flex; align-items:center; gap:8px;
}
.card-body{ padding:16px; }

/* ── 首页统计卡 ── */
.stats-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:2px 0 14px; }
.stat-card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow-card);
  padding:18px 16px; border:1px solid var(--border-soft);
}
.stat-value,.stat-num{ font-size:34px; font-weight:800; line-height:1.1; color:var(--primary); margin-bottom:5px; }
.stat-value[style*="color"],.stat-num[style*="color"]{ color:inherit; }
.stat-label{ font-size:13px; color:var(--text-light); font-weight:500; }
.stat-card .stat-icon{ font-size:18px; margin-bottom:2px; }

/* ── 按钮：清晰柔和 ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 20px; border-radius:12px; font-size:14px; font-weight:600;
  border:none; cursor:pointer; text-decoration:none; min-height:44px;
  transition:opacity .15s, transform .1s;
}
.btn:active{ opacity:.8; transform:scale(.97); }
.btn-primary{ background:var(--primary); color:#fff; box-shadow:0 2px 6px rgba(37,99,235,.25); }
.btn-success{ background:var(--success); color:#fff; }
.btn-warning{ background:var(--warning); color:#fff; }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-outline{ background:#fff; border:1.5px solid var(--border); color:var(--text); }
.btn-outline:active{ background:var(--bg); }
.btn-block{ width:100%; }
.btn-sm{ padding:6px 14px; font-size:13px; min-height:auto; border-radius:10px; }
.btn-group{ display:flex; gap:8px; flex-wrap:wrap; }

/* ── 表单 ── */
.form-group{ margin-bottom:14px; }
.form-group label{ display:block; font-size:13px; font-weight:600; color:var(--text); margin-bottom:6px; }
.form-control{
  width:100%; padding:11px 13px; border:1.5px solid var(--border);
  border-radius:12px; font-size:15px; background:#fff; min-height:46px;
  transition:border-color .15s, box-shadow .15s;
}
.form-control:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
textarea.form-control{ min-height:84px; resize:vertical; }
select.form-control{ appearance:auto; }

/* ── 列表项 ── */
.list-item{
  display:flex; align-items:center; padding:14px 16px;
  border-bottom:1px solid var(--border-soft); text-decoration:none; color:var(--text);
}
.list-item:last-child{ border-bottom:none; }
.list-item:active{ background:var(--bg-soft); }
.item-main{ flex:1; min-width:0; }
.item-title{ font-size:15px; font-weight:600; margin-bottom:3px; }
.item-sub{ font-size:12px; color:var(--text-light); }
.item-right{ text-align:right; flex-shrink:0; margin-left:8px; }
.item-badge{
  display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600;
}
.badge-pending{ background:#fef3c7; color:#92400e; }
.badge-approved{ background:#dcfce7; color:#166534; }
.badge-rejected{ background:#fee2e2; color:#991b1b; }
.badge-shipped{ background:#dbeafe; color:#1e40af; }
.badge-signed{ background:#e0e7ff; color:#3730a3; }
.badge-pass{ background:#dcfce7; color:#166534; }
.badge-fail{ background:#fee2e2; color:#991b1b; }

/* ── 状态徽章 chips（清晰可读） ── */
.st{ display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; line-height:1.4; }
.st::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.st-done{ background:#dcfce7; color:#166534; }
.st-run{ background:#dbeafe; color:#1e40af; }
.st-wait{ background:#eef2f6; color:#64748b; }
.st-reject{ background:#fee2e2; color:#b91c1c; }
.st-warn{ background:#fef3c7; color:#b45309; }

/* ── 细进度条 ── */
.pbar{ height:7px; background:#eef2f6; border-radius:7px; overflow:hidden; position:relative; }
.pbar>i{ display:block; height:100%; border-radius:7px; background:var(--primary); transition:width .4s ease; }
.pbar.p-done>i{ background:var(--success); }
.pbar.p-warn>i{ background:var(--warning); }

/* ── Flash 消息 ── */
.flash{
  padding:12px 16px; border-radius:12px; margin-bottom:12px; font-size:14px; font-weight:500;
  border:1px solid transparent;
}
.flash-success{ background:#f0fdf4; color:#166534; border-color:#bbf7d0; }
.flash-danger{ background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.flash-warning{ background:#fffbeb; color:#92400e; border-color:#fde68a; }

/* ── 详情行 ── */
.detail-row{ display:flex; padding:10px 0; border-bottom:1px solid var(--border-soft); }
.detail-label{ width:96px; flex-shrink:0; font-size:13px; color:var(--text-light); font-weight:500; }
.detail-value{ flex:1; font-size:14px; color:var(--text); }

/* ── 流程步骤 ── */
.progress-steps{ display:flex; padding:14px 8px; gap:2px; }
.progress-step{ flex:1; text-align:center; font-size:11px; color:var(--text-light); position:relative; }
.progress-step .dot{
  width:26px; height:26px; border-radius:50%; background:#e3e8ef;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; margin-bottom:5px; color:#fff;
}
.progress-step.active .dot{ background:var(--primary); }
.progress-step.done .dot{ background:var(--success); }
.progress-step.fail .dot{ background:var(--danger); }

/* ── 表格 ── */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table{ width:100%; border-collapse:collapse; font-size:13px; }
table th,table td{ padding:11px 12px; text-align:left; white-space:nowrap; }
table thead th{ background:#f8fafc; color:var(--text-light); font-size:12px; font-weight:700; }
table tbody tr{ border-bottom:1px solid var(--border-soft); }
table tbody tr:active{ background:var(--bg-soft); }

/* ── 空状态 ── */
.empty-state{ text-align:center; padding:44px 24px; color:var(--text-light); border-radius:var(--radius); }
.empty-state .icon{ font-size:48px; margin-bottom:12px; display:block; }
.empty-state p{ font-size:14px; }

/* ── 页面标题 ── */
.page-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.page-header h2{ font-size:19px; font-weight:800; }

/* ── 角色标记 ── */
.role-tag{ display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600; }
.role-admin{ background:#e0e7ff; color:#3730a3; }
.role-sales{ background:#dbeafe; color:#1e40af; }
.role-market{ background:#fef3c7; color:#92400e; }
.role-warehouse{ background:#dcfce7; color:#166534; }
.role-marketer{ background:#f3e8ff; color:#6b21a8; }
.role-general_manager{ background:#ffedd5; color:#9a3412; }
.role-finance{ background:#fce4ec; color:#9b1c1c; }
.role-quality{ background:#ccfbf1; color:#0f766e; }
.role-hr{ background:#ffedd5; color:#c2410c; }
.role-workshop{ background:#f1f5f9; color:#475569; }
.role-logistics{ background:#e0f2fe; color:#0369a1; }
.role-rd{ background:#ede9fe; color:#6d28d9; }
.role-procurement{ background:#fce7f3; color:#9d174d; }

/* ── 分析页 ── */
.ana-tabs{
  display:flex; gap:4px; overflow-x:auto; background:#fff; border-radius:12px;
  margin-bottom:14px; padding:4px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  box-shadow:var(--shadow-card);
}
.ana-tabs::-webkit-scrollbar{ display:none; }
.ana-tabs a{
  flex-shrink:0; padding:9px 14px; text-decoration:none; font-size:13px;
  font-weight:600; color:var(--text-light); border-radius:9px;
}
.ana-tabs a.active{ background:var(--brand-soft); color:var(--primary); font-weight:700; }
.ana-stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.ana-stat{ background:#fff; border-radius:12px; padding:16px; text-align:center; box-shadow:var(--shadow-card); }
.ana-stat .num{ font-size:24px; font-weight:800; color:var(--primary); }
.ana-stat .label{ font-size:11px; color:var(--text-light); margin-top:3px; }
.bar-chart{ padding:12px 16px; }
.bar-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.bar-label{ width:72px; flex-shrink:0; font-size:12px; color:var(--text); text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-track{ flex:1; height:20px; background:#f1f5f9; border-radius:10px; overflow:hidden; }
.bar-fill{ height:100%; border-radius:10px; background:var(--primary); transition:width .4s ease; min-width:4px; }
.bar-val{ font-size:12px; font-weight:700; color:var(--text); min-width:30px; text-align:right; }
.rank-list{ list-style:none; }
.rank-list li{ display:flex; align-items:center; padding:11px 16px; border-bottom:1px solid var(--border-soft); gap:10px; }
.rank-list li:last-child{ border-bottom:none; }
.rank-num{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex-shrink:0; }
.rank-1{ background:#fef3c7; color:#d97706; }
.rank-2{ background:#e2e8f0; color:#475569; }
.rank-3{ background:#fde68a; color:#92400e; }
.rank-n{ background:#f1f5f9; color:#94a3b8; }

/* ── 流程总览 ── */
.flow-overview{ display:flex; align-items:center; justify-content:center; gap:2px; padding:0 4px; }
.flow-node{ flex:1; text-align:center; background:#f8fafc; border-radius:10px; padding:7px 2px; border:1.5px solid var(--border); max-width:92px; }
.flow-node .fn-icon{ font-size:22px; margin-bottom:2px; }
.flow-node .fn-label{ font-size:11px; font-weight:700; color:var(--text); line-height:1.3; }
.flow-node .fn-role{ font-size:10px; color:var(--text-light); margin-top:1px; }
.flow-arrow{ font-size:16px; color:var(--text-light); flex-shrink:0; padding:0 2px; }

/* ── 敏感信息 ── */
.sensitive-hidden{ filter:blur(4px); user-select:none; }

/* ── 角标 / 加载条 / 下拉刷新 ── */
.tab-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  background:#ef4444; color:#fff; font-size:10px; font-weight:700; line-height:1;
  margin-left:3px; vertical-align:middle; position:relative; top:-1px;
}
#topprog{ position:fixed; top:0; left:0; height:3px; width:0; z-index:9999; border-radius:0 3px 3px 0; opacity:0; transition:opacity .3s; }
#ptr-ind{
  position:fixed; top:112px; left:50%; transform:translate(-50%,-30px);
  background:rgba(30,41,59,.86); color:#fff; font-size:12px; padding:7px 16px;
  border-radius:22px; z-index:999; opacity:0; transition:opacity .18s,transform .18s;
  pointer-events:none; box-shadow:var(--shadow-lift);
}
#ptr-ind.on{ opacity:1; transform:translate(-50%,0); }
#ptr-ind .spin{ display:inline-block; margin-right:6px; animation:ptrSpin .8s linear infinite; }
@keyframes ptrSpin{ to{ transform:rotate(360deg); } }

/* ── 移动端 ── */
@media (max-width:640px){
  .container{ padding:12px 10px 24px; }
  .top-bar{ padding:10px 12px; }
  .top-bar h1{ font-size:16px; }
  .tab-nav{ padding:7px 8px; top:50px; }
  .card{ border-radius:13px; }
  .form-control,.form-group input,.form-group select,.form-group textarea{ font-size:15px; min-height:46px; }
  .btn{ min-height:46px; font-size:15px; }
  .page-header h2{ font-size:18px; }
  .stat-value,.stat-num{ font-size:30px; }
}

/* ═══════════════════════════════════════════════════════════
   详情/子页面统一样式（客户/样品/产品详情共用）
   ═══════════════════════════════════════════════════════════ */
/* 返回链接 */
.back-link{
  display:inline-flex; align-items:center; gap:4px;
  color:var(--text-light); text-decoration:none; font-size:13px; font-weight:500;
  margin-bottom:10px; padding:4px 10px 4px 4px; border-radius:8px;
}
.back-link:active{ background:var(--bg); }
.detail-hero{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }

/* Tag 徽章（详情头/列表用） */
.tag{ display:inline-block; padding:2px 10px; border-radius:20px; font-size:11px; font-weight:600; vertical-align:middle; }
.tag-info{ background:#dbeafe; color:#1e40af; }
.tag-success,.tag-done,.tag-approved,.tag-pass{ background:#dcfce7; color:#166534; }
.tag-warning,.tag-pending{ background:#fef3c7; color:#92400e; }
.tag-danger,.tag-rejected,.tag-fail{ background:#f1f5f9; color:#64748b; }

/* 详情信息网格 */
.detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4px 18px; }
.detail-field{ padding:9px 0; border-bottom:1px solid var(--border-soft); }
.detail-grid > .detail-field:nth-last-child(-n+2){ border-bottom:none; }
.field-label{ font-size:12px; color:var(--text-light); font-weight:500; margin-bottom:2px; }
.field-value{ font-size:14px; color:var(--text); word-break:break-word; }

/* 进度条（产品详情） */
.progress-bar{ width:100%; background:#eef2f6; border-radius:20px; overflow:hidden; position:relative; }
.progress-bar-fill{ background:var(--primary); border-radius:20px; transition:width .5s ease; }
.progress-bar-fill.green{ background:var(--success); }
.progress-bar-fill.orange{ background:var(--warning); }

/* 里程碑（产品详情） */
.milestones{ margin-top:6px; }
.milestone{
  display:flex; align-items:center; gap:6px; padding:10px 12px; margin:6px 0;
  background:var(--bg-soft); border:1px solid var(--border-soft); border-radius:10px;
  font-size:13px; color:var(--text-light);
}
.milestone.done{ background:#f0fdf4; border-color:#bbf7d0; color:#166534; }

/* 审批流程节点（样品详情等） */
.approval-flow{ display:flex; flex-direction:column; gap:8px; }
.approval-node{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; background:var(--bg-soft); border:1.5px solid var(--border);
  border-radius:12px;
}
.approval-node .node-label{ font-size:13px; font-weight:600; color:var(--text); }
.approval-node .node-status{ font-size:12px; font-weight:600; color:var(--text-light); }
.approval-node.passed{ background:#f0fdf4; border-color:#86efac; }
.approval-node.passed .node-status{ color:#16a34a; }
.approval-node.rejected{ background:#fef2f2; border-color:#fecaca; }
.approval-node.rejected .node-status{ color:#dc2626; }
.approval-node.pending{ border-style:dashed; }

/* 子页卡片内小块标题 */
.sub-title{ font-size:14px; font-weight:700; color:var(--text); margin:16px 0 8px; }

/* 列表内链接 */
.table-wrap tbody a{ color:var(--primary); text-decoration:none; font-weight:600; }
.table-wrap tbody a:active{ text-decoration:underline; }

@media (max-width:640px){
  .detail-grid{ grid-template-columns:1fr; }
  .detail-hero{ flex-direction:column; align-items:flex-start; }
}

/* ═══════════════════════════════════════════════════════════
   列表卡片共用样式（研发/立项/样品列表统一视觉）
   ═══════════════════════════════════════════════════════════ */
.pcard{background:#fff;border-radius:12px;margin-bottom:8px;box-shadow:var(--shadow-card);overflow:hidden;position:relative;}
.pcard > a{text-decoration:none;color:inherit;display:block;padding:12px 14px 6px;}
.pcard-body{display:flex;align-items:flex-start;gap:10px;}
.pcard-left{flex:1;min-width:0;}
.pcard-name{font-size:15px;font-weight:700;color:#1e293b;line-height:1.3;}
.pcard-name .pid{font-size:10px;color:#94a3b8;font-weight:400;margin-left:4px;}
.pcard-meta{font-size:12px;color:#64748b;margin-top:4px;display:flex;flex-wrap:wrap;gap:3px 10px;}
.pcard-meta b{font-weight:700;color:#334155;}
.pcard-status{position:absolute;right:12px;top:12px;font-size:11px;font-weight:700;padding:2px 10px;border-radius:12px;letter-spacing:.2px;display:inline-flex;align-items:center;gap:4px;}
.pcard-status.done{background:#dcfce7;color:#15803d;}
.pcard-status.running,.pcard-status.approved,.pcard-status.info{background:#dbeafe;color:#1d4ed8;}
.pcard-status.paused{background:#f1f5f9;color:#64748b;}
.pcard-status.waiting,.pcard-status.pending{background:#fef3c7;color:#b45309;}
/* 已撤销/已驳回 → 一律灰色，不做彩色强调 */
.pcard-status.rejected{background:#f1f5f9;color:#64748b;}
.pcard-desc{font-size:12px;color:#64748b;margin-top:6px;line-height:1.5;padding-right:6px;}
.pcard-foot{padding:2px 14px 10px;}
.pcard-process{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-top:6px;}
.proc-step{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#64748b;background:#f1f5f9;border-radius:12px;padding:3px 9px;}
.proc-step.ok{background:#dcfce7;color:#15803d;}
.proc-step.no{background:#fee2e2;color:#b91c1c;}
.proc-step.todo{background:#fff;border:1px dashed #cbd5e1;}
/* 红点脉冲（审批中/未完成） */
.todo-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#ef4444;vertical-align:middle;animation:tdPulse 1.2s infinite;flex-shrink:0;}
@keyframes tdPulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.6);}70%{box-shadow:0 0 0 7px rgba(239,68,68,0);}100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}}
/* 分组头 */
.sec-header{display:flex;align-items:center;gap:8px;padding:12px 4px 6px;}
.sec-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.sec-title{font-size:14px;font-weight:700;color:#1e293b;}
.sec-count{font-size:12px;color:#94a3b8;font-weight:400;}
.sec-subtitle{font-size:12px;font-weight:600;color:#64748b;padding:6px 4px 2px;display:flex;align-items:center;gap:4px;}
/* 列表页上方操作条 */
.action-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 0 10px;}

/* 列表页分类标签栏 + 分组区块 */
.tab-scroll{display:flex;gap:6px;overflow-x:auto;padding:6px 2px 10px;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.tab-scroll::-webkit-scrollbar{display:none;}
.tab-btn{border:1px solid var(--border,#e2e8f0);background:#fff;color:#475569;padding:7px 14px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;flex-shrink:0;}
.tab-btn.active{background:var(--primary,#2563eb);color:#fff;border-color:var(--primary,#2563eb);}
.tab-btn .cnt{font-size:10px;background:rgba(0,0,0,.1);border-radius:10px;padding:1px 6px;margin-left:3px;font-weight:400;}
.tab-btn.active .cnt{background:rgba(255,255,255,.25);}
.list-section{padding:0 2px;}

/* ═══════════════════════════════════════════════════════════
   流程进度时间轴（研发/立项/样品通用 · 标识卡在哪个节点）
   ═══════════════════════════════════════════════════════════ */
.flow-tl{display:flex;align-items:flex-start;justify-content:space-between;gap:0;padding:8px 2px 4px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.ftl-node{flex:1;min-width:52px;display:flex;flex-direction:column;align-items:center;position:relative;padding:2px;}
.ftl-node::before{content:'';position:absolute;top:9px;left:-50%;width:100%;height:2px;background:#e2e8f0;z-index:1;}
.ftl-node:first-child::before{display:none;}
.ftl-dot{width:16px;height:16px;border-radius:50%;background:#e2e8f0;border:2px solid #fff;box-shadow:0 0 0 1.5px #e2e8f0;z-index:2;margin-bottom:3px;flex-shrink:0;}
.ftl-node.done::before{background:#86efac;}
.ftl-node.done .ftl-dot{background:var(--success,#16a34a);box-shadow:0 0 0 1.5px #bbf7d0;}
.ftl-node.cur::before{background:#93c5fd;}
.ftl-node.cur .ftl-dot{background:var(--primary,#2563eb);box-shadow:0 0 0 1.5px #bfdbfe;animation:ftlPulse 1.2s infinite;}
.ftl-node.reject .ftl-dot{background:#cbd5e1;box-shadow:0 0 0 1.5px #e2e8f0;}
.ftl-node.todo::before{background:#e2e8f0;}
.ftl-label{font-size:10px;color:#475569;white-space:nowrap;text-align:center;line-height:1.15;}
.ftl-label small{display:block;font-size:8px;color:#94a3b8;font-weight:400;}
@keyframes ftlPulse{0%{box-shadow:0 0 0 0 rgba(37,99,235,.5),0 0 0 1.5px #bfdbfe;}70%{box-shadow:0 0 0 9px rgba(37,99,235,0),0 0 0 1.5px #bfdbfe;}100%{box-shadow:0 0 0 0 rgba(37,99,235,0),0 0 0 1.5px #bfdbfe;}}
/* 卡在当前节点横幅 */
.flow-banner{display:flex;align-items:center;gap:6px;background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;font-size:12px;border-radius:8px;padding:5px 10px;margin:2px 2px 2px;}
.flow-banner.done{background:#f0fdf4;border-color:#bbf7d0;color:#166534;}
.flow-banner.muted{background:#f8fafc;border-color:#e2e8f0;color:#64748b;}
.flow-banner .fb-dot{width:9px;height:9px;border-radius:50%;background:var(--primary,#2563eb);flex-shrink:0;animation:ftlPulse .9s infinite;}

/* ═══════════ 搜索/筛选栏（.search-bar）v13 ═══════════ */
.search-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:10px;margin:0 0 14px;box-shadow:0 1px 2px rgba(15,23,42,.04);}
.search-bar input[type=text],.search-bar input[type=search],.search-bar input:not([type]){
  flex:1 1 200px;min-width:150px;padding:9px 12px 9px 36px;border:1px solid #e2e8f0;border-radius:10px;
  font-size:14px;color:var(--text,#1e293b);background:#f8fafc url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%2394a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>') no-repeat 12px center;background-size:16px;transition:border-color .15s,box-shadow .15s,background .15s;}
.search-bar input:focus{outline:none;border-color:var(--primary,#2563eb);background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%232563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>') no-repeat 12px center;background-size:16px;box-shadow:0 0 0 3px rgba(37,99,235,.12);}
.search-bar select{padding:9px 30px 9px 12px;border:1px solid #e2e8f0;border-radius:10px;font-size:14px;color:var(--text,#1e293b);background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') no-repeat right 10px center;background-size:14px;appearance:none;-webkit-appearance:none;cursor:pointer;transition:border-color .15s,box-shadow .15s;min-width:110px;}
.search-bar select:focus{outline:none;border-color:var(--primary,#2563eb);box-shadow:0 0 0 3px rgba(37,99,235,.12);}
.search-bar .btn{padding:9px 16px;border-radius:10px;white-space:nowrap;}
.search-bar .filter-count{margin-left:auto;font-size:12.5px;color:var(--text-light,#64748b);background:#f1f5f9;padding:7px 12px;border-radius:10px;white-space:nowrap;}
.search-bar .filter-count b{color:var(--primary,#2563eb);font-weight:700;}
@media(max-width:640px){.search-bar input[type=text],.search-bar input:not([type]){flex:1 1 100%;}.search-bar .filter-count{margin-left:0;}}

/* ═══════════ 申请/新增类表单美化 v14 ═══════════ */
.form-hero{padding:16px 18px;border-radius:14px;margin-bottom:14px;background:linear-gradient(120deg,rgba(37,99,235,.08),rgba(37,99,235,.02));border:1px solid rgba(37,99,235,.14);}
.form-hero h3{margin:0;font-size:18px;font-weight:700;color:#1e293b;display:flex;align-items:center;gap:8px;}
.form-hero p{margin:4px 0 0;font-size:12.5px;color:#64748b;line-height:1.5;}
.form-section{display:flex;align-items:center;gap:8px;margin:20px 0 12px;padding-bottom:8px;border-bottom:1.5px solid #eef2f7;font-size:14px;font-weight:700;color:#1e293b;}
.form-section:first-of-type{margin-top:0;}
.form-section .sec-ic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#eff6ff;color:#2563eb;font-size:14px;flex-shrink:0;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:640px){.form-row{grid-template-columns:1fr;}}
.form-group{margin-bottom:12px;}
.form-group label{display:block;font-size:13px;font-weight:600;color:#1e293b;margin-bottom:6px;}
.form-group .req{color:#dc2626;margin-left:2px;}
.form-hint{font-size:12px;color:#94a3b8;margin-top:5px;line-height:1.45;}
/* 表单输入控件（作用于 .card-body 内的裸 input/select/textarea） */
.card-body input[type=text],.card-body input:not([type]),.card-body input[type=tel],.card-body input[type=number],
.card-body select,.card-body textarea{
  width:100%;padding:11px 13px;border:1.5px solid #e2e8f0;border-radius:12px;font-size:15px;
  background:#fff;min-height:46px;color:#1e293b;transition:border-color .15s,box-shadow .15s,background .15s;
  box-sizing:border-box;
}
.card-body input:focus,.card-body select:focus,.card-body textarea:focus{
  outline:none;border-color:#2563eb;background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.card-body textarea{min-height:92px;resize:vertical;}
.form-actions{display:flex;gap:10px;padding:12px 2px;margin-top:area 6px;}
.form-actions{position:sticky;bottom:0;gap:10px;padding:12px;margin:6px -18px -18px;background:rgba(248,250,252,.94);backdrop-filter:blur(6px);border-top:1px solid #eef2f7;border-radius:0 0 14px 14px;}
.form-actions .btn{padding:11px 22px;border-radius:12px;min-height:44px;}

/* ═══════════════════════════════════════════════
   移动端人性化/美化增强 v15（主流手机屏 < 600px）
   · 更大触控目标 · 更柔更圆按钮 · 刘海安全区 · 留白呼吸
   ═══════════════════════════════════════════════ */
.btn{
  min-height:46px;
  letter-spacing:.2px;
  box-shadow:0 2px 6px rgba(22,33,62,.06);
  transition:opacity .15s, transform .1s, box-shadow .15s;
}
.btn-primary{ box-shadow:0 3px 10px rgba(37,99,235,.28); }
.btn:active{ transform:scale(.96); }
.btn-sm{ min-height:38px; gap:5px; }

/* iPhone 刘海安全区适配（桌面宽度不受影响） */
@supports(padding:max(0px)){
  .top-bar{
    padding-left:max(14px,env(safe-area-inset-left));
    padding-right:max(14px,env(safe-area-inset-right));
  }
  .container{
    padding-left:max(12px,env(safe-area-inset-left));
    padding-right:max(12px,env(safe-area-inset-right));
    padding-bottom:max(32px,env(safe-area-inset-bottom));
  }
  .form-actions{ padding-bottom:max(12px,env(safe-area-inset-bottom)); }
}

/* 首页统计：更圆更柔 */
.stat-card{ border-radius:18px; padding:20px 18px; box-shadow:var(--shadow-card); }

/* ============ 主流手机屏 < 600px ============ */
@media (max-width:600px){
  /* 顶栏：自动换行、不拥挤 */
  .top-bar{ flex-wrap:wrap; gap:6px 10px; padding:12px 12px; align-items:center; }
  .top-bar h1{ font-size:16px; }
  .top-bar .right-wrap{ margin-left:auto; }
  .top-bar .user-badge{ max-width:104px; font-size:11px; padding:4px 10px; }

  /* 按钮：整块化 + 更舒服的触控区 */
  .btn{ min-height:48px; font-size:15px; border-radius:14px; }
  .btn-sm{ min-height:44px; font-size:14px; padding:8px 16px; border-radius:12px; }
  .form-actions{ position:sticky; bottom:0; gap:12px; padding:12px; }
  .form-actions .btn{ flex:1; min-height:50px; font-size:15px; }
  .btn-group .btn{ flex:1; }

  /* 卡片留白呼吸 */
  .card-body{ padding:18px; }
  .card-header{ padding:16px 18px 12px; }

  /* 流程卡脚操作按钮：两列整块、好点易触 */
  .pcard-foot .btn-sm{ flex:1; min-width:0; justify-content:center; }
  .pcard-foot form[method=POST]{ display:flex; }
  .pcard-foot form button[type=submit]{ flex:1; min-height:44px; flex:1 1 0; }
  .pcard-foot form input[type=text]{ min-height:46px; font-size:16px; }

  /* 表单输入：16px 防 iOS 聚焦自动放大 */
  .card-body input[type=text],.card-body input:not([type]),.card-body input[type=tel],
  .card-body input[type=number],.card-body input[type=date],.card-body select,.card-body textarea,
  .form-control{
    min-height:48px; font-size:16px;
  }
  .card-body input[type=date]{ font-size:15px; }
  textarea.form-control{ min-height:96px; }

  /* 导航标签更大更易点 */
  .tab-nav{ padding:8px 8px; }
  .tab-row a{ padding-top:11px; padding-bottom:9px; font-size:13px; }
  .tab-row a .tab-icon{ font-size:22px; }

  /* 列表项 / 详情行 更大触控与行距 */
  .list-item{ padding:15px 16px; }
  .item-title{ font-size:16px; }
  .item-sub{ font-size:13px; }
  .detail-row{ padding:12px 2px; }
  .detail-label{ width:104px; }
  .detail-value{ font-size:15px; }

  /* 空状态 */
  .empty-state{ padding:52px 24px; }

  /* 表格横向滑动更顺滑 */
  .table-wrap{ -webkit-overflow-scrolling:touch; }
  table th,table td{ padding:13px 12px; font-size:14px; }

  /* 首页统计卡两列更透气 */
  .stats-grid{ gap:12px; }
}

/* ═══ 五部门并行审批：清爽卡片网格 v16 ═══ */
.approval-flow{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:10px;
}
.approval-node{
  padding:13px 14px; background:var(--bg-soft); border:1.5px solid var(--border);
  border-radius:14px; display:flex; flex-direction:column; gap:9px;
}
.approval-node.passed{ background:#f0fdf4; border-color:#86efac; }
.approval-node.rejected{ background:#fef2f2; border-color:#fecaca; }
.approval-node.pending{ border-style:dashed; }
.approval-node .node-label,
.approval-node .node-status{ display:none; }
.an-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.an-title{ font-size:14px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:6px; }
.an-badge{ font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap; }
.an-badge.p{ background:#fef3c7; color:#b45309; }
.an-badge.a{ background:#dcfce7; color:#166534; }
.an-badge.r{ background:#fee2e2; color:#b91c1c; }
.an-comment{ font-size:12px; color:#6b7280; background:#fff; border:1px solid var(--border-soft); border-radius:8px; padding:7px 10px; word-break:break-all; }
.an-actions{ display:flex; flex-direction:column; gap:8px; margin-top:auto; }
.an-remind{ width:100%; }
.an-remind .btn{ width:100%; min-height:38px; justify-content:center; }
.an-approve{ display:flex; flex-direction:column; gap:8px; }
.an-approve input{ width:100%; padding:9px 11px; border:1.5px solid var(--border); border-radius:10px; font-size:13px; min-height:40px; background:#fff; box-sizing:border-box; }
.an-approve .an-btns{ display:flex; gap:8px; }
.an-approve .an-btns .btn{ flex:1; min-height:42px; justify-content:center; }
@media(max-width:560px){ .approval-flow{ grid-template-columns:1fr; } }

/* ── 下拉式导航菜单 ── */
.nav-hd{ display:flex; align-items:center; gap:8px; min-height:38px; }
.nav-hamburger{ background:rgba(37,99,235,.08); border:none; color:var(--brand,#2563eb); font-size:20px; cursor:pointer; padding:4px 12px; border-radius:10px; min-height:38px; line-height:1; }
.nav-current{ flex:1; font-size:15px; font-weight:600; color:#1e293b; display:flex; align-items:center; gap:4px; }
.nav-caret{ cursor:pointer; color:#94a3b8; font-size:13px; padding:2px 6px; }
.tab-dropdown{ position:absolute; left:8px; right:8px; top:calc(100% + 6px); z-index:120; background:#fff; border:1px solid var(--border,#e2e8f0); border-radius:14px; box-shadow:0 14px 34px rgba(15,23,42,.16); padding:8px; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.tab-drop-item{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 6px 10px; border-radius:11px; color:#475569; text-decoration:none; font-size:13px; font-weight:600; transition:background .15s; }
.tab-drop-item .tab-icon{ font-size:22px; line-height:1.2; }
.tab-drop-item:hover{ background:#f1f5f9; }
.tab-drop-item.active{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ grid-template-columns:repeat(2,1fr); padding:10px; } .tab-drop-item{ padding:15px 6px; font-size:14px; } }

/* ── 下拉导航-纯文字版 ── */
.tab-dropdown{ grid-template-columns:1fr; padding:8px; gap:4px; max-height:min(70vh,470px); overflow-y:auto; }
.tab-drop-item{ flex-direction:row; justify-content:center; padding:13px 10px; border-radius:10px; font-size:14px; letter-spacing:.5px; }
.tab-drop-item .tab-icon{ display:none; }
.tab-drop-item:hover{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ grid-template-columns:1fr; padding:8px; } .tab-drop-item{ padding:16px 10px; font-size:15px; min-height:48px; } }

/* ── 下拉导航-紧凑双列纯文字 ── */
.tab-dropdown{ grid-template-columns:repeat(2,1fr) !important; gap:4px; padding:6px; max-height:min(60vh,430px); overflow-y:auto; }
.tab-drop-item{ flex-direction:column; justify-content:center; padding:8px 4px; border-radius:8px; font-size:12px; color:#475569; }
.tab-drop-item .tab-icon{ display:none !important; }
.tab-drop-item .tab-label{ line-height:1.2; }
.tab-drop-item:hover{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ grid-template-columns:repeat(2,1fr); gap:4px; padding:6px; } .tab-drop-item{ padding:9px 4px; font-size:12px; } }

/* ── 下拉导航-单列左对齐紧凑 ── */
.tab-dropdown{ grid-template-columns:1fr !important; gap:2px; padding:5px; max-height:min(58vh,400px); overflow-y:auto; }
.tab-drop-item{ flex-direction:row; justify-content:flex-start; align-items:center; padding:8px 12px; border-radius:7px; font-size:13px; color:#475569; }
.tab-drop-item .tab-icon{ display:none !important; }
.tab-drop-item:active{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ grid-template-columns:1fr; gap:2px; padding:5px; } .tab-drop-item{ padding:10px 12px; font-size:13px; } }

/* ── 下拉导航-行高-30% ── */
.tab-drop-item{ padding-top:6px !important; padding-bottom:6px !important; }
@media (max-width:640px){ .tab-drop-item{ padding:7px 12px !important; } }

/* ── 下拉导航-行高再缩 ── */
.tab-drop-item{ padding-top:4px !important; padding-bottom:4px !important; }
@media (max-width:640px){ .tab-drop-item{ padding:5px 12px !important; } }
/* ═══════════════════════════════════════════════════════════
   辉科食品 CRM — 移动端界面 v9
   设计理念：人性化 · 简单明了 · 清晰好读
   · 柔和配色、干净层级、友好文案、轻量微交互
   ═══════════════════════════════════════════════════════════ */
:root {
  /* 品牌 & 状态（柔和、清晰） */
  --primary:#2563eb; --primary-dark:#1d4ed8;
  --brand:#2563eb; --brand-soft:#eef2ff;
  --success:#16a34a; --warning:#ea580c; --danger:#dc2626;
  /* 状态色：✅绿=完成 / 🔵蓝=进行中 / ⚪灰=未开始 / 🔴红=驳回 */
  --st-done:#16a34a; --st-run:#2563eb; --st-wait:#94a3b8; --st-reject:#dc2626; --st-warn:#d97706;
  /* 中性 */
  --bg:#f2f4f8; --bg-soft:#f7f9fc;
  --card:#ffffff; --text:#1f2a3d; --text-light:#6b7a90; --text-secondary:#6b7a90;
  --border:#e3e8ef; --border-soft:#eef2f6;
  /* 圆角 / 阴影（柔和） */
  --radius:14px; --radius-sm:10px;
  --shadow-card:0 1px 2px rgba(22,33,62,.05),0 2px 8px rgba(22,33,62,.05);
  --shadow-lift:0 8px 24px rgba(30,45,90,.10);
}
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;
  background:var(--bg); color:var(--text); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{ -webkit-tap-highlight-color:transparent; }

/* ── 顶部栏：清爽品牌色 ── */
.top-bar{
  position:sticky; top:0; z-index:100;
  background:linear-gradient(135deg,#2563eb,#4338ca);
  color:#fff; padding:13px 16px;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 3px 12px rgba(37,99,235,.20);
}
.top-bar h1{ font-size:17px; font-weight:700; }
.top-bar .right-wrap{ display:flex; align-items:center; gap:8px; }
.top-bar .right-wrap a{ color:#fff; text-decoration:none; font-size:13px; }
.top-bar .right-wrap a:active{ opacity:.6; }
.top-bar .user-badge{
  background:rgba(255,255,255,.2); padding:4px 12px; border-radius:20px;
  font-size:12px; font-weight:600; max-width:150px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.top-bar .notif-icon{
  position:relative; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; font-size:18px;
  cursor:pointer;
}
.top-bar .notif-icon:active{ opacity:.7; }
.top-bar .notif-icon .badge{
  position:absolute; top:-3px; right:-3px; background:#ef4444; color:#fff;
  border-radius:50%; min-width:19px; height:19px; font-size:10px; font-weight:700;
  display:none; align-items:center; justify-content:center; padding:0 4px; border:2px solid #fff;
}

/* ── 导航：简洁双排 ── */
.tab-nav{
  position:sticky; top:52px; z-index:99;
  background:rgba(255,255,255,.96); border-bottom:1px solid var(--border);
  box-shadow:0 1px 3px rgba(22,33,62,.04);
  padding:8px 10px;
}
.tab-row{ display:flex; gap:6px; }
.tab-row + .tab-row{ margin-top:5px; }
.tab-row a{
  flex:1; min-width:0; text-align:center; padding:9px 4px 7px;
  text-decoration:none; font-size:12px; font-weight:500; color:var(--text-light);
  border-radius:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:background .15s,color .15s;
}
.tab-row a:active{ background:#f1f5f9; }
.tab-row a.active{ background:var(--brand); color:#fff; font-weight:600; }
.tab-row a .tab-icon{ font-size:20px; display:block; margin-bottom:2px; line-height:1.2; }
.tab-row a.active .tab-badge{ background:#fff; color:#ef4444; }

/* ── 内容区 ── */
.container{ max-width:520px; margin:0 auto; padding:14px 12px 30px; }

/* ── 卡片：干净白卡 ── */
.card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow-card);
  margin-bottom:14px; overflow:hidden; border:1px solid var(--border-soft);
}
.card-header{
  padding:15px 16px 11px; font-size:15px; font-weight:700; color:var(--text);
  border-bottom:1px solid var(--border-soft); display:flex; align-items:center; gap:8px;
}
.card-body{ padding:16px; }

/* ── 首页统计卡 ── */
.stats-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:2px 0 14px; }
.stat-card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow-card);
  padding:18px 16px; border:1px solid var(--border-soft);
}
.stat-value,.stat-num{ font-size:34px; font-weight:800; line-height:1.1; color:var(--primary); margin-bottom:5px; }
.stat-value[style*="color"],.stat-num[style*="color"]{ color:inherit; }
.stat-label{ font-size:13px; color:var(--text-light); font-weight:500; }
.stat-card .stat-icon{ font-size:18px; margin-bottom:2px; }

/* ── 按钮：清晰柔和 ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 20px; border-radius:12px; font-size:14px; font-weight:600;
  border:none; cursor:pointer; text-decoration:none; min-height:44px;
  transition:opacity .15s, transform .1s;
}
.btn:active{ opacity:.8; transform:scale(.97); }
.btn-primary{ background:var(--primary); color:#fff; box-shadow:0 2px 6px rgba(37,99,235,.25); }
.btn-success{ background:var(--success); color:#fff; }
.btn-warning{ background:var(--warning); color:#fff; }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-outline{ background:#fff; border:1.5px solid var(--border); color:var(--text); }
.btn-outline:active{ background:var(--bg); }
.btn-block{ width:100%; }
.btn-sm{ padding:6px 14px; font-size:13px; min-height:auto; border-radius:10px; }
.btn-group{ display:flex; gap:8px; flex-wrap:wrap; }

/* ── 表单 ── */
.form-group{ margin-bottom:14px; }
.form-group label{ display:block; font-size:13px; font-weight:600; color:var(--text); margin-bottom:6px; }
.form-control{
  width:100%; padding:11px 13px; border:1.5px solid var(--border);
  border-radius:12px; font-size:15px; background:#fff; min-height:46px;
  transition:border-color .15s, box-shadow .15s;
}
.form-control:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
textarea.form-control{ min-height:84px; resize:vertical; }
select.form-control{ appearance:auto; }

/* ── 列表项 ── */
.list-item{
  display:flex; align-items:center; padding:14px 16px;
  border-bottom:1px solid var(--border-soft); text-decoration:none; color:var(--text);
}
.list-item:last-child{ border-bottom:none; }
.list-item:active{ background:var(--bg-soft); }
.item-main{ flex:1; min-width:0; }
.item-title{ font-size:15px; font-weight:600; margin-bottom:3px; }
.item-sub{ font-size:12px; color:var(--text-light); }
.item-right{ text-align:right; flex-shrink:0; margin-left:8px; }
.item-badge{
  display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600;
}
.badge-pending{ background:#fef3c7; color:#92400e; }
.badge-approved{ background:#dcfce7; color:#166534; }
.badge-rejected{ background:#fee2e2; color:#991b1b; }
.badge-shipped{ background:#dbeafe; color:#1e40af; }
.badge-signed{ background:#e0e7ff; color:#3730a3; }
.badge-pass{ background:#dcfce7; color:#166534; }
.badge-fail{ background:#fee2e2; color:#991b1b; }

/* ── 状态徽章 chips（清晰可读） ── */
.st{ display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; line-height:1.4; }
.st::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.st-done{ background:#dcfce7; color:#166534; }
.st-run{ background:#dbeafe; color:#1e40af; }
.st-wait{ background:#eef2f6; color:#64748b; }
.st-reject{ background:#fee2e2; color:#b91c1c; }
.st-warn{ background:#fef3c7; color:#b45309; }

/* ── 细进度条 ── */
.pbar{ height:7px; background:#eef2f6; border-radius:7px; overflow:hidden; position:relative; }
.pbar>i{ display:block; height:100%; border-radius:7px; background:var(--primary); transition:width .4s ease; }
.pbar.p-done>i{ background:var(--success); }
.pbar.p-warn>i{ background:var(--warning); }

/* ── Flash 消息 ── */
.flash{
  padding:12px 16px; border-radius:12px; margin-bottom:12px; font-size:14px; font-weight:500;
  border:1px solid transparent;
}
.flash-success{ background:#f0fdf4; color:#166534; border-color:#bbf7d0; }
.flash-danger{ background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.flash-warning{ background:#fffbeb; color:#92400e; border-color:#fde68a; }

/* ── 详情行 ── */
.detail-row{ display:flex; padding:10px 0; border-bottom:1px solid var(--border-soft); }
.detail-label{ width:96px; flex-shrink:0; font-size:13px; color:var(--text-light); font-weight:500; }
.detail-value{ flex:1; font-size:14px; color:var(--text); }

/* ── 流程步骤 ── */
.progress-steps{ display:flex; padding:14px 8px; gap:2px; }
.progress-step{ flex:1; text-align:center; font-size:11px; color:var(--text-light); position:relative; }
.progress-step .dot{
  width:26px; height:26px; border-radius:50%; background:#e3e8ef;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; margin-bottom:5px; color:#fff;
}
.progress-step.active .dot{ background:var(--primary); }
.progress-step.done .dot{ background:var(--success); }
.progress-step.fail .dot{ background:var(--danger); }

/* ── 表格 ── */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table{ width:100%; border-collapse:collapse; font-size:13px; }
table th,table td{ padding:11px 12px; text-align:left; white-space:nowrap; }
table thead th{ background:#f8fafc; color:var(--text-light); font-size:12px; font-weight:700; }
table tbody tr{ border-bottom:1px solid var(--border-soft); }
table tbody tr:active{ background:var(--bg-soft); }

/* ── 空状态 ── */
.empty-state{ text-align:center; padding:44px 24px; color:var(--text-light); border-radius:var(--radius); }
.empty-state .icon{ font-size:48px; margin-bottom:12px; display:block; }
.empty-state p{ font-size:14px; }

/* ── 页面标题 ── */
.page-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.page-header h2{ font-size:19px; font-weight:800; }

/* ── 角色标记 ── */
.role-tag{ display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600; }
.role-admin{ background:#e0e7ff; color:#3730a3; }
.role-sales{ background:#dbeafe; color:#1e40af; }
.role-market{ background:#fef3c7; color:#92400e; }
.role-warehouse{ background:#dcfce7; color:#166534; }
.role-marketer{ background:#f3e8ff; color:#6b21a8; }
.role-general_manager{ background:#ffedd5; color:#9a3412; }
.role-finance{ background:#fce4ec; color:#9b1c1c; }
.role-quality{ background:#ccfbf1; color:#0f766e; }
.role-hr{ background:#ffedd5; color:#c2410c; }
.role-workshop{ background:#f1f5f9; color:#475569; }
.role-logistics{ background:#e0f2fe; color:#0369a1; }
.role-rd{ background:#ede9fe; color:#6d28d9; }
.role-procurement{ background:#fce7f3; color:#9d174d; }

/* ── 分析页 ── */
.ana-tabs{
  display:flex; gap:4px; overflow-x:auto; background:#fff; border-radius:12px;
  margin-bottom:14px; padding:4px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  box-shadow:var(--shadow-card);
}
.ana-tabs::-webkit-scrollbar{ display:none; }
.ana-tabs a{
  flex-shrink:0; padding:9px 14px; text-decoration:none; font-size:13px;
  font-weight:600; color:var(--text-light); border-radius:9px;
}
.ana-tabs a.active{ background:var(--brand-soft); color:var(--primary); font-weight:700; }
.ana-stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.ana-stat{ background:#fff; border-radius:12px; padding:16px; text-align:center; box-shadow:var(--shadow-card); }
.ana-stat .num{ font-size:24px; font-weight:800; color:var(--primary); }
.ana-stat .label{ font-size:11px; color:var(--text-light); margin-top:3px; }
.bar-chart{ padding:12px 16px; }
.bar-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.bar-label{ width:72px; flex-shrink:0; font-size:12px; color:var(--text); text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-track{ flex:1; height:20px; background:#f1f5f9; border-radius:10px; overflow:hidden; }
.bar-fill{ height:100%; border-radius:10px; background:var(--primary); transition:width .4s ease; min-width:4px; }
.bar-val{ font-size:12px; font-weight:700; color:var(--text); min-width:30px; text-align:right; }
.rank-list{ list-style:none; }
.rank-list li{ display:flex; align-items:center; padding:11px 16px; border-bottom:1px solid var(--border-soft); gap:10px; }
.rank-list li:last-child{ border-bottom:none; }
.rank-num{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex-shrink:0; }
.rank-1{ background:#fef3c7; color:#d97706; }
.rank-2{ background:#e2e8f0; color:#475569; }
.rank-3{ background:#fde68a; color:#92400e; }
.rank-n{ background:#f1f5f9; color:#94a3b8; }

/* ── 流程总览 ── */
.flow-overview{ display:flex; align-items:center; justify-content:center; gap:2px; padding:0 4px; }
.flow-node{ flex:1; text-align:center; background:#f8fafc; border-radius:10px; padding:7px 2px; border:1.5px solid var(--border); max-width:92px; }
.flow-node .fn-icon{ font-size:22px; margin-bottom:2px; }
.flow-node .fn-label{ font-size:11px; font-weight:700; color:var(--text); line-height:1.3; }
.flow-node .fn-role{ font-size:10px; color:var(--text-light); margin-top:1px; }
.flow-arrow{ font-size:16px; color:var(--text-light); flex-shrink:0; padding:0 2px; }

/* ── 敏感信息 ── */
.sensitive-hidden{ filter:blur(4px); user-select:none; }

/* ── 角标 / 加载条 / 下拉刷新 ── */
.tab-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  background:#ef4444; color:#fff; font-size:10px; font-weight:700; line-height:1;
  margin-left:3px; vertical-align:middle; position:relative; top:-1px;
}
#topprog{ position:fixed; top:0; left:0; height:3px; width:0; z-index:9999; border-radius:0 3px 3px 0; opacity:0; transition:opacity .3s; }
#ptr-ind{
  position:fixed; top:112px; left:50%; transform:translate(-50%,-30px);
  background:rgba(30,41,59,.86); color:#fff; font-size:12px; padding:7px 16px;
  border-radius:22px; z-index:999; opacity:0; transition:opacity .18s,transform .18s;
  pointer-events:none; box-shadow:var(--shadow-lift);
}
#ptr-ind.on{ opacity:1; transform:translate(-50%,0); }
#ptr-ind .spin{ display:inline-block; margin-right:6px; animation:ptrSpin .8s linear infinite; }
@keyframes ptrSpin{ to{ transform:rotate(360deg); } }

/* ── 移动端 ── */
@media (max-width:640px){
  .container{ padding:12px 10px 24px; }
  .top-bar{ padding:10px 12px; }
  .top-bar h1{ font-size:16px; }
  .tab-nav{ padding:7px 8px; top:50px; }
  .card{ border-radius:13px; }
  .form-control,.form-group input,.form-group select,.form-group textarea{ font-size:15px; min-height:46px; }
  .btn{ min-height:46px; font-size:15px; }
  .page-header h2{ font-size:18px; }
  .stat-value,.stat-num{ font-size:30px; }
}

/* ═══════════════════════════════════════════════════════════
   详情/子页面统一样式（客户/样品/产品详情共用）
   ═══════════════════════════════════════════════════════════ */
/* 返回链接 */
.back-link{
  display:inline-flex; align-items:center; gap:4px;
  color:var(--text-light); text-decoration:none; font-size:13px; font-weight:500;
  margin-bottom:10px; padding:4px 10px 4px 4px; border-radius:8px;
}
.back-link:active{ background:var(--bg); }
.detail-hero{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }

/* Tag 徽章（详情头/列表用） */
.tag{ display:inline-block; padding:2px 10px; border-radius:20px; font-size:11px; font-weight:600; vertical-align:middle; }
.tag-info{ background:#dbeafe; color:#1e40af; }
.tag-success,.tag-done,.tag-approved,.tag-pass{ background:#dcfce7; color:#166534; }
.tag-warning,.tag-pending{ background:#fef3c7; color:#92400e; }
.tag-danger,.tag-rejected,.tag-fail{ background:#f1f5f9; color:#64748b; }

/* 详情信息网格 */
.detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4px 18px; }
.detail-field{ padding:9px 0; border-bottom:1px solid var(--border-soft); }
.detail-grid > .detail-field:nth-last-child(-n+2){ border-bottom:none; }
.field-label{ font-size:12px; color:var(--text-light); font-weight:500; margin-bottom:2px; }
.field-value{ font-size:14px; color:var(--text); word-break:break-word; }

/* 进度条（产品详情） */
.progress-bar{ width:100%; background:#eef2f6; border-radius:20px; overflow:hidden; position:relative; }
.progress-bar-fill{ background:var(--primary); border-radius:20px; transition:width .5s ease; }
.progress-bar-fill.green{ background:var(--success); }
.progress-bar-fill.orange{ background:var(--warning); }

/* 里程碑（产品详情） */
.milestones{ margin-top:6px; }
.milestone{
  display:flex; align-items:center; gap:6px; padding:10px 12px; margin:6px 0;
  background:var(--bg-soft); border:1px solid var(--border-soft); border-radius:10px;
  font-size:13px; color:var(--text-light);
}
.milestone.done{ background:#f0fdf4; border-color:#bbf7d0; color:#166534; }

/* 审批流程节点（样品详情等） */
.approval-flow{ display:flex; flex-direction:column; gap:8px; }
.approval-node{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; background:var(--bg-soft); border:1.5px solid var(--border);
  border-radius:12px;
}
.approval-node .node-label{ font-size:13px; font-weight:600; color:var(--text); }
.approval-node .node-status{ font-size:12px; font-weight:600; color:var(--text-light); }
.approval-node.passed{ background:#f0fdf4; border-color:#86efac; }
.approval-node.passed .node-status{ color:#16a34a; }
.approval-node.rejected{ background:#fef2f2; border-color:#fecaca; }
.approval-node.rejected .node-status{ color:#dc2626; }
.approval-node.pending{ border-style:dashed; }

/* 子页卡片内小块标题 */
.sub-title{ font-size:14px; font-weight:700; color:var(--text); margin:16px 0 8px; }

/* 列表内链接 */
.table-wrap tbody a{ color:var(--primary); text-decoration:none; font-weight:600; }
.table-wrap tbody a:active{ text-decoration:underline; }

@media (max-width:640px){
  .detail-grid{ grid-template-columns:1fr; }
  .detail-hero{ flex-direction:column; align-items:flex-start; }
}

/* ═══════════════════════════════════════════════════════════
   列表卡片共用样式（研发/立项/样品列表统一视觉）
   ═══════════════════════════════════════════════════════════ */
.pcard{background:#fff;border-radius:12px;margin-bottom:8px;box-shadow:var(--shadow-card);overflow:hidden;position:relative;}
.pcard > a{text-decoration:none;color:inherit;display:block;padding:12px 14px 6px;}
.pcard-body{display:flex;align-items:flex-start;gap:10px;}
.pcard-left{flex:1;min-width:0;}
.pcard-name{font-size:15px;font-weight:700;color:#1e293b;line-height:1.3;}
.pcard-name .pid{font-size:10px;color:#94a3b8;font-weight:400;margin-left:4px;}
.pcard-meta{font-size:12px;color:#64748b;margin-top:4px;display:flex;flex-wrap:wrap;gap:3px 10px;}
.pcard-meta b{font-weight:700;color:#334155;}
.pcard-status{position:absolute;right:12px;top:12px;font-size:11px;font-weight:700;padding:2px 10px;border-radius:12px;letter-spacing:.2px;display:inline-flex;align-items:center;gap:4px;}
.pcard-status.done{background:#dcfce7;color:#15803d;}
.pcard-status.running,.pcard-status.approved,.pcard-status.info{background:#dbeafe;color:#1d4ed8;}
.pcard-status.paused{background:#f1f5f9;color:#64748b;}
.pcard-status.waiting,.pcard-status.pending{background:#fef3c7;color:#b45309;}
/* 已撤销/已驳回 → 一律灰色，不做彩色强调 */
.pcard-status.rejected{background:#f1f5f9;color:#64748b;}
.pcard-desc{font-size:12px;color:#64748b;margin-top:6px;line-height:1.5;padding-right:6px;}
.pcard-foot{padding:2px 14px 10px;}
.pcard-process{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding-top:6px;}
.proc-step{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#64748b;background:#f1f5f9;border-radius:12px;padding:3px 9px;}
.proc-step.ok{background:#dcfce7;color:#15803d;}
.proc-step.no{background:#fee2e2;color:#b91c1c;}
.proc-step.todo{background:#fff;border:1px dashed #cbd5e1;}
/* 红点脉冲（审批中/未完成） */
.todo-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#ef4444;vertical-align:middle;animation:tdPulse 1.2s infinite;flex-shrink:0;}
@keyframes tdPulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.6);}70%{box-shadow:0 0 0 7px rgba(239,68,68,0);}100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}}
/* 分组头 */
.sec-header{display:flex;align-items:center;gap:8px;padding:12px 4px 6px;}
.sec-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.sec-title{font-size:14px;font-weight:700;color:#1e293b;}
.sec-count{font-size:12px;color:#94a3b8;font-weight:400;}
.sec-subtitle{font-size:12px;font-weight:600;color:#64748b;padding:6px 4px 2px;display:flex;align-items:center;gap:4px;}
/* 列表页上方操作条 */
.action-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 0 10px;}

/* 列表页分类标签栏 + 分组区块 */
.tab-scroll{display:flex;gap:6px;overflow-x:auto;padding:6px 2px 10px;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.tab-scroll::-webkit-scrollbar{display:none;}
.tab-btn{border:1px solid var(--border,#e2e8f0);background:#fff;color:#475569;padding:7px 14px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;flex-shrink:0;}
.tab-btn.active{background:var(--primary,#2563eb);color:#fff;border-color:var(--primary,#2563eb);}
.tab-btn .cnt{font-size:10px;background:rgba(0,0,0,.1);border-radius:10px;padding:1px 6px;margin-left:3px;font-weight:400;}
.tab-btn.active .cnt{background:rgba(255,255,255,.25);}
.list-section{padding:0 2px;}

/* ═══════════════════════════════════════════════════════════
   流程进度时间轴（研发/立项/样品通用 · 标识卡在哪个节点）
   ═══════════════════════════════════════════════════════════ */
.flow-tl{display:flex;align-items:flex-start;justify-content:space-between;gap:0;padding:8px 2px 4px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.ftl-node{flex:1;min-width:52px;display:flex;flex-direction:column;align-items:center;position:relative;padding:2px;}
.ftl-node::before{content:'';position:absolute;top:9px;left:-50%;width:100%;height:2px;background:#e2e8f0;z-index:1;}
.ftl-node:first-child::before{display:none;}
.ftl-dot{width:16px;height:16px;border-radius:50%;background:#e2e8f0;border:2px solid #fff;box-shadow:0 0 0 1.5px #e2e8f0;z-index:2;margin-bottom:3px;flex-shrink:0;}
.ftl-node.done::before{background:#86efac;}
.ftl-node.done .ftl-dot{background:var(--success,#16a34a);box-shadow:0 0 0 1.5px #bbf7d0;}
.ftl-node.cur::before{background:#93c5fd;}
.ftl-node.cur .ftl-dot{background:var(--primary,#2563eb);box-shadow:0 0 0 1.5px #bfdbfe;animation:ftlPulse 1.2s infinite;}
.ftl-node.reject .ftl-dot{background:#cbd5e1;box-shadow:0 0 0 1.5px #e2e8f0;}
.ftl-node.todo::before{background:#e2e8f0;}
.ftl-label{font-size:10px;color:#475569;white-space:nowrap;text-align:center;line-height:1.15;}
.ftl-label small{display:block;font-size:8px;color:#94a3b8;font-weight:400;}
@keyframes ftlPulse{0%{box-shadow:0 0 0 0 rgba(37,99,235,.5),0 0 0 1.5px #bfdbfe;}70%{box-shadow:0 0 0 9px rgba(37,99,235,0),0 0 0 1.5px #bfdbfe;}100%{box-shadow:0 0 0 0 rgba(37,99,235,0),0 0 0 1.5px #bfdbfe;}}
/* 卡在当前节点横幅 */
.flow-banner{display:flex;align-items:center;gap:6px;background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;font-size:12px;border-radius:8px;padding:5px 10px;margin:2px 2px 2px;}
.flow-banner.done{background:#f0fdf4;border-color:#bbf7d0;color:#166534;}
.flow-banner.muted{background:#f8fafc;border-color:#e2e8f0;color:#64748b;}
.flow-banner .fb-dot{width:9px;height:9px;border-radius:50%;background:var(--primary,#2563eb);flex-shrink:0;animation:ftlPulse .9s infinite;}

/* ═══════════ 搜索/筛选栏（.search-bar）v13 ═══════════ */
.search-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:10px;margin:0 0 14px;box-shadow:0 1px 2px rgba(15,23,42,.04);}
.search-bar input[type=text],.search-bar input[type=search],.search-bar input:not([type]){
  flex:1 1 200px;min-width:150px;padding:9px 12px 9px 36px;border:1px solid #e2e8f0;border-radius:10px;
  font-size:14px;color:var(--text,#1e293b);background:#f8fafc url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%2394a3b8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>') no-repeat 12px center;background-size:16px;transition:border-color .15s,box-shadow .15s,background .15s;}
.search-bar input:focus{outline:none;border-color:var(--primary,#2563eb);background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%232563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>') no-repeat 12px center;background-size:16px;box-shadow:0 0 0 3px rgba(37,99,235,.12);}
.search-bar select{padding:9px 30px 9px 12px;border:1px solid #e2e8f0;border-radius:10px;font-size:14px;color:var(--text,#1e293b);background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%2364748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') no-repeat right 10px center;background-size:14px;appearance:none;-webkit-appearance:none;cursor:pointer;transition:border-color .15s,box-shadow .15s;min-width:110px;}
.search-bar select:focus{outline:none;border-color:var(--primary,#2563eb);box-shadow:0 0 0 3px rgba(37,99,235,.12);}
.search-bar .btn{padding:9px 16px;border-radius:10px;white-space:nowrap;}
.search-bar .filter-count{margin-left:auto;font-size:12.5px;color:var(--text-light,#64748b);background:#f1f5f9;padding:7px 12px;border-radius:10px;white-space:nowrap;}
.search-bar .filter-count b{color:var(--primary,#2563eb);font-weight:700;}
@media(max-width:640px){.search-bar input[type=text],.search-bar input:not([type]){flex:1 1 100%;}.search-bar .filter-count{margin-left:0;}}

/* ═══════════ 申请/新增类表单美化 v14 ═══════════ */
.form-hero{padding:16px 18px;border-radius:14px;margin-bottom:14px;background:linear-gradient(120deg,rgba(37,99,235,.08),rgba(37,99,235,.02));border:1px solid rgba(37,99,235,.14);}
.form-hero h3{margin:0;font-size:18px;font-weight:700;color:#1e293b;display:flex;align-items:center;gap:8px;}
.form-hero p{margin:4px 0 0;font-size:12.5px;color:#64748b;line-height:1.5;}
.form-section{display:flex;align-items:center;gap:8px;margin:20px 0 12px;padding-bottom:8px;border-bottom:1.5px solid #eef2f7;font-size:14px;font-weight:700;color:#1e293b;}
.form-section:first-of-type{margin-top:0;}
.form-section .sec-ic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:#eff6ff;color:#2563eb;font-size:14px;flex-shrink:0;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:640px){.form-row{grid-template-columns:1fr;}}
.form-group{margin-bottom:12px;}
.form-group label{display:block;font-size:13px;font-weight:600;color:#1e293b;margin-bottom:6px;}
.form-group .req{color:#dc2626;margin-left:2px;}
.form-hint{font-size:12px;color:#94a3b8;margin-top:5px;line-height:1.45;}
/* 表单输入控件（作用于 .card-body 内的裸 input/select/textarea） */
.card-body input[type=text],.card-body input:not([type]),.card-body input[type=tel],.card-body input[type=number],
.card-body select,.card-body textarea{
  width:100%;padding:11px 13px;border:1.5px solid #e2e8f0;border-radius:12px;font-size:15px;
  background:#fff;min-height:46px;color:#1e293b;transition:border-color .15s,box-shadow .15s,background .15s;
  box-sizing:border-box;
}
.card-body input:focus,.card-body select:focus,.card-body textarea:focus{
  outline:none;border-color:#2563eb;background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.card-body textarea{min-height:92px;resize:vertical;}
.form-actions{display:flex;gap:10px;padding:12px 2px;margin-top:area 6px;}
.form-actions{position:sticky;bottom:0;gap:10px;padding:12px;margin:6px -18px -18px;background:rgba(248,250,252,.94);backdrop-filter:blur(6px);border-top:1px solid #eef2f7;border-radius:0 0 14px 14px;}
.form-actions .btn{padding:11px 22px;border-radius:12px;min-height:44px;}

/* ═══════════════════════════════════════════════
   移动端人性化/美化增强 v15（主流手机屏 < 600px）
   · 更大触控目标 · 更柔更圆按钮 · 刘海安全区 · 留白呼吸
   ═══════════════════════════════════════════════ */
.btn{
  min-height:46px;
  letter-spacing:.2px;
  box-shadow:0 2px 6px rgba(22,33,62,.06);
  transition:opacity .15s, transform .1s, box-shadow .15s;
}
.btn-primary{ box-shadow:0 3px 10px rgba(37,99,235,.28); }
.btn:active{ transform:scale(.96); }
.btn-sm{ min-height:38px; gap:5px; }

/* iPhone 刘海安全区适配（桌面宽度不受影响） */
@supports(padding:max(0px)){
  .top-bar{
    padding-left:max(14px,env(safe-area-inset-left));
    padding-right:max(14px,env(safe-area-inset-right));
  }
  .container{
    padding-left:max(12px,env(safe-area-inset-left));
    padding-right:max(12px,env(safe-area-inset-right));
    padding-bottom:max(32px,env(safe-area-inset-bottom));
  }
  .form-actions{ padding-bottom:max(12px,env(safe-area-inset-bottom)); }
}

/* 首页统计：更圆更柔 */
.stat-card{ border-radius:18px; padding:20px 18px; box-shadow:var(--shadow-card); }

/* ============ 主流手机屏 < 600px ============ */
@media (max-width:600px){
  /* 顶栏：自动换行、不拥挤 */
  .top-bar{ flex-wrap:wrap; gap:6px 10px; padding:12px 12px; align-items:center; }
  .top-bar h1{ font-size:16px; }
  .top-bar .right-wrap{ margin-left:auto; }
  .top-bar .user-badge{ max-width:104px; font-size:11px; padding:4px 10px; }

  /* 按钮：整块化 + 更舒服的触控区 */
  .btn{ min-height:48px; font-size:15px; border-radius:14px; }
  .btn-sm{ min-height:44px; font-size:14px; padding:8px 16px; border-radius:12px; }
  .form-actions{ position:sticky; bottom:0; gap:12px; padding:12px; }
  .form-actions .btn{ flex:1; min-height:50px; font-size:15px; }
  .btn-group .btn{ flex:1; }

  /* 卡片留白呼吸 */
  .card-body{ padding:18px; }
  .card-header{ padding:16px 18px 12px; }

  /* 流程卡脚操作按钮：两列整块、好点易触 */
  .pcard-foot .btn-sm{ flex:1; min-width:0; justify-content:center; }
  .pcard-foot form[method=POST]{ display:flex; }
  .pcard-foot form button[type=submit]{ flex:1; min-height:44px; flex:1 1 0; }
  .pcard-foot form input[type=text]{ min-height:46px; font-size:16px; }

  /* 表单输入：16px 防 iOS 聚焦自动放大 */
  .card-body input[type=text],.card-body input:not([type]),.card-body input[type=tel],
  .card-body input[type=number],.card-body input[type=date],.card-body select,.card-body textarea,
  .form-control{
    min-height:48px; font-size:16px;
  }
  .card-body input[type=date]{ font-size:15px; }
  textarea.form-control{ min-height:96px; }

  /* 导航标签更大更易点 */
  .tab-nav{ padding:8px 8px; }
  .tab-row a{ padding-top:11px; padding-bottom:9px; font-size:13px; }
  .tab-row a .tab-icon{ font-size:22px; }

  /* 列表项 / 详情行 更大触控与行距 */
  .list-item{ padding:15px 16px; }
  .item-title{ font-size:16px; }
  .item-sub{ font-size:13px; }
  .detail-row{ padding:12px 2px; }
  .detail-label{ width:104px; }
  .detail-value{ font-size:15px; }

  /* 空状态 */
  .empty-state{ padding:52px 24px; }

  /* 表格横向滑动更顺滑 */
  .table-wrap{ -webkit-overflow-scrolling:touch; }
  table th,table td{ padding:13px 12px; font-size:14px; }

  /* 首页统计卡两列更透气 */
  .stats-grid{ gap:12px; }
}

/* ═══ 五部门并行审批：清爽卡片网格 v16 ═══ */
.approval-flow{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:10px;
}
.approval-node{
  padding:13px 14px; background:var(--bg-soft); border:1.5px solid var(--border);
  border-radius:14px; display:flex; flex-direction:column; gap:9px;
}
.approval-node.passed{ background:#f0fdf4; border-color:#86efac; }
.approval-node.rejected{ background:#fef2f2; border-color:#fecaca; }
.approval-node.pending{ border-style:dashed; }
.approval-node .node-label,
.approval-node .node-status{ display:none; }
.an-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.an-title{ font-size:14px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:6px; }
.an-badge{ font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap; }
.an-badge.p{ background:#fef3c7; color:#b45309; }
.an-badge.a{ background:#dcfce7; color:#166534; }
.an-badge.r{ background:#fee2e2; color:#b91c1c; }
.an-comment{ font-size:12px; color:#6b7280; background:#fff; border:1px solid var(--border-soft); border-radius:8px; padding:7px 10px; word-break:break-all; }
.an-actions{ display:flex; flex-direction:column; gap:8px; margin-top:auto; }
.an-remind{ width:100%; }
.an-remind .btn{ width:100%; min-height:38px; justify-content:center; }
.an-approve{ display:flex; flex-direction:column; gap:8px; }
.an-approve input{ width:100%; padding:9px 11px; border:1.5px solid var(--border); border-radius:10px; font-size:13px; min-height:40px; background:#fff; box-sizing:border-box; }
.an-approve .an-btns{ display:flex; gap:8px; }
.an-approve .an-btns .btn{ flex:1; min-height:42px; justify-content:center; }
@media(max-width:560px){ .approval-flow{ grid-template-columns:1fr; } }

/* ── 下拉式导航菜单 ── */
.nav-hd{ display:flex; align-items:center; gap:8px; min-height:38px; }
.nav-hamburger{ background:rgba(37,99,235,.08); border:none; color:var(--brand,#2563eb); font-size:20px; cursor:pointer; padding:4px 12px; border-radius:10px; min-height:38px; line-height:1; }
.nav-current{ flex:1; font-size:15px; font-weight:600; color:#1e293b; display:flex; align-items:center; gap:4px; }
.nav-caret{ cursor:pointer; color:#94a3b8; font-size:13px; padding:2px 6px; }
.tab-dropdown{ position:absolute; left:8px; right:8px; top:calc(100% + 6px); z-index:120; background:#fff; border:1px solid var(--border,#e2e8f0); border-radius:14px; box-shadow:0 14px 34px rgba(15,23,42,.16); padding:8px; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.tab-drop-item{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 6px 10px; border-radius:11px; color:#475569; text-decoration:none; font-size:13px; font-weight:600; transition:background .15s; }
.tab-drop-item .tab-icon{ font-size:22px; line-height:1.2; }
.tab-drop-item:hover{ background:#f1f5f9; }
.tab-drop-item.active{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ grid-template-columns:repeat(2,1fr); padding:10px; } .tab-drop-item{ padding:15px 6px; font-size:14px; } }

/* ── 下拉导航-纯文字版 ── */
.tab-dropdown{ grid-template-columns:1fr; padding:8px; gap:4px; max-height:min(70vh,470px); overflow-y:auto; }
.tab-drop-item{ flex-direction:row; justify-content:center; padding:13px 10px; border-radius:10px; font-size:14px; letter-spacing:.5px; }
.tab-drop-item .tab-icon{ display:none; }
.tab-drop-item:hover{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ grid-template-columns:1fr; padding:8px; } .tab-drop-item{ padding:16px 10px; font-size:15px; min-height:48px; } }

/* ── 下拉导航-紧凑双列纯文字 ── */
.tab-dropdown{ grid-template-columns:repeat(2,1fr) !important; gap:4px; padding:6px; max-height:min(60vh,430px); overflow-y:auto; }
.tab-drop-item{ flex-direction:column; justify-content:center; padding:8px 4px; border-radius:8px; font-size:12px; color:#475569; }
.tab-drop-item .tab-icon{ display:none !important; }
.tab-drop-item .tab-label{ line-height:1.2; }
.tab-drop-item:hover{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ grid-template-columns:repeat(2,1fr); gap:4px; padding:6px; } .tab-drop-item{ padding:9px 4px; font-size:12px; } }

/* ── 下拉导航-单列左对齐紧凑 ── */
.tab-dropdown{ grid-template-columns:1fr !important; gap:2px; padding:5px; max-height:min(58vh,400px); overflow-y:auto; }
.tab-drop-item{ flex-direction:row; justify-content:flex-start; align-items:center; padding:8px 12px; border-radius:7px; font-size:13px; color:#475569; }
.tab-drop-item .tab-icon{ display:none !important; }
.tab-drop-item:active{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ grid-template-columns:1fr; gap:2px; padding:5px; } .tab-drop-item{ padding:10px 12px; font-size:13px; } }

/* ── 下拉导航-行高-30% ── */
.tab-drop-item{ padding-top:6px !important; padding-bottom:6px !important; }
@media (max-width:640px){ .tab-drop-item{ padding:7px 12px !important; } }

/* ── 下拉导航-行高再缩 ── */
.tab-drop-item{ padding-top:4px !important; padding-bottom:4px !important; }
@media (max-width:640px){ .tab-drop-item{ padding:5px 12px !important; } }

/* ── 顶栏汉堡按钮 + 当前模块 + 独立下拉 ── */
.nav-hamburger{ background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.45); color:#fff; font-size:19px; cursor:pointer; padding:2px 10px; border-radius:8px; min-height:34px; line-height:1; }
.nav-cur{ color:#fff; font-size:13px; font-weight:600; margin-right:2px; }
.tab-dropdown{ position:fixed !important; top:56px; left:6px; right:6px; z-index:130; grid-template-columns:1fr; gap:2px; padding:6px; background:#fff; border:1px solid var(--border,#e2e8f0); border-radius:12px; box-shadow:0 14px 34px rgba(15,23,42,.18); max-height:min(62vh,440px); overflow-y:auto; }
.tab-drop-item{ flex-direction:row; justify-content:flex-start; align-items:center; padding:6px 12px; border-radius:7px; font-size:13px; color:#475569; }
.tab-drop-item .tab-icon{ display:none !important; }
.tab-drop-item:hover{ background:var(--brand,#2563eb); color:#fff; }
.tab-drop-item.active{ background:var(--brand,#2563eb); color:#fff; }
@media (max-width:640px){ .tab-dropdown{ top:52px; padding:6px; } .tab-drop-item{ padding:7px 12px; font-size:13px; } }

/* ── 待办下拉面板 + 顶栏紧凑 ── */
.top-bar{ justify-content:flex-end; }
.top-bar .right-wrap{ gap:6px; }
.todo-drop{ position:fixed !important; top:56px; right:8px; width:min(92vw,360px); max-height:70vh; overflow-y:auto; z-index:130; background:#fff; border:1px solid var(--border,#e2e8f0); border-radius:14px; box-shadow:0 16px 40px rgba(15,23,42,.20); padding:8px; }
.todo-item{ display:flex; align-items:center; gap:8px; padding:10px; border-radius:9px; color:#1e293b; text-decoration:none; font-size:13px; border-bottom:1px solid #f1f5f9; }
.todo-item:hover{ background:#f1f5f9; }
.todo-item .ti{ font-size:16px; flex-shrink:0; }
.todo-item .tt{ flex:1; line-height:1.3; }
.todo-item .go{ color:#94a3b8; font-size:16px; }
.todo-more{ text-align:center; font-size:11px; color:#94a3b8; padding:6px 0 2px; }
.todo-all{ display:block; text-align:center; padding:10px; margin-top:4px; color:#2563eb; font-weight:700; font-size:13px; text-decoration:none; border-radius:8px; background:#eff6ff; }
.todo-all:hover{ background:#dbeafe; }
.todo-empty{ text-align:center; padding:18px 10px; color:#94a3b8; font-size:13px; }
@media(max-width:640px){ .todo-drop{ top:52px; right:6px; left:6px; width:auto; } }

/* ── 顶栏模块文字 ── */
.nav-cur{ color:#fff; font-size:14px; font-weight:700; margin-right:auto; letter-spacing:.5px; }
/* ── 客户 我的客户/客户池 标签 ── */
.cust-tabs{ display:flex; gap:8px; margin-bottom:10px; }
.cust-tabs a{ flex:1; text-align:center; padding:10px 6px; border-radius:11px; background:#fff; border:1px solid var(--border,#e2e8f0); color:#475569; text-decoration:none; font-size:14px; font-weight:600; }
.cust-tabs a.active{ background:var(--brand,#2563eb); color:#fff; border-color:var(--brand,#2563eb); }

/* ── right-wrap 撑满顶栏：☰+模块文字靠左，右侧图标靠右 ── */
.top-bar .right-wrap{ flex:1; }

/* ── 首页统计卡片：紧凑横排（图标 | 文字 | 数字） ── */
.stats-grid{ grid-template-columns:repeat(2,1fr); gap:10px; padding:2px 0 12px; }
.stat-card{ display:flex; align-items:center; gap:10px; padding:12px 12px; border-radius:14px; box-shadow:var(--shadow-card); text-align:left; }
.stat-card .stat-icon{ order:1; flex:0 0 auto; font-size:28px; line-height:1; margin-bottom:0; }
.stat-card .stat-label{ order:2; flex:1 1 auto; font-size:13px; color:var(--text-light); font-weight:600; }
.stat-card .stat-value, .stat-card .stat-num{ order:3; font-size:26px; font-weight:800; line-height:1; margin-bottom:0; color:var(--primary); }
@media(min-width:720px){ .stats-grid{ grid-template-columns:repeat(4,1fr); } }

/* ── 客户分级筛选按钮 ── */
.lv-filter{ display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.lv-filter .lv-btn{ padding:6px 14px; border-radius:20px; background:#fff; border:1px solid var(--border,#e2e8f0); color:#475569; text-decoration:none; font-size:13px; font-weight:600; }
.lv-filter .lv-btn.active{ background:var(--brand,#2563eb); color:#fff; border-color:var(--brand,#2563eb); }

/* ── 客户模块：分类标签 + 等级下拉 同一行 ── */
.cust-toolbar{ display:flex; gap:8px; align-items:center; margin-bottom:12px; }
.cust-toolbar .cust-tabs{ flex:1; margin-bottom:0; }
.cust-toolbar .lv-filter{ flex:0 0 48%; max-width:48%; margin-bottom:0; }
.lv-select{ width:100%; padding:11px 12px; border:1px solid var(--border,#e2e8f0); border-radius:10px; font-size:14px; font-weight:600; color:#475569; background:#fff; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; }
@media(max-width:600px){ .cust-toolbar{ flex-wrap:nowrap; } .cust-toolbar .cust-tabs a{ font-size:13px; padding:9px 4px; } .cust-toolbar .lv-filter{ flex:0 0 44%; max-width:44%; } .lv-select{ padding:9px 10px; font-size:13px; } }

/* ── 修复：审批流节点标签/状态被 display:none 隐藏的问题 ── */
.approval-node .node-label,
.approval-node .node-status{ display:block !important; }

/* ═══ 审批流紧凑化（样品/立项通用）v32 ═══ */
.approval-flow{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px; }
.approval-node{ padding:8px 10px; gap:5px; border-radius:10px; }
.approval-node .node-label{ font-size:12px; }
.approval-node .node-status{ font-size:11px; }
.an-head{ gap:6px; }
.an-title{ font-size:13px; }
.an-badge{ padding:2px 8px; font-size:10px; }
.an-comment{ padding:5px 8px; font-size:11px; }
.an-actions{ gap:5px; }
.an-remind .btn{ min-height:32px; font-size:12px; }
.an-approve input{ padding:7px 9px; min-height:32px; font-size:12px; }
.an-approve .an-btns .btn{ min-height:34px; font-size:12px; }
.approval-flow .btn-sm{ min-height:28px; padding:2px 6px; font-size:11px; }
@media(max-width:640px){ .approval-flow{ grid-template-columns:repeat(2,1fr); gap:5px; } }
@media(max-width:340px){ .approval-flow{ grid-template-columns:1fr; } }

/* ═══ 研发产品详情：当前节点卡紧凑（配合模板重写）═══ */
.cur-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.cur-name{ font-size:14px; font-weight:700; color:#2563eb; }
.cur-owner{ font-size:11px; color:#64748b; background:#f1f5f9; border-radius:20px; padding:2px 9px; }
.cur-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:7px 0; border-bottom:1px dashed #e2e8f0; }
.cur-row:last-child{ border-bottom:none; }
.cur-fkey{ font-size:12px; font-weight:600; color:#475569; min-width:52px; }
.cur-ok{ font-size:12px; font-weight:600; color:#16a34a; }
.cur-cmt{ font-size:11px; color:#94a3b8; }
.cur-wait{ font-size:12px; color:#b45309; background:#fffbeb; border:1px solid #fde68a; border-radius:7px; padding:4px 9px; }
.cur-remind{ margin-left:auto; }
.cmt-f{ display:flex; align-items:center; gap:6px; flex-basis:100%; margin-top:4px; }
.cmt-f input[type=text]{ flex:1; min-width:120px; padding:7px 10px; border:1px solid var(--border); border-radius:8px; font-size:12px; }
.cmt-f .btn{ white-space:nowrap; }
.cur-done{ font-size:13px; color:#166534; background:#f0fdf4; border:1px solid #bbf7d0; border-radius:8px; padding:8px 12px; }
@media(max-width:560px){ .cur-remind{ margin-left:6px; } .cur-row{ gap:6px; } .cur-fkey{ min-width:44px; } }

/* ═══ 详情页卡片统一紧凑化 v33（各模块详情布局更紧凑合理）═══ */
.card{ margin-bottom:10px; }
.card-header{ padding:12px 14px 9px; font-size:14px; }
.card-body{ padding:13px 14px; }
.detail-grid{ gap:4px 16px; }
.detail-field{ padding:7px 0; }
.form-section{ margin:15px 0 9px; padding-bottom:6px; }

.cur-edit{margin-left:8px;flex:1;min-width:200px;}
.cur-editwrap{display:flex;flex-direction:column;gap:6px;}
.cur-ta{width:100%;box-sizing:border-box;font-size:12px;line-height:1.5;border:1px solid #cbd5e1;border-radius:7px;padding:6px 8px;resize:vertical;}
.cur-ta:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,.15);}
.cur-editbtns{display:flex;gap:8px;align-items:center;}
.cur-editbtns small{color:#94a3b8;}
@media(max-width:560px){.cur-edit{min-width:100%;margin-left:0;}}


/* ═══ 审批流卡片：等宽+居中+等高，消除末行孤卡/错位(2026-08-10 v34) ═══ */
.approval-flow{ display:flex !important; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:6px; }
.approval-flow .approval-node{ flex:1 1 calc(33.333% - 8px); max-width:calc(33.333% - 8px); min-width:0; display:flex; flex-direction:column; }
.approval-flow .approval-node .an-actions{ margin-top:auto; }
@media(max-width:640px){
  .approval-flow .approval-node{ flex:1 1 calc(50% - 7px); max-width:calc(50% - 7px); }
}
@media(max-width:340px){
  .approval-flow .approval-node{ flex:1 1 100%; max-width:100%; }
}

/* ═══ 立项编辑：保存按钮不压审批标题 + 审批卡更紧凑(2026-08-10 v35) ═══ */
/* 按钮栏改流式,不再 sticky 吸底/负边距盖住下方审批标题 */
.form-actions.fa-inline{
  position:static !important;
  margin:16px 0 0 !important;
  padding:0 !important;
  background:transparent !important;
  backdrop-filter:none !important;
  border:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
/* 审批区标题与上方按钮栏留出间距 */
.form-section.proposal-approval-sec{ margin-top:18px !important; }

/* 审批5卡:等宽居中等高(防末行残行) + 紧凑化 */
.approval-flow-5{ gap:6px !important; justify-content:center; }
.approval-flow-5 .approval-node{ padding:7px 9px; border-radius:9px; }
.approval-flow-5 .an-head{ gap:5px; flex-wrap:wrap; row-gap:2px; }
.approval-flow-5 .an-title{ font-size:12px; }
.approval-flow-5 .an-badge{ padding:1px 6px; font-size:10px; white-space:nowrap; }
.approval-flow-5 .an-comment{ margin-top:5px; padding:3px 6px; font-size:10px; }
.approval-flow-5 .an-actions{ margin-top:7px; }
@media(min-width:640px){
  .approval-flow-5 .approval-node{ flex:1 1 calc(20% - 10px); max-width:calc(20% - 10px); }
}
@media(min-width:360px) and (max-width:639px){
  .approval-flow-5 .approval-node{ flex:1 1 calc(50% - 7px); max-width:calc(50% - 7px); }
}
@media(max-width:359px){
  .approval-flow-5 .approval-node{ flex:1 1 100%; max-width:100%; }
}

/* ═══ 立项审批流：紧凑纵向5行(2026-08-10 v36) ═══ */
.approval-list{ display:flex; flex-direction:column; gap:6px; }
.af5-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:7px 10px; padding:7px 11px; border:1px solid #e2e8f0; border-radius:10px; background:#fff; }
.af5-row.passed{ background:#f0fdf4; border-color:#bbf7d0; }
.af5-row.rejected{ background:#fef2f2; border-color:#fecaca; }
.af5-row.pending{ background:#fffbeb; border-color:#fde68a; }
.af5-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; flex:1; min-width:200px; }
.af5-name{ font-size:13px; font-weight:700; color:#334155; }
.af5-cmt{ font-size:11px; color:#64748b; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.af5-badge{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; white-space:nowrap; }
.af5-badge.a{ background:#dcfce7; color:#15803d; }
.af5-badge.p{ background:#fef3c7; color:#b45309; }
.af5-badge.r{ background:#fee2e2; color:#b91c1c; }
.af5-act{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.af5-approve{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.af5-input{ padding:6px 9px; border:1px solid #cbd5e1; border-radius:8px; font-size:12px; width:170px; min-height:32px; background:#fff; }
.af5-input:focus{ outline:none; border-color:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,.12); }
.af5-btns{ display:flex; gap:6px; }
.af5-btn{ border:none; border-radius:8px; font-size:12px; font-weight:600; padding:6px 12px; min-height:32px; cursor:pointer; }
.af5-btn.ok{ background:#16a34a; color:#fff; }
.af5-btn.no{ background:#dc2626; color:#fff; }
.af5-btn.rmt{ background:#fff; color:#b45309; border:1px solid #f59e0b; }
.af5-remind{ display:inline-flex; }
@media(max-width:420px){
  .af5-head{ min-width:100%; }
  .af5-act{ width:100%; }
  .af5-approve{ width:100%; }
  .af5-input{ flex:1; width:auto; }
}

/* ═══ 立项详情页顶部 提报人/需求方 (2026-08-10 v37) ═══ */
.proposal-submitter{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px; background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af; border-radius:10px; padding:8px 13px; font-size:13px; margin-bottom:12px; }
.proposal-submitter b{ font-weight:700; color:#1e3a8a; }
.ps-item{ display:inline-flex; align-items:center; gap:4px; }
.ps-div{ width:1px; height:14px; background:#93c5fd; }
@media(max-width:480px){ .ps-div{ display:none; } }