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

body{
    background:
    radial-gradient(
        circle at top,
        #1e3a8a 0%,
        #050816 60%
    );
    color:white;
    min-height:100vh;
}

/* =======================
   LAYOUT
======================= */

.streamers-layout{
    display:flex;
    min-height:100vh;
}

.sidebar-wrapper{
    width:300px;
    flex-shrink:0;
}

.content-wrapper{
    flex:1;
    min-width:0;
    overflow-x:hidden;
}

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

.sidebar{
    width:260px;
    min-height:100vh;
    height:100vh;
    background:
    rgba(15,23,42,.95);
    backdrop-filter:blur(15px);
    border-right:
    1px solid rgba(255,255,255,.08);
    box-shadow:
    0 0 30px rgba(0,0,0,.35);
    position:sticky;
    top:0;
    overflow-y:auto;
}

.sidebar-user h6{
    color:white;
    margin-top:15px;
    font-weight:600;
}

.menu-item i{
    width:22px;
    text-align:center;
    margin-right:10px;
}

.logout-btn:hover{
    color:white;
    transform:translateY(-2px);
    box-shadow:
    0 0 20px rgba(239,68,68,.4);
}

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

.page-title{
    background:
    rgba(15,23,42,.85);
    border:
    1px solid rgba(255,255,255,.08);
    border-radius:20px;
    padding:25px;
    backdrop-filter:blur(15px);
    box-shadow:
    0 0 25px rgba(37,99,235,.15);
}

.page-title h2{
    font-weight:700;
}

.page-title p{
    color:#94a3b8;
    margin-bottom:0;
}

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

.filter-card{
    background:
    rgba(15,23,42,.85);
    border:
    1px solid rgba(255,255,255,.08);
    border-radius:20px;
    backdrop-filter:blur(15px);
    overflow:hidden;
    box-shadow:
    0 0 25px rgba(37,99,235,.12);
}

.card-body{
    color:white;
}

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

.form-control,
.form-select{
    background:#111827;
    border:1px solid #374151;
    color:white;
    border-radius:12px;
    height:50px;
}

.form-control::placeholder{
    color:#94a3b8;
}

.form-control:focus,
.form-select:focus{
    background:#111827;
    color:white;
    border-color:#8b5cf6;
    box-shadow:
    0 0 12px rgba(139,92,246,.4);
}

.form-select option{
    background:#111827;
    color:white;
}

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

.btn-primary,
.btn-streamer{
    border:none;
    border-radius:12px;
    background:
    linear-gradient(
        90deg,
        #2563eb,
        #8b5cf6
    );
    color:white;
    font-weight:600;
    transition:.3s;
    cursor:pointer;
    touch-action:manipulation;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

.btn-primary:hover,
.btn-streamer:hover{
    color:white;
    transform:translateY(-2px);
    box-shadow:
    0 0 20px rgba(139,92,246,.4);
}

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

.streamer-card{
    background:
    rgba(15,23,42,.85);
    border:
    1px solid rgba(255,255,255,.08);
    border-radius:22px;
    padding:25px;
    height:100%;
    backdrop-filter:blur(15px);
    transition:.35s;
    color:white;
    overflow:hidden;
    position:relative;
}

.streamer-card:hover{
    transform:
    translateY(-8px);
    box-shadow:
    0 0 30px rgba(139,92,246,.25);
}

/* =======================
   STREAMER IMAGE
======================= */

.streamer-img{
    width:120px !important;
    height:120px !important;
    min-width:120px;
    min-height:120px;
    max-width:120px;
    max-height:120px;
    display:block;
    margin:auto;
    object-fit:cover;
    border-radius:50%;
    border:3px solid #8b5cf6;
    box-shadow:
    0 0 20px rgba(139,92,246,.35);
}

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

.stats{
    color:#cbd5e1;
    line-height:1.8;
    font-size:14px;
}

.stats strong{
    color:white;
}

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

.stats-card{
    background:
    rgba(15,23,42,.85);
    border:
    1px solid rgba(255,255,255,.08);
    border-radius:20px;
    padding:25px;
    backdrop-filter:blur(15px);
    color:white;
}

.stats-card i{
    font-size:30px;
    color:#8b5cf6;
    margin-bottom:10px;
}

.stats-card h3{
    font-size:32px;
    font-weight:700;
    margin-bottom:8px;
}

.stats-card span{
    color:#94a3b8;
}

/* =======================
   PAGINATION
======================= */

.pagination{
    justify-content:center;
    margin-top:30px;
}

.page-link{
    background:
    rgba(15,23,42,.85);
    border:
    1px solid rgba(255,255,255,.08);
    color:white;
}

.page-link:hover{
    background:
    linear-gradient(
        90deg,
        #2563eb,
        #8b5cf6
    );
    color:white;
}

.page-item.active .page-link{
    border:none;
    background:
    linear-gradient(
        90deg,
        #2563eb,
        #8b5cf6
    );
}

/* =======================
   ALERT
======================= */

.alert{
    border:none;
    border-radius:15px;
}

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

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#0f172a;
}

