/* ============================================================
   电梯配件 · 先进版原型（差异化能力演示）
   复用 /电梯配件小程序原型/css/app.css 的设计令牌，只补这一版的组件
   ============================================================ */

/* 梯队卡片 */
.fleet{display:flex;flex-direction:column;gap:10px;padding:0 14px}
.unit{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid rgba(233,237,245,.9);padding:12px;display:flex;gap:12px;align-items:center}
.unit:active{background:#FBFCFE}
.unit .meta{flex:1;min-width:0}
.unit .meta b{font-size:14px;display:block;line-height:1.35}
.unit .meta .sub{font-size:11px;color:var(--ink-3);margin-top:3px;display:flex;gap:6px;flex-wrap:wrap}
.unit .meta .next{margin-top:6px;font-size:11px;color:var(--ink-2)}
.unit .meta .next em{font-style:normal;color:#D9631B;font-weight:600}

/* 健康度环 */
.ring{width:52px;height:52px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;position:relative}
.ring::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--ring-c) calc(var(--ring-v) * 1%), #EDF1F8 0)}
.ring i{position:absolute;inset:5px;background:#fff;border-radius:50%}
.ring span{position:relative;font-size:13px;font-weight:800;color:var(--ring-c)}

/* 状态条 */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:0 14px}
.stat{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:10px 6px;text-align:center}
.stat b{display:block;font-size:16px;font-weight:800}
.stat span{font-size:10px;color:var(--ink-3)}
.stat.warn b{color:#D9631B}
.stat.bad b{color:#D9363E}

/* 设备档案卡 */
.device{margin:12px 14px 0;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:14px}
.device .top{display:flex;gap:12px;align-items:center}
.device h2{margin:0;font-size:16px;font-weight:800;line-height:1.3}
.device .sn{font-size:10px;color:var(--ink-3);margin-top:4px;letter-spacing:.3px}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin-top:12px;font-size:12px}
.kv div{display:flex;justify-content:space-between;gap:8px;color:var(--ink-2);min-width:0}
.kv b{color:var(--ink);font-weight:600;white-space:nowrap}
.kv .wide{grid-column:1 / -1}
.kv .wide span{flex:none;width:52px}
.kv .wide b{flex:1;min-width:0;text-align:right;overflow:hidden;text-overflow:ellipsis;font-weight:500;font-size:11.5px}
.health-bars{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.hb{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ink-2)}
.hb .bar2{flex:1;height:6px;border-radius:4px;background:#EDF1F8;overflow:hidden}
.hb .bar2 i{display:block;height:100%;border-radius:4px}
.hb em{font-style:normal;width:30px;text-align:right;font-weight:700}

/* 时间线 */
.tl{position:relative;padding-left:16px;margin:4px 0 0}
.tl::before{content:"";position:absolute;left:4px;top:4px;bottom:4px;width:2px;background:#E4EAF4;border-radius:2px}
.tl .li{position:relative;padding:0 0 12px}
.tl .li:last-child{padding-bottom:0}
.tl .li::before{content:"";position:absolute;left:-16px;top:4px;width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px #EEF2FA}
.tl .li .d{font-size:10px;color:var(--ink-3)}
.tl .li .t{font-size:12px;line-height:1.5;margin-top:2px}

/* 推荐件 */
.rec{margin:0 14px;display:flex;flex-direction:column;gap:9px}
.rec-item{background:#fff;border-radius:12px;box-shadow:var(--shadow);border:1px solid var(--line);padding:11px;display:flex;gap:10px;align-items:flex-start}
.rec-item .tagbox{width:44px;flex:none;text-align:center}
.rec-item .tagbox b{display:block;font-size:10px;font-weight:700;padding:3px 0;border-radius:6px}
.due-bad b{background:#FDECEC;color:#D9363E}
.due-warn b{background:#FDF3E3;color:#B4740F}
.due-ok b{background:#E7F7F1;color:#0A6A4A}
.rec-item .body{flex:1;min-width:0}
.rec-item .body b{font-size:13px;display:block}
.rec-item .body .why{font-size:11px;color:var(--ink-3);margin-top:3px;line-height:1.5}
.rec-item .body .why em{font-style:normal;color:#D9631B}
.rec-item .act{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.rec-item .act b{font-size:14px;color:#E2611A}
.chk{width:20px;height:20px;border-radius:6px;border:1.5px solid #C9D3E3;display:flex;align-items:center;justify-content:center;background:#fff}
.chk.on{background:var(--brand);border-color:var(--brand)}
.chk svg{width:13px;height:13px;color:#fff}

/* 协同确认 */
.collab{display:flex;flex-direction:column;gap:0;padding:4px 0}
.step{display:flex;gap:10px;position:relative;padding-bottom:16px}
.step:last-child{padding-bottom:0}
.step .dot{width:18px;height:18px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;background:#EDF1F8;color:#98A1B2;z-index:1}
.step.is-done .dot{background:var(--ok);color:#fff}
.step.is-cur .dot{background:var(--accent);color:#fff}
.step::after{content:"";position:absolute;left:8.5px;top:18px;bottom:0;width:1.5px;background:#E4EAF4}
.step:last-child::after{display:none}
.step .c{flex:1;min-width:0;padding-top:1px}
.step .c b{font-size:12px;display:block}
.step .c span{font-size:10px;color:var(--ink-3);display:block;margin-top:2px}
.locked{background:linear-gradient(135deg,#FFF6EF,#FFFFFF);border:1px solid #FFE0C9;border-radius:12px;padding:11px 12px;font-size:11px;color:#B8520F;line-height:1.6;display:flex;gap:8px}
.locked b{color:#D9631B}

/* 底部动作条（两版通用，这里补一版） */
.posbar{position:absolute;left:0;right:0;bottom:0;z-index:20;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:9px 14px;display:flex;align-items:center;gap:10px}
/* 有 tabbar 的页面，动作条要抬到 tabbar 之上，否则点不到 */
.app:not(.no-tabs) .posbar{bottom:var(--tab-h)}
.posbar .sum{flex:1;min-width:0}
.posbar .sum b{font-size:17px;color:#E2611A;font-weight:800}
.posbar .sum span{display:block;font-size:10px;color:var(--ink-3)}

/* 扫码占位 */
.scanbox{margin:-16px 14px 0;position:relative;z-index:2;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:13px 14px;display:flex;align-items:center;gap:12px}
.scanbox .ic{width:42px;height:42px;border-radius:13px;background:var(--brand-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:none}
.scanbox b{font-size:13px;display:block}
.scanbox p{margin:2px 0 0;font-size:11px;color:var(--ink-3);line-height:1.5}