/* =========================
   RESET
========================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* =========================
   CYBER VARIABLES
========================= */

:root{

    --bg-main:#06090c;
    --bg-secondary:#0b1118;
    --bg-card:#101820;
    --bg-soft:#121c25;

    --line-color:
        rgba(0,229,255,0.08);

    --cyan-primary:#00e5ff;
    --cyan-soft:#67e8f9;

    --blue-primary:#0088ff;

    --red-alert:#ff4d4d;

    --text-primary:#f5f7fa;
    --text-secondary:#94a3b8;

    --shadow-cyber:
        0 0 25px rgba(0,229,255,0.08);

}

/* =========================
   GLOBAL
========================= */

html,
body{
    width:100%;
    min-height:100%;
    overflow-x:hidden;
}

body{

    background:
        linear-gradient(
            rgba(0,229,255,0.015) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0,229,255,0.015) 1px,
            transparent 1px
        ),
        radial-gradient(
            circle at top right,
            rgba(0,229,255,0.08),
            transparent 25%
        ),
        #06090c;

    background-size:
        40px 40px,
        40px 40px,
        auto;

    font-family:
        Inter,
        Arial,
        sans-serif;

    color:var(--text-primary);
}

/* =========================
   SIDEBAR
========================= */

.sidebar{

    width:280px;
    height:100vh;

    position:fixed;
    top:0;
    left:0;

    background:
        linear-gradient(
            180deg,
            rgba(7,12,18,0.98),
            rgba(10,15,22,0.98)
        );

    border-right:
        1px solid rgba(0,229,255,0.08);

    backdrop-filter:blur(14px);

    box-shadow:
        0 0 40px rgba(0,0,0,0.55);

    padding:20px 16px;

    overflow-x:hidden;
    overflow-y:auto;

    transition:all .3s ease;

    z-index:1000;
}

/* SCROLLBAR */

.sidebar::-webkit-scrollbar{
    width:5px;
}

.sidebar::-webkit-scrollbar-track{
    background:transparent;
}

.sidebar::-webkit-scrollbar-thumb{

    background:
        linear-gradient(
            180deg,
            #00e5ff,
            #0088ff
        );

    border-radius:20px;
}

/* =========================
   SIDEBAR CLOSE
========================= */

.sidebar.closed{
    width:88px;
}

.sidebar.closed .menu-text,
.sidebar.closed .logo-text,
.sidebar.closed .logout-text,
.sidebar.closed .menu-title,
.sidebar.closed .arrow{
    display:none;
}

.sidebar.closed a,
.sidebar.closed .dropdown-btn{
    justify-content:center;
}

.sidebar.closed a i{
    margin-right:0;
}

.sidebar.closed .dropdown-btn span{
    justify-content:center;
}

/* =========================
   LOGO
========================= */

.logo-area{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:30px;
}

.logo-text{

    font-size:21px;
    font-weight:800;

    color:var(--cyan-primary);

    letter-spacing:1.5px;

    text-shadow:
        0 0 15px rgba(0,229,255,0.35);
}

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

.toggle-btn{

    width:40px;
    height:40px;

    border:none;
    border-radius:12px;

    background:
        linear-gradient(
            180deg,
            #00b8d4,
            #0088ff
        );

    color:white;

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

    cursor:pointer;

    transition:.3s ease;

    box-shadow:
        0 6px 18px rgba(0,229,255,0.18);
}

.toggle-btn:hover{
    transform:translateY(-1px);
}

/* =========================
   MENU TITLE
========================= */

.menu-title{

    font-size:11px;
    font-weight:700;

    color:#64748b;

    letter-spacing:1px;

    margin:
        22px
        12px
        10px;

    text-transform:uppercase;
}

/* =========================
   MENU LINK
========================= */

.sidebar a{

    display:flex;
    align-items:center;

    width:100%;

    color:#cbd5e1;

    text-decoration:none;

    padding:13px 15px;

    border-radius:14px;

    margin-bottom:6px;

    transition:all .25s ease;

    font-size:14px;

    font-weight:500;

    position:relative;

    overflow:hidden;

    border:
        1px solid transparent;
}

/* ICON */

.sidebar a i{

    width:22px;
    min-width:22px;

    margin-right:12px;

    font-size:17px;

    text-align:center;
}

/* HOVER */

.sidebar a:hover,
.dropdown-btn:hover{

    background:
        rgba(0,229,255,0.08);

    color:white;

    transform:translateX(3px);

    border:
        1px solid rgba(0,229,255,0.12);
}

/* ACTIVE */

.sidebar a.active{

    background:
        linear-gradient(
            90deg,
            rgba(0,229,255,0.18),
            rgba(0,140,255,0.12)
        );

    border:
        1px solid rgba(0,229,255,0.18);

    color:white;

    box-shadow:
        0 0 18px rgba(0,229,255,0.08);
}

/* =========================
   DROPDOWN
========================= */

.dropdown-btn{

    width:100%;

    background:none;
    border:none;

    color:#cbd5e1;

    padding:13px 15px;

    border-radius:14px;

    margin-bottom:6px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    cursor:pointer;

    transition:all .25s ease;

    font-size:14px;

    font-weight:500;

    border:
        1px solid transparent;
}

.dropdown-btn span{
    display:flex;
    align-items:center;
    gap:12px;
}

.dropdown-btn i{
    font-size:17px;
}

/* ARROW */

.arrow{
    transition:.3s ease;
}

.dropdown-btn.active .arrow{
    transform:rotate(180deg);
}

/* =========================
   SUBMENU
========================= */

.dropdown-container{

    display:none;

    padding-left:14px;

    margin-bottom:10px;

    border-left:
        1px solid rgba(0,229,255,0.08);
}

.dropdown-container a{

    background:
        rgba(255,255,255,0.015);

    border:
        1px solid rgba(255,255,255,0.03);

    font-size:13px;
}

/* =========================
   CONTENT
========================= */

.content{

    margin-left:280px;

    width:calc(100% - 280px);

    min-height:100vh;

    padding:25px;

    transition:all .3s ease;
}

.content.expand{

    margin-left:88px;

    width:calc(100% - 88px);
}

/* =========================
   TOPBAR
========================= */

.topbar{

    width:100%;

    background:
        linear-gradient(
            180deg,
            rgba(15,20,28,0.95),
            rgba(10,15,22,0.95)
        );

    border:
        1px solid rgba(0,229,255,0.08);

    border-radius:22px;

    padding:18px 24px;

    margin-bottom:28px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:15px;

    box-shadow:
        0 10px 35px rgba(0,0,0,0.45);

    backdrop-filter:blur(10px);
}

.topbar h4{

    margin:0;

    font-size:20px;
    font-weight:700;

    color:var(--cyan-primary);
}

/* =========================
   ADMIN
========================= */

.admin-box{
    display:flex;
    align-items:center;
    gap:12px;
}

.admin-avatar{

    width:44px;
    height:44px;

    border-radius:50%;

    background:
        linear-gradient(
            180deg,
            #00b8d4,
            #0088ff
        );

    color:white;

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

    font-weight:700;

    box-shadow:
        0 0 18px rgba(0,229,255,0.18);
}

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

.card-box{

    background:
        linear-gradient(
            180deg,
            rgba(16,24,32,0.98),
            rgba(10,16,24,0.98)
        );

    border:
        1px solid rgba(0,229,255,0.06);

    border-radius:24px;

    padding:28px;

    box-shadow:
        0 12px 35px rgba(0,0,0,0.45);

    backdrop-filter:blur(12px);
}

/* =========================
   SECTION TITLE
========================= */

.section-title{

    padding-bottom:12px;

    margin-bottom:20px;

    border-bottom:
        1px solid rgba(0,229,255,0.08);
}

.section-title h5{

    font-size:16px;
    font-weight:700;

    color:var(--cyan-primary);

    margin-bottom:0;

    display:flex;
    align-items:center;

    letter-spacing:.3px;
}

.section-title i{

    margin-right:10px;

    font-size:17px;

    color:var(--cyan-primary);
}

/* =========================
   FORM
========================= */

.form-label{

    font-weight:600;

    margin-bottom:10px;

    color:#cbd5e1;

    font-size:14px;

    letter-spacing:.2px;
}

.form-control,
.form-select{

    background:
        rgba(255,255,255,0.02) !important;

    border:
        1px solid rgba(0,229,255,0.08);

    color:white !important;

    border-radius:14px;

    padding:13px 15px;

    transition:.3s ease;
}

.form-control:focus,
.form-select:focus{

    background:
        rgba(255,255,255,0.03) !important;

    border-color:
        rgba(0,229,255,0.45);

    box-shadow:
        0 0 0 4px rgba(0,229,255,0.08);

    color:white;
}

/* =========================
   STATS INPUT
========================= */

.stats-input{

    background:
        linear-gradient(
            180deg,
            rgba(20,28,36,0.98),
            rgba(10,18,25,0.98)
        );

    border:
        1px solid rgba(0,229,255,0.06);

    border-radius:18px;

    padding:18px;

    transition:.3s ease;

    box-shadow:
        0 5px 20px rgba(0,0,0,0.25);
}

.stats-input:hover{

    transform:translateY(-2px);

    border-color:
        rgba(0,229,255,0.15);

    box-shadow:
        0 8px 25px rgba(0,0,0,0.35);
}

/* =========================
   UPLOAD BOX
========================= */

.upload-box{

    background:
        linear-gradient(
            180deg,
            rgba(18,24,32,0.98),
            rgba(10,16,24,0.98)
        );

    border:
        2px dashed rgba(0,229,255,0.15);

    border-radius:22px;

    padding:28px;

    transition:.3s ease;

    box-shadow:
        0 8px 25px rgba(0,0,0,0.25);
}

.upload-box:hover{

    border-color:
        rgba(0,229,255,0.35);
}

/* =========================
   BUTTON
========================= */

.btn-primary{

    background:
        linear-gradient(
            90deg,
            #00b8d4,
            #0088ff
        );

    border:none;

    border-radius:14px;

    color:white;

    font-weight:600;

    padding:12px 22px;

    box-shadow:
        0 8px 20px rgba(0,229,255,0.18);

    transition:.3s ease;
}

.btn-primary:hover{

    transform:translateY(-2px);

    box-shadow:
        0 12px 25px rgba(0,229,255,0.22);
}

.btn-dark{

    background:
        linear-gradient(
            180deg,
            #1a1f27,
            #11161d
        );

    border:
        1px solid rgba(255,255,255,0.05);

    border-radius:14px;

    height:48px;

    padding:0 22px;

    font-weight:600;

    transition:.3s ease;

    color:#e5e7eb;
}

.btn-dark:hover{

    transform:translateY(-1px);

    border-color:
        rgba(0,229,255,0.12);
}

/* =========================
   TABLE
========================= */

.table-box{

    background:
        linear-gradient(
            180deg,
            rgba(16,24,32,0.98),
            rgba(10,16,24,0.98)
        );

    border:
        1px solid rgba(0,229,255,0.06);

    border-radius:24px;

    overflow:hidden;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.35);
}

.table-dark-custom{

    width:100%;

    margin-bottom:0;

    border-collapse:separate;
    border-spacing:0;

    color:#f3f4f6;
}

.table-dark-custom thead{

    background:
        linear-gradient(
            90deg,
            rgba(0,229,255,0.14),
            rgba(8,15,24,1)
        );
}

.table-dark-custom thead th{

    padding:18px 20px;

    font-size:13px;

    font-weight:700;

    letter-spacing:.5px;

    text-transform:uppercase;

    color:#ffffff;

    border:none;

    white-space:nowrap;
}

.table-dark-custom tbody tr{

    transition:.25s ease;

    border-bottom:
        1px solid rgba(255,255,255,0.03);
}

.table-dark-custom tbody tr:hover{

    background:
        rgba(0,229,255,0.03);
}

.table-dark-custom tbody td{

    padding:18px 20px;

    vertical-align:middle;

    border:none;

    color:#d1d5db;

    font-size:14px;
}

/* =========================
   STATUS BADGE
========================= */

.status-success{

    background:
        rgba(0,229,255,0.12);

    color:#67e8f9;

    border:
        1px solid rgba(0,229,255,0.12);

    padding:7px 14px;

    border-radius:999px;

    font-size:12px;

    font-weight:600;
}

/* =========================
   LOGOUT
========================= */

.logout-btn{
    margin-top:30px;
}

/* =========================
   GLOBAL SCROLLBAR
========================= */

::-webkit-scrollbar{
    width:7px;
    height:7px;
}

::-webkit-scrollbar-track{
    background:#081018;
}

::-webkit-scrollbar-thumb{

    background:
        linear-gradient(
            180deg,
            #00e5ff,
            #0088ff
        );

    border-radius:20px;
}

/* =========================
   MOBILE
========================= */

@media(max-width:991px){

    .sidebar{
        left:-280px;
    }

    .sidebar.mobile-show{
        left:0;
    }

    .content{
        margin-left:0;
        width:100%;
        padding:18px;
    }

    .content.expand{
        margin-left:0;
        width:100%;
    }

    .topbar{
        flex-direction:column;
        align-items:flex-start;
    }

}


/* =========================
   PAGE HEADER
========================= */

.page-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}

.page-badge{
    display:inline-flex;

    padding:8px 14px;

    border-radius:999px;

    background:
        rgba(0,229,255,0.08);

    border:
        1px solid rgba(0,229,255,0.12);

    color:#67e8f9;

    font-size:11px;

    font-weight:700;

    letter-spacing:1px;
}

.page-title{
    font-size:30px;
    font-weight:800;

    color:white;

    margin-bottom:10px;
}

.page-title i{
    color:#00e5ff;

    margin-right:10px;
}

.page-subtitle{
    color:#94a3b8;

    margin-bottom:0;
}

/* =========================
   INTEL CARD
========================= */

.intel-card{
    background:
        linear-gradient(
            180deg,
            rgba(16,24,32,0.98),
            rgba(10,16,24,0.98)
        );

    border:
        1px solid rgba(0,229,255,0.06);

    border-radius:24px;

    padding:24px;

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

    transition:.3s ease;

    min-height:140px;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.35);
}

.intel-card:hover{
    transform:translateY(-3px);

    border-color:
        rgba(0,229,255,0.18);
}

.intel-icon{
    width:60px;
    height:60px;

    border-radius:18px;

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

    font-size:24px;
}

.intel-icon.cyan{
    background:
        rgba(0,229,255,0.12);

    color:#67e8f9;
}

.intel-icon.blue{
    background:
        rgba(59,130,246,0.12);

    color:#60a5fa;
}

.intel-icon.warning{
    background:
        rgba(255,180,0,0.12);

    color:#facc15;
}

.intel-icon.danger{
    background:
        rgba(255,0,0,0.12);

    color:#ff6b6b;
}

.intel-card small{
    color:#94a3b8;

    display:block;

    margin-bottom:8px;
}

.intel-card h3{
    font-size:32px;
    font-weight:800;

    margin-bottom:8px;
}

.intel-growth{
    font-size:13px;
    font-weight:600;
}

.positive{
    color:#67e8f9;
}

.warning-text{
    color:#facc15;
}

/* =========================
   TABLE HEADER
========================= */

.table-header{
    padding:22px 24px;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;

    border-bottom:
        1px solid rgba(0,229,255,0.06);
}

.table-header h5{
    margin-bottom:6px;

    font-weight:700;

    color:white;
}

.table-header h5 i{
    color:#00e5ff;

    margin-right:8px;
}

.table-header small{
    color:#94a3b8;
}

/* =========================
   SEARCH
========================= */

.table-search{
    position:relative;
}

.table-search i{
    position:absolute;

    left:14px;
    top:50%;

    transform:translateY(-50%);

    color:#64748b;
}

.table-search input{
    width:260px;

    background:
        rgba(255,255,255,0.02);

    border:
        1px solid rgba(0,229,255,0.08);

    border-radius:14px;

    height:46px;

    padding:
        0
        16px
        0
        42px;

    color:white;
}

.table-search input:focus{
    outline:none;

    border-color:
        rgba(0,229,255,0.25);
}

/* =========================
   CONTENT INFO
========================= */

.content-info{
    display:flex;
    flex-direction:column;
}

.content-info strong{
    color:white;

    font-size:14px;
}

.content-info small{
    color:#94a3b8;

    margin-top:4px;
}

/* =========================
   FILTER GROUP
========================= */

.table-filter-group{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}

/* =========================
   CYBER SELECT
========================= */

.cyber-select{
    min-width:200px;

    height:46px;

    background:
        rgba(255,255,255,0.02);

    border:
        1px solid rgba(0,229,255,0.08);

    border-radius:14px;

    color:white;

    padding:
        0
        14px;

    outline:none;
}

.cyber-select:focus{
    border-color:
        rgba(0,229,255,0.25);
}

/* =========================
   PLATFORM BADGE
========================= */

.platform-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:
        8px 14px;

    border-radius:999px;

    font-size:12px;

    font-weight:600;
}

.platform-badge.tiktok{
    background:
        rgba(0,229,255,0.12);

    color:#67e8f9;

    border:
        1px solid rgba(0,229,255,0.12);
}

.platform-badge.instagram{
    background:
        rgba(255,0,128,0.12);

    color:#ff66b3;

    border:
        1px solid rgba(255,0,128,0.12);
}

.platform-badge.facebook{
    background:
        rgba(59,130,246,0.12);

    color:#60a5fa;

    border:
        1px solid rgba(59,130,246,0.12);
}

.platform-badge.youtube{
    background:
        rgba(255,0,0,0.12);

    color:#ff6b6b;

    border:
        1px solid rgba(255,0,0,0.12);
}

/* =========================================================
   ANALYTICS PAGE - CYBER ENTERPRISE UI
========================================================= */

/* =========================
   ANALYTICS HEADER
========================= */

.analytics-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    flex-wrap:wrap;
}

.analytics-badge{

    display:inline-flex;
    align-items:center;

    padding:
        8px
        14px;

    border-radius:999px;

    background:
        rgba(139,92,246,0.12);

    border:
        1px solid rgba(139,92,246,0.18);

    color:#c4b5fd;

    font-size:11px;
    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;
}

.analytics-title{

    font-size:34px;
    font-weight:800;

    color:white;

    margin-bottom:10px;
}

.analytics-title i{

    color:#8b5cf6;

    margin-right:12px;
}

.analytics-subtitle{

    color:#94a3b8;

    max-width:700px;

    margin-bottom:0;
}

.analytics-date{

    height:48px;

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

    padding:
        0
        18px;

    border-radius:16px;

    background:
        rgba(255,255,255,0.03);

    border:
        1px solid rgba(255,255,255,0.05);

    color:#cbd5e1;

    font-size:14px;
    font-weight:600;
}

/* =========================
   ANALYTICS CARD
========================= */

.analytics-card{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.98),
            rgba(10,15,22,0.98)
        );

    border:
        1px solid rgba(255,255,255,0.05);

    border-radius:28px;

    padding:26px;

    min-height:170px;

    transition:.35s ease;

    box-shadow:
        0 12px 35px rgba(0,0,0,0.35);
}

