:root {
    --mooring-line-calculator-primary: #096D6D;
    --mooring-line-calculator-secondary: #07385D;
    --mooring-line-calculator-accent: #1A202C;
    --mooring-line-calculator-warning: #FFB74D;
    --mooring-line-calculator-danger: #E57373;
    --mooring-line-calculator-success: #81C784;
    --mooring-line-calculator-text-color: #1A202C;
    --mooring-line-calculator-light-bg: #FFFFFF;
    --mooring-line-calculator-nylon: #4FC3F7;
    --mooring-line-calculator-polyester: #FFB74D;
    --mooring-line-calculator-spectra: #BA68C8;
}

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

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

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

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

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

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

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

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

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

.mooring-line-calculator-header h4 { 
    font-weight: 600; 
    margin: 0; 
}

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

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

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

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

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

.mooring-line-calculator-btn-loading { 
    position: relative; 
    color: transparent !important; 
}

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

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

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

.mooring-line-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; 
}

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

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

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

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

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

.safety-markers span { 
    font-size: 0.7rem; 
    font-weight: 600; 
    color: var(--mooring-line-calculator-text-color); 
}

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

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

#mooring-line-calculator-message { border-radius: 0.5rem; border: none; }

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

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

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

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

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

.material-nylon { 
    background: linear-gradient(135deg, #e3f2fd 0%, var(--mooring-line-calculator-nylon) 100%); 
    border-left: 4px solid var(--mooring-line-calculator-nylon);
}
.material-polyester { 
    background: linear-gradient(135deg, #fff3e0 0%, var(--mooring-line-calculator-polyester) 100%); 
    border-left: 4px solid var(--mooring-line-calculator-polyester);
}
.material-spectra { 
    background: linear-gradient(135deg, #f3e5f5 0%, var(--mooring-line-calculator-spectra) 100%); 
    border-left: 4px solid var(--mooring-line-calculator-spectra);
}
.material-dyneema { 
    background: linear-gradient(135deg, #e8f5e8 0%, #4CAF50 100%); 
    border-left: 4px solid #4CAF50;
}

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