.user-controls, .custom-controls { display: flex; flex-direction: column; gap: 0.75rem; align-items: center; width: 100%; }
.user-controls label, .custom-controls label { font-size: clamp(0.9rem, 1.6vw, 1rem); font-weight: 600; color: #ffffff; margin-bottom: 0; text-align: left; width: auto; }
label.transaction-control { 
    text-align: center !important; 
    width: 100%; 
    display: flex; 
    justify-content: center; 
    font-size: clamp(0.75rem, 1.3vw, 0.85rem);
    color: #b0b4c2;
    font-weight: 600;
}

.control-group, .checkbox-control-group {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem;
    width: 100%; max-width: 600px; background: #1c1c28; padding: 0.75rem; border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 1rem; box-sizing: border-box;
}
.features-controls .control-group { max-width: 100%; padding: 0.5rem; }

.control-group input[type="range"], .control-group input[type="number"], .control-group span { flex-shrink: 0; }

.control-group input[type="range"],
.features-controls .control-group input[type="range"],
.user-controls input[type="range"],
.custom-controls input[type="range"] {
    flex-grow: 1; max-width: 300px; height: 10px; border-radius: 5px;
    background: linear-gradient(to right, var(--colorLeft, #7f85e4) 0%, var(--colorLeft, #7f85e4) var(--value, 0%), #2c2c46 var(--value, 0%), #2c2c46 100%);
    outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: background 0.3s ease; margin: 0;
}
.control-group input[type="range"]::-moz-range-track,
.features-controls .control-group input[type="range"]::-moz-range-track,
.user-controls input[type="range"]::-moz-range-track,
.custom-controls input[type="range"]::-moz-range-track { background: linear-gradient(to right, var(--colorLeft, #7f85e4) 0%, var(--colorLeft, #7f85e4) var(--value, 0%), #2c2c46 var(--value, 0%), #2c2c46 100%); height: 10px; border-radius: 5px; }
.control-group input[type="range"]::-moz-range-thumb,
.features-controls .control-group input[type="range"]::-moz-range-thumb,
.user-controls input[type="range"]::-moz-range-thumb,
.custom-controls input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #ffffff; border: 2px solid var(--colorLeft, #7f85e4); box-shadow: 0 2px 4px rgba(0,0,0,0.2); cursor: pointer; }
.control-group input[type="range"]::-webkit-slider-thumb,
.features-controls .control-group input[type="range"]::-webkit-slider-thumb,
.user-controls input[type="range"]::-webkit-slider-thumb,
.custom-controls input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #ffffff; border: 2px solid var(--colorLeft, #7f85e4); box-shadow: 0 2px 4px rgba(0,0,0,0.2); cursor: pointer; }

.features-controls .control-group input[type="range"] { max-width: 150px; }

.control-group input[type="number"] { width: 80px; padding: 0.4rem; border: none; border-radius: 6px; background-color: #1c1c28; border: 1px solid #7f85e4; color: #ffffff; font-size: clamp(0.8rem, 1.5vw, 0.9rem); text-align: center; -webkit-appearance: none; -moz-appearance: textfield; appearance: textfield; }
.features-controls .control-group input[type="number"] { width: 60px; }
.control-group span { font-size: clamp(0.9rem, 1.4vw, 1rem); color: #898e9e; white-space: nowrap; }
.control-group .control-description { display: block; width: 100%; text-align: center; margin-top: 5px; font-size: 12px; color: #898e9e; line-height: 1.3; }

.user-controls input[type="range"].dynamic-slider, .custom-controls input[type="range"].dynamic-slider { width: 100px; height: 6px; }
.user-controls input[type="range"].dynamic-slider::-webkit-slider-thumb,
.custom-controls input[type="range"].dynamic-slider::-webkit-slider-thumb,
.user-controls input[type="range"].dynamic-slider::-moz-range-thumb,
.custom-controls input[type="range"].dynamic-slider::-moz-range-thumb { width: 10px; height: 10px; }
.user-controls input[type="range"].dynamic-slider + input[type="number"],
.custom-controls input[type="range"].dynamic-slider + input[type="number"] { width: 50px; font-size: clamp(0.7rem, 1.2vw, 0.8rem); }
.user-controls label:has(+ .control-group input[type="range"].dynamic-slider),
.custom-controls label:has(+ .control-group input[type="range"].dynamic-slider) { font-size: clamp(0.7rem, 1.2vw, 0.7rem); transition: opacity 0.3s ease; }

.user-controls input[type="number"]:focus, .custom-controls input[type="number"]:focus { border-color: #ffffff; outline: none; }
.user-controls input[type="number"]::-webkit-inner-spin-button,
.user-controls input[type="number"]::-webkit-outer-spin-button,
.custom-controls input[type="number"]::-webkit-inner-spin-button,
.custom-controls input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.transaction-control { opacity: 0; transition: opacity 0.3s ease; }
.transaction-control:not(.hidden) { opacity: 1; display: block; }
.control-group.transaction-control:not(.hidden) { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; }

.checkbox-control-group input[type="checkbox"].custom-control-checkbox { width: 16px; height: 16px; border: 2px solid #cccccc; border-radius: 4px; background-color: #2c2c46; margin-right: 0.5rem; vertical-align: middle; position: relative; cursor: pointer; }
.checkbox-control-group input[type="checkbox"].custom-control-checkbox:checked { background-color: #2c2c46; border-color: #cccccc; }
.checkbox-control-group input[type="checkbox"].custom-control-checkbox:checked::after { content: '\2714'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--checkboxColor, #ffffff); font-size: 14px; font-weight: 900; line-height: 1; }
.checkbox-control-group input[type="checkbox"].custom-control-checkbox:disabled { border-color: #707076; opacity: 0.5; cursor: not-allowed; }
.checkbox-control-group label { font-size: clamp(0.9rem, 1.6vw, 1rem); font-weight: 600; color: #ffffff; margin: 0; text-align: left; width: auto; }
.checkbox-control-group span { font-size: clamp(0.9rem, 1.4vw, 1rem); color: #898e9e; white-space: nowrap; }
.checkbox-control-group .control-description { display: block; width: 100%; text-align: center; margin-top: 5px; font-size: 12px; color: #898e9e; line-height: 1.3; }

.custom-controls input[type="checkbox"].custom-control-checkbox { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border: 2px solid #cccccc; border-radius: 4px; background-color: #2c2c46; margin-right: 0.5rem; vertical-align: middle; position: relative; cursor: pointer; }
.custom-controls input[type="checkbox"].custom-control-checkbox:disabled { background-color: #2c2c46; border-color: #707076; opacity: 0.0; cursor: not-allowed; }
.custom-controls input[type="checkbox"].custom-control-checkbox:checked { background-color: #2c2c46; border-color: #cccccc; }
.custom-controls input[type="checkbox"].custom-control-checkbox:checked::after { content: '\2714'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--checkboxColor, #ffffff); font-size: 14px; font-weight: 900; line-height: 1; }

.custom-controls input[type="radio"] { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border: 2px solid #cccccc; border-radius: 50%; background-color: #2c2c46; margin-right: 0.5rem; vertical-align: middle; position: relative; cursor: pointer; }
.custom-controls input[type="radio"]:checked { background-color: #2c2c46; border-color: var(--checkboxColor, #cccccc); }
.custom-controls input[type="radio"]:checked::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: var(--checkboxColor, #cccccc); }
#bau13b_block .custom-controls input[type="radio"] { border-color: var(--checkboxColor, #3a5a40); }
#bau13b_block .custom-controls input[type="radio"]:checked { border-color: var(--checkboxColor, #3a5a40); }
#bau13b_block .custom-controls input[type="radio"]:checked::after { background: var(--checkboxColor, #3a5a40); }