/* 车身病历（#506）：与 /cars/compare/ 同一套工业图纸语言——黄 + 墨黑 + 等宽数字。
   两页共用一具体块，视觉上要认得出是同一个工作台。 */
/* 这页好几块的 display 是 grid/flex，会盖过 hidden 属性的 UA 样式（display:none）。
   一条覆盖全页，别再逐块补——漏一块就是一个「关不掉的面板」。 */
.anatomy-page [hidden] { display: none; }

.anatomy-page {
    --an-yellow: #f5c518;
    --an-ink: #22262b;
    --an-paper: var(--card, #fffdf7);
    max-width: 1240px;
    margin: 0 auto;
    color: var(--text);
}

.anatomy-hero {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px;
    padding: 30px 34px 24px;
    border: 1px solid var(--border); border-bottom: 5px solid var(--an-yellow); border-radius: 4px 4px 0 0;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--an-yellow) 8%, transparent) 1px, transparent 1px) 0 0 / 28px 28px,
        linear-gradient(color-mix(in srgb, var(--an-yellow) 8%, transparent) 1px, transparent 1px) 0 0 / 28px 28px,
        var(--an-paper);
}
.anatomy-back { color: var(--text-meta); text-decoration: none; font-size: 13px; }
.anatomy-kicker { margin: 22px 0 8px; color: var(--gold-text); font: 800 12px/1.2 monospace; letter-spacing: .16em; }
.anatomy-hero h1 { margin: 0; font-family: var(--font-serif); font-size: clamp(32px, 5vw, 58px); line-height: 1.03; letter-spacing: -.045em; }
.anatomy-hero h1 em { color: var(--gold-text); font-style: normal; white-space: nowrap; }
.anatomy-lede { max-width: 720px; margin: 16px 0 0; color: var(--text-meta); font-size: 15px; line-height: 1.85; }
.anatomy-stamp { display: grid; gap: 4px; justify-items: center; transform: rotate(-2deg); padding: 10px 16px; border: 2px solid var(--an-ink); background: var(--an-yellow); color: var(--an-ink); box-shadow: 5px 5px 0 var(--an-ink); }
.anatomy-stamp strong { font: 900 30px/1 var(--font-serif); font-variant-numeric: tabular-nums; }
.anatomy-stamp span { font-size: 11px; font-weight: 800; line-height: 1.35; text-align: center; }

.anatomy-levels { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 16px 28px; border: 1px solid var(--border); border-top: 0; background: var(--an-paper); }
.level-tabs { display: flex; gap: 4px; padding: 3px; border: 1px solid var(--border); }
.level-tabs button { min-height: 38px; padding: 0 16px; border: 0; background: transparent; color: var(--text-meta); font: 700 13px/1 inherit; cursor: pointer; }
.level-tabs button.active { background: var(--an-ink); color: #fff; }
.level-pick { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-meta); }
.level-pick select { min-height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 3px; background: var(--bg); color: var(--text); font-size: 14px; font-weight: 700; }
.level-note { flex: 1 1 240px; margin: 0; color: var(--text-lighter); font-size: 12px; line-height: 1.7; }

