:root{
  --bg:#F7F5F2; --card:#FFFFFF; --line:#E6E1DA;
  --tx:#1A1A1A; --tx2:#5F5E5A; --tx3:#9A968E;
  --pink:#D4537E; --pink-d:#993556; --pink-l:#FBEAF0;
  --green:#3B6D11; --green-l:#EAF3DE;
  --blue:#185FA5; --blue-l:#E6F1FB;
  --amber:#854F0B; --amber-l:#FAEEDA;
  --red:#A32D2D; --red-l:#FCEBEB;
  --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--tx); line-height:1.6;
  padding-bottom:40px;
}

/* ---------- 顶栏 ---------- */
.top{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 22px; background:var(--card); border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--pink),#E07BA4)}
.brand h1{font-size:16px;font-weight:600}
.brand p{font-size:12px;color:var(--tx3);margin-top:1px}
.me{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--tx2)}
.me .dot{color:var(--tx3)}
.mini{
  border:1px solid var(--line); background:#fff; color:var(--tx2);
  border-radius:8px; padding:5px 11px; font-size:12px; cursor:pointer;
}
.mini:hover{border-color:var(--pink);color:var(--pink)}

/* ---------- 布局 ---------- */
main{max-width:940px;margin:0 auto;padding:22px 18px}
.screen{display:none}
.screen.on{display:block}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:22px; margin-bottom:16px;
}
.kicker{font-size:11.5px;letter-spacing:.8px;color:var(--pink);margin-bottom:5px}
h2{font-size:18px;font-weight:600;margin-bottom:8px}
.hint{font-size:13px;color:var(--tx2);line-height:1.75}
.tip-line{font-size:11.5px;color:var(--tx3);margin-top:12px;text-align:center}

/* ---------- 门禁 ---------- */
.gate-wrap{max-width:460px;margin:0 auto}
.idcard{
  background:var(--blue-l); border:1px solid #B5D4F4; border-radius:10px;
  padding:13px 15px; margin:16px 0; font-size:13px;
}
.idcard>div{display:flex;justify-content:space-between;padding:3px 0}
.idcard .k{color:var(--blue)}
.idcard .v{font-weight:500}

.code-row{display:flex;gap:10px;margin:16px 0;flex-wrap:wrap}
.code-input{
  flex:1; min-width:150px; padding:13px 15px; font-size:17px; letter-spacing:3px;
  border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--tx);
  font-family:inherit;
}
.code-input:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-l)}
.btn-send{
  padding:13px 18px; font-size:13.5px; font-weight:500; white-space:nowrap;
  border:1px solid var(--line); background:#fff; color:var(--tx);
  border-radius:10px; cursor:pointer;
}
.btn-send:hover{border-color:var(--pink);color:var(--pink)}
.btn-send:disabled{opacity:.5;cursor:not-allowed}

