:root {
  --navy:#14213D; --navy2:#1F3260; --gold:#B8893B; --gold-l:#F3E9D2;
  --paper:#FBF8F2; --ink:#222A3A; --mute:#6B7385; --line:#E4DED0;
  --red:#B23A3A; --red-l:#F6E3E1; --green:#2F7D5B; --green-l:#E1F0E8;
}
* { box-sizing:border-box; margin:0; padding:0; }


.page { width:840.0px; height:1188.0px; padding:68.0px 72.0px 60.0px; background:var(--paper); page-break-after:always; break-after:page; position:relative; overflow:hidden; display:flex; flex-direction:column; }
.page:last-child { page-break-after:auto; break-after:auto; }

.kicker { font-size:12.8px; letter-spacing:.18em; color:var(--gold); font-weight:700; margin-bottom:8.0px; }
h2 { font-size:28.5px; line-height:1.3; color:var(--navy); font-weight:800; margin-bottom:16.0px; }
h3 { font-size:18.0px; color:var(--navy); font-weight:700; margin-bottom:6.0px; }
p { margin-bottom:10.0px; }
.lead { font-size:17.2px; color:var(--ink); margin-bottom:20.0px; }
.mute { color:var(--mute); }
.small { font-size:12.8px; }
b, strong { color:var(--navy); }