.analytics-card:hover{

    transform:
        translateY(-4px);

    border-color:
        rgba(139,92,246,0.25);
}

/* =========================
   GLOW
========================= */

.glow-cyan{
    box-shadow:
        0 0 30px rgba(0,229,255,0.06);
}

.glow-blue{
    box-shadow:
        0 0 30px rgba(59,130,246,0.06);
}

.glow-purple{
    box-shadow:
        0 0 30px rgba(139,92,246,0.08);
}

.glow-green{
    box-shadow:
        0 0 30px rgba(34,197,94,0.08);
}

/* =========================
   WAVE
========================= */

.analytics-wave{

    position:absolute;

    right:-20px;
    bottom:-20px;

    width:120px;
    height:120px;

    border-radius:50%;

    background:
        radial-gradient(
            rgba(255,255,255,0.05),
            transparent
        );
}

/* =========================
   ICON
========================= */

.analytics-icon{

    width:64px;
    height:64px;

    border-radius:22px;

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

    font-size:24px;

    margin-bottom:22px;
}

.analytics-icon.cyan{

    background:
        rgba(0,229,255,0.12);

    color:#67e8f9;
}

.analytics-icon.blue{

    background:
        rgba(59,130,246,0.12);

    color:#60a5fa;
}

.analytics-icon.purple{

    background:
        rgba(139,92,246,0.12);

    color:#c4b5fd;
}

.analytics-icon.green{

    background:
        rgba(34,197,94,0.12);

    color:#4ade80;
}

/* =========================
   CONTENT
========================= */

.analytics-content small{

    color:#94a3b8;

    display:block;

    margin-bottom:10px;

    font-size:13px;
}

.analytics-content h2{

    font-size:36px;
    font-weight:800;

    color:white;

    margin-bottom:10px;
}

/* =========================
   STATUS TEXT
========================= */

.analytics-status{

    font-size:13px;
    font-weight:600;
}

.positive{
    color:#67e8f9;
}

.warning-text{
    color:#facc15;
}

.success-text{
    color:#4ade80;
}

/* =========================
   PANEL
========================= */

.analytics-panel{

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.98),
            rgba(10,15,22,0.98)
        );

    border:
        1px solid rgba(255,255,255,0.05);

    border-radius:28px;

    overflow:hidden;

    box-shadow:
        0 12px 35px rgba(0,0,0,0.35);
}

/* =========================
   PANEL HEADER
========================= */

.analytics-panel-header{

    padding:24px 26px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:20px;
    flex-wrap:wrap;

    border-bottom:
        1px solid rgba(255,255,255,0.05);
}

.analytics-panel-header h5{

    margin-bottom:6px;

    font-weight:700;

    color:white;
}

.analytics-panel-header h5 i{

    color:#8b5cf6;

    margin-right:8px;
}

.analytics-panel-header small{
    color:#94a3b8;
}

/* =========================
   LIVE INDICATOR
========================= */

.live-indicator{

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

    color:#4ade80;

    font-size:12px;
    font-weight:700;

    letter-spacing:1px;
}

.live-dot{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#4ade80;

    box-shadow:
        0 0 12px #4ade80;
}

/* =========================
   CHART
========================= */

.chart-wrapper{
    padding:24px;
}

/* =========================
   VIRAL SCORE
========================= */

.viral-score-box{

    padding:40px 30px;

    text-align:center;
}

.viral-circle{

    width:180px;
    height:180px;

    margin:auto auto 25px;

    border-radius:50%;

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

    background:
        radial-gradient(
            circle,
            rgba(139,92,246,0.25),
            rgba(15,23,42,0.2)
        );

    border:
        8px solid rgba(139,92,246,0.18);

    box-shadow:
        0 0 40px rgba(139,92,246,0.18);
}

.viral-circle span{

    font-size:42px;
    font-weight:800;

    color:white;
}

.viral-score-box h4{

    color:white;

    margin-bottom:10px;
}

.viral-score-box p{

    color:#94a3b8;

    line-height:1.7;
}

/* =========================
   FILTER
========================= */

.analytics-filter{

    height:42px;

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

    padding:
        0
        18px;

    border-radius:14px;

    background:
        rgba(255,255,255,0.03);

    border:
        1px solid rgba(255,255,255,0.05);

    color:#cbd5e1;

    font-size:13px;
    font-weight:600;
}

/* =========================
   TABLE
========================= */

.analytics-table{

    width:100%;

    border-collapse:separate;
    border-spacing:0;

    color:white;
}

.analytics-table thead{

    background:
        rgba(255,255,255,0.02);
}

.analytics-table thead th{

    padding:18px 24px;

    color:#cbd5e1;

    font-size:12px;
    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    border:none;
}

.analytics-table tbody tr{

    transition:.25s ease;

    border-bottom:
        1px solid rgba(255,255,255,0.04);
}

.analytics-table tbody tr:hover{

    background:
        rgba(139,92,246,0.04);
}

.analytics-table tbody td{

    padding:22px 24px;

    border:none;

    vertical-align:middle;

    color:#e2e8f0;
}

/* =========================
   PLATFORM INFO
========================= */

.platform-info{
    display:flex;
    align-items:center;
    gap:14px;
}

.platform-icon{

    width:48px;
    height:48px;

    border-radius:16px;

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

    font-size:18px;
}

.platform-icon.tiktok{

    background:
        rgba(0,229,255,0.12);

    color:#67e8f9;
}

.platform-icon.instagram{

    background:
        rgba(255,0,128,0.12);

    color:#ff66b3;
}

.platform-icon.facebook{

    background:
        rgba(59,130,246,0.12);

    color:#60a5fa;
}

.platform-icon.youtube{

    background:
        rgba(255,0,0,0.12);

    color:#ff6b6b;
}

.platform-info strong{

    color:white;

    display:block;
}

.platform-info small{
    color:#94a3b8;
}

/* =========================
   ANALYTIC NUMBER
========================= */

.analytics-number{

    font-weight:700;

    color:#8b5cf6;
}

/* =========================
   SCORE BAR
========================= */

.score-bar{

    width:140px;
    height:10px;

    border-radius:999px;

    overflow:hidden;

    background:
        rgba(255,255,255,0.06);

    margin-bottom:8px;
}

.score-fill{

    height:100%;

    border-radius:999px;
}

.score-fill.high{

    width:92%;

    background:
        linear-gradient(
            90deg,
            #00e5ff,
            #8b5cf6
        );
}

.score-fill.medium{

    width:68%;

    background:
        linear-gradient(
            90deg,
            #3b82f6,
            #8b5cf6
        );
}

.score-fill.low{

    width:34%;

    background:
        linear-gradient(
            90deg,
            #facc15,
            #fb923c
        );
}

.score-fill.critical{

    width:12%;

    background:
        linear-gradient(
            90deg,
            #ef4444,
            #dc2626
        );
}

.score-label{

    font-size:12px;
    font-weight:700;

    color:#cbd5e1;
}

/* =========================
   STATUS BADGE
========================= */

.analytics-status-badge{

    display:inline-flex;
    justify-content:center;
    align-items:center;

    min-width:120px;

    padding:
        8px
        16px;

    border-radius:999px;

    font-size:12px;
    font-weight:700;
}

.analytics-status-badge.high{

    background:
        rgba(0,229,255,0.12);

    color:#67e8f9;

    border:
        1px solid rgba(0,229,255,0.18);
}

.analytics-status-badge.medium{

    background:
        rgba(59,130,246,0.12);

    color:#60a5fa;

    border:
        1px solid rgba(59,130,246,0.18);
}

.analytics-status-badge.low{

    background:
        rgba(255,180,0,0.12);

    color:#facc15;

    border:
        1px solid rgba(255,180,0,0.18);
}

.analytics-status-badge.critical{

    background:
        rgba(255,0,0,0.12);

    color:#ff6b6b;

    border:
        1px solid rgba(255,0,0,0.18);
}

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

@media(max-width:768px){

    .analytics-title{
        font-size:26px;
    }

    .viral-circle{
        width:140px;
        height:140px;
    }

    .viral-circle span{
        font-size:32px;
    }

    .analytics-table{
        min-width:900px;
    }

}

/* =========================================================
   ALL OPERATION PAGE - CYBER INTELLIGENCE ENTERPRISE
========================================================= */

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

.intel-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    flex-wrap:wrap;
}

.intel-badge{

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:
        9px
        16px;

    border-radius:999px;

    background:
        rgba(139,92,246,0.10);

    border:
        1px solid rgba(139,92,246,0.18);

    color:#c4b5fd;

    font-size:11px;
    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;
}

.intel-title{

    font-size:34px;
    font-weight:800;

    color:white;

    margin-bottom:10px;
}

.intel-title i{

    color:#8b5cf6;

    margin-right:10px;
}

.intel-subtitle{

    color:#94a3b8;

    max-width:700px;

    line-height:1.7;
}

/* =========================
   BUTTONS
========================= */

.btn-intel-primary,
.btn-intel-secondary{

    height:48px;

    padding:
        0
        20px;

    border:none;

    border-radius:16px;

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

    text-decoration:none;

    font-size:14px;
    font-weight:600;

    transition:.3s ease;
}

.btn-intel-primary{

    background:
        linear-gradient(
            135deg,
            #8b5cf6,
            #6366f1
        );

    color:white;

    box-shadow:
        0 10px 25px rgba(139,92,246,0.25);
}

.btn-intel-primary:hover{

    transform:
        translateY(-2px);

    color:white;

    box-shadow:
        0 14px 30px rgba(139,92,246,0.35);
}

.btn-intel-secondary{

    background:
        rgba(255,255,255,0.03);

    border:
        1px solid rgba(255,255,255,0.06);

    color:#cbd5e1;
}

.btn-intel-secondary:hover{

    background:
        rgba(255,255,255,0.06);

    color:white;

    transform:
        translateY(-2px);
}

/* =========================
   KPI CARD
========================= */

.intel-kpi-card{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.98),
            rgba(10,15,22,0.98)
        );

    border:
        1px solid rgba(255,255,255,0.05);

    border-radius:28px;

    padding:24px;

    min-height:190px;

    transition:.35s ease;

    box-shadow:
        0 12px 35px rgba(0,0,0,0.35);
}

.intel-kpi-card:hover{

    transform:
        translateY(-4px);

    border-color:
        rgba(139,92,246,0.18);

    box-shadow:
        0 18px 40px rgba(139,92,246,0.10);
}

/* =========================
   KPI TOP
========================= */

.intel-kpi-top{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:25px;
}

/* =========================
   KPI ICON
========================= */

.intel-kpi-icon{

    width:64px;
    height:64px;

    border-radius:22px;

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

    font-size:24px;
}

.intel-kpi-icon.cyan{

    background:
        rgba(0,229,255,0.12);

    color:#67e8f9;
}

.intel-kpi-icon.blue{

    background:
        rgba(59,130,246,0.12);

    color:#60a5fa;
}

.intel-kpi-icon.purple{

    background:
        rgba(139,92,246,0.12);

    color:#c4b5fd;
}

.intel-kpi-icon.green{

    background:
        rgba(34,197,94,0.12);

    color:#4ade80;
}

/* =========================
   KPI BADGE
========================= */

.intel-kpi-badge{

    display:inline-flex;
    justify-content:center;
    align-items:center;

    padding:
        6px
        12px;

    border-radius:999px;

    font-size:11px;
    font-weight:700;
}

.intel-kpi-badge.positive{

    background:
        rgba(0,229,255,0.12);

    color:#67e8f9;
}

.intel-kpi-badge.warning{

    background:
        rgba(250,204,21,0.12);

    color:#facc15;
}

.intel-kpi-badge.success{

    background:
        rgba(34,197,94,0.12);

    color:#4ade80;
}

/* =========================
   KPI CONTENT
========================= */

.intel-kpi-content small{

    display:block;

    color:#94a3b8;

    margin-bottom:10px;

    font-size:13px;
}

.intel-kpi-content h3{

    font-size:38px;
    font-weight:800;

    color:white;

    margin-bottom:8px;
}

.intel-kpi-content p{

    color:#64748b;

    margin:0;

    font-size:13px;
}

/* =========================
   ANALYTICS STRIP
========================= */

.intel-strip{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:18px;
}

.intel-strip-item{

    background:
        rgba(255,255,255,0.02);

    border:
        1px solid rgba(255,255,255,0.04);

    border-radius:20px;

    padding:20px;
}

.strip-label{

    display:block;

    color:#64748b;

    margin-bottom:8px;

    font-size:12px;
}

.intel-strip-item strong{

    color:white;

    font-size:15px;
}

/* =========================
   TABLE BOX
========================= */

.intel-table-box{

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.98),
            rgba(10,15,22,0.98)
        );

    border:
        1px solid rgba(255,255,255,0.05);

    border-radius:28px;

    overflow:hidden;

    box-shadow:
        0 12px 35px rgba(0,0,0,0.35);
}

/* =========================
   TABLE HEADER
========================= */

.intel-table-header{

    padding:24px 28px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:20px;
    flex-wrap:wrap;

    border-bottom:
        1px solid rgba(255,255,255,0.05);
}

.intel-table-header h5{

    color:white;

    margin-bottom:6px;

    font-weight:700;
}

.intel-table-header h5 i{

    color:#8b5cf6;

    margin-right:8px;
}

.intel-table-header small{
    color:#94a3b8;
}

/* =========================
   FILTER
========================= */

.intel-filter-group{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}

/* =========================
   SELECT
========================= */

.intel-select{

    min-width:210px;

    height:48px;

    background:
        rgba(255,255,255,0.03);

    border:
        1px solid rgba(255,255,255,0.06);

    border-radius:16px;

    padding:
        0
        16px;

    color:white;

    outline:none;
}

/* =========================
   SEARCH
========================= */

.intel-search{
    position:relative;
}

.intel-search i{

    position:absolute;

    left:16px;
    top:50%;

    transform:translateY(-50%);

    color:#64748b;
}

.intel-search input{

    width:260px;

    height:48px;

    background:
        rgba(255,255,255,0.03);

    border:
        1px solid rgba(255,255,255,0.06);

    border-radius:16px;

    padding:
        0
        18px
        0
        46px;

    color:white;

    outline:none;
}

/* =========================
   TABLE
========================= */

.intel-table{

    width:100%;

    border-collapse:separate;
    border-spacing:0;

    color:white;
}

.intel-table thead{

    background:
        rgba(255,255,255,0.02);
}

.intel-table thead th{

    padding:18px 24px;

    font-size:12px;
    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#cbd5e1;

    border:none;
}

.intel-table tbody tr{

    transition:.3s ease;

    border-bottom:
        1px solid rgba(255,255,255,0.04);
}

.intel-table tbody tr:hover{

    background:
        rgba(139,92,246,0.04);
}

.intel-table tbody td{

    padding:22px 24px;

    border:none;

    vertical-align:middle;

    color:#e2e8f0;
}

/* =========================
   ID
========================= */

.intel-id{

    font-weight:700;

    color:#8b5cf6;
}

/* =========================
   PLATFORM CHIP
========================= */

.platform-chip{

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:
        8px
        14px;

    border-radius:999px;

    font-size:12px;
    font-weight:700;
}

.platform-chip.tiktok{

    background:
        rgba(0,229,255,0.12);

    color:#67e8f9;
}

.platform-chip.instagram{

    background:
        rgba(255,0,128,0.12);

    color:#ff66b3;
}

/* =========================
   CONTENT INFO
========================= */

.intel-content-info strong{

    display:block;

    color:white;

    margin-bottom:6px;
}

.intel-content-info small{

    color:#94a3b8;

    font-size:12px;
}

/* =========================
   FYP SCORE
========================= */

.fyp-score{

    display:inline-flex;
    justify-content:center;
    align-items:center;

    width:42px;
    height:42px;

    border-radius:14px;

    background:
        rgba(139,92,246,0.12);

    color:#c4b5fd;

    font-weight:700;
}

.fyp-score.low{

    background:
        rgba(250,204,21,0.12);

    color:#facc15;
}

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

.intel-status{

    display:inline-flex;
    justify-content:center;
    align-items:center;

    min-width:90px;

    padding:
        8px
        14px;

    border-radius:999px;

    font-size:12px;
    font-weight:700;
}

.intel-status.success{

    background:
        rgba(34,197,94,0.12);

    color:#4ade80;
}

.intel-status.warning{

    background:
        rgba(250,204,21,0.12);

    color:#facc15;
}

/* =========================
   ACTION
========================= */

.intel-action{
    display:flex;
    align-items:center;
    gap:10px;
}

.btn-intel-action{

    width:40px;
    height:40px;

    border:none;

    border-radius:14px;

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

    transition:.3s ease;
}

.btn-intel-action.view{

    background:
        rgba(0,229,255,0.12);

    color:#67e8f9;
}

.btn-intel-action.edit{

    background:
        rgba(250,204,21,0.12);

    color:#facc15;
}

.btn-intel-action.delete{

    background:
        rgba(239,68,68,0.12);

    color:#f87171;
}

.btn-intel-action:hover{

    transform:
        translateY(-2px);
}

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

@media(max-width:992px){

    .intel-strip{

        grid-template-columns:
            repeat(2,1fr);
    }

}

@media(max-width:768px){

    .intel-title{
        font-size:26px;
    }

    .intel-strip{

        grid-template-columns:1fr;
    }

    .intel-table{
        min-width:1000px;
    }

    .intel-search input{
        width:100%;
    }

    .intel-filter-group{
        width:100%;
    }

    .intel-select{
        width:100%;
    }

}
/* =========================================================
   SUPER POWER DASHBOARD - CYBER INTELLIGENCE UI
========================================================= */

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

.super-dashboard-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    flex-wrap:wrap;
}

.super-badge{

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

    padding:
        10px
        18px;

    border-radius:999px;

    background:
        rgba(139,92,246,0.10);

    border:
        1px solid rgba(139,92,246,0.18);

    color:#c4b5fd;

    font-size:11px;
    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    backdrop-filter:blur(10px);
}

/* =========================
   PULSE
========================= */

.pulse-dot{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#4ade80;

    box-shadow:
        0 0 12px #4ade80;

    animation:
        pulse 1.5s infinite;
}

@keyframes pulse{

    0%{
        opacity:1;
        transform:scale(1);
    }

    50%{
        opacity:.5;
        transform:scale(1.4);
    }

    100%{
        opacity:1;
        transform:scale(1);
    }

}

/* =========================
   TITLE
========================= */

.super-dashboard-title{

    font-size:42px;
    font-weight:900;

    color:white;

    margin-bottom:14px;

    line-height:1.2;
}

.super-dashboard-title i{

    color:#8b5cf6;

    margin-right:12px;

    text-shadow:
        0 0 25px rgba(139,92,246,0.30);
}

