/*======================== BGTR Module Styles ========================*/
.bgtr-component-container {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
}

.bgtr-component {
    margin-bottom: 12px;
}

.bgtr-space10 {
    height: 10px;
}
.bgtr-space20 {
    height: 20px;
}

/* Dropdown (waveform selector) */
.bgtr-component .dropdown {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.bgtr-component .dropdown label {
    font-size: 12px;
    font-weight: bold;
    color: #999;
    margin-bottom: 4px;
}
.bgtr-component .dropdown select {
    background: #111;
    color: #00ff88;
    border: 1px solid #333;
    border-radius: 4px;
    font-size: 12px;
    padding: 3px 5px;
    outline: none;
}

/* Sliders (frequency, tone, resonance, attack, release) */
.bgtr-component .slider-pot {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.bgtr-component .slider-pot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 6px;
}
.bgtr-component .slider-pot-header label {
    font-size: 12px;
    font-weight: bold;
    color: #999;
    margin: 0;
}
.bgtr-component .slider-pot-header .value-display {
    font-size: 12px;
    font-family: monospace;
    color: #00ff88;
    min-width: 40px;
    text-align: right;
}

.bgtr-component input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: #030303;
    border-radius: 3px;
    outline: none;
    margin: 0;
}

/* Slider thumbs */
.bgtr-component input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #f5f10b;
    border: 2px solid #f5f10b;
    cursor: pointer;
    margin-top: -4px;
    transition: background 0.2s;
}
.bgtr-component input[type=range]::-webkit-slider-thumb:hover {
    background: #33ff99;
}
.bgtr-component input[type=range]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #00ff88;
    border: 2px solid #00ff88;
    cursor: pointer;
    transition: background 0.2s;
}
.bgtr-component input[type=range]::-moz-range-thumb:hover {
    background: #33ff99;
}

/* Test Button */
.bgtr-test-btn {
    width: 100%;
    padding: 8px;
    border: none;
    border-radius: 6px;
    background: #111;
    color: #00ff88;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.bgtr-test-btn:hover {
    background: #00ff88;
    color: #111;
}

/*======================== CV INPUTS ===================*/
.bgtr-cv-field {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5px;
    height: 25px;
    border: 1px solid #444;
    border-radius: 4px;
    background: #111;
    font-size: 12px;
    color: #999;
}

.bgtr-cv-field input {
    background: transparent;
    border: none;
    outline: none;
    font-size: 12px;
    color: #ccc;
    width: 100%;
    font-weight: bold;
}

.bgtr-cv-field input::placeholder {
    color: #666;
    font-weight: normal;
}

/* Connection indicator dot */
.bgtr-cv-connection-indicator {
    width: 8px;
    height: 8px;
    background: gray;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 6px;
}

.bgtr-cv-connection-indicator.connected {
    background: #06F838; /* bright green for valid connection */
    box-shadow: 0 0 4px rgba(6, 248, 56, 0.6);
}

.bgtr-cv-connection-indicator.invalid {
    background: red;
    box-shadow: 0 0 4px rgba(255, 0, 0, 0.6);
}

.vcf-note-section {
  margin-top: 10px;
  text-align: left;
}

.vcf-note-text {
  font-size: 11px;
  color: #00ff88;
  font-style: italic;
  line-height: 15px;
}