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

:root{

    --bg:#080c14;

    --bg2:#0b101a;

    --card:#0e1420;

    --card2:#111927;

    --border:#1b2637;

    --border-light:#243249;

    --text:#f3f6fb;

    --muted:#7e8b9f;

    --muted2:#566276;

    --blue:#4f7cff;

    --blue-hover:#638cff;

    --green:#22c55e;

    --red:#ef4444;

    --orange:#f59e0b;

    --cyan:#06b6d4;

}


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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    background:

        radial-gradient(
            circle at 50% -20%,
            rgba(79,124,255,.13),
            transparent 42%
        ),

        var(--bg);

    color:var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    min-height:100vh;

    overflow-x:hidden;

}


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

header{

    height:70px;

    background:rgba(8,12,20,.88);

    border-bottom:1px solid var(--border);

    backdrop-filter:blur(18px);

    position:sticky;

    top:0;

    z-index:1000;

}


.nav{

    width:100%;

    height:100%;

    padding:0 30px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}


.logo{

    color:white;

    text-decoration:none;

    font-size:20px;

    font-weight:800;

    letter-spacing:-.7px;

}


.logo span{

    color:var(--blue);

}


.nav-right{

    display:flex;

    align-items:center;

    gap:20px;

}


.nav-link{

    color:var(--muted);

    text-decoration:none;

    font-size:12px;

    transition:.2s;

}


.nav-link:hover{

    color:white;

}


.live-status{

    display:flex;

    align-items:center;

    gap:7px;

    padding:7px 11px;

    background:rgba(34,197,94,.07);

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

    border-radius:20px;

    color:#71db95;

    font-size:10px;

    font-weight:700;

}


.live-dot{

    width:7px;

    height:7px;

    background:var(--green);

    border-radius:50%;

    box-shadow:
        0 0 10px rgba(34,197,94,.8);

    animation:pulse 1.7s infinite;

}


@keyframes pulse{

    0%,100%{

        opacity:1;

        transform:scale(1);

    }

    50%{

        opacity:.4;

        transform:scale(.75);

    }

}


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

.mobile-button{

    display:none;

    border:0;

    background:none;

    color:white;

    font-size:22px;

    cursor:pointer;

}


/* =========================================================
   MOBILE MENU PANEL
========================================================= */

.mobile-menu{

    display:none;

    position:absolute;

    top:65px;

    right:15px;

    width:190px;

    background:#0d1420;

    border:1px solid var(--border);

    border-radius:12px;

    padding:8px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.5);

}


.mobile-menu.show{

    display:block;

}


.mobile-menu a{

    display:block;

    color:#9aa6b9;

    text-decoration:none;

    font-size:12px;

    padding:12px;

    border-radius:7px;

}


.mobile-menu a:hover{

    background:#151e2d;

    color:white;

}


/* =========================================================
   CONTAINER
========================================================= */

.container{

    width:100%;

    max-width:1150px;

    margin:auto;

    padding:55px 20px 40px;

}


/* =========================================================
   HERO
========================================================= */

.hero{

    text-align:center;

    max-width:700px;

    margin:0 auto 40px;

}


.hero h1{

    font-size:36px;

    line-height:1.1;

    letter-spacing:-1.7px;

    margin-bottom:13px;

}


.hero p{

    color:var(--muted);

    font-size:13px;

    line-height:1.7;

}


/* =========================================================
   MAIN ONLINE CARD
========================================================= */

.online-card{

    background:

        linear-gradient(
            145deg,
            rgba(79,124,255,.10),
            rgba(255,255,255,.018)
        );

    border:1px solid var(--border);

    border-radius:16px;

    padding:40px 20px;

    text-align:center;

    box-shadow:
        0 20px 60px rgba(0,0,0,.25);

    margin-bottom:18px;

}


.online-label{

    color:var(--muted);

    font-size:11px;

    text-transform:uppercase;

    letter-spacing:1.2px;

    margin-bottom:12px;

}


.online-number{

    font-size:70px;

    line-height:1;

    font-weight:850;

    letter-spacing:-5px;

}


.online-status{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    color:#6cdc94;

    font-size:10px;

    margin-top:14px;

}


/* =========================================================
   STAT CARDS
========================================================= */

.stats{

    display:grid;

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

    gap:15px;

    margin-bottom:18px;

}


.stat{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:12px;

    padding:20px;

    transition:.2s;

}