.super-dashboard-subtitle{

    max-width:780px;

    color:#94a3b8;

    line-height:1.8;

    font-size:15px;
}

/* =========================
   ACTION GROUP
========================= */

.dashboard-action-group{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
}

/* =========================
   BUTTON PRIMARY
========================= */

.btn-super-primary{

    height:52px;

    padding:
        0
        24px;

    border:none;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            #8b5cf6,
            #6366f1
        );

    color:white;

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

    font-size:14px;
    font-weight:700;

    transition:.35s ease;

    box-shadow:
        0 14px 30px rgba(139,92,246,0.25);
}

.btn-super-primary:hover{

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 35px rgba(139,92,246,0.35);
}

/* =========================
   BUTTON OUTLINE
========================= */

.btn-super-outline{

    height:52px;

    padding:
        0
        24px;

    border-radius:18px;

    border:
        1px solid rgba(255,255,255,0.06);

    background:
        rgba(255,255,255,0.03);

    color:#e2e8f0;

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

    font-size:14px;
    font-weight:600;

    transition:.35s ease;
}

.btn-super-outline:hover{

    background:
        rgba(255,255,255,0.06);

    transform:
        translateY(-3px);
}

/* =========================
   SUPER CARD
========================= */

.super-card{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.98),
            rgba(10,15,22,0.98)
        );

    border:
        1px solid rgba(255,255,255,0.05);

    border-radius:30px;

    padding:26px;

    min-height:220px;

    transition:.35s ease;

    backdrop-filter:blur(12px);

    box-shadow:
        0 18px 40px rgba(0,0,0,0.35);
}

.super-card:hover{

    transform:
        translateY(-5px);

    border-color:
        rgba(139,92,246,0.18);

    box-shadow:
        0 25px 50px rgba(139,92,246,0.12);
}

/* =========================
   CARD GLOW
========================= */

.super-card-glow{

    position:absolute;

    right:-50px;
    top:-50px;

    width:160px;
    height:160px;

    border-radius:50%;

    filter:blur(60px);

    opacity:.15;
}

.super-card-glow.cyan{
    background:#00e5ff;
}

.super-card-glow.blue{
    background:#3b82f6;
}

.super-card-glow.purple{
    background:#8b5cf6;
}

.super-card-glow.green{
    background:#22c55e;
}

/* =========================
   CARD TOP
========================= */

.super-card-top{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:26px;
}

/* =========================
   ICON
========================= */

.super-icon{

    width:68px;
    height:68px;

    border-radius:24px;

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

    font-size:26px;
}

.super-icon.cyan{

    background:
        rgba(0,229,255,0.12);

    color:#67e8f9;
}

.super-icon.blue{

    background:
        rgba(59,130,246,0.12);

    color:#60a5fa;
}

.super-icon.purple{

    background:
        rgba(139,92,246,0.12);

    color:#c4b5fd;
}

.super-icon.green{

    background:
        rgba(34,197,94,0.12);

    color:#4ade80;
}

/* =========================
   BADGE GROWTH
========================= */

.super-badge-growth{

    padding:
        7px
        14px;

    border-radius:999px;

    font-size:11px;
    font-weight:700;
}

.super-badge-growth.positive{

    background:
        rgba(0,229,255,0.12);

    color:#67e8f9;
}

.super-badge-growth.warning{

    background:
        rgba(250,204,21,0.12);

    color:#facc15;
}

.super-badge-growth.success{

    background:
        rgba(34,197,94,0.12);

    color:#4ade80;
}

/* =========================
   CARD CONTENT
========================= */

.super-card-content small{

    display:block;

    color:#94a3b8;

    margin-bottom:12px;

    font-size:13px;
}

.super-card-content h2{

    font-size:42px;
    font-weight:900;

    color:white;

    margin-bottom:10px;
}

.super-card-content p{

    color:#64748b;

    margin:0;

    font-size:13px;
}

/* =========================
   AI STATUS BAR
========================= */

.ai-status-bar{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:18px;
}

.ai-status-item{

    background:
        rgba(255,255,255,0.03);

    border:
        1px solid rgba(255,255,255,0.05);

    border-radius:22px;

    padding:22px;
}

.ai-label{

    display:block;

    color:#64748b;

    margin-bottom:10px;

    font-size:12px;
}

.ai-status-item strong{

    color:white;

    font-size:15px;
}

/* =========================
   PANEL
========================= */

.super-select{

    background: #111827;

    color: #ffffff;

    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 14px;

    padding: 12px 16px;

    min-width: 180px;

    outline: none;

}

.super-select:focus{

    border-color: #3b82f6;

    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);

}

/* =========================
   PANEL HEADER
========================= */

.super-panel-header{

    padding:26px 30px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:20px;
    flex-wrap:wrap;

    border-bottom:
        1px solid rgba(255,255,255,0.05);
}

.super-panel-header h5{

    color:white;

    margin-bottom:6px;

    font-weight:700;
}

.super-panel-header h5 i{

    color:#8b5cf6;

    margin-right:8px;
}

.super-panel-header small{
    color:#94a3b8;
}

/* =========================
   LIVE
========================= */

.live-monitor{

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

    color:#4ade80;

    font-size:12px;
    font-weight:700;
}

.live-dot{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#4ade80;

    box-shadow:
        0 0 12px #4ade80;
}

/* =========================
   CHART
========================= */

.super-chart-container{
    padding:26px;
}

/* =========================
   FILTER
========================= */

.super-select{

    min-width:200px;

    height:48px;

    border:none;

    border-radius:16px;

    padding:
        0
        16px;

    background:
        rgba(255,255,255,0.04);

    border:
        1px solid rgba(255,255,255,0.05);

    color:white;

    outline:none;
}

/* =========================
   TABLE
========================= */

.super-table{

    width:100%;

    border-collapse:separate;
    border-spacing:0;

    color:white;
}

.super-table thead{

    background:
        rgba(255,255,255,0.03);
}

.super-table thead th{

    padding:18px 24px;

    color:#cbd5e1;

    font-size:12px;
    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;
}

.super-table tbody tr{

    transition:.3s ease;
}

.super-table tbody tr:hover{

    background:
        rgba(139,92,246,0.05);
}

.super-table tbody td{

    padding:24px;

    vertical-align:middle;

    border:none;

    color:#e2e8f0;
}

/* =========================
   ID
========================= */

.super-id{

    font-weight:700;

    color:#8b5cf6;
}

/* =========================
   PLATFORM
========================= */

.super-platform{

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:
        8px
        14px;

    border-radius:999px;

    font-size:12px;
    font-weight:700;
}

.super-platform.tiktok{

    background:
        rgba(0,229,255,0.12);

    color:#67e8f9;
}

.super-platform.instagram{

    background:
        rgba(255,0,128,0.12);

    color:#ff66b3;
}

/* =========================
   CONTENT
========================= */

.super-content strong{

    display:block;

    color:white;

    margin-bottom:6px;
}

.super-content small{

    color:#94a3b8;

    font-size:12px;
}

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

.super-status{

    display:inline-flex;
    justify-content:center;
    align-items:center;

    min-width:90px;

    padding:
        8px
        14px;

    border-radius:999px;

    font-size:12px;
    font-weight:700;
}

.super-status.success{

    background:
        rgba(34,197,94,0.12);

    color:#4ade80;
}

.super-status.warning{

    background:
        rgba(250,204,21,0.12);

    color:#facc15;
}

/* =========================
   SIGNAL BAR
========================= */

.signal-bar{

    width:120px;
    height:10px;

    border-radius:999px;

    overflow:hidden;

    background:
        rgba(255,255,255,0.05);
}

.signal-fill{

    height:100%;

    border-radius:999px;
}

.signal-fill.high{

    width:92%;

    background:
        linear-gradient(
            90deg,
            #8b5cf6,
            #00e5ff
        );
}

.signal-fill.medium{

    width:60%;

    background:
        linear-gradient(
            90deg,
            #3b82f6,
            #8b5cf6
        );
}

/* =========================
   ACTION
========================= */

.super-action{
    display:flex;
    gap:10px;
}

.btn-super-action{

    width:40px;
    height:40px;

    border:none;

    border-radius:14px;

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

    transition:.3s ease;
}

.btn-super-action.view{

    background:
        rgba(0,229,255,0.12);

    color:#67e8f9;
}

.btn-super-action.edit{

    background:
        rgba(250,204,21,0.12);

    color:#facc15;
}

.btn-super-action.delete{

    background:
        rgba(239,68,68,0.12);

    color:#f87171;
}

.btn-super-action:hover{

    transform:
        translateY(-2px);
}

/* =========================
   LEADERBOARD
========================= */

.super-leaderboard{

    padding:
        22px
        30px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    border-bottom:
        1px solid rgba(255,255,255,0.04);
}

.super-user{

    display:flex;
    align-items:center;
    gap:14px;
}

.super-rank{

    width:42px;
    height:42px;

    border-radius:14px;

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

    font-weight:700;
}

.super-rank.gold{

    background:
        rgba(250,204,21,0.12);

    color:#facc15;
}

.super-rank.silver{

    background:
        rgba(148,163,184,0.12);

    color:#cbd5e1;
}

.super-rank.bronze{

    background:
        rgba(251,146,60,0.12);

    color:#fb923c;
}

/* =========================
   RADAR
========================= */

.radar-box{

    padding:40px 30px;

    text-align:center;
}

.radar-circle{

    width:180px;
    height:180px;

    margin:auto auto 24px;

    border-radius:50%;

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

    background:
        radial-gradient(
            circle,
            rgba(139,92,246,0.25),
            rgba(15,23,42,0.2)
        );

    border:
        8px solid rgba(139,92,246,0.18);

    box-shadow:
        0 0 40px rgba(139,92,246,0.18);
}

.radar-circle span{

    font-size:42px;
    font-weight:900;

    color:white;
}

.radar-box h4{

    color:white;

    margin-bottom:12px;
}

.radar-box p{

    color:#94a3b8;

    line-height:1.7;
}

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

@media(max-width:992px){

    .ai-status-bar{

        grid-template-columns:
            repeat(2,1fr);
    }

}

@media(max-width:768px){

    .super-dashboard-title{
        font-size:30px;
    }

    .ai-status-bar{
        grid-template-columns:1fr;
    }

    .super-table{
        min-width:1000px;
    }

    .radar-circle{
        width:140px;
        height:140px;
    }

    .radar-circle span{
        font-size:32px;
    }

}

/* =========================================================
   COMMENT INTELLIGENCE ANALYTICS
========================================================= */

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

.comment-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    flex-wrap:wrap;
}

.comment-badge{

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

    padding:
        10px
        18px;

    border-radius:999px;

    background:
        rgba(0,229,255,0.08);

    border:
        1px solid rgba(0,229,255,0.16);

    color:#67e8f9;

    font-size:11px;
    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;
}

.comment-title{

    font-size:40px;
    font-weight:900;

    color:white;

    margin-bottom:14px;
}

.comment-title i{

    color:#00e5ff;

    margin-right:12px;

    text-shadow:
        0 0 25px rgba(0,229,255,0.25);
}

.comment-subtitle{

    max-width:760px;

    color:#94a3b8;

    line-height:1.8;

    font-size:15px;
}

/* =========================
   STATUS BOX
========================= */

.comment-status-box{

    height:52px;

    padding:
        0
        20px;

    border-radius:18px;

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

    background:
        rgba(34,197,94,0.08);

    border:
        1px solid rgba(34,197,94,0.16);

    color:#4ade80;

    font-size:13px;
    font-weight:700;
}

.status-pulse{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#4ade80;

    box-shadow:
        0 0 12px #4ade80;

    animation:
        pulse 1.5s infinite;
}

/* =========================
   KPI CARD
========================= */

.comment-kpi-card{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.98),
            rgba(10,15,22,0.98)
        );

    border:
        1px solid rgba(255,255,255,0.05);

    border-radius:30px;

    padding:26px;

    min-height:210px;

    transition:.35s ease;

    box-shadow:
        0 18px 40px rgba(0,0,0,0.35);
}

.comment-kpi-card:hover{

    transform:
        translateY(-5px);

    border-color:
        rgba(0,229,255,0.16);

    box-shadow:
        0 24px 50px rgba(0,229,255,0.08);
}

/* =========================
   KPI TOP
========================= */

.comment-kpi-top{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:28px;
}

/* =========================
   ICON
========================= */

.comment-kpi-icon{

    width:68px;
    height:68px;

    border-radius:24px;

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

    font-size:26px;
}

.comment-kpi-icon.cyan{

    background:
        rgba(0,229,255,0.12);

    color:#67e8f9;
}

.comment-kpi-icon.blue{

    background:
        rgba(59,130,246,0.12);

    color:#60a5fa;
}

.comment-kpi-icon.purple{

    background:
        rgba(139,92,246,0.12);

    color:#c4b5fd;
}

.comment-kpi-icon.green{

    background:
        rgba(34,197,94,0.12);

    color:#4ade80;
}

/* =========================
   GROWTH
========================= */

.comment-growth{

    padding:
        7px
        14px;

    border-radius:999px;

    font-size:11px;
    font-weight:700;
}

.comment-growth.positive{

    background:
        rgba(0,229,255,0.12);

    color:#67e8f9;
}

.comment-growth.warning{

    background:
        rgba(250,204,21,0.12);

    color:#facc15;
}

.comment-growth.success{

    background:
        rgba(34,197,94,0.12);

    color:#4ade80;
}

/* =========================
   CONTENT
========================= */

.comment-kpi-content small{

    display:block;

    color:#94a3b8;

    margin-bottom:12px;

    font-size:13px;
}

.comment-kpi-content h2{

    font-size:42px;
    font-weight:900;

    color:white;

    margin-bottom:10px;
}

.comment-kpi-content p{

    color:#64748b;

    margin:0;

    font-size:13px;
}

/* =========================
   ANALYTICS BAR
========================= */

.comment-analytics-bar{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:18px;
}

.comment-analytics-item{

    background:
        rgba(255,255,255,0.03);

    border:
        1px solid rgba(255,255,255,0.05);

    border-radius:22px;

    padding:22px;
}

.analytics-label{

    display:block;

    color:#64748b;

    margin-bottom:10px;

    font-size:12px;
}

.comment-analytics-item strong{

    color:white;

    font-size:15px;
}

/* =========================
   TABLE BOX
========================= */

.comment-table-box{

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.98),
            rgba(10,15,22,0.98)
        );

    border:
        1px solid rgba(255,255,255,0.05);

    border-radius:30px;

    overflow:hidden;

    box-shadow:
        0 18px 40px rgba(0,0,0,0.35);
}

/* =========================
   TABLE HEADER
========================= */

.comment-table-header{

    padding:26px 30px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:20px;
    flex-wrap:wrap;

    border-bottom:
        1px solid rgba(255,255,255,0.05);
}

.comment-table-header h5{

    color:white;

    margin-bottom:6px;

    font-weight:700;
}

.comment-table-header h5 i{

    color:#00e5ff;

    margin-right:8px;
}

.comment-table-header small{
    color:#94a3b8;
}

/* =========================
   SEARCH
========================= */

.comment-search{
    position:relative;
}

.comment-search i{

    position:absolute;

    left:16px;
    top:50%;

    transform:translateY(-50%);

    color:#64748b;
}

.comment-search input{

    width:280px;

    height:48px;

    border:none;

    border-radius:16px;

    padding:
        0
        18px
        0
        46px;

    background:
        rgba(255,255,255,0.04);

    border:
        1px solid rgba(255,255,255,0.05);

    color:white;

    outline:none;
}

/* =========================
   TABLE
========================= */

.comment-table{

    width:100%;

    border-collapse:separate;
    border-spacing:0;

    color:white;
}

.comment-table thead{

    background:
        rgba(255,255,255,0.03);
}

.comment-table thead th{

    padding:18px 24px;

    color:#cbd5e1;

    font-size:12px;
    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;
}

.comment-table tbody tr{

    transition:.3s ease;
}

.comment-table tbody tr:hover{

    background:
        rgba(0,229,255,0.04);
}

.comment-table tbody td{

    padding:24px;

    vertical-align:middle;

    border:none;

    color:#e2e8f0;
}

/* =========================
   PLATFORM INFO
========================= */

.platform-info{

    display:flex;
    align-items:center;
    gap:14px;
}

.platform-icon{

    width:50px;
    height:50px;

    border-radius:16px;

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

    font-size:18px;
}

.platform-icon.tiktok{

    background:
        rgba(0,229,255,0.12);

    color:#67e8f9;
}

.platform-icon.instagram{

    background:
        rgba(255,0,128,0.12);

    color:#ff66b3;
}

.platform-icon.facebook{

    background:
        rgba(59,130,246,0.12);

    color:#60a5fa;
}

.platform-icon.youtube{

    background:
        rgba(255,0,0,0.12);

    color:#ff6b6b;
}

.platform-info strong{

    display:block;

    color:white;

    margin-bottom:4px;
}

.platform-info small{

    color:#94a3b8;

    font-size:12px;
}

/* =========================
   NUMBER
========================= */

.comment-number{

    font-weight:700;

    color:#00e5ff;
}

/* =========================
   INTERACTION BAR
========================= */

.interaction-bar{

    width:130px;
    height:10px;

    border-radius:999px;

    overflow:hidden;

    background:
        rgba(255,255,255,0.05);
}

.interaction-fill{

    height:100%;

    border-radius:999px;
}

.interaction-fill.high{

    width:92%;

    background:
        linear-gradient(
            90deg,
            #00e5ff,
            #8b5cf6
        );
}

.interaction-fill.medium{

    width:70%;

    background:
        linear-gradient(
            90deg,
            #3b82f6,
            #8b5cf6
        );
}

.interaction-fill.low{

    width:45%;

    background:
        linear-gradient(
            90deg,
            #facc15,
            #fb923c
        );
}

.interaction-fill.critical{

    width:20%;

    background:
        linear-gradient(
            90deg,
            #ef4444,
            #dc2626
        );
}

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

.comment-status{

    display:inline-flex;
    justify-content:center;
    align-items:center;

    min-width:100px;

    padding:
        8px
        14px;

    border-radius:999px;

    font-size:12px;
    font-weight:700;
}

.comment-status.success{

    background:
        rgba(34,197,94,0.12);

    color:#4ade80;
}

.comment-status.info{

    background:
        rgba(59,130,246,0.12);

    color:#60a5fa;
}

.comment-status.warning{

    background:
        rgba(250,204,21,0.12);

    color:#facc15;
}

.comment-status.danger{

    background:
        rgba(239,68,68,0.12);

    color:#f87171;
}

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

@media(max-width:992px){

    .comment-analytics-bar{

        grid-template-columns:
            repeat(2,1fr);
    }

}

@media(max-width:768px){

    .comment-title{
        font-size:30px;
    }

    .comment-analytics-bar{
        grid-template-columns:1fr;
    }

    .comment-table{
        min-width:1000px;
    }

    .comment-search input{
        width:100%;
    }

}
/* =========================================================
   CONTENT DISTRIBUTION ANALYTICS
========================================================= */

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

