.tooth-chart {
    --caries: #d63939; --filling: #4263eb; --crown: #f59f00; --missing: #adb5bd;
    --extracted: #d63939; --pontic: #f76707; --endo: #ae3ec9;
    --fill-amalgam: #6c757d; --fill-composite: #74c0fc; --fill-gi: #0ca678;
}
.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 .zone.filling_amalgam { fill: var(--fill-amalgam); }
.tooth-chart .zone.filling_composite { fill: var(--fill-composite); }
.tooth-chart .zone.filling_glassionomer { fill: var(--fill-gi); }
.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.extracted .zone { fill: #fff5f5; stroke: #f1aeae; }
.tooth-chart .tooth.crown .box { stroke: var(--crown); stroke-width: 2.5; fill: none; }
.tooth-chart .tooth.pontic .box { stroke: var(--pontic); stroke-width: 2.5; stroke-dasharray: 4 2; fill: none; }
.tooth-chart .endo-mark { fill: var(--endo); stroke: #fff; stroke-width: .5; }
.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; }
.tooth-chart .tc-legend .chip-pontic { border-color: var(--pontic); border-width: 2px; border-style: dashed; }
.tooth-chart .tc-legend .chip-extracted { background: #fff5f5; border-color: var(--extracted); }
.tooth-chart .tc-legend .chip-endo { background: var(--endo); }

/* Paleta nastroju */
.tooth-chart .tc-palette { display: flex; flex-direction: column; gap: .35rem; }
.tooth-chart .tc-tool-group { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.tooth-chart .tc-tool-label { font-size: .8125rem; color: #6c757d; min-width: 3.5rem; font-weight: 600; }
.tooth-chart .tc-tool { border: 1px solid #ced4da; background: #fff; color: #495057; }
.tooth-chart .tc-tool:hover { border-color: #4263eb; color: #4263eb; }
.tooth-chart .tc-tool.active { background: #4263eb; border-color: #4263eb; color: #fff; }