.drawing-shapes { margin: 12px 0; border: 1px solid #ded6be; border-radius: 14px; background: #fffaf0; color: #2e514b; }
.drawing-shapes summary { padding: 12px; cursor: pointer; font-weight: 700; min-height: 48px; }
.drawing-shapes summary span { display: block; margin: 4px 0 0 16px; font-size: 12px; font-weight: 400; }
.drawing-shapes p { margin: 0 12px 10px; font-size: 12px; line-height: 1.5; }
.drawing-shapes__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 6px; padding: 0 10px 10px; }
.drawing-shapes__grid button { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 7px; border: 1px solid #ded6be; border-radius: 10px; background: #fffdf7; color: inherit; cursor: pointer; }
.drawing-shapes__grid button svg { width: 26px; height: 26px; }
.drawing-shapes__grid path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.drawing-shapes__grid button:hover { background: #edf3e7; border-color: #698c70; }
.drawing-shapes__grid button[aria-pressed="true"] { background: #deeddd; border: 2px solid #3c7669; }
.drawing-shapes :is(button, summary, input):focus-visible { outline: 3px solid #cf7155; outline-offset: 3px; }
.drawing-shapes__fill { display: flex; gap: 8px; align-items: center; min-height: 44px; padding: 0 12px; font-size: 14px; cursor: pointer; }
.drawing-shapes__fill input { width: 20px; height: 20px; accent-color: #3c7669; }
.drawing-shapes > small { display: block; margin: 0 12px 12px; font-size: 11px; line-height: 1.5; }
.coloring-svg[data-shape-active="true"] { cursor: crosshair; }
.coloring-svg .brush-stroke { pointer-events: visiblePainted; }