/* =========================
   RESET
========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


/* =========================
   BODY
========================= */

body {

    background: #0b1020;

    color: white;

    font-family: Arial, Helvetica, sans-serif;

    overflow-x: hidden;

    opacity: 1;

    transition: opacity 0.35s ease;

}
/* =====================================
   THEME VARIABLES DEFAULT
===================================== */

:root {

    --accent:#4da3ff;

    --accent-soft:
    rgba(77,163,255,.25);

    --accent-strong:
    rgba(77,163,255,.8);

}

body.fade-out {

    opacity: 0;

}


/* =========================
   NAVBAR
========================= */

.navbar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20px 60px;

    background:

    rgba(10,15,30,0.85);

    backdrop-filter: blur(10px);

    position: sticky;

    top: 0;

    z-index: 1000;

}


/* Logo */

.logo a,
.logo span {

    color: white;

    text-decoration: none;

    font-size: 1.5rem;

    font-weight: bold;

}


.logo span {

    text-shadow:

    0 0 10px rgba(77,163,255,0.8);

}



/* =========================
   NAV LINKS
========================= */


.nav-links {

    display:flex;

    align-items:center;

    gap:25px;

    list-style:none;

}


.nav-links a,
.dropdown-button {

    color:#d8e3ff;

    text-decoration:none;

    height:40px;

    display:flex;

    align-items:center;

    padding:0 12px;

    font-size:1rem;

}


.nav-links a:hover,
.dropdown-button:hover {

    color:#7fd1ff;

}


/* =========================
   DROPDOWNS
========================= */


.dropdown {

    position:relative;

}


.dropdown-button {

    background:none;

    border:none;

    cursor:pointer;

    font-family:inherit;

}


.dropdown-menu {

    display:none;

    position:absolute;

    top:100%;

    left:0;

    min-width:220px;

    list-style:none;

    background:

    rgba(10,15,30,0.95);


    border:

    1px solid rgba(100,150,255,0.3);


    border-radius:12px;


    padding:10px 0;


    box-shadow:

    0 0 20px rgba(77,163,255,0.25);


    z-index:2000;

}


.dropdown-menu a {

    display:block;

    padding:12px 20px;

    color:white;

}


.dropdown-menu a:hover {

    background:

    rgba(77,163,255,0.2);

    color:#7fd1ff;

}


/* Desktop dropdown */

@media(min-width:769px) {

    .dropdown:hover .dropdown-menu {

        display:block;

    }

}


/* Last dropdown opens left */

.dropdown:last-child .dropdown-menu {

    right:0;

    left:auto;

}


/* =========================
   MOBILE MENU
========================= */


.menu-toggle {

    display:none;

    background:none;

    border:none;

    color:white;

    font-size:2rem;

    cursor:pointer;

}



@media(max-width:768px) {


    .navbar {

        padding:20px;

        flex-wrap:wrap;

    }


    .menu-toggle {

        display:block;

    }


    .nav-links {

        display:none;

        width:100%;

        flex-direction:column;

        align-items:center;

        background:

        rgba(10,15,30,0.95);


        padding:20px;

        gap:15px;

        margin-top:20px;

        max-height:80vh;

        overflow-y:auto;

        border-radius:15px;

    }


    .nav-links.active {

        display:flex;

    }


    .nav-links li {

        width:100%;

        display:flex;

        flex-direction:column;

        align-items:center;

    }


    .dropdown-button {

        justify-content:center;

        width:100%;

    }



    .dropdown-menu {

        position:static;

        width:90%;

        margin-top:8px;

        background:

        rgba(255,255,255,0.05);

        border-radius:12px;

    }


    .dropdown-menu a {

        text-align:center;

    }

}


/* Mobile dropdown opening */

.dropdown.open .dropdown-menu {

    display:block;

}
/* =========================
   HERO
========================= */


.hero {

    text-align:center;

    padding:120px 20px;

}


.hero h1 {

    font-size:3rem;

    margin-bottom:20px;

}


.hero p {

    color:#c5d4ff;

    font-size:1.2rem;

}



/* Profile */

.profile-pic {

    width:220px;

    height:220px;

    border-radius:50%;

    object-fit:cover;


    border:

    4px solid #4da3ff;


    box-shadow:

    0 0 25px rgba(77,163,255,0.5);


    margin-bottom:30px;

}




/* =========================
   BIO CARD
========================= */


.bio {

    max-width:900px;

    margin:60px auto;

    padding:40px;


    background:

    rgba(11,16,32,0.92);


    border:

    1px solid transparent;


    border-radius:20px;


    position:relative;


    z-index:1;


    transition:

    box-shadow 0.3s ease;

}



.bio:hover {

    border:

    1px solid rgba(77,163,255,0.5);


    box-shadow:

    0 0 25px rgba(77,163,255,0.35);

}



.bio h2 {

    text-align:center;

    font-size:2.5rem;

    margin-bottom:30px;

}



.bio p {

    color:#d0d7ff;

    line-height:2;

    font-size:1.1rem;

    margin-bottom:20px;

}



/* =========================
   SOCIALS
========================= */


.socials {

    max-width:900px;

    margin:60px auto;

    text-align:center;

}



.social-card {

    background:

    rgba(11,16,32,0.92);


    border:

    1px solid rgba(100,150,255,0.3);


    border-radius:20px;


    padding:35px;


    margin:30px 0;


    display:flex;

    flex-direction:column;

    align-items:center;


    gap:20px;


    transition:

    0.3s ease;

}



.social-card p {

    color:#d0d7ff;

    line-height:1.7;

}



.social-card:hover {


    transform:translateY(-8px);


    border-color:#4da3ff;


    box-shadow:

    0 0 25px rgba(77,163,255,0.5);

}




/* =========================
   BUTTONS
========================= */


.btn {

    display:block;

    width:max-content;

    margin:30px auto;


    padding:

    12px 25px;


    background:

    var(--accent);


    color:white;


    border-radius:10px;


    border:

    2px solid transparent;


    text-decoration:none;


    transition:

    0.3s ease;

}



.btn:hover {


    transform:translateY(-5px);


    background:

    rgba(77,163,255,0.2);


    border:

    2px solid #4da3ff;


    box-shadow:

    0 0 25px rgba(77,163,255,0.8);


    color:white;

}




/* =========================
   FOOTER
========================= */


.footer {

    margin-top:80px;


    padding:

    30px 20px;


    text-align:center;


    background:

    rgba(10,15,30,0.85);


    backdrop-filter:blur(10px);


    border-top:

    1px solid rgba(100,150,255,0.3);


    color:#c5d4ff;


    font-size:0.95rem;

}



