/* ----------------------
       Card common
       ---------------------- */
    .card-dash{
      background:var(--card);
      border: none;
      border-radius:var(--card-radius);
      box-shadow:var(--soft-shadow);
      padding:22px;
      margin-bottom:22px;
    }
    .card-dash .card-title{
      font-weight:600;
      font-size:1.05rem;
      color:#0f1724;
    }
    .small-muted{ color:var(--muted); font-size:0.9rem; }

    /* ----------------------
       Top large layout
       ---------------------- */
    .top-row{ display:grid; grid-template-columns: 1fr 360px; gap:18px; align-items:stretch; margin-bottom:18px;}
    .balance-card{
      display:grid;
      grid-template-columns: 1fr 210px;
      gap:18px;
      align-items:start;
    }

    /* left big chart area */
    .overall-number{
      font-size:34px; font-weight:700; letter-spacing:-0.6px;
      margin-bottom:6px;
    }
    .toggle-pill{
      display:inline-flex; gap:6px; align-items:center;
      background:linear-gradient(180deg,#f6fbff,#eef7ff);
      border-radius:28px; padding:6px; border:1px solid rgba(15,40,60,0.03);
    }
    .toggle-pill button{
      border-radius:20px; padding:8px 20px; font-weight:600; border:none; background:transparent;
      color:#51606a;
    }
    .toggle-pill button.active{
      background:white; box-shadow: 0 1px 6px rgba(15,40,60,0.06); color: #0b6fb2;
    }

    /* right KPI list */
    .kpi-list{ display:flex; flex-direction:column; gap:12px; }
    .kpi-item{
      display:flex; gap:12px; align-items:center; padding:12px; border-radius:12px;
      background: linear-gradient(180deg, rgba(240,248,255,0.9), rgba(245,249,255,0.8));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
    }
    .kpi-item .kpi-label{ font-size:0.9rem; color:var(--muted); }
    .kpi-item .kpi-value{ font-weight:700; font-size:1.05rem; }

    /* ROI card */
    .roi-card{ padding:24px; display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center; }
    .roi-big{ font-size:30px; font-weight:800; }
    .bars-vertical{ width:90%; height:130px; display:flex; gap:12px; align-items:end; justify-content:space-between; }
    .bar-pill{
      width:28px; border-radius:18px; background:#dfe9ef; display:flex; align-items:end; justify-content:center;
      box-shadow: inset 0 -4px rgba(15,40,60,0.03);
    }

    /* small cards row */
    .small-cards{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; margin-top:8px; }
    .mini-chart{ height:64px; width:120px; display:block; }
    .followers-card{ background:linear-gradient(180deg,#ffeef3,#fff7f9); }
    .income-card{ background:linear-gradient(180deg,#f5f3ff,#fbfaff); }
    .balance-mini{ background:linear-gradient(180deg,#e8fffa,#f3fffb); }
.bg-primary-subtle {
    background-color: var(--bs-primary-bg-subtle) !important;
}
    /* marketing + payments row */
    .mid-row{ display:grid; grid-template-columns:470px 1fr; gap:18px;  }
    .marketing-left .gauge-legend{ display:flex; gap:12px; margin-top:8px; align-items:center; }

    /* bottom row */
    .bottom-row{ display:grid; grid-template-columns: 1fr 380px; gap:18px; margin-top:18px; align-items:stretch; }

    /* radar + list */
    .delivery-wrap{ display:flex; gap:18px; align-items:center; }
    .radar-canvas{ width:380px; height:320px; }

    /* mini layout touches */
    .muted-pill{ background:rgba(15,40,60,0.05); padding:6px 10px; border-radius:999px; font-size:0.85rem; color:#0f1724; }
    .dot{ height:12px; width:12px; border-radius:999px; display:inline-block; margin-right:8px; }

    /* small utilities */
    .right-align{ text-align:right; }
    .list-row{ display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid rgba(15,40,60,0.04); }
    .card-very-soft{ background: linear-gradient(180deg,#f6fbff,#f2f7ff); border-radius:12px; padding:12px; }

    /* responsiveness */
    @media (max-width: 1100px){
      .top-row{ grid-template-columns: 1fr; }
      .balance-card{ grid-template-columns: 1fr; }
      .mid-row{ grid-template-columns: 1fr; }
      .bottom-row{ grid-template-columns: 1fr; }
      .small-cards{ grid-template-columns: repeat(1,1fr); }
    }

    /* make canvas responsive wrapper with fixed aspect */
    .chart-wrap{ width:100%; height:180px; }
    .small-chart-wrap{ width:100%; height:64px; }

    /* visual credit images (using uploaded images as background decoration) */
    .decoration-1{ background:url("/mnt/data/32d558c2-eb5c-473d-a027-159a87f37197.png") no-repeat right bottom; background-size:160px; border-radius:var(--card-radius); }
    .decoration-2{ background:url("/mnt/data/88da8518-5bfa-47ba-9b94-af88e1208439.png") no-repeat center; background-size:cover; border-radius:var(--card-radius); min-height:220px; }
    .decoration-3{ background:url("/mnt/data/ec403b61-b4fa-4dd4-95a8-cc2a3499a21e.png") no-repeat right center; background-size:220px; border-radius:var(--card-radius); }

    /* little badge */
    .badge-small{ display:inline-block; padding:6px 10px; border-radius:999px; font-weight:600; background:rgba(34,211,170,0.14); color:var(--accent-green); }

/* ------------ WELCOME CARD ------------- */
.welcome-card {
    background: linear-gradient(135deg, #1aa7ff, #007bff);
    color: #fff;
    border-radius: 25px;
    padding: 5px;
    position: relative;
    overflow: hidden;
    min-height: 186px;
}

.welcome-text h2 {
    font-weight: 600;
    font-size: 28px;
}

.welcome-text p {
    opacity: .9;
    margin-top: -5px;
}

.stats-box {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    padding: 15px 30px;
    margin-top: 25px;
    display: flex;
    justify-content: space-between;
    backdrop-filter: blur(6px);
}

.stats-item {
    text-align: center;
    flex: 1;
}

    .stats-item h3 {
        font-size: 28px;
        margin: 0;
        font-weight: 600;
    }

    .stats-item span {
        font-size: 14px;
        opacity: .9;
    }

/* IMAGE INSIDE CARD */
.welcome-img {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 220px;
    margin-right: 10px;
}

/* ------------ SMALL CARDS ------------- */
.small-card {
    border-radius: 25px;
    padding: 25px;
    min-height: 170px;
    background: #fff;
    position: relative;
    overflow: hidden;
}

    .small-card .card-icon {
        background: #fff;
        width: 55px;
        height: 55px;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
    }

    .small-card h2 {
        font-size: 30px;
        font-weight: 700;
        margin: 0;
    }

    .small-card p {
        margin: 0;
        margin-top: 3px;
        opacity: .75;
        font-size: 15px;
    }

.badge-change {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 12px;
    margin-left: 6px;
}

/* COLOR VARIANTS LIKE IMAGE */
.card-sales {
    background: #ffe2eb;
}

.card-refunds {
    background: #eee8ff;
}

.card-earnings {
    background: #d9fff6;
}

.top-shape {
    position: absolute;
    right: -20px;
    top: -20px;
    width: 150px;
    opacity: .2;
}
/* -------------------- SMALL INFO CARDS -------------------- */
.info-card {
    border-radius: 22px;
    padding: 25px;
    font-size: 20px;
    font-weight: 600;
}

.info-title {
    font-size: 15px;
    font-weight: 500;
    color: #555;
}

.growth-tag {
    background: rgba(0,0,0,0.06);
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 11px;
    margin-left: 8px;
}

/* -------------------- PRODUCT SALES DONUT -------------------- */
.donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 26px;
    font-weight: 700;
    color: #555;
    text-align: center;
}