:root {
    --electronics-mount-primary: #096D6D;
    --electronics-mount-secondary: #07385D;
    --electronics-mount-accent: #1A202C;
    --electronics-mount-warning: #FFB74D;
    --electronics-mount-danger: #E57373;
    --electronics-mount-text-color: #1A202C;
    --electronics-mount-light-bg: #FFFFFF;
    --electronics-mount-cool: #4FC3F7;
    --electronics-mount-warm: #FFB74D;
    --electronics-mount-hot: #E57373;
}

.electronics-mount-calculator-container { 
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    color: var(--electronics-mount-text-color); 
}

.electronics-mount-card { 
    border: none; 
    border-radius: 12px; 
    overflow: hidden; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
}

.electronics-mount-header { 
    background: linear-gradient(135deg, var(--electronics-mount-secondary) 0%, var(--electronics-mount-primary) 100%); 
    color: #fff !important; 
    padding-left: 1.5rem; 
    border-bottom: 3px solid var(--electronics-mount-accent); 
}

.electronics-mount-header h4 { 
    font-weight: 600; 
    margin: 0; 
}

.form-control, .form-select { 
    border: 1px solid #d1d5db; 
    border-radius: 0.375rem; 
    transition: all 0.2s ease; 
}

.form-control:focus, .form-select:focus { 
    border-color: var(--electronics-mount-primary); 
    box-shadow: 0 0 0 0.2rem rgba(9, 109, 109, 0.25); 
}

.input-group-sm .form-control, .input-group-sm .form-select { 
    height: calc(1.8125rem + 2px); 
    padding: 0.375rem 0.75rem; 
    font-size: 0.875rem; 
}

.input-group-text { 
    background-color: #e9ecef; 
    border: 1px solid #d1d5db; 
}

.electronics-mount-btn-primary { 
    background: linear-gradient(135deg, var(--electronics-mount-primary) 0%, var(--electronics-mount-secondary) 100%); 
    border: none; 
    color: #fff !important; 
    transition: all 0.3s ease; 
    padding: 0.75rem 2rem; 
    font-weight: 600; 
    border-radius: 0.5rem; 
}

.electronics-mount-btn-primary:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 6px 20px rgba(7, 56, 93, 0.4); 
    color: #fff !important; 
}

.electronics-mount-btn-primary:disabled { 
    opacity: 0.7; 
    cursor: not-allowed; 
    transform: none; 
}

.electronics-mount-btn-loading { 
    position: relative; 
    color: transparent !important; 
}

.electronics-mount-btn-loading::after { 
    content: ''; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    width: 20px; 
    height: 20px; 
    margin: -10px 0 0 -10px; 
    border: 2px solid #ffffff; 
    border-radius: 50%; 
    border-right-color: transparent; 
    animation: electronics-mount-spin 0.8s linear infinite; 
}

@keyframes electronics-mount-spin { 
    to { transform: rotate(360deg); } 
}

.electronics-mount-text-primary { color: var(--electronics-mount-primary) !important; }
.electronics-mount-text-secondary { color: var(--electronics-mount-secondary) !important; }
.electronics-mount-text-accent { color: var(--electronics-mount-accent) !important; }

.electronics-mount-output-panel { 
    min-height: 100px; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    border-radius: 0.5rem; 
    transition: all 0.3s ease; 
}

.electronics-mount-highlight-panel { 
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); 
    border: 2px solid var(--electronics-mount-primary) !important; 
    box-shadow: 0 4px 15px rgba(9, 109, 109, 0.15); 
}

.electronics-mount-output-value { 
    background: linear-gradient(135deg, var(--electronics-mount-primary) 0%, var(--electronics-mount-secondary) 100%); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    background-clip: text; 
    font-weight: 700 !important; 
}

.temperature-visualization-container { border: 1px solid #dee2e6; }
.vibration-meter-container { border: 1px solid #dee2e6; }

.meter-scale { border: 1px solid #e9ecef; }
.meter-bar { 
    background: linear-gradient(90deg, var(--electronics-mount-cool) 0%, var(--electronics-mount-warm) 50%, var(--electronics-mount-hot) 100%); 
}

.current-temperature { 
    transition: all 0.5s ease; 
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--electronics-mount-primary); 
}

.temperature-markers span, .vibration-markers span { 
    font-size: 0.7rem; 
    font-weight: 600; 
    color: var(--electronics-mount-text-color); 
}

.thermal-chart-container { 
    background: var(--electronics-mount-light-bg); 
    border-radius: 0.5rem; 
    padding: 1rem; 
    border: 1px solid #e9ecef; 
}

.form-text { font-size: 0.8rem; color: #6b7280; }
#electronics-mount-message { border-radius: 0.5rem; border: none; }

.thermal-status-cool { color: var(--electronics-mount-cool); }
.thermal-status-warm { color: var(--electronics-mount-warm); }
.thermal-status-hot { color: var(--electronics-mount-hot); }
.thermal-status-critical { color: var(--electronics-mount-danger); }

.spinner-border.electronics-mount-text-primary { color: var(--electronics-mount-primary) !important; }
.border-bottom { border-color: var(--electronics-mount-primary) !important; }

.mounting-recommendation { 
    border-left: 4px solid var(--electronics-mount-accent); 
    padding-left: 1rem; 
}

.cooling-solution-card {
    transition: all 0.3s ease;
    border: 1px solid #dee2e6;
    background: var(--electronics-mount-light-bg);
}

.cooling-solution-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.cooling-solution-recommended {
    border: 2px solid var(--electronics-mount-primary);
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

@media (max-width: 767.98px) {
    .border-end { 
        border-right: none !important; 
        border-bottom: 1px solid #dee2e6; 
        padding-bottom: 2rem; 
        margin-bottom: 1rem; 
    }
    .electronics-mount-output-value { font-size: 1.75rem !important; }
}
@media (min-width: 768px) { 
    .electronics-mount-output-value { font-size: 2.5rem; } 
}