:root{
    --bg:#0f0f0f;
    --card:#1a1a1a;
    --yellow:#F4C430;
    --text:#ffffff;
    --green:#00ff88;
    --red:#ff4d4d;
}

body{
    background:var(--bg);
    color:var(--text);
    font-family:Segoe UI,Tahoma,sans-serif;
}

.navbar{
    background:#111;
    border-bottom:1px solid var(--yellow);
}

.navbar-brand{
    color:var(--yellow)!important;
    font-weight:700;
}

.card-dark{
    background:var(--card);
    border:1px solid rgba(255,215,0,.3);
    border-radius:15px;
}

.card-dark:hover{
    border-color:var(--yellow);
    transition:.3s;
}

.yellow{
    color:var(--yellow);
}

.btn-yellow{
    background:var(--yellow);
    color:#000;
    font-weight:bold;
}

.btn-yellow:hover{
    background:#ffea61;
}

.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
}

.stat-value{
    font-size:42px;
    font-weight:bold;
}

.stat-green{
    color:var(--green);
}

.stat-red{
    color:var(--red);
}

.footer{
    border-top:1px solid rgba(255,215,0,.3);
    margin-top:50px;
    padding:20px;
    text-align:center;
}

.glow{
    text-shadow:
    0 0 10px rgba(255,215,0,.6),
    0 0 20px rgba(255,215,0,.4);
}

.sidebar{
    background:#111;
    min-height:100vh;
    border-right:1px solid var(--yellow);
}

.sidebar a{
    color:white;
    text-decoration:none;
    display:block;
    padding:12px;
}

.sidebar a:hover{
    background:var(--yellow);
    color:black;
}

.table-dark{
    border:1px solid rgba(255,215,0,.2);
}

.card-dark{
    background:#151515;
    border:1px solid rgba(255,215,0,.35);
    border-radius:18px;
    color:#fff;
}

.card-dark h6{
    color:#FFD700;
    font-weight:600;
}

.card-dark h2,
.card-dark h3,
.card-dark h4,
.card-dark p{
    color:#fff;
}

#serverStatus{
    color:#00ff88 !important;

    text-shadow:
        0 0 10px rgba(0,255,136,.5),
        0 0 20px rgba(0,255,136,.3);
}

#win{
    text-shadow:
        0 0 8px rgba(0,255,136,.3);
}

#loss{
    text-shadow:
        0 0 8px rgba(255,77,77,.3);
}

.card-dark{

    transition:.25s ease;

}

.card-dark:hover{

    transform:translateY(-3px);

    box-shadow:
        0 0 20px rgba(255,215,0,.12);

}

/* =====================
   BEE CONTROL BUTTON
===================== */

.bee-control{

    display:flex;

    justify-content:center;

    margin-top:30px;
}

.bee-button{

    width:250px;

    height:60px;

    border:none;

    border-radius:15px;

    font-size:22px;

    font-weight:bold;

    cursor:pointer;

    color:white;

    transition:.3s;
}

.bee-active{

    background:#28b44b;

    box-shadow:
        0 0 10px rgba(40,180,75,.5),
        0 0 20px rgba(40,180,75,.3);
}

.bee-inactive{

    background:#d63333;

    box-shadow:
        0 0 10px rgba(214,51,51,.5),
        0 0 20px rgba(214,51,51,.3);
}

.bee-button:hover{

    transform:translateY(-2px);

}