:root {
    --color-optimal: #198754;
    --color-normal: #20c997;
    --color-borderline: #ffc107;
    --color-high: #fd7e14;
    --color-critical: #dc3545;
}

body {
    background-color: #f8f9fa;
}

.navbar-brand i {
    margin-right: 4px;
}

/* Score Card */
.score-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.score-number {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
}

.score-good { color: var(--color-optimal); }
.score-ok { color: var(--color-borderline); }
.score-bad { color: var(--color-critical); }

.score-grade {
    font-size: 1.5rem;
    font-weight: 600;
    color: #6c757d;
}

/* Status Badges */
.status-optimal { background-color: var(--color-optimal); }
.status-normal { background-color: var(--color-normal); }
.status-borderline { background-color: var(--color-borderline); color: #212529; }
.status-high { background-color: var(--color-high); }
.status-critical { background-color: var(--color-critical); }

/* Dropzone */
.dropzone {
    border: 2px dashed #adb5bd;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}

.dropzone:hover,
.dropzone.drag-over {
    border-color: #0d6efd;
    background-color: #e7f1ff;
}

/* Step numbers for portal guides */
.step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background-color: #0d6efd;
    color: white;
    font-weight: 600;
    font-size: 1rem;
}

/* Trend chart */
#trend-chart {
    max-height: 400px;
}

/* Interpretation text */
.interpretation-text {
    white-space: pre-line;
    line-height: 1.6;
}

/* Category cards responsive */
@media (max-width: 768px) {
    .score-number {
        font-size: 3rem;
    }
}

/* Table tweaks */
.table th {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #6c757d;
}