.footer p {

    margin:8px;

}




/* =========================
   SOUND BUTTON
========================= */


.sound-button {


    margin:15px auto;


    display:block;


    padding:

    12px 30px;


    background:

    rgba(77,163,255,0.15);


    color:white;


    border:

    1px solid rgba(127,209,255,0.5);


    border-radius:15px;


    cursor:pointer;


    font-family:inherit;


    font-size:1rem;


    transition:

    0.3s ease;


    backdrop-filter:blur(10px);


    box-shadow:

    0 0 15px rgba(77,163,255,0.2);

}



.sound-button:hover {


    transform:translateY(-4px);


    color:#7fd1ff;


    border-color:#7fd1ff;


    box-shadow:

    0 0 25px rgba(77,163,255,0.7);

}



.sound-button.active {


    background:

    rgba(77,163,255,0.35);


    box-shadow:

    0 0 25px rgba(77,163,255,0.8);

}



/* =========================
   MOBILE CONTENT
========================= */


@media(max-width:768px) {


    .hero h1 {

        font-size:2rem;

    }


    .profile-pic {

        width:160px;

        height:160px;

    }



    .bio {

        margin:30px 15px;

        padding:25px;

    }


    .bio h2 {

        font-size:2rem;

    }


    .social-card {

        margin:20px 10px;

        padding:25px;

    }

}
/* =========================
   STAR BACKGROUND
========================= */


.stars {

    position:fixed;

    top:0;

    left:0;


    width:100%;

    height:100%;


    pointer-events:none;


    z-index:-1;



    background-image:


    radial-gradient(circle, rgba(255,255,255,0.8) 1px, transparent 1px),


    radial-gradient(circle, rgba(100,180,255,0.6) 1px, transparent 1px),


    radial-gradient(circle, rgba(255,255,255,0.5) 2px, transparent 2px);



    background-size:


    120px 120px,

    200px 200px,

    300px 300px;



    background-position:


    0 0,

    50px 100px,

    100px 50px;



    animation:

    starMove 40s linear infinite;

}



@keyframes starMove {


    from {

        background-position:

        0 0,

        50px 100px,

        100px 50px;

    }


    to {

        background-position:

        0 600px,

        50px 700px,

        100px 650px;

    }

}





/* =========================
   LOADING SCREEN
========================= */


.loader {


    position:fixed;


    inset:0;


    background:#050816;


    display:flex;


    justify-content:center;


    align-items:center;


    z-index:9999;


    transition:

    opacity .8s ease,

    visibility .8s ease;


}



.loader.hide {


    opacity:0;


    visibility:hidden;


}



.loader-content {


    position:relative;


    z-index:2;


    text-align:center;

}



.loader-content h1 {


    font-size:3rem;


    color:white;


    text-shadow:


    0 0 20px #4da3ff;


}



.loader-content p {


    margin-top:15px;


    color:#c5d4ff;


}



/* Loading bar */


.loading-bar {


    width:300px;


    height:12px;


    margin:30px auto;


    background:

    rgba(255,255,255,0.1);


    border-radius:20px;


    overflow:hidden;


}



.loading-progress {


    height:100%;


    width:0%;


    background:#4da3ff;


    animation:

    load 2s ease forwards;


}



@keyframes load {


    from {

        width:0%;

    }


    to {

        width:100%;

    }

}




/* Loader stars */