.content-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    flex-wrap:wrap;
}

.content-badge{

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

    padding:
        10px
        18px;

    border-radius:999px;

    background:
        rgba(139,92,246,0.08);

    border:
        1px solid rgba(139,92,246,0.16);

    color:#c4b5fd;

    font-size:11px;
    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;
}

.content-title{

    font-size:40px;
    font-weight:900;

    color:white;

    margin-bottom:14px;
}

.content-title i{

    color:#8b5cf6;

    margin-right:12px;

    text-shadow:
        0 0 25px rgba(139,92,246,0.25);
}

.content-subtitle{

    max-width:760px;

    color:#94a3b8;

    line-height:1.8;

    font-size:15px;
}

/* =========================
   STATUS BOX
========================= */

.content-status-box{

    height:52px;

    padding:
        0
        20px;

    border-radius:18px;

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

    background:
        rgba(34,197,94,0.08);

    border:
        1px solid rgba(34,197,94,0.16);

    color:#4ade80;

    font-size:13px;
    font-weight:700;
}

.content-pulse{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#4ade80;

    box-shadow:
        0 0 12px #4ade80;

    animation:
        pulse 1.5s infinite;
}

/* =========================
   KPI CARD
========================= */

.content-kpi-card{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.98),
            rgba(10,15,22,0.98)
        );

    border:
        1px solid rgba(255,255,255,0.05);

    border-radius:30px;

    padding:26px;

    min-height:210px;

    transition:.35s ease;

    box-shadow:
        0 18px 40px rgba(0,0,0,0.35);
}

.content-kpi-card:hover{

    transform:
        translateY(-5px);

    border-color:
        rgba(139,92,246,0.16);

    box-shadow:
        0 24px 50px rgba(139,92,246,0.08);
}

/* =========================
   KPI TOP
========================= */

.content-kpi-top{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:28px;
}

/* =========================
   ICON
========================= */

.content-kpi-icon{

    width:68px;
    height:68px;

    border-radius:24px;

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

    font-size:26px;
}

.content-kpi-icon.cyan{

    background:
        rgba(0,229,255,0.12);

    color:#67e8f9;
}

.content-kpi-icon.blue{

    background:
        rgba(59,130,246,0.12);

    color:#60a5fa;
}

.content-kpi-icon.purple{

    background:
        rgba(139,92,246,0.12);

    color:#c4b5fd;
}

.content-kpi-icon.green{

    background:
        rgba(34,197,94,0.12);

    color:#4ade80;
}

/* =========================
   GROWTH
========================= */

.content-growth{

    padding:
        7px
        14px;

    border-radius:999px;

    font-size:11px;
    font-weight:700;
}

.content-growth.positive{

    background:
        rgba(0,229,255,0.12);

    color:#67e8f9;
}

.content-growth.warning{

    background:
        rgba(250,204,21,0.12);

    color:#facc15;
}

.content-growth.success{

    background:
        rgba(34,197,94,0.12);

    color:#4ade80;
}

/* =========================
   CONTENT KPI
========================= */

.content-kpi-content small{

    display:block;

    color:#94a3b8;

    margin-bottom:12px;

    font-size:13px;
}

.content-kpi-content h2{

    font-size:42px;
    font-weight:900;

    color:white;

    margin-bottom:10px;
}

.content-kpi-content p{

    color:#64748b;

    margin:0;

    font-size:13px;
}

/* =========================
   ANALYTICS BAR
========================= */

.content-analytics-bar{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:18px;
}

.content-analytics-item{

    background:
        rgba(255,255,255,0.03);

    border:
        1px solid rgba(255,255,255,0.05);

    border-radius:22px;

    padding:22px;
}

.analytics-label{

    display:block;

    color:#64748b;

    margin-bottom:10px;

    font-size:12px;
}

.content-analytics-item strong{

    color:white;

    font-size:15px;
}

/* =========================
   TABLE BOX
========================= */

.content-table-box{

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.98),
            rgba(10,15,22,0.98)
        );

    border:
        1px solid rgba(255,255,255,0.05);

    border-radius:30px;

    overflow:hidden;

    box-shadow:
        0 18px 40px rgba(0,0,0,0.35);
}

/* =========================
   TABLE HEADER
========================= */

.content-table-header{

    padding:26px 30px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:20px;
    flex-wrap:wrap;

    border-bottom:
        1px solid rgba(255,255,255,0.05);
}

.content-table-header h5{

    color:white;

    margin-bottom:6px;

    font-weight:700;
}

.content-table-header h5 i{

    color:#8b5cf6;

    margin-right:8px;
}

.content-table-header small{
    color:#94a3b8;
}

/* =========================
   SEARCH
========================= */

.content-search{
    position:relative;
}

.content-search i{

    position:absolute;

    left:16px;
    top:50%;

    transform:translateY(-50%);

    color:#64748b;
}

.content-search input{

    width:280px;

    height:48px;

    border:none;

    border-radius:16px;

    padding:
        0
        18px
        0
        46px;

    background:
        rgba(255,255,255,0.04);

    border:
        1px solid rgba(255,255,255,0.05);

    color:white;

    outline:none;
}

/* =========================
   TABLE
========================= */

.content-table{

    width:100%;

    border-collapse:separate;
    border-spacing:0;

    color:white;
}

.content-table thead{

    background:
        rgba(255,255,255,0.03);
}

.content-table thead th{

    padding:18px 24px;

    color:#cbd5e1;

    font-size:12px;
    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;
}

.content-table tbody tr{

    transition:.3s ease;
}

.content-table tbody tr:hover{

    background:
        rgba(139,92,246,0.05);
}

.content-table tbody td{

    padding:24px;

    vertical-align:middle;

    border:none;

    color:#e2e8f0;
}

/* =========================
   PLATFORM INFO
========================= */

.platform-info{

    display:flex;
    align-items:center;
    gap:14px;
}

.platform-icon{

    width:50px;
    height:50px;

    border-radius:16px;

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

    font-size:18px;
}

.platform-icon.tiktok{

    background:
        rgba(0,229,255,0.12);

    color:#67e8f9;
}

.platform-icon.instagram{

    background:
        rgba(255,0,128,0.12);

    color:#ff66b3;
}

.platform-icon.facebook{

    background:
        rgba(59,130,246,0.12);

    color:#60a5fa;
}

.platform-icon.youtube{

    background:
        rgba(255,0,0,0.12);

    color:#ff6b6b;
}

.platform-info strong{

    display:block;

    color:white;

    margin-bottom:4px;
}

.platform-info small{

    color:#94a3b8;

    font-size:12px;
}

/* =========================
   NUMBER
========================= */

.content-number{

    font-weight:700;

    color:#8b5cf6;
}

/* =========================
   DISTRIBUTION BAR
========================= */

.distribution-bar{

    width:130px;
    height:10px;

    border-radius:999px;

    overflow:hidden;

    background:
        rgba(255,255,255,0.05);
}

.distribution-fill{

    height:100%;

    border-radius:999px;
}

.distribution-fill.high{

    width:95%;

    background:
        linear-gradient(
            90deg,
            #8b5cf6,
            #00e5ff
        );
}

.distribution-fill.medium{

    width:72%;

    background:
        linear-gradient(
            90deg,
            #3b82f6,
            #8b5cf6
        );
}

.distribution-fill.low{

    width:48%;

    background:
        linear-gradient(
            90deg,
            #facc15,
            #fb923c
        );
}

.distribution-fill.critical{

    width:20%;

    background:
        linear-gradient(
            90deg,
            #ef4444,
            #dc2626
        );
}

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

.content-status{

    display:inline-flex;
    justify-content:center;
    align-items:center;

    min-width:110px;

    padding:
        8px
        14px;

    border-radius:999px;

    font-size:12px;
    font-weight:700;
}

.content-status.success{

    background:
        rgba(34,197,94,0.12);

    color:#4ade80;
}

.content-status.info{

    background:
        rgba(59,130,246,0.12);

    color:#60a5fa;
}

.content-status.warning{

    background:
        rgba(250,204,21,0.12);

    color:#facc15;
}

.content-status.danger{

    background:
        rgba(239,68,68,0.12);

    color:#f87171;
}

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

@media(max-width:992px){

    .content-analytics-bar{

        grid-template-columns:
            repeat(2,1fr);
    }

}

@media(max-width:768px){

    .content-title{
        font-size:30px;
    }

    .content-analytics-bar{
        grid-template-columns:1fr;
    }

    .content-table{
        min-width:1000px;
    }

    .content-search input{
        width:100%;
    }

}

/* =========================================================
   LIKE ENGAGEMENT ANALYTICS
========================================================= */

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

.like-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    flex-wrap:wrap;
}

.like-badge{

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

    padding:
        10px
        18px;

    border-radius:999px;

    background:
        rgba(255,0,128,0.08);

    border:
        1px solid rgba(255,0,128,0.18);

    color:#ff66b3;

    font-size:11px;
    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;
}

.like-title{

    font-size:40px;
    font-weight:900;

    color:white;

    margin-bottom:14px;
}

.like-title i{

    color:#ff4da6;

    margin-right:12px;

    text-shadow:
        0 0 25px rgba(255,77,166,0.30);
}

.like-subtitle{

    max-width:760px;

    color:#94a3b8;

    line-height:1.8;

    font-size:15px;
}

/* =========================
   STATUS BOX
========================= */

.like-status-box{

    height:52px;

    padding:
        0
        20px;

    border-radius:18px;

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

    background:
        rgba(34,197,94,0.08);

    border:
        1px solid rgba(34,197,94,0.16);

    color:#4ade80;

    font-size:13px;
    font-weight:700;
}

.like-pulse{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#4ade80;

    box-shadow:
        0 0 12px #4ade80;

    animation:
        pulse 1.5s infinite;
}

/* =========================
   KPI CARD
========================= */

.like-kpi-card{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.98),
            rgba(10,15,22,0.98)
        );

    border:
        1px solid rgba(255,255,255,0.05);

    border-radius:30px;

    padding:26px;

    min-height:210px;

    transition:.35s ease;

    box-shadow:
        0 18px 40px rgba(0,0,0,0.35);
}

.like-kpi-card:hover{

    transform:
        translateY(-5px);

    border-color:
        rgba(255,0,128,0.16);

    box-shadow:
        0 24px 50px rgba(255,0,128,0.08);
}

/* =========================
   KPI TOP
========================= */

.like-kpi-top{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:28px;
}

/* =========================
   ICON
========================= */

.like-kpi-icon{

    width:68px;
    height:68px;

    border-radius:24px;

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

    font-size:26px;
}

.like-kpi-icon.cyan{

    background:
        rgba(0,229,255,0.12);

    color:#67e8f9;
}

.like-kpi-icon.blue{

    background:
        rgba(59,130,246,0.12);

    color:#60a5fa;
}

.like-kpi-icon.purple{

    background:
        rgba(139,92,246,0.12);

    color:#c4b5fd;
}

.like-kpi-icon.green{

    background:
        rgba(34,197,94,0.12);

    color:#4ade80;
}

/* =========================
   GROWTH
========================= */

.like-growth{

    padding:
        7px
        14px;

    border-radius:999px;

    font-size:11px;
    font-weight:700;
}

.like-growth.positive{

    background:
        rgba(255,0,128,0.12);

    color:#ff66b3;
}

.like-growth.warning{

    background:
        rgba(250,204,21,0.12);

    color:#facc15;
}

.like-growth.success{

    background:
        rgba(34,197,94,0.12);

    color:#4ade80;
}

/* =========================
   KPI CONTENT
========================= */

.like-kpi-content small{

    display:block;

    color:#94a3b8;

    margin-bottom:12px;

    font-size:13px;
}

.like-kpi-content h2{

    font-size:42px;
    font-weight:900;

    color:white;

    margin-bottom:10px;
}

.like-kpi-content p{

    color:#64748b;

    margin:0;

    font-size:13px;
}

/* =========================
   TABLE BOX
========================= */

.like-table-box{

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.98),
            rgba(10,15,22,0.98)
        );

    border:
        1px solid rgba(255,255,255,0.05);

    border-radius:30px;

    overflow:hidden;

    box-shadow:
        0 18px 40px rgba(0,0,0,0.35);
}

/* =========================
   TABLE HEADER
========================= */

.like-table-header{

    padding:26px 30px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:20px;
    flex-wrap:wrap;

    border-bottom:
        1px solid rgba(255,255,255,0.05);
}

.like-table-header h5{

    color:white;

    margin-bottom:6px;

    font-weight:700;
}

.like-table-header h5 i{

    color:#ff4da6;

    margin-right:8px;
}

.like-table-header small{
    color:#94a3b8;
}

/* =========================
   SEARCH
========================= */

.like-search{
    position:relative;
}

.like-search i{

    position:absolute;

    left:16px;
    top:50%;

    transform:translateY(-50%);

    color:#64748b;
}

.like-search input{

    width:280px;

    height:48px;

    border:none;

    border-radius:16px;

    padding:
        0
        18px
        0
        46px;

    background:
        rgba(255,255,255,0.04);

    border:
        1px solid rgba(255,255,255,0.05);

    color:white;

    outline:none;
}

/* =========================
   TABLE
========================= */

.like-table{

    width:100%;

    border-collapse:separate;
    border-spacing:0;

    color:white;
}

.like-table thead{

    background:
        rgba(255,255,255,0.03);
}

.like-table thead th{

    padding:18px 24px;

    color:#cbd5e1;

    font-size:12px;
    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;
}

.like-table tbody tr{

    transition:.3s ease;
}

.like-table tbody tr:hover{

    background:
        rgba(255,0,128,0.04);
}

.like-table tbody td{

    padding:24px;

    vertical-align:middle;

    border:none;

    color:#e2e8f0;
}

/* =========================
   PLATFORM INFO
========================= */

.platform-info{

    display:flex;
    align-items:center;
    gap:14px;
}

.platform-icon{

    width:50px;
    height:50px;

    border-radius:16px;

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

    font-size:18px;
}

.platform-icon.tiktok{

    background:
        rgba(0,229,255,0.12);

    color:#67e8f9;
}

.platform-icon.instagram{

    background:
        rgba(255,0,128,0.12);

    color:#ff66b3;
}

.platform-icon.facebook{

    background:
        rgba(59,130,246,0.12);

    color:#60a5fa;
}

.platform-icon.youtube{

    background:
        rgba(255,0,0,0.12);

    color:#ff6b6b;
}

.platform-info strong{

    display:block;

    color:white;

    margin-bottom:4px;
}

.platform-info small{

    color:#94a3b8;

    font-size:12px;
}

/* =========================
   NUMBER
========================= */

.like-number{

    font-weight:700;

    color:#ff66b3;
}

/* =========================
   ENGAGEMENT BAR
========================= */

.engagement-bar{

    width:130px;
    height:10px;

    border-radius:999px;

    overflow:hidden;

    background:
        rgba(255,255,255,0.05);
}

.engagement-fill{

    height:100%;

    border-radius:999px;
}

.engagement-fill.high{

    width:96%;

    background:
        linear-gradient(
            90deg,
            #ff4da6,
            #8b5cf6
        );
}

.engagement-fill.medium{

    width:75%;

    background:
        linear-gradient(
            90deg,
            #3b82f6,
            #8b5cf6
        );
}

.engagement-fill.low{

    width:45%;

    background:
        linear-gradient(
            90deg,
            #facc15,
            #fb923c
        );
}

.engagement-fill.critical{

    width:25%;

    background:
        linear-gradient(
            90deg,
            #ef4444,
            #dc2626
        );
}

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

.like-status{

    display:inline-flex;
    justify-content:center;
    align-items:center;

    min-width:100px;

    padding:
        8px
        14px;

    border-radius:999px;

    font-size:12px;
    font-weight:700;
}

.like-status.success{

    background:
        rgba(34,197,94,0.12);

    color:#4ade80;
}

.like-status.info{

    background:
        rgba(59,130,246,0.12);

    color:#60a5fa;
}

.like-status.warning{

    background:
        rgba(250,204,21,0.12);

    color:#facc15;
}

.like-status.danger{

    background:
        rgba(239,68,68,0.12);

    color:#f87171;
}

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

@media(max-width:768px){

    .like-title{
        font-size:30px;
    }

    .like-table{
        min-width:1000px;
    }

    .like-search input{
        width:100%;
    }

}
/* =========================================================
   REACH ANALYTICS
========================================================= */

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

.reach-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    flex-wrap:wrap;
}

.reach-badge{

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

    padding:
        10px
        18px;

    border-radius:999px;

    background:
        rgba(0,229,255,0.08);

    border:
        1px solid rgba(0,229,255,0.16);

    color:#67e8f9;

    font-size:11px;
    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;
}

.reach-title{

    font-size:40px;
    font-weight:900;

    color:white;

    margin-bottom:14px;
}

.reach-title i{

    color:#00e5ff;

    margin-right:12px;

    text-shadow:
        0 0 25px rgba(0,229,255,0.30);
}

.reach-subtitle{

    max-width:760px;

    color:#94a3b8;

    line-height:1.8;

    font-size:15px;
}

/* =========================
   STATUS BOX
========================= */

.reach-status-box{

    height:52px;

    padding:
        0
        20px;

    border-radius:18px;

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

    background:
        rgba(34,197,94,0.08);

    border:
        1px solid rgba(34,197,94,0.16);

    color:#4ade80;

    font-size:13px;
    font-weight:700;
}

.reach-pulse{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#4ade80;

    box-shadow:
        0 0 12px #4ade80;

    animation:
        pulse 1.5s infinite;
}

/* =========================
   KPI CARD
========================= */

.reach-kpi-card{

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.98),
            rgba(10,15,22,0.98)
        );

    border:
        1px solid rgba(255,255,255,0.05);

    border-radius:30px;

    padding:26px;

    min-height:210px;

    transition:.35s ease;

    box-shadow:
        0 18px 40px rgba(0,0,0,0.35);
}

.reach-kpi-card:hover{

    transform:
        translateY(-5px);

    border-color:
        rgba(0,229,255,0.16);

    box-shadow:
        0 24px 50px rgba(0,229,255,0.08);
}

.reach-kpi-top{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:28px;
}

/* =========================
   ICON
========================= */

.reach-kpi-icon{

    width:68px;
    height:68px;

    border-radius:24px;

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

    font-size:26px;
}

.reach-kpi-icon.cyan{

    background:
        rgba(0,229,255,0.12);

    color:#67e8f9;
}

.reach-kpi-icon.blue{

    background:
        rgba(59,130,246,0.12);

    color:#60a5fa;
}

.reach-kpi-icon.purple{

    background:
        rgba(139,92,246,0.12);

    color:#c4b5fd;
}

.reach-kpi-icon.green{

    background:
        rgba(34,197,94,0.12);

    color:#4ade80;
}

/* =========================
   GROWTH
========================= */

