/* =========================
   GLOBAL
========================= */
body{
    background: #f1f5f9 !important;
    font-family: 'Inter', sans-serif;
    color:#1e293b;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.section-left { display: flex; align-items: center; gap: 12px; }
.section-badge {
    width: 4px; height: 32px; border-radius: 999px;
    background: linear-gradient(to bottom, #991b1b, #b91c1c);
    flex-shrink: 0;
}
.section-title { font-size: 16px; font-weight: 700; color: #0f172a; }
.section-sub   { font-size: 12px; color: #94a3b8; margin-top: 2px; }
.section-count {
    font-size: 12px; font-weight: 600; color: #64748b;
    background: #fff; border: 1px solid #e2e8f0;
    padding: 6px 16px; border-radius: 999px;
}

/* =========================
   TOPBAR
========================= */
.publik-topbar {
    height: 72px;
    padding: 0 36px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* KIRI */
.tb-left { display: flex; align-items: center; gap: 14px; }
.publik-logo { height: 52px; display: flex; align-items: center; }
.publik-logo img { height: 100%; width: auto; object-fit: contain; }
.tb-divider { width: 1px; height: 36px; background: #e2e8f0; }
.brand-name { font-size: 14px; font-weight: 700; color: #0f172a; line-height: 1.3; }
.brand-sub  { font-size: 11px; color: #94a3b8; margin-top: 2px; }

/* TENGAH */
.tb-center {
    position: absolute; left: 50%; transform: translateX(-50%);
    text-align: center;
}
.tb-center-title    { font-size: 13px; font-weight: 700; color: #0f172a; letter-spacing: .3px; }
.tb-center-subtitle { font-size: 11px; color: #94a3b8; margin-top: 2px; }

/* KANAN */
.tb-right { display: flex; align-items: center; gap: 16px; }
.clock-wrap { text-align: right; }
.clock-time {
    font-size: 20px; font-weight: 700;
    color: #0f172a; line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: .5px;
}
.clock-date { font-size: 11px; color: #94a3b8; margin-top: 3px; }

.publik-brand{
    display:flex;
    align-items:flex-end;
    gap:12px;
}

.publik-topbar-right{
    position:absolute;
    right:34px;
}

.publik-brand-text{
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}

.publik-brand-name{
    font-size:16px;
    font-weight:700;
    color:#0f172a;
    line-height:1.2;
    margin-bottom:2px;
}

.publik-brand-sub{
    font-size:12px;
    color:#64748b;
}

/* LOGIN BTN */
.login-btn {
    height: 38px; padding: 0 18px;
    border-radius: 10px; border: none;
    background: linear-gradient(135deg, #7f1d1d, #b91c1c);
    color: #fff; font-size: 13px; font-weight: 600;
    display: flex; align-items: center; gap: 7px;
    text-decoration: none; transition: .2s ease;
    white-space: nowrap;
}
.login-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(185,28,28,.3);
}

/* =========================
   HERO
========================= */
.publik-hero{
    position:relative;
    overflow:hidden;
    padding:70px 40px;
    background:
        linear-gradient(135deg,#7f1d1d 0%, #991b1b 35%, #450a0a 100%);
}

.publik-hero::before{
    content:'';
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(255,255,255,.05);
    top:-220px;
    right:-120px;
}

.publik-hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;  /* sejajar tengah secara vertikal */
    justify-content: space-between;
    gap: 40px;
    width: 100%;
    max-width: 100%;
}

.publik-hero-text {
    flex: 1;
}

.publik-hero h1{
    font-size:30px;
    font-weight:800;
    color:#fff;
    line-height:1.2;
    margin-bottom:18px;
}

.publik-hero p{
    font-size:15px;
    line-height:1.8;
    color:rgba(255,255,255,.78);
    margin-bottom:36px;
}

.publik-hero-stats {
    display: flex;
    flex-direction: row;  /* berjejer horizontal */
    gap: 14px;
    flex-shrink: 0;
}

.publik-hstat {
    min-width: 160px;
    padding: 18px 22px;
    border-radius: 18px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.1);
}

.publik-hstat .num {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
}

.publik-hstat .lbl {
    margin-top: 4px;
    font-size: 12px;
    color: rgba(255,255,255,.72);
}

/* =========================
   MAIN
========================= */
.publik-main{
    padding:12px 34px;
}

.publik-section-title{
    font-size:14px;
    font-weight:700;
    color:#475569;
    margin-bottom:24px;
    display:flex;
    align-items:center;
    gap:8px;
}

/* =========================
   CARD
========================= */
.aspek-card {
    background: #fff;
    border-radius: 20px !important;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #e8edf3 !important;
    transition: .3s cubic-bezier(.4,0,.2,1);
    position: relative;
    box-shadow: 0 2px 8px rgba(15,23,42,.04);
}
.aspek-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 48px rgba(15,23,42,.1) !important;
    border-color: transparent !important;
}

/* ACCENT BAR */
.acard-accent { height: 4px; width: 100%; }

.aspek-img-section {
    height: 190px;
    display: flex; align-items: center; justify-content: center;
    padding: 28px;
    background: linear-gradient(160deg, #f8fafc 0%, #f1f5f9 100%);
    position: relative; overflow: hidden;
}

.aspek-img-section::after {
    content: ''; position: absolute;
    width: 180px; height: 180px; border-radius: 50%;
    background: rgba(255,255,255,.6);
    top: -60px; right: -60px;
}
.aspek-img-section img {
    width: 220px; height: 220px; object-fit: contain;
    transition: .35s ease; position: relative; z-index: 1;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.08));
}

.aspek-card:hover .aspek-img-section img {
    transform: scale(1.08) translateY(-4px);
}

.acard-badge {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    font-size: 10px; font-weight: 700;
    padding: 3px 10px; border-radius: 999px;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(0,0,0,.06);
    color: #475569; letter-spacing: .3px;
}

/* BODY */
.aspek-card-body { padding: 18px 20px 10px; }
.aspek-card-body h5 {
    font-size: 17px; font-weight: 700;
    color: #0f172a; margin-bottom: 8px; line-height: 1.3;
}
.acard-meta { display: flex; align-items: center; gap: 14px; }
.acard-meta-item {
    display: flex; align-items: center; gap: 5px;
    font-size: 12px; color: #64748b;
}
.acard-meta-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #94a3b8; flex-shrink: 0;
}

/* PROGRESS MINI */
.acard-progress { padding: 12px 20px 0; }
.acard-progress-bar {
    height: 4px; background: #f1f5f9;
    border-radius: 999px; overflow: hidden;
}
.acard-progress-fill { height: 100%; border-radius: 999px; transition: .4s ease; }
.acard-progress-meta {
    display: flex; justify-content: space-between;
    font-size: 10px; color: #94a3b8; margin-top: 5px;
}

/* SEPARATOR */
.acard-sep { height: 1px; background: #f1f5f9; margin: 10px 20px 0; }

/* FOOTER */
.aspek-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px 18px;
}
.aspek-footer-label {
    font-size: 12px; font-weight: 600; color: #475569;
    display: flex; align-items: center; gap: 6px;
}
.aspek-footer-arrow {
    width: 34px; height: 34px; border-radius: 50%;
    background: #f1f5f9;
    display: flex; align-items: center; justify-content: center;
    transition: .25s ease; color: #64748b;
}
.aspek-card:hover .aspek-footer-arrow {
    background: #991b1b; color: #fff; transform: translateX(3px);
}

.aspek-card-body{
    padding:22px 22px 10px;
}

.aspek-card-body h5{
    font-size:18px;
    font-weight:700;
    color:#0f172a;
    margin-bottom:10px;
}

.aspek-card-body small{
    font-size:13px;
    color:#64748b;
    display:flex;
    align-items:center;
    gap:6px;
}

.aspek-card-footer{
    padding:18px 22px 22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.aspek-footer-label{
    font-size:13px;
    font-weight:600;
    color:#475569;
}

.aspek-footer-arrow{
    width:40px;
    height:40px;
    border-radius:50%;
    background:#f1f5f9;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.25s ease;
}

.aspek-card:hover .aspek-footer-arrow{
    background:#991b1b;
    color:#fff;
    transform:translateX(3px);
}

/* =========================
   DETAIL
========================= */
#detail-publik{
    padding:0 34px 40px;
}

/* =========================
   FOOTER
========================= */
.publik-footer{
    margin-top:30px;
    padding:26px;
    text-align:center;
    background:#fff;
    border-top:1px solid #e2e8f0;
    font-size:13px;
    color:#64748b;
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:768px){

    .publik-topbar { padding: 0 18px; }
    .tb-center { display: none; }
    .brand-name, .brand-sub { display: none; }
    .clock-date { display: none; }
    .clock-time { font-size: 15px; }

    .publik-brand-name,
    .publik-brand-sub{
        display:none;
    }

    .publik-logo{
        width:160px;
    }

    .publik-hero-inner {
        flex-direction: column;
    }
    .publik-hero-stats {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .publik-hstat {
        min-width: 140px;
    }

    .publik-hero{
        padding:50px 24px;
    }

    .publik-hero h1{
        font-size:30px;
    }

    .publik-main,
    #detail-publik{
        padding-left:20px;
        padding-right:20px;
    }
}
/* =========================
   DETAIL ASPEK
========================= */

.detail-wrapper{
    margin-top:10px;
}
.detail-hero{
    position:relative;
    overflow:hidden;
    border-radius:28px;
    padding:38px;
    background:
        linear-gradient(135deg,#7f1d1d 0%,#991b1b 40%,#450a0a 100%);
    color:#fff;
    margin-bottom:24px;
}
.detail-hero::before{
    content:'';
    position:absolute;
    width:380px;
    height:380px;
    border-radius:50%;
    background:rgba(255,255,255,.05);
    top:-180px;
    right:-120px;
}
.detail-hero h2{
    font-size:32px;
    font-weight:800;
    margin-bottom:10px;
    position:relative;
    z-index:2;
}
.detail-hero p{
    margin:0;
    font-size:14px;
    color:rgba(255,255,255,.78);
    position:relative;
    z-index:2;
}
.detail-stat-value{
    font-size:34px;
    font-weight:800;
    color:#0f172a;
    line-height:1;
}
.detail-panel{
    border:none;
    border-radius:24px;
    background:#fff;

    box-shadow:
        0 4px 14px rgba(15,23,42,.04),
        0 1px 2px rgba(15,23,42,.04);
}

.detail-panel .card-body{
    padding:28px;
}

.detail-panel-title{
    font-size:16px;
    font-weight:700;
    color:#0f172a;

    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:22px;
}

/* PROGRESS */
.progress-modern{
    height:10px;
    border-radius:999px;
    background:#e2e8f0;
    overflow:hidden;
}

.progress-modern-bar{
    height:100%;
    border-radius:999px;
    transition:width .4s ease;
}

.progress-info{
    background:#f8fafc;
    border-radius:18px;
    padding:18px;
    margin-bottom:16px;
}

/* INDIKATOR */
.ind-modern{
    background:#f8fafc;
    border-radius:18px;
    padding:18px;
    margin-bottom:14px;
    transition:.25s ease;
}

.ind-modern:hover{
    background:#f1f5f9;
    transform:translateX(4px);
}

.ind-modern-title{
    font-size:12px;
    font-weight:700;
    color:#0f172a;
    margin-bottom:12px;
}

.ind-modern-meta{
    display:flex;
    justify-content:space-between;
    margin-top:8px;
}

.ind-modern-meta small{
    font-size:10px;
    color:#64748b;
}

.subindikator-list{
    max-height: 520px;
    overflow-y: auto;
    padding-right: 4px;
}

.ind-item{
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 10px;
    transition: .2s ease;
}

.ind-item:hover{
    transform: translateY(-2px);
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(15,23,42,.06);
}

.indikator-click{
    cursor:pointer;
    transition:.2s ease;
}

.indikator-click:hover{
    transform:translateY(-2px);
}

.active-indikator{
    border:2px solid #3b82f6;
    background:#eff6ff;
}

.subindikator-click{
    cursor:pointer;
    transition:.2s ease;
}

.subindikator-click:hover{
    transform:translateY(-2px);
    border-color:#93c5fd;
}
.active-sub{
    border:2px solid #3b82f6 !important;
    background:#eff6ff;
}

.detail-item{
    border:1px solid #e2e8f0;
    border-radius:12px;
    padding:12px;
    margin-bottom:10px;
    background:#fff;
}

#detail-penilaian{
    font-size: 11px;
}

#detail-penilaian h5{
    font-size: 15px;
}

#detail-penilaian .text-muted{
    font-size: 11px;
}

#detail-penilaian .detail-item{
    padding: 10px;
    border-radius: 10px;
}

#detail-penilaian .font-weight-bold{
    font-size: 12px;
}

#detail-penilaian .badge{
    font-size: 10px;
    padding: 4px 8px;
}

.dv-p-val-wrap{
    display:flex;
    align-items:center;
    gap:4px;
    flex-wrap:wrap;
}

.dv-p-unit{
    font-size:11px;
    color:#64748b;
    font-weight:500;
}

.dv-p-unit-prefix{
    font-size:11px;
    color:#64748b;
    font-weight:600;
}

.dv-score-unit{
    font-size:14px;
    margin-left:4px;
    font-weight:600;
    color:#64748b;
}

.dv-score-unit-prefix{
    font-size:16px;
    margin-right:4px;
    font-weight:700;
    color:#334155;
}


/* ============================================================
   DETAIL VIEW — PROFESSIONAL UI
   ============================================================ */

/* ---------- filter bar ---------- */
.dv-filter-bar {
    padding: 0px 10px 0;
}

.dv-filter-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 10px 15px;
    box-shadow: 0 2px 8px rgba(15,23,42,.04);
}

.dv-filter-label {
    font-size: 13px;
    font-weight: 700;
    color: #475569;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.dv-filter-label i {
    color: #94a3b8;
}

.dv-filter-select {
    border: none;
    outline: none;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    background: transparent;
    cursor: pointer;
    padding: 0;
}

/* ============================================================
   GENERIC CARD
   ============================================================ */

.dv-card {
    background: #fff;
    border-radius: 24px;
    border: 1px solid #e8edf3;
    box-shadow:
        0 6px 24px rgba(15,23,42,.04),
        0 1px 2px rgba(15,23,42,.03);
    overflow: hidden;
}

.dv-card-body {
    padding: 26px;
}

.dv-card-title {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    letter-spacing: -.2px;
}

.dv-card-title i {
    font-size: 17px;
    color: #94a3b8;
}

.dv-progress-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

/* ============================================================
   INDIKATOR SECTION
   ============================================================ */

.dv-ind-section {
    margin-bottom: 4px;
}

.dv-ind-divider {
    height: 1px;
    background: #eef2f7;
    margin: 28px 0;
}

.dv-ind-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(
        180deg,
        #fcfcfd 0%,
        #f8fafc 100%
    );
    border: 1px solid #edf2f7;
    border-left: 4px solid #991b1b;
    border-radius: 16px;
    margin-bottom: 16px;
}

