:root {
    --chain-rope-calculator-primary: #096D6D;
    --chain-rope-calculator-secondary: #07385D;
    --chain-rope-calculator-accent: #1A202C;
    --chain-rope-calculator-warning: #FFB74D;
    --chain-rope-calculator-danger: #E57373;
    --chain-rope-calculator-success: #81C784;
    --chain-rope-calculator-text-color: #1A202C;
    --chain-rope-calculator-light-bg: #FFFFFF;
    --chain-rope-calculator-chain: #78909C;
    --chain-rope-calculator-rope: #8D6E63;
    --chain-rope-calculator-nylon: #4FC3F7;
    --chain-rope-calculator-polyester: #FFB74D;
}

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

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

.chain-rope-calculator-container .input-group {
    margin-bottom: 0.5rem !important;
}

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

.chain-rope-calculator-container .input-group .form-control,
.chain-rope-calculator-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;
}

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

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

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

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

.chain-rope-calculator-header h4 { 
    font-weight: 600; 
    margin: 0; 
}

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

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

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

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

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

.chain-rope-calculator-btn-loading { 
    position: relative; 
    color: transparent !important; 
}

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

@keyframes chain-rope-calculator-spin { 
    to { transform: rotate(360deg); } 
}

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

.chain-rope-calculator-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; 
}

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

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

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

.meter-scale { border: 1px solid #e9ecef; }
.meter-bar { 
    background: linear-gradient(90deg, var(--chain-rope-calculator-danger) 0%, var(--chain-rope-calculator-warning) 50%, var(--chain-rope-calculator-success) 100%); 
}

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

.strength-markers span, .length-markers span { 
    font-size: 0.7rem; 
    font-weight: 600; 
    color: var(--chain-rope-calculator-text-color); 
}

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

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

#chain-rope-calculator-message { border-radius: 0.5rem; border: none; }

.strength-status-weak { color: var(--chain-rope-calculator-danger); }
.strength-status-moderate { color: var(--chain-rope-calculator-warning); }
.strength-status-strong { color: var(--chain-rope-calculator-success); }
.strength-status-excellent { color: var(--chain-rope-calculator-primary); }

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

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

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

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

.material-chain { 
    background: linear-gradient(135deg, #eceff1 0%, var(--chain-rope-calculator-chain) 100%); 
    border-left: 4px solid var(--chain-rope-calculator-chain);
}
.material-nylon { 
    background: linear-gradient(135deg, #e3f2fd 0%, var(--chain-rope-calculator-nylon) 100%); 
    border-left: 4px solid var(--chain-rope-calculator-nylon);
}
.material-polyester { 
    background: linear-gradient(135deg, #fff3e0 0%, var(--chain-rope-calculator-polyester) 100%); 
    border-left: 4px solid var(--chain-rope-calculator-polyester);
}
.material-polypropylene { 
    background: linear-gradient(135deg, #f3e5f5 0%, #ba68c8 100%); 
    border-left: 4px solid #ba68c8;
}

.material-recommended {
    border: 2px solid var(--chain-rope-calculator-primary);
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.chain-size-table th {
    background: linear-gradient(135deg, var(--chain-rope-calculator-primary) 0%, var(--chain-rope-calculator-secondary) 100%);
    color: white;
}

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