.loader-stars {


    position:absolute;


    inset:0;


    background-image:


    radial-gradient(circle, white 1px, transparent 1px),


    radial-gradient(circle, #7fd1ff 1px, transparent 1px);


    background-size:

    120px 120px,

    200px 200px;


    animation:

    loaderStars 25s linear infinite;


    opacity:.7;


}



@keyframes loaderStars {


    from {

        background-position:

        0 0,

        50px 100px;

    }


    to {

        background-position:

        0 500px,

        50px 600px;

    }

}





/* =========================
   LOADER PLANET
========================= */


.planet {


    position:absolute;


    width:220px;


    height:220px;


    border-radius:50%;


    background:


    radial-gradient(circle at 30% 30%,

    #6fb8ff,

    #274b8f 45%,

    #10162d 80%);



    box-shadow:


    0 0 50px rgba(77,163,255,.8);



    animation:

    planetSpin 12s linear infinite;



    opacity:.8;


}



.planet::after {


    content:"";


    position:absolute;


    width:280px;


    height:70px;


    border:

    3px solid rgba(127,209,255,.5);


    border-radius:50%;


    top:75px;


    left:-30px;


    transform:rotate(-20deg);


}



@keyframes planetSpin {


    from {

        transform:rotate(0);

    }


    to {

        transform:rotate(360deg);

    }

}





/* =========================
   FLOATING PLANET
========================= */


.planet-small {


    position:fixed;


    width:80px;


    height:80px;


    right:8%;


    top:25%;


    border-radius:50%;



    background:


    radial-gradient(circle at 30% 30%,

    #8bd3ff,

    #35548f,

    #10162d);



    box-shadow:


    0 0 30px rgba(77,163,255,.7);



    animation:

    floatPlanet 8s ease-in-out infinite;


    z-index:-1;


}



@keyframes floatPlanet {


    0%,100% {

        transform:translateY(0);

    }


    50% {

        transform:translateY(-30px);

    }

}





/* =========================
   SATELLITE
========================= */


.satellite {


    position:fixed;


    top:15%;


    left:-100px;


    font-size:40px;


    animation:

    satelliteMove 30s linear infinite;


    z-index:-1;


}



@keyframes satelliteMove {


    from {

        left:-100px;

    }


    to {

        left:110%;

    }

}





/* =========================
   SHOOTING STARS
========================= */


.shooting-star {


    position:fixed;


    width:12px;


    height:12px;


    border-radius:50%;


    background:white;


    box-shadow:


    0 0 10px white,

    0 0 25px #7fd1ff,

    0 0 50px #4da3ff;



    animation:

    meteorMove 8s infinite;


}



.shooting-star::before {


    content:"";


    position:absolute;


    right:8px;


    top:50%;


    transform:translateY(-50%);


    width:180px;


    height:4px;


    background:


    linear-gradient(

    90deg,

    transparent,

    rgba(127,209,255,.5),

    white

    );


}



@keyframes meteorMove {


    0% {

        left:-100px;

        top:10%;

        opacity:0;

    }


    5% {

        opacity:1;

    }


    25% {

        left:110%;

        top:35%;

        opacity:0;

    }


    100% {

        opacity:0;

    }

}




/* =========================
   RANDOM METEORS
========================= */


.meteor {


    position:fixed;


    width:10px;


    height:10px;


    border-radius:50%;


    background:white;


    box-shadow:


    0 0 10px white,

    0 0 25px #7fd1ff,

    0 0 50px #4da3ff;


    pointer-events:none;


    z-index:-1;

}



.meteor::before {


    content:"";


    position:absolute;


    right:8px;


    top:50%;


    transform:translateY(-50%);


    width:200px;


    height:3px;


    background:


    linear-gradient(

    90deg,

    transparent,

    rgba(127,209,255,.6),

    white

    );

}
/* =========================
   TRUST PAGE
========================= */


.trust-page {

    max-width: 900px;

    margin: 60px auto;

    text-align:center;

}



.trust-card {

    margin:35px auto;

    padding:35px;

    border-radius:20px;

    width:90%;

    background:rgba(11,16,32,0.92);

    border:1px solid rgba(255,255,255,0.2);

    transition:0.3s ease;

}



.trust-card h2 {

    margin-bottom:20px;

}



.trust-card p {

    line-height:2;

    color:#d0d7ff;

}




/* Fully trusted */

.fully-trusted {

    border-color:#4da3ff;

    box-shadow:

    0 0 25px rgba(77,163,255,0.35);

}



.fully-trusted:hover {

    transform:translateY(-8px);

    box-shadow:

    0 0 40px rgba(77,163,255,0.8);

}





/* Semi trusted */

.semi-trusted {

    border-color:#9b7cff;

    box-shadow:

    0 0 25px rgba(155,124,255,0.35);

}



.semi-trusted:hover {

    transform:translateY(-8px);

    box-shadow:

    0 0 40px rgba(155,124,255,0.8);

}





/* IRL friends */

.irl-friends {

    border-color:#6fff9b;

    box-shadow:

    0 0 25px rgba(111,255,155,0.35);

}



.irl-friends:hover {

    transform:translateY(-8px);

    box-shadow:

    0 0 40px rgba(111,255,155,0.8);

}




@media(max-width:768px){


.trust-card {

    width:95%;

    padding:25px;

}


}
/* =========================
   UPDATED BADGE
========================= */


.updated-badge {

    display:inline-block;

    margin-top:25px;

    padding:10px 20px;

    border-radius:20px;


    background:

    rgba(77,163,255,0.15);


    border:

    1px solid rgba(127,209,255,0.5);


    color:#7fd1ff;


    font-size:0.95rem;


    box-shadow:

    0 0 15px rgba(77,163,255,0.3);


    backdrop-filter:blur(10px);


    transition:0.3s ease;

}



.updated-badge:hover {

    transform:translateY(-3px);


    box-shadow:

    0 0 25px rgba(77,163,255,0.7);


    background:

    rgba(77,163,255,0.3);

}
/* =========================
   404 SPACE PAGE
========================= */


.error-page {

    min-height:70vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    position:relative;

}



.error-content {

    z-index:2;

    padding:40px;

}



.glitch {

    font-size:10rem;

    color:#7fd1ff;

    text-shadow:

    0 0 20px #4da3ff,

    5px 0 0 #ff4dff,

    -5px 0 0 #4dffff;


    animation:glitch 1.5s infinite;

}



@keyframes glitch {


0%,100% {

transform:none;

}


20% {

transform:translate(-5px,3px);

}


40% {

transform:translate(5px,-3px);

}


60% {

transform:none;

}


}



.error-content h2 {

    font-size:2.5rem;

    margin-bottom:20px;

}



.error-content p {

    color:#d0d7ff;

    font-size:1.2rem;

    margin:15px;

}



.error-code {

    font-family:monospace;

    opacity:0.7;

}





.error-planet {

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;


    background:

    radial-gradient(circle at 30% 30%,

    #8bd3ff,

    #35548f,

    #10162d);


    opacity:0.35;


    animation:

    floatErrorPlanet 8s ease-in-out infinite;


}



@keyframes floatErrorPlanet {


0%,100% {

transform:translateY(0);

}


50% {

transform:translateY(-30px);

}


}





@media(max-width:768px){


.glitch {

font-size:6rem;

}


.error-content h2 {

font-size:1.8rem;

}


.error-content p {

font-size:1rem;

}


.error-planet {

width:220px;

height:220px;

}


}
/* =========================
   AUDIO CONTROLS
========================= */

.audio-controls{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:15px;

    margin-top:20px;

}

.volume-container{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

}

#volume-slider{

    width:140px;

    appearance:none;

    height:8px;

    border-radius:999px;

    cursor:pointer;

    background:rgba(255,255,255,.15);

}

#volume-slider::-webkit-slider-thumb{

    appearance:none;

    width:18px;

    height:18px;

    border-radius:50%;

    background:#4da3ff;

    border:2px solid white;

    box-shadow:0 0 15px #4da3ff;

    cursor:pointer;

}

.volume-value{

    color:#7fd1ff;

    font-weight:bold;

    font-size:.95rem;

}
/* =========================
   RANDOM PLANETS
========================= */

.planet,
.planet-small {
    transition: background 1s ease, box-shadow 1s ease;
}


/* Blue Earth */

.planet.earth,
.planet-small.earth {

    background:
    radial-gradient(circle at 30% 30%,
    #6fd3ff,
    #2463a6 45%,
    #10162d);

}


/* Mars */

.planet.mars,
.planet-small.mars {

    background:
    radial-gradient(circle at 30% 30%,
    #ff9b6b,
    #a6402a 45%,
    #35120b);

}


/* Toxic Planet */

.planet.toxic,
.planet-small.toxic {

    background:
    radial-gradient(circle at 30% 30%,
    #b7ff7a,
    #3b8f42 45%,
    #101d12);

}


/* Ice Planet */

.planet.ice,
.planet-small.ice {

    background:
    radial-gradient(circle at 30% 30%,
    #ffffff,
    #8bdcff 45%,
    #234c8f);

}


/* Gas Giant */

.planet.gas,
.planet-small.gas {

    background:
    radial-gradient(circle at 30% 30%,
    #ffcf8a,
    #b66b38 45%,
    #4b2115);

}


/* Purple Alien Planet */

.planet.alien,
.planet-small.alien {

    background:
    radial-gradient(circle at 30% 30%,
    #e18cff,
    #7035a8 45%,
    #190d2d);

}
/* =========================
   MISSION STATUS DISPLAY
========================= */


.mission-status {

    margin-top:20px;

    padding:15px 25px;

    background:

    rgba(255,255,255,0.05);


    border:

    1px solid rgba(127,209,255,0.3);


    border-radius:15px;


    backdrop-filter:blur(10px);


    width:300px;


    margin-left:auto;

    margin-right:auto;


    box-shadow:

    0 0 20px rgba(77,163,255,0.2);

}



.mission-status p {

    margin:8px;

    color:#c5d4ff;

    font-size:0.9rem;

}



#mission-text {

    color:#7fd1ff;

    font-weight:bold;

}
/* =========================
   LOADER SCALE + CENTER FIX
========================= */

.loader {

    overflow: hidden;

}


/* Smaller planet */

.loader .planet {

    width: 150px;

    height: 150px;

    top: auto;

    bottom: 58%;

}


/* Adjust planet ring */

.loader .planet::after {

    width: 190px;

    height: 50px;

    top: 50px;

    left: -20px;

}


/* Center loader content */

.loader-content {

    transform: translateY(60px);

    width: 100%;

}


/* Smaller title */

.loader-content h1 {

    font-size: 2.2rem;

}


/* Smaller loading bar */

.loading-bar {

    width: 250px;

}
/* =========================
   404 GALAXY SCANNER
========================= */

.scanner {

    margin-top:35px;

    text-align:center;

}


.scanner p {

    color:#c5d4ff;

}


.scanner-bar {

    width:250px;

    height:12px;

    background:rgba(255,255,255,0.1);

    border-radius:20px;

    overflow:hidden;

    margin:20px auto;

    border:1px solid rgba(77,163,255,0.3);

}


.scanner-progress {

    height:100%;

    width:0%;

    background:#4da3ff;

    border-radius:20px;

    animation:scannerLoad 4s ease forwards;

}


@keyframes scannerLoad {

    from {

        width:0%;

    }


    to {

        width:100%;

    }

}


.coordinates {

    font-family:monospace;

    line-height:1.8;

    opacity:0.8;

}
/* =========================
   RANDOM SPACE EVENTS
========================= */


.space-event {

    position:fixed;

    right:30px;

    bottom:30px;


    width:320px;


    padding:25px;


    background:

    rgba(10,15,30,0.95);


    border:

    1px solid rgba(77,163,255,0.7);


    border-radius:20px;


    box-shadow:

    0 0 30px rgba(77,163,255,0.6);


    backdrop-filter:blur(10px);


    transform:translateY(150%);


    opacity:0;


    transition:

    0.6s ease;


    z-index:5000;

}



.space-event.show {

    transform:translateY(0);

    opacity:1;

}



.space-event h3 {

    color:white;

    margin-bottom:12px;

}



.space-event p {

    color:#c5d4ff;

    line-height:1.5;

}



/* Mobile */

@media(max-width:768px){

    .space-event {

        right:15px;

        left:15px;

        width:auto;

    }

}
/* ===================================== */
/* CptSpaceDust Authentication Styling */
/* ===================================== */


.auth-container {

    min-height: calc(100vh - 120px);

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 40px 20px;

}



.auth-card {

    width: 100%;

    max-width: 450px;

    padding: 40px;

    background:
        rgba(255, 255, 255, 0.05);

    border:

        1px solid rgba(77, 163, 255, 0.35);

    border-radius: 20px;

    backdrop-filter: blur(12px);

    box-shadow:

        0 0 25px rgba(77, 163, 255, 0.2);

    text-align: center;

}





.auth-card h1 {

    color: white;

    margin-bottom: 10px;

    font-size: 32px;

}





.auth-subtitle {

    color:

        rgba(255,255,255,0.7);

    margin-bottom: 30px;

}







.auth-input {

    width: 100%;

    margin-bottom: 20px;

    text-align: left;

}





.auth-input label {

    display: block;

    color: white;

    margin-bottom: 8px;

    font-size: 14px;

}







.auth-input input {

    width: 100%;

    padding: 14px 16px;

    background:

        rgba(255,255,255,0.08);

    border:

        1px solid rgba(77,163,255,0.5);

    border-radius: 12px;

    color: white;

    font-size: 16px;

    outline: none;

    box-sizing: border-box;

    transition: 0.3s ease;

}





.auth-input input::placeholder {

    color:

        rgba(255,255,255,0.5);

}





.auth-input input:focus {

    border-color:

        #4da3ff;

    box-shadow:

        0 0 15px rgba(77,163,255,0.5);

}





.auth-card .btn {

    width: 100%;

    margin-top: 10px;

    display: flex;

    justify-content: center;

    align-items: center;

}





.auth-message {

    min-height: 24px;

    margin-top: 15px;

    color:

        #4da3ff;

}





.auth-divider {

    margin:

        30px 0 20px;

    color:

        rgba(255,255,255,0.5);

    font-size: 13px;

}





.secondary-btn {

    opacity: 0.85;

}
/* ============================= */
/* Profile Page */
/* ============================= */


.profile-card h2 {

    color:
    #4da3ff;

    margin-top:
    20px;

    font-size:
    18px;

}



.profile-card p {

    color:
    white;

    font-size:
    18px;

}





#profile-badges {

    display:
    flex;

    justify-content:
    center;

    flex-wrap:
    wrap;

    gap:
    10px;

    margin:
    15px 0;

}





.badge {

    background:
    rgba(77,163,255,0.15);

    border:
    1px solid #4da3ff;

    padding:
    8px 14px;

    border-radius:
    20px;

    color:
    white;

}
/* ============================= */
/* Navbar Account Links */
/* ============================= */


.account-link {

    display:flex;

    align-items:center;

    gap:15px;

}



.account-link a {

    font-size:14px;

    color:white;

    text-decoration:none;

    padding:6px 10px;

    border-radius:8px;

    transition:0.3s;

}



.account-link a:hover {

    color:#4da3ff;

    background:
    rgba(77,163,255,0.15);

}






/* Mobile Navbar */

@media(max-width:700px){


    .account-link {

        flex-direction:column;

        width:100%;

        gap:5px;

    }



    .account-link a {

        width:90%;

        text-align:center;

        padding:8px;

    }


}
.profile-card .btn {
    display: block;
    width: 100%;
    margin-top: 12px;
    text-align: center;
}
.profile-avatar {

    width:150px;

    height:150px;

    border-radius:50%;

    object-fit:cover;

    display:block;

    margin:0 auto 20px;


    border:

    3px solid var(--accent);


    box-shadow:

    0 0 20px var(--accent-strong);

}
/* ============================= */
/* Profile Edit Styling */
/* ============================= */


.edit-profile-panel {

    margin-top:25px;

    padding:20px;

    border-radius:18px;

    background:
    rgba(255,255,255,0.05);

    border:
    1px solid rgba(77,163,255,0.4);

    backdrop-filter:blur(10px);

}



.edit-profile-panel input {


    width:100%;

    padding:12px;

    margin-top:8px;

    margin-bottom:15px;


    border-radius:12px;


    border:
    1px solid rgba(77,163,255,0.5);


    background:
    rgba(255,255,255,0.08);


    color:white;

}





.edit-profile-panel input[type="file"] {

    cursor:pointer;

}





.edit-profile-panel input::file-selector-button {


    background:
    rgba(77,163,255,0.4);


    color:white;


    border:none;


    padding:8px 12px;


    border-radius:8px;


}



.avatar-preview {


    width:120px;

    height:120px;


    border-radius:50%;


    object-fit:cover;


    display:block;


    margin:15px auto;


    border:
    3px solid #4da3ff;


}
/* ============================= */
/* Profile Cards */
/* ============================= */


.profile-header {

    text-align:center;

}



.profile-info-grid {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(180px,1fr));

    gap:20px;

    margin:30px 0;

}




.profile-info-card {


    background:
    rgba(255,255,255,0.05);


    border:
    1px solid rgba(77,163,255,0.4);


    border-radius:15px;


    padding:20px;


    text-align:center;


    box-shadow:
    0 0 15px rgba(77,163,255,0.25);


}



.profile-info-card h3 {

    margin-bottom:10px;

    color:#4da3ff;

}




.profile-info-card p {

    font-size:18px;

}





/* Badge Cards */


.badge-container {


    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:15px;

    margin:20px 0;


}




.badge {


    background:
    rgba(77,163,255,0.15);


    border:
    1px solid rgba(77,163,255,0.5);


    border-radius:15px;


    padding:15px 25px;


    min-width:150px;


    text-align:center;


    transition:.3s;


}



.badge:hover {


    transform:
    translateY(-5px);


    box-shadow:
    0 0 20px rgba(77,163,255,.7);


}
/* ============================= */
/* Profile Bio Card */
/* ============================= */

.profile-bio-card {

    width: 100%;

    margin-top: 25px;

    padding: 20px;

    background: rgba(255,255,255,0.05);

    border: 1px solid rgba(77,163,255,0.35);

    border-radius: 15px;

    backdrop-filter: blur(10px);

    box-shadow:
        0 0 15px rgba(77,163,255,0.15);

    text-align: center;

}



.profile-bio-card h2 {

    margin-bottom: 12px;

    color: #4da3ff;

}



.profile-bio-card p {

    line-height: 1.6;

    color: white;

    word-wrap: break-word;

}
/* ============================= */
/* Profile Edit Textarea */
/* ============================= */

.auth-input textarea {

    width: 100%;

    min-height: 120px;

    padding: 14px;

    margin-top: 8px;

    background: rgba(255,255,255,0.05);

    color: white;

    border: 1px solid rgba(77,163,255,0.35);

    border-radius: 12px;

    outline: none;

    resize: vertical;

    font-family: inherit;

    font-size: 16px;

    backdrop-filter: blur(10px);

    box-shadow:
        0 0 10px rgba(77,163,255,0.1);

    transition: 0.3s;

}



.auth-input textarea:focus {

    border-color: #4da3ff;

    box-shadow:
        0 0 15px rgba(77,163,255,0.5);

}



.auth-input textarea::placeholder {

    color: rgba(255,255,255,0.55);

}
/* ============================= */
/* Crew Directory */
/* ============================= */


.crew-grid {

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:25px;

margin-top:30px;

}



.crew-card {

padding:25px;

background:
rgba(255,255,255,0.05);

border:
1px solid rgba(77,163,255,0.35);

border-radius:18px;

text-align:center;

backdrop-filter:blur(10px);

transition:0.3s;

}



.crew-card:hover {

transform:translateY(-8px);

box-shadow:
0 0 20px rgba(77,163,255,0.35);

}



.crew-avatar {

width:120px;

height:120px;

border-radius:50%;

object-fit:cover;

border:
2px solid #4da3ff;

margin-bottom:15px;

}
.profile-header {

text-align:center;

margin-bottom:25px;

}
/* =====================================
   Captain Rank Dropdown - Space Theme
   ===================================== */


.auth-input select,
#rank-select {


    width: 100%;

    padding: 14px 45px 14px 16px;

    margin-top: 8px;


    background:
    rgba(255,255,255,0.05);


    color:
    white;


    border:
    1px solid
    rgba(77,163,255,0.5);


    border-radius:
    12px;


    font-size:
    16px;


    outline:
    none;


    cursor:
    pointer;


    backdrop-filter:
    blur(10px);


    transition:
    0.3s ease;


    appearance:
    none;


    -webkit-appearance:
    none;


}






/* Hover Glow */


.auth-input select:hover,
#rank-select:hover {


    border-color:
    #4da3ff;


    box-shadow:
    0 0 15px
    rgba(77,163,255,0.5);


}






/* Focus Glow */


.auth-input select:focus,
#rank-select:focus {


    border-color:
    #4da3ff;


    box-shadow:
    0 0 20px
    rgba(77,163,255,0.75);


}







/* Dropdown Options */


.auth-input select option,
#rank-select option {


    background:
    #0b1020;


    color:
    white;


}







/* Custom Arrow */


.auth-input,
#rank-select-wrapper {


    position:
    relative;


}




