.live-box{
    background:#020b10;
    border:1px solid rgba(0,255,191,.25);
    border-radius:16px;
    padding:16px;
}
.wanted-box{
    border-radius:16px;
    padding:16px;
    min-height:170px;
}

/* TITLE */
.hot-badge{
    background:#ff0055;
    color:#fff;
    font-size:11px;
    padding:3px 8px;
    border-radius:10px;
    margin-left:8px;
    box-shadow:0 0 10px rgba(255,0,85,.6);
}

/* LIST */
.wanted-list{
    list-style:none;
    margin:12px 0 0;
    padding:0;
}

/* ITEM */
.wanted-list li{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px 0;
    font-size:14px;
    border-bottom:1px solid rgba(255,255,255,.06);
}

.wanted-list li:last-child{
    border-bottom:none;
}

/* LEFT */
.wanted-left{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:600;
}

.wanted-rank{
    color:#00ffbf;
    width:28px;
}

/* RIGHT */
.wanted-right{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    opacity:.9;
}

.fire{
    filter:drop-shadow(0 0 6px orange);
}

/* STATES */
.loading{
    opacity:.6;
    text-align:center;
}
/* AUTO FLASH */
.notif-text{
    animation:
        notifIn .35s ease,
        notifFlash .1s infinite alternate;
}

/* FLASH EFFECT */
@keyframes notifFlash{
    from{
        box-shadow:0 0 10px rgba(0,255,191,.15);
        border-left-color:#00ffbf;
    }
    to{
        box-shadow:0 0 28px rgba(0,255,191,.55);
        border-left-color:#3affd2;
    }
}

.live-dot{
    width:8px;
    height:8px;
    background:#00ffbf;
    border-radius:50%;
    display:inline-block;
    margin-left:8px;
    box-shadow:0 0 10px #00ffbf;
    animation:pulse 1.2s infinite;
}

@keyframes pulse{
    0%{opacity:.3}
    50%{opacity:1}
    100%{opacity:.3}
}

.live-stats{
    display:flex;
    justify-content:space-between;
    margin-top:10px;
}

.live-stats span{
    font-size:12px;
    opacity:.7;
}

.live-stats strong{
    font-size:18px;
    color:#00ffbf;
}
.live-box{
    height:260px;              /* 🔥 fixed box height */
    display:flex;
    flex-direction:column;
}

#liveChart{
    flex:1;                    /* chart fills box */
    max-height:160px;          /* 🔥 prevents page stretching */
}
.wanted-box{
    min-height:140px;
}

.hot-badge{
    background:#ff0055;
    color:#fff;
    font-size:11px;
    padding:3px 8px;
    border-radius:10px;
    margin-left:8px;
    box-shadow:0 0 10px rgba(255,0,85,.6);
}

.wanted-loading{
    opacity:.6;
}

.wanted-name{
    font-size:16px;
    font-weight:700;
    color:#00ffbf;
    margin-bottom:6px;
}

.wanted-meta{
    display:flex;
    justify-content:space-between;
    font-size:13px;
    opacity:.85;
}

.wanted-visits{
    margin-top:8px;
    font-size:13px;
    color:#ffb347;
}

.wanted-link{
    display:inline-block;
    margin-top:8px;
    font-size:13px;
    color:#00ffbf;
    text-decoration:none;
}

.wanted-link:hover{
    text-decoration:underline;
}

/* =====================================================
   GLOBAL RESET (SAFE)
===================================================== */
.dashboard-container *,
.dashboard-container *::before,
.dashboard-container *::after{
    box-sizing:border-box;
}

/* =====================================================
   SIDEBAR
===================================================== */
.sidebar{
    position:fixed;
    top:0;
    left:0;
    width:200px;
    height:100vh;
    z-index:100;
    background:#020b10;
}

/* =====================================================
   DASHBOARD LAYOUT
===================================================== */
.dashboard-container{
    margin-left:210px;
    padding:22px;
    min-height:100vh;
    font-family:Inter,Segoe UI,Arial,sans-serif;
    color:#dff;
    background:
        radial-gradient(circle at top,#031a22,#00090e 65%);
}

/* =====================================================
   TOP STATS (HARD SAFE LAYOUT)
===================================================== */
/* ================================
   HARD FIX – STATS ALIGNMENT
================================ */
/* =====================================
   FINTECH STAT CARD (STACKED)
===================================== */
.stats-grid{
    display:grid !important;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) !important;
    gap:18px !important;
    margin-bottom:28px;
}

