:root {
    --ccc-primary: #096D6D;
    --ccc-secondary: #07385D;
    --ccc-accent: #1A202C;
    --ccc-warning: #FFB74D;
    --ccc-danger: #E57373;
    --ccc-success: #81C784;
    --ccc-text-color: #1A202C;
    --ccc-light-bg: #FFFFFF;
    --ccc-stainless: #B0BEC5;
    --ccc-aluminum: #E0E0E0;
    --ccc-bronze: #CD7F32;
}

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

.ccc-container .form-label.fw-bold {
    font-weight: 600 !important;
    color: var(--ccc-text-color) !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
    font-size: 0.875rem !important;
}

.ccc-container .input-group {
    margin-bottom: 0.5rem !important;
}

.ccc-container .input-group-sm {
    margin-bottom: 0.25rem !important;
}

.ccc-container .input-group .form-control,
.ccc-container .input-group .input-group-text {
    height: calc(1.8125rem + 2px) !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.875rem !important;
    border: 1px solid #d1d5db !important;
}

.ccc-container .input-group .form-control {
    border-radius: 0.375rem 0 0 0.375rem !important;
}

.ccc-container .input-group .input-group-text {
    background-color: #e9ecef !important;
    border-radius: 0 0.375rem 0.375rem 0 !important;
}

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

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

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

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

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

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

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

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

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

.ccc-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: ccc-spin 0.8s linear infinite; 
}

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

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

.ccc-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; 
}

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

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

.ccc-visualization-container { border: 1px solid #dee2e6; }

.ccc-scale { border: 1px solid #e9ecef; }
.ccc-meter-bar { 
    background: linear-gradient(90deg, var(--ccc-danger) 0%, var(--ccc-warning) 25%, var(--ccc-success) 50%, #81C784 75%, var(--ccc-primary) 100%); 
}

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

.ccc-capacity-markers span { 
    font-size: 0.7rem; 
    font-weight: 600; 
    color: var(--ccc-text-color); 
}

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

.ccc-container .form-text { 
    font-size: 0.8rem !important; 
    color: #6b7280 !important;
    margin-top: 0.25rem !important;
}

#ccc-message { border-radius: 0.5rem; border: none; }

.ccc-safety-danger { color: var(--ccc-danger); }
.ccc-safety-warning { color: var(--ccc-warning); }
.ccc-safety-adequate { color: #FFB74D; }
.ccc-safety-good { color: var(--ccc-success); }
.ccc-safety-excellent { color: var(--ccc-primary); }

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

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

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

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

.ccc-material-standard_horn { 
    background: linear-gradient(135deg, #f5f5f5 0%, var(--ccc-stainless) 100%); 
    border-left: 4px solid var(--ccc-stainless);
}
.ccc-material-heavy_duty { 
    background: linear-gradient(135deg, #e0e0e0 0%, #757575 100%); 
    border-left: 4px solid #757575;
}
.ccc-material-commercial { 
    background: linear-gradient(135deg, #d7ccc8 0%, #5d4037 100%); 
    border-left: 4px solid #5d4037;
}
.ccc-material-stainless_steel { 
    background: linear-gradient(135deg, #e3f2fd 0%, var(--ccc-stainless) 100%); 
    border-left: 4px solid var(--ccc-stainless);
}
.ccc-material-aluminum { 
    background: linear-gradient(135deg, #fafafa 0%, var(--ccc-aluminum) 100%); 
    border-left: 4px solid var(--ccc-aluminum);
}
.ccc-material-bronze { 
    background: linear-gradient(135deg, #fff3e0 0%, var(--ccc-bronze) 100%); 
    border-left: 4px solid var(--ccc-bronze);
}

.ccc-material-recommended {
    border: 2px solid var(--ccc-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; 
    }
    .ccc-output-value { font-size: 1.75rem !important; }
}
@media (min-width: 768px) { 
    .ccc-output-value { font-size: 2.5rem; } 
}