/* 48 山路自驾安全核对 —— 独立视觉：松绿 + 土黄，
   纯 CSS 山脊剖面（clip-path）+ 路段仪表 + 五段检查表。结构不与前页重复。 */
.mrd {
    --mrd-pine: #2f5f4b;
    --mrd-pine2: #4c8a6c;
    --mrd-earth: #b98a4b;
    --mrd-earth2: #e0bd83;
    --mrd-sky: #e7f0e6;
    --mrd-ink: #27332c;
    --mrd-sub: #64756a;
    --mrd-line: #d2ddd1;
}
:root[data-theme="dark"] .mrd {
    --mrd-pine: #7cc2a0;
    --mrd-pine2: #a0d6b9;
    --mrd-earth: #d6ac6e;
    --mrd-earth2: #f0d4a2;
    --mrd-sky: #16251f;
    --mrd-ink: #e6efe7;
    --mrd-sub: #a9beae;
    --mrd-line: #2b4035;
}
.mrd { --g5-pri: var(--mrd-pine2); --g5-pri2: var(--mrd-pine); --g5-prisoft: #e7f1e8; }
:root[data-theme="dark"] .mrd { --g5-prisoft: #1b3529; }
.mrd .g5-btn-main { background: var(--mrd-pine); border-color: var(--mrd-pine); color: #fff; }
.mrd .g5-btn-main:hover { background: var(--mrd-pine2); color: #fff; }
:root[data-theme="dark"] .mrd .g5-btn-main { color: #101715; }

.mrd-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; padding-bottom: 30px; border-bottom: 3px solid var(--mrd-earth); }
.mrd-hero h1 { margin: 8px 0 12px; color: var(--mrd-pine); font-size: 33px; }
.mrd .g5-lede { margin-bottom: 10px; }
.mrd-bound { font-size: 12.5px; line-height: 1.8; padding: 8px 12px; background: var(--mrd-sky); border-left: 3px solid var(--mrd-earth); color: var(--mrd-ink); margin-bottom: 16px; }
.mrd-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px 12px; }
.mrd-fields label { display: block; font-size: 11.5px; font-weight: 700; color: var(--mrd-sub); }
.mrd-fields input, .mrd-fields select {
    display: block; width: 100%; margin-top: 4px; padding: 7px 9px; border: 1px solid var(--mrd-line);
    background: var(--g5-card); color: var(--g5-ink); font-size: 13px; line-height: 1.6;
}
.mrd-fields input:focus, .mrd-fields select:focus { border-color: var(--mrd-pine); outline: none; }
.mrd-hero .g5-actions { margin-top: 16px; }

.mrd-profile { background: var(--g5-card); border: 1px solid var(--g5-line); padding: 16px 18px 18px; }
.mrd-profile-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--g5-line); padding-bottom: 8px; }
.mrd-profile-hd b { color: var(--mrd-pine); font-size: 15px; }
.mrd-profile-hd span { font-size: 10.5px; color: var(--g5-muted); }
.mrd-ridge { position: relative; height: 176px; margin: 14px 0 10px; background: linear-gradient(180deg, var(--mrd-sky), var(--g5-card2)); overflow: hidden; }
.mrd-ridge-a, .mrd-ridge-b { position: absolute; left: 0; right: 0; bottom: 0; }
.mrd-ridge-a { height: 74%; background: var(--mrd-pine2); opacity: .55; clip-path: polygon(0 88%, 14% 48%, 27% 66%, 43% 20%, 58% 52%, 72% 30%, 88% 62%, 100% 42%, 100% 100%, 0 100%); }
.mrd-ridge-b { height: 58%; background: var(--mrd-pine); opacity: .8; clip-path: polygon(0 70%, 18% 40%, 33% 62%, 50% 18%, 66% 56%, 82% 36%, 100% 58%, 100% 100%, 0 100%); }
.mrd-road { position: absolute; left: 0; right: 0; bottom: 16%; height: 5px; background: var(--mrd-earth2); border-top: 1px dashed var(--mrd-earth); transform-origin: left center; transform: rotate(-3deg); transition: transform .3s; }
.mrd-car { position: absolute; left: 12%; bottom: 20%; font-size: 15px; color: var(--mrd-earth); line-height: 1; transition: left .3s; }
.mrd-scale { display: flex; justify-content: space-between; font-family: var(--g5-mono); font-size: 10.5px; color: var(--g5-muted); border-top: 1px dashed var(--g5-line); padding-top: 8px; }
.mrd-hairpin { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; font-size: 11px; color: var(--mrd-sub); }
.mrd-hairpin i { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--mrd-earth); border-radius: 50%; margin-right: 4px; vertical-align: -4px; }
.mrd-equip { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 12px; }
.mrd-eq { display: flex; align-items: center; gap: 7px; padding: 7px 9px; background: var(--g5-card); border: 1px solid var(--g5-line); font-size: 12px; border-radius: 6px; }
.mrd-eq input { width: 14px; height: 14px; margin: 0; accent-color: var(--mrd-pine); flex: none; }
.mrd-eq.is-on { border-color: var(--mrd-pine2); background: var(--mrd-sky); }