.auth-input:has(select)::after {


    content:
    "";


    position:
    absolute;


    right:
    18px;


    bottom:
    17px;


    width:
    8px;


    height:
    8px;


    border-right:
    2px solid
    #4da3ff;


    border-bottom:
    2px solid
    #4da3ff;


    transform:
    rotate(45deg);


    pointer-events:
    none;


}
/* =====================================
   Captain Command Console
   ===================================== */


#captain-controls {

    margin-top:
    35px;


    padding:
    25px;


    background:
    rgba(77,163,255,0.08);


    border:
    1px solid
    rgba(77,163,255,0.7);


    border-radius:
    18px;


    box-shadow:
    0 0 25px
    rgba(77,163,255,0.35);


    backdrop-filter:
    blur(12px);


    animation:
    captainGlow 3s infinite alternate;

}







#captain-controls h2 {


    color:
    #4da3ff;


    text-align:
    center;


    margin-bottom:
    20px;


    text-shadow:
    0 0 12px
    rgba(77,163,255,0.8);


}







#captain-controls h3 {


    margin-top:
    25px;


    color:
    white;


    border-bottom:
    1px solid
    rgba(77,163,255,0.4);


    padding-bottom:
    8px;


}








/* Captain Messages */


#captain-message {


    margin-top:
    15px;


    padding:
    12px;


    border-radius:
    10px;


    background:
    rgba(255,255,255,0.05);


    border:
    1px solid
    rgba(255,255,255,0.15);


    text-align:
    center;


}








