* {
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    box-sizing: border-box;
}

:root {
    --header-bg-transparent: rgb(255 255 255 / 5%);
    --header-bg-scrolled: rgba(255, 255, 255, 0.8);
    --text-color: #ffffff;
    --text-color-scrolled: #1a1a1a;
    --accent-color: #ff4757;
    --metal-container-card-bg: rgba(15, 23, 42, 0.6);
    --metal-container-border-color: rgba(255, 255, 255, 0.08);
    --metal-container-text-main: #f8fafc;
    --metal-container-text-muted: #94a3b8;
    --gold: #fbbf24;
    --silver: #cbd5e1;
    --platinum: #e2e8f0;
    --palladium: #f472b6;
    --metal-container-accent-green: #34d399;
    --transition-speed: 0.4s;
}

body {
    width: 100%;
    height: 100%;
    background-color: #0a192f;
}

header {
    height: auto;
    width: 100%;
}

.main-header {
    position: relative;
    background-color: var(--header-bg-transparent);
    border-bottom: 0.09rem solid #178b4b;
}

.header-container {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    padding: 1rem 0;
}

.logoicon {
    background-color: ;
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
    align-items: center;
    font-size: 1.2rem;
    padding-left: ;
    color: white;
    padding-left: 1rem;
}

.bi-piggy-bank {
    color: rgb(23, 139, 75);
    width: 1.2rem;
}

.logo span {
    color: black;
    font-weight: 700;
    font-size: 1.3rem;
}

.menu-container {
    background-color: ;
    display: flex;
    justify-content: end;
    flex-grow: 1;
    flex-shrink: 1;
    padding-right: 1rem;
}

.nav-links {
    display: flex;
    width: auto;
    justify-content: end;
    align-items: center;
    padding-right: ;
    flex-grow: 1;
    gap: 1.2rem;
    list-style: none;
    background-color: ;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
    background-color: ;
    min-width: 0;
    min-height: 0;
}

.userdetail {
    font-size: 1.2rem;
    background-color: purple;
    height: 2.2rem;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    min-width: 0;
    min-height: 0;
    cursor: pointer;
}

.userdesc {
    position: absolute;
    background-color: #f5e8e8;
    display: none;
    height: auto;
    padding: em;
    top: 4.5rem;
    right: 1rem;
    padding: 0.5rem;
    padding-bottom: 1rem;
    border-radius: 0.4rem;
}

.descdetail {
    font-size: clamp(0.6rem, 1.2rem, 1.4rem);
    text-align: center;
    padding: 0.2rem;
    letter-spacing: 0.1rem;
}

.descname {
    font-size: clamp(0.5rem, 0.8rem, 1.2rem);
}

.descmail {
    font-size: clamp(0.5rem, 0.8rem, 1.2rem);
}

.descbonus {
    font-size: clamp(0.5rem, 0.8rem, 1.2rem);
}


/* Hide the 3-dot button on desktop by default */

.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
}

.toggleuser {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
}

.hiddenindex {
    opacity: 0;
    transform: translateY(1.1rem);
    transform: scale(0.95);
    filter: blur(1px);
}

.visibleindex {
    opacity: 1;
    transform: translateY(0);
    transform: scale(1);
    filter: blur(0);
}

.visible {
    display: block;
}

.hidden {
    display: none;
}


/* --- Mobile View (Breakglass at 768px) --- */

@media (max-width: 768px) {
    /* Show the 3-dot button */
    .menu-toggle {
        display: block;
        padding-right: 0.8rem;
    }
    .toggleuser {
        display: flex;
        background-color: purple;
        height: 2rem;
        aspect-ratio: 1/1;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        min-width: 0;
        min-height: 0;
        cursor: pointer;
    }
    /* Turn the nav links into a hidden dropdown card */
    .nav-links {
        display: none;
        /* Hidden by default */
        position: absolute;
        right: 0;
        top: 3.5rem;
        /* Sits right below the 3 dots */
        background: #ffffff;
        color: #333;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        border-radius: 0.8rem;
        width: 11rem;
        flex-direction: column;
        gap: 0;
        padding: o.8rem 0;
        z-index: 100;
    }
    .userdetail {
        display: none;
    }
    .descdetail {
        font-size: clamp(0.5rem, 1rem, 1.2rem);
        text-align: center;
        padding: 0.2rem;
        letter-spacing: 0.1rem;
    }
    .descname {
        font-size: clamp(0.4rem, 0.7rem, 1rem);
    }
    .descmail {
        font-size: clamp(0.4rem, 0.7rem, 1rem);
    }
    .descbonus {
        font-size: clamp(0.4rem, 0.7rem, 1rem);
    }
    .nav-links div a {
        color: #333;
        padding: 0.6rem 0.9rem;
        display: block;
    }
    /* The active class that JavaScript will trigger to show the menu */
    .nav-links.active {
        display: flex;
    }
}