body{
    margin:0;
    padding:0;
    background:#000;
    color:#fff;
    font-family:Verdana,Arial,sans-serif;
    font-size:11px;
}

/* WRAP */
.wrap{
    background:#000;
    box-sizing:border-box;
}

/* HEADER */
.header{
    padding:10px;
    font-size:24px;
    font-weight:bold;
    color:#ffcc00;
    background:url('/assets/images/llama.png') no-repeat right top;
    background-size:contain;
}

.nav{
    background:#ffcc00;
    color:#000;
    padding:6px;
    font-weight:bold;

    display:flex;
    justify-content:space-between; /* 🔥 KEY LINE */
    align-items:center;
}

/* left side */
.nav-left a{
    color:#000;
    text-decoration:none;
    margin-right:5px;
}

/* right side */
.nav-right a{
    color:#000;
    text-decoration:none;
    margin-left:10px;
}

/* MAIN */
.mainlayout{
    display:flex;
    align-items:flex-start;
    gap:10px;
}

.content{
    flex:1;
    min-width:0;
    margin-left: 5px;
}

.sidebar{
    width: 175px;
    flex-shrink:0;
    background:#050505;
    border-left:1px solid #333;
    padding:8px;
    box-sizing:border-box;
    margin-top: 26px;
    margin-right: 2px;
}

/* SIDEBAR */
.sidebox{
    margin-bottom:10px;
    border:1px solid #444;
    background:#111;
    padding:6px;
}

.sidetitle{
    background:#002060;
    color:#ffcc00;
    font-weight:bold;
    padding:4px;
    margin:-6px -6px 6px -6px;
}

.sidebar a{
    color:#66ccff;
    text-decoration:none;
}

/* TOOLBAR */
.toolbar{
    padding:6px;
    background:#111;
    border-top:1px solid #333;
    border-bottom:1px solid #333;
}

/* TABLE */
.tablewrap{
    width:100%;
    overflow-x:auto;
}

table{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
}

th,td{
    border:1px solid #222;
    padding:4px;
    word-wrap:break-word;
    overflow-wrap:break-word;
    vertical-align:middle;
}

th{
    background:#002060;
    color:#ffcc00;
    border-color:#333;
    text-align:left;
}

td{
    background:#00153d;
}

tr:nth-child(even) td{
    background:#00102e;
}

a{
    color:#66ccff;
    text-decoration:none;
}

a:hover {
    color:#fff;
    text-decoration:none;
}

.now{
    color:#fff;
    font-weight:bold;
}

.badge{
    color:#fff;
    background:#333;
    padding:1px 4px;
    border:1px solid #555;
    display:inline-block;
}

.nsfw{
    color:#ff99cc;
}

.footer{
    padding:6px;
    text-align:center;
    color:#999;
    background:#111;
}

.dlbtn{
    display:inline-block;
    padding:3px 8px;
    background:#003399;
    color:#fff;
    border:1px solid #ffcc00;
    font-weight:bold;
    text-decoration:none;
}

.dlbtn:hover{
    background:#0055cc;
}

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: thin;
    scrollbar-color: #fff #000000bd;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 15px;
  }

  *::-webkit-scrollbar-track {
    background-color: #42005596;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #8000ff;
    border-radius: 30px;
    border: 3px dotted #ffffff;
  }

/* TABLET */
@media (max-width:1000px){

    .mainlayout{
        flex-direction:column;
    }

    .sidebar{
        width:100%;
        border-left:none;
        border-top:1px solid #333;
    }
}

/* PHONE */
@media (max-width:600px){

    body{
        font-size:12px;
    }

    .wrap{
        width:100%;
        margin:0;
        border-left:none;
        border-right:none;
    }

    .header{
        font-size:18px;
        min-height:60px;
        background-size:80px auto;
    }

    .nav{
        flex-direction:column;
        gap:5px;
    }

    select{
        width:100%;
        margin-top:5px;
    }

    .toolbar{
        line-height:1.8;
    }

    table{
        min-width:850px;
    }
}