/* ===== 设计令牌 · 中保真规范版 ===== */
:root{
  --c-primary:#0891b2; --c-primary-dark:#0e7490; --c-primary-50:#e0f2fe; --c-primary-100:#bae6fd; --c-primary-200:#7dd3fc;
  --c-success:#1D9E75; --c-success-50:#E1F5EE;
  --c-warn:#BA7517; --c-warn-50:#FAEEDA;
  --c-danger:#E24B4A; --c-danger-50:#FCEBEB;
  --c-bg:#F4F6FA; --c-surface:#FFFFFF; --c-surface-2:#F8FAFC;
  --c-border:#E4E8F0; --c-border-strong:#CBD3E1;
  --c-text:#1C2333; --c-text-2:#5A6478; --c-text-3:#8B94A7;
  --c-shadow:0 1px 2px rgba(16,24,40,.05), 0 4px 14px rgba(16,24,40,.06);
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-full:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --f-sm:12px; --f-base:13px; --f-md:14px; --f-lg:16px; --f-xl:20px; --f-2xl:24px;
  --sidebar:216px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,sans-serif;
  font-size:var(--f-base); line-height:1.6; color:var(--c-text); background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ===== 通用组件 ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:38px;padding:0 16px;border:1px solid var(--c-primary);border-radius:var(--r-sm);
  background:var(--c-primary);color:#fff;font-size:var(--f-md);font-weight:500;
  cursor:pointer;transition:background .15s,border-color .15s;white-space:nowrap;
}
.btn:hover{background:var(--c-primary-dark);border-color:var(--c-primary-dark)}
.btn.ghost{background:var(--c-surface);color:var(--c-primary);border-color:var(--c-border-strong)}
.btn.ghost:hover{background:var(--c-primary-50);border-color:var(--c-primary)}
.btn.subtle{background:var(--c-surface-2);color:var(--c-text-2);border-color:var(--c-border)}
.btn.subtle:hover{background:#EEF1F7}
.btn.danger{background:var(--c-danger);border-color:var(--c-danger)}
.btn.sm{height:30px;padding:0 10px;font-size:var(--f-sm);border-radius:6px}
.btn.block{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}

.card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-md);box-shadow:var(--c-shadow)}
.pad{padding:var(--sp-4)}
.row{display:flex;align-items:center;gap:var(--sp-3)}
.between{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.wrap{flex-wrap:wrap}
.col{display:flex;flex-direction:column}
.grow{flex:1;min-width:0}

.muted{color:var(--c-text-2)}
.small{font-size:var(--f-sm)}
.tiny{font-size:11px;color:var(--c-text-3)}
.mono-num{font-variant-numeric:tabular-nums}
.price{color:var(--c-danger);font-weight:600;font-variant-numeric:tabular-nums}

.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--r-full);font-size:11px;font-weight:500}
.tag.green{background:var(--c-success-50);color:var(--c-success)}
.tag.amber{background:var(--c-warn-50);color:var(--c-warn)}
.tag.red{background:var(--c-danger-50);color:var(--c-danger)}
.tag.blue{background:var(--c-primary-50);color:var(--c-primary)}
.tag.gray{background:#EEF1F7;color:var(--c-text-2)}

input[type=text],input[type=tel],input[type=number],input[type=password],select,textarea{
  width:100%;height:38px;padding:0 10px;border:1px solid var(--c-border-strong);border-radius:var(--r-sm);
  font-size:var(--f-base);color:var(--c-text);background:var(--c-surface);outline:none;font-family:inherit;
}
textarea{height:auto;padding:8px 10px;resize:vertical;line-height:1.6}
input:focus,select:focus,textarea:focus{border-color:var(--c-primary);box-shadow:0 0 0 3px var(--c-primary-50)}
label.field{display:block;margin-bottom:var(--sp-3)}
label.field>span{display:block;margin-bottom:6px;font-size:var(--f-sm);color:var(--c-text-2);font-weight:500}
label.field>span em{font-style:normal;color:var(--c-danger)}

.divider{height:1px;background:var(--c-border);margin:var(--sp-4) 0}
.empty{padding:var(--sp-8) var(--sp-4);text-align:center;color:var(--c-text-3);font-size:var(--f-sm)}
.spin-hint{color:var(--c-text-3);font-size:var(--f-sm);padding:var(--sp-6);text-align:center}

/* toast */
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:80px;z-index:9999;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:rgba(28,35,51,.92);color:#fff;padding:8px 14px;border-radius:var(--r-sm);font-size:var(--f-sm);animation:tin .2s}
@keyframes tin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* modal */
.mask{position:fixed;inset:0;background:rgba(16,24,40,.5);z-index:500;display:flex;align-items:center;justify-content:center;padding:var(--sp-4)}
.modal{background:var(--c-surface);border-radius:var(--r-lg);width:100%;max-width:420px;max-height:88%;overflow:auto;box-shadow:0 12px 40px rgba(16,24,40,.2)}
.modal-h{padding:var(--sp-4) var(--sp-4) 0;font-size:var(--f-lg);font-weight:600}
.modal-b{padding:var(--sp-4)}
.modal-f{padding:0 var(--sp-4) var(--sp-4);display:flex;gap:var(--sp-3)}
.modal-f .btn{flex:1}

/* 列表编辑器（材料/流程/服务等等） */
.li-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--c-border);border-radius:var(--r-sm);margin-bottom:8px;background:var(--c-surface-2)}
.li-item input{flex:1;height:32px;background:#fff}
.li-item .op{display:flex;gap:4px;flex:none}
.icon-btn{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--c-border-strong);background:#fff;border-radius:6px;cursor:pointer;font-size:12px;color:var(--c-text-2)}
.icon-btn:hover{background:var(--c-primary-50);border-color:var(--c-primary);color:var(--c-primary)}
.icon-btn.danger:hover{background:var(--c-danger-50);border-color:var(--c-danger);color:var(--c-danger)}

/* chip */
.chip{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--r-full);border:1px solid var(--c-border-strong);background:#fff;font-size:var(--f-sm);cursor:pointer;user-select:none;color:var(--c-text);text-decoration:none}
.chip.on{background:var(--c-primary-50);border-color:var(--c-primary);color:var(--c-primary);font-weight:500}
/* 筛选导航选中态（链接形式，区别于 .chip.on 的 JS 勾选态） */
.chip-on{background:var(--c-primary);border-color:var(--c-primary);color:#fff !important;font-weight:600}
.tag-on{background:var(--c-primary);color:#fff !important;font-weight:600}
.tag{text-decoration:none}
/* H5 横向滚动标签栏 */
.h5-tag-scroll{display:flex;gap:8px;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.h5-tag-scroll .chip{flex:none}

/* 折叠 */
details.fold{border:1px solid var(--c-border);border-radius:var(--r-sm);margin-bottom:8px;background:var(--c-surface-2);overflow:hidden}
details.fold>summary{padding:10px 12px;cursor:pointer;font-size:var(--f-md);font-weight:500;list-style:none;display:flex;align-items:center;justify-content:space-between}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::after{content:'▾';color:var(--c-text-3);transition:transform .15s}
details.fold[open]>summary::after{transform:rotate(180deg)}
details.fold .fold-b{padding:0 12px 12px}

/* ===== 统一分页条（h5 / app 共用，主题色随 --c-primary 自动适配） ===== */
.hz-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin:16px 0 4px;font-size:13px}
.hz-pager .pg-btn{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:34px;padding:0 12px;border:1px solid var(--c-border);border-radius:9px;color:var(--c-text-2);background:#fff;text-decoration:none;transition:.15s}
.hz-pager a.pg-btn:hover{border-color:var(--c-primary);color:var(--c-primary)}
.hz-pager .pg-btn.on{background:var(--c-primary);border-color:var(--c-primary);color:#fff;font-weight:600}
.hz-pager .pg-btn.disabled{color:var(--c-text-3);background:#F5F6F8;border-color:var(--c-border);cursor:default}
.hz-pager .pg-cur{color:var(--c-text-2);padding:0 6px;min-width:52px;text-align:center}

/* ===== 首页区块「加载更多」 ===== */
.hz-loadmore{display:block;width:100%;margin:16px 0 2px;padding:12px 0;border:1px solid var(--c-primary);border-radius:11px;background:#fff;color:var(--c-primary);font-size:14px;font-weight:500;text-align:center;cursor:pointer;transition:.15s}
.hz-loadmore:hover{background:var(--c-primary);color:#fff}
.hz-loadmore:disabled{opacity:.6;cursor:default}
