*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"PingFang SC","Microsoft YaHei","WenQuanYi Micro Hei",-apple-system,sans-serif;background:#D9DCE1;background:linear-gradient(135deg,#E7EAEE,#CFD4DA);min-height:100vh;display:flex;justify-content:center;padding:24px 0;color:#1D2129;font-size:14px}
.phone{width:390px;height:844px;background:#F5F6F7;border-radius:44px;box-shadow:0 24px 60px rgba(0,0,0,.28),0 0 0 10px #1C1F24,0 0 0 12px #33383F;overflow:hidden;display:flex;flex-direction:column;position:relative}
.notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:150px;height:26px;background:#1C1F24;border-radius:0 0 16px 16px;z-index:30}
.status{height:44px;flex:0 0 44px;background:var(--nav,#0052D9);color:#fff;display:flex;align-items:flex-end;padding:0 20px 6px;font-size:13px;font-weight:600;justify-content:space-between}
.status .rt{display:flex;gap:5px;align-items:center;font-size:11px;font-weight:400}
.navbar{height:44px;flex:0 0 44px;background:var(--nav,#0052D9);color:#fff;display:flex;align-items:center;padding:0 12px;font-size:17px;font-weight:600;position:relative}
.navbar .back{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer}
.navbar .more{margin-left:auto;font-size:20px;width:28px;text-align:center;cursor:pointer}
.navbar .tt{position:absolute;left:50%;transform:translateX(-50%);font-size:17px;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scroll{flex:1;overflow-y:auto;padding-bottom:74px;-webkit-overflow-scrolling:touch}
.scroll::-webkit-scrollbar{width:0}
.tabbar{position:absolute;bottom:0;left:0;right:0;height:62px;background:#fff;border-top:1px solid #E5E6EB;display:flex;padding-bottom:6px;z-index:20}
.tabbar .tb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#86909C;font-size:11px;cursor:pointer}
.tabbar .tb .ic{font-size:20px;line-height:1}
.tabbar .tb.on{color:#0052D9;font-weight:600}

/* 组件 */
.m-card{background:#fff;border-radius:10px;margin:10px 12px;padding:14px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.m-card.tight{padding:0}
.m-head{display:flex;align-items:center;font-size:15px;font-weight:600;margin-bottom:10px}
.m-head .sub{font-size:12px;color:#86909C;font-weight:400;margin-left:auto}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 0}
.gitem{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:#4E5969;cursor:pointer}
.gitem .ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:21px;color:#fff}
.m-list{background:#fff;border-radius:10px;margin:0 12px 10px;overflow:hidden}
.m-li{display:flex;align-items:center;gap:10px;padding:13px 14px;border-bottom:1px solid #F2F3F5;font-size:14px;cursor:pointer}
.m-li:last-child{border-bottom:none}
.m-li .arrow{margin-left:auto;color:#C9CDD4}
.m-li .sub{font-size:12px;color:#86909C;margin-top:3px}
.m-li .r{margin-left:auto;text-align:right;font-size:12px;color:#86909C}
.m-tag{display:inline-block;padding:1px 6px;border-radius:3px;font-size:11px;background:#F2F3F5;color:#4E5969}
.m-tag.ok{background:#E8FFEA;color:#009A29}.m-tag.warn{background:#FFF7E8;color:#D97706}.m-tag.err{background:#FFECE8;color:#CB2634}
.m-tag.info{background:#E8F3FF;color:#0E42D2}.m-tag.brand{background:#EEF3FF;color:#0052D9}
.m-btn{height:44px;border-radius:8px;background:#0052D9;color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:500;margin:16px 12px;cursor:pointer}
.m-btn.ghost{background:#fff;color:#0052D9;border:1px solid #ADC6FF}
.m-btn.gray{background:#F2F3F5;color:#4E5969}
.m-form{margin:0 12px;background:#fff;border-radius:10px;padding:0 14px}
.m-fi{display:flex;align-items:center;padding:14px 0;border-bottom:1px solid #F2F3F5;font-size:14px;gap:10px}
.m-fi:last-child{border-bottom:none}
.m-fi label{width:82px;color:#4E5969;flex:0 0 82px}
.m-fi .val{flex:1;color:#1D2129;text-align:right}
.m-fi .val.ph{color:#C9CDD4}
.m-fi textarea{border:none;outline:none;width:100%;font-family:inherit;font-size:14px;resize:none;height:60px}
.m-bar{height:5px;background:#F0F1F3;border-radius:3px;overflow:hidden}
.m-bar i{display:block;height:100%;background:#0052D9}
.m-sec{font-size:13px;color:#86909C;padding:14px 14px 6px}
.m-kpi{display:flex;text-align:center}
.m-kpi .c{flex:1}
.m-kpi .c .v{font-size:18px;font-weight:700}
.m-kpi .c .l{font-size:11px;color:#86909C;margin-top:2px}
.m-tip{font-size:11.5px;color:#86909C;text-align:center;padding:10px 0 4px}
.m-scan{width:180px;height:180px;margin:20px auto;border:2px dashed #ADC6FF;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:#0052D9;background:#F7FAFF}
.m-scan .l{width:150px;height:2px;background:linear-gradient(90deg,transparent,#0052D9,transparent);animation:scan 1.6s infinite}
@keyframes scan{0%{transform:translateY(-40px)}100%{transform:translateY(40px)}}
.m-step{display:flex;gap:0;padding:4px 0 0}
.m-step .s{flex:1;text-align:center;font-size:11px;color:#86909C}
.m-step .s .c{width:18px;height:18px;border-radius:50%;background:#F2F3F5;color:#86909C;margin:0 auto 4px;font-size:11px;display:flex;align-items:center;justify-content:center}
.m-step .s.on .c{background:#0052D9;color:#fff}.m-step .s.on{color:#0052D9;font-weight:600}
.m-step .s.done .c{background:#00B42A;color:#fff}.m-step .s.done{color:#009A29}
.m-nav{display:flex;gap:8px;padding:10px 12px}
.m-nav .n{flex:1;background:#fff;border-radius:8px;padding:10px;text-align:center;font-size:13px;cursor:pointer;border:1px solid transparent}
.m-nav .n.on{border-color:#ADC6FF;background:#F0F5FF;color:#0052D9;font-weight:600}