.cover { background:var(--navy); color:#fff; padding:0; }
.cover .band { position:absolute; left:0; top:0; bottom:0; width:36.0px; background:var(--gold); }
.cover .inner { padding:120.0px 88.0px 80.0px 108.0px; display:flex; flex-direction:column; height:100%; }
.cover .brand { font-size:15.0px; letter-spacing:.3em; color:var(--gold); font-weight:700; }
.cover h1 { font-size:49.5px; line-height:1.28; font-weight:800; margin:64.0px 0 28.0px; color:#fff; }
.cover h1 em { font-style:normal; color:var(--gold); }
.cover .sub { font-size:19.5px; color:#C9D2EA; line-height:1.6; max-width:540.0px; }
.cover .score { margin-top:auto; display:flex; align-items:center; gap:36.0px; }
.cover .score svg { flex:none; }
.cover .score .t1 { font-size:13.5px; letter-spacing:.2em; color:var(--gold); font-weight:700; }
.cover .score .t2 { font-size:22.5px; font-weight:700; color:#fff; margin:4.0px 0; }
.cover .score .t3 { font-size:15.0px; color:#C9D2EA; max-width:400.0px; }
.cover .meta { margin-top:48.0px; font-size:13.5px; color:#8FA0C9; border-top:1px solid #33487F; padding-top:16.0px; display:flex; justify-content:space-between; }

.trio { display:grid; grid-template-columns:repeat(3,1fr); gap:16.0px; margin:8.0px 0 24.0px; }
.stat { background:#fff; border:1px solid var(--line); border-top:3px solid var(--gold); border-radius:8.0px; padding:20.0px 16.0px 16.0px; }
.stat .n { font-size:45.0px; font-weight:800; color:var(--navy); line-height:1.1; }
.stat .n small { font-size:19.5px; font-weight:700; color:var(--mute); }
.stat .l { font-size:14.2px; color:var(--mute); margin-top:6.0px; line-height:1.5; }

.callout { background:var(--navy); color:#fff; border-radius:8.0px; padding:20.0px 24.0px; margin:12.0px 0 16.0px; }
.callout b { color:var(--gold); }
.callout.gold { background:var(--gold-l); color:var(--ink); border-left:3px solid var(--gold); }
.callout.gold b { color:var(--navy); }

.two { display:grid; grid-template-columns:1fr 1fr; gap:20.0px; }
.box { background:#fff; border:1px solid var(--line); border-radius:8.0px; padding:18.0px 20.0px; }
.box.good { border-top:3px solid var(--green); }
.box.bad { border-top:3px solid var(--red); }
.box ul { margin-left:18.0px; }
.box li { margin-bottom:5.2px; }

.flow { display:grid; grid-template-columns:repeat(4,1fr); gap:8.0px; margin:12.0px 0 20.0px; }
.step { background:#fff; border:1px solid var(--line); border-radius:8.0px; padding:14.0px 12.0px; text-align:center; position:relative; }
.step .no { font-size:12.0px; color:var(--gold); font-weight:700; letter-spacing:.15em; }
.step .tt { font-weight:700; color:var(--navy); font-size:15.8px; margin:2.0px 0; }
.step .ds { font-size:12.8px; color:var(--mute); line-height:1.45; }
.step.you { background:var(--red-l); border-color:#E7B8B3; }
.step.you .tt { color:var(--red); }

table { width:100%; border-collapse:collapse; background:#fff; font-size:14.2px; }
th { background:var(--navy); color:#fff; text-align:left; padding:9.2px 12.0px; font-weight:700; }
td { padding:9.2px 12.0px; border-bottom:1px solid var(--line); vertical-align:top; }
tr:last-child td { border-bottom:none; }
td.no { color:var(--red); font-weight:700; }
td.yes { color:var(--green); font-weight:700; }

.gap { display:grid; grid-template-columns:36.0px 1fr; gap:14.0px; background:#fff; border:1px solid var(--line); border-left:3px solid var(--red); border-radius:8.0px; padding:14.4px 18.0px; margin-bottom:12.0px; }
.gap .k { font-size:25.5px; font-weight:800; color:var(--gold); line-height:1; padding-top:4.0px; }
.gap h3 { margin-bottom:3.2px; font-size:16.5px; }
.gap p { margin:0 0 3.2px; font-size:14.7px; line-height:1.55; }
.gap .cost { color:var(--red); font-size:14.0px; }

.bars { background:#fff; border:1px solid var(--line); border-radius:8.0px; padding:20.0px 24.0px; }
.brow { display:grid; grid-template-columns:152.0px 1fr 56.0px; gap:12.0px; align-items:center; margin-bottom:12.8px; }
.brow:last-child { margin-bottom:0; }
.brow .nm { font-size:14.7px; color:var(--ink); }
.brow .tr { height:16.8px; background:#EEE9DC; border-radius:8.4px; overflow:hidden; }
.brow .fl { height:100%; border-radius:8.4px; }
.brow .vl { font-weight:800; color:var(--navy); text-align:right; font-size:15.8px; }
.f-hi { background:var(--green); } .f-mid { background:var(--gold); } .f-lo { background:var(--red); }

.phase { display:grid; grid-template-columns:120.0px 1fr; background:#fff; border:1px solid var(--line); border-radius:8.0px; margin-bottom:14.0px; overflow:hidden; }
.phase .side { background:var(--navy); color:#fff; padding:16.0px 14.0px; }
.phase .side .w { font-size:12.8px; color:var(--gold); font-weight:700; letter-spacing:.1em; }
.phase .side .nm { font-size:21.0px; font-weight:800; margin:4.0px 0 8.0px; }
.phase .side .sc { font-size:12.8px; color:#C9D2EA; line-height:1.45; }
.phase .body { padding:15.2px 20.0px; }
.phase ul { margin-left:18.0px; }
.phase li { margin-bottom:3.6px; font-size:14.7px; line-height:1.55; }
.phase .out { margin-top:6.0px; font-size:14.0px; color:var(--green); font-weight:700; }

.qa { background:#fff; border:1px solid var(--line); border-radius:8.0px; padding:14.0px 20.0px; margin-bottom:11.2px; }
.qa .q { font-weight:700; color:var(--navy); margin-bottom:3.2px; font-size:15.5px; }
.qa .a { font-size:14.7px; line-height:1.6; margin:0; }

.next { display:grid; grid-template-columns:repeat(3,1fr); gap:16.0px; margin:12.0px 0 24.0px; }
.next .c { background:var(--navy); color:#fff; border-radius:8.0px; padding:20.0px 18.0px; }
.next .c .n { color:var(--gold); font-weight:800; font-size:27.0px; line-height:1; }
.next .c .t { font-weight:700; margin:8.0px 0 4.0px; font-size:16.5px; }
.next .c .d { font-size:14.0px; color:#C9D2EA; line-height:1.55; }
.note { font-size:12.5px; color:var(--mute); line-height:1.55; border-top:1px solid var(--line); padding-top:12.0px; margin-top:auto; margin-bottom:36.0px; }


/* ---- 网页版覆盖 ---- */
html,body{background:var(--paper)}
body{font-size:16px;line-height:1.75}
main.rw{max-width:860px;margin:0 auto;padding:22px 16px 10px}
.crumb{font-size:13px;color:var(--mute);margin-bottom:12px}
.crumb a{color:inherit}
.sample-note{background:var(--gold-l);border-left:4px solid var(--gold);border-radius:10px;padding:12px 16px;margin-bottom:18px;font-size:14px}
.page{width:auto;height:auto;overflow:visible;display:block;page-break-after:auto;break-after:auto;border-radius:14px;padding:34px 30px;margin-bottom:20px;border:1px solid var(--line)}
.cover{border:0;padding:0}
.cover .band{display:none}
.cover .inner,.cover{padding:44px 32px 30px}
.cover h1{margin:26px 0 16px;font-size:36px}
.cover .score{margin-top:34px;flex-wrap:wrap}
.cover .meta{flex-wrap:wrap;gap:6px}
h2{font-size:26px;margin-bottom:14px}
h3{font-size:18px;margin:14px 0 6px}
p{margin-bottom:10px}
.lead{font-size:17px}
.small{font-size:13px}
.box,.qa,.gap,.stat{border-radius:10px}
.box{margin-top:14px}
.two{margin-top:14px}
.phase{border-radius:10px}
.phase .side{padding:14px}
.tw{overflow-x:auto;margin:10px 0}
table{font-size:14.5px}
th,td{padding:9px 12px}
.callout{border-radius:10px;padding:16px 20px;margin:14px 0}
.brow{grid-template-columns:150px 1fr 40px}
.gap{grid-template-columns:34px 1fr}
.phase{grid-template-columns:150px 1fr}
@media (max-width:700px){
  .page{padding:24px 18px}
  .cover h1{font-size:28px}
  .trio,.two,.flow,.next{grid-template-columns:1fr}
  .phase{grid-template-columns:1fr}
  .brow{grid-template-columns:100px 1fr 34px}
}