.reach-growth{

    padding:
        7px
        14px;

    border-radius:999px;

    font-size:11px;
    font-weight:700;
}

.reach-growth.positive{

    background:
        rgba(0,229,255,0.12);

    color:#67e8f9;
}

.reach-growth.warning{

    background:
        rgba(250,204,21,0.12);

    color:#facc15;
}

.reach-growth.success{

    background:
        rgba(34,197,94,0.12);

    color:#4ade80;
}

/* =========================
   CONTENT
========================= */

.reach-kpi-content small{

    display:block;

    color:#94a3b8;

    margin-bottom:12px;

    font-size:13px;
}

.reach-kpi-content h2{

    font-size:42px;
    font-weight:900;

    color:white;

    margin-bottom:10px;
}

.reach-kpi-content p{

    color:#64748b;

    margin:0;

    font-size:13px;
}

/* =========================
   TABLE BOX
========================= */

.reach-table-box{

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.98),
            rgba(10,15,22,0.98)
        );

    border:
        1px solid rgba(255,255,255,0.05);

    border-radius:30px;

    overflow:hidden;

    box-shadow:
        0 18px 40px rgba(0,0,0,0.35);
}

/* =========================
   TABLE HEADER
========================= */

.reach-table-header{

    padding:26px 30px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:20px;
    flex-wrap:wrap;

    border-bottom:
        1px solid rgba(255,255,255,0.05);
}

.reach-table-header h5{

    color:white;

    margin-bottom:6px;

    font-weight:700;
}

.reach-table-header h5 i{

    color:#00e5ff;

    margin-right:8px;
}

.reach-table-header small{
    color:#94a3b8;
}

/* =========================
   SEARCH
========================= */

.reach-search{
    position:relative;
}

.reach-search i{

    position:absolute;

    left:16px;
    top:50%;

    transform:translateY(-50%);

    color:#64748b;
}

.reach-search input{

    width:280px;

    height:48px;

    border:none;

    border-radius:16px;

    padding:
        0
        18px
        0
        46px;

    background:
        rgba(255,255,255,0.04);

    border:
        1px solid rgba(255,255,255,0.05);

    color:white;

    outline:none;
}

/* =========================
   TABLE
========================= */

.reach-table{

    width:100%;

    border-collapse:separate;
    border-spacing:0;

    color:white;
}

.reach-table thead{

    background:
        rgba(255,255,255,0.03);
}

.reach-table thead th{

    padding:18px 24px;

    color:#cbd5e1;

    font-size:12px;
    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;
}

.reach-table tbody tr{

    transition:.3s ease;
}

.reach-table tbody tr:hover{

    background:
        rgba(0,229,255,0.04);
}

.reach-table tbody td{

    padding:24px;

    vertical-align:middle;

    border:none;

    color:#e2e8f0;
}

/* =========================
   NUMBER
========================= */

.reach-number{

    font-weight:700;

    color:#67e8f9;
}

/* =========================
   REACH BAR
========================= */

.reach-bar{

    width:130px;
    height:10px;

    border-radius:999px;

    overflow:hidden;

    background:
        rgba(255,255,255,0.05);
}

.reach-fill{

    height:100%;

    border-radius:999px;
}

.reach-fill.high{

    width:96%;

    background:
        linear-gradient(
            90deg,
            #00e5ff,
            #8b5cf6
        );
}

.reach-fill.medium{

    width:75%;

    background:
        linear-gradient(
            90deg,
            #3b82f6,
            #8b5cf6
        );
}

.reach-fill.low{

    width:45%;

    background:
        linear-gradient(
            90deg,
            #facc15,
            #fb923c
        );
}

.reach-fill.critical{

    width:25%;

    background:
        linear-gradient(
            90deg,
            #ef4444,
            #dc2626
        );
}

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

.reach-status{

    display:inline-flex;
    justify-content:center;
    align-items:center;

    min-width:100px;

    padding:
        8px
        14px;

    border-radius:999px;

    font-size:12px;
    font-weight:700;
}

.reach-status.success{

    background:
        rgba(34,197,94,0.12);

    color:#4ade80;
}

.reach-status.info{

    background:
        rgba(59,130,246,0.12);

    color:#60a5fa;
}

.reach-status.warning{

    background:
        rgba(250,204,21,0.12);

    color:#facc15;
}

.reach-status.danger{

    background:
        rgba(239,68,68,0.12);

    color:#f87171;
}

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

@media(max-width:768px){

    .reach-title{
        font-size:30px;
    }

    .reach-table{
        min-width:1000px;
    }

    .reach-search input{
        width:100%;
    }

}

/* =========================================================
   VIEWS ANALYTICS
========================================================= */

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

.views-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    flex-wrap:wrap;
}

.views-badge{

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

    padding:
        10px
        18px;

    border-radius:999px;

    background:
        rgba(0,229,255,0.08);

    border:
        1px solid rgba(0,229,255,0.16);

    color:#67e8f9;

    font-size:11px;
    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;
}

.views-title{

    font-size:40px;
    font-weight:900;

    color:white;

    margin-bottom:14px;
}

.views-title i{

    color:#00e5ff;

    margin-right:12px;

    text-shadow:
        0 0 25px rgba(0,229,255,0.30);
}

.views-subtitle{

    max-width:760px;

    color:#94a3b8;

    line-height:1.8;

    font-size:15px;
}

/* =========================
   STATUS BOX
========================= */

.views-status-box{

    height:52px;

    padding:
        0
        20px;

    border-radius:18px;

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

    background:
        rgba(34,197,94,0.08);

    border:
        1px solid rgba(34,197,94,0.16);

    color:#4ade80;

    font-size:13px;
    font-weight:700;
}

.views-pulse{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#4ade80;

    box-shadow:
        0 0 12px #4ade80;

    animation:
        pulse 1.5s infinite;
}

/* =========================
   KPI CARD
========================= */

.views-kpi-card{

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.98),
            rgba(10,15,22,0.98)
        );

    border:
        1px solid rgba(255,255,255,0.05);

    border-radius:30px;

    padding:26px;

    min-height:210px;

    transition:.35s ease;

    box-shadow:
        0 18px 40px rgba(0,0,0,0.35);
}

.views-kpi-card:hover{

    transform:
        translateY(-5px);

    border-color:
        rgba(0,229,255,0.16);

    box-shadow:
        0 24px 50px rgba(0,229,255,0.08);
}

.views-kpi-top{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:28px;
}

/* =========================
   ICON
========================= */

.views-kpi-icon{

    width:68px;
    height:68px;

    border-radius:24px;

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

    font-size:26px;
}

.views-kpi-icon.cyan{

    background:
        rgba(0,229,255,0.12);

    color:#67e8f9;
}

.views-kpi-icon.blue{

    background:
        rgba(59,130,246,0.12);

    color:#60a5fa;
}

.views-kpi-icon.purple{

    background:
        rgba(139,92,246,0.12);

    color:#c4b5fd;
}

.views-kpi-icon.green{

    background:
        rgba(34,197,94,0.12);

    color:#4ade80;
}

/* =========================
   GROWTH
========================= */

.views-growth{

    padding:
        7px
        14px;

    border-radius:999px;

    font-size:11px;
    font-weight:700;
}

.views-growth.positive{

    background:
        rgba(0,229,255,0.12);

    color:#67e8f9;
}

.views-growth.warning{

    background:
        rgba(250,204,21,0.12);

    color:#facc15;
}

.views-growth.success{

    background:
        rgba(34,197,94,0.12);

    color:#4ade80;
}

/* =========================
   CONTENT
========================= */

.views-kpi-content small{

    display:block;

    color:#94a3b8;

    margin-bottom:12px;

    font-size:13px;
}

.views-kpi-content h2{

    font-size:42px;
    font-weight:900;

    color:white;

    margin-bottom:10px;
}

.views-kpi-content p{

    color:#64748b;

    margin:0;

    font-size:13px;
}

/* =========================
   TABLE BOX
========================= */

.views-table-box{

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.98),
            rgba(10,15,22,0.98)
        );

    border:
        1px solid rgba(255,255,255,0.05);

    border-radius:30px;

    overflow:hidden;

    box-shadow:
        0 18px 40px rgba(0,0,0,0.35);
}

/* =========================
   TABLE HEADER
========================= */

.views-table-header{

    padding:26px 30px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:20px;
    flex-wrap:wrap;

    border-bottom:
        1px solid rgba(255,255,255,0.05);
}

.views-table-header h5{

    color:white;

    margin-bottom:6px;

    font-weight:700;
}

.views-table-header h5 i{

    color:#00e5ff;

    margin-right:8px;
}

.views-table-header small{
    color:#94a3b8;
}

/* =========================
   SEARCH
========================= */

.views-search{
    position:relative;
}

.views-search i{

    position:absolute;

    left:16px;
    top:50%;

    transform:translateY(-50%);

    color:#64748b;
}

.views-search input{

    width:280px;

    height:48px;

    border:none;

    border-radius:16px;

    padding:
        0
        18px
        0
        46px;

    background:
        rgba(255,255,255,0.04);

    border:
        1px solid rgba(255,255,255,0.05);

    color:white;

    outline:none;
}

/* =========================
   TABLE
========================= */

.views-table{

    width:100%;

    border-collapse:separate;
    border-spacing:0;

    color:white;
}

.views-table thead{

    background:
        rgba(255,255,255,0.03);
}

.views-table thead th{

    padding:18px 24px;

    color:#cbd5e1;

    font-size:12px;
    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;
}

.views-table tbody tr{

    transition:.3s ease;
}

.views-table tbody tr:hover{

    background:
        rgba(0,229,255,0.04);
}

.views-table tbody td{

    padding:24px;

    vertical-align:middle;

    border:none;

    color:#e2e8f0;
}

/* =========================
   PLATFORM INFO
========================= */

.platform-info{

    display:flex;
    align-items:center;
    gap:14px;
}

.platform-icon{

    width:50px;
    height:50px;

    border-radius:16px;

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

    font-size:18px;
}

.platform-icon.tiktok{

    background:
        rgba(0,229,255,0.12);

    color:#67e8f9;
}

.platform-icon.instagram{

    background:
        rgba(255,0,128,0.12);

    color:#ff66b3;
}

.platform-icon.facebook{

    background:
        rgba(59,130,246,0.12);

    color:#60a5fa;
}

.platform-icon.youtube{

    background:
        rgba(255,0,0,0.12);

    color:#ff6b6b;
}

.platform-info strong{

    display:block;

    color:white;

    margin-bottom:4px;
}

.platform-info small{

    color:#94a3b8;

    font-size:12px;
}

/* =========================
   NUMBER
========================= */

.views-number{

    font-weight:700;

    color:#67e8f9;
}

/* =========================
   VIEWS BAR
========================= */

.views-bar{

    width:130px;
    height:10px;

    border-radius:999px;

    overflow:hidden;

    background:
        rgba(255,255,255,0.05);
}

.views-fill{

    height:100%;

    border-radius:999px;
}

.views-fill.high{

    width:98%;

    background:
        linear-gradient(
            90deg,
            #00e5ff,
            #8b5cf6
        );
}

.views-fill.medium{

    width:75%;

    background:
        linear-gradient(
            90deg,
            #3b82f6,
            #8b5cf6
        );
}

.views-fill.low{

    width:48%;

    background:
        linear-gradient(
            90deg,
            #facc15,
            #fb923c
        );
}

.views-fill.critical{

    width:28%;

    background:
        linear-gradient(
            90deg,
            #ef4444,
            #dc2626
        );
}

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

.views-status{

    display:inline-flex;
    justify-content:center;
    align-items:center;

    min-width:100px;

    padding:
        8px
        14px;

    border-radius:999px;

    font-size:12px;
    font-weight:700;
}

.views-status.success{

    background:
        rgba(34,197,94,0.12);

    color:#4ade80;
}

.views-status.info{

    background:
        rgba(59,130,246,0.12);

    color:#60a5fa;
}

.views-status.warning{

    background:
        rgba(250,204,21,0.12);

    color:#facc15;
}

.views-status.danger{

    background:
        rgba(239,68,68,0.12);

    color:#f87171;
}

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

@media(max-width:768px){

    .views-title{
        font-size:30px;
    }

    .views-table{
        min-width:1000px;
    }

    .views-search input{
        width:100%;
    }

}

/* =========================================================
   LEADERBOARD INTELLIGENCE SYSTEM
========================================================= */

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

.leaderboard-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    flex-wrap:wrap;
}

.leaderboard-badge{

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

    padding:
        10px
        18px;

    border-radius:999px;

    background:
        rgba(250,204,21,0.08);

    border:
        1px solid rgba(250,204,21,0.18);

    color:#facc15;

    font-size:11px;
    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;
}

.leaderboard-title{

    font-size:40px;
    font-weight:900;

    color:white;

    margin-bottom:14px;
}

.leaderboard-title i{

    color:#facc15;

    margin-right:12px;

    text-shadow:
        0 0 25px rgba(250,204,21,0.30);
}

.leaderboard-subtitle{

    max-width:760px;

    color:#94a3b8;

    line-height:1.8;

    font-size:15px;
}

/* =========================
   TOP CARD
========================= */

.top-card{

    position:relative;

    overflow:hidden;

    text-align:center;

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.98),
            rgba(10,15,22,0.98)
        );

    border:
        1px solid rgba(255,255,255,0.05);

    border-radius:32px;

    padding:38px 28px;

    transition:.35s ease;

    box-shadow:
        0 18px 40px rgba(0,0,0,0.35);
}

.top-card:hover{

    transform:
        translateY(-6px);

    box-shadow:
        0 24px 50px rgba(250,204,21,0.08);
}

/* =========================
   TOP VARIANT
========================= */

.top-card.gold{

    border:
        1px solid rgba(250,204,21,0.25);
}

.top-card.silver{

    border:
        1px solid rgba(148,163,184,0.20);
}

.top-card.bronze{

    border:
        1px solid rgba(251,146,60,0.20);
}

/* =========================
   MEDAL
========================= */

.top-medal{

    width:90px;
    height:90px;

    border-radius:50%;

    margin:auto auto 24px;

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

    font-size:42px;

    background:
        rgba(255,255,255,0.04);

    border:
        1px solid rgba(255,255,255,0.05);
}

.top-card.gold .top-medal{

    background:
        rgba(250,204,21,0.12);

    box-shadow:
        0 0 30px rgba(250,204,21,0.18);
}

.top-card.silver .top-medal{

    background:
        rgba(148,163,184,0.12);
}

.top-card.bronze .top-medal{

    background:
        rgba(251,146,60,0.12);
}

/* =========================
   TOP CONTENT
========================= */

.top-name{

    color:white;

    font-size:28px;
    font-weight:800;

    margin-bottom:12px;
}

.top-views{

    color:#94a3b8;

    margin-bottom:18px;

    font-size:15px;
}

.top-tag{

    display:inline-flex;
    justify-content:center;
    align-items:center;

    padding:
        8px
        16px;

    border-radius:999px;

    font-size:12px;
    font-weight:700;
}

.top-tag.gold{

    background:
        rgba(250,204,21,0.12);

    color:#facc15;
}

.top-tag.blue{

    background:
        rgba(59,130,246,0.12);

    color:#60a5fa;
}

.top-tag.orange{

    background:
        rgba(251,146,60,0.12);

    color:#fb923c;
}

/* =========================
   TABLE BOX
========================= */

.rank-table-box{

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.98),
            rgba(10,15,22,0.98)
        );

    border:
        1px solid rgba(255,255,255,0.05);

    border-radius:32px;

    overflow:hidden;

    box-shadow:
        0 18px 40px rgba(0,0,0,0.35);
}

/* =========================
   TABLE HEADER
========================= */

.rank-table-header{

    padding:28px 30px;

    border-bottom:
        1px solid rgba(255,255,255,0.05);
}

.rank-table-header h5{

    color:white;

    margin-bottom:6px;

    font-weight:700;
}

.rank-table-header h5 i{

    color:#facc15;

    margin-right:8px;
}

.rank-table-header small{

    color:#94a3b8;
}

/* =========================
   TABLE
========================= */

.rank-table{

    width:100%;

    border-collapse:separate;
    border-spacing:0;

    color:white;
}

.rank-table thead{

    background:
        rgba(255,255,255,0.03);
}

.rank-table thead th{

    padding:18px 24px;

    color:#cbd5e1;

    font-size:12px;
    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;
}

.rank-table tbody tr{

    transition:.3s ease;
}

.rank-table tbody tr:hover{

    background:
        rgba(250,204,21,0.04);
}

.rank-table tbody td{

    padding:24px;

    vertical-align:middle;

    border:none;

    color:#e2e8f0;
}

/* =========================
   RANK BADGE
========================= */

.rank-badge{

    width:42px;
    height:42px;

    border-radius:14px;

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

    font-weight:800;
    font-size:14px;
}

.rank-badge.gold{

    background:
        rgba(250,204,21,0.12);

    color:#facc15;
}

.rank-badge.silver{

    background:
        rgba(148,163,184,0.12);

    color:#cbd5e1;
}

.rank-badge.bronze{

    background:
        rgba(251,146,60,0.12);

    color:#fb923c;
}

/* =========================
   USER INFO
========================= */

.rank-user{

    display:flex;
    align-items:center;
    gap:14px;
}

.rank-avatar{

    width:48px;
    height:48px;

    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            #0f172a,
            #1e293b
        );

    border:
        1px solid rgba(255,255,255,0.05);

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

    color:#facc15;

    font-weight:700;
}

.rank-user strong{

    display:block;

    color:white;

    margin-bottom:4px;
}

.rank-user small{

    color:#94a3b8;

    font-size:12px;
}

/* =========================
   NUMBER
========================= */

.rank-number{

    font-weight:800;

    color:#facc15;
}

/* =========================
   FYP BAR
========================= */

.fyp-bar{

    width:120px;
    height:10px;

    border-radius:999px;

    overflow:hidden;

    background:
        rgba(255,255,255,0.05);
}

.fyp-fill{

    height:100%;

    border-radius:999px;
}

.fyp-fill.high{

    width:92%;

    background:
        linear-gradient(
            90deg,
            #facc15,
            #f59e0b
        );
}

.fyp-fill.medium{

    width:74%;

    background:
        linear-gradient(
            90deg,
            #3b82f6,
            #8b5cf6
        );
}

.fyp-fill.low{

    width:52%;

    background:
        linear-gradient(
            90deg,
            #fb923c,
            #f97316
        );
}

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

.rank-status{

    display:inline-flex;
    justify-content:center;
    align-items:center;

    min-width:100px;

    padding:
        8px
        14px;

    border-radius:999px;

    font-size:12px;
    font-weight:700;
}

.rank-status.elite{

    background:
        rgba(34,197,94,0.12);

    color:#4ade80;
}

.rank-status.pro{

    background:
        rgba(59,130,246,0.12);

    color:#60a5fa;
}

.rank-status.rising{

    background:
        rgba(250,204,21,0.12);

    color:#facc15;
}

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