.anatomy-workbench { display: grid; grid-template-columns: minmax(0, 1fr) 330px; min-height: 580px; border: 1px solid var(--an-ink); border-top: 0; background: var(--an-ink); }
.anatomy-stage-wrap { min-width: 0; background: #171b1f; }
.anatomy-stage { position: relative; height: 520px; overflow: hidden; background: radial-gradient(circle at 50% 38%, #333d45 0, #1f252a 44%, #111519 100%); }
.anatomy-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.anatomy-tags { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tag-line { stroke: rgba(245,197,24,.6); stroke-width: 1; }
.tag-box { fill: rgba(14,18,21,.82); stroke: rgba(245,197,24,.5); stroke-width: 1; }
.tag-text { fill: #f7f3e8; font: 700 11px/1 monospace; }
.anatomy-loading, .anatomy-error { position: absolute; inset: 0; display: grid; place-content: center; color: var(--an-yellow); font-weight: 800; font-size: 13px; background: rgba(12,15,18,.5); }
.anatomy-error { color: #fff; background: rgba(12,15,18,.72); padding: 0 30px; text-align: center; }
.anatomy-scale { position: absolute; left: 14px; bottom: 12px; color: rgba(255,255,255,.42); font: 10px/1 monospace; letter-spacing: .06em; pointer-events: none; }
.anatomy-help { margin: 0; padding: 11px 16px; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.48); font-size: 11px; text-align: center; }

.anatomy-readout { display: flex; flex-direction: column; padding: 20px; background: var(--an-paper); color: var(--text); }
.anatomy-readout-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 12px; border-bottom: 3px double var(--border); }
.anatomy-readout-head p { margin: 0; font: 800 15px/1.2 var(--font-serif); }
.anatomy-readout-head span { color: var(--text-lighter); font: 700 11px/1 monospace; }
.part-rank { margin: 12px 0 0; padding: 0; list-style: none; }
.part-row { display: grid; grid-template-columns: 96px 1fr 34px; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.part-row:hover { background: var(--gold-light); }
.part-row b { font-size: 11.5px; font-weight: 700; }
.part-row i { display: block; height: 9px; border-radius: 1px; }
.part-row span { font: 800 13px/1 monospace; text-align: right; font-variant-numeric: tabular-nums; }
.anatomy-unclassified { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--border); color: var(--text-meta); font-size: 11px; line-height: 1.75; }

.case-panel { display: flex; flex-direction: column; min-height: 0; margin-top: 14px; border-top: 3px double var(--border); padding-top: 12px; }
.case-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.case-head b { font-size: 13px; }
.case-head button { width: 26px; height: 26px; border: 1px solid var(--border); background: transparent; color: var(--text-meta); font-size: 15px; line-height: 1; cursor: pointer; }
.case-list { overflow-y: auto; max-height: 260px; margin-top: 8px; }
.case-pending { margin: 10px 0; color: var(--text-lighter); font-size: 12px; }
.case-item { display: block; padding: 9px 0; border-bottom: 1px dashed var(--border); color: inherit; text-decoration: none; }
.case-item:hover { background: var(--gold-light); }
.case-item b { display: block; font-size: 12px; }
.case-item span { display: block; margin-top: 2px; color: var(--gold-text); font: 700 10px/1.4 monospace; }
.case-item p { margin: 4px 0 0; color: var(--text-meta); font-size: 11px; line-height: 1.65; }

.anatomy-source-note { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 16px 22px; border: 1px solid var(--border); border-top: 0; background: var(--bg-soft); font-size: 12px; }
.anatomy-source-note strong { color: var(--gold-text); letter-spacing: .08em; }
.anatomy-source-note p { margin: 0; color: var(--text-meta); line-height: 1.8; }

html[data-theme="dark"] .anatomy-stamp { color: #1c2023; }
html.elder .level-tabs button, html.elder .level-pick select { min-height: 44px; font-size: 15px; }

@media (max-width: 900px) {
    .anatomy-workbench { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .anatomy-page { margin: -8px -12px 0; }
    .anatomy-hero { grid-template-columns: 1fr; padding: 24px 18px 20px; }
    .anatomy-stamp { display: none; }
    .anatomy-levels { padding: 14px 16px; }
    .level-tabs { width: 100%; }
    .level-tabs button { flex: 1; min-height: 44px; }
    .level-pick { width: 100%; }
    .level-pick select { flex: 1; }
    .anatomy-workbench { min-height: 0; }
    .anatomy-stage { height: min(62vh, 400px); min-height: 320px; }
    .anatomy-readout { padding: 18px 16px; }
    .anatomy-source-note { grid-template-columns: 1fr; padding: 16px; }
}