<style>
        :root {
            --bg: #f5f6ff;
            --card: #ffffff;
            --muted: #7a7f98;
            --text: #1f2340;
            --primary: #6c63ff;
            --primary-soft: rgba(108, 99, 255, .10);
            --success: #22c55e;
            --success-soft: rgba(34, 197, 94, .12);
            --info: #38bdf8;
            --info-soft: rgba(56, 189, 248, .12);
            --warning: #f59e0b;
            --warning-soft: rgba(245, 158, 11, .12);
            --border: rgba(103, 116, 172, .14);
            --shadow: 0 14px 40px rgba(30, 41, 59, .08);
            --radius: 24px;
        }

        * { box-sizing: border-box; }
        body {
            font-family: 'Poppins', sans-serif;
            background: var(--bg);
            color: var(--text);
        }

        .page-wrap { min-height: 100vh; }

        .topbar {
            background: rgba(255,255,255,.75);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(120, 125, 155, .12);
        }

        .brand-badge {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            display: grid;
            place-items: center;
            background: linear-gradient(135deg, var(--primary), #8b5cf6);
            color: #fff;
            box-shadow: 0 10px 24px rgba(108, 99, 255, .28);
        }

        .sidebar-card,
        .main-card,
        .metric-card,
        .detail-card,
        .chart-card,
        .delivery-card,
        .mini-card {
            background: var(--card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
        }

        .sidebar-card {
            position: sticky;
            top: 88px;
        }

        .soft-pill {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            padding: .45rem .8rem;
            border-radius: 999px;
            background: #f3f4ff;
            color: var(--primary);
            font-size: .82rem;
            font-weight: 600;
        }

        .avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #fff;
            box-shadow: 0 10px 22px rgba(15, 23, 42, .1);
        }

        .metric-card {
            padding: 18px;
            height: 100%;
        }

        .metric-title {
            font-size: .88rem;
            color: var(--muted);
            margin-bottom: .2rem;
        }

        .metric-value {
            font-size: 1.6rem;
            font-weight: 700;
            line-height: 1.1;
            margin-bottom: .25rem;
        }

        .metric-subtext {
            font-size: .82rem;
            color: var(--muted);
        }

        .section-title {
            font-size: .95rem;
            font-weight: 700;
            letter-spacing: .2px;
            margin-bottom: .95rem;
        }

        .label-sm {
            font-size: .78rem;
            color: var(--muted);
        }

        .campaign-thumb {
            width: 100%;
            height: 190px;
            object-fit: cover;
            border-radius: 20px;
            border: 1px solid rgba(0,0,0,.06);
            background: linear-gradient(135deg, #f7f7ff, #edf0ff);
        }

        .stat-badge {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            padding: .45rem .7rem;
            border-radius: 999px;
            font-size: .8rem;
            font-weight: 600;
        }

        .chart-wrap {
            height: 290px;
            position: relative;
        }

        .progress-ring {
            width: 148px;
            height: 148px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background:
                radial-gradient(closest-side, #fff 79%, transparent 80% 100%),
                conic-gradient(var(--primary) <?php echo (int)$delivery; ?>%, #e9ebff 0);
            margin: 0 auto;
        }

        .progress-ring .ring-value {
            text-align: center;
            font-weight: 700;
        }

        .progress-ring .ring-value span {
            display: block;
            font-size: 2rem;
            line-height: 1;
        }

        .progress-ring .ring-value small {
            color: var(--muted);
            font-size: .78rem;
        }

        .nav-pills .nav-link {
            border-radius: 999px;
            color: var(--muted);
            font-weight: 600;
            padding: .5rem .95rem;
        }

        .nav-pills .nav-link.active {
            background: var(--primary);
            color: #fff;
        }

        .icon-soft {
            width: 38px;
            height: 38px;
            border-radius: 12px;
            display: grid;
            place-items: center;
            background: #f5f7ff;
            color: var(--primary);
            flex: 0 0 auto;
        }

        .mini-card { padding: 16px; }

        .text-muted-2 { color: var(--muted) !important; }

        .divider {
            height: 1px;
            background: rgba(99, 102, 241, .10);
            margin: 1rem 0;
        }

        .btn-soft {
            background: #f4f5ff;
            color: var(--primary);
            border: 1px solid rgba(108, 99, 255, .12);
            font-weight: 600;
        }

        .btn-soft:hover {
            background: #ebeefe;
            color: var(--primary);
        }

        @media (max-width: 991.98px) {
            .sidebar-card { position: static; }
        }

        @media (max-width: 575.98px) {
            .metric-value { font-size: 1.35rem; }
            .chart-wrap { height: 240px; }
        }
        
        .delivery-progress{

    position:relative;

    width:170px;

    height:170px;

    margin:20px auto 35px;

}

.progress-svg{

    transform:rotate(-90deg);

}

.progress-bg{

    fill:none;

    stroke:#ECECFA;

    stroke-width:12;

}

.progress-bar-circle{

    fill:none;

    stroke:#6528F7;

    stroke-width:12;

    stroke-linecap:round;

    stroke-dasharray:364;

    stroke-dashoffset:calc(
        364 - (364 * var(--percent))/100
    );

}

.progress-content{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    text-align:center;

}

.progress-content i{

    color:#6528F7;

    font-size:28px;

}

.progress-content h6{

    margin-top:12px;

    font-size:18px;

    font-weight:600;

    color:#6528F7;

}

.metric-card{
    background:#fff;
    border:1px solid #ECEEF5;
    border-radius:18px;
    padding:28px;
    height:100%;
    transition:.25s;
}

.metric-card:hover{
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}


.metric-title{
    font-size:18px;
    font-weight:600;
    color:#2E2E38;
}

.metric-value{
    font-size:52px;
    font-weight:700;
    line-height:1;
    color:#111827;
    margin-bottom:18px;
}

.metric-growth{
    display:flex;
    align-items:center;
    gap:6px;
    color:#19B84A;
    font-size:20px;
    font-weight:600;
}

.metric-growth i{
    font-size:18px;
}


.metric-header{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:18px;
}

.metric-icon{
    width:38px;
    height:38px;
    min-width:38px;
    min-height:38px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;
}

.metric-icon i{
    color:#fff;
    font-size:15px;
}

.metric-icon.purple{
    background:#6B2EF4;
}

.metric-icon.green{
    background:#21C45A;
}

.metric-icon.blue{
    background:#2E7DF7;
}
    </style>