.stat-card{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;

    padding:18px 20px !important;
    height:120px;

    background:linear-gradient(180deg,#04141b,#020b10) !important;
    border:1px solid rgba(0,255,191,.35) !important;
    border-radius:16px !important;

    box-shadow:
        0 0 22px rgba(0,255,191,.18),
        inset 0 0 18px rgba(0,255,191,.05) !important;

    transition:.25s ease;
}

.stat-card:hover{
    transform:translateY(-3px);
    box-shadow:
        0 0 36px rgba(0,255,191,.45),
        inset 0 0 22px rgba(0,255,191,.08);
}

/* ICON */
.stat-icon{
    width:36px !important;
    height:36px !important;
    border-radius:10px !important;
    background:rgba(0,255,191,.18) !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    color:#00ffbf !important;
    font-size:16px !important;

    margin-bottom:8px !important;
    box-shadow:0 0 12px rgba(0,255,191,.5);
}

/* TITLE */
.stat-title{
    font-size:13px !important;
    opacity:.75 !important;
    margin-bottom:6px !important;
    white-space:nowrap !important;
}

/* VALUE */
.stat-value{
    font-size:22px !important;
    font-weight:900 !important;
    color:#00ffbf !important;
    letter-spacing:.3px !important;
}

/* =====================================================
   ACTION BUTTONS
===================================================== */
/* =====================================================
   ACTION BUTTONS – PRO / LOW GAMMA
===================================================== */
.action-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    margin-bottom:26px;
}

.action-btn{
    background:linear-gradient(
        180deg,
        #0a2a28,
        #061817
    );
    border:1px solid rgba(0,255,191,.25);
    color:#cfeee7;

    padding:12px 20px;
    border-radius:14px;
    font-weight:700;
    font-size:14px;

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

    cursor:pointer;
    letter-spacing:.2px;

    box-shadow:
        0 2px 8px rgba(0,0,0,.45),
        inset 0 0 0 rgba(0,255,191,0);

    transition:
        background .25s ease,
        box-shadow .25s ease,
        transform .2s ease,
        color .2s ease;
}

/* ICON */
.action-btn i{
    color:#7ff0d0;
    font-size:14px;
    opacity:.85;
}

/* HOVER (SUBTLE, NOT NEON) */
.action-btn:hover{
    background:linear-gradient(
        180deg,
        #0e3532,
        #08201f
    );
    box-shadow:
        0 4px 14px rgba(0,0,0,.55),
        0 0 10px rgba(0,255,191,.18);
    transform:translateY(-1px);
    color:#eafff9;
}

/* ACTIVE */
.action-btn:active{
    transform:translateY(0);
    box-shadow:
        0 2px 8px rgba(0,0,0,.5),
        inset 0 2px 6px rgba(0,0,0,.4);
}

/* =====================================================
   DASHBOARD GRID
===================================================== */
.dashboard-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    gap:20px;
}

