.tooth-chart { --caries: #d63939; --filling: #4263eb; --crown: #f59f00; --missing: #adb5bd; }
.tooth-chart svg { max-width: 100%; height: auto; display: block; }
.tooth-chart .zone { fill: #fff; stroke: #cbd5e1; stroke-width: 1; }
.tooth-chart .zone.caries { fill: var(--caries); }
.tooth-chart .zone.filling { fill: var(--filling); }
.tooth-chart[data-editable="1"] .zone { cursor: pointer; }
.tooth-chart[data-editable="1"] .zone:hover { opacity: .75; }
.tooth-chart .tooth-num { font: 600 10px/1 sans-serif; fill: #495057; text-anchor: middle; }
.tooth-chart[data-editable="1"] .tooth-num { cursor: pointer; }
.tooth-chart[data-editable="1"] .tooth-num:hover { text-decoration: underline; }
.tooth-chart .tooth-overlay { pointer-events: none; }
.tooth-chart .tooth.missing .zone { fill: #f1f3f5; stroke: #dee2e6; }
.tooth-chart .tooth.crown .box { stroke: var(--crown); stroke-width: 2.5; fill: none; }
.tooth-chart .axis { stroke: #e2e8f0; stroke-width: 1; stroke-dasharray: 3 3; }
.tooth-chart .tc-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .75rem; font-size: .8125rem; }
.tooth-chart .tc-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.tooth-chart .tc-legend .chip { width: 14px; height: 14px; border: 1px solid #cbd5e1; display: inline-flex; align-items: center; justify-content: center; border-radius: 2px; font-size: 9px; font-weight: 700; line-height: 1; }
.tooth-chart .tc-legend .chip-ok { background: #fff; }
.tooth-chart .tc-legend .chip-caries { background: var(--caries); }
.tooth-chart .tc-legend .chip-filling { background: var(--filling); }
.tooth-chart .tc-legend .chip-crown { border-color: var(--crown); border-width: 2px; }
.tooth-chart .tc-legend .chip-missing { background: var(--missing); }
.tooth-chart .tc-legend .chip-implant { border-style: dashed; }