/* Admin Badge Cards */


#admin-badge-list .badge {


    display:
    flex;


    justify-content:
    space-between;


    align-items:
    center;


    gap:
    15px;


    padding:
    12px 16px;


    margin:
    10px 0;


}








#admin-badge-list .badge button {


    padding:
    8px 12px;


    font-size:
    14px;


}








/* Captain Panel Glow Animation */


@keyframes captainGlow {


    from {


        box-shadow:
        0 0 15px
        rgba(77,163,255,0.25);


    }



    to {


        box-shadow:
        0 0 35px
        rgba(77,163,255,0.55);


    }


}
.social-profile-list {

    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:20px;

}



.social-profile-list p {

    font-size:18px;

}



.social-profile-list a {

    color:var(--accent);

    text-decoration:none;

}



.social-profile-list a:hover {

    text-shadow:
    0 0 10px var(--accent);

}
/* =====================================
   SOCIAL BUTTONS (MATCH .btn STYLE)
===================================== */


.social-button {

    display:inline-flex;

    justify-content:center;

    align-items:center;


    width:200px;


    padding:

    12px 25px;


    margin:10px;


    background:

    var(--accent);


    color:white;


    border-radius:10px;


    border:

    2px solid transparent;


    text-decoration:none;


    font-size:16px;


    font-weight:bold;


    transition:

    .3s ease;


}





