*, *::before, *::after {
    box-sizing: border-box; margin: 0; padding: 0;
    }
    body {
        background: #0a0a0a;
        font-family: 'Geist', system-ui, sans-serif;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 60px;
        color: #fff;
    }
    .nav-wrap {
        width: 100%;
        max-width: 520px;
        border-bottom: 1px solid #1f1f1f;
        position: relative;
        user-select: none;
        margin-top: 10vh;
        margin-left: 1vh;
        margin-right: 1vh;
    }
    .tabs {
        display: flex;
        align-items: center;
        position: relative;
    }
    .hover-bg {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 32px;
        border-radius: 6px;
        background: #1a1a1a;
        transition:
            left   0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94),
            width  0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94),
            opacity 0.15s ease;
        pointer-events: none;
        opacity: 0;
        z-index: 0;
    }
    .active-line {
        position: absolute;
        bottom: -1px;
        height: 1px;
        background: #fff;
        transition:
            left  0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
            width 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
        pointer-events: none;
        z-index: 2;
    }
    .tab {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        font-family: inherit;
        font-size: 0.82rem;
        font-weight: 400;
        color: #666;
        background: transparent;
        border: none;
        cursor: pointer;
        border-radius: 6px;
        transition: color 0.15s ease;
        white-space: nowrap;
    }
    .tab:hover {
        color: #aaa;
    }
    .tab.active {
        color: #fff;
    }
    .tab .dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: currentColor;
        opacity: 0;
        transform: scale(0.4);
        transition: opacity 0.2s ease, transform 0.2s ease;
        flex-shrink: 0;
    }
    .tab.active .dot {
        opacity: 1;
        transform: scale(1);
    }
    .page-content {
        width: 100%;
        max-width: 520px;
        font-size: 0.82rem;
        color: #444;
        line-height: 1.7;
        margin: 0 auto;
    }
    .page-content .page {
        display: none;
        animation: fadeUp 0.25s ease forwards;
    }
    .page-content .page.visible {
        display: block;
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    
    .gradient-text-main {
        background: linear-gradient(90deg, rgb(170, 170, 170), rgb(95, 95, 95));
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
  /*      ^^^^  general css   ^^^^     */
    .page-header {
        margin-left: 3vh;
        font-size: 2.67rem;
        font-weight: 500;
        color: #ccc;
        margin-bottom: 48px;
    }
    .look-at-me {
        color: #aaa;
        font-size: small;
        padding-left: 2vh;
    }
    .server-api {
        background: var(--bg-card, #111111);
        border: 1px solid var(--border, #1f1f1f);
        border-radius: 8px;
        overflow: hidden;
        margin-top: 5vh;
    }

    .server-return {
        display: grid;
        justify-content: center;
        padding: 4vh;
        font-size: xx-large;
        color: #fff;
    }
    .server-status .online {
    color: green;
    text-shadow:
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px #00ff2f,
        0 0 30px #33ff00,
        0 0 40px #00ff22;
    }
    .server-status .offline {
        color: red;
        text-shadow:
        0 0 5px #fff,
        0 0 10px #fff,
        0 0 20px #ff0000,
        0 0 30px #ff0000,
        0 0 40px #ff0000;
    }
    .player-box {
        border-radius: 8px;
        border-style: none;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        padding: 2vh;
    }

    #player-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;                
        font-size: x-large;
        color: #fff;
    }
    .player-card {
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 8px;
        padding: 0.5vh;
        margin: 0.5vh;
    }
    .list-head {
        font-size: x-large;
        color: #ccc;
        margin: 2vh;
        margin-top: 4vh;
    } /* this is the HEADING, not the HEADS*/
    summary {
        color: rgb(121, 121, 121);
    }
    .details-toggle {
        margin-top: 3vh;
        margin-bottom: 3vh;
        margin-left: 1.5vh;
        margin-right: 1.5vh;
    }
    .sfn-long {
        background-color: rgb(50, 50, 50);
        border-radius: 8px;
        border-style: none;
        border-width: 1px;
        justify-content: center;
        display: grid;
        color: #fff;
    }
    .nerds-return {
        color: #fff;
        padding: 4vh;
        font-size: xx-large;
    }

    .toggle-on {
        display: none;
    }

    
    .gradient-text-second {
        background: linear-gradient(90deg, rgb(243, 17, 17), rgb(14, 213, 17));
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .page1-outro {
        margin-bottom: 15vh;
        margin-left: 2vh;
    }

    .players-p {
        font-size: 1.2rem;
        font-weight: 500;
        color: #acacac;
        margin-top: 6px;
        text-decoration: none;
        margin-left: 1.5vh;
    }

    .players-a {
        font-size: 1.2rem;
        font-weight: 500;
        color: #acacac;
        margin-top: 6px;
        text-decoration: underline;
    }