/* JLPT等级对照 · 能力考证书风：靛蓝 / 朱红 / 明朝体标题 / 五级阶梯 */
.jp-page{
  --jp-bg:#eef2f8;--jp-card:#fff;--jp-ink:#1d2c42;--jp-mute:#6d7c91;--jp-line:#d8e0ec;
  --jp-navy:#1b3a6b;--jp-red:#c8453a;--jp-gold:#b8943f;--jp-soft:#f4f7fb;
  color:var(--jp-ink);background:var(--jp-bg);min-height:100vh;padding:0 0 54px;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
}
:root[data-theme="dark"] .jp-page{
  --jp-bg:#111925;--jp-card:#1a2534;--jp-ink:#e8eef7;--jp-mute:#9aabc0;--jp-line:#2c3d52;
  --jp-navy:#8fb2e0;--jp-red:#f08a80;--jp-gold:#d9b46a;--jp-soft:#15202e;
}
.jp-wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.jp-page .detail-breadcrumb{margin:18px 0 22px;font-size:13px}
.jp-page .detail-breadcrumb a{color:var(--jp-mute);text-decoration:none}
.jp-page .detail-breadcrumb .sep{margin:0 8px;color:var(--jp-gold)}
.jp-page .detail-breadcrumb .current{color:var(--jp-ink);font-weight:700}

.jp-hero{display:grid;grid-template-columns:1fr 220px;gap:34px;align-items:center;background:var(--jp-card);
  border:1px solid var(--jp-line);border-top:5px solid var(--jp-navy);border-radius:6px;padding:34px 38px;
  box-shadow:0 12px 36px rgba(27,58,107,.08);position:relative}
.jp-kicker{font:600 11px/1.4 ui-monospace,monospace;letter-spacing:.2em;color:var(--jp-red);margin-bottom:14px}
.jp-hero h1{font-family:"Songti SC","Noto Serif SC",SimSun,serif;font-size:clamp(25px,3.3vw,36px);
  line-height:1.35;margin:0 0 14px;font-weight:800;letter-spacing:.02em}
.jp-sub{font-size:14.5px;line-height:1.95;color:var(--jp-mute);margin:0;max-width:700px}
.jp-sub b{color:var(--jp-navy)}
.jp-hero-note{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;margin-top:20px;padding-top:14px;border-top:1px dashed var(--jp-line);font-size:12.5px}
.jp-hero-note b{color:var(--jp-red)}
.jp-hero-note span{color:var(--jp-mute)}
.jp-cert{width:190px;height:190px;margin:0 auto;border:2px solid var(--jp-navy);outline:1px solid var(--jp-line);outline-offset:6px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--jp-soft);position:relative}
.jp-cert:before{content:"";position:absolute;top:12px;left:12px;right:12px;bottom:12px;border:1px solid var(--jp-line)}
.jp-cert span{font:700 11px/1 ui-monospace,monospace;letter-spacing:.3em;color:var(--jp-red)}
.jp-cert b{font:800 46px/1.1 Georgia,serif;color:var(--jp-navy)}
.jp-cert i{font:600 8px/1 ui-monospace,monospace;letter-spacing:.16em;font-style:normal;color:var(--jp-gold)}
.jp-cert em{font-style:normal;font-size:11px;color:var(--jp-mute);letter-spacing:.1em}

.jp-sec-head{display:flex;align-items:baseline;gap:12px;margin:0 0 18px;border-bottom:1px solid var(--jp-line);padding-bottom:11px}
.jp-sec-head h2{font-family:"Songti SC",SimSun,serif;font-size:19px;margin:0;font-weight:800}
.jp-sec-head small{margin-left:auto;color:var(--jp-mute);font-size:12.5px;text-align:right}
.jp-stairs,.jp-detail,.jp-plan,.jp-batch{margin-top:22px;background:var(--jp-card);border:1px solid var(--jp-line);border-radius:6px;
  padding:26px 28px;box-shadow:0 8px 24px rgba(27,58,107,.05)}