.social-button:hover {


    transform:

    translateY(-5px);


    background:

    var(--accent-soft);


    border:

    2px solid var(--accent);


    box-shadow:


    0 0 25px var(--accent-strong);


    color:white;


}
/* =====================================
   SOCIAL BUTTONS
===================================== */


.social-button {

    display:inline-flex;

    justify-content:center;

    align-items:center;

    gap:8px;


    min-width:150px;


    padding:12px 25px;


    margin:8px;


    border-radius:25px;


    background:
    rgba(255,255,255,0.08);


    border:
    1px solid var(--accent);


    color:white;


    text-decoration:none;


    font-size:16px;


    font-weight:bold;


    backdrop-filter:blur(10px);


    box-shadow:

    0 0 15px var(--accent-soft);


    transition:

    .3s ease;


}





.social-button:hover {


    transform:

    translateY(-5px)
    scale(1.05);


    background:

    var(--accent-soft);


    color:white;


    box-shadow:


    0 0 25px var(--accent),


    0 0 45px var(--accent-soft);


}






/* Social Button Container */


.profile-social-card {


    width:100%;


    margin-top:25px;


    padding:25px;


    background:

    rgba(255,255,255,0.05);


    border:

    1px solid color-mix(in srgb, var(--accent) 35%, transparent);


    border-radius:18px;


    backdrop-filter:blur(10px);


    text-align:center;


}




.profile-social-card h2 {


    color:

    var(--accent);


    margin-bottom:20px;


}





/* Make social cards line up nicely */


.social-grid {


    display:flex;


    justify-content:center;


    flex-wrap:wrap;


    gap:15px;


}
/* =====================================
   PROFILE BIO CARD SPACING FIX
===================================== */


.profile-bio-card {

    padding-top:15px;

}



.profile-bio-card h2 {

    margin-top:0;

    margin-bottom:15px;

}
.social-discord {

    text-align:center;

    margin-top:20px;

    margin-bottom:20px;

}



.social-discord h3 {

    margin-bottom:8px;

}



.social-discord p {

    opacity:.85;

    font-size:1.05rem;

}
#rank-select {
    padding: 12px 15px;
    height: 45px;

    display: flex;
    align-items: center;

    cursor: pointer;
}
#admin-badge-list .badge {
    padding: 8px 14px;
    font-size: 14px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 5px;
}
#captain-controls h3 {
    margin-top: 25px;
    margin-bottom: 10px;
}

#captain-controls .btn {
    margin-top: 10px;
}
#admin-badge-list .badge {
    width: 150px;
    min-height: 80px;

    padding: 12px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    gap: 10px;

    font-size: 14px;
    text-align: center;

    border-radius: 15px;
}


#admin-badge-list .badge .btn {
    padding: 6px 14px;
    font-size: 12px;
    margin: 0;
}
.forgot-password {

    display:block;

    margin-top:20px;

    color:#7fd1ff;

    text-decoration:none;

    transition:.3s ease;

}


.forgot-password:hover {

    color:#4da3ff;

    text-shadow:
    0 0 10px #4da3ff;

}
/* ===================================== */
/* Password Recovery Pages */
/* ===================================== */


.password-page {

    min-height:calc(100vh - 120px);

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px 20px;

}



.password-card {

    width:100%;

    max-width:450px;

    padding:40px;


    background:
    rgba(255,255,255,0.05);


    border:

    1px solid rgba(77,163,255,0.35);


    border-radius:20px;


    backdrop-filter:blur(12px);


    box-shadow:

    0 0 30px rgba(77,163,255,0.25);


    text-align:center;


    animation:

    passwordCardEnter .6s ease;

}




.password-card h1 {

    color:white;

    font-size:32px;

    margin-bottom:10px;

    text-shadow:

    0 0 15px rgba(77,163,255,0.7);

}




.password-subtitle {

    color:#c5d4ff;

    margin-bottom:30px;

    line-height:1.5;

}




.password-input {

    width:100%;

    margin-bottom:20px;

    text-align:left;

}




.password-input label {

    display:block;

    color:white;

    margin-bottom:8px;

    font-size:14px;

}




.password-input input {

    width:100%;

    padding:14px 16px;


    background:

    rgba(255,255,255,0.08);


    border:

    1px solid rgba(77,163,255,0.5);


    border-radius:12px;


    color:white;


    font-size:16px;


    outline:none;


    transition:.3s ease;


}




.password-input input::placeholder {

    color:

    rgba(255,255,255,0.5);

}




.password-input input:focus {


    border-color:#4da3ff;


    box-shadow:

    0 0 20px rgba(77,163,255,0.5);


}




.password-button {

    width:100%;

    margin-top:10px;

}




.password-message {

    min-height:25px;

    margin-top:20px;

    color:#7fd1ff;

}