@media(max-width:768px){

    .leaderboard-title{
        font-size:30px;
    }

    .rank-table{
        min-width:950px;
    }

}

/* =========================================================
   KPI SYSTEM
========================================================= */

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

.kpi-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    flex-wrap:wrap;
}

.kpi-badge{

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

    padding:
        10px
        18px;

    border-radius:999px;

    background:
        rgba(0,229,255,0.08);

    border:
        1px solid rgba(0,229,255,0.16);

    color:#67e8f9;

    font-size:11px;
    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;
}

.kpi-title{

    font-size:40px;
    font-weight:900;

    color:white;

    margin-bottom:14px;
}

.kpi-title i{

    color:#00e5ff;

    margin-right:12px;
}

.kpi-subtitle{

    max-width:760px;

    color:#94a3b8;

    line-height:1.8;

    font-size:15px;
}

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

.kpi-status-box{

    height:52px;

    padding:
        0
        20px;

    border-radius:18px;

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

    background:
        rgba(34,197,94,0.08);

    border:
        1px solid rgba(34,197,94,0.16);

    color:#4ade80;

    font-size:13px;
    font-weight:700;
}

.kpi-pulse{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#4ade80;

    box-shadow:
        0 0 12px #4ade80;

    animation:
        pulse 1.5s infinite;
}

/* =========================
   KPI CARD
========================= */

.kpi-card{

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.98),
            rgba(10,15,22,0.98)
        );

    border:
        1px solid rgba(255,255,255,0.05);

    border-radius:30px;

    padding:28px;

    min-height:220px;

    transition:.35s ease;

    box-shadow:
        0 18px 40px rgba(0,0,0,0.35);
}

.kpi-card:hover{

    transform:
        translateY(-5px);

    border-color:
        rgba(0,229,255,0.16);
}

.kpi-card-top{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:28px;
}

/* =========================
   ICON
========================= */

.kpi-icon{

    width:68px;
    height:68px;

    border-radius:24px;

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

    font-size:26px;
}

.kpi-icon.cyan{

    background:
        rgba(0,229,255,0.12);

    color:#67e8f9;
}

.kpi-icon.green{

    background:
        rgba(34,197,94,0.12);

    color:#4ade80;
}

.kpi-icon.warning{

    background:
        rgba(250,204,21,0.12);

    color:#facc15;
}

/* =========================
   GROWTH
========================= */

.kpi-growth{

    padding:
        7px
        14px;

    border-radius:999px;

    font-size:11px;
    font-weight:700;
}

.kpi-growth.positive{

    background:
        rgba(0,229,255,0.12);

    color:#67e8f9;
}

.kpi-growth.success{

    background:
        rgba(34,197,94,0.12);

    color:#4ade80;
}

.kpi-growth.warning{

    background:
        rgba(250,204,21,0.12);

    color:#facc15;
}

/* =========================
   CONTENT
========================= */

.kpi-card-content small{

    display:block;

    color:#94a3b8;

    margin-bottom:12px;

    font-size:13px;
}

.kpi-card-content h2{

    font-size:42px;
    font-weight:900;

    color:white;

    margin-bottom:10px;
}

.kpi-card-content p{

    color:#64748b;

    margin:0;

    font-size:13px;
}

/* =========================
   PROGRESS BOX
========================= */

.kpi-progress-box{

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.98),
            rgba(10,15,22,0.98)
        );

    border:
        1px solid rgba(255,255,255,0.05);

    border-radius:30px;

    padding:30px;

    box-shadow:
        0 18px 40px rgba(0,0,0,0.35);
}

.kpi-progress-box h5{

    color:white;
}

.kpi-progress-box h5 i{

    color:#00e5ff;

    margin-right:8px;
}

.kpi-progress-box small{

    color:#94a3b8;
}

.progress-value{

    color:#67e8f9;

    font-size:28px;
    font-weight:900;
}

/* =========================
   PROGRESS BAR
========================= */

.kpi-progress{

    width:100%;
    height:22px;

    border-radius:999px;

    overflow:hidden;

    background:
        rgba(255,255,255,0.05);
}

.kpi-progress-fill{

    width:84%;
    height:100%;

    display:flex;
    justify-content:flex-end;
    align-items:center;

    padding-right:14px;

    border-radius:999px;

    font-size:12px;
    font-weight:700;

    color:white;

    background:
        linear-gradient(
            90deg,
            #00e5ff,
            #8b5cf6
        );
}

/* =========================
   TABLE BOX
========================= */

.kpi-table-box{

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.98),
            rgba(10,15,22,0.98)
        );

    border:
        1px solid rgba(255,255,255,0.05);

    border-radius:30px;

    overflow:hidden;

    box-shadow:
        0 18px 40px rgba(0,0,0,0.35);
}

.kpi-table-header{

    padding:28px 30px;

    border-bottom:
        1px solid rgba(255,255,255,0.05);
}

.kpi-table-header h5{

    color:white;

    margin-bottom:6px;
}

.kpi-table-header h5 i{

    color:#00e5ff;

    margin-right:8px;
}

.kpi-table-header small{

    color:#94a3b8;
}

/* =========================
   TABLE
========================= */

.kpi-table{

    width:100%;

    border-collapse:separate;
    border-spacing:0;

    color:white;
}

.kpi-table thead{

    background:
        rgba(255,255,255,0.03);
}

.kpi-table thead th{

    padding:18px 24px;

    color:#cbd5e1;

    font-size:12px;
    font-weight:700;

    text-transform:uppercase;
}

.kpi-table tbody tr{

    transition:.3s ease;
}

.kpi-table tbody tr:hover{

    background:
        rgba(0,229,255,0.04);
}

.kpi-table tbody td{

    padding:24px;

    border:none;

    vertical-align:middle;

    color:#e2e8f0;
}

/* =========================
   USER
========================= */

.kpi-user{

    display:flex;
    align-items:center;
    gap:14px;
}

.kpi-avatar{

    width:48px;
    height:48px;

    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            #0f172a,
            #1e293b
        );

    border:
        1px solid rgba(255,255,255,0.05);

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

    color:#00e5ff;

    font-weight:700;
}

.kpi-user strong{

    display:block;

    color:white;

    margin-bottom:4px;
}

.kpi-user small{

    color:#94a3b8;

    font-size:12px;
}

/* =========================
   NUMBER
========================= */

.kpi-number{

    font-weight:800;

    color:#67e8f9;
}

.kpi-number.success{
    color:#4ade80;
}

.kpi-number.info{
    color:#60a5fa;
}

.kpi-number.warning{
    color:#facc15;
}

/* =========================
   MEMBER PROGRESS
========================= */

.member-progress{

    width:140px;
    height:12px;

    border-radius:999px;

    overflow:hidden;

    background:
        rgba(255,255,255,0.05);
}

.member-progress-fill{

    height:100%;

    display:flex;
    justify-content:flex-end;
    align-items:center;

    padding-right:8px;

    border-radius:999px;

    font-size:10px;
    font-weight:700;

    color:white;
}

.member-progress-fill.success{

    background:
        linear-gradient(
            90deg,
            #22c55e,
            #16a34a
        );
}

.member-progress-fill.info{

    background:
        linear-gradient(
            90deg,
            #3b82f6,
            #2563eb
        );
}

.member-progress-fill.warning{

    background:
        linear-gradient(
            90deg,
            #facc15,
            #f59e0b
        );
}

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

.kpi-status{

    display:inline-flex;
    justify-content:center;
    align-items:center;

    min-width:110px;

    padding:
        8px
        14px;

    border-radius:999px;

    font-size:12px;
    font-weight:700;
}

.kpi-status.success{

    background:
        rgba(34,197,94,0.12);

    color:#4ade80;
}

.kpi-status.info{

    background:
        rgba(59,130,246,0.12);

    color:#60a5fa;
}

.kpi-status.warning{

    background:
        rgba(250,204,21,0.12);

    color:#facc15;
}

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

@media(max-width:768px){

    .kpi-title{
        font-size:30px;
    }

    .kpi-table{
        min-width:1000px;
    }

}

/* =========================================================
   TOP OPS SYSTEM
========================================================= */

.topops-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    flex-wrap:wrap;
}

.topops-badge{

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

    padding:10px 18px;

    border-radius:999px;

    background:rgba(239,68,68,0.08);

    border:1px solid rgba(239,68,68,0.18);

    color:#f87171;

    font-size:11px;
    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;
}

.topops-title{

    font-size:40px;
    font-weight:900;

    color:white;

    margin-bottom:14px;
}

.topops-title i{

    color:#ff4d4d;

    margin-right:12px;
}

.topops-subtitle{

    max-width:760px;

    color:#94a3b8;

    line-height:1.8;

    font-size:15px;
}

/* CARD */

.topops-card{

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.98),
            rgba(10,15,22,0.98)
        );

    border:1px solid rgba(255,255,255,0.05);

    border-radius:30px;

    padding:28px;

    min-height:220px;

    transition:.35s ease;
}

.topops-card:hover{

    transform:translateY(-5px);

    border-color:rgba(255,0,0,0.18);
}

.topops-card-top{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:28px;
}

/* ICON */

.topops-icon{

    width:68px;
    height:68px;

    border-radius:22px;

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

    font-size:26px;
}

.topops-icon.red{
    background:rgba(239,68,68,0.12);
    color:#f87171;
}

.topops-icon.cyan{
    background:rgba(0,229,255,0.12);
    color:#67e8f9;
}

.topops-icon.warning{
    background:rgba(250,204,21,0.12);
    color:#facc15;
}

/* GROWTH */

.topops-growth{

    padding:7px 14px;

    border-radius:999px;

    font-size:11px;
    font-weight:700;
}

.topops-growth.danger{
    background:rgba(239,68,68,0.12);
    color:#f87171;
}

.topops-growth.positive{
    background:rgba(0,229,255,0.12);
    color:#67e8f9;
}

.topops-growth.warning{
    background:rgba(250,204,21,0.12);
    color:#facc15;
}

/* CONTENT */

.topops-content small{

    display:block;

    color:#94a3b8;

    margin-bottom:12px;
}

.topops-content h2{

    font-size:42px;
    font-weight:900;

    color:white;

    margin-bottom:10px;
}

.topops-content p{

    color:#64748b;

    margin:0;
}

/* TABLE */

.topops-table-box{

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.98),
            rgba(10,15,22,0.98)
        );

    border:1px solid rgba(255,255,255,0.05);

    border-radius:30px;

    overflow:hidden;
}

.topops-table-header{

    padding:28px 30px;

    border-bottom:1px solid rgba(255,255,255,0.05);
}

.topops-table-header h5{

    color:white;

    margin-bottom:6px;
}

.topops-table-header h5 i{

    color:#ff4d4d;

    margin-right:8px;
}

.topops-table-header small{
    color:#94a3b8;
}

.topops-table{

    width:100%;

    border-collapse:separate;
    border-spacing:0;

    color:white;
}

.topops-table thead{

    background:rgba(255,255,255,0.03);
}

.topops-table thead th{

    padding:18px 24px;

    color:#cbd5e1;

    font-size:12px;
    font-weight:700;

    text-transform:uppercase;
}

.topops-table tbody tr{

    transition:.3s ease;
}

.topops-table tbody tr:hover{

    background:rgba(255,0,0,0.04);
}

.topops-table tbody td{

    padding:24px;

    border:none;

    vertical-align:middle;
}

/* RANK */

.top-rank{

    width:42px;
    height:42px;

    border-radius:14px;

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

    font-weight:800;
}

.top-rank.gold{
    background:rgba(250,204,21,0.12);
    color:#facc15;
}

.top-rank.silver{
    background:rgba(148,163,184,0.12);
    color:#cbd5e1;
}

.top-rank.bronze{
    background:rgba(251,146,60,0.12);
    color:#fb923c;
}

/* PLATFORM */

.platform-badge{

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:8px 14px;

    border-radius:999px;

    font-size:12px;
    font-weight:700;
}

.platform-badge.tiktok{
    background:rgba(0,229,255,0.12);
    color:#67e8f9;
}

.platform-badge.instagram{
    background:rgba(255,0,128,0.12);
    color:#ff66b3;
}

.platform-badge.youtube{
    background:rgba(255,0,0,0.12);
    color:#ff6b6b;
}

/* CONTENT */

.content-info strong{

    display:block;

    color:white;

    margin-bottom:4px;
}

.content-info small{

    color:#94a3b8;

    font-size:12px;
}

/* NUMBER */

.views-number{

    color:#67e8f9;

    font-weight:800;
}

.engagement-number{

    color:#4ade80;

    font-weight:800;
}

/* FYP */

.fyp-signal{

    width:120px;
    height:10px;

    border-radius:999px;
}

.fyp-signal.high{

    background:
        linear-gradient(
            90deg,
            #22c55e,
            #16a34a
        );
}

.fyp-signal.medium{

    background:
        linear-gradient(
            90deg,
            #3b82f6,
            #2563eb
        );
}

.fyp-signal.low{

    background:
        linear-gradient(
            90deg,
            #facc15,
            #f59e0b
        );
}

/* STATUS */

.top-status{

    display:inline-flex;
    justify-content:center;
    align-items:center;

    min-width:100px;

    padding:8px 14px;

    border-radius:999px;

    font-size:12px;
    font-weight:700;
}

.top-status.success{
    background:rgba(34,197,94,0.12);
    color:#4ade80;
}

.top-status.info{
    background:rgba(59,130,246,0.12);
    color:#60a5fa;
}

.top-status.warning{
    background:rgba(250,204,21,0.12);
    color:#facc15;
}

@media(max-width:768px){

    .topops-title{
        font-size:30px;
    }

    .topops-table{
        min-width:1100px;
    }

}

/* =========================================================
   DAILY REPORT SYSTEM
========================================================= */

.daily-header{

    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    flex-wrap:wrap;
}

.daily-badge{

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

    padding:10px 18px;

    border-radius:999px;

    background:rgba(0,229,255,0.08);

    border:1px solid rgba(0,229,255,0.18);

    color:#67e8f9;

    font-size:11px;
    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;
}

.daily-title{

    font-size:40px;
    font-weight:900;

    color:white;

    margin-bottom:14px;
}

.daily-title i{

    color:#00e5ff;

    margin-right:10px;
}

.daily-subtitle{

    max-width:760px;

    color:#94a3b8;

    line-height:1.8;

    font-size:15px;
}

/* EXPORT BUTTON */

.export-btn{

    border:none;

    border-radius:16px;

    padding:14px 24px;

    font-weight:700;

    background:
        linear-gradient(
            135deg,
            #16a34a,
            #22c55e
        );

    box-shadow:
        0 10px 30px rgba(34,197,94,0.2);
}

/* CARD */

.daily-card{

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.98),
            rgba(10,15,22,0.98)
        );

    border:1px solid rgba(255,255,255,0.05);

    border-radius:28px;

    padding:28px;

    min-height:220px;

    transition:.35s ease;
}

.daily-card:hover{

    transform:translateY(-5px);

    border-color:rgba(0,229,255,0.18);
}

.daily-card-top{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:26px;
}

/* ICON */

.daily-icon{

    width:66px;
    height:66px;

    border-radius:20px;

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

    font-size:24px;
}

.daily-icon.cyan{
    background:rgba(0,229,255,0.12);
    color:#67e8f9;
}

.daily-icon.blue{
    background:rgba(59,130,246,0.12);
    color:#60a5fa;
}

.daily-icon.warning{
    background:rgba(250,204,21,0.12);
    color:#facc15;
}

.daily-icon.red{
    background:rgba(239,68,68,0.12);
    color:#f87171;
}

/* GROWTH */

.daily-growth{

    padding:7px 14px;

    border-radius:999px;

    font-size:11px;
    font-weight:700;
}

.daily-growth.positive{
    background:rgba(34,197,94,0.12);
    color:#4ade80;
}

.daily-growth.info{
    background:rgba(59,130,246,0.12);
    color:#60a5fa;
}

.daily-growth.warning{
    background:rgba(250,204,21,0.12);
    color:#facc15;
}

.daily-growth.danger{
    background:rgba(239,68,68,0.12);
    color:#f87171;
}

/* CONTENT */

.daily-content small{

    display:block;

    color:#94a3b8;

    margin-bottom:12px;
}

.daily-content h2{

    font-size:42px;
    font-weight:900;

    color:white;

    margin-bottom:10px;
}

.daily-content p{

    margin:0;

    color:#64748b;
}

/* TABLE */

.daily-table-box{

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.98),
            rgba(10,15,22,0.98)
        );

    border:1px solid rgba(255,255,255,0.05);

    border-radius:30px;

    overflow:hidden;
}

.daily-table-header{

    padding:28px 30px;

    border-bottom:1px solid rgba(255,255,255,0.05);

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}

.daily-table-header h5{

    color:white;

    margin-bottom:6px;
}

.daily-table-header h5 i{

    color:#00e5ff;

    margin-right:8px;
}

.daily-table-header small{
    color:#94a3b8;
}

/* LIVE */

.live-indicator{

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

    color:#4ade80;

    font-size:12px;
    font-weight:700;
}

.live-dot{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#22c55e;

    box-shadow:
        0 0 12px #22c55e;
}

/* TABLE */

.daily-table{

    width:100%;

    border-collapse:separate;
    border-spacing:0;

    color:white;
}

.daily-table thead{

    background:rgba(255,255,255,0.03);
}

.daily-table thead th{

    padding:18px 24px;

    color:#cbd5e1;

    font-size:12px;
    font-weight:700;

    text-transform:uppercase;
}

.daily-table tbody tr{

    transition:.3s ease;
}

.daily-table tbody tr:hover{

    background:rgba(0,229,255,0.04);
}

.daily-table tbody td{

    padding:22px 24px;

    border:none;

    vertical-align:middle;
}

/* PLATFORM */

.platform-badge{

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:8px 14px;

    border-radius:999px;

    font-size:12px;
    font-weight:700;
}

.platform-badge.tiktok{
    background:rgba(0,229,255,0.12);
    color:#67e8f9;
}

.platform-badge.instagram{
    background:rgba(255,0,128,0.12);
    color:#ff66b3;
}

.platform-badge.facebook{
    background:rgba(59,130,246,0.12);
    color:#60a5fa;
}

.platform-badge.youtube{
    background:rgba(255,0,0,0.12);
    color:#ff6b6b;
}

/* TEXT */

.cyan-text{

    color:#67e8f9;

    font-weight:700;
}

.green-text{

    color:#4ade80;

    font-weight:700;
}

/* STATUS */

.status-badge{

    display:inline-flex;
    justify-content:center;
    align-items:center;

    min-width:120px;

    padding:8px 16px;

    border-radius:999px;

    font-size:12px;
    font-weight:700;
}

.status-badge.success{
    background:rgba(34,197,94,0.12);
    color:#4ade80;
}

.status-badge.info{
    background:rgba(59,130,246,0.12);
    color:#60a5fa;
}

