/* --- Base Styles --- */
body {
    background-color: #0D1117;
    color: white;
    font-family: 'Cascadia Mono', monospace;
    margin: 0;
    padding: 0;
}

header img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

header p {
    text-align: center;
    margin-top: 5px;
}

/* --- Logo Header --- */
.logo-header {
    text-align: center;
    margin: 20px 0;
}

.logo-header .title {
    font-size: 36px; /* smaller logo */
    color: red;
    margin: 0;
}

.logo-header .aimware,
.logo-header .dev,
.logo-header .by {
    display: inline-block;
    margin: 0 5px;
    font-size: 12px; /* smaller text */
}

.logo-header a {
    color: white;
    text-decoration: none;
}

/* --- Tabs --- */
.tabs {
    background-color: #549AE5;
    color: white;
    max-width: 800px;
    margin: 20px auto;
    border-radius: 10px;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
}

.tabs .tab {
    padding: 10px;
    cursor: pointer;
    flex: 1 0 auto;
    text-align: center;
}

.tabs .tab:hover {
    background-color: #4781bf;
}

.tabs .tab a {
    color: white;
    text-decoration: none;
}

/* --- Enrolled Section --- */
.enrolled {
    background-color: #161B22;
    border-radius: 30px;
    max-width: 1200px; /* wider container */
    margin: 50px auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.enrolled .title {
    font-size: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.enrolled .title .search-button,
.enrolled .title .filters-dropdown {
    background-color: #549AE5;
    color: white;
    border-radius: 3px;
    padding: 8px 12px;
    font-size: 16px;
    cursor: pointer;
}

/* --- Users Grid --- */
.enrolled .users {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* responsive grid */
    gap: 15px;
    width: 100%;
    padding: 10px 0;
    box-sizing: border-box;
}

/* --- User Cards --- */
.enrolled .user {
    background-color: #375272;
    border-radius: 20px;
    display: flex;
    align-items: center;
    padding: 10px 15px;
    gap: 15px;
    cursor: pointer;
    min-height: 70px;
    box-sizing: border-box;
}

.enrolled .users .new { background-color: #3C8246; }
.enrolled .users .less20 { background-color: #955E43; }
.enrolled .users .more20 { background-color: #64263E; }
.enrolled .users .more60 { background-color: #4c535d; }

/* --- Avatar --- */
.enrolled .user .avatar {
    position: relative;
    flex-shrink: 0;
}

.enrolled .user .avatar img {
    height: 50px;
    width: 50px;
    border-radius: 50%;
}

.enrolled .user .avatar .banring {
    position: absolute;
    width: 65px;
    height: 65px;
    left: -7.5px;
    top: -7.5px;
}

/* --- User Details --- */
.enrolled .details {
    flex: 1;
}

.enrolled .details ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.enrolled .details li.username { color: #FFFFFF; }
.enrolled .details li.joined { color: #AFAFAF; }

/* --- Pagination --- */
.enrolled .pages {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
}

.enrolled .page {
    background-color: #549AE5;
    padding: 5px 10px;
    border-radius: 10px;
    cursor: pointer;
}

/* --- JSON / Reporter --- */
.enrolled .reporter img {
    border-radius: 50%;
    border: 2px solid white;
    width: 35px;
    height: 35px;
}

.enrolled .json {
    background-color: black;
    padding: 10px;
    word-wrap: break-word;
    max-width: 100%;
}

.json-specialchars { color: white; }
.json-key { color: #EFFF97; }
.json-value-string { color: #2AA190; }
.json-value-boolean { color: #A84B16; }
.json-value-integer { color: #32508D; }

/* --- Horizontal Rule --- */
hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    margin: 1rem 0;
}

/* --- Responsive Adjustments --- */
@media screen and (max-width: 768px) {
    .logo-header .title { font-size: 28px; }
    .enrolled .user { min-height: 60px; gap: 10px; }
    .enrolled .title { font-size: 24px; flex-direction: column; gap: 10px; }
}