.dv-ind-num {
    font-size: 11px;
    font-weight: 800;
    color: #b91c1c;
    background: #fee2e2;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: .3px;
}

.dv-ind-name {
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
    flex: 1;
    min-width: 0;
    line-height: 1.5;
}

.dv-ind-bar-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.dv-ind-bar {
    width: 110px;
    height: 7px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.dv-ind-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .4s ease;
}

.dv-ind-pct {
    font-size: 12px;
    font-weight: 800;
    color: #64748b;
    min-width: 36px;
    text-align: right;
}

/* ============================================================
   SUB GRID
   ============================================================ */

.dv-sub-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 4px;
}

/* ============================================================
   SUB CARD ACTIVE
   ============================================================ */

.dv-sub-card {
    position: relative;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #fbfdff 100%
    );
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
    box-shadow:
        0 4px 14px rgba(15,23,42,.04),
        0 1px 2px rgba(15,23,42,.03);
}

.dv-sub-card:hover {
    transform: translateY(-5px);
    border-color: #cbd5e1;
    box-shadow:
        0 18px 34px rgba(15,23,42,.10),
        0 2px 6px rgba(15,23,42,.05);
}

/* accent top */
.dv-sub-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(
        90deg,
        #991b1b 0%,
        #dc2626 45%,
        #ef4444 100%
    );
}