.btn{
  display:block;width:100%;padding:14px;border:none;border-radius:11px;
  font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;
}
.btn.primary{background:linear-gradient(135deg,var(--pink),#E07BA4);color:#fff}
.btn.primary:disabled{opacity:.55;cursor:not-allowed}
.btn.go{background:var(--pink);color:#fff;width:auto;padding:12px 22px;font-size:14px}

.msg{font-size:13px;min-height:20px;margin:-4px 0 10px}
.msg.err{color:var(--red)}
.msg.ok{color:var(--green)}
.msg.warn{color:var(--amber)}

/* ---------- 步骤条 ---------- */
.row-between{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.order-no{text-align:right}
.on-label{font-size:11px;color:var(--tx3)}
.on-no{font-size:20px;font-weight:700;color:var(--green);letter-spacing:1px;font-family:ui-monospace,Menlo,monospace}
.steps{display:flex;gap:0;margin-top:16px;flex-wrap:wrap}
.step{flex:1;min-width:88px;text-align:center;position:relative;padding-top:20px}
.step::before{
  content:'';position:absolute;top:6px;left:0;right:0;height:2px;background:var(--line);
}
.step:first-child::before{left:50%}
.step:last-child::before{right:50%}
.step.done::before{background:var(--green)}
.step i{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:14px;height:14px;border-radius:50%;background:var(--line);z-index:1;
}
.step.done i{background:var(--green)}
.step span{font-size:11.5px;color:var(--tx3);display:block}
.step.done span{color:var(--tx2)}

.warnbox{
  background:var(--amber-l);border:1px solid #FAC775;border-radius:10px;
  padding:11px 14px;font-size:12.5px;color:var(--amber);margin-top:14px;
}

/* ---------- 双卡 ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:720px){.two{grid-template-columns:1fr}}
.asset{display:flex;flex-direction:column}
.asset-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.asset-tag{font-size:11.5px;padding:4px 10px;border-radius:7px;font-weight:500}
.asset-tag.photo{background:var(--green-l);color:var(--green)}
.asset-tag.voice{background:var(--pink-l);color:var(--pink-d)}
.asset-state{font-size:12px;color:var(--tx3)}
.asset-state.doing{color:var(--amber)}
.asset-state.done{color:var(--green);font-weight:500}
.feat{list-style:none;margin:14px 0;flex:1}
.feat li{font-size:12.5px;color:var(--tx2);padding:5px 0 5px 18px;position:relative}
.feat li::before{
  content:'';position:absolute;left:2px;top:12px;width:5px;height:5px;
  border-radius:50%;background:var(--pink);
}
.asset-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.no-line{font-size:12.5px;color:var(--green);font-weight:500}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);
  background:#1A1A1A;color:#fff;padding:11px 20px;border-radius:10px;font-size:13.5px;
  opacity:0;pointer-events:none;transition:.24s;max-width:88vw;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ================= 总门户增强 ================= */

/* ---------- 全流程节点条 ---------- */
.flow-card{margin-bottom:16px}
.pct-big{display:flex;align-items:baseline;gap:2px}
.pct-big b{font-size:34px;font-weight:700;color:var(--pink);letter-spacing:-1px;line-height:1}
.pct-big span{font-size:13px;color:var(--tx3)}
.flow{display:flex;gap:0;margin-top:16px;flex-wrap:wrap}
.fn{
  flex:1;min-width:132px;display:flex;align-items:flex-start;gap:9px;
  padding:11px 10px;position:relative;border-radius:10px;
  background:var(--bg);border:1px solid var(--line);
}
.fn+.fn{margin-left:8px}
.fn-dot{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;background:var(--line);color:#fff;
}
.fn-body{flex:1;min-width:0}
.fn-body b{display:block;font-size:13px;font-weight:600;line-height:1.35}
.fn-body span{
  display:block;font-size:10.5px;color:var(--tx3);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.fn-state{font-size:10.5px;color:var(--tx3);flex-shrink:0}
.fn.done{background:var(--green-l);border-color:#C0DD97}
.fn.done .fn-dot{background:var(--green)}
.fn.done .fn-state{color:var(--green)}
.fn.doing{background:var(--amber-l);border-color:#FAC775}
.fn.doing .fn-dot{background:var(--amber);animation:pulse 1.6s infinite}
.fn.doing .fn-state{color:var(--amber)}
.fn.locked{opacity:.62}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.42}}
.rule-note{
  margin-top:12px;font-size:12.5px;color:var(--tx2);line-height:1.75;
  background:var(--blue-l);border:1px solid #B5D4F4;border-radius:10px;padding:10px 13px;
}
.rule-note b{color:var(--blue)}

/* ---------- 四个大数字 ---------- */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-top:16px}
@media(max-width:760px){.nums{grid-template-columns:repeat(2,1fr)}}
.num{
  background:var(--bg);border:1px solid var(--line);border-radius:12px;
  padding:15px 10px;text-align:center;
}
.num b{display:block;font-size:26px;font-weight:700;color:var(--pink);letter-spacing:-.6px;line-height:1.15}
.num b.sm{font-size:13px;font-family:ui-monospace,Menlo,monospace;letter-spacing:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx3)}
.num span{display:block;font-size:11px;color:var(--tx3);margin-top:4px}
.num.lit{background:var(--green-l);border-color:#C0DD97}
.num.lit b{color:var(--green)}
.num.lit span{color:var(--green)}

/* ---------- 卡片内小数字 ---------- */
.mini-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 10px}
.mini-nums>div{background:var(--bg);border:1px solid var(--line);border-radius:10px;
  padding:9px 6px;text-align:center}
.mini-nums b{display:block;font-size:16px;font-weight:700;color:var(--tx);line-height:1.2}
.mini-nums span{display:block;font-size:10px;color:var(--tx3);margin-top:2px}

.bar{height:6px;background:rgba(0,0,0,.07);border-radius:3px;overflow:hidden}
.bar>div{height:100%;width:0;background:linear-gradient(90deg,var(--pink),#E07BA4);transition:.35s}
#vFill{background:linear-gradient(90deg,var(--pink),#E07BA4)}
#pFill{background:linear-gradient(90deg,#3B6D11,#639922)}

/* ---------- 门槛清单 ---------- */
.gates{margin-top:12px;flex:1}
.g{display:flex;align-items:flex-start;gap:8px;padding:6px 0}
.gdot{
  width:16px;height:16px;border-radius:50%;flex-shrink:0;margin-top:2px;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;color:#fff;background:var(--line);
}
.gdot.ok{background:var(--green)}
.gdot.no{background:var(--line);color:var(--tx3)}
.gt{font-size:12px;color:var(--tx2);line-height:1.5}
.gt i{display:block;font-style:normal;font-size:10.5px;color:var(--tx3);margin-top:1px}
.g-empty{font-size:11.5px;color:var(--tx3);padding:10px 0;line-height:1.7}

/* ---------- 按钮组 ---------- */
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn.sm{padding:9px 15px;font-size:12.5px;width:auto;display:inline-block}
.btn.ghost{background:#fff;border:1px solid var(--line);color:var(--tx2)}
.btn.ghost:hover{border-color:var(--pink);color:var(--pink)}
.btn.go{background:var(--pink);color:#fff;padding:12px 20px;font-size:14px;width:auto;
  display:inline-block;border:none;font-weight:600;cursor:pointer;font-family:inherit}
.btn.go:disabled{opacity:.55;cursor:not-allowed}

.off-note{
  margin-top:10px;font-size:11.5px;color:var(--amber);
  background:var(--amber-l);border:1px solid #FAC775;border-radius:9px;padding:8px 11px;line-height:1.6;
}

/* ---------- 平台健康 ---------- */
.health{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
@media(max-width:720px){.health{grid-template-columns:1fr}}
.hs{display:flex;align-items:center;gap:9px;padding:11px 12px;
  border:1px solid var(--line);border-radius:11px;background:var(--bg)}
.hs-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--line)}
.hs.ok .hs-dot{background:var(--green)}
.hs.no .hs-dot{background:var(--red)}
.hs.no{background:var(--red-l);border-color:#F5B5B5}
.hs-body{flex:1;min-width:0}
.hs-body b{display:block;font-size:12.5px;font-weight:600}
.hs-body span{display:block;font-size:10.5px;color:var(--tx3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-ms{font-size:11px;color:var(--tx3);flex-shrink:0;font-family:ui-monospace,Menlo,monospace}

/* ---------- 页脚 ---------- */
.foot-note{
  font-size:11.5px;color:var(--tx3);line-height:1.9;text-align:center;
  padding:18px 14px 6px;border-top:1px solid var(--line);margin-top:6px;
}
.foot-note b{color:var(--tx2);font-family:ui-monospace,Menlo,monospace}