:root{
  --blue:#4AAEFF; --blue-d:#1f7fd6; --ink:#1f2530; --mut:#6b7480; --line:#e7eaef;
  --bg:#f6f8fb; --card:#fff; --green:#13a36b; --green-bg:#e6f7ef; --amber:#b7791f; --amber-bg:#fdf3e1;
  --red:#d23a3a; --red-bg:#fdecec; --info-bg:#e9f3ff;
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  line-height:1.7; -webkit-font-smoothing:antialiased; }
a{ color:var(--blue-d); text-decoration:none; }
.wrap{ max-width:780px; margin:0 auto; padding:18px 16px 70px; }

.top{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.logo{ width:34px; height:34px; border-radius:9px; background:var(--blue);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:18px; flex:none; }
.top h1{ font-size:18px; margin:0; }
.top .sub{ font-size:12px; color:var(--mut); }
.demo-tag{ margin-left:auto; font-size:11px; color:var(--blue-d); background:var(--info-bg); padding:3px 9px; border-radius:20px; }

.nav{ display:flex; gap:8px; margin:14px 0 18px; flex-wrap:wrap; }
.nav a{ font-size:13px; padding:7px 14px; border-radius:9px; background:#fff; border:1px solid var(--line); color:var(--ink); }
.nav a.on{ background:var(--blue); color:#fff; border-color:var(--blue); }

.card{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin-bottom:14px; }
.card h2{ font-size:15px; margin:0 0 4px; }
.card .lead{ font-size:13px; color:var(--mut); margin:0 0 12px; }
.hd{ border-left:3px solid var(--blue); padding-left:10px; margin-bottom:14px; }
.hd .big{ font-size:20px; font-weight:600; }
.hd .meta{ font-size:13px; color:var(--mut); }
.sect-t{ font-size:13px; color:var(--mut); margin:0 0 10px; font-weight:600; }

.chips{ display:flex; flex-wrap:wrap; gap:7px; }
.chip{ font-size:12px; background:#f0f3f7; color:#46505c; padding:4px 10px; border-radius:8px; }

.kpis{ display:flex; gap:10px; flex-wrap:wrap; }
.kpi{ flex:1; min-width:130px; background:#f3f6fa; border-radius:10px; padding:12px 14px; }
.kpi .l{ font-size:12px; color:var(--mut); }
.kpi .v{ font-size:20px; font-weight:600; margin-top:2px; }
.kpi .v.red{ color:var(--red); } .kpi .v.green{ color:var(--green); } .kpi .v.blue{ color:var(--blue-d); }

.banner-red{ background:var(--red-bg); border-radius:12px; padding:12px 14px; margin-bottom:14px; }
.banner-red .t{ color:var(--red); font-weight:600; font-size:13px; margin-bottom:3px; }
.banner-red .d{ color:#9e2f2f; font-size:13px; }
.banner-amber{ background:var(--amber-bg); border-radius:12px; padding:12px 14px; }
.banner-amber .t{ color:var(--amber); font-weight:600; font-size:13px; margin-bottom:3px; }
.banner-amber .d{ color:#8a5d12; font-size:13px; }

table{ width:100%; border-collapse:collapse; font-size:13px; }
th,td{ text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:top; }
th{ color:var(--mut); font-weight:600; font-size:12px; }

.flag{ font-size:11px; padding:2px 7px; border-radius:7px; }
.flag.g{ background:var(--green-bg); color:var(--green); }
.flag.y{ background:var(--amber-bg); color:var(--amber); }
.flag.b{ background:var(--info-bg); color:var(--blue-d); }
.flag.gray{ background:#eef1f5; color:var(--mut); }

.steps{ display:flex; flex-direction:column; gap:9px; }
.step{ display:flex; gap:11px; align-items:flex-start; background:#fafbfc; border:1px solid var(--line); border-radius:10px; padding:11px 13px; }
.step.now{ border-color:var(--blue); border-width:2px; background:var(--info-bg); }
.step .n{ font-size:11px; padding:2px 9px; border-radius:20px; background:#eef1f5; color:var(--mut); flex:none; height:fit-content; }
.step.now .n{ background:var(--blue); color:#fff; }
.step .ttl{ font-size:14px; }
.step .d{ font-size:12px; color:var(--mut); margin-top:2px; }

.ammo{ background:#fafbfc; border:1px solid var(--line); border-radius:10px; padding:11px 12px; margin-bottom:9px; }
.ammo .scene{ font-size:12px; color:var(--blue-d); font-weight:600; margin-bottom:5px; }
.ammo .row{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.ammo .body{ font-size:13.5px; }
.copy{ flex:none; font-size:12px; color:var(--blue-d); background:var(--info-bg); border:none; padding:5px 11px; border-radius:8px; cursor:pointer; white-space:nowrap; }
.copy:active{ transform:scale(.96); }

.sop{ display:flex; gap:11px; padding:11px 0; border-top:1px solid var(--line); }
.sop:first-of-type{ border-top:none; }
.sop input{ width:18px; height:18px; margin-top:2px; accent-color:var(--blue); flex:none; }
.sop .main{ flex:1; }
.sop .ttl{ font-size:14px; }
.sop .how{ font-size:12px; color:var(--mut); margin-top:2px; }
.who{ font-size:11px; padding:2px 8px; border-radius:7px; flex:none; height:fit-content; }
.who.self{ background:var(--info-bg); color:var(--blue-d); }
.who.deleg{ background:#eef1f5; color:var(--mut); }

.base{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:13px; }
.pill{ font-size:11px; padding:3px 9px; border-radius:8px; }
.pill.miss{ background:var(--red-bg); color:var(--red); }
.pill.hit{ background:var(--green-bg); color:var(--green); }
.pill.wait{ background:#eef1f5; color:var(--mut); }
.prog{ font-size:12px; color:var(--mut); margin-bottom:8px; }
.foot{ font-size:12px; color:var(--mut); text-align:center; margin-top:22px; line-height:1.6; }
@media(max-width:520px){ .hd .big{ font-size:18px; } .ammo .row{ flex-direction:column; } .copy{ align-self:flex-end; } }