.seal-visualization{margin:16px 0 4px;border:1px solid #cfdde2;border-radius:11px;background:linear-gradient(150deg,#f7fbfc,#eef5f6);overflow:hidden}
.visualization-head{display:flex;align-items:flex-end;justify-content:space-between;padding:12px 14px 6px}
.visualization-head .section-title{margin:0 0 4px}
.visualization-head strong{font-size:14px;color:#214656}
.diagram-badges{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.diagram-badges span{font-size:10px;color:#3e616e;background:#fff;border:1px solid #d4e1e5;border-radius:16px;padding:5px 8px}
.diagram-stage{padding:0 8px;cursor:default}
.diagram-stage svg{display:block;width:100%;height:auto;max-height:305px;background:#fff}
.metal{fill:#d8e1e4;stroke:#778e98;stroke-width:1.5}
.metal.dark{fill:#b8c7cc}
.groove-cut{fill:#f6fafb;stroke:#607c88;stroke-width:1.5}
.seal{fill:#0c8790;stroke:#075d66;stroke-width:2}
.x-seal{stroke-linejoin:round}
.part-label,.note,.dimension text{font-family:Inter,"Segoe UI",Arial,sans-serif;fill:#45616d;font-size:11px}
.note{font-weight:700}
.pressure,.motion{fill:none;stroke:#c66b27;stroke-width:2.5}
.dimension{cursor:pointer}
.dimension line{stroke:#176e96;stroke-width:1.7}
.dimension marker path{fill:#176e96}
.dimension text{fill:#176e96;font-size:13px;font-weight:800}
.dimension:hover line,.dimension.active line{stroke:#d25d25;stroke-width:3}
.dimension:hover text,.dimension.active text{fill:#d25d25;font-size:15px}
.diagram-hint{min-height:34px;padding:9px 13px;border-top:1px solid #d9e5e8;background:rgba(255,255,255,.72);color:#536e79;font-size:11px}
.input-block input:focus{box-shadow:0 0 0 3px rgba(210,93,37,.12);border-color:#d25d25}
.section-part{fill:url(#hatch);stroke:#1d2b32;stroke-width:1.5;stroke-linejoin:round}.section-part.dark{fill:url(#hatch)}
pattern line{stroke:#9ba5a9;stroke-width:1}
.paper{fill:#fff;stroke:#1d2b32;stroke-width:1.2}
.seal.outline{fill:#d8ebf5;stroke:#176e96;stroke-width:2}
.extension{stroke:#64737a;stroke-width:1;stroke-dasharray:3 2}
.leader path{fill:none;stroke:#1d2b32;stroke-width:1.2}.leader text,.ring-inset text{font-family:Inter,"Segoe UI",Arial,sans-serif;fill:#263940;font-size:11px}
.dimension line{stroke:#17272e;stroke-width:1.2}.dimension marker path{fill:#17272e}.dimension text{fill:#17272e;font-size:13px}.diameter-leader path{fill:none;stroke:#17272e;stroke-width:1.2}.diameter-leader:hover path,.diameter-leader.active path{stroke:#d25d25;stroke-width:2.5}
.pressure{stroke:#c05c24}.motion{stroke:#176e96}.part-label{fill:#31464f;font-weight:700}
.metric small{display:block;margin-top:8px;color:#687b85;font-size:10px;line-height:1.35;font-weight:400}.metric .metric-code{display:inline-block;margin-left:5px;color:#176e96;font-size:11px;font-weight:800}.metric.info{min-height:116px}.metric.info:hover{border-color:#7ca6b4;background:#f7fbfc}
@media(max-width:600px){.visualization-head{align-items:flex-start;gap:8px}.diagram-badges{max-width:145px}.diagram-stage{padding:0}.diagram-stage svg{min-height:190px}}
.dimension line{stroke-width:.85}.dimension:hover line,.dimension.active line{stroke-width:1.5}.diameter-leader path,.leader path{stroke-width:.85}.diameter-leader:hover path,.diameter-leader.active path{stroke-width:1.5}.pressure,.motion{stroke-width:1.7}