.jp-stair-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;align-items:end;min-height:210px}
.jp-stair{cursor:pointer;border:1px solid var(--jp-line);border-radius:5px 5px 0 0;background:var(--jp-soft);
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:12px 6px 0;transition:.2s;position:relative}
.jp-stair:hover{background:var(--jp-card);border-color:var(--jp-navy)}
.jp-stair.is-on{background:var(--jp-navy);border-color:var(--jp-navy);color:#fff}
.jp-stair b{font:800 20px/1 ui-monospace,monospace;margin-bottom:6px}
.jp-stair span{font-size:11.5px;color:var(--jp-mute);margin-bottom:12px;text-align:center;line-height:1.5}
.jp-stair.is-on span{color:rgba(255,255,255,.85)}
.jp-stair i{display:block;width:100%;background:linear-gradient(180deg,var(--jp-gold),var(--jp-red));border-radius:3px 3px 0 0;opacity:.8}
.jp-stair.is-on i{background:linear-gradient(180deg,#f0d98a,#f08a80);opacity:1}

.jp-detail-grid{display:grid;grid-template-columns:1.5fr .8fr;gap:18px}
.jp-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.jp-kpi{background:var(--jp-soft);border:1px solid var(--jp-line);border-radius:5px;padding:13px}
.jp-kpi span{display:block;font-size:11.5px;color:var(--jp-mute);margin-bottom:6px}
.jp-kpi b{font:800 20px/1.2 ui-monospace,monospace;color:var(--jp-navy)}
.jp-kpi em{font-style:normal;font-size:11px;color:var(--jp-mute);margin-left:4px}
.jp-ability{background:var(--jp-soft);border-left:4px solid var(--jp-red);border-radius:5px;padding:16px 18px}
.jp-ability span{font-size:11.5px;letter-spacing:.1em;color:var(--jp-red)}
.jp-ability p{font-size:13px;line-height:1.9;color:var(--jp-ink);margin:8px 0 14px}
.jp-cefr{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;border-top:1px dashed var(--jp-line);padding-top:10px}
.jp-cefr b{font-size:11.5px;color:var(--jp-mute)}
.jp-cefr i{font-style:normal;font:800 17px/1 ui-monospace,monospace;color:var(--jp-gold)}
.jp-cefr small{font-size:10.5px;color:var(--jp-mute);width:100%}
.jp-subjects{margin-top:20px}
.jp-subjects-head{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;margin-bottom:10px}
.jp-subjects-head span{color:var(--jp-mute);font-size:12px}
.jp-subjects table{width:100%;border-collapse:collapse;font-size:13px}
.jp-subjects th,.jp-subjects td{border:1px solid var(--jp-line);padding:9px 11px;text-align:left}
.jp-subjects th{background:var(--jp-soft)}
.jp-subjects td b{color:var(--jp-red)}

.jp-plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.jp-plan-form{display:grid;gap:11px}
.jp-plan-form label{font-size:12.5px;color:var(--jp-mute)}
.jp-plan-form label span{display:block;margin-bottom:6px}
.jp-plan-form label i{font-style:normal;color:var(--jp-gold);font-size:11px}
.jp-plan-form input{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid var(--jp-line);border-radius:5px;
  background:var(--jp-soft);color:var(--jp-ink);font:700 16px/1.3 ui-monospace,monospace}
.jp-plan-form input:focus{outline:2px solid var(--jp-gold)}
.jp-btn-main,.jp-btn{border:1px solid var(--jp-line);border-radius:5px;padding:11px 18px;font-size:14px;cursor:pointer;font-family:inherit;transition:.16s}
.jp-btn-main{background:var(--jp-navy);color:#fff;border-color:var(--jp-navy);font-weight:700;margin-top:4px}
.jp-btn-main:hover{background:var(--jp-red);border-color:var(--jp-red)}
.jp-btn{background:var(--jp-soft);color:var(--jp-ink);font-size:12.5px;padding:8px 14px}
.jp-btn:hover{border-color:var(--jp-navy);color:var(--jp-navy)}
.jp-quick{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px;font-size:12px;color:var(--jp-mute)}
.jp-quick button{border:1px solid var(--jp-line);background:var(--jp-card);color:var(--jp-ink);border-radius:4px;padding:5px 10px;font-size:11.5px;cursor:pointer;font-family:inherit}
.jp-err{margin:0;color:var(--jp-red);font-size:13px;font-weight:600}
.jp-plan-out{background:var(--jp-soft);border:1px solid var(--jp-line);border-radius:6px;padding:20px}
.jp-plan-big{display:flex;align-items:baseline;gap:8px;border-bottom:1px dashed var(--jp-line);padding-bottom:14px;margin-bottom:8px}
.jp-plan-big span{font-size:12.5px;color:var(--jp-mute)}
.jp-plan-big b{font:800 32px/1.2 ui-monospace,monospace;color:var(--jp-red);margin-left:auto}
.jp-plan-big em{font-style:normal;font-size:12px;color:var(--jp-mute)}
.jp-plan-row{display:flex;justify-content:space-between;padding:8px 0;font-size:13px;border-bottom:1px dotted var(--jp-line)}
.jp-plan-row span{color:var(--jp-mute)}
.jp-plan-row b{font:700 14px/1 ui-monospace,monospace;color:var(--jp-navy)}
.jp-progress{height:9px;border-radius:99px;background:var(--jp-card);border:1px solid var(--jp-line);margin:16px 0 10px;overflow:hidden}
.jp-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--jp-gold),var(--jp-red));transition:.35s}
.jp-plan-note{font-size:11.5px;line-height:1.8;color:var(--jp-mute)}
.jp-milestones{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px}
.jp-ms{border:1px solid var(--jp-line);border-radius:5px;padding:12px;text-align:center;background:var(--jp-card)}
.jp-ms b{display:block;font:800 16px/1 ui-monospace,monospace;color:var(--jp-navy)}
.jp-ms span{display:block;font-size:11px;color:var(--jp-mute);margin-top:6px;line-height:1.5}

.jp-batch textarea{width:100%;box-sizing:border-box;border:1px solid var(--jp-line);border-radius:5px;background:var(--jp-soft);
  color:var(--jp-ink);padding:13px;font:13px/1.8 ui-monospace,monospace;resize:vertical}
.jp-batch textarea:focus{outline:2px solid var(--jp-gold)}
.jp-batch-actions{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0 4px}
.jp-batch-result{margin-top:16px;overflow-x:auto}
.jp-batch-result table{width:100%;border-collapse:collapse;font-size:13px}
.jp-batch-result th,.jp-batch-result td{border:1px solid var(--jp-line);padding:8px 10px;text-align:left}
.jp-batch-result th{background:var(--jp-soft)}
.jp-batch-result tr.is-bad td{background:rgba(200,69,58,.08)}

:root[data-theme="dark"] .jp-stair.is-on{color:#101a28}
:root[data-theme="dark"] .jp-btn-main{color:#101a28}
@media(max-width:920px){.jp-hero{grid-template-columns:1fr}.jp-cert{display:none}.jp-detail-grid,.jp-plan-grid{grid-template-columns:1fr}
 .jp-kpis{grid-template-columns:1fr 1fr}.jp-milestones{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.jp-wrap{padding:0 14px}.jp-hero,.jp-stairs,.jp-detail,.jp-plan,.jp-batch{padding:20px 16px}
 .jp-hero h1{font-size:24px}.jp-sec-head small{display:none}.jp-kpis{grid-template-columns:1fr 1fr}
 .jp-stair-row{gap:5px}.jp-stair b{font-size:15px}.jp-stair span{font-size:9.5px}}