.password-link {

    display:block;

    margin-top:20px;

    color:#7fd1ff;

    text-decoration:none;

    transition:.3s ease;

}




.password-link:hover {

    color:#4da3ff;

    text-shadow:

    0 0 10px #4da3ff;

}





@keyframes passwordCardEnter {


from {

    opacity:0;

    transform:
    translateY(30px);

}



to {

    opacity:1;

    transform:
    translateY(0);

}


}





@media(max-width:768px){


.password-card {

    padding:25px;

}



.password-card h1 {

    font-size:26px;

}


}
.account-link {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto;
    white-space: nowrap;
}


.account-link a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 10px;
    transition: 0.3s;
}


.account-link a:hover {
    background: rgba(77,163,255,0.2);
}
/* ============================= */
/* FINAL NAVBAR FIX */
/* ============================= */

.navbar {

    display:flex;
    align-items:center;
    width:100%;

    padding:20px 60px;

    background:
    rgba(10,15,30,0.85);

    backdrop-filter:blur(10px);

    position:sticky;
    top:0;

    z-index:1000;

}


/* Logo */

.logo {

    flex-shrink:0;

}



/* Main navigation */

.nav-links {

    display:flex;

    align-items:center;

    gap:25px;

    list-style:none;

    margin-left:30px;

    padding:0;

    flex:1;

}



/* Account area */

.account-link {

    display:flex;

    align-items:center;

    gap:15px;

    flex-shrink:0;

}



/* All navbar links */

.navbar a,
.navbar button {

    white-space:nowrap;

}



/* Account buttons */

.account-link a {

    color:white;

    text-decoration:none;

    padding:10px 15px;

    border-radius:10px;

    transition:.3s ease;

}



.account-link a:hover {

    background:
    rgba(77,163,255,0.2);

    color:#7fd1ff;

}



/* Mobile */

@media(max-width:768px){

    .navbar {

        padding:20px;

        flex-wrap:wrap;

    }


    .nav-links {

        margin-left:0;

    }


    .account-link {

        width:100%;

        justify-content:center;

        margin-top:15px;

    }

}
/* =============================
   HOME INTRO
============================= */

.home-intro {

    max-width:900px;

    margin:50px auto;

    padding:35px;

    text-align:center;


    background:
    rgba(255,255,255,0.05);


    border:
    1px solid rgba(77,163,255,0.35);


    border-radius:20px;


    backdrop-filter:blur(10px);


    box-shadow:
    0 0 25px rgba(77,163,255,0.2);

}



.home-intro h1 {

    color:#4da3ff;

    font-size:2.5rem;

    margin-bottom:20px;

    text-shadow:
    0 0 15px rgba(77,163,255,0.7);

}



.home-intro p {

    color:#d0d7ff;

    line-height:1.8;

    font-size:1.1rem;

    margin-bottom:15px;

}




@media(max-width:768px){

    .home-intro {

        margin:30px 15px;

        padding:25px;

    }


    .home-intro h1 {

        font-size:2rem;

    }


}
/* =====================================
   Meetup Calendar UI
===================================== */


/* Calendar buttons */
.calendar-btn,
.meetup-btn,
.submit-btn,
.accept-btn,
.decline-btn {

    background: rgba(77, 163, 255, 0.15);

    color: white;

    border: 1px solid rgba(77, 163, 255, 0.6);

    border-radius: 12px;

    padding: 12px 22px;

    font-size: 16px;

    cursor: pointer;

    transition: 0.3s ease;

    backdrop-filter: blur(8px);

    box-shadow:
        0 0 10px rgba(77,163,255,0.25);

}



.calendar-btn:hover,
.meetup-btn:hover,
.submit-btn:hover,
.accept-btn:hover,
.decline-btn:hover {

    transform: translateY(-3px);

    background: rgba(77, 163, 255, 0.3);

    box-shadow:
        0 0 20px rgba(77,163,255,0.6);

}



/* Text inputs + dropdowns */

.calendar-input,
.meetup-input,
select,
textarea {

    width: 100%;

    padding: 12px;

    margin-top: 8px;

    background: rgba(255,255,255,0.05);

    color: white;

    border: 1px solid rgba(77,163,255,0.5);

    border-radius: 10px;

    outline: none;

    font-size: 16px;

    backdrop-filter: blur(8px);

    transition: 0.3s ease;

}



.calendar-input:focus,
.meetup-input:focus,
select:focus,
textarea:focus {

    border-color: #4da3ff;

    box-shadow:
        0 0 15px rgba(77,163,255,0.5);

}



/* Dropdown option colors */

select option {

    background: #0b1020;

    color: white;

}



/* Calendar card */

.calendar-card {

    max-width: 900px;

    margin: 40px auto;

    padding: 30px;

    background: rgba(255,255,255,0.05);

    border-radius: 20px;

    border: 1px solid rgba(77,163,255,0.25);

    backdrop-filter: blur(10px);

    box-shadow:
        0 0 25px rgba(77,163,255,0.15);

}



/* Calendar day boxes */

.calendar-day {

    background: rgba(255,255,255,0.04);

    border: 1px solid rgba(77,163,255,0.25);

    border-radius: 12px;

    padding: 15px;

    min-height: 90px;

    cursor: pointer;

    transition: 0.3s ease;

}



.calendar-day:hover {

    background: rgba(77,163,255,0.15);

    transform: translateY(-4px);

    box-shadow:
        0 0 15px rgba(77,163,255,0.4);

}



/* Scheduled event blocks */

.calendar-event {

    margin-top: 8px;

    padding: 8px;

    border-radius: 8px;

    background: rgba(77,163,255,0.2);

    border-left: 3px solid #4da3ff;

    font-size: 14px;

}



/* Labels */

.meetup-label {

    color: white;

    font-size: 16px;

    margin-bottom: 5px;

    display: block;

}
/* =====================================
   REAL CALENDAR DESIGN
===================================== */

.calendar-container {

    max-width: 1100px;

    margin: 50px auto;

    padding: 25px;

    background: rgba(255,255,255,0.05);

    border: 1px solid rgba(77,163,255,0.3);

    border-radius: 20px;

    backdrop-filter: blur(12px);

    box-shadow:
    0 0 30px rgba(77,163,255,0.25);

}


/* Month title */

.calendar-title {

    text-align:center;

    color:white;

    font-size:32px;

    margin-bottom:25px;

}



/* Week header */

.calendar-days-header {

    display:grid;

    grid-template-columns:repeat(7,1fr);

    gap:8px;

    margin-bottom:8px;

}