.status-badge.warning{
    background:rgba(250,204,21,0.12);
    color:#facc15;
}

.status-badge.danger{
    background:rgba(239,68,68,0.12);
    color:#f87171;
}

@media(max-width:768px){

    .daily-title{
        font-size:30px;
    }

    .daily-table{
        min-width:950px;
    }

}

/* =========================================================
   WEEKLY REPORT SYSTEM
========================================================= */

.weekly-header{

    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    flex-wrap:wrap;
}

.weekly-badge{

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

    padding:10px 18px;

    border-radius:999px;

    background:rgba(59,130,246,0.08);

    border:1px solid rgba(59,130,246,0.18);

    color:#60a5fa;

    font-size:11px;
    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;
}

.weekly-title{

    font-size:40px;
    font-weight:900;

    color:white;

    margin-bottom:14px;
}

.weekly-title i{

    color:#60a5fa;

    margin-right:10px;
}

.weekly-subtitle{

    max-width:760px;

    color:#94a3b8;

    line-height:1.8;

    font-size:15px;
}

/* EXPORT */

.export-weekly-btn{

    border:none;

    border-radius:16px;

    padding:14px 24px;

    font-weight:700;

    color:white;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #3b82f6
        );

    box-shadow:
        0 10px 30px rgba(59,130,246,0.2);
}

/* CARD */

.weekly-card{

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.98),
            rgba(10,15,22,0.98)
        );

    border:1px solid rgba(255,255,255,0.05);

    border-radius:28px;

    padding:28px;

    min-height:220px;

    transition:.35s ease;
}

.weekly-card:hover{

    transform:translateY(-5px);

    border-color:rgba(59,130,246,0.18);
}

.weekly-top{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:26px;
}

/* ICON */

.weekly-icon{

    width:66px;
    height:66px;

    border-radius:20px;

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

    font-size:24px;
}

.weekly-icon.cyan{
    background:rgba(0,229,255,0.12);
    color:#67e8f9;
}

.weekly-icon.blue{
    background:rgba(59,130,246,0.12);
    color:#60a5fa;
}

.weekly-icon.warning{
    background:rgba(250,204,21,0.12);
    color:#facc15;
}

.weekly-icon.red{
    background:rgba(239,68,68,0.12);
    color:#f87171;
}

/* GROWTH */

.weekly-growth{

    padding:7px 14px;

    border-radius:999px;

    font-size:11px;
    font-weight:700;
}

.weekly-growth.positive{
    background:rgba(34,197,94,0.12);
    color:#4ade80;
}

.weekly-growth.info{
    background:rgba(59,130,246,0.12);
    color:#60a5fa;
}

.weekly-growth.warning{
    background:rgba(250,204,21,0.12);
    color:#facc15;
}

.weekly-growth.danger{
    background:rgba(239,68,68,0.12);
    color:#f87171;
}

/* CONTENT */

.weekly-content small{

    display:block;

    color:#94a3b8;

    margin-bottom:12px;
}

.weekly-content h2{

    font-size:42px;
    font-weight:900;

    color:white;

    margin-bottom:10px;
}

.weekly-content p{

    margin:0;

    color:#64748b;
}

/* TABLE */

.weekly-table-box{

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.98),
            rgba(10,15,22,0.98)
        );

    border:1px solid rgba(255,255,255,0.05);

    border-radius:30px;

    overflow:hidden;
}

.weekly-table-header{

    padding:28px 30px;

    border-bottom:1px solid rgba(255,255,255,0.05);

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}

.weekly-table-header h5{

    color:white;

    margin-bottom:6px;
}

.weekly-table-header h5 i{

    color:#60a5fa;

    margin-right:8px;
}

.weekly-table-header small{
    color:#94a3b8;
}

/* LIVE */

.weekly-live{

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

    color:#60a5fa;

    font-size:12px;
    font-weight:700;
}

.weekly-dot{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#3b82f6;

    box-shadow:
        0 0 12px #3b82f6;
}

/* TABLE */

.weekly-table{

    width:100%;

    border-collapse:separate;
    border-spacing:0;

    color:white;
}

.weekly-table thead{

    background:rgba(255,255,255,0.03);
}

.weekly-table thead th{

    padding:18px 24px;

    color:#cbd5e1;

    font-size:12px;
    font-weight:700;

    text-transform:uppercase;
}

.weekly-table tbody tr{

    transition:.3s ease;
}

.weekly-table tbody tr:hover{

    background:rgba(59,130,246,0.04);
}

.weekly-table tbody td{

    padding:22px 24px;

    border:none;

    vertical-align:middle;
}

/* PLATFORM */

.weekly-platform{

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:8px 14px;

    border-radius:999px;

    font-size:12px;
    font-weight:700;
}

.weekly-platform.tiktok{
    background:rgba(0,229,255,0.12);
    color:#67e8f9;
}

.weekly-platform.instagram{
    background:rgba(255,0,128,0.12);
    color:#ff66b3;
}

.weekly-platform.facebook{
    background:rgba(59,130,246,0.12);
    color:#60a5fa;
}

.weekly-platform.youtube{
    background:rgba(255,0,0,0.12);
    color:#ff6b6b;
}

/* TEXT */

.cyan-text{

    color:#67e8f9;

    font-weight:700;
}

.green-text{

    color:#4ade80;

    font-weight:700;
}

/* STATUS */

.weekly-status{

    display:inline-flex;
    justify-content:center;
    align-items:center;

    min-width:90px;

    padding:8px 16px;

    border-radius:999px;

    font-size:12px;
    font-weight:700;
}

.weekly-status.success{
    background:rgba(34,197,94,0.12);
    color:#4ade80;
}

.weekly-status.info{
    background:rgba(59,130,246,0.12);
    color:#60a5fa;
}

.weekly-status.warning{
    background:rgba(250,204,21,0.12);
    color:#facc15;
}

.weekly-status.danger{
    background:rgba(239,68,68,0.12);
    color:#f87171;
}

/* RESPONSIVE */

@media(max-width:768px){

    .weekly-title{
        font-size:30px;
    }

    .weekly-table{
        min-width:950px;
    }

}
/* =========================================================
   MONTHLY REPORT SYSTEM
========================================================= */

.monthly-header{

    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:20px;
    flex-wrap:wrap;
}

.monthly-badge{

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

    padding:10px 18px;

    border-radius:999px;

    background:rgba(168,85,247,0.08);

    border:1px solid rgba(168,85,247,0.18);

    color:#c084fc;

    font-size:11px;
    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;
}

.monthly-title{

    font-size:40px;
    font-weight:900;

    color:white;

    margin-bottom:14px;
}

.monthly-title i{

    color:#c084fc;

    margin-right:10px;
}

.monthly-subtitle{

    max-width:760px;

    color:#94a3b8;

    line-height:1.8;

    font-size:15px;
}

/* BUTTON */

.export-monthly-btn{

    border:none;

    border-radius:16px;

    padding:14px 24px;

    font-weight:700;

    color:white;

    background:
        linear-gradient(
            135deg,
            #7c3aed,
            #a855f7
        );

    box-shadow:
        0 10px 30px rgba(168,85,247,0.25);
}

/* CARD */

.monthly-card{

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.98),
            rgba(10,15,22,0.98)
        );

    border:1px solid rgba(255,255,255,0.05);

    border-radius:28px;

    padding:28px;

    min-height:220px;

    transition:.35s ease;
}

.monthly-card:hover{

    transform:translateY(-5px);

    border-color:rgba(168,85,247,0.18);
}

.monthly-top{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:26px;
}

/* ICON */

.monthly-icon{

    width:66px;
    height:66px;

    border-radius:20px;

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

    font-size:24px;
}

.monthly-icon.cyan{
    background:rgba(0,229,255,0.12);
    color:#67e8f9;
}

.monthly-icon.blue{
    background:rgba(59,130,246,0.12);
    color:#60a5fa;
}

.monthly-icon.warning{
    background:rgba(250,204,21,0.12);
    color:#facc15;
}

.monthly-icon.red{
    background:rgba(239,68,68,0.12);
    color:#f87171;
}

/* GROWTH */

.monthly-growth{

    padding:7px 14px;

    border-radius:999px;

    font-size:11px;
    font-weight:700;
}

.monthly-growth.positive{
    background:rgba(34,197,94,0.12);
    color:#4ade80;
}

.monthly-growth.info{
    background:rgba(59,130,246,0.12);
    color:#60a5fa;
}

.monthly-growth.warning{
    background:rgba(250,204,21,0.12);
    color:#facc15;
}

.monthly-growth.danger{
    background:rgba(239,68,68,0.12);
    color:#f87171;
}

/* CONTENT */

.monthly-content small{

    display:block;

    color:#94a3b8;

    margin-bottom:12px;
}

.monthly-content h2{

    font-size:42px;
    font-weight:900;

    color:white;

    margin-bottom:10px;
}

.monthly-content p{

    margin:0;

    color:#64748b;
}

/* TABLE */

.monthly-table-box{

    background:
        linear-gradient(
            180deg,
            rgba(15,23,42,0.98),
            rgba(10,15,22,0.98)
        );

    border:1px solid rgba(255,255,255,0.05);

    border-radius:30px;

    overflow:hidden;
}

.monthly-table-header{

    padding:28px 30px;

    border-bottom:1px solid rgba(255,255,255,0.05);

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}

.monthly-table-header h5{

    color:white;

    margin-bottom:6px;
}

.monthly-table-header h5 i{

    color:#c084fc;

    margin-right:8px;
}

.monthly-table-header small{
    color:#94a3b8;
}

/* LIVE */

.monthly-live{

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

    color:#c084fc;

    font-size:12px;
    font-weight:700;
}

.monthly-dot{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#a855f7;

    box-shadow:
        0 0 12px #a855f7;
}

/* TABLE */

.monthly-table{

    width:100%;

    border-collapse:separate;
    border-spacing:0;

    color:white;
}

.monthly-table thead{

    background:rgba(255,255,255,0.03);
}

.monthly-table thead th{

    padding:18px 24px;

    color:#cbd5e1;

    font-size:12px;
    font-weight:700;

    text-transform:uppercase;
}

.monthly-table tbody tr{

    transition:.3s ease;
}

.monthly-table tbody tr:hover{

    background:rgba(168,85,247,0.04);
}

.monthly-table tbody td{

    padding:22px 24px;

    border:none;

    vertical-align:middle;
}

/* PLATFORM */

.monthly-platform{

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:8px 14px;

    border-radius:999px;

    font-size:12px;
    font-weight:700;
}

.monthly-platform.tiktok{
    background:rgba(0,229,255,0.12);
    color:#67e8f9;
}

.monthly-platform.instagram{
    background:rgba(255,0,128,0.12);
    color:#ff66b3;
}

.monthly-platform.facebook{
    background:rgba(59,130,246,0.12);
    color:#60a5fa;
}

.monthly-platform.youtube{
    background:rgba(255,0,0,0.12);
    color:#ff6b6b;
}

/* TEXT */

.cyan-text{

    color:#67e8f9;

    font-weight:700;
}

.green-text{

    color:#4ade80;

    font-weight:700;
}

/* STATUS */

.monthly-status{

    display:inline-flex;
    justify-content:center;
    align-items:center;

    min-width:90px;

    padding:8px 16px;

    border-radius:999px;

    font-size:12px;
    font-weight:700;
}

.monthly-status.success{
    background:rgba(34,197,94,0.12);
    color:#4ade80;
}

.monthly-status.info{
    background:rgba(59,130,246,0.12);
    color:#60a5fa;
}

.monthly-status.warning{
    background:rgba(250,204,21,0.12);
    color:#facc15;
}

.monthly-status.danger{
    background:rgba(239,68,68,0.12);
    color:#f87171;
}

/* RESPONSIVE */

@media(max-width:768px){

    .monthly-title{
        font-size:30px;
    }

    .monthly-table{
        min-width:950px;
    }

}

/* ========================================
   INTEL FORM
======================================== */

.intel-form-box{
    background:#0a0f1c;

    border:
        1px solid rgba(0,229,255,0.08);

    border-radius:24px;

    padding:35px;

    box-shadow:
        0 0 40px rgba(0,229,255,0.05);
}

/* LABEL */

.intel-label{
    display:block;

    margin-bottom:10px;

    color:#dbeafe;

    font-size:14px;
    font-weight:600;
}

/* INPUT */

.intel-input{
    width:100%;

    background:#111827;

    border:
        1px solid rgba(255,255,255,0.08);

    border-radius:14px;

    height:52px;

    padding:0 18px;

    color:#fff;

    transition:0.3s;
}

.intel-input:focus{
    outline:none;

    border-color:#00e5ff;

    box-shadow:
        0 0 20px rgba(0,229,255,0.15);
}

/* BUTTON */

.btn-intel-primary{
    background:
        linear-gradient(
            135deg,
            #00e5ff,
            #0099ff
        );

    border:none;

    height:52px;

    padding:0 28px;

    border-radius:14px;

    color:#fff;

    font-weight:700;

    transition:0.3s;
}

.btn-intel-primary:hover{
    transform:translateY(-2px);

    box-shadow:
        0 10px 25px rgba(0,229,255,0.25);
}
/* ========================================
   INTEL TABLE
======================================== */

.intel-table-box{
    background:#0a0f1c;

    border:
        1px solid rgba(255,255,255,0.05);

    border-radius:24px;

    overflow:hidden;
}

/* HEADER */

.intel-table-header{
    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px 30px;

    border-bottom:
        1px solid rgba(255,255,255,0.05);
}

/* TABLE */

.intel-table{
    width:100%;

    border-collapse:collapse;

    color:#fff;
}

.intel-table thead{
    background:#111827;
}

.intel-table thead th{
    padding:18px;

    font-size:13px;

    text-transform:uppercase;

    color:#94a3b8;

    border:none;
}

.intel-table tbody tr{
    border-bottom:
        1px solid rgba(255,255,255,0.04);

    transition:0.3s;
}

.intel-table tbody tr:hover{
    background:
        rgba(0,229,255,0.03);
}

.intel-table tbody td{
    padding:18px;

    vertical-align:middle;
}

/* USERNAME */

.username-text{
    color:#00e5ff;
}

/* STATUS */

.status-active{
    background:
        rgba(34,197,94,0.15);

    color:#22c55e;

    padding:8px 14px;

    border-radius:10px;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;
}

/* ACTION */

.table-action-group{
    display:flex;

    gap:10px;
}

.btn-table-action{
    width:38px;
    height:38px;

    border:none;

    border-radius:10px;

    color:#fff;

    transition:0.3s;
}

.btn-table-action.view{
    background:#0ea5e9;
}

.btn-table-action.edit{
    background:#f59e0b;
}

.btn-table-action.delete{
    background:#ef4444;
}

.btn-table-action:hover{
    transform:translateY(-2px);
}
/* =========================================================
    GLOBAL KPI CARD STYLE
========================================================= */

.super-card{

    position: relative;

    background: linear-gradient(
        145deg,
        #111827,
        #0f172a
    );

    border-radius: 22px;

    padding: 24px;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,0.06);

    box-shadow:
        0 10px 30px rgba(0,0,0,0.35);

    transition: all 0.35s ease;

    height: 100%;

}

.super-card:hover{

    transform: translateY(-6px);

    border-color: rgba(59,130,246,0.4);

    box-shadow:
        0 15px 40px rgba(0,0,0,0.45);

}

/* ========================================
    CARD HEADER
======================================== */

.super-card-top{

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 22px;

}

/* ========================================
    ICON
======================================== */

.super-icon{

    width: 62px;

    height: 62px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 24px;

    color: white;

    background: linear-gradient(
        145deg,
        #2563eb,
        #1d4ed8
    );

    box-shadow:
        0 10px 25px rgba(37,99,235,0.35);

}

/* ========================================
    CONTENT
======================================== */

.super-card-content small{

    display: block;

    color: #94a3b8;

    font-size: 13px;

    font-weight: 500;

    margin-bottom: 12px;

    letter-spacing: 0.5px;

    text-transform: uppercase;

}

.super-card-content h2{

    color: white;

    font-size: 36px;

    font-weight: 800;

    margin-bottom: 12px;

    line-height: 1;

}

.super-card-content p{

    color: #64748b;

    font-size: 14px;

    margin: 0;

    line-height: 1.6;

}

/* ========================================
    GLOW EFFECT
======================================== */

.super-card::before{

    content: '';

    position: absolute;

    top: -40px;

    right: -40px;

    width: 140px;

    height: 140px;

    border-radius: 50%;

    background: rgba(59,130,246,0.08);

    filter: blur(10px);

}

/* ========================================
    COLOR VARIANT
======================================== */

.red-theme .super-icon{

    background: linear-gradient(
        145deg,
        #ef4444,
        #b91c1c
    );

    box-shadow:
        0 10px 25px rgba(239,68,68,0.35);

}

.red-theme::before{

    background: rgba(239,68,68,0.10);

}

.blue-theme .super-icon{

    background: linear-gradient(
        145deg,
        #3b82f6,
        #1d4ed8
    );

    box-shadow:
        0 10px 25px rgba(59,130,246,0.35);

}

.blue-theme::before{

    background: rgba(59,130,246,0.10);

}

.purple-theme .super-icon{

    background: linear-gradient(
        145deg,
        #a855f7,
        #7e22ce
    );

    box-shadow:
        0 10px 25px rgba(168,85,247,0.35);

}

.purple-theme::before{

    background: rgba(168,85,247,0.10);

}

.warning-theme .super-icon{

    background: linear-gradient(
        145deg,
        #f59e0b,
        #d97706
    );

    box-shadow:
        0 10px 25px rgba(245,158,11,0.35);

}

.warning-theme::before{

    background: rgba(245,158,11,0.10);

}

.cyan-theme .super-icon{

    background: linear-gradient(
        145deg,
        #06b6d4,
        #0891b2
    );

    box-shadow:
        0 10px 25px rgba(6,182,212,0.35);

}

.cyan-theme::before{

    background: rgba(6,182,212,0.10);

}

.green-theme .super-icon{

    background: linear-gradient(
        145deg,
        #22c55e,
        #15803d
    );

    box-shadow:
        0 10px 25px rgba(34,197,94,0.35);

}

.green-theme::before{

    background: rgba(34,197,94,0.10);

}

.orange-theme .super-icon{

    background: linear-gradient(
        145deg,
        #f97316,
        #c2410c
    );

    box-shadow:
        0 10px 25px rgba(249,115,22,0.35);

}

.orange-theme::before{

    background: rgba(249,115,22,0.10);

}

.dark-theme .super-icon{

    background: linear-gradient(
        145deg,
        #475569,
        #1e293b
    );

    box-shadow:
        0 10px 25px rgba(71,85,105,0.35);

}

.dark-theme::before{

    background: rgba(71,85,105,0.10);

}

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

@media(max-width: 768px){

    .super-card{

        padding: 20px;

    }

    .super-card-content h2{

        font-size: 30px;

    }

    .super-icon{

        width: 55px;

        height: 55px;

        font-size: 20px;

    }

}

