body {
    margin-top: 80px !important;
}

.report-card h2 {
    font-weight: 800;
    letter-spacing: -0.5px;
}

.card {
    border-radius: 14px;
    border: 1px solid #e6ebf1;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
    background-color: #ffffff;
}

.card-title {
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* ---------- BADGES ---------- */

.badge-grade {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    color: #fff;
    border-radius: 10px;
    font-size: 1.1rem;
}

.badge-pill-soft {
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 600;
}

.badge-atm {
    background: #e6f7f1;
    color: #067a5f;
}

.badge-risk {
    background: #fff3cd;
    color: #8a6d00;
}

/* ---------- QUALITY SCORE ---------- */

.quality-score {
    font-size: 3.2rem;
    font-weight: 800;
}

.score-ring {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: conic-gradient(#3bb77e var(--score-percent, 0%), #e9ecef 0);
    display: flex;
    align-items: center;
    justify-content: center;
}

.score-ring-inner {
    width: 95px;
    height: 95px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-weight: 700;
}

/* ---------- LIST COLORS ---------- */

.list-strength li {
    color: #067a5f;
}

.list-weak li {
    color: #b45309;
}

/* ---------- PROGRESS ---------- */

.progress {
    height: 10px;
    border-radius: 8px;
    background: #edf0f4;
}

.progress-bar {
    border-radius: 8px;
    background: #f4b400;
}

/* ---------- DIVIDERS ---------- */

.section-divider {
    height: 1px;
    background: #e6ebf1;
    margin: 1rem 0;
}

/* ---------- UTIL ---------- */

.text-soft {
    color: #64748b;
}

.score-ring[data-grade="high"] {
    background: conic-gradient(#22c55e var(--score-percent), #e9ecef 0);
}

.score-ring[data-grade="mid"] {
    background: conic-gradient(#facc15 var(--score-percent), #e9ecef 0);
}

.score-ring[data-grade="low"] {
    background: conic-gradient(#ef4444 var(--score-percent), #e9ecef 0);
}

.media-panel {
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(16, 24, 40, 0.08);
    box-shadow: 0 10px 25px rgba(16, 24, 40, 0.06);
    padding: 14px;
}

.media-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(16, 24, 40, 0.6);
    margin-bottom: 10px;
}

.media-thumb {
    border-radius: 14px;
    border: 1px solid rgba(16, 24, 40, 0.12);
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 10px;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.media-thumb:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(16, 24, 40, 0.12);
}

.media-thumb img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    display: block;
}

.media-label {
    font-size: 12px;
    padding: 6px;
    text-align: center;
    color: rgba(16, 24, 40, 0.65);
    background: #f8fafc;
}

.report-media-modal-img {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(16, 24, 40, 0.1);
}