.stat:hover{

    border-color:
        var(--border-light);

    background:var(--card2);

    transform:translateY(-2px);

}


.stat-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

}


.stat-title{

    color:var(--muted);

    font-size:11px;

}


.stat-icon{

    width:31px;

    height:31px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#151e2d;

    border-radius:7px;

    font-size:13px;

}


.stat-value{

    font-size:26px;

    font-weight:800;

    margin-top:10px;

    letter-spacing:-1px;

}


.stat-description{

    color:#55d783;

    font-size:9px;

    margin-top:5px;

}


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

.main-grid{

    display:grid;

    grid-template-columns:
        1.55fr 1fr;

    gap:18px;

    margin-bottom:18px;

}


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

.card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:13px;

    overflow:hidden;

}


.card-header{

    height:56px;

    padding:0 18px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    border-bottom:1px solid var(--border);

}


.card-title{

    font-size:13px;

    font-weight:700;

}


.card-subtitle{

    color:var(--muted);

    font-size:10px;

}


.card-body{

    padding:20px;

}


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

.chart-container{

    height:250px;

}


#trafficChart{

    width:100%;

    height:100%;

}


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

.connection-list{

    max-height:300px;

    overflow-y:auto;

}


.connection-list::-webkit-scrollbar{

    width:5px;

}


.connection-list::-webkit-scrollbar-thumb{

    background:#253247;

    border-radius:10px;

}


.connection{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:12px 0;

    border-bottom:1px solid rgba(255,255,255,.045);

}


.connection:last-child{

    border-bottom:0;

}


.connection-left{

    display:flex;

    align-items:center;

    gap:10px;

    min-width:0;

}


.flag{

    width:25px;

    height:17px;

    object-fit:cover;

    border-radius:2px;

    background:#151e2d;

}


.connection-info{

    min-width:0;

}


.connection-country{

    font-size:11px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}


.connection-details{

    display:flex;

    align-items:center;

    gap:5px;

    margin-top:4px;

}


.connection-details img{

    width:25px;

    height:17px;

    object-fit:contain;

}


.connection-right{

    color:#68758a;

    font-size:9px;

    white-space:nowrap;

}


/* =========================================================
   EMPTY STATE
========================================================= */

.empty{

    padding:45px 20px;

    text-align:center;

    color:var(--muted2);

    font-size:11px;

}


/* =========================================================
   COUNTRY LIST
========================================================= */

.country-row{

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 0;

    border-bottom:1px solid rgba(255,255,255,.045);

}


.country-row:last-child{

    border-bottom:0;

}


.country-flag{

    font-size:18px;

    width:25px;

}


.country-info{

    flex:1;

}


.country-name{

    font-size:11px;

}


.country-progress{

    height:4px;

    background:#1b2636;

    border-radius:10px;

    overflow:hidden;

    margin-top:6px;

}


.country-progress span{

    display:block;

    height:100%;

    background:var(--blue);

    border-radius:10px;

    transition:.5s;

}


.country-number{

    font-size:11px;

    color:#aab5c6;

}


/* =========================================================
   SECOND GRID
========================================================= */

.second-grid{

    display:grid;

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

    gap:18px;

    margin-bottom:18px;

}


/* =========================================================
   DEVICE / BROWSER ROW
========================================================= */

.analytics-row{

    display:flex;

    align-items:center;

    gap:12px;

    padding:12px 0;

    border-bottom:1px solid rgba(255,255,255,.045);

}


.analytics-row:last-child{

    border-bottom:0;

}


.analytics-icon{

    width:34px;

    height:34px;

    background:#151e2d;

    border-radius:8px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:14px;

}


.analytics-info{

    flex:1;

}


.analytics-name{

    font-size:11px;

}


.analytics-bar{

    height:4px;

    background:#1b2636;

    border-radius:10px;

    margin-top:5px;

    overflow:hidden;

}


.analytics-bar span{

    display:block;

    height:100%;

    background:var(--blue);

    border-radius:10px;

}


.analytics-percent{

    font-size:10px;

    color:#9ba7b8;

}


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

.script-card{

    margin-top:18px;

    background:

        linear-gradient(
            135deg,
            rgba(79,124,255,.11),
            rgba(79,124,255,.025)
        );

    border:1px solid rgba(79,124,255,.17);

    border-radius:14px;

    padding:24px;

}