/* =========================================================
    CHART STATS
========================================================= */

.chart-stats{

    display: grid;

    grid-template-columns: repeat(4,1fr);

    gap: 18px;

}

.chart-stat-card{

    background: rgba(255,255,255,0.03);

    border: 1px solid rgba(255,255,255,0.05);

    border-radius: 18px;

    padding: 18px 20px;

    transition: 0.3s ease;

}

.chart-stat-card:hover{

    transform: translateY(-4px);

    border-color: rgba(59,130,246,0.25);

}

.chart-stat-card small{

    display: block;

    color: #94a3b8;

    font-size: 13px;

    margin-bottom: 10px;

    letter-spacing: 0.5px;

}

.chart-stat-card h3{

    color: white;

    font-size: 28px;

    font-weight: 800;

    margin: 0;

}

/* CHART */

.super-chart-container{

    position: relative;

    height: 380px;

}

/* RESPONSIVE */

@media(max-width: 991px){

    .chart-stats{

        grid-template-columns: repeat(2,1fr);

    }

}

@media(max-width: 576px){

    .chart-stats{

        grid-template-columns: 1fr;

    }

}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* =========================================
   GLOBAL
========================================= */

html,
body{
    font-family: 'Inter', sans-serif;
    background: #030712;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* =========================================
   CYBER GRID BACKGROUND
========================================= */

.cyber-grid{
    background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);

    background-size: 45px 45px;
}

/* =========================================
   GLOW EFFECT
========================================= */

.glow-cyan{
    background: rgba(34,211,238,0.20);
    filter: blur(180px);
}

.glow-purple{
    background: rgba(147,51,234,0.20);
    filter: blur(180px);
}

.glow-blue{
    background: rgba(59,130,246,0.10);
    filter: blur(160px);
}

/* =========================================
   GLASS CARD
========================================= */

.cyber-card{
    background: rgba(8,17,32,0.82);

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);

    border: 1px solid rgba(34,211,238,0.15);

    box-shadow:
        0 0 80px rgba(0,0,0,0.65),
        inset 0 0 1px rgba(255,255,255,0.1);
}

/* =========================================
   CYBER INPUT
========================================= */

.cyber-input{
    background: rgba(15,23,42,0.90);

    border: 1px solid rgba(34,211,238,0.15);

    color: white;

    transition: all .3s ease;
}

.cyber-input::placeholder{
    color: rgba(255,255,255,0.35);
}

.cyber-input:focus{
    border-color: rgb(34 211 238);

    box-shadow:
        0 0 0 4px rgba(34,211,238,0.12),
        0 0 25px rgba(34,211,238,0.15);

    outline: none;
}

/* =========================================
   PURPLE INPUT
========================================= */

.cyber-input-purple{
    background: rgba(15,23,42,0.90);

    border: 1px solid rgba(168,85,247,0.15);

    color: white;

    transition: all .3s ease;
}

.cyber-input-purple::placeholder{
    color: rgba(255,255,255,0.35);
}

.cyber-input-purple:focus{
    border-color: rgb(168 85 247);

    box-shadow:
        0 0 0 4px rgba(168,85,247,0.12),
        0 0 25px rgba(168,85,247,0.15);

    outline: none;
}

/* =========================================
   CYBER BUTTON
========================================= */

.cyber-button{
    background: linear-gradient(
        135deg,
        rgb(34 211 238),
        rgb(147 51 234)
    );

    transition: all .3s ease;

    box-shadow:
        0 0 30px rgba(34,211,238,0.35);
}

.cyber-button:hover{
    transform: translateY(-2px) scale(1.01);

    box-shadow:
        0 0 40px rgba(34,211,238,0.50),
        0 0 80px rgba(147,51,234,0.30);
}

/* =========================================
   BADGE
========================================= */

.cyber-badge{
    background: rgba(8,17,32,0.75);

    backdrop-filter: blur(16px);

    border: 1px solid rgba(34,211,238,0.15);
}

/* =========================================
   ICON BOX
========================================= */

.cyber-icon{
    background: linear-gradient(
        135deg,
        rgb(34 211 238),
        rgb(147 51 234)
    );

    box-shadow:
        0 0 50px rgba(34,211,238,0.40);
}

/* =========================================
   TEXT GLOW
========================================= */

.text-glow{
    text-shadow:
        0 0 15px rgba(34,211,238,0.35);
}

/* =========================================
   ANIMATION
========================================= */

@keyframes floatGlow{

    0%{
        transform: translateY(0px);
    }

    50%{
        transform: translateY(-12px);
    }

    100%{
        transform: translateY(0px);
    }
}

.float-glow{
    animation: floatGlow 6s ease-in-out infinite;
}

/* =========================================
   SCROLLBAR
========================================= */

::-webkit-scrollbar{
    width: 8px;
}

::-webkit-scrollbar-track{
    background: #050816;
}

::-webkit-scrollbar-thumb{
    background: linear-gradient(
        to bottom,
        #06b6d4,
        #9333ea
    );

    border-radius: 999px;
}

/* =========================================
   SELECTION
========================================= */

::selection{
    background: rgba(34,211,238,0.30);
    color: white;
}

/* ========================================
   BETA USER CARD
======================================== */

.beta-card{
    background: #081120;
    border: 1px solid rgba(0,255,255,.15);
    border-radius: 18px;
    box-shadow: 0 0 25px rgba(0,255,255,.05);
}

.beta-card .card-body{
    color:#fff;
}

.beta-card label{
    color:#d1d5db;
    font-weight:600;
}

.beta-card textarea,
.beta-card input,
.beta-card select{

    background:#0f172a;
    border:1px solid rgba(0,255,255,.15);
    color:#fff;
}

.beta-card textarea:focus,
.beta-card input:focus{

    background:#0f172a;
    color:#fff;

    border-color:#22d3ee;

    box-shadow:0 0 10px rgba(34,211,238,.25);
}

.beta-card textarea::placeholder{
    color:#64748b;
}
.beta-table{
    color:#fff;
}

.beta-table thead{
    background:#081120;
}

.beta-table th{
    color:#22d3ee;
    border-color:rgba(255,255,255,.08);
}

.beta-table td{
    border-color:rgba(255,255,255,.08);
}

/* ========================================
   FORCE DARK TABLE
======================================== */

.beta-table{
    --bs-table-bg: transparent !important;
    --bs-table-color: #ffffff !important;
    --bs-table-border-color: rgba(255,255,255,.08) !important;

    color:#fff !important;
    background:transparent !important;
}

.beta-table > :not(caption) > * > *{
    background:transparent !important;
    color:#fff !important;
}

.beta-table thead tr{
    background:#0f172a !important;
}

.beta-table thead th{
    color:#22d3ee !important;
}

.beta-table tbody td{
    color:#e5e7eb !important;
}

.beta-table tbody tr:hover{
    background:rgba(34,211,238,.05) !important;
}
.kpi-number{
    color:#22d3ee;
    font-weight:700;
}

.kpi-label{
    color:#94a3b8;
    font-size:.9rem;
    text-transform:uppercase;
    letter-spacing:.5px;
}

/* ==========================================
   DASHBOARD FIX
========================================== */

.super-chart-container{
    position:relative;
    height:420px !important;
    padding:24px;
}

.chart-stat-card{

    height:100%;

    min-height:100px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:20px;

    border-radius:16px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.06);

    transition:.3s;
}

.chart-stat-card:hover{

    transform:translateY(-2px);

    border-color:rgba(139,92,246,.25);
}

.chart-stat-card small{

    color:#94a3b8;

    margin-bottom:8px;
}

.chart-stat-card h3{

    color:#fff;

    font-size:28px;

    font-weight:800;

    margin:0;
}

/* ==========================================
   LEADERBOARD FIX
========================================== */

.super-panel .super-leaderboard{

    margin:12px 20px;

    padding:18px;

    border-radius:16px;

    border:1px solid rgba(255,255,255,.05);

    background:rgba(255,255,255,.02);

    transition:.3s;
}

.super-panel .super-leaderboard:hover{

    background:rgba(139,92,246,.05);

    transform:translateY(-2px);
}

.super-user{

    display:flex;

    align-items:center;

    gap:15px;
}

.super-rank{

    width:50px !important;

    height:50px !important;

    font-size:18px;
}

.super-leaderboard span{

    font-size:20px;

    font-weight:700;

    color:#22c55e;
}

/* ==========================================
   TABLE FIX
========================================== */

.super-table{

    width:100%;

    border-collapse:separate;

    border-spacing:0 8px;
}

.super-table thead th{

    white-space:nowrap;

    padding:18px;
}

.super-table tbody td{

    padding:18px;
}

.super-table tbody tr{

    background:rgba(255,255,255,.02);
}

.super-table tbody tr:hover{

    background:rgba(139,92,246,.04);
}

/* ==========================================
   RIGHT PANEL STICKY
========================================== */

@media(min-width:1200px){

    .col-xl-4{

        position:sticky;

        top:20px;

        align-self:flex-start;
    }

}
/* PANEL KANAN SAMA TINGGI */

.equal-height-panel{

    height:640px;

    display:flex;

    flex-direction:column;
}


.empty-leaderboard{

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:220px;

    text-align:center;

    color:#94a3b8;

    font-size:14px;

    border:1px dashed rgba(255,255,255,.08);

    border-radius:16px;

    background:rgba(255,255,255,.02);

}

.pagination svg{
    width:16px !important;
    height:16px !important;
}

.pagination .page-link{
    display:flex;
    align-items:center;
    justify-content:center;
}


/* =========================
   MOBILE MENU
========================= */

.mobile-menu-btn-top{

    position:fixed;

    top:15px;
    left:15px;

    width:45px;
    height:45px;

    border:none;

    border-radius:12px;

    background:#ff0000;

    color:#fff;

    z-index:10001;

    display:none;

    align-items:center;
    justify-content:center;

    font-size:22px;

    box-shadow:0 0 15px rgba(255,0,0,.4);
}

.sidebar-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.6);

    display:none;

    z-index:9998;
}

.sidebar-overlay.show{
    display:block;
}

@media(max-width:991px){

    .mobile-menu-btn-top{
        display:flex;
    }

    .sidebar{

        left:-280px;

        transition:.3s;

        z-index:9999;
    }

    .sidebar.mobile-show{
        left:0;
    }

    .content{
        margin-left:0 !important;
        width:100%;
        padding:15px;
    }

    .topbar{
        padding-left:60px;
    }

    .logo-area .toggle-btn{
        display:none;
    }
}

.intel-filter-group{
display:flex;
justify-content:flex-end;
width:100%;
}

.intel-search{
position:relative;
min-width:260px;
}

.intel-search i{
position:absolute;
left:12px;
top:50%;
transform:translateY(-50%);
opacity:.6;
}

.intel-search input{
width:100%;
padding:10px 12px 10px 38px;
border-radius:10px;
border:1px solid rgba(255,255,255,.1);
background:#111827;
color:#fff;
}

.table-responsive{
    max-height: 650px;
    overflow-y: auto;
}
.pagination svg{
    width:16px !important;
    height:16px !important;
}

nav svg{
    width:16px !important;
    height:16px !important;
}




/*
|--------------------------------------------------------------------------
| PAGE HEADER
|--------------------------------------------------------------------------
*/

.page-header {
    margin-bottom: 25px;
}

.page-header h2 {
    font-weight: 700;
    color: #00d4ff;
}

.page-header p {
    color: #9ca3af;
}

/*
|--------------------------------------------------------------------------
| CARD
|--------------------------------------------------------------------------
*/

.card-dark {
    background: #111827;
    border: 1px solid #1f2937;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 0 20px rgba(0,0,0,.25);
}

/*
|--------------------------------------------------------------------------
| STAT CARD
|--------------------------------------------------------------------------
*/

.stat-card {
    background: linear-gradient(
        145deg,
        #111827,
        #1f2937
    );

    border: 1px solid #374151;

    border-radius: 16px;

    padding: 20px;

    height: 100%;

    transition: all .25s ease;
}

.stat-card:hover {

    transform: translateY(-3px);

    border-color: #00d4ff;
}

.stat-card h6 {

    color: #9ca3af;

    font-size: 13px;

    margin-bottom: 10px;

    text-transform: uppercase;
}

.stat-card h2,
.stat-card h3 {

    color: #ffffff;

    font-weight: 700;

    margin: 0;
}

/*
|--------------------------------------------------------------------------
| FORM
|--------------------------------------------------------------------------
*/

.form-control,
.form-select {

    background: #0f172a;

    border: 1px solid #374151;

    color: white;
}

.form-control:focus,
.form-select:focus {

    background: #0f172a;

    color: white;

    border-color: #00d4ff;

    box-shadow: none;
}

label {

    color: #d1d5db;

    font-weight: 600;

    margin-bottom: 6px;
}

/*
|--------------------------------------------------------------------------
| BUTTON
|--------------------------------------------------------------------------
*/

.btn-info {

    background: #00d4ff;

    border: none;

    color: #000;

    font-weight: 600;
}

.btn-info:hover {

    background: #00b7df;
}

/*
|--------------------------------------------------------------------------
| TABLE
|--------------------------------------------------------------------------
*/

.table-dark-custom {

    width: 100%;

    border-collapse: collapse;
}

.table-dark-custom thead {

    background: #111827;
}

.table-dark-custom th {

    color: #00d4ff;

    padding: 12px;

    border-bottom: 1px solid #374151;

    font-size: 13px;
}

.table-dark-custom td {

    color: #e5e7eb;

    padding: 12px;

    border-bottom: 1px solid #1f2937;
}

.table-dark-custom tbody tr:hover {

    background: rgba(0,212,255,.05);
}

/*
|--------------------------------------------------------------------------
| BADGE STATUS
|--------------------------------------------------------------------------
*/

.badge-viral {

    background: #dc2626;

    color: white;

    padding: 6px 10px;

    border-radius: 8px;

    font-size: 12px;
}

.badge-trending {

    background: #f59e0b;

    color: white;

    padding: 6px 10px;

    border-radius: 8px;

    font-size: 12px;
}

.badge-normal {

    background: #10b981;

    color: white;

    padding: 6px 10px;

    border-radius: 8px;

    font-size: 12px;
}

/*
|--------------------------------------------------------------------------
| SECTION TITLE
|--------------------------------------------------------------------------
*/

.section-title {

    color: #00d4ff;

    font-weight: 700;

    margin-bottom: 15px;
}

/*
|--------------------------------------------------------------------------
| PAGINATION
|--------------------------------------------------------------------------
*/

.pagination {

    margin-top: 20px;
}

.pagination .page-link {

    background: #111827;

    border-color: #374151;

    color: #fff;
}

.pagination .page-item.active .page-link {

    background: #00d4ff;

    border-color: #00d4ff;

    color: #000;
}

/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media(max-width:768px){

    .stat-card {

        margin-bottom: 15px;
    }

    .table-responsive {

        overflow-x: auto;
    }
}
.pagination-dark{

    margin:0;

    gap:6px;
}

.pagination-dark .page-item{

    list-style:none;
}

.pagination-dark .page-link{

    background:#111827;

    border:1px solid #1f2937;

    color:#cbd5e1;

    border-radius:8px;

    min-width:40px;

    text-align:center;

    transition:.2s;
}

.pagination-dark .page-link:hover{

    background:#06b6d4;

    color:white;

    border-color:#06b6d4;
}

.pagination-dark .active .page-link{

    background:#06b6d4;

    border-color:#06b6d4;

    color:white;

    font-weight:bold;
}

.pagination-dark .disabled .page-link{

    background:#0f172a;

    color:#475569;
}

.monitor-preview{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

    margin-bottom:25px;
}

.preview-item{

    background:#111827;

    border:1px solid #1f2937;

    border-radius:16px;

    padding:20px;

    text-align:center;
}

.preview-item span{

    color:#94a3b8;

    font-size:12px;
}

.preview-item h2{

    color:#06b6d4;

    margin-top:10px;

    font-weight:700;
}

.monitor-action-bar{

    display:flex;

    gap:12px;

    margin:20px 0 30px;

}

.btn-generate{

    background:#10b981;

    border:none;

    color:white;

    padding:10px 18px;

    border-radius:10px;

    font-weight:600;
}

.btn-execute{

    background:#ef4444;

    border:none;

    color:white;

    padding:10px 18px;

    border-radius:10px;

    font-weight:600;
}

.btn-generate:hover,
.btn-execute:hover{

    opacity:.9;
}

.monitor-action-bar{

    display:flex;

    align-items:center;

    gap:12px;

    margin:20px 0;

    flex-wrap:wrap;
}

.monitor-action-bar form{

    margin:0;
}

.btn-generate,
.btn-execute,
.btn-recovery{

    border:none;

    padding:10px 18px;

    border-radius:10px;

    font-size:13px;

    font-weight:600;

    color:white;

    transition:.3s;
}

.btn-generate{

    background:linear-gradient(
        135deg,
        #10b981,
        #059669
    );
}

.btn-execute{

    background:linear-gradient(
        135deg,
        #ef4444,
        #dc2626
    );
}

.btn-recovery{

    background:linear-gradient(
        135deg,
        #f59e0b,
        #d97706
    );
}

.btn-generate:hover,
.btn-execute:hover,
.btn-recovery:hover{

    transform:translateY(-2px);

    box-shadow:
        0 0 20px rgba(255,255,255,.1);
}
.btn-reset{

    background:linear-gradient(
        135deg,
        #8b5cf6,
        #7c3aed
    );

    border:none;

    color:white;

    padding:10px 18px;

    border-radius:10px;

    font-size:13px;

    font-weight:600;

    transition:.3s;
}

.btn-reset:hover{

    transform:translateY(-2px);

    box-shadow:
        0 0 20px rgba(
            139,
            92,
            246,
            .4
        );

    color:white;
}

.monitor-progress{

    position:relative;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        #0f172a,
        #111827
    );

    border:1px solid rgba(6,182,212,.25);

    border-radius:18px;

    padding:22px;

    margin-bottom:25px;

    box-shadow:
        0 0 20px rgba(6,182,212,.08);
}

.monitor-progress::before{

    content:'';

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:3px;

    background:linear-gradient(
        90deg,
        #06b6d4,
        #3b82f6,
        #06b6d4
    );
}

.progress-percent{

    font-size:28px;

    font-weight:800;

    color:#06b6d4;

    text-shadow:
        0 0 15px rgba(6,182,212,.4);
}

.progress-track{

    width:100%;

    height:14px;

    background:#1e293b;

    border-radius:999px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.05);

    margin-top:12px;
}

.progress-fill{

    height:100%;

    border-radius:999px;

    background:linear-gradient(
        90deg,
        #10b981,
        #06b6d4,
        #3b82f6
    );

    background-size:300% 300%;

    animation:progressGlow 4s ease infinite;

    box-shadow:
        0 0 20px rgba(6,182,212,.4);
}

@keyframes progressGlow{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }
}