.stencil-description { margin-bottom: 30px; }
.stencil-container { width: 100%; max-width: 1140px; margin: 0 auto 20px; padding: 20px 10px 0; }
.stencil-wrapper { display: flex; gap: 20px; flex-wrap: wrap; }
.stencil-canvas-area { flex: 2; min-width: 250px; background: #f5f5f5;/*background: #fff;*/ border-radius: 12px; padding: 10px; position: relative; box-shadow: 0 2px 8px rgba(0,0,0,0.1); user-select: none; display: flex; align-items: center; justify-content: center; overflow: hidden; max-height: 70vh; }
#stencil-canvas { display: block; background: #fff; border-radius: 8px; max-width: 100%; max-height: 100%; transition: width 0.15s, height 0.15s; }
#stencil-canvas.eraser-active { cursor: none; }          /* скрываем системный курсор */
#crop-overlay { pointer-events: none; }
#crop-overlay.active { pointer-events: auto !important; }
#crop-box { pointer-events: auto; }
.crop-handle { pointer-events: auto; z-index: 10; }
.stencil-controls { flex: 1; min-width: 220px; background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.control-group { margin-bottom: 10px; }
.control-group label { display: block; font-weight: bold; margin-bottom: 5px; }
input[type="range"] { width: 100%; }
.btn-group { display: flex; gap: 10px; justify-content: center; }
.button-primary { background: #0073aa; color: white; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer; width: 100%; }
.button-primary:disabled { background: #ccc; cursor: not-allowed; }
.button { border: 1px solid #ccc; padding: 5px 10px; border-radius: 5px; cursor: pointer; width: 100%; }
button#eraser-toggle { width: 50%; }
.button.active { background: #e74c3c; color: white; border-color: #e74c3c; }
.btn-crop {display: flex;gap: 10px;justify-content: center;}
button#reset-image, button#cancel-crop { background: red; color: white; }
.back-link { margin-top: 30px; text-align: center; }
.back-link a { color: #4d7198; text-decoration: none; }
.control-size {display: flex; flex-direction: column; gap: 5px;}
.size-block { display: flex; flex-wrap: wrap; justify-content: space-between; }
.size-row { display: flex; align-items: center; gap: 5px; }
.size-row span { min-width: 20%;}

/* Тумблер */
.switch { position: relative; display: inline-block; width: 50px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .3s; border-radius: 24px; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; }
input:checked + .slider { background-color: #0073aa; }
input:focus + .slider { box-shadow: 0 0 1px #0073aa; }
input:checked + .slider:before { transform: translateX(26px); }

@media (max-width: 768px) { .stencil-wrapper { flex-direction: column; } }

/* Инструкция */
.stencil-instruction { /*background: #f9f9f9; border-left: 4px solid #0073aa;*/ border-radius: 8px; padding: 20px; margin: 30px 0 20px; }
.stencil-instruction h2 { margin: 0 0 20px; /*color: #0073aa;*/ }
.instruction-step { margin-bottom: 20px; }
.instruction-step h3 { margin-bottom: 8px; font-size: 18px; }
.instruction-step ul, .instruction-step ol { margin: 5px 0 10px 20px; padding-left: 0; }
.instruction-step li { margin-bottom: 4px; }
.instruction-tips { background: #fff8e1; border-radius: 6px; padding: 20px 30px; margin: 20px 0; }
.instruction-tips h3 { margin-top: 0; color: #b8860b; }
.stencil-cta { background: #f0f8ff; border-left: 4px solid #0073aa; padding: 12px; border-radius: 4px; margin-top: 15px; font-weight: 500; }