.script-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:15px;

}


.script-title{

    font-size:14px;

    font-weight:700;

}


.script-description{

    color:var(--muted);

    font-size:10px;

    line-height:1.6;

    margin-bottom:13px;

}


.code-box{

    background:#070b12;

    border:1px solid var(--border);

    border-radius:9px;

    padding:15px;

    color:#aab7cb;

    font-family:
        Consolas,
        Monaco,
        monospace;

    font-size:11px;

    line-height:1.7;

    overflow-x:auto;

    white-space:pre;

}


.copy-button{

    margin-top:10px;

    border:0;

    background:var(--blue);

    color:white;

    padding:9px 15px;

    border-radius:7px;

    font-size:10px;

    font-weight:700;

    cursor:pointer;

    transition:.2s;

}


.copy-button:hover{

    background:var(--blue-hover);

}


.reader-link{

    margin-top:16px;

    padding-top:16px;

    border-top:1px solid rgba(255,255,255,.06);

}


.reader-label{

    color:var(--muted);

    font-size:10px;

    margin-bottom:7px;

}


.reader-url{

    color:#8fa8e8;

    font-family:monospace;

    font-size:11px;

    word-break:break-all;

}


/* =========================================================
   LIVE CONNECTION TABLE
========================================================= */

.live-table-card{

    margin-top:18px;

}


.table-wrapper{

    overflow-x:auto;

}


.live-table{

    width:100%;

    border-collapse:collapse;

    min-width:500px;

}


.live-table th{

    text-align:left;

    padding:12px 18px;

    font-size:9px;

    color:#647187;

    text-transform:uppercase;

    letter-spacing:.6px;

    border-bottom:1px solid var(--border);

}


.live-table td{

    padding:12px 18px;

    font-size:11px;

    color:#aab5c6;

    border-bottom:1px solid rgba(255,255,255,.04);

}


.live-table tr:last-child td{

    border-bottom:0;

}


.live-table tr:hover td{

    background:rgba(255,255,255,.02);

}


.table-country{

    display:flex;

    align-items:center;

    gap:8px;

}


.table-country img{

    width:25px;

    height:17px;

    object-fit:cover;

}


.table-devices{

    display:flex;

    align-items:center;

    gap:5px;

}


.table-devices img{

    width:28px;

    height:18px;

    object-fit:contain;

}


/* =========================================================
   FOOTER
========================================================= */

footer{

    text-align:center;

    padding:35px 20px;

    margin-top:20px;

    color:#465267;

    font-size:9px;

    border-top:1px solid var(--border);

}


/* =========================================================
   TOAST
========================================================= */

.toast{

    position:fixed;

    right:20px;

    bottom:20px;

    background:#141e2d;

    border:1px solid var(--border-light);

    color:white;

    padding:11px 15px;

    border-radius:8px;

    font-size:10px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.4);

    transform:translateY(100px);

    opacity:0;

    transition:.3s;

    z-index:5000;

}


.toast.show{

    transform:translateY(0);

    opacity:1;

}


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

@media(max-width:950px){

    .stats{

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

    }

    .main-grid{

        grid-template-columns:1fr;

    }

}


@media(max-width:700px){

    header{

        height:64px;

    }

    .nav{

        padding:0 17px;

    }

    .nav-right{

        display:none;

    }

    .mobile-button{

        display:block;

    }

    .container{

        padding:40px 14px 30px;

    }

    .hero{

        margin-bottom:30px;

    }

    .hero h1{

        font-size:29px;

    }

    .hero p{

        font-size:12px;

    }

    .online-card{

        padding:35px 15px;

    }

    .online-number{

        font-size:57px;

    }

    .stats{

        grid-template-columns:1fr;

    }

    .second-grid{

        grid-template-columns:1fr;

    }

    .script-card{

        padding:20px;

    }

}


@media(max-width:400px){

    .online-number{

        font-size:50px;

    }

    .stat-value{

        font-size:23px;

    }

}


.country-progress-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.country-progress {
    flex: 1;
}

.country-percent {
    min-width: 45px;
    text-align: right;
    font-size: 12px;
    color: #888;
}


/* =========================================================
   NEW ROW
========================================================= */

.new-row{

    animation:newConnection 1.8s ease;

}


@keyframes newConnection{

    0%{

        background:
            rgba(34,197,94,.18);

    }

    100%{

        background:
            transparent;

    }

}