.calendar-days-header div {

    text-align:center;

    color:#4da3ff;

    font-weight:bold;

    padding:10px;

}



/* Actual calendar */

.calendar {

    display:grid;

    grid-template-columns:repeat(7,1fr);

    gap:8px;

}



/* Each date box */

.calendar-box {

    min-height:120px;

    background:

    rgba(255,255,255,0.06);

    border:

    1px solid rgba(77,163,255,0.25);

    border-radius:12px;

    padding:10px;

    position:relative;

    color:white;

    transition:.25s;

}



.calendar-box:hover {

    background:

    rgba(77,163,255,0.18);

    transform:translateY(-3px);

    box-shadow:

    0 0 15px rgba(77,163,255,.4);

}



/* Number in top right */

.calendar-number {

    position:absolute;

    top:8px;

    right:10px;

    font-size:18px;

    font-weight:bold;

}



/* Empty spaces */

.calendar-empty {

    min-height:120px;

}



/* Current day */

.current-day {

    border:

    2px solid #4da3ff;

}



/* Event */

.calendar-event {

    margin-top:30px;

    padding:6px;

    border-radius:8px;

    background:

    rgba(77,163,255,.25);

    font-size:13px;

}



/* Mobile */

@media(max-width:700px){

    .calendar-box,
    .calendar-empty {

        min-height:70px;

    }


    .calendar-event {

        display:none;

    }

}
#calendar-container{

margin-top:30px;

}



#calendar{

display:grid;

grid-template-columns:
repeat(7,1fr);

gap:10px;

margin-top:20px;

}



.calendar-day{

aspect-ratio:1;

border-radius:15px;

background:
rgba(255,255,255,0.05);

border:
1px solid rgba(77,163,255,0.4);

color:white;

font-size:18px;

cursor:pointer;

transition:.3s;

}



.calendar-day:hover{

transform:translateY(-5px);

box-shadow:
0 0 15px #4da3ff;

}



.calendar-day.empty{

visibility:hidden;

}



#meetup-form{

margin-top:30px;

display:flex;

flex-direction:column;

gap:15px;

}



#meetup-form input,
#meetup-form select,
#meetup-form textarea{


background:
rgba(255,255,255,0.05);

border:
1px solid #4da3ff;

border-radius:12px;

padding:12px;

color:white;

}

/* Meetup Calendar Weekday Header */

.calendar-weekdays {

    display: grid;

    grid-template-columns: repeat(7, 1fr);

    gap: 10px;

    margin-bottom: 10px;

    text-align: center;

    font-weight: bold;

    color: white;

}



.calendar-weekdays div {

    padding: 10px;

    background: rgba(255,255,255,0.05);

    border: 1px solid rgba(77,163,255,0.4);

    border-radius: 12px;

}
.disabled-day {

    opacity: 0.35;

    cursor: not-allowed;

    border-color: rgba(255,255,255,0.1);

}


.disabled-day:hover {

    transform:none;

    box-shadow:none;

}
.scheduled-day {

    border-color:#4da3ff;

    box-shadow:
    0 0 12px #4da3ff;

}


.scheduled-day::after {

    content:" 📅";

}
.meetup-request-card {

    background:
    rgba(255,255,255,0.05);

    border:
    1px solid rgba(77,163,255,0.4);

    padding:
    20px;

    margin:
    15px auto;

    border-radius:
    15px;

    max-width:
    700px;

}


.meetup-request-card button {

    padding:
    10px 18px;

    margin:
    5px;

    border-radius:
    10px;

    cursor:pointer;

}
/* ==========================
   Captain Panel
========================== */


.captain-status {

    margin: 20px auto;

    padding: 15px;

    max-width: 700px;

    text-align: center;

    background:
    rgba(77,163,255,0.15);

    border:
    1px solid rgba(77,163,255,0.5);

    border-radius: 15px;

    font-weight: bold;

}



.captain-section {

    margin-top: 30px;

    padding: 20px;

    background:
    rgba(255,255,255,0.05);

    border-radius: 20px;

    border:
    1px solid rgba(255,255,255,0.1);

}




.meetup-request-card {

    background:
    rgba(0,0,0,0.25);

    padding: 20px;

    margin: 15px auto;

    border-radius: 15px;

    max-width: 600px;

    border:
    1px solid rgba(77,163,255,0.3);

    transition: 0.3s;

}



.meetup-request-card:hover {

    transform:
    translateY(-5px);

    border-color:
    #4da3ff;

}



.meetup-request-card button {


    padding: 10px 18px;

    margin: 8px;

    border-radius: 10px;

    cursor: pointer;

    border: none;

    font-weight: bold;

}




.meetup-request-card .approve {

    background:
    #4da3ff;

    color:white;

}



.meetup-request-card .deny {

    background:
    rgba(255,80,80,0.8);

    color:white;

}



.meetup-request-card .cancel {

    background:
    rgba(255,160,0,0.8);

    color:white;

}
/* =========================
   Meetup Popup
========================= */


.meetup-popup{

    display:none;

    position:fixed;

    inset:0;

    background:
    rgba(0,0,0,0.65);

    backdrop-filter:
    blur(5px);

    justify-content:center;

    align-items:center;

    z-index:9999;

}



.meetup-popup.show{

    display:flex;

    animation:
    fadeIn .25s ease;

}



.meetup-popup-content{


    width:350px;

    max-width:90%;

    padding:25px;


    background:
    rgba(11,16,32,0.95);


    border:

    1px solid #4da3ff;


    border-radius:20px;


    box-shadow:

    0 0 25px
    rgba(77,163,255,.7);


    text-align:center;


    color:white;


    position:relative;


    animation:

    popupIn .3s ease;


}



.meetup-popup-content h2{

    color:#4da3ff;

}



#close-meetup-popup{


    position:absolute;


    right:15px;

    top:15px;


    background:none;


    border:none;


    color:white;


    font-size:18px;


    cursor:pointer;


}



#meetup-popup-info p{


    margin:12px;


    font-size:16px;


}





@keyframes popupIn{


from{

    transform:
    scale(.7);

    opacity:0;

}


to{

    transform:
    scale(1);

    opacity:1;

}


}



@keyframes fadeIn{


from{

opacity:0;

}


to{

opacity:1;

}


}
.calendar-header{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    margin-bottom:20px;

}

.calendar-nav{

    background:#1d3557;

    color:white;

    border:none;

    padding:10px 16px;

    border-radius:10px;

    cursor:pointer;

    font-size:20px;

    transition:.2s;

}

.calendar-nav:hover{

    background:#457b9d;

    transform:scale(1.05);

}