/* ============================================================
   SUB HEADER
   ============================================================ */

.dv-sub-head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid #eef2f7;
    background:
        radial-gradient(circle at top right,
            rgba(239,68,68,.05),
            transparent 45%);
}

.dv-sub-name {
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.65;
    min-height: 44px;
}

.dv-sub-score {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
}

.dv-score-left {
    display: flex;
    flex-direction: column;
}

.dv-score-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 4px;
}

.dv-score-big {
    font-size: 36px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -1.5px;
}

/* score colors */
.dv-score-good {
    color: #16a34a;
}

.dv-score-mid {
    color: #d97706;
}

.dv-score-low {
    color: #dc2626;
}

.dv-score-empty {
    color: #94a3b8;
}

/* ============================================================
   SUB BODY
   ============================================================ */

.dv-sub-body {
    padding: 10px 18px 14px;
}

/* ============================================================
   PENGUKURAN ROW
   ============================================================ */

.dv-p-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px dashed #e2e8f0;
}

.dv-p-row:last-child {
    border-bottom: none;
}

.dv-p-name {
    font-size: 12px;
    color: #475569;
    flex: 1;
    min-width: 0;
    line-height: 1.55;
}

.dv-p-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.dv-p-val {
    font-size: 13px;
    font-weight: 800;
    color: #0f172a;
}

