.detection-hero-section {
    background: linear-gradient(135deg, #fd7e14 0%, #ffc107 100%);
    min-height: 40vh;
    padding: 80px 0;
    position: relative;
}

.detection-container {
    border-left: 4px solid #fd7e14;
}

.upload-area {
    border: 2px dashed #dee2e6;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

.upload-area:hover {
    border-color: #fd7e14;
    background: #fff3cd;
}

.result-card {
    transition: transform 0.3s ease;
}

.result-card:hover {
    transform: translateY(-2px);
}

.analysis-results {
    font-size: 0.9rem;
}

.modal-content {
    border-radius: 10px;
}

.modal-header {
    border-bottom: 2px solid #dee2e6;
}
.analysis-chart {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    margin-top: 15px;
}

.detection-results {
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
    border-left: 4px solid #2196f3;
}

.confidence-meter {
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin: 5px 0;
}

.confidence-fill {
    height: 100%;
    background: linear-gradient(90deg, #4caf50, #8bc34a);
    transition: width 0.5s ease;
}

.spinner {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}