::-webkit-scrollbar-thumb{
    background:#374151;
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#8b5cf6;
}

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

.header-logo{
    width:180px !important;
    height:auto !important;
    object-fit:contain;
}

/* =======================
   AUTH CARD & SIDEBAR INFO
======================= */

.auth-card,
.sidebar-info-card{
    background:
    rgba(255,255,255,.04);
    border:
    1px solid rgba(139,92,246,.18);
    border-radius:18px;
    padding:18px;
    margin-bottom:16px;
    backdrop-filter:blur(12px);
    transition:.3s;
}

.auth-card:hover,
.sidebar-info-card:hover{
    transform:translateY(-2px);
    border-color:#8b5cf6;
    box-shadow:
    0 0 20px rgba(139,92,246,.18);
}

.auth-card h6,
.sidebar-info-card h6{
    color:#fff;
    font-size:18px;
    font-weight:700;
    margin-bottom:10px;
}

.auth-card p,
.sidebar-info-card p{
    color:#a8b3cf;
    font-size:14px;
    line-height:1.7;
    margin-bottom:0;
}

.sidebar-info-card i{
    color:#8b5cf6;
    font-size:20px;
    margin-bottom:10px;
    display:block;
}

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

.sidebar-login-btn{
    width:100%;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    border-radius:12px;
    font-weight:700;
    color:#fff;
    background:
    linear-gradient(
        135deg,
        #2563eb,
        #8b5cf6
    );
    transition:.3s;
    touch-action:manipulation;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

.sidebar-login-btn:hover{
    color:#fff;
    transform:translateY(-2px);
    box-shadow:
    0 10px 25px rgba(139,92,246,.35);
}

.sidebar-register-btn{
    width:100%;
    height:48px;
    margin-top:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    border-radius:12px;
    border:1px solid rgba(139,92,246,.35);
    color:#fff;
    background:
    rgba(255,255,255,.03);
    transition:.3s;
    touch-action:manipulation;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

.sidebar-register-btn:hover{
    color:#fff;
    background:
    rgba(139,92,246,.12);
    border-color:#8b5cf6;
}

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

@media(max-width:768px){

    html,
    body{
        overflow-x:hidden !important;
        overflow-y:auto !important;
        height:auto !important;
    }

    .streamers-layout{
        display:block !important;
        min-height:auto !important;
    }

    .sidebar-wrapper{
        width:100% !important;
    }

    .content-wrapper{
        width:100% !important;
        overflow-x:hidden !important;
    }

    .sidebar{
        width:100% !important;
        position:static !important;
        top:auto !important;
        height:auto !important;
        min-height:auto !important;
        overflow:visible !important;
        border-right:none !important;
        border-bottom:
        1px solid rgba(255,255,255,.08);
    }

    .col-lg-4.col-md-6{
        width:100% !important;
        max-width:100% !important;
        flex:0 0 100% !important;
    }

    .page-title{
        margin-top:15px;
    }

    .p-4{
        padding:15px !important;
    }

    .streamer-card{
        padding:20px;
    }

    .streamer-img{
        width:100px !important;
        height:100px !important;
        min-width:100px !important;
        min-height:100px !important;
        max-width:100px !important;
        max-height:100px !important;
    }
}