/* ============================================================
   STATUS DOT
   ============================================================ */

.dv-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.dv-dot-green {
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34,197,94,.12);
}

.dv-dot-gray {
    background: #94a3b8;
}

/* ============================================================
   EMPTY TEXT
   ============================================================ */

.dv-no-item {
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
    padding: 14px 0;
}

/* ============================================================
   PILL
   ============================================================ */

.dv-pill {
    font-size: 11px;
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid transparent;
}

.dv-pill-green {
    background: #dcfce7;
    color: #15803d;
}

.dv-pill-amber {
    background: #fef3c7;
    color: #b45309;
}

.dv-pill-red {
    background: #fee2e2;
    color: #b91c1c;
}

.dv-pill-gray {
    background: #f1f5f9;
    color: #64748b;
    border-color: #e2e8f0;
}

/* ============================================================
   NONAKTIF TOGGLE
   ============================================================ */

.dv-na-toggle{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:12px 16px;
    margin-top:14px;

    border:1px solid #e2e8f0;
    border-radius:14px;

    background:#f8fafc;

    cursor:pointer;
    transition:.2s ease;
}

.dv-na-toggle:hover{
    background:#f1f5f9;
    border-color:#cbd5e1;
}

.dv-na-toggle span{
    font-size:12px;
    font-weight:700;
    color:#64748b;
}