.mrd-sec { margin-top: 30px; }
.mrd-sec-hd { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.mrd-sec-hd h2 { color: var(--mrd-pine); }
.mrd-sec-hd i { display: inline-block; margin-right: 10px; padding: 2px 9px; background: var(--mrd-earth); color: #2b2419; font-family: var(--g5-mono); font-style: normal; font-size: 11px; }
.mrd-sec-hd span { font-size: 12px; color: var(--g5-muted); }
.mrd-five { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.mrd-stage { background: var(--g5-card); border: 1px solid var(--g5-line); border-top: 4px solid var(--mrd-pine2); padding: 10px 11px; }
.mrd-stage:nth-child(even) { border-top-color: var(--mrd-earth); }
.mrd-stage h3 { font-size: 13.5px; color: var(--mrd-pine); margin-bottom: 8px; }
.mrd-stage label { display: flex; gap: 6px; align-items: flex-start; font-size: 11.5px; line-height: 1.65; padding: 4px 0; color: var(--g5-ink2); }
.mrd-stage input { width: 13px; height: 13px; margin: 3px 0 0; accent-color: var(--mrd-pine); flex: none; }
.mrd-stage label.is-hot { color: var(--mrd-pine); font-weight: 700; }

.mrd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.mrd-kpi { padding: 12px 14px; background: var(--g5-card); border: 1px solid var(--g5-line); border-left: 4px solid var(--mrd-pine2); }
.mrd-kpi.is-warn { border-left-color: var(--mrd-earth); }
.mrd-kpi.is-bad { border-left-color: var(--g5-bad); }
.mrd-kpi .k { display: block; font-size: 11px; color: var(--g5-muted); }
.mrd-kpi .v { display: block; font-family: var(--g5-mono); font-size: 22px; font-weight: 700; color: var(--mrd-pine); line-height: 1.5; }
.mrd-kpi .s { display: block; font-size: 11px; color: var(--g5-muted); }
.mrd-two { display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; margin-bottom: 14px; }
.mrd-panel { background: var(--g5-card); border: 1px solid var(--g5-line); padding: 16px 18px; margin-bottom: 14px; }
.mrd-panel h3 { color: var(--mrd-pine); margin-bottom: 12px; }
.mrd-gaps, .mrd-risks { display: grid; gap: 8px; font-size: 13px; }
.mrd-gap { padding: 8px 10px; border-left: 3px solid var(--mrd-earth); background: var(--g5-card2); line-height: 1.75; }
.mrd-gap.is-bad { border-left-color: var(--g5-bad); }
.mrd-risk { padding: 8px 10px; border-left: 3px solid var(--mrd-pine2); background: var(--g5-card2); line-height: 1.75; }
.mrd-risk.is-warn { border-left-color: var(--mrd-earth); }
.mrd-risk.is-bad { border-left-color: var(--g5-bad); }
.mrd-text { margin: 14px 0 0; padding: 14px 16px; background: var(--g5-card2); border: 1px dashed var(--g5-line2); font-family: var(--g5-mono); font-size: 12.5px; line-height: 1.95; white-space: pre-wrap; word-break: break-word; }
.mrd-clean { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0; padding: 10px; background: var(--g5-card2); border: 1px dashed var(--g5-line2); font-size: 12px; }
.mrd-clean b { margin-right: 4px; }
.mrd-clean code { display: block; width: 100%; margin-top: 4px; white-space: pre-wrap; word-break: break-all; color: var(--g5-ink2); }
.mrd textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--g5-line); background: var(--g5-card); color: var(--g5-ink); font-family: var(--g5-mono); font-size: 12.5px; line-height: 1.8; resize: vertical; }
.mrd-read { margin-top: 38px; padding: 20px 22px; background: var(--g5-card); border-left: 4px solid var(--mrd-earth); }
.mrd-read h2 { color: var(--mrd-pine); margin-bottom: 12px; }
.mrd-read p { font-size: 13.5px; line-height: 1.95; color: var(--g5-ink2); max-width: 88ch; }

@media (max-width: 1100px) { .mrd-five { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
    .mrd-hero, .mrd-two { grid-template-columns: 1fr; }
    .mrd-fields { grid-template-columns: repeat(2, 1fr); }
    .mrd-five, .mrd-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) { .mrd-fields, .mrd-five, .mrd-kpis, .mrd-equip { grid-template-columns: 1fr; } }
@media print {
    .mrd-hero-l, .mrd-sec, .mrd-result .g5-actions { display: none !important; }
}