/* =====================================================
   DASH BOX
===================================================== */
.dash-box{
    background:linear-gradient(180deg,#020c12,#02161f);
    border:1px solid rgba(0,255,191,.25);
    border-radius:18px;
    padding:18px;

    box-shadow:
        0 0 26px rgba(0,255,191,.12),
        inset 0 0 18px rgba(0,255,191,.04);
}

.dash-title{
    font-size:15px;
    font-weight:900;
    color:#00ffbf;
    margin-bottom:12px;
    letter-spacing:.35px;
    text-shadow:0 0 10px rgba(0,255,191,.6);
}

/* =====================================================
   TOP SELLERS FIXED HEIGHT
===================================================== */
.dash-box-fixed{
    height:260px;
    display:flex;
    flex-direction:column;
}

.table-scroll{
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;
}

/* Sticky header */
.orders-table thead th{
    position:sticky;
    top:0;
    background:#020b10;
    z-index:5;
}

/* Scrollbar */
.table-scroll::-webkit-scrollbar{width:6px}
.table-scroll::-webkit-scrollbar-thumb{
    background:#00ffbf;
    border-radius:8px;
}
.table-scroll::-webkit-scrollbar-track{background:#020b10}

/* =====================================================
   TABLES
===================================================== */
.orders-table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
}

.orders-table th,
.orders-table td{
    padding:9px 8px;
    border-bottom:1px solid rgba(0,255,191,.14);
}

.orders-table th{
    color:#7ddccd;
    font-weight:800;
    text-transform:uppercase;
    font-size:11px;
}
/* backdrop */

.notif-list{
    list-style:none;
    margin:0;
    padding:0;
    max-height:280px;
    overflow:auto;
}

.notif-list li{
    padding:10px 12px;
    border-bottom:1px solid rgba(255,255,255,.08);
    font-size:13px;
    display:flex;
    gap:10px;
    align-items:flex-start;
}

.notif-list li:last-child{
    border-bottom:none;
}

.notif-icon{
    width:26px;
    height:26px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    flex-shrink:0;
}

.notif-report{background:#ff3b3b33;color:#ff5b5b}
.notif-ticket{background:#00ffbf33;color:#00ffbf}
.notif-order{background:#ffc10733;color:#ffc107}
.notif-withdraw{background:#8b5cf633;color:#a78bfa}

.notif-text{
    flex:1;
    line-height:1.4;
}

.notif-time{
    font-size:11px;
    opacity:.55;
    margin-top:3px;
}

.notif-muted{
    text-align:center;
    opacity:.6;
}
.health-box{
    background:#020b10;
    border:1px solid rgba(0,255,191,.25);
    border-radius:16px;
    padding:16px;
}

.health-box canvas{
    margin-top:10px;
}

.health-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-top:14px;
    text-align:center;
}

.health-stats span{
    font-size:12px;
    opacity:.6;
}

.health-stats strong{
    font-size:18px;
    color:#00ffbf;
}

.health-status{
    float:right;
    font-size:12px;
    padding:4px 10px;
    border-radius:12px;
    font-weight:600;
}

.health-status.excellent{background:rgba(0,255,191,.15);color:#00ffbf}
.health-status.good{background:rgba(0,160,255,.15);color:#00a0ff}
.health-status.risk{background:rgba(255,80,80,.15);color:#ff5050}

.orders-table tbody tr:hover{
    background:rgba(0,255,191,.08);
}

/* Rank highlight */
.orders-table tbody tr:nth-child(1){
    color:#ffd700;
    font-weight:900;
}
.orders-table tbody tr:nth-child(2){color:#cfd6df}
.orders-table tbody tr:nth-child(3){color:#cd7f32}

/* =====================================================
   CHART (NO PAGE DROP)
===================================================== */
.chart-wrap{
    position:relative;
    height:220px;
    width:100%;
}

#performanceChart{
    width:100%!important;
    height:100%!important;
}

/* =====================================================
   LISTS
===================================================== */
.notif-list,
.health-list{
    list-style:none;
    padding:0;
    margin:0;
    font-size:13px;
}

.health-list li{
    display:flex;
    align-items:center;
    gap:8px;
}

.health-list i{
    color:#00ffbf;
    text-shadow:0 0 8px rgba(0,255,191,.6);
}

/* =====================================================
   BADGES
===================================================== */
.badge.success{
    background:linear-gradient(135deg,#00ffbf,#00cfa0);
    color:#02100b;
    padding:4px 10px;
    border-radius:10px;
    font-size:11px;
    font-weight:900;
}

/* =====================================================
   MOBILE
===================================================== */
@media(max-width:900px){
    .dashboard-container{
        margin-left:0;
        padding:16px;
    }
    .sidebar{
        position:relative;
        width:100%;
        height:auto;
    }
}
/* ===== MODAL BASE ===== */
.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.75);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
}

.modal-box{
    background:#0e1218;
    border:1px solid #1f2937;
    border-radius:14px;
    width:100%;
    max-width:480px;
    padding:22px;
    box-shadow:0 0 30px rgba(0,255,180,.15);
    animation:pop .2s ease-out;
}

@keyframes pop{
    from{transform:scale(.95);opacity:0}
    to{transform:scale(1);opacity:1}
}

.modal-ticket h2{
    margin:0 0 15px;
    font-size:18px;
    color:#00ffbf;
    display:flex;
    align-items:center;
    gap:10px;
}

.modal-ticket label{
    font-size:13px;
    opacity:.8;
}

.modal-ticket input,
.modal-ticket textarea{
    width:100%;
    margin:6px 0 14px;
    padding:10px;
    border-radius:8px;
    border:1px solid #1f2937;
    background:#0b0f14;
    color:#e5e7eb;
}

.modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
}

.btn-primary{
    background:#00ffbf;
    color:#000;
    border:none;
    padding:8px 14px;
    border-radius:8px;
    cursor:pointer;
}

.btn-ghost{
    background:transparent;
    border:1px solid #1f2937;
    color:#9ca3af;
    padding:8px 14px;
    border-radius:8px;
    cursor:pointer;
}