.dv-na-arr{
    transition:transform .25s ease;
}

/* rotate icon saat collapse open */
.dv-na-toggle[aria-expanded="true"] .dv-na-arr{
    transform:rotate(180deg);
}

/* ============================================================
   NONAKTIF LIST
   ============================================================ */
.dv-na-list{
    display:none;

    margin-top:12px;

    border:1px solid #e2e8f0;
    border-radius:16px;

    overflow:hidden;

    background:#fff;
}


.dv-na-list.dv-na-list-open {
    display: block;
}

.dv-na-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #f1f5f9;
    opacity: .62;
    transition: opacity .18s ease;
}

.dv-na-row:last-child {
    border-bottom: none;
}

.dv-na-row:hover {
    opacity: .82;
}

.dv-na-left {
    width: 210px;
    flex-shrink: 0;
    padding: 13px 14px;
    background: #f8fafc;
    border-right: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.dv-na-items {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dv-na-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border-bottom: 1px solid #f1f5f9;
}

.dv-na-item:last-child {
    border-bottom: none;
}

.dv-score-unit-prefix {
    font-size: 16px;
    font-weight: 800;
    color: #64748b;
    margin-bottom: 6px;
}

.dv-score-unit {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #94a3b8;
    margin-bottom: 5px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 992px) {

    .dv-sub-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

}

@media (max-width: 768px) {

    .dv-filter-bar {
        padding: 14px 16px 0;
    }

    .dv-card-body {
        padding: 20px;
    }

    .dv-ind-header {
        flex-wrap: wrap;
    }

    .dv-ind-bar-wrap {
        width: 100%;
        justify-content: flex-end;
    }

    .dv-na-left {
        width: 150px;
    }

}

@media (max-width: 576px) {

    .dv-sub-grid {
        grid-template-columns: 1fr;
    }

    .dv-card-body {
        padding: 18px;
    }

    .dv-sub-head {
        padding: 16px;
    }

    .dv-sub-body {
        padding: 10px 16px 14px;
    }

    .dv-score-big {
        font-size: 30px;
    }

    .dv-na-row {
        flex-direction: column;
    }

    .dv-na-left {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #f1f5f9;
    }

}